/* DamTorty v2: style strony głównej (SPEC-v2-home, sekcje 2-5). Po tokens.css.
   Zasady: komponent = jedna klasa (BEM), style bazowe w :where(), kolory wyłącznie z tokenów.
   Każdy blok ma albo miękki kształt (łuk, koło, pigułka, fala), albo cienką ramkę w tuszu. Cienie tylko na naklejce i przy hover.
   Kolory kontekstowe: --link, --script, --focus (krem/biel: Malina; róż: Malina ciemna / tusz; tusz: Mąka). */

/* ==========================================================================
   0. Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, fieldset, legend, ul, ol) { margin: 0; }
:where(fieldset, legend) { padding: 0; }
:where(fieldset) { border: 0; min-width: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }
:where(input, button, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where(address) { font-style: normal; }
:where(h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote, label, legend) { overflow-wrap: break-word; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--header-offset) + var(--s-4));
}

/* Do lg stały pasek kontaktu na dole: fokus i kotwice lądują nad nim (WCAG 2.4.11) */
@media (max-width: 1023px) {
  html { scroll-padding-bottom: calc(var(--contact-bar-h) + env(safe-area-inset-bottom) + var(--s-2)); }
}

/* Płynne przewijanie dopiero od html.is-ready (site.js, initHashLanding: po load albo przy pierwszym ruchu czytelnika).
   Pierwszy skok do kotwicy z adresu jest natychmiastowy: przy smooth przeglądarka jechała od góry przez całe intro
   do celu policzonego na czcionce zapasowej i lądowała 130-300 px za daleko. Bez JS przewijanie zostaje natychmiastowe */
@media (prefers-reduced-motion: no-preference) {
  html.is-ready { scroll-behavior: smooth; }
}

/* Apfel Grotezk (Collletttivo, SIL Open Font License 1.1, licencja: assets/fonts/ApfelGrotezk-OFL.txt): krój nagłówka
   jak u Bernice Bakery (decyzja 2026-10-01). Fett = 600 (linki, jak u Bernice), Satt = 800 (aktywna sekcja) */
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../fonts/ApfelGrotezk-Fett.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../fonts/ApfelGrotezk-Satt.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. Baza
   ========================================================================== */

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Obrócone i wystające dekoracje nigdy nie poszerzają strony (test: scrollWidth === innerWidth) */
main,
.site-footer { overflow-x: clip; }

::selection { background: var(--c-pink); color: var(--c-ink); }

:where(h1, h2, h3, h4) {
  font-family: var(--ff-display);
  font-weight: 700;
  color: inherit;
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: var(--tr-h1);
  font-variation-settings: "opsz" 96;
}

/* H2 sekcji: zwężone wersaliki (Druk u Le Pain Quotidien); w HTML zdanie jak w v1 */
:where(h2) {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}

:where(h3) {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  font-stretch: 95%;
}

:where(p) { max-width: var(--measure); text-wrap: pretty; }

:where(a) {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}

@media (hover: hover) {
  :where(a):where(:hover) { text-decoration-thickness: 2px; }
}

:where(strong, b) { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Kontekst: róż (pasy, panele, kafel kalkulatora, most) */
.section--pink,
.panel,
.frame__cell--pink,
.bridge {
  --link: var(--c-accent-deep);
  --script: var(--c-accent-deep);
  --focus: var(--c-ink);
}

/* Białe karty w różowych sekcjach wracają do Maliny */
.flavour,
.card-cake,
.fact,
.tile--frame,
.hours {
  --link: var(--c-accent);
  --focus: var(--c-accent);
}

/* Ikony Phosphor ze sprite'a */
:where(svg).ph {
  display: inline-block;
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
  vertical-align: middle;
}

/* Placeholder faktu: [..] w Popiele ciemnym, kursywą */
.ph:not(svg) {
  color: var(--c-muted);
  font-family: var(--ff-text);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
}
.btn--primary .ph:not(svg),
.contact-bar__link--primary .ph:not(svg) { color: inherit; }

/* ==========================================================================
   2. Narzędzia
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-ink-dark);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; color: var(--c-ink-dark); outline-color: var(--c-accent); }
main[tabindex="-1"]:focus { outline: none; }

.nowrap { white-space: nowrap; }
.note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
.actions--center { justify-content: center; }

.link-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-family: var(--ff-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.2;
}
.link-icon svg { width: var(--icon-md); height: var(--icon-md); transition: transform var(--dur-1) var(--ease); }

@media (hover: hover) {
  .link-icon--arrow:hover svg { transform: translateX(3px); }
}

@media (max-width: 1023px) { .only-lg-up { display: none !important; } }
@media (min-width: 1024px) { .only-below-lg { display: none !important; } }
@media (max-width: 1279px) { .only-xl-up { display: none !important; } }
@media (min-width: 1280px) { .only-below-xl { display: none !important; } }

/* ==========================================================================
   3. Kontener, siatki, sekcje, nagłówki sekcji
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-2,
.grid-3,
.grid-4,
.grid-2x2,
.grid-4-tight,
.grid-cakes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
.grid-2x2,
.grid-4-tight,
.grid-cakes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-tight);
}

@media (min-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-2,
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2x2 { gap: var(--gap); }
  .grid-cakes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4,
  .grid-4-tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-4-tight,
  .grid-cakes { gap: var(--gap); }
}

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--pink { background: var(--c-pink); }
.section--wave { padding-bottom: 0; }

.section-head {
  position: relative;
  max-width: 780px;
  margin-bottom: var(--section-head-gap);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .overline { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: var(--s-4); }

/* Nadtytuł standardowy: wersaliki 13 px w tuszu, kropka w Różu marki */
.overline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: none;
  margin-bottom: var(--s-3);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.overline::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* Akcent pisany nad H2 (Le Pain Quotidien): tylko Okazje, Smaki, Pracownia */
.overline--script {
  position: relative;
  z-index: var(--z-content);
  display: block;
  width: fit-content;
  margin-bottom: -8px;
  font-family: var(--ff-script);
  font-size: var(--fs-script);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--script);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.overline--script::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-lead);
}

/* ==========================================================================
   4. Pasek wersji roboczej (3.15)
   ========================================================================== */

.draft-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--s-4);
  padding: var(--s-1) var(--gutter);
  border-bottom: var(--bw-hair) solid var(--c-ink);
  background: var(--c-butter);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}
.draft-note__text { max-width: none; }
.draft-note__text svg { width: 16px; height: 16px; margin: -2px 6px 0 0; }

/* Telefon: tekst 12 px w najwyżej dwóch liniach, do lewej (pasek ok. 38 px zamiast 68) */
@media (max-width: 767px) {
  .draft-note {
    font-size: var(--fs-bar);
    line-height: 1.2;
    text-align: left;
  }
  .draft-note__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .draft-note__text svg { display: none; }
}

/* ==========================================================================
   5. Obrazy: ramki, łuki, etykiety (3.3)
   ========================================================================== */

.photo {
  position: relative;
  display: block;
  margin: 0;
}
.photo img,
.photo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, auto);
  object-fit: cover;
  object-position: var(--photo-pos, 50% 50%);
  border-radius: var(--photo-r, 0);
  background: var(--c-tint);
}
.photo--3x4 { --ratio: 3 / 4; }
.photo--4x5 { --ratio: 4 / 5; }
.photo--3x2 { --ratio: 3 / 2; }
.photo--16x9 { --ratio: 16 / 9; }
.photo--4x3 { --ratio: 4 / 3; }

/* Etykieta „Tu zdjęcie…”: biała pigułka z obrysem, lewy dolny róg */
.photo-tag {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 2 * var(--s-3));
  padding: 3px 10px 3px 8px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-tag);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.photo-tag svg { width: var(--icon-sm); height: var(--icon-sm); }

@media (max-width: 479px) {
  .grid-2x2 .photo-tag,
  .grid-4-tight .photo-tag,
  .grid-cakes .photo-tag {
    bottom: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    gap: 3px;
    padding: 2px 6px 2px 5px;
    font-size: var(--fs-tag-sm);
  }
  .grid-4-tight .photo-tag svg,
  .grid-cakes .photo-tag svg { width: 11px; height: 11px; }
}

/* Ramka Levain: 1 px tuszu, promień 16 */
.frame-photo {
  --photo-r: 0;
  overflow: hidden;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}

/* Kolorowy kształt za zdjęciem (Baked By K) */
.shape-behind {
  position: relative;
  isolation: isolate;
  border-radius: var(--photo-r, var(--r-lg));
}
.shape-behind::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-brand);
  transform: translate(12px, 12px);
}

/* Łuk z płaskim dołem (Baked By K): 7:8, pigułka na dolnej krawędzi */
.arch-flat { width: 100%; }
.arch-flat img {
  aspect-ratio: 7 / 8;
  border-radius: 50% 50% 0 0 / 43.75% 43.75% 0 0;
}
.arch-flat .photo-tag { bottom: 36px; }
.arch-flat__pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  white-space: nowrap;
  transform: translate(-50%, 50%);
}

/* ==========================================================================
   6. Przyciski (3.11)
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 48px;
  padding: 0 var(--s-5);
  border: var(--bw-btn) solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-btn);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn svg { width: var(--icon-md); height: var(--icon-md); flex: none; }

.btn--primary {
  min-height: 52px;
  padding: 0 28px;
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-dark);
}
.btn--primary:focus-visible { outline-offset: 3px; }
.btn--primary:active { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: var(--c-white); transform: none; }

.btn--secondary {
  background: var(--c-white);
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.btn--secondary:active { background: var(--c-pink); }

.btn--ghost {
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  border-radius: var(--r-xs);
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 4px;
}

.btn--sm {
  min-height: 44px;
  padding: 0 var(--s-3);
  font-size: var(--fs-label);
  letter-spacing: .06em;
}

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

/* Przycisk z kropką (Baked By K): koło 56 px w Różu marki za początkiem napisu */
.btn--dot {
  isolation: isolate;
  justify-content: flex-start;
  min-height: 56px;
  padding: 16px 24px 16px 36px;
  border: 0;
  background: none;
  color: var(--c-ink);
  letter-spacing: var(--tr-label);
  text-align: left;
}
.btn--dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  transform: translateY(-50%);
  transition: width var(--dur-dot) var(--ease);
}
.btn--dot:active { transform: scale(.98); }
.btn--dot:focus-visible { outline-offset: 4px; border-radius: var(--r-pill); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--c-accent-deep);
    border-color: var(--c-accent-deep);
    color: var(--c-white);
    transform: translateY(-1px);
  }
  .btn--secondary:hover { background: var(--c-tint); color: var(--c-ink); }
  .btn--ghost:hover { color: var(--link); }
  .btn--dot:hover { color: var(--c-ink); }
  .btn--dot:hover::before { width: 100%; }
}

/* Hover „fill” (SPEC-v2-animacje 4.2, Bernice Relative_To_Mouse; decyzja 2026-09-29): koło w kolorze wypełnienia
   rozlewa się od miejsca, w którym wjechał kursor (--mouse-x, --mouse-y w px z site.js, initFillHover), i zwija się
   do miejsca wyjazdu. top i left bez przejścia (koło zawsze startuje w punkcie wejścia), przejście tylko na scale.
   Przycisk jest kontekstem warstw (isolation), więc koło z z-index: -1 leży nad jego własnym tłem, a pod napisem
   i ikoną. overflow: clip przycina koło do wnętrza pigułki: obrys .btn--secondary (Kakao) zostaje widoczny nad
   Cukrem pudrem, a w .btn--primary margines obrysu wpuszcza koło także na obrys w kolorze tła (bez
   overflow-clip-margin, np. Safari, obrys zostaje w Kakao). Tło, obrys i kolor napisu stoją, więc napis trzyma AA na obu
   tłach w każdej klatce. Fokus klawiatury: to samo wypełnienie od środka plus obrys fokusu (outline nie jest
   przycinany). Poza efektem .btn--offset (wysyłka w kreatorze): jego przesunięty obrys ::after wystaje poza pigułkę */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:not(.btn--offset),
  .btn--secondary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
  }
  .btn--primary:not(.btn--offset) { overflow-clip-margin: var(--bw-btn); }
  .btn--primary:not(.btn--offset)::before,
  .btn--secondary::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: var(--fill-size);   /* 200% u Bernice; zapas, żeby koło z rogu szerokiej pigułki objęło też jej dalszy koniec */
    aspect-ratio: 1;
    border-radius: var(--r-pill);
    background: var(--c-accent-deep);
    translate: -50% -50%;
    scale: 0;
    pointer-events: none;
    transition: scale var(--dur-fill) var(--ease-fill);
  }
  .btn--secondary::before { background: var(--c-tint); }
  .btn--secondary:active::before { background: var(--c-pink); }   /* wciśnięcie jak dziś (Róż pastelowy) */
  :is(.btn--primary:not(.btn--offset), .btn--secondary):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible)::before { scale: 1; }
  /* Dzisiejsza zmiana tła na hover przechodzi na koło: tło, obrys i napis zostają spoczynkowe */
  .btn--primary:not(.btn--offset):hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ink-dark); }
  .btn--secondary:hover { background: var(--c-white); }
}


/* Przycisk-ikona 44x44: białe koło, obrys 1 px */
.btn-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease);
}
.btn-icon svg { width: var(--icon-md); height: var(--icon-md); }
.btn-icon[aria-disabled="true"] { cursor: not-allowed; }

@media (hover: hover) {
  .btn-icon:not([aria-disabled="true"]):hover { background: var(--c-tint); }
}

