/* css/katalog.css: catalog rows, compare tray, vendor fact sheet, price bars, view transitions.
   Light theme only. Everything animated falls back to static under prefers-reduced-motion. */

/* ---------- view transitions (progressive, ignored by browsers without support) ---------- */
@view-transition { navigation: auto; }
.glowna { view-transition-name: tresc; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(tresc) { animation: 250ms var(--ruch, ease) both tresc-znika; }
::view-transition-new(tresc) { animation: 250ms var(--ruch, ease) both tresc-wchodzi; }
@keyframes tresc-znika { to { opacity: 0; } }
@keyframes tresc-wchodzi { from { opacity: 0; } }

/* ---------- catalog rows: stagger + hover preview ---------- */
.katalog-poz.odslon { transition-delay: calc(var(--i, 0) * 40ms); }
.katalog-poz { position: relative; }
.katalog-poz-cena { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }

.podglad-foto {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 260px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 4px; box-shadow: 0 18px 40px rgba(30, 26, 23, .28), 0 0 0 1px rgba(255, 255, 255, .6);
  pointer-events: none; opacity: 0;
  transform: translate(18px, 18px) rotate(1.5deg);
  transition: opacity 150ms ease, transform 150ms var(--ruch, ease);
  will-change: transform, opacity;
}
.podglad-foto.widoczny { opacity: 1; transform: translate(18px, 18px) rotate(0deg); }
@media not ((hover: hover) and (pointer: fine)) { .podglad-foto { display: none; } }

/* ---------- compare toggle on a row ---------- */
.porownaj-przycisk {
  appearance: none; font: inherit; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tekst-2); background: none; border: 0; border-bottom: 1px solid var(--wlos);
  padding: .15rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  transition: color 150ms, border-color 150ms;
}
.porownaj-przycisk::before {
  content: ""; width: .8rem; height: .8rem; border: 1px solid var(--tekst-2); border-radius: 2px;
  box-sizing: border-box; transition: background 150ms, border-color 150ms;
}
.porownaj-przycisk:hover { color: var(--akcent); border-color: var(--akcent); }
.porownaj-przycisk[aria-pressed="true"] { color: var(--akcent); border-color: var(--akcent); }
.porownaj-przycisk[aria-pressed="true"]::before { background: var(--akcent); border-color: var(--akcent); }
.porownaj-przycisk:disabled { opacity: .45; cursor: default; }
.porownaj-przycisk:disabled:hover { color: var(--tekst-2); border-color: var(--wlos); }
.katalog-poz.w-porownaniu { box-shadow: inset 3px 0 0 var(--akcent); padding-left: .9rem; }

