/* DAI TO SE - stopka: 5 kolumn. Wyjątek od systemu (decyzja użytkownika z 5.10.2026): czerwone pole. Układ i treść: assets/stopka.js. */
.st { position: relative; background: var(--czerwien); color: var(--krem); }
.st a, .st button { color: inherit; }
.st :focus-visible { outline-color: var(--krem); box-shadow: 0 0 0 2px var(--czerwien); }
.st__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--rynna); align-items: start; }
.st__marka { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); }
.st__logo { display: block; width: min(264px, 100%); }
.st__logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.st__kontakt { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; }
.st__kontakt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--t-lead); line-height: 1.25; text-decoration: none; }
.st__firma { margin-top: var(--s-3); font-size: var(--t-maly); line-height: 1.5; }
.st__kol h2 { margin-bottom: var(--s-2); }
.st__kol a { display: flex; align-items: center; min-height: 44px; font-size: var(--t-tekst); line-height: 1.25; text-decoration: none; }
@media (hover: hover) { .st__kol a:hover, .st__kontakt a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.st__kol a:active, .st__kontakt a:active { opacity: .7; }
.st__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--rynna); padding: 0 var(--margines) var(--s-5); }
.st__dol > * { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; }
/* podpis studia: logo hoooooood® („ho” pełne, reszta z kropek, ® w kółku) jako maska, żeby brało kolor tekstu stopki; plik 806 x 132 px */
.st__hood { display: flex; align-items: flex-end; gap: 10px; white-space: nowrap; }
.st__hlogo { flex: none; width: 122px; aspect-ratio: 806 / 132; background: currentColor; -webkit-mask: url(../brand_assets/img/hoooooood.webp) center / contain no-repeat; mask: url(../brand_assets/img/hoooooood.webp) center / contain no-repeat; }
@media (max-width: 720px) { .st__kol:first-of-type { grid-row: span 3; } }
@media (min-width: 721px) { .st__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .st__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .st__marka { grid-column: span 4; }
  .st__kol { grid-column: span 2; }
  .st__logo { width: 320px; }
}

/* pasek zakupu nie wchodzi na stopkę: zjeżdża tak samo jak wtedy, gdy przycisk panelu jest na ekranie */
.st-widac .pz { transform: translateY(100%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform var(--czas) var(--krzywa), opacity var(--czas) var(--krzywa), visibility 0s var(--czas); }