/* Polsmaak · polsmaak.eu · styl „Elegancja w bordo”
   Jasne tło, bordo jako główny kolor, brąz z logo w ilustracjach.
   Układ reaguje na szerokość kontenera .strona (container queries),
   więc działa tak samo w przeglądarce i w podglądzie projektu.
   Zawsze sprawdzaj stronę na szerokości 390 px i 1440 px. */

:root {
  /* tła */
  --kosc: #FBF7F1;            /* główne tło, kość słoniowa */
  --krem: #F3EADF;            /* tło co drugiej sekcji */
  --papier: #FFFDF9;          /* karty i ramki */
  --zdjecie-tlo: #EFE4D6;     /* puste miejsce na zdjęcie */

  /* tekst */
  --atrament: #3A2418;        /* nagłówki, ciemny brąz z logo */
  --tekst: #4F3E34;
  --tekst-jasny: #74625A;

  /* akcenty */
  --bordo: #7A1C2C;
  --bordo-ciemne: #5C1521;
  --braz: #8F6038;            /* kreska ilustracji, jasny brąz z logo */
  --braz-blady: #CDB79C;      /* ilustracje w pustych ramkach na zdjęcia */
  --linia: #DCCBB5;           /* cienkie linie i ramki */

  /* na bordowym tle */
  --na-bordo: #F7EFE4;
  --na-bordo-2: #E9D6C6;
  --na-bordo-etykieta: #E8C2A6;

  /* pola do uzupełnienia, np. [ulica i numer] */
  --luka-tlo: #F3DCD8;
  --luka-tekst: #7A1C2C;

  /* cienie i półprzezroczyste linie */
  --cien: rgba(58, 36, 24, 0.38);
  --cien-bordo: rgba(92, 21, 33, 0.28);
  --tlo-powiekszenia: rgba(58, 36, 24, 0.62); /* przyciemnienie pod powiększonym tortem */
  --skorka: #D9A25B;          /* niespodzianka: zaznaczenie hasła w hero, jak chleb z makiem */
  --mak: #2B2630;
  --na-bordo-linia: rgba(247, 239, 228, 0.4);
  --na-bordo-linia-2: rgba(247, 239, 228, 0.2);
  --na-bordo-obwodka: rgba(247, 239, 228, 0.35); /* cienka obwódka zdjęć na bordo */
  --zdjecie-podpis: #6C5A4F;

  /* ruch: miękkie wyhamowanie */
  --plynnie: cubic-bezier(0.22, 1, 0.36, 1);

  --szeryf: 'Brygada 1918', Georgia, 'Times New Roman', serif;
  --margines: clamp(20px, 4.5cqw, 64px);
}

/* ---------- podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kosc);
  color: var(--tekst);
  font-family: var(--szeryf);
  font-size: 18px;
  line-height: 1.6;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--bordo); color: var(--na-bordo); }
/* niespodzianka: zaznaczone hasło w hero ma kolory chleba z makiem */
.tytul--hero::selection, .tytul--hero ::selection { background: var(--skorka); color: var(--mak); }

/* podmiana napisu po najechaniu (niespodzianki w stopce): oba napisy w jednej
   komórce, więc miejsce jest zarezerwowane i nic nie skacze */
.podmiana { display: inline-grid; }
.podmiana > * { grid-area: 1 / 1; transition: opacity 0.35s; }
.podmiana > :last-child { opacity: 0; }
.podmiana--prawo { justify-items: end; }
:hover > .podmiana > :first-child { opacity: 0; }
:hover > .podmiana > :last-child { opacity: 1; }
img, svg { display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--bordo); outline-offset: 4px; }
main:focus { outline: none; }
.dla-czytnikow {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* zestaw ikon (symbole na początku index.html) */
.ikony { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikona {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* link „Przejdź do treści”, widoczny tylko z klawiatury */
.pomin {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 18px; background: var(--bordo); color: var(--na-bordo);
  font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: top 0.2s var(--plynnie);
}
.pomin:focus { top: 12px; }

.strona { container-type: inline-size; background: var(--kosc); }
.kontener {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--margines);
  padding-right: var(--margines);
}
.nowrap { white-space: nowrap; }
.fr { font-style: italic; color: var(--tekst-jasny); }

.luka {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--luka-tlo);
  color: var(--luka-tekst);
  font-style: normal;
}

/* etykieta z cienką kreską, jak napis FRESH w logo */
.etykieta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bordo);
}
.etykieta::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.7; flex: 0 0 auto; }
.etykieta--srodek { justify-content: center; }
.etykieta--srodek::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.7; flex: 0 0 auto; }
.etykieta--jasna { color: var(--na-bordo-etykieta); }

