/* ==================== produkt.css ==================== */

.pk {
    --pk-border: #e6e6e6;
    --pk-muted: #6b6b6b;
    --pk-text: #1d1d1d;
    display: block;
    color: var(--pk-text);
    container: karta / inline-size;
}

/* ---------- 1. Układ ---------- */
.pk_gora {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 14px;
}
.pk_srodek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 24px;
    align-items: start;
    margin-top: 18px;
}

.pk_okladka { position: relative; }
.pk_okladka #links { display: block; float: none; width: auto; margin: 0; }
.pk_okladka img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    cursor: zoom-in;
}
.pk.typ-ebook .pk_okladka img {
    padding: 6px 6px 18px;
    background: #23292e;
    border-radius: 10px;
}
.pk.typ-audiobook .pk_okladka img {
    border-radius: 10px;
    box-shadow: 0 0 0 5px var(--typ-tlo), 0 4px 16px rgba(0, 0, 0, .18);
}

.pk_okladka .lp_paski {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.pk_okladka .lp_pasek {
    display: block;
    padding: 6px 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}
.pk_okladka .lp_pasek--przedsprzedaz { background: #d96a00; }
.pk_okladka .lp_pasek--wysylka { background: #1e8c1e; font-size: 12px; letter-spacing: .02em; }
.pk_powieksz {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--pk-muted);
    text-align: center;
}

/* ---------- 2. Nagłówek ---------- */
.pk_naglowek .d_typ { margin-bottom: 2px; }
.pk h1.pk_tytul {
    margin: 8px 0 10px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--pk-text);
}
.pk_autor,
.pk_wydawca {
    margin: 3px 0;
    font-size: 14px;
    color: var(--pk-muted);
}
.pk_autor h2 {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
}
.pk_autor a,
.pk_wydawca a {
    color: var(--pk-text);
    font-weight: 600;
    text-decoration: none;
}
.pk_autor a:hover,
.pk_wydawca a:hover { text-decoration: underline; }
.pk_autor_dopisek { color: var(--pk-muted); }
.pk_oferty { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pk_oferty .btn { padding: 6px 14px; font-size: 14px; color: #fff; text-decoration: none; border-radius: 6px; }

/* ---------- 3. Dane szczegółowe ---------- */
.pk_dane_blok { padding-top: 14px; }
.pk_dane_tytul {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pk-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pk-muted);
}
.pk_dane {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 18px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}
.pk_dane dt { color: var(--pk-muted); }
.pk_dane dd { margin: 0; color: var(--pk-text); overflow-wrap: anywhere; }
.pk_dane a { color: inherit; }
.pk_flaga { width: 30px; margin: 0 2px; vertical-align: middle; }
.pk_producent { margin-top: 10px; font-size: 12.5px; color: var(--pk-muted); }
.pk_producent_okno { max-width: 320px; padding: 20px 30px 10px; border: 3px solid #424242; text-align: center; }
.pk_producent_zamknij {
    display: inline-block;
    margin: 10px 0 10px 5px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #424242;
    color: #fff;
    line-height: 13px;
    cursor: pointer;
}
.pk_dopisek { margin-top: 10px; font-size: 13px; }

/* ---------- 4. Pole zakupu ---------- */
.pk_kupno {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    text-align: right;
}
.pk_kupno .cena_etykieta {
    display: block;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pk_kupno .cena { line-height: 1.2; }
.pk_kupno .cenad { font-size: 30px; font-weight: 700; }
.pk_kupno .cena_blok { gap: 6px; }

.pk_kupno .lista_koszyk {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* komunikat i dostępność */
.pk_kupno .do_koszyka_komunikat,
.pk_kupno .dostepnosc {
    margin-top: 4px;
    font-size: 12px;
    text-align: right;
}
.pk_kupno .dostepnosc .dane { display: inline; font-size: inherit; color: inherit; }
.pk_kupno .dostepnosc.cyfrowy { text-align: center; justify-content: center; }
.pk_za1zl_info { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: green; text-align: center; }

/* ---------- 5. Opis ---------- */
.pk_opis {
    margin: 28px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--pk-border);
    text-align: justify;
}
.pk_opis h3 {
    margin: 0 0 12px;
    font-size: 18px;
    text-indent: 0;
    color: var(--pk-text);
}
.pk_opis p {
    margin: 0 0 14px;
    padding: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    text-align: justify;
    hyphens: auto;
}

/* listy w opisie */
.pk_opis ul,
.pk_opis ol {
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.65;
    color: #333;
    text-align: left;
}
.pk_opis li {
    position: relative;
    margin: 0 0 8px;
    padding: 0 0 0 30px;
    text-indent: 0;
}
.pk_opis li:last-child { margin-bottom: 0; }
.pk_opis li > p { margin: 0 0 6px; text-align: left; }
.pk_opis li > p:last-child { margin-bottom: 0; }

/* ul */
.pk_opis ul > li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 10px;
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ca0000;
}

/* ol */
.pk_opis ol:not([start]):not([reversed]):not([type]) { counter-reset: pk-ol; }
.pk_opis ol:not([start]):not([reversed]):not([type]) > li { counter-increment: pk-ol; padding-left: 36px; }
.pk_opis ol:not([start]):not([reversed]):not([type]) > li::before {
    content: counter(pk-ol);
    position: absolute;
    top: .15em;
    left: 0;
    box-sizing: border-box;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #fdecec;
    color: #ca0000;
    font: 700 12.5px/24px Roboto, Arial, sans-serif;
    text-align: center;
}

.pk_opis ol:is([start], [reversed], [type]) { padding-left: 30px; list-style: decimal; }
.pk_opis ol[type="a"] { list-style-type: lower-alpha; }
.pk_opis ol[type="A"] { list-style-type: upper-alpha; }
.pk_opis ol[type="i"] { list-style-type: lower-roman; }
.pk_opis ol[type="I"] { list-style-type: upper-roman; }
.pk_opis ol:is([start], [reversed], [type]) > li { padding-left: 4px; }
.pk_opis ol:is([start], [reversed], [type]) > li::marker { color: #ca0000; font-weight: 700; }

/* listy zagnieżdżone */
.pk_opis li > ul,
.pk_opis li > ol { margin: 8px 0 4px; font-size: .95em; }
.pk_opis li > ul > li::before {
    border: 1.5px solid #ca0000;
    background: transparent;
}
.pk_opis li > ol:not([start]):not([reversed]):not([type]) > li { padding-left: 28px; }
.pk_opis li > ol:not([start]):not([reversed]):not([type]) > li::before {
    content: counter(pk-ol) ".";
    top: 0;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    font-size: 1em;
    line-height: inherit;
    text-align: left;
}

.pk_opis h4 { margin: 18px 0 10px; font-size: 15px; }
.pk_opis_seo { color: #555; }

/* pakiet, gratisy */
.pk_lista_poz,
.pk_gratisy { margin: 0 0 18px; }
.pk_gratisy { padding: 16px; border: 1px solid #d0d0d0; border-radius: 8px; }
.pk_lista_el { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 12px; text-align: left; }
.pk_lista_okl { flex: none; width: 70px; }
.pk_lista_okl img { max-width: 100%; height: auto; }

/* spis treści */
.pk_spis { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--pk-border); }
.pk_spis h3 { margin: 0 0 10px; font-size: 18px; }
.pk_spis .spis_tresci { font-size: 14px; line-height: 1.6; }

/* pliki PDF */
.pk_pliki { margin-top: 20px; }
.pk_pliki h3 { margin: 0 0 8px; font-size: 16px; }
.pk_pliki ul { margin: 0; padding: 0; list-style: none; }
.pk_pliki li { margin: 6px 0; }
.pk_pliki a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #404040; text-decoration: none; }
.pk_pliki a:hover { text-decoration: underline; }

/* książka za 1 zł */
.pk_za1zl { margin: 20px 0 6px; }
.pk_za1zl h4 { margin: 0 0 10px; font-size: 15px; }
.pk_za1zl_poz {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
}
.pk_za1zl_poz input { margin: 10px 0 0; width: 18px; height: 18px; }
.pk_za1zl_poz label { display: flex; gap: 14px; font-size: 15px; color: #000; cursor: pointer; }
.pk_za1zl_okl { flex: none; width: 60px; }
.pk_za1zl_okl img { max-width: 100%; height: auto; }
.pk_za1zl_poz .opis-do-listy { grid-column: 2; overflow: hidden; font-weight: normal; }

/* ---------- 6. Polecane ---------- */
.pk_polecane { margin-top: 28px; }
.pk_sekcja { padding: 18px 0 28px; border-top: 1px solid var(--pk-border, #e6e6e6); }
.pk_sekcja + .pk_sekcja { margin-top: 24px; }
.pk_sekcja_tytul {
    margin: 0 0 20px;
    padding: 0 0 10px;
    border-bottom: 1px dashed #cfcfcf;
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1d;
}
.pk_kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 30px 16px;
}

.pk_kafel { display: flex; flex-direction: column; text-align: center; }
.pk_kafel_okl {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 170px;
    margin: 0 0 14px;
}
.pk_kafel_okl a { display: block; }
.pk_kafel_okl img {
    display: block;
    max-width: 100%;
    max-height: 170px;
    width: auto;
    height: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
    transition: transform .15s, box-shadow .15s;
}
.pk_kafel:hover .pk_kafel_okl img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }

.pk_kafel_tytul {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.pk_kafel_tytul a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #222;
    text-align: center;
    text-decoration: none;
}
.pk_kafel_tytul a:hover { text-decoration: underline; }
.pk_kafel_autor { margin-top: 3px; font-size: 12px; font-style: italic; color: var(--pk-muted, #6b6b6b); }


/* Nowości i bestsellery w dziale – karta w prawej kolumnie */
.best_kat {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 10px 0;
    padding: 14px 10px 12px;
    border: 1px solid #f0d2b4;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff6ec, #fff 70%);
    color: #5a2a00;
    font: 13px/1.35 Roboto, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.best_kat__ikona {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #ff7f02;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 127, 2, .3);
}
.best_kat__ikona svg { width: 20px; height: 20px; fill: currentColor; }
.best_kat__tytul { color: #8e3500; font-size: 15px; font-weight: 800; line-height: 1.2; }
.best_kat__dzial { color: #6b6b6b; }
.best_kat__dzial b { color: #1d1d1d; font-weight: 700; }
.best_kat__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 5px 14px;
    border: 1px solid #e8b98f;
    border-radius: 999px;
    background: #fff;
    color: #8e3500;
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color .15s, border-color .15s;
}
.best_kat:hover {
    border-color: #e8a76a;
    box-shadow: 0 4px 14px rgba(142, 53, 0, .12);
    transform: translateY(-1px);
    text-decoration: none;
}
.best_kat:hover .best_kat__cta { border-color: #8e3500; background: #ffe9d1; }
.best_kat:focus-visible { outline: 2px solid #ff7f02; outline-offset: 2px; }


/* Polecane w prawej kolumnie – karty pod .best_kat */
.pk_pol_lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
}
.pk_pol_lista__tytul {
    margin: 0 0 2px;
    padding: 0 0 6px;
    border-bottom: 1px solid #e6e6e6;
    color: #6b6b6b;
    font: 700 11.5px/1.3 Roboto, Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
.pk_pol {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 10px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    color: #1d1d1d;
    font: 13px/1.35 Roboto, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pk_pol:hover {
    border-color: #d6d6d6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    text-decoration: none;
}
.pk_pol:focus-visible { outline: 2px solid #ca0000; outline-offset: 2px; }

.pk_pol__okl { display: block; margin: 0 0 8px; line-height: 0; }
.pk_pol__okl img {
    display: block;
    width: 85px;
    height: auto;
    max-height: 136px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: transform .15s;
}
.pk_pol:hover .pk_pol__okl img { transform: scale(1.03); }

.pk_pol__autor {
    max-width: 100%;
    overflow: hidden;
    color: #7a7a7a;
    font-size: 12px;
    font-style: italic;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pk_pol__tytul {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #1d1d1d;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}
.pk_pol:hover .pk_pol__tytul { color: #ca0000; }
.pk_pol__cena { margin-top: 4px; color: #ca0000; font-size: 15px; font-weight: 800; }

/* ---------- 7. Komunikaty ---------- */
.pk_komunikat { max-width: 340px; margin: 10px 0; padding: 10px 14px; }
.pk_brak { margin: 20px 0; line-height: 1.6; }

/* niedostępna + zapis na powiadomienie */
.pk_niedostepna { max-width: 420px; margin: 24px auto; text-align: center; }
.pk_niedostepna_info { margin: 0 0 14px; font-size: 15px; }
.pk_zapowiedz { font-size: 16px; color: #8bbc18; }
.pk_powiadom { padding: 12px 14px; border: 1px solid #ffbf80; border-radius: 8px; font-size: 14px; }
.pk_powiadom p { margin: 0 0 10px; }
.pk_powiadom form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }

.okienko {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    white-space: nowrap;
}
.okienko::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -.25em; }
.okienko_rabat {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
    padding: 30px;
    border: 3px solid #002887;
    background: #fff;
    color: #002887;
    text-align: center;
    white-space: nowrap;
}
.okienko_procent { margin: 0 auto 3px; font-size: 40px; font-weight: 800; line-height: 1; white-space: normal; }
.okienko_napis { font-size: 24px; font-weight: 800; }
.okienko_wazny { margin: 5px; font-size: 18px; }
.okienko_kod { width: 250px; margin: 20px auto; padding: 20px; border: 1px solid #878787; background: #efefef; color: #000; font-size: 40px; }
.zamk {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 10px;
    border: 0;
    background: #002887;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.zamk span::after { content: "X"; }

/* ---------- 8. Węższe ekrany ---------- */

@media screen and (max-width: 1199px) {
    #sekcja#sekcja:has(.pk) > #prawa_kolumna { display: none; }
    #sekcja#sekcja:has(.pk) { grid-template-columns: 170px minmax(0, 1fr); }
    #sekcja#sekcja:has(.pk):not(:has(> #lewa_kolumna:not(:empty))) { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 799px) {
    #sekcja#sekcja:has(.pk) { grid-template-columns: minmax(0, 1fr); }
}

/* 8b. Układ karty wg szerokości środka */

@container karta (max-width: 720px) {
    .pk_gora { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
    .pk_srodek { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 14px; }
    .pk_kupno { order: -1; }

    /* pole zakupu w poziomie */
    .pk_kupno {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 18px;
        text-align: left;
    }
    .pk_kupno .lista_cena { flex: 0 0 auto; }
    .pk_kupno .cena_blok { align-items: flex-start; }
    .pk_kupno .lista_koszyk { flex: 0 1 var(--koszyk-max); max-width: var(--koszyk-max); }
    .pk_kupno .do_koszyka_komunikat,
    .pk_kupno .dostepnosc { text-align: left; }
    .pk_kupno .do_koszyka_komunikat.ostani,
    .pk_kupno .do_koszyka_komunikat.ostatni { align-self: flex-start; }

    .pk_dane_blok { padding-top: 0; }
}

/* wąsko (do 520 px) */
@container karta (max-width: 520px) {
    .pk_gora { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pk_okladka { width: 100%; max-width: 220px; margin: 0 auto; }
    .pk_naglowek { text-align: center; }
    .pk h1.pk_tytul { font-size: 22px; }
    .pk_kupno .lista_koszyk { max-width: none; }
    .pk_opis p,
    .pk_opis ul,
    .pk_opis ol { font-size: 15px; }
    .pk_opis li { padding-left: 26px; }
}

/* 8c. Polecane i okno rabatu */
@media screen and (max-width: 600px) {
    .pk_kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .okienko_rabat { padding: 30px 0; }
}

/* bardzo wąskie telefony (≤ 360 px) */
@media screen and (max-width: 360px) {
    .pk_kupno {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pk_kupno .lista_koszyk {
        flex: none;
        width: var(--koszyk-max);
        max-width: 100%;
    }
}

/* ==========================================================================
   Odswiezenie wygladu (2026-11): cieple tlo, bordowy akcent, szersze lewe menu.
   Reguly dopisane na koncu pliku - nadpisuja wczesniejsze definicje.
   ========================================================================== */
#sekcja{padding-top:8px;background:transparent}
#sekcja > #main1,#sekcja > #main2,#sekcja > #prawa_kolumna{background:transparent}
article.poz span.cenad{color:var(--pz-akcent)}
#main1 article.pk{background:var(--pz-karta);border:1px solid var(--pz-linia);border-radius:var(--pz-r);box-shadow:0 1px 2px rgba(31,29,26,.04);margin:12px 0 0;padding:24px 26px;width:auto}
.pk_okladka img{box-shadow:0 8px 18px -8px rgba(31,29,26,.5);border-radius:2px}
article.pk span.cenad,.pk_kafel span.cenad{color:var(--pz-akcent)}
.pk_polecane{margin-top:28px}
.pk_sekcja_tytul{font-size:20px;font-weight:700;color:var(--pz-atrament);border-bottom:1px solid var(--pz-linia-mocna);padding-bottom:10px;margin-bottom:22px;position:relative;}
.pk_sekcja_tytul::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pz-akcent)}