/* ============================================================
   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 */

/* kupon zwinięty do linka po prawej — pole rozwija się po kliknięciu (details, bez JS) */
.cksum__promo-toggle { padding: 12px 24px 0; text-align: right; }
.cksum__promo-toggle > summary {
    display: inline-block;
    list-style: none;
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    user-select: none;
}
.cksum__promo-toggle > summary::-webkit-details-marker { display: none; }
.cksum__promo-toggle > summary:hover,
.cksum__promo-toggle[open] > summary { color: var(--ink); }
.cksum__promo-toggle .cksum__promo { margin-top: 8px; padding: 0; background: none; border-top: 0; text-align: left; }
.ck-sec .cksum--totals .cksum__promo-toggle { padding: 0 0 6px; }

/* 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.
   Selektory .ck-sec: sekcje nowej kasy jednostronicowej (układ bsp-new);
   .ckblock zostaje dla ewentualnych paneli poza kasą. */
.ckblock .form-group, .ck-sec .form-group { margin-bottom: 14px; }
.ckblock .control-label, .ck-sec .control-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); padding-bottom: 6px; }
.ckblock .form-control, .ck-sec .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, .ck-sec .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147, 173, 63, .12); }
.ckblock .radio, .ckblock .checkbox, .ck-sec .radio, .ck-sec .checkbox { margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.ckblock .radio label, .ckblock .checkbox label, .ck-sec .radio label, .ck-sec .checkbox label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.ckblock .radio input, .ckblock .checkbox input, .ck-sec .radio input, .ck-sec .checkbox input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.ckblock .text-danger, .ck-sec .text-danger, .ck-side .text-danger { color: #a23333; font-size: 12px; margin-top: 4px; }
.ckblock .alert, .ck-sec .alert, .ck-side .alert, #ck-alert .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, .ck-sec .btn-primary, .ck-sec 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, .ck-sec .btn-primary:hover, .ck-sec input[type="button"].btn:hover { background: var(--accent); }
.ckblock .buttons, .ck-sec .buttons { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---- 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; }
}

/* ============================================================
   KASA JEDNOSTRONICOWA v2 — układ za wzorem bsplate.de (bsp-new):
   lewa kolumna .ck-main (koszyk → sumy → dane → uwagi) jako jeden
   kontener z sekcjami .ck-sec rozdzielonymi liniami; prawy lepki
   panel .ck-side: akordeon płatności Argo Payments (.ckp) → dostawa
   → zgoda → „Złóż zamówienie". Szkielet: checkout.twig.
   ============================================================ */
.ck-title { font-family: var(--serif); font-size: 34px; font-weight: 600; margin: 0 0 22px; }
.ck-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start; }

.ck-main { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.ck-sec { padding: 22px 26px; }
.ck-sec + .ck-sec { border-top: 1px solid var(--line); }
.ck-sec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ck-sec__head h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin: 0; }
.ck-sec__ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: grid; place-items: center; }
.ck-sec__ico svg { width: 18px; height: 18px; }
.ck-sec__count { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.ck-sec__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; }
.ck-sec__login:hover { color: var(--accent); }
.ck-items-foot { margin-top: 12px; }
.ck-back { font-size: 13px; color: var(--ink-3); }
.ck-back:hover { color: var(--accent-dark); }