.tytul {
  margin-top: 16px;
  font-weight: 500; font-size: clamp(36px, 4.4cqw, 60px); line-height: 1.08;
  letter-spacing: -0.012em; color: var(--atrament); text-wrap: balance;
}
.tytul em { font-style: italic; color: var(--bordo); }
.tytul__linia { display: block; }
.tytul--hero { margin-top: 22px; font-size: clamp(46px, 6cqw, 86px); line-height: 1.04; letter-spacing: -0.018em; }

.przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.przycisk {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 28px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.4s var(--plynnie), translate 0.4s var(--plynnie);
}
.przycisk:hover { translate: 0 -2px; box-shadow: 0 14px 24px -14px var(--cien); }
.przycisk:active { translate: 0 0; box-shadow: none; }
.przycisk--bordo { background: var(--bordo); color: var(--na-bordo); }
.przycisk--bordo:hover { background: var(--bordo-ciemne); }
.przycisk--obrys { border: 1px solid var(--atrament); color: var(--atrament); }
.przycisk--obrys:hover { background: var(--atrament); color: var(--kosc); }
.przycisk .ikona { width: 18px; height: 18px; stroke-width: 1.7; }

.link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bordo);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.link:hover { color: var(--bordo-ciemne); }
.link .ikona { width: 15px; height: 15px; stroke-width: 2; transition: translate 0.4s var(--plynnie); }
.link:hover .ikona { translate: 3px -3px; }

.sekcja { padding-top: clamp(72px, 9cqw, 132px); padding-bottom: clamp(72px, 9cqw, 132px); }
.sekcja--krem { background: var(--krem); }
.naglowek-sekcji { max-width: 760px; margin: 0 auto; text-align: center; }
.naglowek-sekcji__opis { margin-top: 18px; font-size: 19px; line-height: 1.6; color: var(--tekst); }

/* rama na zdjęcie z passe-partout */
.ramka {
  background: var(--papier);
  padding: clamp(10px, 1.2cqw, 16px);
  box-shadow: 0 30px 60px -32px var(--cien), 0 0 0 1px var(--linia);
}
.zdjecie {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--zdjecie-tlo); color: var(--braz-blady);
  display: flex; align-items: center; justify-content: center;
}
.zdjecie > svg { width: 62%; height: auto; transform: translateY(-10%); }
.zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.zdjecie__opis { position: absolute; left: 24px; right: 24px; bottom: 20px; }
.zdjecie__etykieta { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-jasny); }
.zdjecie__tekst { margin-top: 4px; font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--zdjecie-podpis); }

/* ---------- pasek i nagłówek ----------
   Bordowy pasek z kontaktem, pod nim prostokątne logo po lewej i menu
   w jednej linii po prawej. Na węższych ekranach logo na środku, menu pod nim. */