/* ==========================================================================
   7. Pigułki, plakietki, chipy (3.10)
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: none;
  min-height: 36px;
  padding: 0 var(--s-4);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-pill-sm);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
}
.pill svg { width: 18px; height: 18px; }
.pill--butter { background: var(--c-butter); }
.pill--pink { background: var(--c-pink); }
.pill--white { background: var(--c-white); }

@media (min-width: 768px) {
  .pill { min-height: 40px; padding: 0 20px; font-size: var(--fs-pill); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 28px;
  padding: 0 var(--s-3);
  border: var(--bw-hair) solid transparent;
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.badge svg { width: 16px; height: 16px; }
.badge--price { background: var(--c-butter); border-color: var(--c-accent-2); color: var(--c-accent-2); }
.badge--season { background: var(--c-butter); border-color: var(--c-ink); color: var(--c-ink); }
.badge--status { background: var(--c-status-tint); color: var(--c-status); }
.badge--new { background: var(--c-tint); }

/* Chip-link i chip-wybór (pole leży pod tekstem, więc działa bez :has) */
.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip[aria-current]:not([aria-current="false"]) { background: var(--c-ink); color: var(--c-ink-dark); }
.chip__input {
  position: absolute;
  inset: -1px;
  z-index: -1;
  margin: 0;
  border: var(--bw-hair) solid transparent;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-1) var(--ease);
}
.chip__input:checked { background: var(--c-ink); border-color: var(--c-ink); }
.chip__input:checked + .chip__label { color: var(--c-ink-dark); }
.chip__label { transition: color var(--dur-1) var(--ease); }
.chip:has(.chip__input:focus-visible) { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.chip__input:focus-visible { outline: none; }

@media (hover: hover) {
  .chip:hover { background: var(--c-tint); }
  .chip[aria-current]:not([aria-current="false"]):hover { background: var(--c-accent-deep); }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 767px) {
  .chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin: -5px calc(-1 * var(--gutter));
    padding: 5px var(--gutter);
    scrollbar-width: none;
  }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll > * { flex: none; scroll-snap-align: start; }
}

/* ==========================================================================
   8. Dekoracje: doodle, gwiazdki, naklejka, pieczęć, tekst po łuku (3.1, 3.4, 3.7, 3.8)
   ========================================================================== */

/* Doodle liniowe: jeden kolor, jedna grubość kreski (ok. 2 px niezależnie od rozmiaru) */
.doodle {
  position: absolute;
  z-index: var(--z-deco);
  display: block;
  width: var(--dd-size, 64px);
  height: var(--dd-size, 64px);
  color: var(--c-ink);
  stroke-width: var(--dd-sw, 3);
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--dd-rot, 0deg));
}
.doodle--32 { --dd-size: 32px; --dd-sw: 6; }
.doodle--48 { --dd-size: 48px; --dd-sw: 4; }
.doodle--64 { --dd-size: 64px; --dd-sw: 3; }

/* Doodle rysowane (decyzja 2026-09-26): kreska rysuje się raz przy wejściu w widok, jak podpis piórem.
   Kształty w symbolach dd-* mają pathLength="1": kreska 1 i przerwa 2 to cały kształt i pusty odcinek za nim;
   dasharray i dashoffset dziedziczą się do drzewa <use>. Klasy nadaje site.js (initDoodles) tylko doodlom spoza
   ekranu przy starcie; po animacji je zdejmuje. Start 1,02, nie 1: kreska kończąca się dokładnie na początku
   kształtu zostawiłaby kropkę z okrągłego zakończenia */
@media (prefers-reduced-motion: no-preference) {
  .doodle.is-armed { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
  .doodle.is-drawing { animation: dt-draw var(--dur-draw) var(--ease) both; }
}

@keyframes dt-draw {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}

/* Gwiazdka-pieczątka (The Olly) */
.stamp { display: block; flex: none; overflow: visible; }
.stamp--sm { fill: var(--c-brand); }

/* Naklejka-CTA (Bernice): prawdziwy link, tekst po okręgu, obrót -12° */
.sticker {
  position: absolute;
  z-index: var(--z-sticker);
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: var(--sh-sticker);
  color: var(--c-ink);
  transform: rotate(-12deg);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.sticker__bg { fill: var(--c-brand); }
.sticker__ring { fill: none; stroke: var(--c-ink); stroke-width: 2; }
.sticker__text {
  fill: var(--c-ink);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: .14em;
}
.sticker__text--lg { display: none; font-size: var(--fs-sticker); }
.sticker__text--sm { font-size: var(--fs-sticker-sm); }
.sticker__icon { fill: var(--c-ink); }
.sticker__spin { transform-box: view-box; transform-origin: 50% 50%; }
.sticker:active { transform: rotate(-12deg) scale(.98); }
.sticker:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; }

@media (min-width: 768px) {
  .sticker { width: 200px; height: 200px; }
  .sticker__text--lg { display: inline; }
  .sticker__text--sm { display: none; }
}

@media (hover: hover) {
  .sticker:hover { transform: rotate(-6deg) scale(1.05); }
}

/* Pętle: tylko bez ograniczenia ruchu; pauza przy hover i fokusie (przycisk pauzy przy wstędze usunięty 2026-09-26 na prośbę właściciela) */
@media (prefers-reduced-motion: no-preference) {
  .sticker__spin { animation: dt-spin var(--dur-sticker) linear infinite; }
  .sticker:hover .sticker__spin,
  .sticker:focus-visible .sticker__spin { animation-play-state: paused; }
}

@keyframes dt-spin {
  to { transform: rotate(360deg); }
}

/* Pieczęć DamTorty: napis na okręgu, w środku logo klientki (<image>, 2026-10-06); dziś tylko w nagłówku Pracowni */
.seal {
  --seal-bg: var(--c-white);
  display: block;
  flex: none;
  width: 80px;
  height: auto;
  aspect-ratio: 1;
  color: var(--c-accent-2);
  transform: rotate(6deg);
}
.seal__bg { fill: var(--seal-bg); }
.seal__ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.seal__text {
  fill: currentColor;
  font-family: var(--ff-display);
  font-size: var(--fs-seal);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ==========================================================================
   9. Nagłówek i menu (SPEC-v2-naglowek; decyzja 2026-09-30: nagłówek Bernice Bakery zamiast „tubelight”)
   Pasek bez ramek: przezroczysty na górze strony, biały pas zjeżdża od góry po przewinięciu (.is-solid z initScrolled).
   Od lg logo, sześć linków wersalikami z hoverem liter (initNavLetters) i ikony; do lg logo, ikony i hamburger,
   który otwiera menu pełnoekranowe z kołem Kakao rosnącym od przycisku (initMenu).
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.site-header__top {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: 0 var(--gutter);
}
/* Biały pas: schowany nad paskiem, zjeżdża przy .is-solid. Przejście działa dopiero od .is-settled (site.js),
   więc przy starcie i przeładowaniu w środku strony pas stoi od razu na miejscu. Bez site.js stoi zawsze */
.site-header__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white);
  translate: 0 -101%;
  pointer-events: none;
}
.site-header.is-settled .site-header__top::before { transition: translate var(--dur-band) var(--ease-fill); }
.site-header.is-solid .site-header__top::before,
html:not(.has-site-js) .site-header__top::before { translate: 0 0; }
.site-header.is-menu-open .site-header__top::before { translate: 0 -101%; transition-duration: 0s; }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
}
/* Fokus w przyklejonym pasku nie przewija strony: pasek leży w strefie scroll-padding-top, więc przeglądarka
   przy każdym Tab próbowała go „odsłonić” i przewijała treść o pół ekranu. Obszar przewijania elementów paska
   jest przesunięty 200 px w dół (ujemny margines u góry, dodatni u dołu), czyli zawsze w widocznej części okna */
.site-header__bar :where(a, button) { scroll-margin: -200px 0 200px; }
.site-header__top :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; }
.site-header__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-1);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: none;
}
/* Znak z logo klientki (uwagi 2026-10-08): tort na różowym krążku, uproszczony do małego rozmiaru (pełne logo z pierścieniem
   i napisem jest w pieczęci Pracowni). Wymiary jak w atrybutach width i height, więc nagłówek nie skacze przy ładowaniu */
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__word {
  font-family: var(--ff-display);
  font-size: var(--fs-logo);
  line-height: 1;
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -.01em;
}
.logo--light { color: var(--c-ink-dark); }

.site-nav { display: none; }

/* Ikony paska (jak koszyk i lupa u Bernice): telefon i aparat w celach 44 px; numer obok słuchawki od xl */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: none;
}
.header-icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.header-icon__text {
  display: none;
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.menu-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle svg { width: var(--icon-lg); height: var(--icon-lg); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline-block; }
/* Przycisk menu działa dopiero z site.js (initMenu). Klasę .js daje skrypt w <head> (SPEC-v2-animacje 1.1), więc
   wariant bez JS opiera się na znaczniku has-site-js z końca startu site.js: bez JS, przy błędzie site.js i zanim
   site.js dojdzie widać link do oferty w stopce, nie martwy przycisk */
html:not(.has-site-js) .menu-toggle:not(.menu-toggle--nojs) { display: none; }
.menu-toggle--nojs { display: none; }
html:not(.has-site-js) .menu-toggle--nojs { display: inline-grid; }

/* Menu pełnoekranowe (Bernice Menu_Drawer): koło w Różu pastelowym (decyzja 2026-10-01, wcześniej Kakao) rośnie
   od środka przycisku (--menu-ox i --menu-oy z initMenu), treść w Kakao pojawia się po nim. Pasek nagłówka zostaje
   nad kołem, logo i X w Kakao. Zamknięcie od razu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.mobile-menu::before {
  content: "";
  position: absolute;
  left: var(--menu-ox, 100%);
  top: var(--menu-oy, 0px);
  width: var(--menu-circle);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-pink);
  translate: -50% -50%;
  scale: 1;
  transition: scale var(--dur-menu) var(--ease-fill);
}
/* Treść przewija się osobno, więc koło nie powiększa obszaru przewijania */
.mobile-menu__inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--menu-top, var(--header-h)) + var(--s-5)) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  color: var(--c-ink);
  transition: opacity var(--dur-2) var(--ease) var(--delay-menu);
}
@starting-style {
  .mobile-menu::before { scale: 0; }
  .mobile-menu__inner { opacity: 0; }
}
.mobile-menu__list { display: grid; gap: var(--s-5); }
.mobile-menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-menu);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tr-menu);
  text-transform: uppercase;
  text-decoration: none;
}
/* Aktywna sekcja czarno-biała (decyzja 2026-10-01): krój Satt w pigułce Kakao z napisem w Bieli, jak na pasku
   desktopu; ujemny margines trzyma napis w tej samej linii co pozostałe pozycje */
.mobile-menu__link[aria-current] {
  margin-inline: calc(-1 * var(--s-3));
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 800;
}
.mobile-menu__contacts { display: grid; gap: var(--s-1); margin-top: var(--s-6); }
.mobile-menu__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.mobile-menu__contact svg { width: var(--icon-lg); height: var(--icon-lg); }
/* Adres e-mail w menu: łamie się przed „@” (wbr), w ostateczności w środku, zamiast wystawać przy 320 px */
.mobile-menu__mail span { min-width: 0; overflow-wrap: anywhere; }
.mobile-menu__social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.mobile-menu__social a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-ink);
}
.mobile-menu__social svg { width: var(--icon-lg); height: var(--icon-lg); }
.mobile-menu :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; }

@media (hover: hover) {
  .mobile-menu__link:not([aria-current]):hover,
  .mobile-menu__contact:hover { text-decoration: underline 2px; text-underline-offset: 6px; }
}

/* Otwarte menu: logo i X w Kakao nad różowym kołem; telefon i aparat są w menu jako pełne wiersze */
.site-header.is-menu-open :is(.logo, .menu-toggle) { color: var(--c-ink); }
.site-header.is-menu-open .header-icon { display: none; }
.site-header.is-menu-open .site-header__top :focus-visible { outline-color: var(--c-ink); }
body.is-menu-open { overflow: hidden; }

/* Desktop: logo przy lewej krawędzi kontenera, sześć linków wersalikami w Apfel Grotezk (Fett jak u Bernice), ikony przy prawej */
@media (min-width: 1024px) {
  .site-header__bar { gap: var(--s-6); }
  .site-header .logo { gap: 12px; }
  .site-header .logo__word { font-size: 22px; }
  .site-nav {
    position: relative;
    display: block;
    flex: none;
  }
  .site-nav__list { display: flex; }
  /* Kolumna: ::before z tekstem w kroju Satt (wysokość 0, niewidoczny) rezerwuje szerokość pogrubionej wersji, więc
     przy zmianie aktywnej sekcji sąsiednie linki nie skaczą. Kerning i ligatury wyłączone od początku: podział na litery
     (initNavLetters) nie zmienia szerokości słowa */
  .site-nav__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--nav-link-x);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    font-family: var(--ff-nav);
    font-size: var(--fs-nav);
    line-height: 1;
    font-weight: 600;
    letter-spacing: var(--tr-nav);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    font-kerning: none;
    font-variant-ligatures: none;
  }
  .site-nav__link::before {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 800;
  }
  /* Aktualna sekcja (scroll-spy, aria-current): biało-czarna (decyzja 2026-10-01), krój Satt w Bieli na czarnej
     pigułce, która jedzie do linku (dawna lampka bez różu). Kolor napisu zmienia się w tempie jazdy pigułki */
  .site-nav__link { transition: color var(--lamp-dur) var(--ease); }
  .site-nav__link[aria-current] { font-weight: 800; }
  /* Biel tylko na pigułce: bez JS (pigułki nie ma) aktywny link zostaje w Kakao i jest widoczny (2026-10-05) */
  .site-nav.has-lamp .site-nav__link[aria-current] { color: var(--c-white); }

  /* Pigułka aktywnej sekcji w Kakao: pozycję i szerokość ustawia site.js (translateX i width z zapamiętanych wymiarów
     linków), jazda sprężyną jak w nawigacji „tubelight” */
  .site-nav__lamp {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 44px;
    margin-top: -22px;
    border-radius: var(--r-pill);
    background: var(--c-ink);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--lamp-dur) var(--lamp-ease), width var(--lamp-dur) var(--lamp-ease), opacity var(--dur-2) var(--ease);
  }
  .site-nav.has-lamp .site-nav__lamp { opacity: 1; }
  /* Pierwsze pojawienie i zmiana rozmiaru: pigułka staje na miejscu bez przejazdu, tylko się rozjaśnia */
  .site-nav__lamp.is-jump { transition: opacity var(--dur-2) var(--ease); }
  .header-icon__text { font-family: var(--ff-nav); font-weight: 600; font-size: var(--fs-nav); }
  .site-header__end { gap: var(--s-3); }
  .site-header:not(.is-compact) :is(.menu-toggle, .mobile-menu) { display: none !important; }
  /* Pasek bez miejsca (initHeaderFit, np. powiększony tekst): lista znika, hamburger otwiera menu pełnoekranowe */
  .site-header.is-compact .site-nav { display: none; }
}
@media (min-width: 1280px) {
  .site-header .logo__word { font-size: 23px; }
  .site-nav__link { padding: 0 var(--nav-link-x-xl); font-size: var(--fs-nav-xl); }
  .header-icon__text { display: inline; }
}

