@charset "UTF-8";
/* ============================================================
   meblealtany.pl - arkusz główny (mobile first)
   ============================================================ */

:root {
    --tlo: #fffdf9;
    --tlo-alt: #f6f1e8;
    --tekst: #221f1a;
    --tekst-mut: #5f574c;
    --akcent: #7a5c35;
    --akcent-ciemny: #5e4527;
    --zielen: #3f5c34;
    --linia: #e4dccd;
    --font: 'Dosis', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --promien: 12px;
    --cien: 0 8px 24px rgba(34, 31, 26, .08);
    --cien-mocny: 0 16px 40px rgba(34, 31, 26, .16);
    --max: 1200px;
    --odstep: clamp(16px, 4vw, 32px);
    --naglowek-h: 68px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
    line-height: 1.6;
    color: var(--tekst);
    background: var(--tlo);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
}

body.menu-otwarte { overflow: hidden; }

main { flex: 1 0 auto; }

img,
picture,
svg { max-width: 100%; display: block; }

img { height: auto; }

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: .01em;
}

p { margin: 0 0 1em; }

a { color: var(--akcent-ciemny); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akcent); }

:focus-visible {
    outline: 3px solid var(--akcent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- utilities ---------- */
.kontener {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--odstep);
}

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--akcent-ciemny);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- przyciski ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    min-height: 46px;
    padding: .55em 1.2em;
    font-family: inherit;
    font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--promien);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}

.btn--akcent { background: var(--akcent); color: #fff; }
.btn--obrys { border-color: var(--akcent); color: var(--akcent-ciemny); background: transparent; }
.btn:active { transform: translateY(1px); }


@media (hover: hover) and (pointer: fine) {
    .btn--akcent:hover { background: var(--akcent-ciemny); color: #fff; }
    .btn--obrys:hover { background: var(--akcent); color: #fff; }
}

/* ---------- nagłówek ---------- */
.naglowek {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 253, 249, .97);
    border-bottom: 1px solid var(--linia);
    backdrop-filter: blur(6px);
}

.naglowek__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--naglowek-h);
    flex-wrap: wrap;
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: clamp(84px, 18vw, 116px); height: auto; }

.menu-btn {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background: var(--tlo-alt);
    border: 1px solid var(--linia);
    border-radius: 10px;
    cursor: pointer;
}

.menu-btn__icon,
.menu-btn__icon::before,
.menu-btn__icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--tekst);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
    position: relative;
}
.menu-btn__icon::before,
.menu-btn__icon::after {
    content: '';
    position: absolute;
    left: 0;
}
.menu-btn__icon::before { top: -6px; }
.menu-btn__icon::after { top: 6px; }

.menu-btn[aria-expanded="true"] .menu-btn__icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-6px) rotate(-45deg); }

.nav__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .4em .7em;
    color: var(--tekst);
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .2s, color .2s;
}

.nav__link.is-active {
    color: var(--akcent-ciemny);
    background: var(--tlo-alt);
    box-shadow: inset 0 -2px 0 var(--akcent);
}

@media (hover: hover) and (pointer: fine) {
    .nav__link:hover { background: var(--tlo-alt); color: var(--akcent-ciemny); }
}

.naglowek__tel {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    padding: 4px 10px;
    text-decoration: none;
    line-height: 1.15;
    border: 1px solid var(--linia);
    border-radius: 10px;
}
.naglowek__tel-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tekst-mut); }
.naglowek__tel-num { font-weight: 700; font-size: .95rem; color: var(--akcent-ciemny); }

/* ---------- przełącznik języka ---------- */
.naglowek__prawa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.jezyki {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jezyki__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tekst-mut);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color .2s, border-color .2s, background-color .2s;
}

.jezyki__link.is-active {
    color: var(--akcent-ciemny);
    border-color: var(--akcent);
    background: var(--tlo-alt);
}

@media (hover: hover) and (pointer: fine) {
    .jezyki__link:hover { color: var(--akcent-ciemny); border-color: var(--linia); }
}

.jezyki--naglowek { display: none; }
.jezyki--menu { justify-content: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linia); }

@media (min-width: 900px) {
    .jezyki--naglowek { display: flex; }
    .jezyki--menu { display: none; }
}