.pasek { background: var(--bordo); color: var(--na-bordo-2); }
.pasek__in {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 24px;
  font-size: 15px; letter-spacing: 0.02em;
}
.pasek__miasta, .pasek__kontakt { display: flex; flex-wrap: wrap; align-items: center; column-gap: 26px; min-height: 42px; }
.pasek a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--na-bordo); text-decoration: none; transition: color 0.3s; }
.pasek a:hover { color: var(--na-bordo-etykieta); }
.pasek a:focus-visible { outline-color: var(--na-bordo); }
.pasek .ikona { width: 15px; height: 15px; color: var(--na-bordo-etykieta); }
.pasek__media { display: inline-flex; align-items: center; gap: 4px; }
.pasek__media a { min-width: 34px; justify-content: center; }
.pasek__media .ikona { width: 18px; height: 18px; color: var(--na-bordo); transition: color 0.3s; }
.pasek__media a:hover .ikona { color: var(--na-bordo-etykieta); }

.naglowek__in {
  display: flex; align-items: center; justify-content: space-between; column-gap: 40px;
  padding-top: clamp(14px, 1.6cqw, 22px); padding-bottom: clamp(14px, 1.6cqw, 22px);
}
.logo { display: block; flex: 0 0 auto; }
.logo img { width: clamp(140px, 12cqw, 172px); height: auto; }
.menu {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  column-gap: clamp(18px, 2.2cqw, 32px);
}
.menu a {
  position: relative; display: inline-flex; align-items: center; min-height: 52px;
  font-size: 18px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--atrament); text-decoration: none; transition: color 0.3s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px;
  background: currentColor; scale: 0 1; transition: scale 0.45s var(--plynnie);
}
.menu a:hover { color: var(--bordo); }
.menu a:hover::after, .menu a:focus-visible::after { scale: 1 1; }

/* ---------- hero ---------- */
.hero__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px, 6cqw, 104px);
  padding-top: clamp(36px, 4.6cqw, 72px); padding-bottom: clamp(72px, 8.5cqw, 128px);
}
.hero__tekst { flex: 1 1 460px; min-width: 0; }
.hero__lead { margin-top: 28px; max-width: 31em; font-size: clamp(18px, 1.45cqw, 21px); line-height: 1.65; color: var(--tekst); }
.hero__fr { margin-top: 12px; max-width: 32em; font-size: 17.5px; line-height: 1.5; }
.hero__obraz { flex: 1 1 380px; min-width: 0; max-width: 580px; margin: 0 auto; position: relative; }
.pieczec {
  position: absolute; left: clamp(-44px, -3cqw, -12px); top: 44px;
  width: clamp(112px, 11cqw, 150px); height: auto; color: var(--na-bordo);
  filter: drop-shadow(0 10px 18px var(--cien-bordo));
}
.pieczec__tlo { fill: var(--bordo); }
/* niespodzianka: po najechaniu obręcz się obraca, a w środku „i ani jednego dnia bez chleba” */
.pieczec__obrecz { transform-box: view-box; transform-origin: 80px 80px; }
.pieczec__przod, .pieczec__tyl { transition: opacity 0.4s; }
.pieczec__tyl { opacity: 0; }
.pieczec:hover .pieczec__przod { opacity: 0; }
.pieczec:hover .pieczec__tyl { opacity: 1; }

/* ---------- wypieki ---------- */
.wypieki__baner { margin-top: clamp(40px, 4.5cqw, 64px); }
.wypieki__baner .zdjecie { aspect-ratio: 12 / 5; }
.wypieki {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px clamp(20px, 2.4cqw, 32px); margin-top: clamp(44px, 5cqw, 72px);
}
.wypiek { text-align: center; }
.wypiek__obraz {
  transition: translate 0.6s var(--plynnie), box-shadow 0.6s var(--plynnie);
  aspect-ratio: 1 / 1; background: var(--papier); border: 1px solid var(--linia);
  box-shadow: inset 0 0 0 9px var(--papier), inset 0 0 0 10px var(--linia);
  display: flex; align-items: center; justify-content: center; color: var(--braz);
}
.wypiek__obraz svg { width: 68%; height: auto; transition: scale 0.8s var(--plynnie), rotate 0.8s var(--plynnie); }
.wypiek:hover .wypiek__obraz {
  translate: 0 -6px;
  box-shadow: inset 0 0 0 9px var(--papier), inset 0 0 0 10px var(--linia), 0 26px 40px -28px var(--cien);
}
.wypiek:hover .wypiek__obraz svg { scale: 1.05; rotate: -2deg; }
.wypiek h3 { margin-top: 24px; font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--atrament); }
.wypiek p { max-width: 20em; margin: 8px auto 0; font-size: 16.5px; line-height: 1.6; color: var(--tekst-jasny); }