/* Hover jak Bernice Grow_Anim, tylko dla myszy: link skala 0,95 (bez zmiany koloru, nagłówek biało-czarny), a litera
   pod kursorem rośnie do 1,22 i przez 3 s wolno opada (spany liter dokłada initNavLetters przy pierwszym najechaniu) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-nav__link { transition: color var(--lamp-dur) var(--ease), scale var(--dur-link) var(--ease-letter); }
  .header-icon { transition: scale var(--dur-link) var(--ease-letter); }
  .site-nav__link:hover,
  .header-icon:hover { scale: var(--scale-link); }
}
/* Litery linków nagłówka i stopki (stopka ma je na każdej szerokości z myszą) */
@media (hover: hover) and (pointer: fine) {
  .site-nav__word { display: inline-block; white-space: nowrap; }
  .site-nav__ch { display: inline-block; transition: scale var(--dur-letter) var(--ease-letter); }
  .site-nav__ch:hover { scale: var(--scale-letter); transition-duration: var(--dur-letter-in); }
}

/* ==========================================================================
   10a. Intro „To nie jest tylko tort” (SPEC-v2-intro)
   Stan bazowy = sekcja statyczna: bez JS, przy prefers-reduced-motion i w niskim oknie (tekst ostry, tort pod tekstem).
   Tryb żywy włącza site.js (initIntro: klasa .is-live, zmienne --q, --f, --travel, --k, --n0, --t). Jego reguły leżą
   w @media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px), więc klasa pozostała po zmianie
   preferencji w locie niczego nie przypina (zabezpieczenie z 4.1), a wydruk zawsze dostaje wersję statyczną.
   ========================================================================== */

.intro {
  --intro-u: 100svh;               /* „u”: wysokość sceny */
  --intro-top: 0px;                /* gdzie scena się przykleja */
  --intro-track: 3;                /* tor przypięcia w jednostkach u */
  /* Tor użyty w układzie: site.js może go wydłużyć (--intro-track-fit), gdy linii jest dużo, a okno niskie (tempo ≥ 120 px
     przewijania na linię); nigdy nie skraca poniżej --intro-track */
  --intro-track-live: max(var(--intro-track), var(--intro-track-fit, 0));
  --intro-win-top: 100px;          /* okno tekstu w scenie */
  --intro-win-bottom: 20%;
  --intro-skip-size: 48px;
  --intro-skip-bottom: calc(var(--contact-bar-h) + env(safe-area-inset-bottom) + 16px);   /* koło nad paskiem kontaktu */
  --intro-blur: 16px;              /* rozmycie słowa na dole okna */
  /* Początek tekstu w oknie (site.js czyta offsetTop): przy q = 0 środek drugiej linii ma n = 0,42, więc cała fraza
     „To nie jest tylko tort.” stoi ostra przy każdej wysokości okna */
  --intro-text-top: calc(58% - 1.47em);
  position: relative;
  background: var(--c-pink);
}
.intro__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  overflow: clip;
  padding: var(--s-7) var(--gutter);
}
.intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--c-tint) 0%, transparent 60%),
    var(--c-pink);
}
/* Ziarno tynku: szum sprowadzony do Kakao z kryciem ok. 0,11, kafelek 240 px (jedyna faktura na stronie).
   Osobny pseudo-element z literalnym url(): obrazek w tle elementu, którego styl przelicza się przy każdej zmianie
   --q, Chrome maluje i rasteryzuje od nowa w każdej klatce; tu styl nie zależy od --q, więc warstwa zostaje w pamięci */
.intro__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .227 0 0 0 0 .165 0 0 0 0 .188 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
}
/* Statycznie ziarno wygasa przy dolnej krawędzi: bez szwu na płaskim różu hero A */
.intro:not(.is-live) .intro__bg::before {
  -webkit-mask-image: linear-gradient(to bottom, var(--c-ink) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--c-ink) 55%, transparent);
}
.intro__window {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}
.intro__text {
  position: relative;
  width: 100%;
  max-width: min(100%, 720px);
  margin: 0;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: clamp(36px, 2.6vw + 25.9px, 64px);
  line-height: .98;
  font-weight: 800;
  font-stretch: 75%;
  font-variation-settings: "opsz" 96;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
.intro__p { max-width: none; margin: 0; }
.intro__p + .intro__p { margin-top: .6em; }
.intro__s { display: block; text-wrap: balance; }
/* Kopia dla czytnika: bez łamania w polu 1 px (:where(p) daje text-wrap: pretty, które znosi nowrap) */
.intro__sr p { margin: 0; white-space: nowrap; }
.intro__w { display: inline-block; }
.intro__cake {
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
  height: auto;
  margin-top: var(--s-5);
}
.intro__skip { display: none; }
.intro__arrows { position: relative; display: block; width: 20px; height: 20px; }
.intro__arrows svg { position: absolute; inset: 0; width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .intro { --intro-u: calc(100svh - var(--header-h)); --intro-top: var(--header-h); }
}
@media (max-width: 767px) {
  .intro { --intro-win-top: 40px; --intro-win-bottom: 12%; --intro-blur: 12px; }
  /* Statycznie tort szerszy niż kolumna tekstu (ilustracja ma puste boki), przekrój czytelny */
  .intro__cake { width: 200%; max-width: none; margin-inline: -50%; }
}
@media (min-width: 1024px) {
  .intro { --intro-skip-bottom: 32px; }
}
@supports not (height: 100svh) {
  .intro { --intro-u: 100vh; }
  @media (max-width: 1023px) {
    .intro { --intro-u: calc(100vh - var(--header-h)); }
  }
}
/* Statycznie od lg sekcja leży pod pływającym nagłówkiem (main > .intro, sekcja 11): tekst zaczyna się pod nim */
@media (min-width: 1024px) {
  .intro__stage { padding-top: calc(var(--header-h) + var(--header-offset) + var(--s-7)); }
}

/* Tryb żywy: scena przyklejona na torze (track + 1) × u, hero A wjeżdża od dołu (ujemny margines) */
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .intro.is-live {
    height: calc((var(--intro-track-live) + 1) * var(--intro-u));
    margin-bottom: calc(-1 * var(--intro-u));
    background: var(--c-bg);
  }
  .intro.is-live .intro__stage {
    position: sticky;
    top: var(--intro-top);
    display: block;
    height: var(--intro-u);
    padding: 0;
    opacity: calc(1 - var(--f, 0));
    contain: layout paint;
  }
  /* Za torem scena jest zgaszona (f = 1), ale zostaje w drzewie dostępności; warstwy kompozytora zwalniamy jawnie */
  .intro.is-live.is-done .intro__stage { pointer-events: none; }
  .intro.is-live.is-done .intro__w,
  .intro.is-live.is-done .intro__text,
  .intro.is-live.is-done .intro__bg,
  .intro.is-live.is-done .intro__cake { will-change: auto; }
  /* Miękka podłoga za tortem (Róż głęboki od dołu), tylko w trybie żywym: statycznie byłby szew z hero A */
  .intro.is-live .intro__bg {
    inset: 0 0 -20%;
    background:
      radial-gradient(70% 45% at 50% 100%, var(--c-pink-deep), transparent 70%),
      radial-gradient(120% 70% at 50% 0%, var(--c-tint) 0%, transparent 60%),
      var(--c-pink);
    scale: calc(1 + .15 * var(--q, 0));
    will-change: transform;
  }
  /* Okno tekstu, tort i koło podnosi ten sam --intro-lead: na pierwszym ekranie z paskiem roboczym układ jest taki
     jak docelowy (bez paska lead = 0) */
  .intro.is-live .intro__window {
    position: absolute;
    inset: var(--intro-win-top) 0 var(--intro-win-bottom);
    display: block;
    translate: 0 calc(-1 * var(--intro-lead, 0px));
  }
  .intro.is-live .intro__text {
    position: absolute;
    top: var(--intro-text-top);
    left: 0;
    right: 0;
    width: min(90%, 560px);
    max-width: none;
    margin-inline: auto;
    /* Rozmiar zależy też od wysokości: na niskich laptopach (720-768 px) linie mieszczą się w oknie */
    font-size: clamp(56px, 3.8vw + 41px, 96px);
    font-size: clamp(56px, min(3.8vw + 41px, 11.5svh), 96px);
    transform: translate3d(0, calc(-1 * var(--q, 0) * var(--travel, 0px)), 0);
    will-change: transform;
  }
  /* n: pozycja środka słowa w oknie (0 = dół, 1 = góra), t: próg ostrości (rośnie w linii od lewej), b: rozmycie.
     Zanim site.js zmierzy linie (--n0 brak), słowa stoją ostre: n = 0,45 leży w pasie ostrości */
  .intro.is-live .intro__w {
    --n: calc(var(--n0, .45) + var(--q, 0) * var(--k, 0));
    --b: clamp(0, 1 - var(--n) / var(--t, .3), 1);
    filter: blur(calc(var(--intro-blur) * var(--b)));
    translate: 0 calc(12px * var(--b));
    opacity: clamp(0, min(var(--n) / var(--t, .3), 2 - 2 * var(--n)), 1);
    will-change: transform, filter, opacity;
  }
  /* Tort zakotwiczony do koła „Pomiń wstęp”: dół koła wypada na viewBox y 392 (bok dolnego piętra), więc
     przekrój górnego piętra (y 100-250) leży nad kołem i nad paskiem kontaktu. 21,6% = (500 - 392) / 500 wysokości obrazka */
  .intro.is-live .intro__cake {
    position: absolute;
    left: 50%;
    bottom: var(--intro-skip-bottom);
    z-index: 2;
    width: 200%;
    width: min(200%, 88svh);           /* niskie telefony (Safari z paskami ok. 660 px): maliny pod drugą linią */
    max-width: none;
    height: auto;
    margin: 0;
    translate: -50% calc(21.6% - var(--intro-lead, 0px) + 60px * var(--q, 0));
    scale: calc(1 + .15 * var(--q, 0));
    will-change: transform;
  }
  .intro.is-live .intro__skip {
    position: absolute;
    left: 50%;
    bottom: var(--intro-skip-bottom);
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--intro-skip-size);
    height: var(--intro-skip-size);
    border: var(--bw-hair) solid var(--c-ink);
    border-radius: 50%;
    background: var(--c-pink);
    color: var(--c-ink);
    overflow: hidden;
    translate: -50% calc(-1 * var(--intro-lead, 0px));   /* --intro-lead: pasek roboczy nad sceną (site.js) */
    /* Gaśnie do s = 0,5 u przy każdym torze (q = s / (run × u)); w tym samym punkcie site.js daje is-started */
    opacity: clamp(0, 1 - 2 * (var(--intro-track-live) - 1) * var(--q, 0), 1);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease);
  }
  .intro.is-live .intro__skip:focus-visible { opacity: 1; outline: 2px solid var(--c-ink); outline-offset: 3px; }
  .intro.is-started .intro__skip { visibility: hidden; }
  /* Pętla strzałek (1,4 s, w tym 0,75 s pauzy): pierwsza wypada dołem koła, druga wjeżdża z góry; tylko gdy koło widać */
  .intro.is-live:not(.is-started) .intro__arrows svg:first-child { animation: intro-arrow-out 1.4s ease-in-out infinite; }
  .intro.is-live:not(.is-started) .intro__arrows svg:last-child { animation: intro-arrow-in 1.4s ease-in-out infinite; }
}
@keyframes intro-arrow-out {
  0%, 53% { translate: 0 0; }
  100% { translate: 0 var(--intro-skip-size); }
}
@keyframes intro-arrow-in {
  0%, 53% { translate: 0 calc(-1 * var(--intro-skip-size)); }
  100% { translate: 0 0; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px) and (hover: hover) {
  .intro.is-live .intro__skip:hover { background: var(--c-white); }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px) and (min-width: 768px) {
  /* Wysokość tak, żeby maliny (viewBox y 55) zostały pod pasem ostrości: 65% wysokości okna minus stała; w pionie
     (tablety) dodatkowy limit od szerokości, żeby góra tortu nie wchodziła w pas ostrości */
  .intro.is-live .intro__cake {
    width: auto;
    height: min(calc(65vh - 92px), 60vw);
    height: min(calc(65svh - 92px), 60vw);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px) and (min-width: 1024px) {
  .intro.is-live { --intro-skip-size: 64px; }
  .intro.is-live .intro__arrows,
  .intro.is-live .intro__arrows svg { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   10b. Intro: zdjęcie tortu zamiast ilustracji (kadr 1536x1048 z Artlist, poglądowe)
   Kadr: tort od ok. 18% (maliny) do ok. 88% (deska) wysokości, przekrój 29-81%, boki to ściana w kolorze
   --c-pink. Maska wygasza górę i boki, więc zdjęcie wtapia się w tło sceny bez krawędzi. Klasa --foto wygrywa
   specyficznością z regułami ilustracji (sekcja 10a), niezależnie od kolejności w pliku.
   -------------------------------------------------------------------------- */
.intro .intro__cake--foto {
  width: min(100%, 780px);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, var(--c-ink) 24%),
    linear-gradient(to right, transparent 0%, var(--c-ink) 14%, var(--c-ink) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, var(--c-ink) 24%),
    linear-gradient(to right, transparent 0%, var(--c-ink) 14%, var(--c-ink) 86%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 767px) {
  .intro .intro__cake--foto { width: 132%; max-width: none; margin-inline: -16%; }
}
/* Zdjęcie sceny i wycięty tort (tylko tryb żywy): jedno ostre zdjęcie na cały ekran jak u LPQ.
   Tło i warstwa z tortem mają ten sam kadr (cover, dół do dołu), więc wycięty tort leży dokładnie na torcie ze zdjęcia,
   a tekst przesuwa się między nimi. Obie warstwy rosną razem od dolnej krawędzi (1 do 1,1), nigdy osobno. */
.intro__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.intro__bg picture, .intro__cut picture { display: none; }
.intro__cut { display: none; }
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .intro.is-live .intro__bg picture,
  .intro.is-live .intro__cut picture { display: block; position: absolute; inset: 0; }
  .intro.is-live .intro__bg::before { content: none; }
  .intro.is-live .intro__bg,
  .intro.is-live .intro__cut {
    position: absolute;
    inset: 0;
    scale: calc(1 + .1 * var(--q, 0));
    transform-origin: 50% 100%;
    will-change: transform;
  }
  .intro.is-live .intro__cut { display: block; z-index: 2; pointer-events: none; }
  .intro.is-live.is-done .intro__cut { will-change: auto; }
  /* Kadr ze sceny statycznej nie jest potrzebny w trybie żywym (loading=lazy: przy display:none się nie pobiera) */
  .intro.is-live .intro__cake--foto { display: none; }
}

/* ==========================================================================
   13. Wstęga falista z tekstem (3.2)
   ========================================================================== */

.ribbon {
  --focus: var(--c-ink); /* pas w Różu marki pod obrysem: Kakao ma kontrast min. 5:1 do kremu, różu i Różu marki */
  position: relative;
  z-index: var(--z-ribbon);
  margin-block: -28px -16px;
  pointer-events: none;
}
.ribbon__clip { overflow-x: clip; overflow-y: visible; }
.ribbon__svg {
  display: block;
  width: 130vw;
  max-width: none;
  height: auto;
  aspect-ratio: 800 / 200;
  margin-left: calc(50% - 65vw);
  overflow: visible;
  transform: rotate(-4deg);
}
.ribbon__lg { display: none; }
.ribbon__band {
  fill: none;
  stroke: var(--c-brand);
  stroke-width: 76;
  pointer-events: stroke;
}
.ribbon__text {
  fill: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-ribbon-sm);
  font-weight: 700;
  letter-spacing: .1em;
  pointer-events: none;
}

@media (min-width: 768px) {
  .ribbon { margin-block: -44px -24px; }
  .ribbon__svg {
    width: 120vw;
    aspect-ratio: 1600 / 240;
    margin-left: calc(50% - 60vw);
    transform: rotate(-6deg);
  }
  .ribbon__lg { display: inline; }
  .ribbon__sm { display: none; }
  .ribbon__band { stroke-width: 64; }
  .ribbon__text { font-size: var(--fs-ribbon); }
}

/* ==========================================================================
   14. Falisty dzielnik i dekoracje typograficzne (3.6)
   ========================================================================== */

.wave-divider {
  position: relative;
  z-index: var(--z-content);
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(40px, 6vw, 88px);
  margin-top: calc(var(--section-y) / 2);
  margin-bottom: -1px;
  /* Ujemny margines przechodzi przez dół sekcji (padding-bottom: 0), więc tło sekcji i fala kończyły się na tym samym
     ułamku piksela: tło przyciągnięte do pełnego piksela wystawało spod wygładzonej krawędzi SVG jako różowa linia
     (2026-10-05). Fala zjeżdża o 1 px i przykrywa ostatni rząd tła; nadmiar leży na następnej sekcji w tym samym kolorze */
  translate: 0 1px;
}
.wave-divider--to-bg { fill: var(--c-bg); }
.wave-divider--to-pink { fill: var(--c-pink); }

/* Pochylona wstęga słów za kartami (Bernice) */
.words {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
  overflow: clip;
  pointer-events: none;
}
.words__inner {
  position: absolute;
  left: 50%;
  top: 24%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%) rotate(-6deg);
}
.words__row {
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-words);
  line-height: .9;
  font-weight: 800;
  font-stretch: 75%;
  color: var(--c-pink-deep);
  white-space: nowrap;
  translate: var(--drift, 0px) 0;
}
.words__row--alt { display: none; }