/* ---------- compare tray ---------- */
body.ma-tace { padding-bottom: var(--taca-h, 240px); }
.taca {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--tlo); border-top: 1px solid var(--linia);
  box-shadow: 0 -14px 40px rgba(30, 26, 23, .12);
  transform: translateY(100%); transition: transform 280ms var(--ruch, ease);
}
.taca.otwarta { transform: none; }
.taca-wnetrze { max-width: var(--szer-tresci, 1280px); margin: 0 auto; padding: .8rem var(--margines, 1.5rem) 1rem; }
.taca-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.taca-tytul { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 500; margin: 0; }
.taca-tytul small { font-family: "Work Sans", system-ui, sans-serif; font-size: .78rem; color: var(--tekst-2); margin-left: .5rem; letter-spacing: .04em; }
.taca-wyczysc {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--wlos); padding: .1rem 0;
  font: inherit; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-2); cursor: pointer;
}
.taca-wyczysc:hover { color: var(--akcent); border-color: var(--akcent); }
.taca-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .92rem; }
.taca-tabela th, .taca-tabela td { text-align: left; padding: .35rem .6rem .35rem 0; border-top: 1px solid var(--wlos); vertical-align: top; }
.taca-tabela thead th { border-top: 0; padding-top: 0; font-weight: 500; }
.taca-tabela th:first-child, .taca-tabela td:first-child { width: 7.5rem; color: var(--tekst-2); font-weight: 400; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.taca-tabela td { font-variant-numeric: tabular-nums; }
.taca-tabela td.taca-liczba { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.45rem; line-height: 1.1; font-weight: 500; }
.taca-nazwa { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 500; color: var(--tekst); text-decoration: none; }
.taca-nazwa:hover { color: var(--akcent); }
.taca-usun {
  appearance: none; background: none; border: 0; padding: 0 .3rem; margin-left: .3rem; font: inherit; font-size: 1rem;
  color: var(--tekst-2); cursor: pointer; line-height: 1;
}
.taca-usun:hover { color: var(--akcent); }
.taca-pusto { color: var(--tekst-2); }

/* ---------- vendor page: fact sheet + sticky side card + similar ---------- */
.dostawca-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem 3.5rem; align-items: start; margin-top: 2.2rem; }
.fakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem 2rem; margin: 0 0 2.4rem; }
.fakt { border-top: 1px solid var(--tekst); padding-top: .7rem; }
.fakt-szeroki { grid-column: 1 / -1; }
.fakt-zakres { grid-column: span 2; }
.fakt-zakres .fakt-liczba { white-space: nowrap; }
.fakt dt { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); margin: 0 0 .35rem; }
.fakt dd { margin: 0; }
.fakt-liczba { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.fakt-jedn { display: inline-block; margin-left: .4rem; font-size: .88rem; color: var(--tekst-2); }
.fakt-jedn:empty { display: none; }
.fakt-do { display: inline-block; margin: 0 .5rem; font-size: .88rem; color: var(--tekst-2); }
.fakt-tekst { font-size: 1.02rem; line-height: 1.5; }
.dostawca-glowne .dostawca-dane { margin-top: 0; }
.dostawca-karta {
  position: sticky; top: 5.5rem; padding: 1.4rem 1.5rem 1.5rem; background: var(--papier-2); border-radius: 4px;
  display: flex; flex-direction: column; gap: .8rem;
}
.dostawca-karta .dostawca-cena-etykieta { margin: 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); }
.dostawca-karta .dostawca-cena { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.1rem; line-height: 1.05; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.dostawca-karta .przycisk { align-self: flex-start; }
.dostawca-karta-zrodlo { margin: 0; font-size: .82rem; color: var(--tekst-2); line-height: 1.5; }
.dostawca-karta-zrodlo a { color: inherit; }
.podobne { margin-top: 3rem; }
.podobne h2 { margin-bottom: 1rem; }
.podobne-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 2rem; border-top: 1px solid var(--tekst); }
.podobne-poz { border-bottom: 1px solid var(--wlos); }
.podobne-poz a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 0; color: var(--tekst); text-decoration: none; }
.podobne-poz a:hover .podobne-nazwa { color: var(--akcent); }
.podobne-nazwa { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; line-height: 1.15; font-weight: 500; transition: color 150ms; }
.podobne-meta { font-size: .8rem; color: var(--tekst-2); }
.podobne-cena { margin-top: .3rem; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ---------- price pages: bar ranking ---------- */
.ranking-miast { margin: 3rem 0; }
.slupki { list-style: none; margin: 1.2rem 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.slupek { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: .9rem; font-size: .92rem; }
.slupek a { color: var(--tekst); text-decoration: none; }
.slupek a:hover { color: var(--akcent); }
.slupek-pasek { display: block; height: 10px; background: var(--papier-2); border-radius: 2px; overflow: hidden; }
.slupek-pasek > span { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--akcent-2, #9B6B78); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ruch, ease); }
.slupki.widoczne .slupek-pasek > span { transform: none; }
.slupek-wartosc { text-align: right; font-variant-numeric: tabular-nums; }
.slupek-aktualny a { color: var(--akcent); font-weight: 600; }
.slupek-aktualny .slupek-pasek > span { background: var(--akcent); }
.slupek-aktualny .slupek-wartosc { color: var(--akcent); font-weight: 600; }
.slupek-brak .slupek-wartosc { color: var(--tekst-2); font-size: .78rem; }
.slupki-uwaga { font-size: .85rem; color: var(--tekst-2); margin: 0; }
.slupki .slupek:nth-child(n) .slupek-pasek > span { transition-delay: calc(var(--n, 0) * 35ms); }
[data-licz] { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .dostawca-uklad { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .dostawca-karta { position: static; order: -1; }
  .fakty { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.1rem 1.4rem; }
  .fakt-liczba { font-size: 2rem; }
  .slupek { grid-template-columns: 6.2rem minmax(0, 1fr) 4.6rem; gap: .6rem; font-size: .84rem; }
  .taca-wnetrze { padding: .7rem var(--margines, 1rem) .9rem; }
  .taca-tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; table-layout: auto; }
  .taca-tabela th:first-child, .taca-tabela td:first-child { width: 5.5rem; min-width: 5.5rem; }
  .taca-tabela th, .taca-tabela td { min-width: 8rem; padding-right: .5rem; }
  .taca-tabela td.taca-liczba { font-size: 1.2rem; }
  .taca-nazwa { font-size: 1.05rem; }
  .katalog-poz.w-porownaniu { padding-left: .7rem; }
}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(tresc), ::view-transition-new(tresc) { animation: none; }
  .katalog-poz.odslon { transition-delay: 0s; }
  .podglad-foto { display: none; }
  .taca { transition: none; }
  .slupek-pasek > span { transform: none; transition: none; }
  .porownaj-przycisk, .porownaj-przycisk::before, .podobne-nazwa { transition: none; }
}