/* Miąższ · styl KOLOR (biblioteka HVMBAK) */

:root {
  /* tła sekcji: mediana pikseli w pasie 5% przy krawędziach zdjęcia */
  --wariant-1: #f99aa7;
  --wariant-2: #e35b04;
  --wariant-3: #d5bea3;
  --wariant-4: #79bbbc;
  --ciemny: #2a0a10;

  /* tekst: ciemny odcień tej samej barwy (OKLCH L 0.25), na pomarańczu L 0.20 dla kontrastu 5:1 */
  --tekst-1: #420617;
  --tekst-2: #2e0700;
  --tekst-3: #2f1e06;
  --tekst-4: #032728;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --margines: 40px;
  --nav-h: 72px;
  --linia: 1.5px;
}

@media (max-width: 860px) {
  :root { --margines: 18px; }
}
@media (max-width: 600px) {
  :root { --nav-h: 84px; }
}

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

html {
  /* bez białego płótna przy odbiciu przewijania: u góry róż, na dole ciemny */
  background: linear-gradient(var(--wariant-1) 50%, var(--ciemny) 50%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: transparent;
  color: var(--tekst-1);
  font-family: Onest, system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

img { display: block; max-width: 100%; }
p, h1, h2, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------- siatka: 12 kolumn, treść najwyżej 1440 px ---------- */

.siatka {
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tresc-start] repeat(12, minmax(0, 83.333px))
    [tresc-end] minmax(0, 1fr)
    [pelna-end];
  column-gap: 40px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (max-width: 860px) {
  .siatka {
    grid-template-columns:
      [pelna-start] var(--margines)
      [tresc-start] minmax(0, 1fr)
      [tresc-end] var(--margines)
      [pelna-end];
    column-gap: 0;
  }
}

/* kolory sekcji */
.w1, .k1 { --bg: var(--wariant-1); --fg: var(--tekst-1); }
.w2, .k2 { --bg: var(--wariant-2); --fg: var(--tekst-2); }
.w3, .k3 { --bg: var(--wariant-3); --fg: var(--tekst-3); }
.w4, .k4 { --bg: var(--wariant-4); --fg: var(--tekst-4); }

/* ---------- nawigacja ---------- */

.gora {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background-color: var(--wariant-1);
  color: var(--tekst-1);
  transition: background-color .3s ease, color .3s ease;
}
.gora.plynnie { transition: color .3s ease; }
.gora.od-razu { transition: none; }

.gora-in {
  box-sizing: content-box;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--margines);
  display: flex;
  align-items: center;
  gap: 36px;
}

.logo {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  padding: 8px 0;
}

.menu { margin-left: auto; }
.menu ul { display: flex; gap: 32px; }
.menu a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: var(--linia);
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
  white-space: nowrap;
}
.menu a:hover { text-decoration-color: currentColor; }

.koszyk {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--linia) solid currentColor;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.koszyk.skok { animation: skok .45s var(--ease); }
@keyframes skok {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .gora-in {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 48px 36px;
    align-items: center;
    gap: 0;
  }
  .logo { grid-column: 1; grid-row: 1; }
  .koszyk { grid-column: 2; grid-row: 1; width: 34px; height: 34px; }
  .menu { grid-column: 1 / -1; grid-row: 2; margin: 0; align-self: start; }
  .menu ul { justify-content: space-between; gap: 12px; }
  .menu a { padding: 4px 0 10px; }
}

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 28px);
  grid-template-rows: auto 1fr;
  background: var(--wariant-1);
  color: var(--tekst-1);
}

.hero-box {
  grid-column: tresc;
  container-type: inline-size;
}

.marka {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: 18.5vw;
  font-size: calc(100cqi / 5.2);
  line-height: .85;
  white-space: nowrap;
  /* pierwszy znak stoi na krawędzi treści, nie na swoim odstępie bocznym */
  margin-left: -.035em;
}

.lead {
  /* odstęp liczony od stopnia nazwy marki, żeby ogonek „Ą” nie dotykał tekstu */
  margin-top: calc(100cqi / 5.2 * .3);
  max-width: 30em;
  font-size: 20px;
  line-height: 1.45;
  text-wrap: pretty;
}

.pas {
  grid-column: pelna;
  display: flex;
  margin-top: 44px;
  min-height: 220px;
}