@media (min-width: 768px) {
  .words__inner { transform: translate(-50%, -50%) rotate(-8deg); }
  .words__row--alt { display: block; transform: translateX(-12%); translate: calc(-1 * var(--drift, 0px)) 0; }
}

/* Echo-typografia (The Olly) */
.echo {
  position: absolute;
  top: var(--s-4);
  left: max(var(--gutter), calc((100% - var(--container)) / 2)); /* równo z lewą krawędzią treści, bez ucięcia */
  z-index: var(--z-deco);
  display: flex;
  gap: .25em;
  max-width: none;
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-echo);
  line-height: .9;
  font-weight: 800;
  font-stretch: 75%;
  color: var(--c-pink-deep);
  white-space: nowrap;
  pointer-events: none;
}
.echo span:nth-child(1) { opacity: .7; }
.echo span:nth-child(2) { opacity: .4; }
.echo span:nth-child(3) { opacity: .2; }

/* ==========================================================================
   15. Karty i kafle (3.5)
   ========================================================================== */

/* Karta-łuk okazji: cały kafel jednym <a>; kontener zapytań dla promienia łuku */
.tile {
  color: var(--c-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tile--arch {
  container-type: inline-size;
  display: block;
  height: 100%;
}
.tile--arch:focus-visible { outline: none; }
.tile--arch:focus-visible .arch-card { outline: 2px solid var(--focus); outline-offset: 3px; }
.arch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--arch-pad);
  border: var(--bw-arch) solid var(--c-ink);
  border-radius: var(--r-arch);
  border-radius: 50cqi 50cqi var(--r-lg) var(--r-lg);
  background: var(--c-white);
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.arch-card__media img {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 12px 12px / 37.5% 37.5% 12px 12px;
}
.arch-card .photo-tag { left: auto; right: 6px; bottom: 6px; }
.tile__body { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 10px 2px 0; }
.tile--arch .tile__title {
  font-family: var(--ff-display);
  font-size: var(--fs-tile-title-sm);
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 90%;
  text-transform: uppercase;
}
.tile--arch .tile__text { display: none; }
.tile__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  margin-top: auto;
  border: var(--bw-btn) solid var(--c-ink);
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tile__title + .tile__go,
.tile__text + .tile__go { margin-top: auto; }
.tile--arch .tile__body > :last-child { margin-top: auto; }
.tile--arch .tile__title { margin-bottom: var(--s-3); }
.tile__go svg { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .tile--arch .tile__title { font-size: var(--fs-tile-title); }
  .tile--arch .tile__text {
    display: block;
    margin: -6px 0 var(--s-4);
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--c-muted);
  }
  .tile__go { min-height: 48px; font-size: var(--fs-btn); }
  .tile__body { padding: 12px 8px 4px; }
  .arch-card .photo-tag { right: var(--s-3); bottom: var(--s-3); }
  .arch-card__media img { border-radius: 50% 50% var(--r-md) var(--r-md) / 37.5% 37.5% var(--r-md) var(--r-md); }
}

@media (hover: hover) {
  .tile--arch:hover .arch-card { box-shadow: var(--sh-lift); transform: translateY(-2px); }
  .tile--arch:hover .tile__go { background: var(--c-ink); color: var(--c-ink-dark); }
}

/* Kafel-wiersz w ramce (Le Pain Quotidien) */
.tile--frame {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--s-4);
  min-height: 96px;
  padding: var(--s-4);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: background-color var(--dur-1) var(--ease);
}
.tile__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-pink);
}
.tile__icon svg { width: var(--icon-step); height: var(--icon-step); }
.tile--frame .tile__body { padding: 0; gap: 2px; }
.tile--frame .tile__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 700;
}
.tile--frame .tile__text { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.tile__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: 50%;
  transition: transform var(--dur-1) var(--ease);
}
.tile__arrow svg { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .tile--frame { min-height: 120px; padding: var(--s-5); }
}

@media (hover: hover) {
  .tile--frame:hover { background: var(--c-tint); }
  .tile--frame:hover .tile__arrow { transform: translateX(4px); }
}

/* Ramka z cienką linią (Le Pain Quotidien): linie to prześwit tła tuszu */
.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bw-hair);
  overflow: clip;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-ink);
}
.frame__cell { min-width: 0; padding: var(--frame-pad); background: var(--c-white); }
.frame__cell--pink { background: var(--c-pink); }

@media (min-width: 1024px) {
  .frame--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frame--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* Kalkulator wyśrodkowany w pół różu: pod spodem nie zostaje pusty pas (decyzja 2026-09-28) */
  .cennik__calc-cell { display: grid; align-content: center; }
  .cennik__calc-cell .calc--sticky { position: static; }
}

/* Panel Levain: róż, duży promień, zdjęcie wystaje ponad krawędź */
.panel {
  position: relative;
  margin-top: var(--s-5);
  padding: var(--panel-pad) var(--panel-pad-x);
  border-radius: var(--r-xl);
  background: var(--c-pink);
}
.panel__photo {
  position: relative;
  z-index: var(--z-content);
  order: -1;
  margin-top: calc(-1 * var(--panel-pad) - 24px);
}

@media (min-width: 1024px) {
  .panel { margin-top: var(--s-6); }
  .panel__photo { margin-top: calc(-1 * var(--panel-pad) - 32px); }
}

/* Karta tortu */
.card-cake {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: box-shadow var(--dur-1) var(--ease);
}
.card-cake__media {
  position: relative;
  display: block;
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
}
.card-cake__media .photo { --photo-r: var(--r-sm); }
.card-cake__zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-white);
}
.card-cake__zoom svg { width: 16px; height: 16px; }
.card-cake__body { display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 10px 2px 0; }
.card-cake__title {
  font-family: var(--ff-display);
  font-size: var(--fs-card-title-sm);
  line-height: 1.25;
  font-weight: 700;
  font-stretch: 100%;
}
.card-cake__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-muted); }
.card-cake__cta { margin-top: auto; padding-top: var(--s-2); }
.card-cake__cta .btn { width: 100%; white-space: normal; }

@media (min-width: 768px) {
  .card-cake { padding: 12px; }
  .card-cake__title { font-size: var(--fs-card-title); }
  .card-cake__zoom { width: 36px; height: 36px; }
  .card-cake__zoom svg { width: 18px; height: 18px; }
}

@media (hover: hover) {
  .card-cake:hover { box-shadow: var(--sh-lift); }
}

/* Karta smaku */
.flavour {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--card-pad);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.flavour__link { margin-top: auto; }
.flavour__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.flavour__desc { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
/* Pozycje grupy w wierszu z kropką między nimi (kropka z obramowania, nie znak „·”).
   Kropka leży na lewej krawędzi pozycji; lista wystaje o --s-2 w lewo, a clip-path ucina ten pas,
   więc pozycja na początku każdego wiersza nie ma kropki. */
.flavour__items {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--s-2));
  clip-path: inset(0 0 0 var(--s-2));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.flavour__items > li {
  position: relative;
  padding-inline: var(--s-2);
}
.flavour__items > li::before {
  content: "";
  position: absolute;
  top: calc(var(--lh-small) * .5em - var(--s-1) / 2);
  left: calc(var(--s-1) / -2);
  border: calc(var(--s-1) / 2) solid var(--c-brand);
  border-radius: 50%;
}

/* Blok godzin (The Olly): lista w białej ramce */
.info-list { display: grid; }
.hours {
  padding: 4px var(--s-5);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.info-list__row { padding-block: var(--s-3); }
.info-list__row + .info-list__row { border-top: var(--bw-hair) solid var(--c-hair); }
.info-list dt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.info-list dt svg { width: var(--icon-md); height: var(--icon-md); }
.wizyta__inline-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Długi adres e-mail łamie się zamiast wystawać przy 320 px */
.wizyta__mail { overflow-wrap: anywhere; }
/* Link w zdaniu (wiersz Telefon): pole trafienia z pseudoelementu wyśrodkowanego na linku (jak .text-link
   w page-form.css), więc wysokość wiersza i odstępy w zdaniu się nie zmieniają; numer nie łamie się w środku.
   Szerokość co najmniej 44 px, a w pionie wysokość linii: pole 44 px wchodziło na link z sąsiedniej linii
   (na telefonie dotknięcie dołu 516 099 127 wybierało 507 532 562 albo SMS); linki w zdaniu to wyjątek WCAG 2.5.8 */
.wizyta__text-link {
  position: relative;
  white-space: nowrap;
}
.wizyta__text-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2 * var(--s-2));
  min-width: 44px;
  min-height: 24px;
  height: 1.5em;
  height: 1lh;
  transform: translate(-50%, -50%);
}
.info-list dd {
  padding-left: 28px;
  font-size: var(--fs-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Godziny w formacie klientki (2026-10-08): wiersz na zakres dni, godziny do prawej, poniedziałek sezonowy pod spodem */
.hours__week { display: grid; grid-template-columns: minmax(0, 1fr); }
.hours__line { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s-4); }
.hours__time { white-space: nowrap; }
.hours__more { margin-top: 2px; }

/* ==========================================================================
   16. Formularz kalkulatora i tabela cen
   ========================================================================== */

.field { display: grid; gap: var(--s-2); min-width: 0; }
.field > label:not(.chip),
.field > legend {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 700;
}
.field > legend { margin-bottom: var(--s-2); }
.field-hint { max-width: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

:where(.field) :where(input:not([type="checkbox"], [type="radio"], [type="range"]), select) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
:where(.field) :where(input:focus-visible, select:focus-visible) { outline-color: var(--c-accent-deep); }
:where(.field) :where(select) {
  padding-right: 44px;
  background-image: var(--i-caret);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}
:where(.field) :where(input[type="number"]) { font-variant-numeric: tabular-nums; }

/* Suwak: site.js ustawia --range-fill; wypełnienie w tuszu */
input[type="range"] {
  --range-fill: 50%;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--c-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]:focus-visible { outline-color: var(--c-accent-deep); }
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background:
    linear-gradient(var(--c-ink), var(--c-ink)) 0 0 / var(--range-fill) 100% no-repeat,
    var(--c-white);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink);
}
input[type="range"]::-moz-range-track { height: 8px; border: var(--bw-hair) solid var(--c-ink); border-radius: var(--r-pill); background: var(--c-white); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--c-ink); }
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink);
}