/* ---------- nasz chleb (bordo) ---------- */
.sekcja--bordo { background: var(--bordo); color: var(--na-bordo); }
.sekcja--bordo .tytul { color: var(--na-bordo); }
.chleb__uklad { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5cqw, 88px); }
.chleb__tekst { flex: 1 1 440px; min-width: 0; }
.chleb__opis { margin-top: 24px; max-width: 31em; font-size: clamp(18px, 1.45cqw, 20px); line-height: 1.7; color: var(--na-bordo-2); }
.trasa { flex: 1 1 420px; min-width: 0; }
.trasa svg { width: 100%; height: auto; color: var(--na-bordo); overflow: visible; }
.trasa__srodek { fill: var(--bordo); }
.trasa__droga { opacity: 0.5; }
.trasa__slad { stroke-dashoffset: 7; }
.trasa__tir-tlo { fill: var(--bordo); }
/* tir jedzie po tej samej krzywej co droga; bez animacji stoi już w Brukseli */
.trasa__tir {
  offset-path: path("M574,150 L548,150 C438,112 202,112 92,150 L66,150");
  offset-rotate: auto 180deg;
  offset-distance: 93%;
}
/* niespodzianka: dymek nad tirem po najechaniu */
.trasa__dymek { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.trasa__tir:hover .trasa__dymek { opacity: 1; }
.trasa__dymek-tlo { fill: var(--na-bordo); }
.trasa__dymek-tekst { fill: var(--bordo); }
.trasa__podpisy { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 10px; }
.trasa__prawa { text-align: right; }
.trasa__miasto { font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--na-bordo); }
.trasa__opis { margin-top: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--na-bordo-etykieta); }
.atuty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 28px clamp(24px, 3cqw, 48px); margin-top: clamp(52px, 6cqw, 88px);
}
.atut { border-top: 1px solid var(--na-bordo-linia); padding-top: 18px; }
.atut h3 { font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--na-bordo); }
.atut p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--na-bordo-2); }

/* ---------- torty ---------- */
.torty__uklad { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: clamp(48px, 6cqw, 104px); }
.torty__obraz { flex: 1 1 360px; min-width: 0; max-width: 500px; margin: 0 auto; }
.torty__tekst { flex: 1 1 460px; min-width: 0; }
.torty__lead { margin-top: 22px; max-width: 31em; font-size: 19px; line-height: 1.65; }
.kroki { list-style: none; padding: 0; margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.krok { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: baseline; }
.krok__nr { font-style: italic; font-size: 30px; line-height: 1; color: var(--bordo); }
.krok h3 { font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--atrament); }
.krok p { margin-top: 3px; font-size: 17px; line-height: 1.55; color: var(--tekst-jasny); }
.torty__uwaga { margin-top: 28px; font-size: 17px; }
.torty__tekst .przycisk { margin-top: 24px; }

/* galeria tortów: zakładki na radiach (bez JS), widać jedną grupę naraz.
   Szeroko po 4 w rzędzie, wąsko pas przewijany palcem w bok. */
.galeria { margin-top: clamp(72px, 8cqw, 116px); }
.galeria__wybor { position: absolute; opacity: 0; pointer-events: none; }
.galeria__zakladki {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(18px, 2.4cqw, 34px);
  margin-top: 18px;
}
.galeria__zakladki label {
  position: relative; display: inline-flex; align-items: center; min-height: 48px;
  font-size: 18px; color: var(--tekst-jasny); cursor: pointer; transition: color 0.3s;
}
.galeria__zakladki label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; scale: 0 1; transition: scale 0.45s var(--plynnie);
}
.galeria__zakladki label:hover { color: var(--bordo); }
.galeria__pas {
  --odstep: clamp(16px, 2cqw, 28px);
  display: none; flex-wrap: wrap; justify-content: center; gap: var(--odstep);
  list-style: none; padding: 0; margin-top: 26px;
}
.galeria__pas > li { flex: 0 0 calc((100% - 3 * var(--odstep)) / 4); }
.galeria .zdjecie { aspect-ratio: 1 / 1; }