.pas a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 24px 20px 26px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: flex-grow .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pas a:first-child { padding-left: max(var(--margines), calc((100vw - 1440px) / 2)); }
/* pierwszy pasek ma kolor hero, więc jego górną krawędź wyznacza linia 1.5 px */
.pas .k1 { box-shadow: inset 0 var(--linia) 0 currentColor; }
.pas a:hover,
.pas a:focus-visible,
.pas a.aktywny { flex-grow: 2.2; }
.pas a:focus-visible { outline-offset: -8px; }

.pas-nr {
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pas-nazwa {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 28px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 18px); }
  .lead { margin-top: calc(100cqi / 5.2 * .3 + 6px); font-size: 18px; line-height: 1.5; }
  .pas { flex-direction: column; margin-top: 28px; min-height: 340px; }
  .pas a,
  .pas a:first-child {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px var(--margines) 16px;
  }
  .pas-nr { padding-bottom: 3px; }
  .pas-nazwa { font-size: 24px; }
}

/* ---------- sekcje wariantów ---------- */

.wariant {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 32px) 64px;
  grid-template-rows: auto 1fr;
  row-gap: 40px;
  background: var(--bg);
  color: var(--fg);
  --p: .5;
}

.nazwa-box {
  grid-column: tresc;
  grid-row: 1;
  position: relative;
  z-index: 2;
  container-type: inline-size;
}

.nazwa {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 10vw, 180px);
  font-size: min(clamp(56px, 10vw, 180px), 100cqi / var(--em, 5));
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ruchome {
  display: inline-block;
  transform: translate3d(calc(8% - 16% * var(--p)), 0, 0);
  will-change: transform;
}
.nr {
  display: inline-block;
  vertical-align: top;
  font-size: .34em;
  line-height: 1;
  letter-spacing: 0;
  margin-top: .02em;
}

.w1 .nazwa { text-align: end; }
.w3 .nazwa { text-align: center; }
.w1 { --em: 5.06; }
.w2 { --em: 5.37; }
.w3 { --em: 10.9; }
.w4 { --em: 6.79; }

.foto {
  grid-row: 1 / 3;
  align-self: end;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* tło każdego zdjęcia jest w pliku wyrównane do koloru sekcji (przy krawędziach różnica najwyżej 1 na kanał),
   więc zdjęcie stoi bez maski. Maska zostaje tylko tam, gdzie przedmiot przecina krawędź zdjęcia:
   w melonie ręka u góry i skrzynka u dołu. Wyjątek: brzoskwinia zostaje w oryginale z ciepłym gradientem ściany i blatem
   (Kuba 30.10.2026: „brzoskwinia siedzi, wygląda fajnie”), więc ma dawną maskę z 29.10. Długość przejścia na każdym boku, przebieg wygładzony (smoothstep). */
.foto {
  --mt: 0%; --mb: 0%; --ml: 0%; --mr: 0%;
  --pion:
    linear-gradient(to bottom,
      transparent 0,
      rgb(0 0 0 / .16) calc(var(--mt) * .25),
      rgb(0 0 0 / .5) calc(var(--mt) * .5),
      rgb(0 0 0 / .84) calc(var(--mt) * .75),
      #000 var(--mt),
      #000 calc(100% - var(--mb)),
      rgb(0 0 0 / .84) calc(100% - var(--mb) * .75),
      rgb(0 0 0 / .5) calc(100% - var(--mb) * .5),
      rgb(0 0 0 / .16) calc(100% - var(--mb) * .25),
      transparent 100%);
  transform-origin: 50% 60%;
}
.w2 .foto img, .w3 .foto img {
  --poziom:
    linear-gradient(to right,
      transparent 0,
      rgb(0 0 0 / .16) calc(var(--ml) * .25),
      rgb(0 0 0 / .5) calc(var(--ml) * .5),
      rgb(0 0 0 / .84) calc(var(--ml) * .75),
      #000 var(--ml),
      #000 calc(100% - var(--mr)),
      rgb(0 0 0 / .84) calc(100% - var(--mr) * .75),
      rgb(0 0 0 / .5) calc(100% - var(--mr) * .5),
      rgb(0 0 0 / .16) calc(100% - var(--mr) * .25),
      transparent 100%);
  -webkit-mask-image: var(--poziom), var(--pion);
  mask-image: var(--poziom), var(--pion);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* zdjęcie stojące: wysokie na ekran minus odstępy */
.w1 .foto, .w4 .foto { justify-self: center; }
.w1 .foto img, .w4 .foto img {
  width: auto;
  height: clamp(420px, calc(100vh - var(--nav-h) - 96px), 780px);
  height: clamp(420px, calc(100svh - var(--nav-h) - 96px), 780px);
  object-fit: cover;
}
/* zdjęcie poziome: dochodzi do krawędzi ekranu */
.w2 .foto img, .w3 .foto img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--nav-h) - 96px);
  max-height: calc(100svh - var(--nav-h) - 96px);
  object-fit: cover;
}