.calc { display: grid; gap: var(--s-5); }
.calc__title { font-size: var(--fs-h3); }
.calc__guests {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--s-3);
  align-items: center;
}
.calc__output {
  display: block;
  padding: var(--s-4) var(--s-5);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.calc__num {
  font-family: var(--ff-display);
  font-size: var(--fs-number);
  line-height: .8;
  font-weight: 800;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;           /* przedział „3-4,5” nie łamie się po separatorze */
  color: var(--c-accent-2);
}
.calc__num--ink { color: var(--c-ink); }
.calc__num .ph:not(svg) { font-size: var(--fs-lead); }
.calc__note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.calc .btn { white-space: normal; padding-block: 10px; }

@media (min-width: 1024px) {
  .calc--sticky { position: sticky; top: 92px; }
}

.price-table { width: 100%; font-variant-numeric: tabular-nums; }
.price-table caption {
  padding-bottom: var(--s-3);
  caption-side: top;
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.price-table th,
.price-table td {
  padding: 14px 0;
  border-bottom: var(--bw-hair) solid var(--c-hair);
  text-align: left;
  vertical-align: baseline;
}
.price-table tr:first-child > * { border-top: var(--bw-hair) solid var(--c-ink); }
.price-table tr:last-child > * { border-bottom-color: var(--c-ink); }
.price-table th {
  padding-right: var(--s-4);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.35;
  font-weight: 400;
}
.price-table td {
  text-align: right;
  font-family: var(--ff-display);
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  font-weight: 700;
  font-stretch: 85%;
  white-space: nowrap;           /* stawka „od 140 zł/kg” w jednym wierszu */
  color: var(--c-accent-2);
}
.price-table td .ph:not(svg) { font-size: .8em; }
/* Dopisek pod nazwą pozycji (co wchodzi w cenę, minimum) */
.price-table__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
/* Druga tabela: dopłaty opisane słowami, więc mniejszy krój niż stawki za kilogram */
.price-table--doplaty { margin-top: var(--s-6); }
.price-table--doplaty th { width: 55%; }
.price-table--doplaty td {
  font-size: var(--fs-body);
  line-height: 1.35;
  white-space: normal;
}

/* ==========================================================================
   17. Wideo (filmy klientki 2026-10-05): Pracownia, karty Cukierni, „przed i po”
   Zdjęcie zostaje w układzie jako kadr zastępczy (bez JS, ograniczony ruch, brak pliku, wolne łącze);
   film leży na nim i pojawia się płynnie, gdy naprawdę gra (initVideoCards). Proporcja z --vc-ratio.
   ========================================================================== */

.video-card { margin: 0; }
/* isolation: Safari przycina wtedy grający film do zaokrąglonych rogów ramki także w przechylonym rodzicu */
.video-card__frame { position: relative; isolation: isolate; }
.video-card__poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--vc-ratio, 16 / 9);
  object-fit: cover;
  background: var(--c-tint);
}
.video-card .video-card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.video-card .video-card__video.is-ready { opacity: 1; }
.video-card__caption { margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

/* ==========================================================================
   18. Sekcje strony głównej (5)
   ========================================================================== */

/* 5.3 Okazje */
.okazje { padding-top: 72px; }
.okazje__doodle { display: block; right: 0; top: -30px; --dd-size: 48px; --dd-sw: 4; --dd-rot: 8deg; }
.okazje__rows { margin-top: var(--gap-tight); gap: var(--gap-tight); }

@media (min-width: 768px) {
  .okazje__doodle { --dd-size: 64px; --dd-sw: 3; right: -24px; top: 8px; }
  .okazje__head { max-width: 860px; padding-right: 96px; }
}
@media (min-width: 1024px) {
  .okazje__rows { margin-top: var(--s-5); gap: var(--gap); }
}

/* 5.4 Jak zamawiasz */
.step { display: flex; flex-direction: column; }
.step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.step__num {
  font-family: var(--ff-display);
  font-size: var(--fs-number);
  line-height: 1;
  font-weight: 800;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-2);
}
.step__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-pink);
}
.step__icon svg { width: var(--icon-step); height: var(--icon-step); }
.step h3 { margin-bottom: var(--s-3); }
.step p { max-width: none; }
.step__note { margin-top: var(--s-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.steps__actions { margin-top: var(--s-6); }

@media (max-width: 767px) {
  .steps__actions .btn--primary { width: 100%; }
}
@media (min-width: 1024px) {
  .step__head { margin-bottom: var(--s-6); }
}

/* 5.5 Co jest w środku */
.sklad__panel { display: grid; gap: var(--s-6); }
.sklad__body { min-width: 0; }
.quote {
  position: relative;
  margin: var(--s-4) 0 0;
  font-family: var(--ff-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: var(--tr-h2);
}
.quote :where(p) { max-width: 24ch; }
.quote__mark {
  display: block;
  margin: -34px 0 0;
  font-size: var(--fs-mark-sm);
  line-height: 1;
  font-weight: 800;
  opacity: .5;
  user-select: none;
}
.sklad__facts { margin-top: var(--s-6); }
.fact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.fact__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
}
.fact__badge .stamp--sm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-8deg);
}
.fact__badge svg.ph { position: relative; width: var(--icon-md); height: var(--icon-md); color: var(--c-ink); }
.fact__title {
  font-family: var(--ff-display);
  font-size: var(--fs-card-title);
  line-height: 1.2;
  font-weight: 700;
  font-stretch: 95%;
}
.fact p { max-width: none; font-size: var(--fs-small); line-height: 1.45; }
.sklad__doodle { right: -12px; top: -18px; --dd-rot: 14deg; display: none; }
.sklad__link { max-width: none; margin-top: var(--s-4); }

@media (min-width: 768px) {
  .fact {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: center;
    padding: 20px;
  }
  .fact__badge { width: 48px; height: 48px; }
  .fact__badge svg.ph { width: var(--icon-fact); height: var(--icon-fact); }
  .fact__title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .fact p { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  /* Zdjęcie i cytat obok siebie, cztery fakty jednym rzędem pod spodem (równowaga panelu) */
  .sklad__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "photo intro" "facts facts" "link link";
    gap: 0 var(--s-7);
    align-items: start;
  }
  .sklad__body { display: contents; }
  .panel__photo { grid-area: photo; max-width: 420px; }
  .sklad__intro { grid-area: intro; align-self: center; }
  .sklad__facts { grid-area: facts; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-7); }
  .sklad__link { grid-area: link; margin-top: var(--s-5); }
  .sklad__doodle { display: block; }
}

/* 5.7 Realizacje jak siatka produktów Bernice Bakery (decyzja 2026-10-01): bez wstęgi słów, pigułki kategorii z obrysem,
   kwadratowe zdjęcia bez ramek, tytuły wersalikami w Apfel Grotezk Satt, pod nimi kształt wersalikami i pełna pigułka
   „Chcę podobny” w Różu marki (napis Kakao 5,0:1). Tło od 2026-10-05: Róż pastelowy z falą na dole jak Smaki
   (.section--pink.section--wave), więc hover pigułki rozlewa Biel zamiast Różu pastelowego, który zlałby się z tłem */
.realizacje { overflow: clip; }
/* Pigułki w jednym rzędzie jak u Bernice: nagłówek sekcji bez limitu 780 px (lead trzyma własną miarę tekstu) */
.realizacje .section-head { max-width: none; }
.realizacje__chips { gap: var(--s-3); margin-top: var(--s-5); }
.realizacje__chips .chip {
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 2px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-nav);
  font-weight: 600;
  text-transform: uppercase;
}
.realizacje__grid { row-gap: var(--s-7); }
.realizacje .card-cake {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.realizacje .card-cake__media .photo { --ratio: 1 / 1; --photo-r: var(--r-lg); --photo-pos: 50% 55%; }
.realizacje .card-cake__zoom { display: none; }
.realizacje .card-cake__body { gap: var(--s-2); padding: var(--s-4) 0 0; }
.realizacje .card-cake__title {
  font-family: var(--ff-nav);
  font-size: var(--fs-card-title-sm);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
}
.realizacje .card-cake__meta {
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
}
.realizacje .card-cake__cta { padding-top: var(--s-3); }
.realizacje .card-cake__cta .btn {
  min-height: 48px;
  border: 0;
  background: var(--c-brand);
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: 0;
}
.realizacje .card-cake__cta .btn::before { background: var(--c-white); }
.realizacje .card-cake__cta .btn:active { background: var(--c-white); }

@media (hover: hover) {
  .realizacje .card-cake:hover { box-shadow: none; }
  .realizacje__chips .chip:hover { background: var(--c-ink); color: var(--c-white); }
  .realizacje .card-cake__cta .btn:hover { background: var(--c-brand); color: var(--c-ink); }
}
@media (min-width: 768px) {
  .realizacje__chips .chip { min-height: 52px; padding: 0 26px; font-size: var(--fs-nav-xl); }
  .realizacje .card-cake__title { font-size: var(--fs-tile-title-sm); }
  .realizacje .card-cake__cta .btn { min-height: 52px; font-size: var(--fs-nav-xl); }
}
@media (min-width: 1024px) {
  .realizacje__grid { column-gap: var(--s-6); row-gap: var(--s-8); }
  .realizacje .card-cake__title { font-size: var(--fs-tile-title); }
}
.realizacje__more { position: relative; margin-top: var(--s-7); }
.realizacje__more .btn--dot { width: 100%; }
.realizacje__doodle { display: none; }

@media (min-width: 768px) {
  .realizacje__more .btn--dot { width: auto; }
  .realizacje__doodle { position: static; display: block; --dd-rot: 10deg; }
}

/* 5.8 Cennik */
.cennik__note { margin-top: var(--s-5); font-size: var(--fs-small); line-height: var(--lh-small); }
.cennik__examples { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cennik__examples-lead { margin-top: var(--s-5); font-size: var(--fs-small); line-height: var(--lh-small); }
.cennik__examples-lead + .cennik__examples { margin-top: var(--s-3); }
.cennik__examples .badge {
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
}
/* Najwęższe telefony: węższe wypełnienie, żeby „30 osób: 3-4,5 kg, 315-473 zł” mieściło się w jednej linii;
   gdyby nie, liczby są spięte z jednostkami twardą spacją i wiersz łamie się przed całym przedziałem */
@media (max-width: 359px) {
  .cennik__examples .badge { padding-inline: var(--s-3); }
}

/* 5.9 Smaki */
.smaki__note { margin-top: var(--s-5); }

/* 5.10 Opinie: rząd kart przesuwający się bez końca (Bernice Testimonials_Scroller; SPEC-v2-opinie, decyzja 2026-10-03).
   Trzy stany, każdy znany przed pierwszym malowaniem (html.js ze skryptu w <head>, media query), więc bez przesunięć układu:
   1. ruch (.is-marquee z initReviews): wrapper przycina, tor jedzie animacją translate z Web Animations API (site.js);
   2. stan bazowy do md (bez JS, ograniczony ruch, brak API): rząd przewijany palcem i kółkiem ze scroll-snap, pasek ukryty,
      skrawek następnej karty zawsze widoczny; tabindex="0" ustawia stop(), gdy rząd rzeczywiście się przewija;
   3. stan bazowy od md: siatka zawijana (jak w wydruku), bo ukryty pasek nie dawałby czytelnikowi z myszą drogi do dalszych kart;
      bez JS z html:not(.js), z JS z klasy .is-static, którą stop() daje przy każdej przyczynie trybu statycznego.
   W rzędzie pierwsza karta stoi na --gutter (padding wrappera w stanie bazowym, padding toru w ruchu), a odstęp kart jest
   nie mniejszy niż gutter, więc przy zawinięciu pętli lewy skrawek okna jest pusty w obu klatkach i szew jest niewidoczny */
.opinie__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}
.opinie__rating svg { color: var(--c-ink); }
.opinie__marquee {
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-1) var(--gutter);            /* 4 px góra i dół: miejsce na obrys fokusu linków w kartach */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  outline-offset: calc(-1 * var(--s-1));         /* obrys fokusu wrappera na pełną szerokość okna widoczny w całości */
}
.opinie__marquee::-webkit-scrollbar { display: none; }
.opinie__track {
  display: flex;
  gap: var(--review-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opinie__item {
  display: flex;                                 /* figure rozciąga się do najwyższej karty w rzędzie */
  flex: none;
  width: var(--review-w);
  scroll-snap-align: start;
}
/* Stan bazowy od md: siatka zawijana w szerokości kontenera. Dwa bloki o tej samej treści: bez JS i w trybie statycznym
   z initReviews (.is-static: brak API, html.is-motion-paused, za mało opinii) oraz przy ograniczonym ruchu, także zanim
   site.js nadejdzie (sekcja 21 ma ten sam zestaw dla wydruku). Geometrię pętli (rząd bez zawijania) ma tylko stan
   „JS i ruch dozwolony” */
@media (min-width: 768px) {
  html:not(.js) .opinie__marquee,
  .opinie__marquee.is-static { overflow: visible; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
  html:not(.js) .opinie__track,
  .opinie__marquee.is-static .opinie__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--review-grid-min)), 1fr)); width: auto; }
  html:not(.js) .opinie__item,
  .opinie__marquee.is-static .opinie__item { width: auto; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .opinie__marquee { overflow: visible; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
  .opinie__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--review-grid-min)), 1fr)); width: auto; }
  .opinie__item { width: auto; }
}

/* Karta opinii (Bernice Testimonial): klasa .review-card, bo .review w page-form.css to przegląd zamówienia */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: var(--review-pad);
  border-radius: var(--r-review);
  background: var(--review-bg);
  color: var(--review-fg);
}
/* Polski cudzysłów otwierający leży przy linii bazowej, więc pusta część pola jest u góry: ujemny margines górny
   (u Bernice górny znak i ujemny margines dolny). Tusz znaku stoi --s-2 (8 px) pod paddingiem karty: 40 px od góry do md,
   56 px od md, jak u Bernice (56 px od góry i 49 od lewej przy paddingu 48), a nie wyżej niż od lewej; .634 to zmierzona
   metryka glifu „ w Apfel Grotezk 800 (odległość górnej krawędzi tuszu od górnej krawędzi pola przy line-height 1),
   nie token: stała kroju, jedno miejsce użycia */
