/* ============================================================
   CHECKOUT.CSS — strona KOSZYKA (route=checkout/cart) ostylowana
   wg makiety figurydeco. Reużywa tokenów (tokens.css), bazowych
   przycisków (.btn / .btn--primary / .btn--ghost z base.css),
   .breadcrumb (category.css) oraz steppera .qty/.qty__* (product.css).
   Słownik komponentów (.cksum / .cki / .qty) zmapowany 1:1 z
   makieta-nowe-figurydeco/koszyk.html.
   Ładowane globalnie z common/header.twig (jak pozostałe moduły CSS).
   ============================================================ */

/* --- rozmiary przycisków z makiety (base.css ma tylko --lg) --- */
.btn--xl    { padding: 18px 32px; font-size: 14px; }
.btn--block { width: 100%; justify-content: center; }

/* ============================================================
   POWŁOKA STRONY
   ============================================================ */
.cart-page { padding: 40px 0 90px; }
.cart-page .breadcrumb { margin-bottom: 26px; }

/* nagłówek: tytuł + licznik pozycji */
.cart-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.cart-head__title {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
}
.cart-head__count { font-size: 14px; color: var(--ink-3); }

/* siatka: lista pozycji + lepkie podsumowanie */
.cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 44px;
    align-items: start;
}

/* ============================================================
   LISTA POZYCJI (lewa kolumna)
   ============================================================ */
.cart-list { display: flex; flex-direction: column; }

.citem {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 22px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}
.citem:first-child { padding-top: 4px; }

.citem__media {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line);
}
.citem__media img { width: 100%; height: 100%; object-fit: cover; }

.citem__body { display: flex; flex-direction: column; min-width: 0; }

.citem__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.citem__name {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.18;
    color: var(--ink);
}
.citem__name:hover { color: var(--accent); opacity: 1; }
.citem__model {
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-top: 3px;
}

/* opcje / warianty + ew. nagroda */
.citem__meta { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.citem__meta span { font-size: 12.5px; color: var(--ink-2); }
.citem__meta b { color: var(--ink); font-weight: 500; }
.citem__out { color: #d04848; font-size: 12px; font-weight: 600; margin-top: 6px; }
.citem__recurring {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 11px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-radius: 4px;
}

.citem__remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    transition: all 0.15s;
}
.citem__remove:hover { background: var(--bg-soft); color: #d04848; }

/* dolny pas pozycji: stepper + ceny */
.citem__bottom {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.citem__prices { text-align: right; line-height: 1.2; }
.citem__unit  { display: block; font-size: 12px; color: var(--ink-3); }
.citem__total { display: block; font-size: 18px; font-weight: 700; color: var(--ink); }

/* kompaktowy stepper na liście koszyka (markup z product.css) */
.cart-page .qty       { height: 44px; }
.cart-page .qty__btn  { width: 40px; font-size: 16px; }
.cart-page .qty__input{ width: 42px; font-size: 14px; }

/* pasek akcji pod listą */
.cart-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* ============================================================
   DODATKI — natywne moduły total OC (kupon / bon / punkty /
   szacowanie wysyłki) renderowane z {{ modules }}. Bootstrap CSS
   nie jest ładowany, więc restylujemy surowy markup .panel ręcznie,
   a akordeon obsługuje mały vanilla-JS w cart.twig (klasa .is-open).
   ============================================================ */
.cart-extras { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.cart-extras__title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-extras .panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}
.cart-extras .panel-heading { padding: 0; }
.cart-extras .panel-title { margin: 0; font-family: var(--sans); }
.cart-extras .panel-title a,
.cart-extras .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}
.cart-extras .panel-title a:hover { color: var(--accent); opacity: 1; }
.cart-extras .panel-title a::after {
    content: "+";
    font-size: 18px;
    line-height: 1;
    color: var(--ink-3);
    font-weight: 400;
}
.cart-extras .accordion-toggle.is-open::after { content: "\2212"; } /* minus */
.cart-extras .panel-title .fa { display: none; }                   /* fa nieładowane */

.cart-extras .panel-collapse { display: none; border-top: 1px solid var(--line); }
.cart-extras .panel-collapse.is-open { display: block; }
.cart-extras .panel-body { padding: 18px 20px; }

.cart-extras .control-label {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    padding: 0 0 8px;
    font-size: 12px;
    color: var(--ink-2);
}
.cart-extras .form-group { margin-bottom: 12px; }
.cart-extras .form-group:last-child { margin-bottom: 0; }
.cart-extras .input-group { display: flex; gap: 8px; }
.cart-extras .form-control,
.cart-extras input[type="text"],
.cart-extras select,
.cart-extras textarea {
    flex: 1;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    outline: none;
    transition: border-color var(--transition);
}
.cart-extras .form-control:focus,
.cart-extras input[type="text"]:focus,
.cart-extras select:focus { border-color: var(--accent); }
.cart-extras .input-group-btn { display: flex; }
.cart-extras .input-group-btn .btn,
.cart-extras .buttons .btn,
.cart-extras input[type="button"].btn,
.cart-extras .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: all var(--transition);
}
.cart-extras .btn:hover { background: var(--accent); border-color: var(--accent); }
.cart-extras .buttons { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.cart-extras .text-danger { color: #a23333; font-size: 12px; }
.cart-extras .help-block { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ============================================================
   PODSUMOWANIE (prawa, lepka kolumna) — .cksum z makiety
   ============================================================ */
.cart-aside { position: sticky; top: 100px; }

.cksum {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cksum__head {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--line);
}
.cksum__head h2 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.cksum__totals { padding: 16px 24px 6px; }
.cksum__totals li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ink-2);
}
.cksum__totals li b { color: var(--ink); font-weight: 600; }
.cksum__total {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 16px !important;
}
.cksum__total span,
.cksum__total b {
    font-family: var(--serif);
    font-size: 24px !important;
    font-weight: 600;
    color: var(--ink) !important;
}

.cksum__cta { padding: 10px 24px 22px; }
.cksum__cta .btn { margin-bottom: 10px; }
.cksum__cta .btn:last-child { margin-bottom: 0; }
.cksum__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
}
.cksum__secure svg { color: var(--accent-dark); }

.cksum__perks {
    padding: 18px 24px;
    background: var(--bg-soft);
    display: flex;
    flex-direction: column;
    gap: 11px;
    border-top: 1px solid var(--line);
}
.cksum__perks div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-2);
}
.cksum__perks svg { color: var(--accent-dark); flex-shrink: 0; }