/* panel nawigacji działa tylko z JS (bez JS menu jest zwykłą listą) */
.js .nav {
    position: fixed;
    top: var(--naglowek-h);
    left: 0;
    right: 0;
    padding: var(--odstep);
    padding-top: 12px;
    background: var(--tlo);
    border-bottom: 1px solid var(--linia);
    box-shadow: var(--cien);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
    max-height: calc(100dvh - var(--naglowek-h));
    overflow-y: auto;
}
.js .nav.is-open { transform: translateY(0); visibility: visible; }
.js .menu-btn { display: inline-flex; }

@media (min-width: 900px) {
    .naglowek__inner { flex-wrap: nowrap; gap: clamp(16px, 3vw, 40px); }
    .js .nav {
        position: static;
        transform: none;
        visibility: visible;
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: visible;
        margin-left: auto;
    }
    .js .menu-btn { display: none; }
    .nav__lista { flex-direction: row; gap: 2px; }
    .naglowek__tel { margin-left: 0; }
}

/* ---------- hero / karuzela ---------- */
.hero {
    --hero-h: clamp(170px, 26vh, 240px);
    --hero-pad: clamp(10px, 1.8vw, 22px);
    position: relative;
    background: linear-gradient(180deg, var(--tlo-alt), var(--tlo) 90%);
    padding-block: var(--hero-pad) 0;
    margin-bottom: clamp(12px, 2.5vw, 28px);
    overflow: hidden;
}

.hero__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline-offset: -3px;
}
.hero__viewport::-webkit-scrollbar { display: none; }
.js .hero__viewport { overflow: hidden; }

.hero__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 18px);
    list-style: none;
    margin: 0;
    padding: 0;
    height: var(--hero-h);
    width: max-content;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.hero__slajd {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    opacity: .42;
    transform: scale(.84);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .5s;
    box-shadow: 0 10px 26px rgba(34, 31, 26, .16);
}
.hero__slajd picture { display: block; width: 100%; height: 100%; }
.hero__slajd .hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__slajd.is-obok { opacity: .62; transform: scale(.9); }
.hero__slajd.is-aktywny { opacity: 1; transform: scale(1); }

.hero__strzala {
    position: absolute;
    top: calc(var(--hero-pad) + var(--hero-h) / 2);
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--akcent-ciemny);
    background: rgba(255, 253, 249, .92);
    border: 1px solid var(--linia);
    border-radius: 50%;
    box-shadow: var(--cien);
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.hero__strzala--prev { left: clamp(4px, 1.2vw, 20px); }
.hero__strzala--next { right: clamp(4px, 1.2vw, 20px); }

@media (hover: hover) and (pointer: fine) {
    .hero__strzala:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
}

.hero__sterowanie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-block: 12px 14px;
}

.hero__kropki {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero__kropki button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(34, 31, 26, .25);
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.hero__kropki button[aria-selected="true"] {
    background: var(--akcent);
    transform: scale(1.35);
}

.hero__pauza {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tekst-mut);
    background: transparent;
    border: 1px solid var(--linia);
    border-radius: 50%;
    font-size: .6rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.hero__pauza[hidden] { display: none; }
.hero__pauza:hover { color: var(--akcent-ciemny); border-color: var(--akcent); }

@media (min-width: 900px) {
    .hero { --hero-h: clamp(300px, 40vh, 460px); }
    .hero__strzala { width: 50px; height: 50px; font-size: 2.1rem; }
    .hero__slajd { border-radius: 14px; }
}

/* ---------- sekcje ---------- */
.sekcja { padding-block: clamp(24px, 5vw, 56px); }
.sekcja--atuty { background: var(--tlo-alt); }

.sekcja__tytul {
    font-size: clamp(1.45rem, 1.2rem + 1.4vw, 2.2rem);
    margin-bottom: .3em;
    text-align: center;
}
.sekcja__tytul::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    background: var(--akcent);
    border-radius: 3px;
}
.sekcja__lead {
    max-width: 62ch;
    margin: 0 auto clamp(20px, 4vw, 36px);
    text-align: center;
    color: var(--tekst-mut);
}

/* ---------- kafle kategorii ---------- */
.kafle {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--odstep);
}

.kafel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.kafel__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tlo-alt); }
.kafel__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }

.kafel__tytul {
    margin: 16px 16px 6px;
    font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
}
.kafel__opis {
    margin: 0 16px 14px;
    font-size: .98rem;
    color: var(--tekst-mut);
}
.kafel__wiecej {
    margin: auto 16px 16px;
    font-weight: 700;
    color: var(--akcent-ciemny);
}

@media (hover: hover) and (pointer: fine) {
    .kafel:hover { transform: translateY(-3px); box-shadow: var(--cien); border-color: var(--akcent); }
    .kafel:hover .kafel__img { transform: scale(1.04); }
}

@media (min-width: 560px) {
    .kafle { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .kafle { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- atuty ---------- */
.atuty {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--odstep);
}

.atut {
    padding: clamp(16px, 3vw, 24px);
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    border-left: 4px solid var(--akcent);
}

.atut__tytul { font-size: 1.1rem; margin-bottom: .35em; }
.atut__opis { margin: 0; color: var(--tekst-mut); font-size: .97rem; }

@media (min-width: 560px) { .atuty { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .atuty { grid-template-columns: repeat(4, 1fr); } }

/* ---------- nagłówek podstrony + ścieżka ---------- */
.sciezka { padding-top: 12px; font-size: .88rem; color: var(--tekst-mut); }
.sciezka ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.sciezka li + li::before { content: '/'; margin-right: 6px; color: var(--linia); }
.sciezka a { color: var(--tekst-mut); }

.naglowek-strony {
    padding-block: clamp(16px, 3vw, 32px) clamp(20px, 4vw, 36px);
    max-width: 70ch;
}
.naglowek-strony__tytul { font-size: clamp(1.7rem, 1.4rem + 2vw, 2.8rem); }
.naglowek-strony__lead { color: var(--tekst-mut); margin: 0; font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }

/* ---------- galeria ---------- */
.galeria__siatka {
    list-style: none;
    margin: 0 -4px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.galeria__mini {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--tlo-alt);
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    aspect-ratio: 4 / 3;
}

.galeria__mini picture { display: block; width: 100%; height: 100%; }
.galeria__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.galeria__lupa {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(34, 31, 26, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center / 16px no-repeat;
    opacity: .9;
    transition: opacity .2s;
}

@media (hover: hover) and (pointer: fine) {
    .galeria__mini:hover .galeria__img { transform: scale(1.05); }
    .galeria__mini:hover .galeria__lupa { opacity: 1; }
}

@media (min-width: 560px) {
    .galeria__siatka { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
}
@media (min-width: 1024px) {
    .galeria__siatka { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.lightbox[hidden] { display: none; }

.lightbox__tlo {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 15, .92);
}

.lightbox__okno {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lightbox__figura {
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100dvh - 130px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #1a1815;
}

.lightbox__podpis {
    color: #f0ece5;
    font-size: .9rem;
    text-align: center;
    max-width: 70ch;
}

.lightbox__zamknij,
.lightbox__strzala {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s;
}

.lightbox__zamknij {
    position: absolute;
    top: -4px;
    right: 0;
    transform: translateY(-100%);
    font-size: 2rem;
}
.lightbox__strzala { font-size: 2.2rem; }

@media (hover: hover) and (pointer: fine) {
    .lightbox__zamknij:hover,
    .lightbox__strzala:hover { background: rgba(255, 255, 255, .25); }
}

@media (max-width: 559px) {
    .lightbox__strzala { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; }
    .lightbox__strzala--prev { left: 0; }
    .lightbox__strzala--next { right: 0; }
    .lightbox__figura { width: 100%; }
}


/* ---------- kontakt ---------- */
.kontakt {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(20px, 4vw, 40px);
}

.kontakt__tytul {
    font-size: clamp(1.2rem, 1.1rem + .6vw, 1.5rem);
    margin-bottom: 1em;
}

.kontakt__dane {
    background: var(--tlo-alt);
    border-radius: var(--promien);
    padding: clamp(18px, 4vw, 28px);
    align-self: start;
}

.kontakt__lista {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.kontakt__lista li { display: flex; flex-direction: column; }
.kontakt__etykieta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tekst-mut);
}
.kontakt__wartosc {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
    font-weight: 600;
    text-decoration: none;
}
.kontakt__godziny { color: var(--tekst-mut); }

@media (min-width: 900px) {
    .kontakt { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

/* ---------- formularz ---------- */
.formularz { display: grid; gap: 14px; }

.formularz__pole { display: flex; flex-direction: column; gap: 6px; }

.formularz__pole label { font-weight: 600; font-size: .95rem; }

.formularz input[type="text"],
.formularz input[type="email"],
.formularz input[type="tel"],
.formularz textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--tekst);
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}

.formularz textarea { min-height: 130px; resize: vertical; }

.formularz input:focus,
.formularz textarea:focus {
    outline: none;
    border-color: var(--akcent);
    box-shadow: 0 0 0 3px rgba(122, 92, 53, .18);
}

.formularz [aria-invalid="true"] { border-color: #b3261e; }

.formularz__blad { margin: 0; font-size: .88rem; color: #b3261e; }

.formularz__pole--ukryte {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.formularz__pole--zgoda {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.formularz__pole--zgoda input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--akcent);
}
.formularz__pole--zgoda label { font-weight: 400; font-size: .92rem; }

.formularz__wyslij { justify-self: start; }
.formularz__info { margin: 0; font-size: .85rem; color: var(--tekst-mut); }

.komunikat {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: .95rem;
}
.komunikat--sukces { background: #e8f3e4; border: 1px solid #b6d6a8; color: #24401c; }
.komunikat--blad { background: #fdecea; border: 1px solid #f2b8b5; color: #8c1d18; }

/* ---------- CTA ---------- */
.cta {
    margin-top: clamp(24px, 5vw, 56px);
    padding-block: clamp(24px, 5vw, 44px);
    background: var(--akcent-ciemny);
    color: #f7f2ea;
}

.cta__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.cta__tytul { font-size: clamp(1.3rem, 1.15rem + 1.2vw, 1.9rem); color: #fff; margin-bottom: .3em; }
.cta__opis { margin: 0; max-width: 52ch; color: #efe6da; }

.cta__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn--akcent { background: #fff; color: var(--akcent-ciemny); }
.cta .btn--obrys { border-color: #f7f2ea; color: #fff; }

@media (hover: hover) and (pointer: fine) {
    .cta .btn--akcent:hover { background: var(--tlo-alt); color: var(--akcent-ciemny); }
    .cta .btn--obrys:hover { background: #fff; color: var(--akcent-ciemny); }
}

@media (min-width: 900px) {
    .cta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
    .cta__akcje { flex: 0 0 auto; }
}

/* ---------- stopka ---------- */
.stopka {
    flex-shrink: 0;
    background: var(--tlo-alt);
    border-top: 1px solid var(--linia);
    padding-top: clamp(24px, 4vw, 40px);
}

.stopka__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(20px, 4vw, 32px);
}

.stopka__logo { width: 110px; height: auto; margin-bottom: 12px; }
.stopka__opis { margin: 0; color: var(--tekst-mut); max-width: 34ch; font-size: .95rem; }

.stopka__tytul {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tekst-mut);
    margin-bottom: .9em;
}

.stopka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stopka__lista a { color: var(--tekst); text-decoration: none; }
.stopka__lista a:hover { text-decoration: underline; }
.stopka__godziny { color: var(--tekst-mut); font-size: .92rem; }

.stopka__dol {
    border-top: 1px solid var(--linia);
    padding-block: 14px calc(14px + env(safe-area-inset-bottom));
    font-size: .85rem;
    color: var(--tekst-mut);
}
.stopka__dol p { margin: 0; }

@media (min-width: 700px) {
    .stopka__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- 404 / informacje ---------- */
.blad-404__kod {
    font-size: clamp(3rem, 2rem + 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 .1em;
    color: var(--linia);
}
.blad-404__lista {
    list-style: none;
    margin: 0 0 clamp(20px, 4vw, 40px);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.info {
    padding: 16px;
    background: var(--tlo-alt);
    border-radius: var(--promien);
}

/* ---------- dostępność: mniej ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .hero__tor { scroll-behavior: auto; }
}


/* ---------- wstęp na stronie głównej ---------- */
.wstep { padding-block: clamp(24px, 4vw, 48px) clamp(8px, 2vw, 16px); }
.wstep__inner { max-width: 900px; }
.wstep__tytul { font-size: clamp(1.6rem, 1.25rem + 2.4vw, 2.9rem); margin-bottom: .35em; }
.wstep__opis {
    color: var(--tekst-mut);
    max-width: 66ch;
    font-size: clamp(1rem, .95rem + .45vw, 1.2rem);
}
.wstep__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------- panel menu na telefonie ---------- */
@media (max-width: 899px) {
    .js .nav {
        padding: 6px var(--odstep) calc(14px + env(safe-area-inset-bottom));
        background: var(--tlo);
    }
    .nav__lista { gap: 0; }
    .nav__link {
        padding: .72em .2em;
        border-bottom: 1px solid var(--linia);
        border-radius: 0;
    }
    .nav__lista li:last-child .nav__link { border-bottom: 0; }
    .nav__link.is-active {
        background: transparent;
        box-shadow: none;
        color: var(--akcent-ciemny);
        font-weight: 700;
    }
}