.w1 .foto { grid-column: 2 / 9; }
.w1 .opis { grid-column: 10 / 14; }

.w2 .foto { grid-column: 7 / 15; --mt: 8%; --mb: 10%; }
.w2 .foto img { object-position: 50% 0; }
.w2 .opis { grid-column: 2 / 6; }

.w3 .foto { grid-column: 1 / 9; grid-row: 2; --mt: 26%; --mb: 12%; --ml: 0%; --mr: 14%; }
.w3 .foto img { object-position: 100% 50%; }
.w3 .opis { grid-column: 10 / 14; }

.w4 .foto { grid-column: 7 / 14; }
.w4 .opis { grid-column: 2 / 6; }

/* wejście zdjęcia */
.ruch .foto {
  transform: rotate(-3deg) scale(.94);
  transition: transform .9s var(--ease);
}
.ruch .foto.weszlo { transform: none; }

.opis {
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 3;
  min-width: 0;
}

.podtytul {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 28px;
}

.sklad {
  border-top: var(--linia) solid currentColor;
  margin-bottom: 26px;
}
.sklad li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0 10px;
  border-bottom: var(--linia) solid currentColor;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.akapit {
  max-width: 32em;
  margin-bottom: 30px;
  text-wrap: pretty;
}

.kup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
}
.dane {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.pojemnosc {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cena {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.przycisk {
  height: 54px;
  padding: 0 30px;
  border: var(--linia) solid var(--fg);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.przycisk:hover { background: transparent; color: var(--fg); }
.przycisk:active { transform: scale(.97); }
.przycisk:focus-visible { outline-color: var(--fg); outline-offset: 3px; }

/* ---------- pasy przejścia między wariantami ---------- */

.przejscie {
  height: 28vh;
  height: 28svh;
  background: linear-gradient(var(--a), var(--b));
  background: linear-gradient(in oklch,
    var(--a) 0%,
    color-mix(in oklch, var(--a), var(--b) 18%) 30%,
    color-mix(in oklch, var(--a), var(--b) 82%) 70%,
    var(--b) 100%);
}

/* ---------- zestawy, o nas, gdzie kupić ---------- */

.zestawy { --bg: var(--wariant-2); --fg: var(--tekst-2); }
.gdzie   { --bg: var(--wariant-1); --fg: var(--tekst-1); }
.o-nas, .stopka { --bg: var(--ciemny); --fg: var(--wariant-1); }

.zestawy, .gdzie, .o-nas {
  background: var(--bg);
  color: var(--fg);
}
.zestawy, .gdzie { padding-block: 136px 144px; }
.o-nas { padding-block: 168px 176px; }

.h2 {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.zestawy .h2, .gdzie .h2 { grid-column: tresc; margin-bottom: 56px; }

.lista { grid-column: tresc; border-top: var(--linia) solid currentColor; }
.lista li {
  display: grid;
  column-gap: 40px;
  align-items: baseline;
  padding: 26px 0 25px;
  border-bottom: var(--linia) solid currentColor;
}
.l-nazwa {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.l-opis { text-wrap: pretty; }
.l-cena {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  text-align: end;
  white-space: nowrap;
}

/* kolumny list ustawione na siatce 12 kolumn */
.lista-zestawy li { grid-template-columns: 5fr 5fr 2fr; }
.lista-miejsca li { grid-template-columns: 6fr 6fr; }

.o-nas .h2 { grid-column: 2 / 12; }
.o-nas-tekst {
  grid-column: 8 / 13;
  margin-top: 64px;
  text-wrap: pretty;
}

/* ---------- stopka ---------- */

.stopka {
  background: var(--ciemny);
  color: var(--wariant-1);
  padding-block: 104px 36px;
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
}
.stopka-box { grid-column: tresc; container-type: inline-size; }
.stopka-marka {
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: 18.5vw;
  font-size: calc(100cqi / 5.2);
  line-height: .85;
  white-space: nowrap;
  margin-left: -.035em;
}
.stopka-dane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  margin-top: calc(100cqi / 5.2 * .32);
  padding-top: 20px;
  border-top: var(--linia) solid currentColor;
}
.stopka-dane a {
  text-decoration: underline;
  text-decoration-thickness: var(--linia);
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
}
.stopka-dane a:hover { text-decoration-color: currentColor; }
.drobny {
  margin-top: 88px;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- tablet ---------- */

@media (max-width: 1100px) and (min-width: 861px) {
  .w1 .opis, .w3 .opis { grid-column: 9 / 14; }
  .w2 .opis, .w4 .opis { grid-column: 2 / 7; }
  .w2 .foto, .w4 .foto { grid-column: 8 / 15; }
  .w4 .foto { grid-column: 8 / 14; }
  .w1 .foto { grid-column: 2 / 8; }
}

/* ---------- telefon ---------- */

@media (max-width: 860px) {
  .wariant {
    grid-template-rows: none;
    row-gap: 0;
    padding-block: calc(var(--nav-h) + 28px) 56px;
  }
  .wariant .nazwa-box,
  .wariant .opis { grid-column: tresc; grid-row: auto; }
  .wariant .foto {
    grid-column: pelna;
    grid-row: auto;
    justify-self: stretch;
    margin: 20px 0 30px;
  }
  .w1 .nazwa, .w3 .nazwa { text-align: start; }
  /* na telefonie BRZOSKWINIA dzieli się na dwa wiersze; łącznik dodaje CSS, tekst strony zostaje bez zmian */
  .w3 .dziel::after { content: "-\A"; white-space: pre; }
  .w3 { --em: 5.85; }

  .wariant .foto img,
  .w1 .foto img, .w2 .foto img, .w3 .foto img, .w4 .foto img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: var(--ar);
    object-fit: cover;
    object-position: var(--poz);
  }
  .w2 .foto { --mt: 8%; --mb: 10%; }
  .w3 .foto { --ml: 0%; --mr: 0%; --mt: 20%; --mb: 10%; }   /* brzoskwinia: dawna maska telefonu */
  .w1 .foto img { --ar: 4 / 5; --poz: 50% 60%; }
  .w2 .foto img { --ar: 1 / 1; --poz: 100% 50%; }
  .w3 .foto img { --ar: 1 / 1; --poz: 100% 50%; }
  .w4 .foto img { --ar: 1 / 1; --poz: 50% 85%; }

  .podtytul { margin-bottom: 22px; }
  .kup { gap: 18px; }
  .kup .dane { flex: 1 1 100%; justify-content: space-between; }
  .przycisk { flex: 1 1 100%; }

  .przejscie { height: 18vh; height: 18svh; }

  .zestawy, .gdzie { padding-block: calc(var(--nav-h) + 52px) 104px; }
  .o-nas { padding-block: calc(var(--nav-h) + 64px) 120px; }
  .zestawy .h2, .gdzie .h2 { margin-bottom: 36px; }
  .o-nas .h2, .o-nas-tekst { grid-column: tresc; }
  .o-nas-tekst { margin-top: 36px; }

  .lista li { padding: 20px 0 19px; column-gap: 16px; row-gap: 8px; }
  .lista-zestawy li { grid-template-columns: 1fr auto; }
  .lista-zestawy .l-opis { grid-column: 1 / -1; grid-row: 2; }
  .lista-miejsca li { grid-template-columns: 1fr; }

  .stopka { padding-top: 72px; }
  .stopka-dane { grid-template-columns: 1fr; row-gap: 6px; margin-top: calc(100cqi / 5.2 * .32 + 8px); }
  .drobny { margin-top: 56px; }
}

/* ---------- ograniczony ruch ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .ruchome { transform: none; }
  .foto { transform: none !important; }
}