/* ============================================================
   ALERTY (brak Bootstrap CSS → własne style; kupon AJAX wstrzykuje
   .alert-danger po .breadcrumb)
   ============================================================ */
.cart-page .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-2);
    background: var(--bg-soft);
}
.cart-page .alert-success { background: #eef6e3; border-color: #cfe3ad; color: #3f5d1c; }
.cart-page .alert-danger  { background: #fbeaea; border-color: #f0c2c2; color: #a23333; }
.cart-page .alert .fa { display: none; }
.cart-page .alert .close {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}
.cart-page .alert .close:hover { opacity: 1; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width: 992px) {
    .cart-grid { grid-template-columns: 1fr; gap: 30px; }
    .cart-aside { position: static; }
}
@media (max-width: 560px) {
    .cart-page { padding: 24px 0 72px; }
    .citem { grid-template-columns: 76px 1fr; gap: 16px; }
    .citem__media { width: 76px; height: 76px; }
    .citem__name { font-size: 18px; }
    .citem__bottom { flex-wrap: wrap; gap: 12px; }
    .cart-actions { flex-direction: column-reverse; }
    .cart-actions .btn { width: 100%; }
}

/* ============================================================
   KASA JEDNOETAPOWA (route=checkout/checkout) — wg makiety
   makieta-nowe-figurydeco/koszyk.html (plik "koszyk" makiety to
   w istocie checkout). Szkielet: checkout.twig; podsumowanie po
   prawej renderuje partial checkout/summary (AJAX).
   ============================================================ */

/* pasek kroków pod headerem */
.checkout-steps {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
}
.checkout-steps__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.step__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
}
.step.is-done .step__num,
.step.is-active .step__num { background: var(--ink); color: var(--bg-card); border-color: var(--ink); }
.step.is-active .step__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.is-active .step__label,
.step.is-done .step__label { color: var(--ink); }
.step__line { width: 60px; height: 1px; background: var(--line); margin: 0 16px; }
.step__line.is-done { background: var(--ink); }

/* układ */
.checkout { padding: 36px 0 60px; }
.checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
.checkout__summary { position: sticky; top: 100px; }

/* blok kroku */
.ckblock {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    overflow: hidden;
}

/* „wszystko od razu": metody płatności (lewo, szersza) + dostawy (prawo) obok siebie */
.ck-methods-row {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
    align-items: start;
}
.ck-methods-row .ckblock { margin-bottom: 0; }
.ckblock--submit .ckblock__body { padding-top: 22px; }
/* dolna sekcja (adres + zgoda + złożenie) pełną szerokością pod kolumnami */
.checkout__below { margin-top: 2px; }
.checkout__grid { align-items: start; }
#ck-agree-box { margin: 4px 0 16px; }
#ck-agree-box:empty { display: none; }
@media (max-width: 860px) {
    .ck-methods-row { grid-template-columns: 1fr; }
}
.ckblock__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}
.ckblock__head h2 {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.ckblock__ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
    display: grid; place-items: center;
}
.ckblock__ico svg { width: 18px; height: 18px; }
.ckblock__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg-card);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
}
.ckblock__login {
    margin-left: auto;
    font-size: 13px;
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none; border: 0; cursor: pointer;
}
.ckblock__login:hover { color: var(--accent); }
.ckblock__sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent-dark);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
}
.ckblock__sub svg { width: 12px; height: 12px; }
.ckblock__body { padding: 20px 24px 24px; }
.ckblock__body + .ckblock__body { border-top: 1px solid var(--line); }
.ck-placeholder { font-size: 13px; color: var(--ink-3); margin: 0; }
.ck-loading { font-size: 13px; color: var(--ink-3); }