.review-card__mark {
  display: block;
  margin: calc(var(--s-2) - .634 * var(--fs-mark)) 0 calc(-.1 * var(--fs-mark));
  font-family: var(--ff-nav);
  font-size: var(--fs-mark);
  line-height: 1;
  font-weight: 800;
  user-select: none;
}
.review-card__quote {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-review);
  line-height: var(--lh-review);
  font-weight: 600;
  font-stretch: 95%;
}
.review-card__quote :where(p) { max-width: none; margin: 0; }
/* Długie opinie z Google: najwyżej --review-lines linii i wielokropek, ale tylko w karcie, w której render odsłonił
   „Zobacz w Google” (klasa z initReviews): bez linku do całości nic nie przycinamy (prototyp, wariant B) */
.review-card--clamp .review-card__quote :where(p) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-lines);
  line-clamp: var(--review-lines);
}
.review-card__footer {
  display: grid;
  gap: var(--s-2);
  margin-top: auto;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.review-card__stars { display: inline-flex; gap: calc(var(--s-1) / 2); }
.review-card__stars svg { width: var(--icon-sm); height: var(--icon-sm); }
.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
}
.review-card__author { font-family: var(--ff-display); font-weight: 700; }
/* Link autora stoi osobno w wierszu flex, nie w zdaniu, więc wyjątek „inline” z 2.5.8 go nie obejmuje: cel 44 px jak reszta domu */
.review-card__author:is(a) { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-color: var(--review-muted); }
.review-card__avatar { width: var(--review-avatar); height: var(--review-avatar); border-radius: 50%; object-fit: cover; }
.review-card__occasion,
.review-card__source,
.review-card__translated,
.review-card .ph:not(svg) { color: var(--review-muted); }
.review-card__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.review-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  color: var(--link);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 700;
}
.review-card__link svg { width: var(--icon-sm); height: var(--icon-sm); }

/* Kolory jak u Bernice (niebieski marki / ciemny), u nas Róż pastelowy z Kakao i Kakao z Mąką. Pozycja w torze,
   nie tożsamość opinii: klony kontynuują rytm, a parzysta liczba kart w jednostce (initReviews) daje zgodność na szwie */
.opinie__item:nth-child(odd) {
  --review-bg: var(--c-pink);
  --review-fg: var(--c-ink);
  --review-muted: var(--c-muted);
  --link: var(--c-accent-deep);
  --focus: var(--c-ink);
}
.opinie__item:nth-child(even) {
  --review-bg: var(--c-ink);
  --review-fg: var(--c-ink-dark);
  --review-muted: var(--c-muted-dark);
  --link: var(--c-ink-dark);
  --focus: var(--c-ink-dark);
}
/* Alternatywa do decyzji właściciela (SPEC-v2-opinie 0.5 pkt 3): karty parzyste na Maśle zamiast Kakao, tekst jak na różu.
   Po akceptacji zastępuje blok :nth-child(even) wyżej:
   .opinie__item:nth-child(even) { --review-bg: var(--c-butter); --review-fg: var(--c-ink); --review-muted: var(--c-muted);
     --link: var(--c-accent-deep); --focus: var(--c-ink); } */

/* Tryb ruchu (.is-marquee z initReviews). Animacja nie jest w CSS: initReviews woła track.animate() z translate
   od 0 do zmierzonego przesunięcia jednostki (Web Animations API, SPEC-v2-opinie 5.3); pauza przez anim.pause().
   overflow: hidden przed clip to zapas dla Safari < 16 (focusin w JS zeruje wtedy scrollLeft) */
.opinie__marquee.is-marquee {
  overflow: hidden;
  overflow: clip;                                /* bez kontenera przewijania: fokus w karcie niczego nie przesuwa (dosunięcie robi JS, 5.4) */
  padding-inline: 0;
  scroll-snap-type: none;
}
.opinie__marquee.is-marquee .opinie__track {
  padding-inline-start: var(--gutter);
  will-change: transform;
}

.opinie__foot { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--section-head-gap); }

/* 5.11 Na co dzień */
.codzien__doodle { display: none; right: 0; bottom: -8px; --dd-rot: -8deg; }
.codzien__grid { row-gap: var(--s-7); }
.card-product { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card-product h3 { margin-top: var(--s-6); }
.card-product p { max-width: 34ch; margin-top: var(--s-2); }
.codzien__more { margin-top: var(--s-7); }
.codzien__more .btn--dot { width: 100%; }
.bridge {
  display: grid;
  background: var(--c-pink);
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-8);
  padding: var(--s-6) 20px;
  border-radius: var(--r-xl);
}
.bridge__text {
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-bridge-sm);
  line-height: 1.35;
  font-weight: 600;
}
.bridge__action .btn { width: 100%; }

@media (min-width: 768px) {
  .codzien__doodle { display: block; }
  .codzien__head { padding-right: 96px; }
  .codzien__more .btn--dot { width: auto; }
  .bridge { padding: 40px; }
  .bridge__text { font-size: var(--fs-bridge); }
}
@media (min-width: 1024px) {
  .bridge { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-7); }
  .bridge__action { justify-self: end; }
  .bridge__action .btn { width: auto; }
}

/* 5.12 Pracownia: od 2026-10-04 osobna podstrona pracownia.html (page-pracownia.css), wspólne klocki w sekcji 18b */

/* 5.13 Odwiedź nas */
.wizyta { padding-bottom: var(--s-7); }
.wizyta__grid { display: grid; gap: var(--s-5); }
.wizyta__media { display: grid; gap: var(--s-2); justify-items: start; }
.wizyta__media .frame-photo { width: 100%; }
.wizyta__actions { display: grid; gap: var(--s-3); }
.wizyta__actions .btn { width: 100%; }

@media (min-width: 768px) {
  .wizyta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .wizyta__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .wizyta { padding-bottom: var(--s-8); }
  .wizyta__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "media head"
      "media list"
      "media actions";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-7);
    row-gap: var(--s-5);
  }
  .wizyta__head { grid-area: head; }
  .wizyta__media { grid-area: media; align-self: start; position: sticky; top: 92px; }
  .wizyta__list { grid-area: list; }
  .wizyta__actions { grid-area: actions; align-self: start; }
}

/* 5.14 Finał „Świętuj z tortem” (Bernice Bakery, Collections CTA; decyzja 2026-09-29).
   Okno w łuku 3:4 (górny półokrąg: 50% szerokości = 37,5% wysokości), tytuł po łuku w SVG nałożonym na okno
   (overflow: visible, litery na zewnątrz obrysu), koło „Zamów” na środku dolnej krawędzi z pierścieniem w kolorze Mąki.
   --zw to szerokość okna; z niej wynikają odstęp na tytuł nad łukiem i miejsce na koło pod nim.
   Ruch (SPEC-v2-animacje 3, decyzja 2026-09-29): koło nie jedzie za kursorem, tylko wyskakuje przy przewinięciu
   (data-anim="pop", sekcja 20); okno otwiera się, zdjęcie oddala, a tytuł jedzie po łuku w rytm przewijania
   (site.js, initOrderArch: --cx, --ct, --zi i startOffset). Stan końcowy to style spoczynkowe: bez JS
   i przy ograniczonym ruchu okno pełne, zdjęcie w skali 1, tytuł na szczycie łuku (startOffset 50% w HTML). */
.zamow {
  --zw: min(66vw, 360px);
  --zb: calc(var(--zw) * .6);
  overflow-x: clip;
}
.zamow__inner { display: grid; justify-items: center; }
.zamow__stage {
  position: relative;
  width: var(--zw);
  margin: calc(var(--zw) * .2) 0 calc(var(--zb) / 2 + var(--s-7));
}
.zamow__window {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 37.5% 37.5% var(--r-xl) var(--r-xl);
  background: var(--c-tint);
}
/* Okno otwiera się z wąskiego łuku (20% x 40%, dół przy dolnej krawędzi) do pełnego. Jedyny wyjątek od reguły
   „tylko transform i opacity”: clip-path nie zmienia układu (zero CLS), a nierówne scale zrobiłoby z łuku elipsę.
   Promienie liczone do widocznego prostokąta (procenty w inset() odnoszą się do całego okna): górne to połowa
   bieżącej szerokości (--arc-x w procentach szerokości, --arc-y ten sam promień w procentach wysokości, okno 3:4),
   więc półokrąg przy każdej szerokości; dolne --r-xl, przy bardzo wąskim łuku najwyżej połowa szerokości. Suma
   promieni mieści się w bokach, więc przeglądarka ich nie zmniejsza i dolne rogi trzymają 32 px w każdej klatce
   (--r-pill skalowałby wszystkie promienie wspólnym współczynnikiem, a dolne spadały do kilku pikseli). W stanie
   końcowym przycięcie pokrywa się z border-radius okna, a po pełnym otwarciu (is-open) JS je zdejmuje, więc zostaje
   sam border-radius, piksel w piksel jak bez JS */
.zamow__stage.is-scrub:not(.is-open) .zamow__window {
  --arc-x: calc(50% - var(--cx, 0%));
  --arc-y: calc(var(--arc-x) * .75);
  --foot-x: min(var(--r-xl), var(--arc-x));
  --foot-y: min(var(--r-xl), var(--arc-y));
  clip-path: inset(var(--ct, 0%) var(--cx, 0%) 0 var(--cx, 0%) round var(--arc-x) var(--arc-x) var(--foot-x) var(--foot-x) / var(--arc-y) var(--arc-y) var(--foot-y) var(--foot-y));
}
.zamow__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zi, 1));
}
.zamow__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.zamow__arc-text {
  fill: var(--c-ink);
  font-family: var(--ff-display);
  font-size: 40px;           /* jednostki viewBox 300 × 400, czyli ok. 13% szerokości okna */
  font-weight: 800;
  font-stretch: 80%;
}
/* Pozycja w transform (środek koła na środku dolnej krawędzi okna); wyskok animuje osobne scale, a transform-origin
   w lewym górnym rogu pudełka, czyli w wizualnym środku koła po translate(-50%, -50%), trzyma środek w miejscu */
.zamow__btn {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: var(--zb);
  height: var(--zb);
  border-radius: 50%;
  background: var(--c-brand);
  box-shadow: 0 0 0 10px var(--c-bg);
  color: var(--c-ink);
  text-decoration: none;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.zamow__btn-label {
  font-family: var(--ff-display);
  font-size: calc(var(--zb) * .2);
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.zamow__btn-icon {
  width: calc(var(--zb) * .14);
  height: calc(var(--zb) * .14);
  transition: transform var(--dur-2) var(--ease);
}
.zamow__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 14px; }
.zamow__btn:active { background: var(--c-accent-deep); color: var(--c-white); }
.zamow__text { display: grid; gap: var(--s-4); max-width: 40ch; text-align: center; }
.zamow__text p { margin-inline: auto; }

/* Hover koła (SPEC-v2-animacje 4.3): Kakao rozlewa się od miejsca wejścia kursora i zwija do miejsca wyjazdu.
   Zmiana koloru napisu w trakcie dałaby na chwilę jasny napis na różu (2,3:1), więc warstwa wypełnienia niesie
   duplikat napisu (aria-hidden) dokładnie nad oryginałem: w wypełnieniu jasny napis na Kakao (12,6:1), poza nim Kakao
   na różu (5,0:1). Warstwę przycina koło circle() o promieniu --fill-r; przejście idzie tylko po promieniu
   (zarejestrowana własność), a punkt (--mouse-x, --mouse-y) zmienia się skokowo, więc środek koła nie dryfuje.
   Bez @property wypełnienie pojawia się od razu. Dotyk i hover: none: warstwy nie ma, działa :active */
@property --fill-r {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}
.zamow__btn-fill { display: none; }

@media (hover: hover) and (pointer: fine) {
  .zamow__btn-fill {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: 50%;
    background: var(--c-ink);
    color: var(--c-ink-dark);
    clip-path: circle(var(--fill-r, 0%) at var(--mouse-x, 50%) var(--mouse-y, 50%));
    pointer-events: none;
    transition: --fill-r var(--dur-fill) var(--ease-fill);
  }
  .zamow__btn:is(:hover, :focus-visible) .zamow__btn-fill { --fill-r: var(--fill-r-max); }
  .zamow__btn:is(:hover, :focus-visible) .zamow__btn-icon { transform: translateX(4px); }
  .zamow__btn:active .zamow__btn-fill { background: var(--c-accent-deep); color: var(--c-white); }
}

/* ==========================================================================
   18b. Podstrony Cukiernia i Pracownia (decyzja 2026-10-05): nagłówek w Różu pastelowym pod przezroczystym
        paskiem (jak .gallery-hero w page-gallery.css i .form-hero w page-form.css) i kafle „Szukasz czegoś innego?”
        na końcu strony (Bernice „Room for more?”: jasny kafel z obrysem i kafel w Różu bez obrysu, koło ze zdjęciem)
   ========================================================================== */

.page-hero {
  --link: var(--c-accent-deep);
  --script: var(--c-accent-deep);
  --focus: var(--c-ink);
  position: relative;
  overflow-x: clip;
  background: var(--c-pink);
}
/* Wchodzi pod pasek nagłówka na każdej szerokości (SPEC-v2-naglowek 6.1) */
main > .page-hero { margin-top: calc(-1 * (var(--header-h) + var(--header-offset))); }
.page-hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: calc(var(--header-h) + var(--header-offset) + 24px) 40px;
}
.page-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}
.page-hero__lead { margin-top: var(--s-4); }
.page-hero__script {
  width: fit-content;
  max-width: none;
  margin-top: var(--s-5);
  font-family: var(--ff-script);
  font-size: var(--fs-script);
  line-height: 1;
  font-weight: 700;
  color: var(--script);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
/* Wiersz faktów pod napisem (godziny, telefon): wersaliki jak nawigacja */
.page-hero__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-family: var(--ff-nav);
  font-size: var(--fs-meta);
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
}
.page-hero__info li { display: inline-flex; align-items: center; gap: var(--s-2); }
.page-hero__info svg { width: var(--icon-md); height: var(--icon-md); }
.page-hero__info a { color: inherit; text-decoration-color: var(--c-accent-deep); }
.page-hero__deco { display: none; }

@media (min-width: 768px) {
  .page-hero__info { font-size: var(--fs-nav); }
}
@media (min-width: 1024px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--s-7);
    padding-block: calc(var(--header-h) + var(--header-offset) + 40px) 56px;
  }
  .page-hero__text { padding-top: var(--s-4); }
  .page-hero__deco {
    position: relative;
    display: grid;
    place-items: center;
    width: 240px;
    height: 240px;
    margin: 0 var(--s-7) 0 auto;
  }
  .page-hero__deco::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-pink-deep);
  }
  .page-hero__doodle {
    position: relative;
    --dd-size: 140px;
    --dd-sw: 1.3;
    --dd-rot: -6deg;
  }
  .page-hero__berry {
    top: 0;
    right: -4px;
    --dd-size: 48px;
    --dd-sw: 4;
    --dd-rot: 14deg;
  }
}

/* Kafle na koniec: cały kafel jednym <a>, zdjęcie w kole (alt pusty: nazwa jest w kaflu) */
.more-tiles__title { margin-bottom: var(--section-head-gap); }
/* minmax(0, 1fr): kolumna nie rośnie do min-content kafla (przy 320 px „ZAMÓWIENIE” wypychało kafel poza ekran) */
.more-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.more-tile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 136px;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease);
}
.more-tile--pink { border-color: var(--c-pink); background: var(--c-pink); }
.more-tile__img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-tint);
}
.more-tile__text { display: grid; gap: var(--s-1); min-width: 0; }
.more-tile__title {
  font-family: var(--ff-nav);
  font-size: clamp(20px, 1.2vw + 15px, 30px);
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
}
.more-tile__sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.more-tile__arrow {
  margin-left: auto;
  width: 28px;
  height: 28px;
  transition: transform var(--dur-1) var(--ease);
}
.more-tile:focus-visible { outline-offset: 4px; }

@media (hover: hover) {
  .more-tile:hover { transform: translateY(-2px); }
  .more-tile:hover .more-tile__arrow { transform: translateX(4px); }
}
/* Najwęższe telefony: mniejsze koło i ciaśniejszy kafel, żeby najdłuższe słowo tytułu zmieściło się obok */
@media (max-width: 359px) {
  .more-tile { gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
  .more-tile__img { width: 64px; height: 64px; }
  .more-tile__arrow { width: 24px; height: 24px; }
}
@media (min-width: 768px) {
  .more-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .more-tile { min-height: 200px; gap: var(--s-6); padding: var(--s-6) var(--s-7) var(--s-6) var(--s-6); }
  .more-tile__img { width: 140px; height: 140px; }
}

/* ==========================================================================
   19. Stopka jak u Bernice Bakery (3.14, decyzja 2026-10-01) i pasek kontaktu (3.13)
   Róż pastelowy jak menu pełnoekranowe, napisy w Kakao. U góry dane, dwie kolumny linków wersalikami i zaproszenie
   do zamówienia (miejsce newslettera Bernice), pod nimi wielki napis „DamTorty” na całą szerokość, na dole prawa
   ========================================================================== */

/* Odsłanianie (Bernice Footer_Wrapper.Fixed): od lg, gdy stopka mieści się w oknie pod nagłówkiem, initFooterReveal
   daje jej .is-fixed, a html .has-footer-reveal. Stopka leży wtedy pod treścią przy dolnej krawędzi okna,
   .site-footer-space trzyma jej wysokość w układzie, więc treść z zaokrąglonymi dolnymi rogami odjeżdża w górę
   i odsłania ją jak kurtyna. Bez JS, na telefonie i w niskim oknie zwykły blok po treści */
.site-footer.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-deco);
}
html.has-footer-reveal main {
  position: relative;
  z-index: var(--z-content);
  overflow: clip;              /* rogi przycinają też tła sekcji; clip nie tworzy przewijania, więc sticky działa */
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--c-bg);
}
/* Zanim site.js zmierzy stopkę: ten sam stan, który zwykle wybierze initFooterReveal (stopka do 657 px i nagłówek 80 px,
   pomiar 2026-10-17), żeby przejście bloku w fixed po pierwszym malowaniu nie liczyło się jako przesunięcie (CLS).
   Bez site.js head daje is-anim-off i stopka wraca do zwykłego bloku */
@media (min-width: 1024px) and (min-height: 738px) {
  html.js:not(.has-site-js, .is-anim-off) .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-deco);
  }
  html.js:not(.has-site-js, .is-anim-off) main {
    position: relative;
    z-index: var(--z-content);
    overflow: clip;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--c-bg);
  }
}

.site-footer {
  --link: var(--c-ink);
  --focus: var(--c-ink);
  background: var(--c-pink);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.site-footer__inner {
  display: grid;
  gap: var(--s-6);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-4);
  container-type: inline-size;   /* wielki napis liczy rozmiar od szerokości stopki (cqw) */
}
.site-footer a:not(.btn) {
  color: var(--c-ink);
  text-decoration: none;
}
.site-footer :where(p) { max-width: none; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--s-6);
}
.site-footer__title {
  margin-bottom: var(--s-4);
  font-family: var(--ff-nav);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.site-footer__address { display: grid; gap: var(--s-3); font-style: normal; font-size: var(--fs-body); line-height: 1.4; }
/* Telefony, Messenger i e-mail pod przyciskiem: wiersze z zawijaniem, żeby stopka od lg mieściła się w oknie */
.site-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  font-size: var(--fs-body);
}
.site-footer__contacts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.site-footer__mail { min-width: 0; overflow-wrap: anywhere; }
.site-footer__phone {
  font-family: var(--ff-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.site-footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bw-btn) solid var(--c-ink);
  border-radius: 50%;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.site-footer__social svg { width: 22px; height: 22px; }

/* Dwie kolumny linków (Bernice Footer_Menu): Apfel Grotezk Fett wersalikami, bieżąca strona w kroju Satt */
.site-footer__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-1) var(--s-7);
  align-content: start;
}
.site-footer__list { display: grid; align-content: start; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-nav);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__link[aria-current] { font-weight: 800; }

.site-footer__cta { display: grid; justify-items: start; align-content: start; gap: var(--s-4); }
.site-footer__cta .site-footer__title { margin-bottom: 0; }
.site-footer__cta p { max-width: 32ch; font-size: var(--fs-body); line-height: 1.4; }

/* Wielki napis (Bernice Footer_Big_Logo): Apfel Grotezk Satt na pełną szerokość (18,7cqw: „DAMTORTY” ma 5,24 em),
   litery wjeżdżają od dołu spod linii przy odsłanianiu (--fp z initFooterReveal, 0-1); bez JS stoją */
.site-footer__big {
  margin: 0 0 0 -.4cqw;
  overflow: clip;
  font-family: var(--ff-nav);
  font-size: 17.5vw;
  font-size: 18.7cqw;
  line-height: .8;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__big-ch {
  display: inline-block;
  --p: clamp(0, (var(--fp, 1) - var(--i) * .05) / .6, 1);
  translate: 0 calc((1 - var(--p)) * 105%);
}

.site-footer__bottom {
  display: grid;
  gap: var(--s-1);
  font-family: var(--ff-display);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
}

@media (hover: hover) {
  .site-footer__contacts a:hover,
  .site-footer__bottom a:hover { text-decoration: underline 2px; text-underline-offset: 4px; }
  .site-footer__social a:hover { background: var(--c-ink); color: var(--c-pink); }
}
/* Hover linków jak w nagłówku (Bernice Grow_Anim): link 0,95, litera pod kursorem rośnie (spany z initNavLetters) */
@media (hover: hover) and (pointer: fine) {
  .site-footer__link { transition: scale var(--dur-link) var(--ease-letter); }
  .site-footer__link:hover { scale: var(--scale-link); }
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__cta { grid-column: 1 / -1; }
  .site-footer__bottom {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
  }
  .site-footer__bottom > :last-child { text-align: right; }
}
@media (min-width: 1024px) {
  .site-footer__inner { padding-top: var(--s-8); }
  .site-footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .site-footer__cta { grid-column: auto; }
}

/* Pasek kontaktu (telefon, do lg) */
.contact-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-contact);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--bw-hair) solid var(--c-ink);
  background: var(--c-white);
  box-shadow: var(--sh-up);
}
.contact-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--contact-bar-h);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-bar);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease);
}
.contact-bar__link + .contact-bar__link { border-left: var(--bw-hair) solid var(--c-ink); }
.contact-bar__link svg { width: var(--icon-lg); height: var(--icon-lg); }
.contact-bar__link--primary { background: var(--c-ink); color: var(--c-ink-dark); }
.contact-bar__link:focus-visible { outline-color: var(--c-accent); outline-offset: -5px; }
.contact-bar__link--primary:focus-visible { outline-color: var(--c-ink-dark); }
.contact-bar__link:active { background: var(--c-tint); }
.contact-bar__link--primary:active { background: var(--c-accent-deep); }

@media (hover: hover) {
  .contact-bar__link:hover { background: var(--c-tint); }
  .contact-bar__link--primary:hover { background: var(--c-accent-deep); color: var(--c-white); }
}

@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--contact-bar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  .contact-bar { display: none; }
}

/* ==========================================================================
   20. Pojawianie (SPEC-v2-animacje 1 i 2, decyzja 2026-09-29: przepis Bernice Bakery bez bibliotek)
   Deklaracja w HTML: data-anim="words|lines|fade|stagger|grow|pop". Stan nadaje site.js (initAnim): is-split
   (nagłówek podzielony na słowa, tylko w czasie ruchu), is-in (element wszedł w widok, animacja ruszyła), is-instant
   (od razu, bez ruchu: kotwica, przeładowanie, filtr galerii, fokus klawiatury), is-quick (bez opóźnienia bazowego:
   pierwszy ekran, „Pokaż więcej”), is-done (koniec: animacja i will-change zdjęte, zostaje stan spoczynkowy).
   Stan spoczynkowy jest stanem końcowym, ukryte jest tylko [data-anim]:not(.is-in), wyłącznie pod
   html.js:not(.is-anim-off) i bez ograniczenia ruchu: bez JS, gdy site.js nie zadziała (skrypt w <head>:
   DOMContentLoaded albo 3 s) i przy prefers-reduced-motion wszystko stoi widoczne.
   Animowane tylko opacity oraz osobne translate, rotate i scale (składają się z transform w hoverach).
   Czasy i krzywe z tokenów (tokens.css 2.5); expo.out z GSAP to --ease-expo
   ========================================================================== */

/* Słowa nagłówków (words: H1; lines: H2 i duże cytaty). Spacje zostają węzłami tekstowymi między spanami,
   więc łamanie linii i odstępy są te same co bez podziału; max-width: słowo dłuższe niż linia (duże powiększenie
   tekstu) łamie się w środku jak przy overflow-wrap: break-word, zamiast wystawać */
.w { display: inline-block; max-width: 100%; }
.w__in { display: inline-block; max-width: 100%; transform-origin: left top; }

@media (prefers-reduced-motion: no-preference) {
  /* Pole przycięcia słowa: clip-path zamiast overflow: hidden (inline-block z overflow przeniósłby linię bazową
     na dolną krawędź); ujemny inset trzyma akcenty i ogonki. Po animacji zdjęte */
  .w { clip-path: var(--anim-word-clip); }
  [data-anim].is-done .w,
  [data-anim].is-instant .w { clip-path: none; }

  /* Stan ukryty. Nagłówek czeka niewidoczny, aż JS go podzieli (bez mignięcia całego tekstu) */
  html.js:not(.is-anim-off) :is([data-anim="words"], [data-anim="lines"]):not(.is-split, .is-in) { opacity: 0; }
  html.js:not(.is-anim-off) :is([data-anim="words"], [data-anim="lines"]):not(.is-in) .w__in {
    translate: 0 var(--anim-word-y);
    rotate: var(--anim-rot);
  }
  /* Niewidoczny element nie łapie dotknięć ani kliknięć (puste pole nie przenosi do karty); Tab działa dalej,
     a fokus od razu go pokazuje (initAnim, focusin). Doodle rysuje się sam (initDoodles) */
  html.js:not(.is-anim-off) :is([data-anim="fade"], [data-anim="grow"], [data-anim="pop"]):not(.is-in),
  html.js:not(.is-anim-off) [data-anim="stagger"] > :not(.is-in, .doodle) { opacity: 0; pointer-events: none; }

  /* words (Cool_Text_Anim Words): słowa wjeżdżają od dołu z obrotem, stagger łącznie --stagger-words */
  :is([data-anim="words"], [data-anim="lines"]).is-in .w__in { animation: dt-word var(--dur-words) var(--ease-expo) both; }
  [data-anim="words"].is-in .w__in { animation-delay: calc(var(--delay-words) + var(--i, 0) * var(--stagger-words) / var(--n, 1)); }
  [data-anim="words"].is-quick .w__in { animation-delay: calc(var(--i, 0) * var(--stagger-words) / var(--n, 1)); }
  /* lines (Cool_Text_Anim Lines): słowa jednej linii (--l z offsetTop) ruszają razem */
  [data-anim="lines"].is-in .w__in { animation-delay: calc(var(--delay-words) + var(--l, 0) * var(--stagger-lines)); }
  [data-anim="lines"].is-quick .w__in { animation-delay: calc(var(--l, 0) * var(--stagger-lines)); }

  /* fade (Cool_Anim Fade) */
  [data-anim="fade"].is-in { animation: dt-fade var(--dur-fade) var(--ease-expo) var(--delay-fade) both; }
  /* stagger (Cool_Anim Fade Multiple): --i i --n liczone na paczkę dzieci wchodzących w jednym callbacku */
  [data-anim="stagger"] > .is-in {
    animation: dt-fade var(--dur-fade) var(--ease-expo) both;
    animation-delay: calc(var(--delay-fade) + var(--i, 0) * var(--stagger-group) / var(--n, 1));
  }
  [data-anim="stagger"] > .is-quick { animation-delay: calc(var(--i, 0) * var(--stagger-group) / var(--n, 1)); }
  /* grow (Cool_Anim Grow): krótkie krycie i skala od --anim-scale */
  [data-anim="grow"].is-in {
    animation:
      dt-in var(--dur-2) var(--ease) var(--delay-fade) both,
      dt-grow var(--dur-fade) var(--ease-expo) var(--delay-fade) both;
  }
  :is([data-anim="fade"], [data-anim="grow"]).is-quick { animation-delay: initial; }
  /* pop (Collections_CTA_Button, tylko koło „Zamów”): wyskakuje od razu po wejściu w okno */
  [data-anim="pop"].is-in {
    animation:
      dt-in var(--dur-2) var(--ease) both,
      dt-grow var(--dur-pop) var(--ease-expo) both;
  }

  /* Warstwa kompozytora tylko w trakcie animacji */
  :is([data-anim="fade"], [data-anim="grow"], [data-anim="pop"]).is-in:not(.is-done, .is-instant),
  [data-anim="stagger"] > .is-in:not(.is-done, .is-instant) { will-change: transform, opacity; }
  :is([data-anim="words"], [data-anim="lines"]).is-in:not(.is-done, .is-instant) .w__in { will-change: transform; }

  /* Od razu albo po końcu: bez animacji, stan spoczynkowy (po wszystkich regułach wyżej) */
  [data-anim].is-instant,
  [data-anim].is-done,
  [data-anim="stagger"] > .is-instant,
  [data-anim="stagger"] > .is-done,
  [data-anim].is-instant .w__in,
  [data-anim].is-done .w__in { animation: none; }
}