#torty-urodziny:checked ~ .galeria__pas--urodziny,
#torty-komunia:checked ~ .galeria__pas--komunia,
#torty-cyfry:checked ~ .galeria__pas--cyfry,
#torty-okazje:checked ~ .galeria__pas--okazje,
#torty-zestawy:checked ~ .galeria__pas--zestawy { display: flex; }

#torty-urodziny:checked ~ .galeria__zakladki [for="torty-urodziny"],
#torty-komunia:checked ~ .galeria__zakladki [for="torty-komunia"],
#torty-cyfry:checked ~ .galeria__zakladki [for="torty-cyfry"],
#torty-okazje:checked ~ .galeria__zakladki [for="torty-okazje"],
#torty-zestawy:checked ~ .galeria__zakladki [for="torty-zestawy"] { color: var(--bordo); }

#torty-urodziny:checked ~ .galeria__zakladki [for="torty-urodziny"]::after,
#torty-komunia:checked ~ .galeria__zakladki [for="torty-komunia"]::after,
#torty-cyfry:checked ~ .galeria__zakladki [for="torty-cyfry"]::after,
#torty-okazje:checked ~ .galeria__zakladki [for="torty-okazje"]::after,
#torty-zestawy:checked ~ .galeria__zakladki [for="torty-zestawy"]::after { scale: 1 1; }

#torty-urodziny:focus-visible ~ .galeria__zakladki [for="torty-urodziny"],
#torty-komunia:focus-visible ~ .galeria__zakladki [for="torty-komunia"],
#torty-cyfry:focus-visible ~ .galeria__zakladki [for="torty-cyfry"],
#torty-okazje:focus-visible ~ .galeria__zakladki [for="torty-okazje"],
#torty-zestawy:focus-visible ~ .galeria__zakladki [for="torty-zestawy"] { outline: 2px solid var(--bordo); outline-offset: 4px; }

/* powiększenie tortu: popover (bez JS), zamyka Esc albo klik obok.
   Pod zdjęciem krótki żartobliwy napis, mała niespodzianka dla ciekawskich. */
.galeria__powieksz {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in;
}
.galeria__powieksz img { transition: scale 0.8s var(--plynnie); }
.galeria__powieksz:hover img { scale: 1.04; }
.galeria__powieksz:focus-visible { outline: 2px solid var(--bordo); outline-offset: 6px; }
.powiekszenie {
  position: fixed; inset: 0; margin: auto;
  width: min(92vw, calc(94vh - 96px), 760px); height: fit-content; max-height: 96vh;
  padding: 14px 14px 18px; border: 0; overflow: visible;
  background: var(--papier); color: var(--tekst);
  box-shadow: 0 40px 80px -30px var(--cien);
}
.powiekszenie::backdrop { background: var(--tlo-powiekszenia); }
.powiekszenie img { display: block; width: 100%; height: auto; }
.powiekszenie__napis { margin-top: 14px; text-align: center; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--bordo); }
.powiekszenie__zamknij {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--papier); color: var(--atrament); cursor: pointer;
  box-shadow: 0 0 0 1px var(--linia), 0 8px 18px -10px var(--cien);
  transition: color 0.3s;
}
.powiekszenie__zamknij:hover { color: var(--bordo); }
.powiekszenie__zamknij .ikona { width: 20px; height: 20px; }

/* ---------- sklepy ---------- */
.sklepy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(20px, 2.2cqw, 28px); margin-top: clamp(44px, 5cqw, 64px);
}
.sklep {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--papier); border: 1px solid var(--linia); padding: 30px 26px 20px;
  transition: translate 0.6s var(--plynnie), box-shadow 0.6s var(--plynnie), border-color 0.6s;
}
.sklep:hover { translate: 0 -6px; border-color: var(--braz-blady); box-shadow: 0 26px 40px -28px var(--cien); }
.sklep__nr { font-style: italic; font-size: 20px; line-height: 1; color: var(--bordo); }
.sklep h3 { font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--atrament); }
.sklep__adres, .sklep__godziny, .sklep__tel { display: flex; align-items: flex-start; gap: 10px; font-size: 16.5px; line-height: 1.55; }
.sklep__adres .ikona, .sklep__godziny .ikona, .sklep__tel .ikona { margin-top: 0.2em; color: var(--braz); }
.godziny { margin: 0; display: grid; gap: 2px; }
.godziny div { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 10px; }
.godziny dt { color: var(--tekst-jasny); }
.godziny dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--tekst); }
.sklep__tel a { color: var(--tekst); text-decoration: none; }
.sklep__tel a:hover { color: var(--bordo); text-decoration: underline; text-underline-offset: 4px; }
.sklep .link { margin-top: 6px; }
.sklep__godziny { color: var(--tekst-jasny); }

/* ---------- dla sklepów ---------- */
.b2b__uklad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 5cqw, 88px); }
.b2b__tekst { flex: 1 1 440px; min-width: 0; }
.b2b__lead { margin-top: 22px; max-width: 31em; font-size: 19px; line-height: 1.65; }
.b2b__karta {
  flex: 1 1 380px; min-width: 0;
  background: var(--papier); border: 1px solid var(--linia); border-top: 3px solid var(--bordo);
  padding: clamp(26px, 3cqw, 40px);
}
.b2b__karta h3 { font-weight: 500; font-size: 23px; line-height: 1.25; color: var(--atrament); }
.b2b__karta p { margin-top: 8px; font-size: 17px; line-height: 1.6; }
.b2b__karta a { color: var(--bordo); text-underline-offset: 4px; }
.b2b__kreska { height: 1px; background: var(--linia); margin: 24px 0; }

/* ---------- stopka ---------- */
.stopka { background: var(--bordo-ciemne); color: var(--na-bordo-2); }
.stopka__in { padding-top: clamp(56px, 6cqw, 88px); padding-bottom: 28px; }
.stopka__kolumny {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 40px 32px;
}
.stopka__logo { width: 190px; height: auto; }
.slownik { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 19px; color: var(--na-bordo); }
.slownik b { font-weight: 600; }
.slownik i { color: var(--na-bordo-etykieta); }
.stopka__opis { margin-top: 6px; max-width: 22em; font-size: 15.5px; line-height: 1.6; }
.stopka__kol { display: flex; flex-direction: column; }
.stopka__naglowek { margin-bottom: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--na-bordo-etykieta); }
.stopka__adres { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.6; }
.stopka__adres .ikona { margin-top: 0.25em; }
.stopka a { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 40px; font-size: 17px; color: var(--na-bordo); text-decoration: none; }
.stopka a:focus-visible { outline-color: var(--na-bordo); }
.stopka .ikona { color: var(--na-bordo-etykieta); }
.stopka a:hover { text-decoration: underline; text-underline-offset: 4px; }
.stopka__dol {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--na-bordo-linia-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  font-size: 14px; line-height: 1.5;
}
.stopka__prawa { display: flex; flex-wrap: wrap; column-gap: 8px; }
.stopka a.stopka__gora {
  min-height: 44px; font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.stopka__gora .podmiana > * { display: inline-flex; align-items: center; gap: 10px; }
.stopka__gora .ikona { transition: translate 0.4s var(--plynnie); }
.stopka__gora:hover .ikona { translate: 0 -3px; }

/* ---------- zdjęcia: piekarnia i atuty ---------- */
.piekarnia__zdjecia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 36px clamp(20px, 2.4cqw, 32px); margin-top: clamp(40px, 4.5cqw, 64px);
}
.piekarnia__zdjecia figcaption { margin-top: 14px; text-align: center; font-style: italic; font-size: 17px; color: var(--tekst-jasny); }
.atut--zdjecie { border-top: 0; padding-top: 0; }
.atut--zdjecie img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 20px; box-shadow: 0 0 0 1px var(--na-bordo-obwodka);
}