/* listy wyboru: dostawa / płatność */
.ship-list, .pay-list { display: flex; flex-direction: column; gap: 8px; }
.ship, .pay-opt {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all .15s;
}
.ship:hover, .pay-opt:hover { border-color: var(--ink-3); }
.ship.is-checked, .pay-opt.is-checked {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.ship input[type="radio"], .pay-opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }
.ship__main strong, .pay-opt__main strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.ship__main span, .pay-opt__main span { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.ship__price { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ship__price--free { color: var(--accent-dark); }
.pay-opt__check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    opacity: 0;
    transition: opacity .15s;
}
.pay-opt.is-checked .pay-opt__check { opacity: 1; }

/* uwagi + zgody + CTA w bloku płatności */
.ck-comment textarea { min-height: 96px; }
.ck-agree { margin: 18px 0 0; }
.ck-submit { margin-top: 18px; }
.ckform__legal { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.55; }

/* trust badges pod formularzem */
.cktrust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.cktrust__item {
    display: flex; align-items: center; gap: 8px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--ink);
    letter-spacing: 0.03em;
}
.cktrust__item svg { color: var(--accent-dark); flex-shrink: 0; }

/* podsumowanie: pozycje koszyka (partial checkout/summary) */
.cksum__edit { font-size: 12px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cksum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cksum__items { display: flex; flex-direction: column; padding: 8px 24px; }
.cki {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.cki:last-child { border-bottom: 0; }
.cki img {
    width: 64px; height: 64px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff; /* wycinanki PNG — czytelne też w dark mode */
    border: 1px solid var(--line);
}
.cki__info { font-size: 13px; line-height: 1.4; padding-right: 26px; }
.cki__info strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; font-weight: 600; }
.cki__name { color: inherit; transition: color var(--transition); }
.cki__name:hover { color: var(--accent-dark, var(--accent)); }
.cki__variant { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 6px; }
.cki__row { display: flex; gap: 10px; align-items: center; }
.cki__qty { font-size: 12px; color: var(--ink-2); background: var(--bg-soft); padding: 2px 8px; border-radius: 4px; }
.cki__price { font-size: 14px; font-weight: 700; color: var(--ink); }
.cki__remove {
    position: absolute;
    top: 14px; right: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 18px; line-height: 1;
    color: var(--ink-3);
    background: none; border: 0; cursor: pointer;
    transition: all .15s;
}
.cki__remove:hover { background: var(--bg-soft); color: #d04848; }

/* kod rabatowy w podsumowaniu */
.cksum__promo {
    display: flex; gap: 8px;
    padding: 16px 24px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
}
.cksum__promo input {
    flex: 1; min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--sans);
    background: var(--bg-card);
    color: var(--ink);
    outline: none;
}
.cksum__promo input:focus { border-color: var(--accent); }
.cksum__promo button {
    padding: 10px 18px;
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: background .2s;
}
.cksum__promo button:hover { background: var(--accent-dark); }
.cksum__discount b { color: var(--accent-dark) !important; }
.cksum__head + .cksum__promo { border-top: 0; } /* bez pozycji w aside głowa styka się z promo — jedna linia zamiast dwóch */

/* CTA podsumowania: przewija do danych i adresu (#ck-customer) */
.cksum__go { margin: 14px 24px 0; width: calc(100% - 48px); }
.cksum__continue {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
    padding: 12px 0 16px;
}
.cksum__continue:hover { color: var(--accent-dark); opacity: 1; }

/* ============================================================
   KASA — TABELA POZYCJI (#ck-items, partial checkout/summary/items)
   Pełna szerokość nad siatką: miniatura | nazwa+meta | stepper | wartość | ×
   ============================================================ */
.ckitems { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cko {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto minmax(96px, auto) 28px;
    gap: 8px 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    transition: opacity var(--transition);
}
.cko:first-child { padding-top: 2px; }
.cko:last-child { border-bottom: 0; padding-bottom: 2px; }
.cko.is-busy { opacity: .45; pointer-events: none; }
.cko__thumb img {
    width: 64px; height: 64px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff; /* wycinanki PNG — czytelne też w dark mode */
    border: 1px solid var(--line);
    display: block;
}
.cko__thumb--voucher {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    color: var(--accent-dark);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.cko__info { min-width: 0; }
.cko__name { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cko__name:hover { color: var(--accent-dark); }
.cko__variant { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 2px; }
.cko__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-dark); margin-top: 4px; }
.cko__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cko__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-card);
}
.cko__qty button {
    width: 32px; height: 34px;
    font-size: 16px;
    color: var(--ink-2);
    background: none; border: 0; cursor: pointer;
    transition: background .15s;
}
.cko__qty button:hover { background: var(--bg-soft); color: var(--ink); }
.cko__qty b { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.cko__qty--blank { border: 0; background: none; }
.cko__total { text-align: right; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cko__total small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.cko__remove {
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 18px; line-height: 1;
    color: var(--ink-3);
    background: none; border: 0; cursor: pointer;
    transition: all .15s;
    justify-self: end;
}
.cko__remove:hover { background: var(--bg-soft); color: #d04848; }

@media (max-width: 720px) {
    .cko { grid-template-columns: 56px minmax(0, 1fr) auto; position: relative; }
    .cko__thumb { grid-area: 1 / 1 / 3 / 2; }
    .cko__thumb img, .cko__thumb--voucher { width: 56px; height: 56px; }
    .cko__info { grid-area: 1 / 2 / 2 / 4; padding-right: 30px; }
    .cko__qty { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
    .cko__total { grid-area: 2 / 3 / 3 / 4; }
    .cko__remove { position: absolute; top: 10px; right: 0; }
}

/* stockowe panele adresowe (payment_address/shipping_address/guest_shipping
   dla zalogowanych / osobnego adresu dostawy) — restyle surowego markupu OC */
.ckblock .form-group { margin-bottom: 14px; }
.ckblock .control-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); padding-bottom: 6px; }
.ckblock .form-control {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--sans);
    background: var(--bg-card);
    color: var(--ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ckblock .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147, 173, 63, .12); }
.ckblock .radio, .ckblock .checkbox { margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.ckblock .radio label, .ckblock .checkbox label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.ckblock .radio input, .ckblock .checkbox input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.ckblock .text-danger { color: #a23333; font-size: 12px; margin-top: 4px; }
.ckblock .alert { padding: 12px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; border: 1px solid #f0c2c2; background: #fbeaea; color: #a23333; }
.ckblock .btn-primary, .ckblock input[type="button"].btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px;
    border-radius: var(--radius);
    background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 0; cursor: pointer;
    transition: all var(--transition);
}
.ckblock .btn-primary:hover, .ckblock input[type="button"].btn:hover { background: var(--accent); }
.ckblock .buttons { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---- PayU: metody (rozwijane pod opcją „PayU") — banki + pozostałe metody ---- */
.payu-grid {
    margin: 10px 0 4px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
}
.payu-grid__head { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.payu-grid__empty { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* bazowy kafel (zaznaczenie) — wspólny dla banku i metody (JS toggluje .is-active) */
.payu-tile { position: relative; cursor: pointer; transition: all .15s; }

/* SZYBKI PRZELEW — siatka logo banków (jak panel PayU, bez podpisów) */
.payu-banks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.payu-bank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.payu-bank:hover { border-color: var(--ink-3); }
.payu-bank.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.payu-bank input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.payu-bank img { max-width: 100%; max-height: 38px; object-fit: contain; }

/* POZOSTAŁE METODY — wiersze: radio + logo + nazwa (jak lista PayU) */
.payu-methods-list { display: flex; flex-direction: column; gap: 6px; }
.payu-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.payu-method:hover { border-color: var(--ink-3); }
.payu-method.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.payu-method input[type="radio"] { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.payu-method img { height: 22px; width: auto; max-width: 56px; object-fit: contain; flex: 0 0 auto; }
.payu-method__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.payu-method--default { background: var(--bg-soft); }
.payu-method--default .payu-method__name { color: var(--ink-2); font-weight: 500; }

/* ---- Przelew na konto: dane do wpłaty (krok potwierdzenia) ---- */
.bank-transfer__title { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.bank-transfer__desc { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.55; }
.bank-transfer__box {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink);
    margin-bottom: 14px;
}
.bank-transfer__note { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; line-height: 1.5; }

/* responsywność kasy */
@media (max-width: 992px) {
    .checkout__grid { grid-template-columns: 1fr; gap: 24px; }
    .checkout__summary { position: static; order: -1; }
    .cktrust { grid-template-columns: repeat(2, 1fr); }
    .step__line { width: 28px; margin: 0 8px; }
    .step__label { display: none; }
    .step.is-active .step__label { display: inline; }
}
@media (max-width: 560px) {
    .ckblock__head { padding: 16px 16px 12px; }
    .ckblock__body { padding: 16px; }
}