@keyframes dt-word {
  from { translate: 0 var(--anim-word-y); rotate: var(--anim-rot); }
  to { translate: none; rotate: none; }
}
@keyframes dt-fade {
  from { opacity: 0; translate: 0 var(--anim-y); }
  to { opacity: 1; translate: none; }
}
@keyframes dt-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dt-grow {
  from { scale: var(--anim-scale); }
  to { scale: none; }
}

/* ==========================================================================
   21. Ruch ograniczony, wysoki kontrast, wydruk
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .sticker__spin { animation: none !important; }
  /* Stopka: odsłanianie zostaje (to zwykłe przewijanie), litery wielkiego napisu stoją, linki bez skali */
  .site-footer__big-ch,
  .site-footer__link { translate: none !important; scale: none !important; }
  .doodle.is-armed,
  .doodle.is-drawing { stroke-dasharray: none; animation: none !important; }
  /* Pojawianie (sekcja 20) działa tylko przy no-preference; tu zapas na zmianę preferencji w trakcie czytania */
  [data-anim],
  [data-anim="stagger"] > *,
  .w__in { animation: none !important; }
  .zamow__window { clip-path: none !important; }
  .btn--primary:hover,
  .btn--dot:active,
  .tile--arch:hover .arch-card,
  .tile--frame:hover .tile__arrow,
  .link-icon--arrow:hover svg { transform: none; }
  .sticker:hover,
  .sticker:active { transform: rotate(-12deg); box-shadow: var(--sh-lift); }
  .words__row { translate: none; }
  /* Rząd opinii: initReviews nie startuje ruchu i zdejmuje .is-marquee przy zmianie preferencji; tu zapas
     (deklaracja !important wygrywa z animacją WAAPI, gdyby JS nie zdążył jej anulować). Siatka od md: 5.10.
     Klony znikają w tej samej klatce co ruch: zdarzenie zmiany preferencji dochodzi do build() czasem klatkę po
     przeliczeniu stylów, a stan statyczny ich nie ma */
  .opinie__track { translate: none !important; }
  .opinie__item[data-clone] { display: none; }
  /* Nagłówek: bez skali linków i liter (zostaje sam kolor), menu bez koła i bez opóźnienia treści */
  .site-nav__link,
  .site-nav__ch,
  .header-icon { transition: none !important; scale: none !important; }
  .site-nav__lamp { transition: none !important; }
  .mobile-menu::before,
  .mobile-menu__inner { transition: none !important; }
  /* Intro: reguły trybu żywego są tylko przy no-preference, więc .is-live z poprzedniego stanu nic tu nie przypina */
  .intro__arrows svg { animation: none !important; }
}

@media (forced-colors: active) {
  .chip__input:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .chip__input:checked + .chip__label { forced-color-adjust: none; color: HighlightText; }
  .ribbon__band { stroke: CanvasText; }
  .ribbon__text { fill: Canvas; }
  .words,
  .echo,
  .intro__bg { display: none; }
  /* Kropki i tła znikają w trybie wysokiego kontrastu: aktywny link dostaje podkreślenie; koło menu staje się
     tłem okna, więc granica między paskiem a listą */
  .site-header.is-menu-open .site-header__top { border-bottom: 1px solid CanvasText; }
  .site-nav__lamp { display: none; }
  .site-nav__link[aria-current],
  .mobile-menu__link[aria-current] { text-decoration: underline 2px; text-underline-offset: 6px; }
  /* Finał: koło bez tła w trybie wysokiego kontrastu, więc obrys; tytuł po łuku w kolorze tekstu.
     Hover „fill” bez koła i bez duplikatu napisu (nałożyłby się na oryginał) */
  .zamow__btn { border: 2px solid ButtonText; }
  .zamow__arc-text { fill: CanvasText; }
  .zamow__btn-fill,
  .btn--primary::before,
  .btn--secondary::before { display: none; }
  /* Stopka na tle okna: granica z treścią, bieżąca strona podkreślona */
  .site-footer { border-top: 1px solid CanvasText; }
  .site-footer__link[aria-current] { text-decoration: underline 2px; text-underline-offset: 6px; }
  /* Karty opinii bez tła: obrys jako granica, gwiazdki w kolorze tekstu. Przełącznik pauzy ma obrys z .btn-icon.
     Pole znaku „ do md wystaje ponad kartę (ujemny margines), a tło pod tekstem w kolorze Canvas zjadałoby nad nim górny
     obrys karty: znak bez wymuszonych kolorów, w CanvasText i bez tła pod tekstem */
  .review-card { border: var(--bw-hair) solid CanvasText; }
  .review-card__stars svg { fill: CanvasText; }
  .review-card__mark { forced-color-adjust: none; color: CanvasText; }
}

@media print {
  body { padding-bottom: 0 !important; background: none; }
  .skip-link,
  .draft-note,
  .contact-bar,
  .mobile-menu,
  .menu-toggle,
  .site-nav,
  .header-icon,
  .ribbon,
  .sticker,
  .doodle,
  .words,
  .echo,
  .wave-divider,
  .video-card__video,
  .photo-tag,
  .intro__skip,
  .intro__bg { display: none !important; }
  .site-header { position: static; }
  .site-header__top::before { display: none; }
  .intro,
  .intro__stage { position: static; height: auto; margin: 0; opacity: 1; }
  .intro__w { filter: none; opacity: 1; translate: none; }
  .intro,
  .section--pink,
  .panel,
  .bridge,
  .frame__cell--pink { background: none; }
  [data-anim],
  [data-anim="stagger"] > *,
  .w__in { opacity: 1 !important; translate: none !important; rotate: none !important; scale: none !important; animation: none !important; }
  .w,
  .zamow__window { clip-path: none !important; }
  .zamow__window img { transform: none; }
  .zamow__btn-fill { display: none; }
  .site-footer-space { height: auto !important; }
  .site-footer,
  .site-footer.is-fixed { position: static; background: none; color: inherit; }
  .site-footer a { color: inherit; }
  .site-footer__big,
  .site-footer__btn { display: none; }
  html.has-footer-reveal main { overflow: visible; border-radius: 0; }
  /* Opinie: osiem oryginalnych kart w siatce zawijanej, bez klonów i bez przycinania tekstu.
     Selektory z .is-marquee, bo reguły trybu ruchu mają wyższą swoistość niż samo .opinie__marquee */
  .opinie__item[data-clone] { display: none !important; }
  .opinie__marquee,
  .opinie__marquee.is-marquee { overflow: visible; padding-inline: 0; }
  .opinie__track,
  .opinie__marquee.is-marquee .opinie__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--review-grid-min)), 1fr)); width: auto; padding: 0; translate: none !important; }
  .opinie__item { width: auto; }
  /* Karty bez tła na papierze: dopiski i linki kart parzystych (Popiół jasny, Mąka) wracają do kolorów na jasnym gruncie */
  .opinie__item:nth-child(n) { --review-muted: var(--c-muted); --link: var(--c-accent); }
  .review-card { border: var(--bw-hair) solid; background: none; color: inherit; break-inside: avoid; }
  .review-card--clamp .review-card__quote :where(p) { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
}

/* ==========================================================================
   Przekrój tortu (.przekroj): zdjęcie z Artlista z wyciętym tłem i podpisami
   warstw obok, jak na wzorze klientki (Dekoracja, Biszkopt, Górne i Dolne
   przełożenie: frużelina lub owoce / bita śmietana lub mus / chrupka).
   Szeroko: podpisy po bokach z liniami i klamrami; wąsko: legenda pod zdjęciem.
   Współdzielone: formularz (krok „Tort”) i Torty. Bez JS. Pozycje warstw to
   --y (lewy podpis) oraz --od/--do (klamra) w procentach wysokości zdjęcia.
   ========================================================================== */
.przekroj { container-type: inline-size; margin: 0; }
.przekroj__scena {
  --lead: clamp(14px, 5cqi, 32px);
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) auto minmax(0, 1.38fr);
  column-gap: var(--lead);
  align-items: center;
}
.przekroj__foto {
  grid-column: 2;
  align-self: center;
  display: block;
  width: clamp(190px, 42cqi, 300px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(74, 48, 34, 0.16));
}
.przekroj__strona { position: relative; align-self: stretch; min-width: 0; margin: 0; padding: 0; list-style: none; }
.przekroj__strona--lewa { grid-column: 1; }
.przekroj__strona--prawa { grid-column: 3; }

/* Podpis z lewej: nazwa dosunięta do zdjęcia, krótka linia i kropka na krawędzi warstwy */
.przekroj__kaloutka {
  position: absolute;
  right: 0;
  top: var(--y);
  transform: translateY(-50%);
  max-width: 100%;
  padding-right: 5px;
  text-align: right;
}
.przekroj__kaloutka-nazwa {
  font-family: var(--ff-nav);
  font-size: clamp(12px, 3.3cqi, 14px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
}
.przekroj__kaloutka-uwaga {
  display: block;
  font-family: var(--ff-text);
  font-size: clamp(11px, 3cqi, 12.5px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-muted);
}
.przekroj__kaloutka::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--lead));
  width: var(--lead);
  height: 1.5px;
  background: var(--c-pink-deep);
  transform: translateY(-50%);
}
.przekroj__kaloutka::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--lead));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-pink-deep);
  transform: translate(50%, -50%);
}

/* Przełożenie z prawej: pionowa klamra przy krawędzi zdjęcia obejmuje dwie warstwy, obok tytuł i lista */
.przekroj__grupa {
  position: absolute;
  left: 0;
  top: var(--od);
  height: calc(var(--do) - var(--od));
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.przekroj__grupa::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lead));
  top: 0;
  bottom: 0;
  width: 1.5px;
  border-radius: 2px;
  background: var(--c-pink-deep);
}
.przekroj__grupa::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lead));
  top: 50%;
  width: calc(var(--lead) + 12px);
  height: 1.5px;
  background: var(--c-pink-deep);
  transform: translateY(-50%);
}
.przekroj__grupa-tytul {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--c-pink);
  font-family: var(--ff-nav);
  font-size: clamp(11px, 3cqi, 13px);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.przekroj__grupa-lista { margin: 0; padding: 0; list-style: none; }
.przekroj__grupa-lista li {
  font-family: var(--ff-nav);
  font-size: clamp(11px, 3cqi, 13px);
  font-weight: 600;
  line-height: 1.22;
  color: var(--c-ink);
}
.przekroj__grupa-lista li + li { margin-top: 1px; }

.przekroj__caption {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
  text-align: center;
  text-wrap: balance;
}

/* Wariant na różowym panelu (np. „Co jest w środku” na stronie głównej): biała karta
   w języku sekcji (jak karty faktów), żeby podpisy i klamry miały kontrast. */
.przekroj--karta {
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-hair);
}

/* Wąsko (telefon, wąski panel): podpisy ZAWSZE obok tortu, nigdy pod spodem (decyzja
   właściciela 2026-10-10). Na wąskim ekranie nie ma miejsca na dwie kolumny z liniami,
   więc tort stoi z lewej, a podpisy kolumną z prawej jako czytelny klucz: Dekoracja i
   Biszkopt u góry, pod nimi Górne i Dolne przełożenie. */
@container (max-width: 519px) {
  .przekroj__scena {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: 0;
    align-items: center;
    justify-items: start;
  }
  .przekroj__foto {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: clamp(116px, 40cqi, 200px);
  }
  .przekroj__strona {
    grid-column: 2;
    position: static;
    align-self: center;
    width: 100%;
  }
  .przekroj__strona--lewa { grid-row: 1; display: grid; gap: 6px; align-content: end; padding-bottom: 10px; }
  .przekroj__strona--prawa { grid-row: 2; display: grid; gap: var(--s-3); align-content: start; }
  .przekroj__kaloutka,
  .przekroj__grupa {
    position: static;
    height: auto;
    transform: none;
    text-align: left;
    display: block;
    padding: 0;
  }
  .przekroj__kaloutka::before, .przekroj__kaloutka::after,
  .przekroj__grupa::before, .przekroj__grupa::after { content: none; }
  .przekroj__kaloutka-nazwa::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--c-pink-deep);
    vertical-align: middle;
  }
  .przekroj__kaloutka-uwaga { margin-left: 13px; }
  .przekroj__grupa { padding-left: 11px; border-left: 2px solid var(--c-pink-deep); }
  .przekroj__grupa-tytul { margin-bottom: 3px; }
}