/* sumy w sekcji (partial .cksum--totals) — bez ramki karty, kupon nad sumami */
.ck-sec .cksum--totals { background: none; border: 0; border-radius: 0; overflow: visible; }
.ck-sec .cksum--totals .cksum__promo { padding: 0 0 6px; background: none; border-top: 0; }
.ck-sec .cksum--totals .cksum__totals { padding: 6px 0 0; }
.cksum__promo--applied { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: 6px; background: var(--accent-soft); font-size: 13px; color: var(--ink); }
.cksum__promo--applied button { background: none; border: 0; padding: 0; font-size: 12px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.cksum__promo--applied button:hover { color: #d04848; }

/* sekcje formularza gościa + „inny adres dostawy" */
.ckform-sec { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 16px; }
.ckform-sec--first, .ckform-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.ck-hint { font-size: 12px; color: var(--ink-3); margin: 2px 0 10px; }
.ck-diffship { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 16px; }
.ck-diffship #ck-ship-fields { margin-top: 12px; }

/* Prywatnie / Firma (wzorzec bsp-acctype, tokeny figurydeco) */
.ck-acctype { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ck-acctype__opt { position: relative; margin: 0; cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 20px; font-weight: 600; font-size: 13px; color: var(--ink); background: var(--bg-card); display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, color .15s, background .15s; }
.ck-acctype__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-acctype__opt:hover { border-color: var(--accent); }
.ck-acctype__opt.is-active { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.ck-acctype__opt.is-active::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* prawy lepki panel */
.ck-side { position: sticky; top: 90px; min-width: 0; }
.ck-side__card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 18px; }
.ck-side__h { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin: 18px 0 12px; }
.ck-side__h:first-child { margin-top: 0; }
.ck-side__ssl { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.ck-side .ship { padding: 12px 14px; gap: 10px; }
#ck-place-order { margin-top: 4px; }
.ck-side__brands { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 14px 0 2px; }
.ck-brand { border: 1px solid var(--line); border-radius: 4px; padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: #fff; }
.ck-side__secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.ck-side__secure svg { color: var(--accent-dark); }

/* akordeon Argo Payments (wzorzec bsp-pay, tokeny figurydeco) */
.ckp { display: flex; flex-direction: column; gap: 10px; }
.ckp__group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); transition: border-color .15s; }
.ckp__group.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ckp__group.is-empty { display: none; }
.ckp__toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.ckp__toggle:hover { background: var(--bg-alt); }
.ckp__brand { font-weight: 800; font-size: 14px; color: var(--brand, var(--ink)); white-space: nowrap; }
.ckp__chev { margin-left: auto; color: var(--ink-3); transition: transform .18s; flex: 0 0 auto; }
.ckp__group.is-open .ckp__chev { transform: rotate(180deg); }
.ckp__body { display: none; }
.ckp__group.is-open .ckp__body { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 10px; }
.ckp__opt { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; flex-wrap: wrap; transition: border-color .12s, background .12s; margin: 0; }
.ckp__opt:hover { border-color: var(--line-2); background: var(--bg-alt); }
.ckp__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ckp__radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); position: relative; transition: border-color .12s; }
.ckp__opt input:checked ~ .ckp__radio { border-color: var(--accent); }
.ckp__opt input:checked ~ .ckp__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.ckp__opt input:checked ~ .ckp__label { font-weight: 600; }
.ckp__label { flex: 1; font-size: 13px; color: var(--ink); min-width: 0; }
.ckp__badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; }
.ckp__icons { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.ckp__icons .pay-ic { height: 20px; width: auto; display: block; }
.ckp__soon { font-size: 11px; color: var(--ink-3); font-style: italic; margin-left: 10px; }
.ckp__opt.is-off { opacity: .55; cursor: not-allowed; background: var(--bg-alt); }
.ckp__opt.is-off:hover { border-color: var(--line); }
.ckp__opt.is-hidden { display: none; }
.ckp__note { display: none; margin: 2px 0 0; padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.ckp__group.is-selected .ckp__note { display: block; }
.ckp__note p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ckp__note-bank { margin-top: 6px !important; color: var(--ink) !important; }

/* responsywność nowego układu */
@media (max-width: 1100px) {
    .ck-cols { grid-template-columns: 1fr; }
    .ck-side { position: static; }
}
@media (max-width: 560px) {
    .ck-sec { padding: 16px; }
    .ck-side__card { padding: 16px 14px; }
    .ck-title { font-size: 27px; }
}

/* Koszyk: dopisek, ze suma nie zawiera jeszcze dostawy */
.cksum__note { margin: 0; padding: 0 24px 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }