/*
 * Strony klienta hurtowego — styl w duchu Apple:
 * dużo powietrza, duża typografia, stonowane szarości, pływające etykiety,
 * przyciski-pigułki. Zieleń marki tylko tam, gdzie coś się dzieje
 * (przycisk, zaznaczenie, fokus).
 */
:root {
    --zielen: #0e9e27;
    --zielen-hover: #0b8a21;
    --zielen-mgla: rgba(14, 158, 39, .14);
    --tekst: #1d1d1f;
    --tekst-2: #6e6e73;
    --tekst-3: #86868b;
    --linia: #d2d2d7;
    --pole: #ffffff;
    --tlo: #f5f5f7;
    --blad: #e30000;
    /* „Inter Variable” to nazwa, pod którą Inter jest serwowany lokalnie; samo „Inter” nie pasowało. */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.022em;
    color: var(--tekst);
    background: var(--tlo);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--zielen); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── układ ── */
.ekran { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ekran__lewa {
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 40px 36px;
    background: var(--tlo);
}
.ekran__prawa { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: #111; }
.ekran__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ekran__prawa::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.ekran__napis { position: absolute; z-index: 1; inset: 0 0 auto 0; padding: 64px 64px; color: #f5f5f7; max-width: 38rem; }
.ekran__napis h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
.ekran__napis p { margin: 0; font-size: 19px; line-height: 1.42; color: rgba(245, 245, 247, .82); max-width: 34ch; }

.marka { margin-bottom: 36px; }
.marka .stm-marka__logo { height: 56px; }
.marka .stm-marka__badge { background: #fff; box-shadow: 0 0 0 1px var(--linia); }

/* ── karta ── */
.karta {
    width: min(600px, 100%);
    background: #fff;
    border-radius: 28px;
    padding: 52px 56px 44px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .02), 0 12px 40px rgba(0, 0, 0, .05);
}
.karta--waska { width: min(480px, 100%); }
.karta__tytul { margin: 0 0 10px; text-align: center; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.028em; }
.karta__wstep { margin: 0 auto 40px; max-width: 40ch; text-align: center; font-size: 17px; line-height: 1.47; color: var(--tekst-2); }
.karta__dol { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--tekst-2); }

.stopka { margin-top: 32px; text-align: center; font-size: 14px; color: var(--tekst-2); }
.stopka__znak { margin-top: 8px; font-size: 12px; color: var(--tekst-3); }

/* ── sekcje ── */
.sekcja + .sekcja { margin-top: 44px; }
.sekcja__naglowek { margin-bottom: 20px; }
.sekcja__tytul { margin: 0; font-size: 24px; line-height: 1.16; font-weight: 600; letter-spacing: -.02em; }
.sekcja__opis { margin: 4px 0 0; font-size: 15px; color: var(--tekst-2); }

/* ── pola z pływającą etykietą ── */
.wiersz { display: grid; gap: 10px; }
.wiersz + .wiersz, .pole + .pole, .pole + .wiersz, .wiersz + .pole { margin-top: 10px; }
/* Pola obok siebie w jednym wierszu startują na tej samej wysokości —
   bez tego prawe pole łapało odstęp „pole + pole” i zjeżdżało w dół. */
.wiersz > .pole { margin-top: 0; }
.wiersz--2 { grid-template-columns: 1fr 1fr; }
.wiersz--2-1 { grid-template-columns: 2fr 1fr; }
.wiersz--1-2 { grid-template-columns: 1fr 2fr; }

.pole__ramka { position: relative; }
.pole__ramka input {
    width: 100%;
    height: 48px;
    padding: 18px 14px 4px;
    font: inherit;
    font-size: 15px;
    letter-spacing: -.022em;
    color: var(--tekst);
    background: var(--pole);
    border: 1px solid var(--linia);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.pole__ramka label {
    position: absolute;
    left: 15px; top: 14px;
    font-size: 15px;
    color: var(--tekst-3);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .2s ease, color .2s ease;
}
/* Etykieta wędruje do góry, gdy pole ma fokus albo coś w nim jest. */
.pole__ramka input:focus + label,
.pole__ramka input:not(:placeholder-shown) + label { transform: translateY(-8px) scale(.75); }
/* Podpowiedź (np. „00-000”) widać tylko w aktywnym polu, pod podniesioną etykietą. */
.pole__ramka input::placeholder { color: var(--tekst-3); opacity: 1; }
.pole__ramka input:not(:focus)::placeholder { color: transparent; }
.pole__ramka input:focus { border-color: var(--zielen); box-shadow: 0 0 0 4px var(--zielen-mgla); }

.pole--blad .pole__ramka input { border-color: var(--blad); background: #fff8f8; }
.pole--blad .pole__ramka input:focus { box-shadow: 0 0 0 4px rgba(227, 0, 0, .12); }
.pole__blad { margin: 8px 4px 0; font-size: 13px; color: var(--blad); }
.pole__blad::before { content: "! "; font-weight: 700; }

.pole__etykieta { display: block; margin: 8px 0 12px; font-size: 15px; color: var(--tekst-2); }

/* ── wybór branży: pigułki ── */
.kafelki { display: flex; flex-wrap: wrap; gap: 10px; }
.kafelek input { position: absolute; opacity: 0; pointer-events: none; }
.kafelek span {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--tekst);
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: 980px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    user-select: none;
}
.kafelek span:hover { border-color: var(--tekst-3); }
.kafelek input:checked + span { border-color: var(--zielen); box-shadow: inset 0 0 0 1px var(--zielen); background: #f4fbf5; }
.kafelek input:focus-visible + span { box-shadow: 0 0 0 4px var(--zielen-mgla); }

/* ── wymagania hasła: dyskretna linijka pod polem ── */
.wymagania { margin: 10px 4px 0; }
.wymagania[hidden] { display: none; }
.wymagania ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wymagania li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tekst-3); transition: color .2s; }
.wymagania li::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid #c7c7cc; box-sizing: border-box; transition: all .2s;
}
.wymagania li.ok { color: var(--zielen); }
.wymagania li.ok::before {
    border-color: var(--zielen); background: var(--zielen)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.6l4.5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ── przycisk ── */
.przycisk {
    display: block; width: 100%; height: 48px; margin-top: 32px;
    font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.022em;
    color: #fff; background: var(--zielen);
    border: 0; border-radius: 980px; cursor: pointer;
    transition: background .2s, transform .1s;
}
.przycisk:hover { background: var(--zielen-hover); }
.przycisk:active { transform: scale(.99); }

.komunikat { margin: 0 0 24px; padding: 14px 18px; border-radius: 12px; font-size: 15px; }
.komunikat--ok { color: #1d1d1f; background: #f4fbf5; border: 1px solid #cdebd3; }
.komunikat--blad { color: #1d1d1f; background: #fff5f5; border: 1px solid #f5c6c6; }

.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sukces { text-align: center; padding: 12px 0 4px; }
.sukces__ikona {
    width: 72px; height: 72px; margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--zielen); color: #fff; font-size: 34px; font-weight: 600;
}

/* ── panel klienta ── */
.belka {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 32px;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.belka .stm-marka__logo { height: 38px; }
.belka__prawa { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--tekst-2); }
.belka__wyloguj {
    font: inherit; font-size: 14px; color: var(--zielen); background: none; border: 0; cursor: pointer; padding: 6px 0;
}
.belka__wyloguj:hover { text-decoration: underline; }
.tresc { max-width: 1040px; margin: 0 auto; padding: 56px 32px 80px; }
.tresc h1 { margin: 0 0 8px; font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.tresc__wstep { margin: 0 0 40px; font-size: 21px; color: var(--tekst-2); }
.kafle-panelu { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.kafel { background: #fff; border-radius: 22px; padding: 28px 30px; }
.kafel h2 { margin: 0 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.kafel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 15px; }
.kafel dt { color: var(--tekst-2); }
.kafel dd { margin: 0; }
.kafel--akcent { background: #1d1d1f; color: #f5f5f7; }
.kafel--akcent h2 { color: #fff; }
.kafel--akcent p { margin: 0; font-size: 17px; line-height: 1.47; color: rgba(245, 245, 247, .82); }

/* ── wąskie ekrany ── */
@media (max-width: 1080px) {
    .ekran__napis { padding: 48px 44px; }
    .ekran__napis h2 { font-size: 32px; }
    .karta { padding: 44px 36px 36px; }
}
@media (max-width: 960px) {
    .ekran { grid-template-columns: 1fr; }
    .ekran__prawa { display: none; }
    .ekran__lewa { padding: 36px 16px 28px; }
    .karta { padding: 36px 22px 28px; border-radius: 22px; }
    .karta__tytul { font-size: 32px; }
}
@media (max-width: 520px) {
    .wiersz--2, .wiersz--2-1, .wiersz--1-2 { grid-template-columns: 1fr; }
    .belka { padding: 10px 16px; }
    .tresc { padding: 32px 16px 48px; }
    .tresc h1 { font-size: 34px; }
}

/* ════════ panel hurtownika: katalog, koszyk, zamówienia ════════ */
.sklep .tresc { max-width: 1120px; padding-top: 44px; }
.sklep .tresc--szeroka { max-width: 1240px; }
.sklep .tresc h1 { font-size: 40px; }
.sklep .tresc__wstep { font-size: 19px; margin-bottom: 28px; }

.nawigacja { display: flex; gap: 4px; margin-right: auto; margin-left: 28px; }
.nawigacja a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 980px;
    font-size: 15px; font-weight: 500; color: var(--tekst); text-decoration: none;
}
.nawigacja a:hover { background: rgba(0, 0, 0, .05); }
.nawigacja a.aktywna { background: var(--tekst); color: #fff; }
.licznik {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; background: var(--zielen); color: #fff;
    font-variant-numeric: tabular-nums;
}
.belka__firma { font-weight: 500; color: var(--tekst); }

/* przyciski — warianty */
.przycisk--maly { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 38px; margin: 0; padding: 0 18px; font-size: 14px; text-decoration: none; }
.przycisk--jasny { background: #fff; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--linia); }
.przycisk--jasny:hover { background: #fafafa; }
.przycisk[disabled] { background: var(--linia); cursor: not-allowed; }
a.przycisk { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 28px; text-decoration: none; }

.dymek { margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); font-size: 15px; }
.dymek--sukces { background: #f4fbf5; box-shadow: inset 0 0 0 1px #cdebd3; }
.dymek--sukces strong { display: block; margin-bottom: 2px; }
.pusto { color: var(--tekst-2); font-size: 17px; padding: 40px 0; }
.wstecz { display: inline-block; margin-bottom: 16px; font-size: 15px; text-decoration: none; }

.naglowek-strony { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.naglowek-strony__akcje { display: flex; gap: 10px; margin-bottom: 28px; }
.naglowek-strony__akcje form { margin: 0; }

/* skróty na starcie */
.skroty { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.skrot {
    display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; border-radius: 22px;
    background: #fff; color: var(--tekst); text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.skrot:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.08); text-decoration: none; }
.skrot__tytul { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.skrot__opis { font-size: 15px; color: var(--tekst-2); }
.skrot--akcent { background: var(--zielen); color: #fff; }
.skrot--akcent .skrot__opis { color: rgba(255,255,255,.85); }

.blok { margin-bottom: 32px; }
.blok__naglowek { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.blok__naglowek h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }

/* lista zamówień */
.lista-zamowien { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; }
.wiersz-zamowienia {
    position: relative;
    display: grid; grid-template-columns: 190px 1fr auto minmax(110px, auto) 20px; align-items: center; gap: 16px 18px;
    padding: 16px 24px; color: var(--tekst); cursor: pointer; list-style: none;
}
.wiersz-zamowienia::-webkit-details-marker { display: none; }
.zam-wiersz + .zam-wiersz { border-top: 1px solid rgba(0,0,0,.06); }
.zam-wiersz[open] > .wiersz-zamowienia, .wiersz-zamowienia:hover { background: #fafafc; }
.wiersz-zamowienia__numer { display: flex; flex-direction: column; gap: 2px; }
.wiersz-zamowienia__powiel { position: relative; z-index: 1; margin: 0; }
.wiersz-zamowienia__powiel button {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 980px;
    background: var(--tlo); font: inherit; font-size: 13px; font-weight: 600; color: var(--tekst); cursor: pointer; white-space: nowrap;
}
.wiersz-zamowienia__powiel button:hover { background: var(--zielen-mgla); color: var(--zielen-hover); }
.wiersz-zamowienia__powiel svg { width: 16px; height: 16px; flex: none; }
.wiersz-zamowienia__strzalka { display: flex; color: var(--tekst-3); }
.wiersz-zamowienia__strzalka svg { width: 20px; height: 20px; transition: transform .2s ease; }
.zam-wiersz[open] .wiersz-zamowienia__strzalka svg { transform: rotate(180deg); }
.zam-wiersz__tresc { padding: 4px 24px 20px; }
.zam-wiersz__pozycje { list-style: none; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--tlo); }
.zam-wiersz__pozycje li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 8px 0; font-size: 14px; }
.zam-wiersz__pozycje li + li { border-top: 1px solid rgba(0,0,0,.06); }
.zam-wiersz__pozycje img, .zam-wiersz__brak { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.zam-wiersz__nazwa { min-width: 0; font-weight: 500; }
.zam-wiersz__nazwa small { display: block; font-size: 12px; font-weight: 400; color: var(--tekst-2); }
.zam-wiersz__ilosc { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zam-wiersz__cena { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.zam-wiersz__akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.zam-wiersz__akcje form { margin: 0; }
.zam-wiersz__szczegoly { font-size: 14px; font-weight: 600; }
.wiersz-zamowienia__numer span { font-size: 13px; color: var(--tekst-2); }
.wiersz-zamowienia__kwota { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.wiersz-zamowienia__stan { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oplata-znak { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #c0362c; white-space: nowrap; }
.oplata-znak svg { width: 17px; height: 17px; flex: none; }
.oplata-znak--toku { color: #9a5b00; }
.oplata-znak--ok { color: #12873a; }
.miniatury { display: flex; gap: 6px; align-items: center; }
.miniatury img, .miniatury__brak { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--tlo); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.miniatury__wiecej { font-size: 13px; color: var(--tekst-2); padding-left: 4px; }

.status { display: inline-block; padding: 3px 10px; border-radius: 980px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.status--nowe { background: #e8f1fd; color: #0a5bd3; }
.status--w_realizacji { background: #fff4e0; color: #9a5b00; }
.status--wyslane { background: #eef0ff; color: #3b45b8; }
.status--zrealizowane { background: #e7f6ea; color: #0b7a1f; }
.status--anulowane { background: #f0f0f2; color: var(--tekst-2); }

/* katalog */
.szukaj input {
    width: 320px; max-width: 100%; height: 42px; padding: 0 18px; margin-bottom: 28px;
    font: inherit; font-size: 15px; border: 1px solid var(--linia); border-radius: 980px; background: #fff;
}
.szukaj input:focus { outline: none; border-color: var(--zielen); box-shadow: 0 0 0 4px var(--zielen-mgla); }
.kategorie { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 24px; scrollbar-width: thin; }
.kategorie a {
    flex: none; padding: 8px 14px; border-radius: 980px; background: #fff;
    font-size: 14px; font-weight: 500; color: var(--tekst); text-decoration: none; white-space: nowrap;
}
.kategorie a span { color: var(--tekst-3); font-weight: 400; margin-left: 2px; }
.kategorie a:hover { box-shadow: inset 0 0 0 1px var(--linia); }
.kategorie a.aktywna { background: var(--tekst); color: #fff; }
.kategorie a.aktywna span { color: rgba(255,255,255,.6); }

.produkty { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.produkt {
    display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: 22px; background: #fff;
    scroll-margin-top: 90px;
}
.produkt__foto { aspect-ratio: 3 / 4; max-width: 100%; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background: var(--tlo); }
.produkt__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produkt__nazwa { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.produkt__opis { margin: 4px 0 12px; font-size: 13px; color: var(--tekst-2); line-height: 1.35; min-height: 2.7em; }
.produkt__ceny { display: flex; flex-direction: column; gap: 2px; margin-top: auto; margin-bottom: 14px; }
.produkt__cena { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.produkt__sklep { font-size: 13px; color: var(--tekst-3); text-decoration: line-through; }
.produkt__dodaj { display: flex; gap: 8px; }
.produkt__dodaj .przycisk { flex: 1; }

/* licznik ilości − 1 + */
.ilosc { display: inline-flex; align-items: center; height: 38px; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--linia); background: #fff; }
.ilosc button { width: 34px; height: 38px; border: 0; background: none; font-size: 18px; color: var(--tekst); cursor: pointer; border-radius: 980px; }
.ilosc button:hover { background: rgba(0,0,0,.05); }
.ilosc input {
    width: 48px; height: 38px; border: 0; background: none; text-align: center;
    font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.ilosc input::-webkit-outer-spin-button, .ilosc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ilosc input:focus { outline: none; }
.ilosc:focus-within { box-shadow: inset 0 0 0 1px var(--zielen), 0 0 0 4px var(--zielen-mgla); }

.strony { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; font-size: 15px; }
.strony a { text-decoration: none; font-weight: 500; }
.strony__nieaktywny { color: var(--tekst-3); }
.strony__ktora { color: var(--tekst-2); }

/* koszyk i szczegóły zamówienia */
.koszyk { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.koszyk__pozycje { background: #fff; border-radius: 22px; padding: 8px 24px; }
.koszyk__przelicz { margin: 12px 0 14px; }
.pozycja { display: grid; grid-template-columns: 72px 1fr auto 110px auto; align-items: center; gap: 18px; padding: 16px 0; }
.pozycja + .pozycja { border-top: 1px solid rgba(0,0,0,.06); }
.pozycja--zamowiona { grid-template-columns: 72px 1fr auto 110px; }
.pozycja__foto { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--tlo); }
.pozycja__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pozycja__opis { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pozycja__opis strong { font-weight: 600; }
.pozycja__opis span { font-size: 14px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.pozycja__ilosc { font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.05); }
.pozycja__wartosc { text-align: right; font-variant-numeric: tabular-nums; }
.pozycja__usun { font: inherit; font-size: 14px; color: var(--tekst-2); background: none; border: 0; cursor: pointer; }
.pozycja__usun:hover { color: var(--blad); }

.podsumowanie { position: sticky; top: 84px; background: #fff; border-radius: 22px; padding: 24px 26px; }
.podsumowanie h2 { margin: 0 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.podsumowanie dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0 0 16px; font-size: 15px; }
.podsumowanie dt { color: var(--tekst-2); }
.podsumowanie dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.podsumowanie .podsumowanie__razem { padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); font-size: 19px; font-weight: 700; color: var(--tekst); }
.podsumowanie__info { margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); }
.podsumowanie textarea {
    width: 100%; margin: 6px 0 0; padding: 10px 14px; border: 1px solid var(--linia); border-radius: 12px;
    font: inherit; font-size: 15px; resize: vertical;
}
.podsumowanie textarea:focus { outline: none; border-color: var(--zielen); box-shadow: 0 0 0 4px var(--zielen-mgla); }
.podsumowanie .przycisk { margin-top: 16px; }
.podsumowanie .komunikat { margin: 12px 0 0; }
.pusty-koszyk { padding: 56px 24px; text-align: center; background: #fff; border-radius: 22px; }
.pusty-koszyk p { margin: 0 0 20px; font-size: 19px; color: var(--tekst-2); }

/* etapy zamówienia */
.etapy { display: flex; gap: 0; list-style: none; margin: 0 0 28px; padding: 0; counter-reset: etap; }
.etapy li {
    flex: 1; position: relative; padding-top: 22px; font-size: 14px; color: var(--tekst-3); counter-increment: etap;
}
.etapy li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--linia); }
.etapy li::after { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--linia); }
.etapy li.zrobione { color: var(--tekst); }
.etapy li.zrobione::before { background: var(--zielen); }
.etapy li.zrobione::after { background: var(--zielen); box-shadow: none; }
.etapy li.teraz { font-weight: 600; }

@media (max-width: 900px) {
    .nawigacja { margin-left: 8px; }
    .belka__firma { display: none; }
    .skroty { grid-template-columns: 1fr; }
    .koszyk { grid-template-columns: 1fr; }
    .podsumowanie { position: static; }
    .wiersz-zamowienia { grid-template-columns: 1fr auto; grid-template-areas: "numer kwota" "mini mini" "stan powiel"; row-gap: 12px; }
    .wiersz-zamowienia__numer { grid-area: numer; }
    .wiersz-zamowienia__kwota { grid-area: kwota; }
    .wiersz-zamowienia .miniatury { grid-area: mini; }
    .wiersz-zamowienia { grid-template-columns: 1fr auto; grid-template-areas: "numer kwota" "mini mini" "stan powiel" "strzalka strzalka"; }
    .wiersz-zamowienia__stan { grid-area: stan; align-items: flex-start; }
    .wiersz-zamowienia__strzalka { grid-area: strzalka; justify-self: center; }
    .zam-wiersz__tresc { padding: 4px 16px 18px; }
    .zam-wiersz__pozycje li { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .zam-wiersz__pozycje .zam-wiersz__cena { grid-column: 2 / -1; text-align: left; padding-left: 54px; margin-top: -4px; }
}
@media (max-width: 640px) {
    .belka { flex-wrap: wrap; }
    .nawigacja { order: 3; width: 100%; margin: 4px 0 0; overflow-x: auto; }
    .nawigacja a { padding: 7px 12px; font-size: 14px; }
    .sklep .tresc h1 { font-size: 30px; }
    .produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .produkt { padding: 10px 10px 12px; border-radius: 18px; }
    .produkt__dodaj { flex-direction: column; }
    .produkt__dodaj .ilosc { justify-content: space-between; }
    .pozycja { grid-template-columns: 56px 1fr; gap: 10px 14px; }
    .pozycja__foto { width: 56px; height: 56px; }
    .pozycja .ilosc, .pozycja__ilosc { grid-column: 2; justify-self: start; }
    .pozycja__wartosc { grid-column: 2; text-align: left; }
    .pozycja__usun { grid-column: 2; justify-self: start; }
    .koszyk__pozycje { padding: 4px 16px; }
    .etapy li { font-size: 12px; }
    .naglowek-strony__akcje { flex-wrap: wrap; }
}

/* ── płatności ── */
.metody { border: 0; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.metody legend { margin-bottom: 8px; }
.metoda { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linia); cursor: pointer; background: #fff; }
.metoda:has(input:checked) { box-shadow: inset 0 0 0 2px var(--zielen); background: #f4fbf5; }
.metoda input { margin-top: 3px; accent-color: var(--zielen); width: 18px; height: 18px; flex: none; }
.metoda strong { display: block; font-size: 15px; }
.metoda small { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 2px; line-height: 1.35; }
.platnosc { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: #fff8ec; box-shadow: inset 0 0 0 1px #f3e2bf; display: flex; flex-direction: column; gap: 2px; }
.platnosc--ok { background: #f4fbf5; box-shadow: inset 0 0 0 1px #cdebd3; }
.platnosc__etykieta { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-2); }
.platnosc strong { font-size: 17px; }
.platnosc__metoda { font-size: 13px; color: var(--tekst-2); }
.platnosc__przycisk { margin-top: 12px !important; width: 100%; }
.platnosc__przelew { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 14px; }
.platnosc__przelew dt { color: var(--tekst-2); }
.platnosc__przelew dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }
.oplata { color: #9a5b00; }
.oplata--ok { color: #0b7a1f; }
.przejscie { max-width: 520px; margin: 40px auto; text-align: center; background: #fff; border-radius: 22px; padding: 44px 32px; }
.przejscie h1 { font-size: 32px !important; }
.przejscie__opis { color: var(--tekst-2); margin: 0 0 24px; }
.przejscie__kolko { width: 44px; height: 44px; margin: 0 auto 20px; border-radius: 50%; border: 4px solid #e6f4e8; border-top-color: var(--zielen); animation: obrot 0.9s linear infinite; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* ── podgląd jako klient (zespół) ── */
/* Pływająca pigułka u dołu ekranu — zawsze widoczna, niczego nie zasłania. */
.podglad {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
    display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
    padding: 8px 8px 8px 20px; border-radius: 980px;
    background: rgba(29, 29, 31, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: #f5f5f7; font-size: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.sklep:has(.podglad) .tresc { padding-bottom: 110px; }
.podglad strong { color: #fff; }
.podglad form { margin: 0; }
.podglad button {
    font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; border: 0; border-radius: 980px;
    background: #fff; color: #1d1d1f; cursor: pointer;
}
.podglad--blokada {
    position: static; transform: none; max-width: none; margin: 0; border-radius: 0; justify-content: center;
    padding: 10px 16px; background: #fff4e0; color: #7a4a00; box-shadow: none; backdrop-filter: none;
}
.podglad > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.podglad button { flex: none; }
@media (max-width: 640px) { .podglad { bottom: 12px; font-size: 13px; padding-left: 14px; } .podglad__dodatki { display: none; } }

.dostawa { margin: 0 0 10px; padding: 14px 16px; border-radius: 14px; background: #f5f5f7; display: flex; flex-direction: column; gap: 2px; }
.dostawa strong { font-size: 17px; }

.zgoda { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 13px; line-height: 1.45; color: var(--tekst-2); cursor: pointer; }
.zgoda input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--zielen); }
.zgoda em { font-style: normal; color: var(--tekst-3); }
.kafel form { margin-top: 12px; }
.kafel__opis { margin: 0 0 4px; font-size: 15px; color: var(--tekst-2); line-height: 1.45; }

.produkt__prog { font-size: 12px; color: #2f7d38; font-weight: 600; }
.produkt__warunki { font-size: 12px; color: var(--tekst-2); margin-top: 2px; }

/* ════════ aktualności: karuzela banerów i kafelki ════════ */
.karuzela { position: relative; margin: 0 0 36px; }
.karuzela__tor {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: 24px; scrollbar-width: none; outline: none;
}
.karuzela__tor::-webkit-scrollbar { display: none; }
.slajd {
    position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden;
    aspect-ratio: 2.6 / 1; min-height: 300px; max-width: 100%; color: #fff; display: flex; align-items: flex-end;
}
.slajd__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slajd__cien { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%), linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); }
.slajd__tresc { position: relative; padding: 44px 88px; max-width: 720px; }
.slajd__etykieta { display: inline-block; padding: 4px 12px; border-radius: 980px; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.slajd__tytul { margin: 12px 0 8px; font-size: 44px; line-height: 1.06; font-weight: 700; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.slajd__opis { margin: 0; font-size: 19px; line-height: 1.4; color: rgba(255,255,255,.9); }
.slajd__akcje { display: flex; align-items: center; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.slajd__przycisk { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 980px; background: #fff; color: var(--tekst); font-weight: 600; font-size: 15px; text-decoration: none; }
.slajd__przycisk:hover { background: #f0f0f2; text-decoration: none; }
.slajd__wiecej { color: #fff; font-weight: 600; font-size: 15px; }
.karuzela__strzalka {
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 26px; line-height: 1; color: var(--tekst); cursor: pointer; opacity: 0; transition: opacity .2s;
}
.karuzela:hover .karuzela__strzalka, .karuzela__strzalka:focus-visible { opacity: 1; }
.karuzela__strzalka--lewo { left: 16px; }
.karuzela__strzalka--prawo { right: 16px; }
.karuzela__kropki { position: absolute; bottom: 16px; right: 24px; display: flex; gap: 8px; }
.karuzela__kropki button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .25s, background .25s; }
.karuzela__kropki button.aktywna { width: 24px; background: #fff; }

.kafle-aktualnosci { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.kafel-akt { border-radius: 22px; background: #fff; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.kafel-akt:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.kafel-akt__link { display: block; color: var(--tekst); text-decoration: none; }
.kafel-akt__link:hover { text-decoration: none; }
.kafel-akt__foto { position: relative; aspect-ratio: 16 / 9; max-width: 100%; }
.kafel-akt__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-akt__foto .slajd__etykieta { position: absolute; left: 14px; top: 14px; background: rgba(0,0,0,.35); }
.kafel-akt__tresc { padding: 16px 20px 20px; }
.kafel-akt__tresc h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.kafel-akt__tresc p { margin: 0 0 10px; font-size: 15px; color: var(--tekst-2); line-height: 1.45; }
.kafel-akt__data { font-size: 13px; color: var(--tekst-3); }

.aktualnosc { background: #fff; border-radius: 24px; overflow: hidden; }
.slajd--naglowek { aspect-ratio: 3 / 1; min-height: 260px; }
.slajd--naglowek .slajd__tytul { font-size: 40px; }
.aktualnosc__tresc { max-width: 720px; padding: 32px 52px 44px; font-size: 17px; line-height: 1.6; }
.aktualnosc__tresc p { margin: 0 0 18px; }
.aktualnosc__tresc .przycisk { width: auto; display: inline-flex; margin-top: 8px; }

@media (max-width: 900px) {
    .slajd { aspect-ratio: auto; min-height: 340px; }
    .slajd__tresc { padding: 28px 24px 44px; }
    .slajd__tytul { font-size: 30px; }
    .slajd__opis { font-size: 16px; }
    .karuzela__strzalka { display: none; }
    .karuzela__kropki { right: 50%; transform: translateX(50%); }
    .aktualnosc__tresc { padding: 24px; }
    .slajd--naglowek .slajd__tytul { font-size: 30px; }
}

/* ════════ start panelu: wyszukiwarka, aktualności w kartach, pulpit ════════ */
.szukajka {
    display: flex; align-items: center; gap: 0; margin: 0 0 32px; height: 56px; padding: 0 6px 0 18px;
    border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
.szukajka svg { width: 20px; height: 20px; flex: none; color: var(--tekst-3); }
.szukajka input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--tekst); }
.szukajka input:focus { outline: none; }
.szukajka select { height: 36px; max-width: 220px; padding: 0 12px; border: 0; border-left: 1px solid var(--linia); background: none; font: inherit; font-size: 14px; color: var(--tekst-2); }
.szukajka button { height: 44px; padding: 0 22px; margin-left: 6px; border: 0; border-radius: 12px; background: var(--zielen); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.szukajka button:hover { background: var(--zielen-hover); }
.szukajka:focus-within { box-shadow: 0 0 0 3px var(--zielen-mgla), 0 8px 24px rgba(0,0,0,.05); }

.wiadomosci { margin: 0 0 32px; }
.wiadomosci__naglowek { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.wiadomosci__naglowek h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.wiadomosci__sterowanie { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wiadomosci__sterowanie a { margin-left: 8px; font-weight: 500; text-decoration: none; }
.wiadomosci__strzalka { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); font-size: 20px; line-height: 1; color: var(--tekst); cursor: pointer; }
.wiadomosci__strzalka:hover { background: #fafafa; }
.wiadomosci__tor { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; padding-bottom: 4px; }
.wiadomosci__tor::-webkit-scrollbar { display: none; }
.wiadomosc { flex: 0 0 calc(50% - 10px); scroll-snap-align: start; border-radius: 22px; background: #fff; overflow: hidden; transition: box-shadow .2s; }
.wiadomosc:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.wiadomosc__link { display: block; color: var(--tekst); text-decoration: none; }
.wiadomosc__link:hover { text-decoration: none; }
.wiadomosc__foto { position: relative; aspect-ratio: 2 / 1; max-width: 100%; display: flex; align-items: flex-end; overflow: hidden; }
.wiadomosc__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wiadomosc:hover .wiadomosc__foto img { transform: scale(1.03); }
.wiadomosc__napis { position: relative; padding: 24px 28px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #fff; text-wrap: balance; }
.wiadomosc__etykieta { position: absolute; left: 16px; top: 16px; background: rgba(0,0,0,.35); }
.wiadomosc__data { position: absolute; right: 14px; top: 14px; padding: 4px 10px; border-radius: 980px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums; }
.wiadomosc__tekst { padding: 16px 22px 20px; text-align: center; }
.wiadomosc__tekst h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.wiadomosc__tekst p { margin: 0; font-size: 15px; color: var(--tekst-2); line-height: 1.4; }
.wiadomosci__kropki { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.wiadomosci__kropki button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--linia); cursor: pointer; transition: width .25s, background .25s; }
.wiadomosci__kropki button.aktywna { width: 24px; background: var(--zielen); }

.pulpit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; }
.kafel-pulpitu { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 26px; border-radius: 22px; background: #fff; }
.kafel-pulpitu h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-2); }
.kafel-pulpitu__glowna { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.kafel-pulpitu__glowna strong { font-weight: 700; }
.kafel-pulpitu__opis { margin: 0; font-size: 14px; color: var(--tekst-2); line-height: 1.45; }
.kafel-pulpitu__ok { color: var(--zielen); }
.kafel-pulpitu .przycisk { margin-top: auto !important; }
.kafel-pulpitu__miniatury { display: flex; gap: 8px; margin: 4px 0 8px; }
.kafel-pulpitu__miniatury img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--tlo); }
.kafel-pulpitu__ostatnie { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.06); width: 100%; font-size: 14px; color: var(--tekst-2); }
.kafel-pulpitu__ostatnie form { margin: 0; }
.link-przycisk { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--zielen); cursor: pointer; }
.link-przycisk:hover { text-decoration: underline; }
.kafel-pulpitu--alarm { box-shadow: inset 0 0 0 2px #f5c6c6; }
.alarm { color: var(--blad); }

.nawigacja__koszyk svg { width: 18px; height: 18px; }
.kategorie__oferta { color: var(--zielen) !important; }
.kategorie__oferta.aktywna { background: var(--zielen) !important; color: #fff !important; }

@media (max-width: 900px) {
    .pulpit { grid-template-columns: 1fr; }
    .wiadomosc { flex-basis: 100%; }
    .szukajka select { display: none; }
}
@media (max-width: 520px) {
    .szukajka { height: 52px; }
    .szukajka button { padding: 0 16px; }
    .wiadomosc__napis { font-size: 22px; }
}
.sklep .tresc h1.powitanie { margin: 0 0 16px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }

.wiadomosci__tor { align-items: flex-start; }
@media (max-width: 640px) {
    .nawigacja a { padding: 7px 10px; }
    .nawigacja__koszyk .nawigacja__napis { display: none; }
    .nawigacja__koszyk svg { width: 20px; height: 20px; }
}
@media (max-width: 640px) { .nawigacja__start { display: none !important; } }

/* ── katalog: przełącznik kafelki/lista i widok listy ── */
.naglowek-strony__akcje--katalog { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.naglowek-strony__akcje--katalog .szukaj input { margin-bottom: 0; }
.przelacznik-widoku { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.06); }
.przelacznik-widoku a { display: flex; align-items: center; justify-content: center; width: 38px; height: 36px; border-radius: 9px; color: var(--tekst-2); }
.przelacznik-widoku a:hover { color: var(--tekst); }
.przelacznik-widoku a.aktywny { background: #fff; color: var(--tekst); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.przelacznik-widoku svg { width: 18px; height: 18px; fill: currentColor; }

.lista-produktow { border-radius: 22px; background: #fff; overflow: hidden; }
.wiersz-produktu {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 230px auto; align-items: center; gap: 20px;
    padding: 14px 22px; scroll-margin-top: 90px;
}
.wiersz-produktu + .wiersz-produktu { border-top: 1px solid rgba(0,0,0,.06); }
.wiersz-produktu:hover { background: #fafafc; }
.wiersz-produktu__foto { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--tlo); }
.wiersz-produktu__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wiersz-produktu__nazwa { min-width: 0; }
.wiersz-produktu__nazwa h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.wiersz-produktu__nazwa p { margin: 2px 0 0; font-size: 13px; color: var(--tekst-2); }
.wiersz-produktu__sku { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--tlo); font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.wiersz-produktu .produkt__ceny { margin: 0; align-items: flex-end; text-align: right; }
.wiersz-produktu .produkt__cena { font-size: 19px; }
.wiersz-produktu .produkt__dodaj { flex-direction: row; align-items: center; }
.wiersz-produktu .produkt__dodaj .przycisk { flex: none; }

@media (max-width: 900px) {
    .wiersz-produktu { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px 14px; padding: 14px 16px; }
    .wiersz-produktu__foto { width: 56px; height: 56px; }
    .wiersz-produktu .produkt__dodaj { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
    .naglowek-strony__akcje--katalog { width: 100%; }
    .naglowek-strony__akcje--katalog .szukaj { flex: 1; }
    .naglowek-strony__akcje--katalog .szukaj input { width: 100%; }
    .wiersz-produktu .produkt__dodaj { flex-direction: row; }
    .wiersz-produktu .produkt__dodaj .ilosc { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .wiersz-produktu { grid-template-columns: 56px minmax(0, 1fr); }
    .wiersz-produktu .produkt__ceny { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left; }
    .wiersz-produktu .produkt__dodaj { grid-column: 1 / -1; justify-content: space-between; }
    .wiersz-produktu .produkt__dodaj .przycisk { flex: 1; }
    .wiersz-produktu__sku { white-space: nowrap; }
}

/* ════════ karta produktu ════════ */
.produkt__nazwa a, .wiersz-produktu__nazwa h2 a, .pozycja__opis a { color: inherit; text-decoration: none; }
.produkt__nazwa a:hover, .wiersz-produktu__nazwa h2 a:hover, .pozycja__opis a:hover { color: var(--zielen); }
.produkt__foto { position: relative; display: block; }
.produkt__licznik-zdjec { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 980px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; color: var(--tekst); }
.okruszki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; font-size: 14px; color: var(--tekst-3); }
.okruszki a { color: var(--tekst-2); text-decoration: none; }
.okruszki a:hover { color: var(--zielen); }

.karta-produktu { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 40px; }
.galeria { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.galeria__glowne { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; max-width: 100%; padding: 0; border: 0; border-radius: 24px; background: #fff; overflow: hidden; cursor: zoom-in; }
.galeria__glowne img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .2s; }
.galeria__lupa { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 18px; color: var(--tekst); }
.galeria__miniatury { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.galeria__miniatury button { flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); opacity: .75; transition: opacity .15s, box-shadow .15s; }
.galeria__miniatury button:hover { opacity: 1; }
.galeria__miniatury button.aktywna { opacity: 1; box-shadow: inset 0 0 0 2px var(--zielen); }
.galeria__miniatury img { width: 100%; height: 100%; object-fit: cover; display: block; }

.karta-produktu__zakup { display: flex; flex-direction: column; gap: 10px; }
.karta-produktu__kategoria { margin: 0; font-size: 14px; font-weight: 600; color: var(--zielen); }
.karta-produktu__zakup h1 { margin: 0 !important; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; }
.karta-produktu__podtytul { margin: 0; font-size: 19px; color: var(--tekst-2); }
.karta-produktu__sku { margin: 0; font-size: 13px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.karta-produktu__cena { margin: 14px 0 4px; padding: 20px 22px; border-radius: 18px; background: #fff; }
.karta-produktu__cena .produkt__ceny { margin: 0; }
.karta-produktu__cena .produkt__cena { font-size: 34px; }
.karta-produktu__zakup .produkt__dodaj { gap: 10px; }
.karta-produktu__zakup .produkt__dodaj .ilosc { height: 48px; }
.karta-produktu__zakup .produkt__dodaj .ilosc button, .karta-produktu__zakup .produkt__dodaj .ilosc input { height: 48px; }
.karta-produktu__zakup .produkt__dodaj .przycisk { height: 48px; font-size: 16px; }
.karta-produktu__korzysci { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tekst-2); }
.karta-produktu__korzysci li::before { content: "✓"; margin-right: 8px; color: var(--zielen); font-weight: 700; }
.karta-produktu__dane { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 12px 0 0; padding: 18px 22px; border-radius: 18px; background: #fff; font-size: 15px; }
.karta-produktu__dane dt { color: var(--tekst-2); }
.karta-produktu__dane dd { margin: 0; font-weight: 500; }
.karta-produktu__sklep { margin-top: 6px; font-size: 14px; }

.produkty--podobne { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.produkt--link { color: var(--tekst); text-decoration: none; gap: 4px; }
.produkt--link:hover { text-decoration: none; box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.produkt--link .produkt__foto { margin-bottom: 10px; }
.produkt--link .produkt__cena { font-size: 18px; margin-top: 4px; }

/* powiększenie zdjęć */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.92); }
.lightbox[hidden] { display: none !important; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 100px); object-fit: contain; border-radius: 8px; }
.lightbox__zamknij { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__strzalka { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.lightbox__strzalka:hover, .lightbox__zamknij:hover { background: rgba(255,255,255,.22); }
.lightbox__strzalka--lewo { left: 20px; }
.lightbox__strzalka--prawo { right: 20px; }
.lightbox__licznik { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 14px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .karta-produktu { grid-template-columns: 1fr; gap: 24px; }
    .galeria { position: static; }
    .karta-produktu__zakup h1 { font-size: 30px; }
    .lightbox img { max-width: 100vw; max-height: calc(100vh - 120px); border-radius: 0; }
    .lightbox__strzalka { top: auto; bottom: 16px; transform: none; }
}
.galeria, .karta-produktu__zakup { min-width: 0; }
.galeria__glowne:focus { outline: none; }
.galeria__glowne:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--zielen); }
@media (max-width: 900px) { .karta-produktu { grid-template-columns: minmax(0, 1fr); } }

/* ── lista: lupka i powiększenie miniatury ── */
.lista-produktow { overflow: visible; }
.lista-produktow > .wiersz-produktu:first-child { border-radius: 22px 22px 0 0; }
.lista-produktow > .wiersz-produktu:last-child { border-radius: 0 0 22px 22px; }
.wiersz-produktu__foto { position: relative; overflow: visible; background: none; }
.wiersz-produktu__foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--tlo); }
.lupka {
    position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--tekst); box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: transform .15s, background .15s, color .15s;
}
.lupka svg { width: 13px; height: 13px; }
.wiersz-produktu__foto:hover .lupka, .wiersz-produktu__foto:focus-visible .lupka { background: var(--zielen); color: #fff; transform: scale(1.1); }
.podglad-zdjecia { display: none; }

/* Tylko urządzenia z myszką: podgląd po najechaniu lub fokusie klawiatury */
@media (hover: hover) and (pointer: fine) {
    .podglad-zdjecia {
        display: block; position: absolute; left: calc(100% + 16px); top: 50%; z-index: 40;
        width: 260px; padding: 8px; border-radius: 20px; background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.22);
        opacity: 0; visibility: hidden; transform: translateY(calc(-50% + var(--przesun, 0px))) scale(.96); transform-origin: left center;
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
        pointer-events: none;
    }
    .podglad-zdjecia img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--tlo); }
    .wiersz-produktu__foto:hover .podglad-zdjecia, .wiersz-produktu__foto:focus-visible .podglad-zdjecia {
        opacity: 1; visibility: visible; transform: translateY(calc(-50% + var(--przesun, 0px))) scale(1); transition-delay: .12s, .12s, 0s;
    }
    .wiersz-produktu__foto { cursor: zoom-in; }
}

/* ── podpowiedzi wyszukiwarki ── */
.szukajka, .szukaj { position: relative; }
.podpowiedzi {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
    max-height: min(70vh, 560px); overflow-y: auto; padding: 8px;
    border-radius: 18px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.18);
    text-align: left;
}
.szukaj .podpowiedzi { left: auto; width: min(460px, calc(100vw - 32px)); }
.podpowiedzi[hidden] { display: none; }
.podpowiedzi__naglowek { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }
.podpowiedz { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; color: var(--tekst); text-decoration: none; }
.podpowiedz:hover, .podpowiedz.aktywna { background: #f0f7f1; text-decoration: none; }
.podpowiedz__foto { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: var(--tlo); }
.podpowiedz__ikona { width: 44px; height: 44px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--tlo); color: var(--tekst-2); font-size: 18px; }
.podpowiedz__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.podpowiedz__tekst strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podpowiedz__tekst small { font-size: 12px; color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podpowiedz__tekst mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.podpowiedz__cena { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.podpowiedzi__wszystkie { display: block; margin-top: 4px; padding: 12px; border-top: 1px solid rgba(0,0,0,.06); text-align: center; font-weight: 600; text-decoration: none; border-radius: 0 0 12px 12px; }
.podpowiedzi__wszystkie:hover, .podpowiedzi__wszystkie.aktywna { background: #f0f7f1; text-decoration: none; }
.podpowiedzi__pusto { padding: 18px 12px; text-align: center; color: var(--tekst-2); font-size: 15px; }

/* ── kategorie: na komputerze w kilku rzędach (wszystko widać), na telefonie jeden rząd bez paska przewijania ── */
.kategorie { flex-wrap: wrap; overflow: visible; padding-bottom: 0; gap: 8px; }
.kategorie a { transition: background .15s, box-shadow .15s, color .15s; }
@media (max-width: 640px) {
    .kategorie {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
                mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .kategorie::-webkit-scrollbar { display: none; }
}
@media (min-width: 641px) {
    .kategorie.zwiniete { max-height: 86px; overflow: hidden; }   /* 2 rzędy pigułek */
    .kategorie__wiecej {
        display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 24px; padding: 6px 2px;
        border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--zielen); cursor: pointer;
    }
    .kategorie__wiecej:hover { text-decoration: underline; }
    .kategorie__wiecej svg { width: 12px; height: 12px; transition: transform .2s; }
    .kategorie__wiecej[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (max-width: 640px) { .kategorie__wiecej { display: none; } }

/* ════════ opis produktu 1:1 jak w sklepie ════════
 * Reguły skopiowane z wtyczki sklepu (infology-block/assets/css/frontend.css, klasy .inflg-*)
 * i typografia zmierzona na stolmar.org.pl (zakładka „Opis”). Ograniczone do .opis-sklepu,
 * żeby nie dotykały reszty panelu. Zmiana wyglądu w sklepie → zaktualizować też tutaj. */
.opis-produktu { margin-bottom: 40px; padding: 32px 40px 44px; border-radius: 24px; background: #fff; }
.opis-produktu > h2 { margin: 0 0 18px; font-family: "Inter Variable", Inter, system-ui, sans-serif; font-size: 22.5px; line-height: 1.75; font-weight: 700; color: #444; letter-spacing: normal; }
.opis-sklepu {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 15px; line-height: 1.75; color: #444; letter-spacing: normal;
}
.opis-sklepu p { margin: 1em 0; }
.opis-sklepu h3 { font-family: "Inter Variable", Inter, system-ui, sans-serif; font-size: 1.17em; font-weight: 700; margin: 1em 0; letter-spacing: normal; }
.opis-sklepu ul { margin: 1em 0; padding-left: 40px; }
.opis-sklepu strong, .opis-sklepu b { font-weight: 700; }
.opis-sklepu img { max-width: 100%; height: auto; }
.opis-sklepu .inflg-block { max-width: 880px; margin: 28px auto; }
.opis-sklepu .inflg-block:first-child { margin-top: 0; }
.opis-sklepu .inflg-block:last-child { margin-bottom: 0; }
.opis-sklepu .inflg-ff__figure img, .opis-sklepu .inflg-tf__figure img { max-height: 560px; object-fit: contain; }
.opis-sklepu .inflg-img { max-width: 100%; height: auto; display: block; }
.opis-sklepu .inflg-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.opis-sklepu .inflg-tf__figure { margin: 0; }
.opis-sklepu .inflg-tf__figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
.opis-sklepu .inflg-tf__text > :first-child { margin-top: 0; }
.opis-sklepu .inflg-tf__text > :last-child { margin-bottom: 0; }
.opis-sklepu .inflg-tt { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.opis-sklepu .inflg-tt__col-title { font-weight: 700; margin: 0 0 .6rem; }
.opis-sklepu .inflg-tt__content > :first-child { margin-top: 0; }
.opis-sklepu .inflg-tf__heading { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; color: #2a2622; }
.opis-sklepu .inflg-tf--align-center .inflg-tf__text { text-align: center; }
.opis-sklepu .inflg-tf--align-right .inflg-tf__text { text-align: right; }
@media (max-width: 768px) {
    .opis-produktu { padding: 24px 20px; }
    .opis-sklepu .inflg-tf, .opis-sklepu .inflg-tt { grid-template-columns: 1fr; gap: 20px; }
    .opis-sklepu .inflg-tf__figure { order: -1; }
}

/* ════════ ustawienia ════════ */
.ustawienia-spis { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.ustawienia-spis a { padding: 7px 14px; border-radius: 980px; background: #fff; font-size: 14px; font-weight: 500; color: var(--tekst); }
.ustawienia-spis a:hover { text-decoration: none; background: rgba(0, 0, 0, .06); }
.ustawienia { display: flex; flex-direction: column; gap: 20px; }
.ustawienia__sekcja { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; scroll-margin-top: 90px; }
.ustawienia__opis h2 { margin: 0 0 8px; }
.ustawienia__opis p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tekst-2); }
.ustawienia__formularz { min-width: 0; }
.ustawienia__formularz .pole { margin-bottom: 12px; }
.ustawienia__formularz .wiersz { margin-bottom: 0; }
.ustawienia__stale { display: flex; flex-direction: column; margin: 4px 0 18px; font-size: 15px; }
.ustawienia__stale span { font-size: 12px; color: var(--tekst-2); }
.ustawienia__podpowiedz { margin: 4px 0 14px; font-size: 14px; color: var(--tekst-2); }
.ustawienia__stan { margin: 0 0 14px; font-size: 15px; }
.ustawienia__dane { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; font-size: 15px; align-content: start; }
.ustawienia__dane dt { color: var(--tekst-2); }
.ustawienia__dane dd { margin: 0; }
.osoby { margin: 0 0 8px; padding: 0; list-style: none; }
.osoba { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.osoba:first-child { padding-top: 0; }
.osoba__awatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tlo); font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.osoba__dane { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.osoba__dane span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--tekst-2); }
.osoba__dane em { font-style: normal; font-weight: 400; color: var(--tekst-2); }
.osoba__rola { padding: 4px 10px; border-radius: 980px; background: var(--zielen-mgla); font-size: 12px; font-weight: 600; color: #0b6e1d; }
.osoba__akcje { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.osoba__akcje form { margin: 0; }
.osoba__akcje .link-przycisk { font-size: 13px; }
.osoba__usun summary { list-style: none; cursor: pointer; }
.osoba__usun summary::-webkit-details-marker { display: none; }
.osoba__usun form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 260px; margin-top: 8px; padding: 12px; border-radius: 12px; background: #fff5f5; font-size: 13px; text-align: right; color: var(--tekst-2); }
.link-przycisk--czerwony { color: var(--blad) !important; }
.przycisk--czerwony { background: var(--blad); }
.przycisk--czerwony:hover { background: #c40000; }
.osoby__dodaj { margin-top: 20px; padding: 20px; border-radius: 18px; background: var(--tlo); }
.osoby__dodaj h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
/* Usuwanie konta — sekcja „niebezpieczna”: schowana za rozwinięciem, akcent na czerwono. */
.ustawienia__sekcja--usun h2 { color: var(--blad); }
.konto-usun summary { list-style: none; cursor: pointer; display: inline-block; }
.konto-usun summary::-webkit-details-marker { display: none; }
.konto-usun__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; margin-top: 12px; padding: 16px; border-radius: 14px; background: #fff5f5; }
.konto-usun__form .pole { width: 100%; }
.konto-usun__ostrzezenie { margin: 0; font-size: 13px; color: var(--tekst-2); }
@media (max-width: 800px) {
    .ustawienia__sekcja { grid-template-columns: 1fr; gap: 18px; }
    .osoba { grid-template-columns: 40px minmax(0, 1fr); }
    .osoba__akcje, .osoba__rola { grid-column: 2; align-items: flex-start; justify-self: start; }
    .osoba__usun form { align-items: flex-start; text-align: left; }
}

/* ════════ skrzynka odbiorcza ════════ */
.skrzynka { margin: 0 0 20px; padding: 0; list-style: none; border-radius: 22px; background: #fff; overflow: hidden; }
.skrzynka li + li { border-top: 1px solid rgba(0, 0, 0, .07); }
.skrzynka__wiersz { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 24px; color: var(--tekst); text-decoration: none !important; }
.skrzynka__wiersz:hover { background: #fafafa; }
.skrzynka__kropka { width: 10px; height: 10px; border-radius: 50%; }
.skrzynka__wiersz--nowa .skrzynka__kropka { background: var(--zielen); }
.skrzynka__tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skrzynka__tresc strong { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skrzynka__wiersz--nowa .skrzynka__tresc strong { font-weight: 700; }
.skrzynka__tresc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tekst-2); }
.skrzynka__wiersz time { font-size: 13px; color: var(--tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list { max-width: 760px; padding: 36px 40px; }
.sklep .tresc .list__naglowek h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
.list__naglowek p { margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 14px; color: var(--tekst-2); }
.list__tresc { font-size: 17px; line-height: 1.6; }
.list__tresc p { margin: 0 0 14px; }
.list__tresc p:last-child { margin-bottom: 0; }
.list__kontakt { max-width: 760px; margin-top: 16px; padding: 18px 24px; border-radius: 18px; background: rgba(0, 0, 0, .035); font-size: 15px; color: var(--tekst-2); }
.list__kontakt p { margin: 0; }
.list__kontakt p + p { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 6px; color: var(--tekst); }
.baner-wiadomosci {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 20px 14px 14px;
    border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--zielen-mgla); color: var(--tekst); text-decoration: none !important;
}
.baner-wiadomosci:hover { box-shadow: inset 0 0 0 2px rgba(14, 158, 39, .35); }
.baner-wiadomosci__ikona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--zielen); color: #fff; }
.baner-wiadomosci__ikona svg { width: 22px; height: 22px; }
.baner-wiadomosci__tekst { display: flex; flex-direction: column; min-width: 0; }
.baner-wiadomosci__tekst strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baner-wiadomosci__tekst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tekst-2); }
.baner-wiadomosci__strzalka { font-size: 26px; color: var(--tekst-3); }
.kafel__przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .skrzynka__wiersz { padding: 16px; gap: 12px; } .list { padding: 24px 20px; } .sklep .tresc .list__naglowek h1 { font-size: 24px; } }

/* ════════ pomoc: instrukcja ════════ */
.pomoc-naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; }
.pomoc-naglowek .przycisk { margin-bottom: 28px; }
.pomoc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.pomoc__spis { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.pomoc__spis a { padding: 8px 12px; border-radius: 10px; font-size: 15px; color: var(--tekst-2); }
.pomoc__spis a:hover { background: #fff; color: var(--tekst); text-decoration: none; }
.pomoc__tresc { display: flex; flex-direction: column; gap: 20px; }
.pomoc__rozdzial { scroll-margin-top: 90px; font-size: 16px; line-height: 1.55; }
.pomoc__rozdzial ul, .pomoc__rozdzial ol { margin: 0; padding-left: 22px; }
.pomoc__rozdzial li { margin-bottom: 10px; }
.pomoc__rozdzial li:last-child { margin-bottom: 0; }
.pomoc__kroki li::marker { font-weight: 700; color: var(--zielen); }
.pomoc__uwaga { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--tlo); font-size: 15px; }
.pomoc__tabela { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px 20px; margin: 0; }
.pomoc__tabela dt { font-weight: 600; }
.pomoc__tabela dd { margin: 0; color: var(--tekst-2); }
@media (max-width: 800px) {
    .pomoc { grid-template-columns: 1fr; }
    .pomoc__spis { position: static; flex-direction: row; flex-wrap: wrap; }
    .pomoc__spis a { background: #fff; border-radius: 980px; font-size: 14px; }
    .pomoc__tabela { grid-template-columns: 1fr; gap: 2px; }
    .pomoc__tabela dd { margin-bottom: 10px; }
}

/* płatność zamówienia: dane do przelewu jako karta, pod spodem Autopay „zapłać szybciej” */
.platnosc__przelew-karta { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.platnosc__przelew-tytul { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-2); margin-bottom: 8px; }
.platnosc__przelew-karta .platnosc__przelew { margin: 0; }
.platnosc__lub { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; color: var(--tekst-3); font-size: 13px; }
.platnosc__lub::before, .platnosc__lub::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.1); }
.platnosc__online-nota { display: block; margin-top: 8px; font-size: 12px; color: var(--tekst-2); line-height: 1.4; text-align: center; }

/* akcje w rozwiniętym wierszu: link + grupa przycisków (Zamów ponownie, Zapłać) */
.zam-wiersz__przyciski { display: flex; flex-wrap: wrap; gap: 8px; }
.zam-wiersz__przyciski .przycisk { width: auto; margin: 0; }

/* popup „Zapłać” */
.zaplac-modal { border: 0; padding: 0; max-width: min(440px, 92vw); background: transparent; color: var(--tekst); }
.zaplac-modal::backdrop { background: rgba(0,0,0,.45); }
.zaplac-modal__karta { position: relative; padding: 28px 28px 24px; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.zaplac-modal__x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--tlo); font-size: 20px; line-height: 1; color: var(--tekst-2); cursor: pointer; }
.zaplac-modal__x:hover { background: #e8e8ed; color: var(--tekst); }
.zaplac-modal h2 { margin: 0 40px 4px 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.zaplac-modal__kwota { margin: 0 0 4px; font-size: 15px; color: var(--tekst-2); }
.zaplac-modal__kwota strong { color: var(--tekst); font-size: 17px; }
.zaplac-modal .platnosc__przelew-karta { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.zaplac-modal .platnosc__przycisk { width: 100%; margin-top: 12px !important; height: 46px; font-size: 15px; }
.zaplac-modal .platnosc__online-nota { text-align: center; }

/* anulowanie zamówienia (klient) — potwierdzenie rozwijane */
.zam-wiersz__akcje-lewo { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.anuluj-zam summary { list-style: none; cursor: pointer; }
.anuluj-zam summary::-webkit-details-marker { display: none; }
.anuluj-zam form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff5f5; font-size: 13px; color: var(--tekst-2); }
.dymek--blad { background: #fdecec; color: #8d2b2b; }


/* === Prawa kolumna: zielony panel promo z animowanymi scenkami (logowanie/rejestracja) === */
.ekran__prawa--zielen{
    background:linear-gradient(155deg,#15ab30 0%,#0b7d23 56%,#06611a 100%);
    display:flex; align-items:center; justify-content:center; padding:56px;
}
.ekran__prawa--zielen::after{
    content:""; position:absolute; inset:0; height:100%; pointer-events:none;
    background:
        radial-gradient(1100px 520px at 84% -10%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(680px 480px at 6% 110%, rgba(0,0,0,.22), transparent 60%);
}
.promo{ position:relative; z-index:1; width:100%; max-width:452px; color:#fff; }
.promo__slajdy{ position:relative; min-height:512px; }
.promo__slajd{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.promo__slajd.is-aktywny{ opacity:1; transform:none; pointer-events:auto; }
.promo__txt{ margin-top:30px; }
.promo__eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9); background:rgba(255,255,255,.15); padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.promo__txt h2{ margin:0 0 12px; font-size:31px; line-height:1.13; font-weight:700; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.promo__txt p{ margin:0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.9); max-width:42ch; }
.promo__nawigacja{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.promo__strzalka{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background .2s, border-color .2s; }
.promo__strzalka:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.7); }
.promo__strzalka svg{ width:20px; height:20px; }
.promo__kropki{ flex:1; display:flex; justify-content:center; gap:9px; }
.promo__kropka{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:width .25s ease, background .25s ease; }
.promo__kropka.is-aktywny{ width:26px; border-radius:999px; background:#fff; }

/* --- Obudowa scenki (biała karta panelu) --- */
.scena{ position:relative; height:250px; background:rgba(255,255,255,.97); border-radius:18px; box-shadow:0 30px 70px rgba(0,48,14,.34); overflow:hidden; color:#1d2b22; }
.scena__pasek{ display:flex; gap:6px; padding:12px 16px; background:#f3f6f4; border-bottom:1px solid #e8ede9; }
.scena__pasek i{ width:9px; height:9px; border-radius:50%; background:#d3dbd6; }
.scena__plotno{ position:relative; height:calc(250px - 42px); padding:20px; }
.kursor{ position:absolute; left:0; top:0; width:20px; height:20px; z-index:6; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); pointer-events:none; }

/* --- Scenka 1: cena po zalogowaniu --- */
.s1-karta{ display:flex; align-items:center; gap:14px; }
.s1-foto{ flex:none; width:60px; height:60px; border-radius:12px; background:#eaf7ee; }
.s1-info{ flex:1; display:flex; flex-direction:column; gap:8px; }
.s1-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s1-cena{ position:relative; margin-top:28px; height:46px; }
.s1-locked, .s1-open{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px; border-radius:12px; font-size:14px; font-weight:700; white-space:nowrap; }
.s1-locked{ color:#8a938c; background:#f0f2f0; border:1px solid #e6ece8; animation:s1-locked 5s ease-in-out infinite; }
.s1-locked svg{ width:16px; height:16px; }
.s1-open{ color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; opacity:0; animation:s1-open 5s ease-in-out infinite; }
.s1-open em{ font-style:normal; }
.s1-kwota{ width:58px; height:14px; border-radius:5px; background:#0e9e27; opacity:.85; }
.s1-open svg{ width:18px; height:18px; }
.scena--cena .kursor{ animation:s1-kursor 5s ease-in-out infinite; }
@keyframes s1-kursor{ 0%{transform:translate(230px,205px);opacity:0} 12%{opacity:1} 40%{transform:translate(150px,170px);opacity:1} 46%{transform:translate(150px,170px) scale(.82)} 52%{transform:translate(150px,170px) scale(1)} 82%{transform:translate(150px,170px);opacity:1} 94%{transform:translate(230px,205px);opacity:0} 100%{opacity:0} }
@keyframes s1-locked{ 0%,42%{opacity:1;transform:translateY(0)} 50%,100%{opacity:0;transform:translateY(-6px)} }
@keyframes s1-open{ 0%,46%{opacity:0;transform:translateY(6px)} 54%,90%{opacity:1;transform:translateY(0)} 98%,100%{opacity:0} }

/* --- Scenka 2: zamów ponownie --- */
.s2-rzad{ display:flex; align-items:center; gap:13px; }
.s2-foto{ flex:none; width:46px; height:46px; border-radius:11px; background:#eaf7ee; }
.s2-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s2-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s2-btn{ flex:none; font-size:12.5px; font-weight:800; color:#fff; background:#0e9e27; border:0; border-radius:999px; padding:10px 15px; white-space:nowrap; box-shadow:0 6px 14px rgba(14,158,39,.3); animation:s2-btn 5s ease-in-out infinite; }
.s2-kosz{ position:absolute; left:20px; bottom:18px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#f3f6f4; color:#1d2b22; }
.s2-kosz svg{ width:24px; height:24px; }
.s2-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#e0362f; color:#fff; font-size:12px; font-weight:800; opacity:0; transform:scale(0); animation:s2-badge 5s ease-in-out infinite; }
.s2-toast{ position:absolute; right:18px; bottom:24px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; border-radius:999px; padding:8px 14px; opacity:0; transform:translateY(8px); animation:s2-toast 5s ease-in-out infinite; }
.s2-toast svg{ width:16px; height:16px; }
.scena--zamow .kursor{ animation:s2-kursor 5s ease-in-out infinite; }
@keyframes s2-kursor{ 0%{transform:translate(240px,205px);opacity:0} 12%{opacity:1} 42%{transform:translate(352px,92px);opacity:1} 48%{transform:translate(352px,92px) scale(.82)} 54%{transform:translate(352px,92px) scale(1)} 86%{transform:translate(352px,92px);opacity:1} 96%{transform:translate(240px,205px);opacity:0} 100%{opacity:0} }
@keyframes s2-btn{ 0%,46%{transform:scale(1)} 51%{transform:scale(.92)} 57%,100%{transform:scale(1)} }
@keyframes s2-toast{ 0%,52%{opacity:0;transform:translateY(8px)} 62%,88%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0} }
@keyframes s2-badge{ 0%,52%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.35)} 66%,94%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0)} }

/* --- Scenka 3: panel z zakładkami --- */
.scena__plotno--panel{ padding:16px 18px; }
.s3-taby{ position:relative; display:flex; gap:22px; padding-bottom:10px; border-bottom:1px solid #eef1ee; }
.s3-tab{ font-size:13px; font-weight:700; color:#8a938c; }
.s3-podkr{ position:absolute; left:0; bottom:-1px; height:2.5px; border-radius:3px; background:#0e9e27; width:78px; animation:s3-podkr 7.8s ease-in-out infinite; }
.s3-body{ position:relative; margin-top:15px; height:120px; }
.s3-widok{ position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; opacity:0; }
.s3-v1{ animation:s3-v1 7.8s ease-in-out infinite; }
.s3-v2{ animation:s3-v2 7.8s ease-in-out infinite; }
.s3-v3{ animation:s3-v3 7.8s ease-in-out infinite; }
.s3-rzad{ display:flex; align-items:center; gap:11px; }
.s3-i{ flex:none; width:30px; height:30px; border-radius:8px; background:#eaf7ee; }
.s3-i--pdf{ display:grid; place-items:center; font-size:9px; font-weight:800; color:#e0362f; background:#fdeceb; }
.s3-l{ flex:1; }
.s3-l b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s3-pill{ flex:none; font-size:11px; font-weight:700; color:#0e9e27; background:#eaf7ee; border-radius:999px; padding:4px 10px; }
.s3-pill--ghost{ color:#8a938c; background:#eef1ee; }
.s3-chip{ flex:none; font-size:11px; font-weight:700; color:#0e9e27; background:#eaf7ee; border-radius:999px; padding:5px 12px; }
.s3-track{ padding:16px 6px 4px; }
.s3-track__linia{ position:relative; height:4px; border-radius:3px; background:#e6ece8; margin:0 10px 16px; }
.s3-track__fill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#0e9e27; width:0; animation:s3-fill 7.8s ease-in-out infinite; }
.s3-track__punkty{ display:flex; justify-content:space-between; }
.s3-krok{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#8a938c; }
.s3-krok i{ width:14px; height:14px; border-radius:50%; background:#e6ece8; box-shadow:0 0 0 3px #fff; }
.s3-krok.is-done{ color:#0e9e27; }
.s3-krok.is-done i{ background:#0e9e27; }
.scena--panel .kursor{ animation:s3-kursor 7.8s ease-in-out infinite; }
@keyframes s3-kursor{ 0%{transform:translate(57px,58px);opacity:0} 6%{opacity:1} 28%{transform:translate(57px,58px)} 33%{transform:translate(146px,58px)} 35%{transform:translate(146px,58px) scale(.82)} 39%{transform:translate(146px,58px) scale(1)} 62%{transform:translate(146px,58px)} 67%{transform:translate(226px,58px)} 69%{transform:translate(226px,58px) scale(.82)} 73%{transform:translate(226px,58px) scale(1)} 94%{transform:translate(226px,58px);opacity:1} 100%{opacity:0} }
@keyframes s3-podkr{ 0%,30%{transform:translateX(0);width:78px} 38%,62%{transform:translateX(100px);width:52px} 70%,100%{transform:translateX(174px);width:66px} }
@keyframes s3-v1{ 0%,30%{opacity:1} 36%,100%{opacity:0} }
@keyframes s3-v2{ 0%,32%{opacity:0} 38%,62%{opacity:1} 68%,100%{opacity:0} }
@keyframes s3-v3{ 0%,64%{opacity:0} 70%,96%{opacity:1} 100%{opacity:0} }
@keyframes s3-fill{ 0%,68%{width:0} 84%{width:66%} 96%,100%{width:66%} }

@media (max-height: 780px){
    .ekran__prawa--zielen{ padding:36px; }
    .promo__slajdy{ min-height:500px; }
    .promo__txt h2{ font-size:27px; }
    .promo__txt p{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
    .kursor,.s1-locked,.s1-open,.s2-btn,.s2-toast,.s2-badge,.s3-podkr,.s3-v1,.s3-v2,.s3-v3,.s3-track__fill{ animation:none !important; }
    .kursor{ opacity:0; }
    .s1-locked{ opacity:0; } .s1-open{ opacity:1; }
    .s2-toast{ opacity:1; transform:none; } .s2-badge{ opacity:1; transform:scale(1); }
    .s3-v1{ opacity:1; } .s3-track__fill{ width:66%; }
}

/* --- Scenka 4: odroczona płatność --- */
.s4-faktura{ display:flex; align-items:center; gap:12px; }
.s4-fv{ flex:none; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:800; color:#e0362f; background:#fdeceb; }
.s4-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s4-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s4-statusy{ position:relative; flex:none; width:96px; height:26px; }
.s4-status{ position:absolute; right:0; top:0; font-size:11px; font-weight:800; border-radius:999px; padding:5px 11px; white-space:nowrap; }
.s4-status--czeka{ color:#b26a00; background:#fff3e0; animation:s4-czeka 5s ease-in-out infinite; }
.s4-status--odr{ color:#0e9e27; background:#eaf7ee; opacity:0; animation:s4-odr 5s ease-in-out infinite; }
.s4-opcje{ display:flex; gap:10px; margin-top:24px; }
.s4-opcja{ flex:1; text-align:center; font-size:12.5px; font-weight:700; color:#6e7d72; background:#f3f6f4; border:1.5px solid #e6ece8; border-radius:11px; padding:11px 8px; }
.s4-opcja--pozniej{ animation:s4-wybor 5s ease-in-out infinite; }
.s4-potw{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:12.5px; font-weight:700; color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; border-radius:999px; padding:8px 14px; opacity:0; transform:translateY(6px); animation:s4-potw 5s ease-in-out infinite; }
.s4-potw svg{ width:15px; height:15px; }
.scena--odrocz .kursor{ animation:s4-kursor 5s ease-in-out infinite; }
@keyframes s4-czeka{ 0%,46%{opacity:1} 52%,100%{opacity:0} }
@keyframes s4-odr{ 0%,48%{opacity:0} 54%,100%{opacity:1} }
@keyframes s4-wybor{ 0%,46%{color:#6e7d72;background:#f3f6f4;border-color:#e6ece8} 54%,100%{color:#0e9e27;background:#eaf7ee;border-color:#0e9e27} }
@keyframes s4-potw{ 0%,52%{opacity:0;transform:translateY(6px)} 60%,94%{opacity:1;transform:translateY(0)} 100%{opacity:0} }
@keyframes s4-kursor{ 0%{transform:translate(250px,205px);opacity:0} 12%{opacity:1} 44%{transform:translate(331px,138px);opacity:1} 50%{transform:translate(331px,138px) scale(.82)} 56%{transform:translate(331px,138px) scale(1)} 86%{transform:translate(331px,138px);opacity:1} 96%{transform:translate(250px,205px);opacity:0} 100%{opacity:0} }

/* --- Scenka 5: śledzenie przesyłek --- */
.s5-header{ display:flex; align-items:center; gap:12px; }
.s5-kurier{ flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#0e9e27; background:#eaf7ee; }
.s5-kurier svg{ width:22px; height:22px; }
.s5-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s5-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s5-tagi{ position:relative; flex:none; width:98px; height:24px; }
.s5-tag{ position:absolute; right:0; top:0; font-size:11px; font-weight:800; border-radius:999px; padding:5px 11px; white-space:nowrap; }
.s5-tag--drodze{ color:#0e9e27; background:#eaf7ee; animation:s5-tagd 5.5s ease-in-out infinite; }
.s5-tag--dor{ color:#fff; background:#0e9e27; opacity:0; animation:s5-tago 5.5s ease-in-out infinite; }
.s5-track{ margin-top:36px; padding:0 22px; }
.s5-line{ position:relative; height:5px; border-radius:3px; background:#e6ece8; }
.s5-fill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#0e9e27; width:0; animation:s5-fill 5.5s ease-in-out infinite; }
.s5-node{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#e6ece8; box-shadow:0 0 0 3px #fff; z-index:1; }
.s5-node--1{ left:0; animation:s5-node1 5.5s ease-in-out infinite; }
.s5-node--2{ left:50%; animation:s5-node2 5.5s ease-in-out infinite; }
.s5-node--3{ left:100%; animation:s5-node3 5.5s ease-in-out infinite; }
.s5-parcel{ position:absolute; top:50%; left:0; margin:-15px 0 0 -15px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#0e9e27; box-shadow:0 7px 16px rgba(14,158,39,.42); z-index:2; animation:s5-parcel 5.5s ease-in-out infinite; }
.s5-parcel svg{ width:17px; height:17px; }
.s5-labels{ position:relative; height:16px; margin-top:15px; font-size:11px; font-weight:700; }
.s5-lab{ position:absolute; top:0; white-space:nowrap; color:#9aa39c; }
.s5-lab--1{ left:0; animation:s5-lab1 5.5s ease-in-out infinite; }
.s5-lab--2{ left:50%; transform:translateX(-50%); animation:s5-lab2 5.5s ease-in-out infinite; }
.s5-lab--3{ left:100%; transform:translateX(-100%); animation:s5-lab3 5.5s ease-in-out infinite; }
@keyframes s5-fill{ 0%,10%{width:0} 30%{width:50%} 46%{width:50%} 84%{width:100%} 100%{width:100%} }
@keyframes s5-parcel{ 0%,10%{left:0} 30%{left:50%} 46%{left:50%} 84%{left:100%} 100%{left:100%} }
@keyframes s5-node1{ 0%,8%{background:#e6ece8} 14%,100%{background:#0e9e27} }
@keyframes s5-node2{ 0%,42%{background:#e6ece8} 50%,100%{background:#0e9e27} }
@keyframes s5-node3{ 0%,84%{background:#e6ece8} 92%,100%{background:#0e9e27} }
@keyframes s5-lab1{ 0%,8%{color:#9aa39c} 14%,100%{color:#0e9e27} }
@keyframes s5-lab2{ 0%,42%{color:#9aa39c} 50%,100%{color:#0e9e27} }
@keyframes s5-lab3{ 0%,84%{color:#9aa39c} 92%,100%{color:#0e9e27} }
@keyframes s5-tagd{ 0%,84%{opacity:1} 90%,100%{opacity:0} }
@keyframes s5-tago{ 0%,84%{opacity:0} 90%,100%{opacity:1} }

@media (prefers-reduced-motion: reduce){
    .s4-czeka,.s4-status--czeka,.s4-status--odr,.s4-opcja--pozniej,.s4-potw,
    .s5-tag--drodze,.s5-tag--dor,.s5-fill,.s5-parcel,.s5-node,.s5-lab{ animation:none !important; }
    .s4-status--czeka{ opacity:0; } .s4-status--odr{ opacity:1; }
    .s4-opcja--pozniej{ color:#0e9e27; background:#eaf7ee; border-color:#0e9e27; }
    .s4-potw{ opacity:1; transform:none; }
    .s5-tag--drodze{ opacity:0; } .s5-tag--dor{ opacity:1; }
    .s5-fill{ width:100%; } .s5-parcel{ left:100%; } .s5-node{ background:#0e9e27; } .s5-lab{ color:#0e9e27; }
}

/* Numer zamówienia w wierszu listy — klikalny link do zamówienia */
.wiersz-zamowienia__link { position: relative; z-index: 1; color: inherit; text-decoration: none; align-self: flex-start; }
.wiersz-zamowienia__link:hover strong, .wiersz-zamowienia__link:focus-visible strong { color: var(--zielen); text-decoration: underline; }
.wiersz-zamowienia__link:focus-visible { outline: 3px solid var(--zielen-mgla); outline-offset: 2px; border-radius: 4px; }

/* Widok zamówienia — oś czasu „Aktualizacje” */
.zam-akt { margin-top: 30px; }
.zam-akt__tytul { font-size: 18px; margin: 0 0 16px; }
.zam-akt__lista { list-style: none; margin: 0; padding: 0; }
.zam-akt__wpis { position: relative; display: flex; gap: 16px; padding-bottom: 18px; }
.zam-akt__wpis:last-child { padding-bottom: 0; }
.zam-akt__wpis::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: -2px; width: 2px; background: var(--linia); }
.zam-akt__wpis:last-child::before { display: none; }
.zam-akt__kropka { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--zielen); box-shadow: 0 0 0 4px var(--zielen-mgla); }
.zam-akt__tresc { flex: 1; min-width: 0; background: var(--tlo); border-radius: 14px; padding: 13px 18px; }
.zam-akt__glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 4px; }
.zam-akt__glowa strong { font-size: 15px; }
.zam-akt__glowa time { font-size: 13px; color: var(--tekst-3); white-space: nowrap; }
.zam-akt__body { font-size: 14px; color: var(--tekst-2); line-height: 1.5; }
.zam-akt__body p { margin: 0 0 6px; }
.zam-akt__body p:last-child { margin-bottom: 0; }

/* Wiadomość: numer zamówienia w treści jako link + przycisk do zamówienia */
.wiadomosc__numer { color: var(--zielen); text-decoration: none; }
.wiadomosc__numer:hover, .wiadomosc__numer:focus-visible { text-decoration: underline; }
.list__akcja { margin: 20px 0 0; }

/* Śledzenie przesyłki na widoku zamówienia (kompaktowa oś: Nadana → W drodze → W doręczeniu → Doręczona) */
.przesylka-osie { display: flex; gap: 0; list-style: none; margin: 12px 0 6px; padding: 0; }
.przesylka-osie li { flex: 1; position: relative; padding-top: 18px; font-size: 12px; color: var(--tekst-3); }
.przesylka-osie li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2.5px; background: var(--linia); }
.przesylka-osie li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--linia); }
.przesylka-osie li.zrobione { color: var(--tekst); }
.przesylka-osie li.zrobione::before { background: var(--zielen); }
.przesylka-osie li.zrobione::after { background: var(--zielen); box-shadow: none; }
.przesylka-osie li.teraz { font-weight: 600; color: var(--tekst); }
.przesylka-problem { display: block; margin: 8px 0; font-size: 13px; color: #b26a00; font-weight: 600; }

/* Netto / brutto: kwoty w bazie są brutto, klient hurtowy myśli w netto — netto wyróżnione, brutto pod spodem. */
.netto { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--tekst-2); text-transform: uppercase; }
.produkt__brutto { font-size: 13px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.produkt__sklep + .produkt__sklep, .produkt__brutto + .produkt__sklep { margin-top: -2px; }
.netto-kwota { color: var(--tekst); }
.pozycja__wartosc { display: flex; flex-direction: column; gap: 2px; }
.pozycja__wartosc small, .zam-wiersz__cena small { font-size: 12px; font-weight: 400; color: var(--tekst-3); }
.zam-wiersz__cena { display: flex; flex-direction: column; }
.wiersz-zamowienia__kwota .netto { font-size: 10px; }
.wiersz-zamowienia__brutto { display: block; font-size: 12px; font-weight: 400; color: var(--tekst-3); }
.podsumowanie .podsumowanie__netto { font-weight: 700; color: var(--tekst); }
.pozycja__wartosc strong, .wiersz-zamowienia__kwota, .zam-wiersz__cena { white-space: nowrap; }

/* Minimum logistyczne — pasek informacyjny na starcie panelu i w katalogu. */
.minimum { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; background: #fff8ec; box-shadow: inset 0 0 0 1px #f1dcb3; font-size: 15px; }
.minimum__ikona { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: #fdebc8; color: #8a5a00; }
.minimum__ikona svg { width: 22px; height: 22px; }
.minimum__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.minimum__tekst span { color: var(--tekst-2); font-size: 14px; }
.minimum__pasek { grid-column: 2; height: 6px; border-radius: 3px; background: #f1dcb3; overflow: hidden; }
.minimum__pasek i { display: block; height: 100%; background: #c98a12; border-radius: 3px; }
.minimum--ok { background: #f4fbf5; box-shadow: inset 0 0 0 1px #cdebd3; }
.minimum--ok .minimum__ikona { background: #dff3e3; color: var(--zielen); }

/* Podpis Infology — logowanie/rejestracja (pod kartą) i stopka panelu. */
.infology { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--tekst-3); }
.infology a { display: inline-flex; border-radius: 4px; opacity: .85; transition: opacity .2s; }
.infology a:hover, .infology a:focus-visible { opacity: 1; }
.infology img { display: block; height: 20px; width: auto; }
.stopka-panelu {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
    padding: 18px 32px; background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 13px; color: var(--tekst-3);
}
.stopka-panelu__lewa { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.stopka-panelu__lewa a { color: var(--tekst-2); text-decoration: none; }
.stopka-panelu__lewa a:hover { color: var(--zielen); }
.stopka-panelu .infology { margin-top: 0; justify-content: flex-end; }
@media (max-width: 700px) {
    .stopka-panelu { flex-direction: column; justify-content: center; padding: 18px 16px; text-align: center; }
    .stopka-panelu__lewa { justify-content: center; }
    .stopka-panelu .infology { justify-content: center; }
}
/* Krótkie strony panelu (pusty koszyk): treść dopycha podpis do dołu ekranu. Zapas na belkę i stopkę, żeby nie było zbędnego przewijania. */
.sklep .tresc { min-height: calc(100vh - 123px); }
@media (max-width: 700px) { .sklep .tresc { min-height: calc(100vh - 220px); } }