/* ---------- wąskie ekrany ---------- */
@container (max-width: 1100px) {
  .naglowek__in { flex-direction: column; row-gap: 6px; padding-bottom: 6px; }
  .menu { justify-content: center; }
}
@container (max-width: 760px) {
  .galeria__pas {
    flex-wrap: nowrap; justify-content: safe center;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--margines)); margin-right: calc(-1 * var(--margines));
    padding: 4px var(--margines) 24px; scroll-padding-inline: var(--margines);
    scrollbar-width: thin; scrollbar-color: var(--linia) transparent;
  }
  .galeria__pas > li { flex: 0 0 74%; scroll-snap-align: start; }
}
@container (max-width: 900px) {
  .pasek__in { justify-content: center; }
  .menu { column-gap: 18px; }
  .menu a { font-size: 17px; }
  .pasek__miasta { display: none; }
}
@container (max-width: 560px) {
  .pieczec { left: -6px; top: -20px; width: 96px; }
  .menu { padding: 4px 0; }
  .pasek__media { display: none; }
  .galeria__zakladki label { min-height: 42px; font-size: 16px; }
  .galeria__zakladki label::after { bottom: 8px; }
  .wypieki { grid-template-columns: 1fr 1fr; gap: 36px 14px; }
  .wypiek:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  .wypiek h3 { margin-top: 16px; font-size: 20px; }
  .wypiek p { font-size: 15px; line-height: 1.5; }
  .menu a { min-height: 40px; font-size: 16px; }
  .menu a::after { bottom: 8px; }
  .wypieki__baner .zdjecie { aspect-ratio: 4 / 3; }
}

/* ---------- ruch ----------
   Tylko CSS. Wszystko wyłącza się, gdy ktoś ma w systemie „ogranicz ruch”.
   Pojawianie się przy przewijaniu działa w przeglądarkach z animation-timeline,
   w pozostałych treść jest po prostu widoczna od razu. */
@media (prefers-reduced-motion: no-preference) {
  /* hero przy wejściu na stronę */
  .hero__tekst > * { animation: wjazd 1s var(--plynnie) both; }
  .hero__tekst > :nth-child(2) { animation-delay: 0.08s; }
  .hero__tekst > :nth-child(3) { animation-delay: 0.16s; }
  .hero__tekst > :nth-child(4) { animation-delay: 0.24s; }
  .hero__tekst > :nth-child(5) { animation-delay: 0.32s; }
  .hero__obraz .ramka { animation: wjazd-ramka 1.2s var(--plynnie) 0.15s both; }
  .pieczec { animation: wjazd-pieczec 1.1s var(--plynnie) 0.6s both; }

  /* galeria tortów: po kliknięciu zakładki zdjęcia wjeżdżają po kolei
     (animacja startuje sama, gdy grupa przestaje mieć display: none) */
  .galeria__pas > li { animation: wjazd-tortu 0.6s var(--plynnie) both; }
  .galeria__pas > li:nth-child(2) { animation-delay: 0.06s; }
  .galeria__pas > li:nth-child(3) { animation-delay: 0.12s; }
  .galeria__pas > li:nth-child(4) { animation-delay: 0.18s; }
  .galeria__pas > li:nth-child(5) { animation-delay: 0.24s; }
  .galeria__pas > li:nth-child(6) { animation-delay: 0.3s; }
  .galeria__pas > li:nth-child(n+7) { animation-delay: 0.36s; }

  /* niespodzianki: obracająca się obręcz pieczęci, wyskakujący dymek tira,
     napisy w stopce wjeżdżające od dołu */
  .pieczec__obrecz { transition: rotate 1.4s var(--plynnie); }
  .pieczec:hover .pieczec__obrecz { rotate: 180deg; }
  .trasa__dymek { transform-box: fill-box; transform-origin: 50% 100%; scale: 0.8; translate: 0 6px; transition: opacity 0.3s, scale 0.45s var(--plynnie), translate 0.45s var(--plynnie); }
  .trasa__tir:hover .trasa__dymek { scale: 1; translate: 0 0; }
  .podmiana > * { transition: opacity 0.35s, translate 0.45s var(--plynnie); }
  .podmiana > :last-child { translate: 0 0.5em; }
  :hover > .podmiana > :first-child { translate: 0 -0.5em; }
  :hover > .podmiana > :last-child { translate: 0 0; }

  /* powiększenie tortu: płynne otwieranie i zamykanie */
  .powiekszenie {
    opacity: 0; scale: 0.94;
    transition: opacity 0.35s, scale 0.5s var(--plynnie), overlay 0.5s allow-discrete, display 0.5s allow-discrete;
  }
  .powiekszenie:popover-open { opacity: 1; scale: 1; }
  .powiekszenie::backdrop {
    background-color: transparent;
    transition: background-color 0.4s, overlay 0.5s allow-discrete, display 0.5s allow-discrete;
  }
  .powiekszenie:popover-open::backdrop { background-color: var(--tlo-powiekszenia); }
  @starting-style {
    .powiekszenie:popover-open { opacity: 0; scale: 0.94; }
    .powiekszenie:popover-open::backdrop { background-color: transparent; }
  }

  @supports (animation-timeline: view()) {
    .naglowek-sekcji, .wypieki__baner, .wypiek, .chleb__tekst, .trasa, .atut, .torty__obraz, .torty__tekst,
    .krok, .galeria__zakladki, .piekarnia__zdjecia figure, .sklep, .b2b__tekst, .b2b__karta, .stopka__kolumny > * {
      animation: pojaw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    :is(.wypiek, .atut, .piekarnia__zdjecia figure, .sklep, .stopka__kolumny > *):nth-child(2) { animation-range: entry 8% entry 78%; }
    :is(.wypiek, .atut, .piekarnia__zdjecia figure, .sklep, .stopka__kolumny > *):nth-child(3) { animation-range: entry 16% entry 86%; }
    :is(.wypiek, .atut, .piekarnia__zdjecia figure, .sklep, .stopka__kolumny > *):nth-child(4) { animation-range: entry 24% entry 94%; }

    /* nasz chleb: przy przewijaniu tir jedzie z Ciechanowca do Brukseli,
       a za nim rysuje się przejechana droga. Przewijanie w górę cofa tira. */
    .trasa { view-timeline-name: --trasa; }
    .trasa__tir, .trasa__slad {
      animation-timeline: --trasa;
      animation-range: cover 20% cover 55%;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .trasa__tir { animation-name: tir; }
    .trasa__slad { animation-name: slad; }
  }
}
@keyframes wjazd { from { opacity: 0; translate: 0 26px; } }
@keyframes wjazd-ramka { from { opacity: 0; translate: 0 40px; scale: 0.97; } }
@keyframes wjazd-pieczec { from { opacity: 0; scale: 0.6; rotate: -40deg; } }
@keyframes tir { from { offset-distance: 7%; } to { offset-distance: 93%; } }
@keyframes slad { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 7; } }
@keyframes pojaw { from { opacity: 0; translate: 0 36px; } }
@keyframes wjazd-tortu { from { opacity: 0; translate: 0 18px; scale: 0.98; } }

/* ---------- strona 404 ---------- */
.blad { min-height: 100vh; display: flex; align-items: center; }
.blad__in { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.blad .logo { display: inline-block; margin-bottom: 36px; }
.blad .przyciski { justify-content: center; }
.blad__opis { max-width: 30em; margin: 22px auto 0; font-size: 19px; line-height: 1.65; }
.blad .fr { margin-top: 10px; }