/* bfc_checkout_v2 0.3.0 — оформлення замовлення */
:root { --bfcco-css-version: "0.9.24"; }

.bfcco-page {
    --bfcco-green: #6ba539;
    --bfcco-green-d: #5a8f2f;
    --bfcco-line: #e5e7eb;
    --bfcco-mut: #6b7280;
    --bfcco-red: #c0392b;
}

/* ---------- приховане поле країни ---------- */
.bfcco-page .bfcco-hidden-field { display: none !important; }

/* ---------- чіпси міст ---------- */
.bfcco-page .bfcco-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px;
}
.bfcco-page .bfcco-chips button {
    background: #f0f2f5; border: 0; border-radius: 999px;
    padding: 5px 12px; font-size: 13px; color: #374151; cursor: pointer; line-height: 1.3;
}
.bfcco-page .bfcco-chips button:hover { background: #e3e7ec; }

/* ---------- марки перевізників ---------- */
.bfcco-page .bfcco-mark {
    width: 30px; height: 30px; border-radius: 7px; flex: none;
    display: inline-grid; place-items: center; color: #fff;
    font: 700 10px/1 -apple-system, "Segoe UI", sans-serif;
    margin-right: 10px; vertical-align: middle;
}
.bfcco-page .bfcco-c-np { background: #da291c; }
.bfcco-page .bfcco-c-up { background: #ffd200; color: #1f2328; }
.bfcco-page .bfcco-c-rz { background: #00a046; }
.bfcco-page .bfcco-c-me { background: #0b3d91; }
.bfcco-page .bfcco-c-ep { background: #f26522; }
.bfcco-page .bfcco-c-pk { background: #6b7280; }

/* ---------- обмеження способів доставки ---------- */
.bfcco-page .bfcco-ship-hidden { display: none !important; }
.bfcco-page .bfcco-ship-more {
    display: block; width: 100%; margin: 4px 0 10px;
    background: none; border: 1px dashed #cbd2da; border-radius: 9px;
    padding: 10px; color: var(--bfcco-green-d); font-size: 14px; cursor: pointer;
}
.bfcco-page .bfcco-ship-more:hover { background: #f7fbf3; }

/* ---------- гейт оплати ---------- */
.bfcco-page .bfcco-gate {
    border: 1px dashed #d5d9df; border-radius: 9px; padding: 16px;
    text-align: center; color: var(--bfcco-mut); font-size: 13.5px; margin-bottom: 8px;
}
.bfcco-page .bfcco-gated .b--pay-way__unit { display: none !important; }

/* ============================================================
   БЛОК ТОВАРІВ 0.3.5 — згорнутий рядок + список за зразком кошика
   ============================================================ */

/* заголовок «Ваше замовлення» разом із кнопкою «Редагувати» більше не потрібні:
   кількість редагується прямо тут, а кнопка вела назад у кошик */
.bfcco-page .bfcco-goods .ab-checkout-header-title { display: none !important; }

/* порожнеча під згорнутим рядком: 20px від обгортки теми і 18px від картки.
   Власних відступів рядку вистачає, тому чужі знімаємо. */
.bfcco-page .bfcco-goods .litecheckout__step-order-products {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.bfcco-skin .litecheckout__ab_steps > .row-fluid.bfcco-goods {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bfcco-skin .litecheckout__ab_steps > .row-fluid.bfcco-goods-open {
    padding-bottom: 10px !important;
}

/* --- згорнутий рядок: кількість, сума, грошова знижка, мініатюри, кнопка --- */
.bfcco-page .bfcco-goods-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0; cursor: pointer; user-select: none;
    white-space: nowrap; min-width: 0;
}
/* Текст смужки — однією флекс-дитиною: сама група центрується по висоті
   рядка, а всередині неї кеглі 15 і 14 вирівняні по базовій лінії.
   Так знімаються обидві старі болячки одразу: базова лінія відносно
   мініатюр 36px (текст злітав угору на 8px) і півпіксельний перекіс
   між сумою та знижкою при вирівнюванні по центру. */
.bfcco-page .bfcco-gs-txt {
    display: flex; align-self: center; align-items: baseline;
    gap: 8px; min-width: 0; white-space: nowrap;
}
.bfcco-page .bfcco-gs-ttl { font-weight: 600; font-size: 15px; }
.bfcco-page .bfcco-gs-dot { color: #c3cad3; }
.bfcco-page .bfcco-gs-sum { font-weight: 600; font-size: 15px; }
/* знижка сумою, звичайним текстом — не бейджем */
.bfcco-page .bfcco-gs-disc { color: var(--bfcco-red); font-size: 14px; margin-left: 2px; }

.bfcco-page .bfcco-gs-thumbs {
    display: flex; gap: 5px; min-width: 0; overflow: hidden;
    margin-left: auto; padding-left: 12px;
}
.bfcco-page .bfcco-gs-thumbs i {
    width: 34px; height: 34px; border-radius: 6px; flex: none;
    background: transparent center/contain no-repeat; border: 0;
    display: block; font-style: normal;
}
.bfcco-page .bfcco-gs-rest {
    display: grid !important; place-items: center;
    font-size: 11px; color: var(--bfcco-mut); background: #f2f4f6;
}
.bfcco-page .bfcco-gs-more {
    flex: none; background: #f2f5f0; border: 0; border-radius: 7px;
    color: var(--bfcco-green-d); font-size: 13.5px; padding: 7px 11px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.bfcco-page .bfcco-gs-more:hover { background: #e7eee1; }
.bfcco-page .bfcco-gs-chev { flex: none; transition: transform .18s; }
.bfcco-page .bfcco-goods-open .bfcco-gs-chev { transform: rotate(180deg); }
/* коли список розгорнутий, мініатюри дублюють його */
.bfcco-page .bfcco-goods-open .bfcco-gs-thumbs { display: none; }
.bfcco-page .bfcco-goods-open .bfcco-gs-more { margin-left: auto; }

/* бейдж знижки у позиції списку — точно як у модулі кошика */
.bfcco-page .bfcco-gi-badge {
    background: #d1392f; color: #fff; border-radius: 4px;
    padding: 2px 6px; font-size: 11px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; flex: none;
}

/* --- розгорнутий список --- */
.bfcco-page .bfcco-gi-badge--gift { background: #6a9d13; color: #fff; }
.bfcco-page .bfcco-gi[data-bfcco-gift-managed="Y"] .bfc-cg-gift-quantity {
    visibility: hidden; pointer-events: none;
}

/* 0.9.25: рідний список схований ЗАВЖДИ — видимі рядки живуть у нашому
   контейнері .bfcco-goods-box, який переживає ajax-перемальовку.
   Перемальовка рідного списку більше не рухає жодного видимого пікселя. */
.bfcco-page .bfcco-goods .ty-order-products__list { display: none !important; }
.bfcco-page .bfcco-golist { display: none; }
.bfcco-page .bfcco-goods-open .bfcco-golist { display: block; }

/* колонки степера і ціни фіксовані — інакше степери плавають
   услід за довжиною суми */
.bfcco-page .bfcco-gi {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 100px 132px 20px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #eef0f2;
    /* тема вирівнює вміст позиції по центру — звідси «плаваючий» вигляд */
    text-align: left;
}
/* гасне лише степер, а не весь рядок */
.bfcco-page .bfcco-gi--busy .bfcco-qty { opacity: .45; pointer-events: none; }

.bfcco-page .bfcco-gi-img {
    width: 44px; height: 44px; display: block; font-style: normal;
    background: transparent center/contain no-repeat; border: 0; border-radius: 0;
}
.bfcco-page .bfcco-gi-t { min-width: 0; }
.bfcco-page .bfcco-gi-n a {
    font-size: 13.5px; line-height: 1.3; color: inherit; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    border-bottom: 0 !important;
}
.bfcco-page .bfcco-gi-n a:hover { color: var(--bfcco-green-d); }
/* характеристики переносяться, а не обрізаються крапками */
.bfcco-page .bfcco-gi-m {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-style: normal; font-size: 11.5px; color: #8a8a8a; line-height: 1.35;
    margin-top: 2px; white-space: normal; overflow: hidden; overflow-wrap: anywhere;
}

/* степер — квадратний, як у кошику; по центру своєї колонки */
.bfcco-page .bfcco-qty {
    display: inline-flex; align-items: center; flex: none; justify-self: center;
    border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; padding: 2px;
}
.bfcco-page .bfcco-qty-b {
    width: 26px; height: 30px; border: 0; background: none; cursor: pointer;
    color: #1c1c1c; font-size: 18px; line-height: 1; padding: 0;
    display: grid; place-items: center;
}
.bfcco-page .bfcco-qty-b:hover { color: var(--bfcco-green-d); }
.bfcco-page .bfcco-qty-v {
    width: 28px; text-align: center; font-style: normal; font-size: 14px; font-weight: 500;
}
.bfcco-page .bfcco-gi--noqty .bfcco-qty { display: none; }
.bfcco-page.bfcco-qty-busy .bfcco-qty-b,
.bfcco-qty-busy .bfcco-page .bfcco-qty-b { pointer-events: none; opacity: .5; }

/* ціна праворуч: стара зверху, сума, бейдж */
.bfcco-page .bfcco-gi-p { text-align: right; white-space: nowrap; }
.bfcco-page .bfcco-gi-old {
    display: block; font-style: normal; font-size: 12.5px; color: #8a8a8a;
    text-decoration: line-through; line-height: 1.2;
}
.bfcco-page .bfcco-gi-old:empty { display: none; }
.bfcco-page .bfcco-gi-sum { font-size: 15px; font-weight: 700; line-height: 1.25; }
.bfcco-page .bfcco-gi-badge { display: inline-block; margin-left: 6px; vertical-align: 2px; }

/* хрестик видалення — перенесений вузол теми */
.bfcco-page .bfcco-gi-x { display: block; text-align: right; }
.bfcco-page .bfcco-gi-x a {
    color: #b6bcc4; font-size: 17px; line-height: 1; text-decoration: none;
    border-bottom: 0 !important; display: inline-block;
}
.bfcco-page .bfcco-gi-x a:hover { color: var(--bfcco-red); }

@media (max-width: 767px) {
    /* обгортка теми має 60px відступу зліва — на 400px екрана це третина
       ширини. У межах блоку товарів знімаємо, назві потрібне місце. */
    .bfcco-page .bfcco-goods .litecheckout__step-order-products > div {
        padding-left: 0 !important;
    }
    /* Колонка степера була фіксовані 100px, а сам степер ширший — він
       вилазив за трек і зсував сусідні колонки, через що рядки не
       збігалися між собою. Тепер під нього гнучкий трек. */
    .bfcco-page .bfcco-gi {
        grid-template-columns: 40px minmax(0, 1fr) auto 18px;
        grid-template-areas: "img t t x" "img qty p p";
        gap: 4px 10px;
    }
    .bfcco-page .bfcco-gi-img { grid-area: img; width: 40px; height: 40px; align-self: start; }
    .bfcco-page .bfcco-gi-t { grid-area: t; min-width: 0; }
    /* довгі назви влазять цілком: дрібніше і три рядки замість двох */
    .bfcco-page .bfcco-gi-n a { font-size: 12px; -webkit-line-clamp: 3; }
    .bfcco-page .bfcco-gi-m { font-size: 10.5px; -webkit-line-clamp: 2; }
    .bfcco-page .bfcco-qty { grid-area: qty; margin-top: 4px; justify-self: start; }
    .bfcco-page .bfcco-gi-p { grid-area: p; margin-top: 4px; }
    .bfcco-page .bfcco-gi-x { grid-area: x; align-self: start; }
    .bfcco-page .bfcco-gs-ttl,
    .bfcco-page .bfcco-gs-sum { font-size: 14.5px; }
    .bfcco-page .bfcco-gs-disc { font-size: 13px; }
    .bfcco-page .bfcco-gs-thumbs { padding-left: 8px; }
    .bfcco-page .bfcco-gs-thumbs i { width: 28px; height: 28px; }
    .bfcco-page .bfcco-gs-more { padding: 6px 9px; font-size: 13px; }
}
/* на вузькому екрані місце віддаємо кнопці, а не мініатюрам */
@media (max-width: 479px) {
    .bfcco-page .bfcco-gs-thumbs { display: none; }
}

/* ---------- згорнуті секції ---------- */
.bfcco-page .bfcco-sumbar {
    display: none; align-items: center; gap: 10px; cursor: pointer;
    padding: 13px 0;
}
.bfcco-page .bfcco-done > .bfcco-sumbar { display: flex; }
.bfcco-page .bfcco-sumbar__tick {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: var(--bfcco-green); color: #fff; font-size: 12px;
    display: grid; place-items: center;
}
.bfcco-page .bfcco-sumbar__body { min-width: 0; flex: 1; }
.bfcco-page .bfcco-sumbar__t {
    display: block; font-size: 13px; color: var(--bfcco-mut); line-height: 1.2;
}
.bfcco-page .bfcco-sumbar__v {
    display: block; font-size: 14.5px; line-height: 1.35;
    overflow-wrap: anywhere;
}
.bfcco-page .bfcco-sumbar__edit {
    margin-left: auto; flex: none; background: none; border: 0;
    color: var(--bfcco-green-d); font-size: 13.5px; text-decoration: underline; cursor: pointer;
}
/* ховаємо вміст згорнутої секції, лишаючи наш рядок */
.bfcco-page .bfcco-done > *:not(.bfcco-sumbar) { display: none !important; }

/* ---------- необов'язкова пошта ---------- */
/* ---------- липка панель ---------- */
.bfcco-sticky { display: none; }

@media (max-width: 767px) {
    .bfcco-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: flex; align-items: center; gap: 12px;
        background: #fff; border-top: 1px solid #e5e7eb;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .09);
    }
    /* Ліворуч тепер два рядки: сума і скільки покупець зекономив.
       Знижка — головний аргумент завершити замовлення, тримати її
       лише вгорі сторінки марно. */
    /* блок сум був упритул до краю екрана */
    .bfcco-sticky__l { line-height: 1.15; flex: 0 0 auto; padding-left: 6px; }
    .bfcco-sticky__l small { display: block; font-size: 11px; color: #6b7280; }
    .bfcco-sticky__l b { font-size: 17px; }
    .bfcco-sticky__d {
        display: block;
        margin-top: 1px;
        font-size: 11.5px;
        font-weight: 600;
        color: #d33a2c;
    }
    .bfcco-sticky__d:empty { display: none; }
    /* Кнопка займала майже всю смугу. Вона й так єдина дія на екрані —
       розмір їй потрібен достатній для пальця, а не максимальний. */
    /* Ширина фіксована часткою смуги, а не вмістом: напис міняється по
       ходу заповнення («Вкажіть телефон» → «Оформити замовлення»), і на
       ширині за вмістом кнопка стрибала на кожному кроці. */
    .bfcco-sticky__btn {
        flex: 0 0 58%;
        margin-left: auto;
        background: #6a9d13; color: #fff; border: 0; border-radius: 9px;
        padding: 11px 12px; font-size: 14.5px; font-weight: 600;
        line-height: 1.25; cursor: pointer;
    }
    .bfcco-sticky__btn:hover { background: #5c8810; }
    .bfcco-has-sticky body { padding-bottom: 76px; }
}

/* ---------- липкий підсумок на десктопі ---------- */
@media (min-width: 768px) {
    .bfcco-page .litecheckout__ab_sticky-block {
        position: sticky;
        top: 16px;
        align-self: flex-start;
    }
}


/* ============================================================
   ВІЗУАЛЬНИЙ ШАР 0.3.0
   ============================================================ */

.bfcco-skin {
    --bfcco-ink: #1f2328;
    --bfcco-soft: #f7f8fa;
}

/* --- секції як картки --- */
.bfcco-skin .litecheckout__ab_steps > .row-fluid {
    background: #fff;
    border: 1px solid var(--bfcco-line);
    border-radius: 12px;
    padding: 6px 20px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.bfcco-skin .litecheckout__ab_steps > .row-fluid:empty { display: none; }

/* заголовок кроку — лишаємо фірмовий зелений теми, лише вирівнюємо ритм */
.bfcco-skin .litecheckout__ab_step-title {
    margin: 0 0 4px !important;
    padding: 14px 0 10px !important;
    line-height: 1.25 !important;
}

/* шапка блоку товарів */
.bfcco-skin .ab-checkout-header-title {
    border: 0 !important;
    background: none !important;
    padding: 12px 0 4px !important;
    margin: 0 !important;
}
.bfcco-skin .ab-checkout-header-title .ty-mainbox-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- поля --- */
.bfcco-skin input[type="text"],
.bfcco-skin input[type="tel"],
.bfcco-skin input[type="email"],
.bfcco-skin select,
.bfcco-skin textarea {
    border: 1px solid #d5d9df !important;
    border-radius: 9px !important;
    padding: 12px 13px !important;
    height: auto !important;
    min-height: 46px;
    box-shadow: none !important;
    font-size: 15px !important;
    background-color: #fff !important;
    transition: border-color .15s, box-shadow .15s;
}
.bfcco-skin textarea { min-height: 90px; }
.bfcco-skin input[type="text"]:hover,
.bfcco-skin input[type="tel"]:hover,
.bfcco-skin input[type="email"]:hover { border-color: #c3cad3 !important; }
.bfcco-skin input[type="text"]:focus,
.bfcco-skin input[type="tel"]:focus,
.bfcco-skin input[type="email"]:focus,
.bfcco-skin select:focus,
.bfcco-skin textarea:focus {
    border-color: var(--bfcco-green) !important;
    box-shadow: 0 0 0 3px rgba(107, 165, 57, .16) !important;
    outline: 0;
}
.bfcco-skin ::placeholder { color: #9aa2ac; }

/* --- способи доставки та оплати --- */
.bfcco-skin .b--ship-way__unit,
.bfcco-skin .b--pay-way__unit {
    border: 1px solid var(--bfcco-line) !important;
    border-radius: 11px !important;
    margin: 0 0 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s;
}
/* 0.9.37: підсвітку по наведенню вмикаємо лише там, де є справжнє
   наведення. На тачскріні браузер емулює :hover пальцем — під час
   скролу картка під пальцем «залипала» підсвіченою, і покупець бачив
   напівобраний спосіб, якого не обирав. */
@media (hover: hover) {
    .bfcco-skin .b--ship-way__unit:hover,
    .bfcco-skin .b--pay-way__unit:hover { border-color: #c3cad3 !important; }
}
.bfcco-skin .b--ship-way__unit_active,
.bfcco-skin .b--pay-way__unit_active {
    border-color: var(--bfcco-green) !important;
    background: #f8fcf5 !important;
    box-shadow: 0 0 0 2px rgba(107, 165, 57, .12) !important;
}
.bfcco-skin .b--ship-way__unit label,
.bfcco-skin .b--pay-way__unit label {
    padding: 14px 14px !important;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.35;
}
/* вкладені пояснення всередині обраного способу */
.bfcco-skin .b--ship-way__unit_active select {
    margin: 0 14px 12px !important;
    width: calc(100% - 28px) !important;
}

/* --- права колонка --- */
.bfcco-skin .litecheckout__ab_sticky-block > .row-fluid {
    background: #fff;
    border: 1px solid var(--bfcco-line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.bfcco-skin .litecheckout__submit-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 54px;
    line-height: 1.35 !important;
    text-align: center;
    border-radius: 10px !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    letter-spacing: .1px;
    transition: filter .15s;
}
.bfcco-skin .litecheckout__submit-btn:hover { filter: brightness(.94); }

/* --- смужка товарів --- */
.bfcco-skin .bfcco-goods-strip { padding: 12px 0; }
.bfcco-skin .bfcco-gs-thumbs i { width: 36px; height: 36px; }

/* --- міста теми як чіпси --- */
.bfcco-skin .city {
    display: inline-block;
    background: #f0f2f5;
    border-radius: 999px;
    padding: 5px 12px;
    margin: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none !important;
    border-bottom: 0 !important;
    transition: background .15s;
}
.bfcco-skin .city:hover { background: #e3e7ec; }

/* --- жовті підказки теми --- */
.bfcco-skin .litecheckout__ab_steps .ty-notice,
.bfcco-skin .litecheckout__ab_steps [class*="warning"] {
    border-radius: 9px !important;
}

.bfcco-skin .bfcco-ship-more { margin-top: 2px; }

/* --- мобільні відступи --- */
@media (max-width: 767px) {
    .bfcco-skin .litecheckout__ab_steps > .row-fluid { padding: 4px 14px 14px; margin-bottom: 10px; }
    .bfcco-skin .litecheckout__ab_sticky-block > .row-fluid { padding: 14px; }
    .bfcco-skin .b--ship-way__unit label,
    .bfcco-skin .b--pay-way__unit label { padding: 14px 12px !important; }
    .bfcco-skin .litecheckout__ab_step-title { padding: 12px 0 8px !important; }
}

/* ============================================================
   БЛОК 1 — Покупець  (0.3.1)
   ============================================================ */

/* сірий фон сторінки — без нього картки не читаються як картки */
.bfcco-bg .ty-tygh-container,
.bfcco-bg .ty-tygh-content,
.bfcco-bg .ty-mainbox-container,
.bfcco-bg .container-fluid-wrapper { background: transparent !important; }
.bfcco-bg .ty-tygh { background: #f4f5f7 !important; }

/* блок входу над першою секцією */
.bfcco-skin .bfcco-login {
    display: flex; align-items: center; gap: 14px;
    background: #f7f8fa;
    border: 1px solid var(--bfcco-line);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.bfcco-skin .bfcco-login__txt { flex: 1; min-width: 0; }
.bfcco-skin .bfcco-login__t { font-size: 14.5px; line-height: 1.3; }
.bfcco-skin .bfcco-login__s { font-size: 12.5px; color: var(--bfcco-mut); margin-top: 3px; }
.bfcco-skin .bfcco-login .ty-btn,
.bfcco-skin .bfcco-login a {
    flex: none;
    background: #fff !important;
    color: var(--bfcco-green-d) !important;
    border: 1px solid var(--bfcco-line) !important;
    border-radius: 8px !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    text-transform: none !important;
}
.bfcco-skin .bfcco-login a:hover { background: #f2f5f0 !important; border-color: #c9d6bd !important; }

/* кружечок кроку — суцільний зелений */
.bfcco-skin .litecheckout__ab_step-title .litecheckout__step-num,
.bfcco-skin .litecheckout__ab_step-title > span:first-child {
    background: var(--bfcco-green) !important;
    color: #fff !important;
    border-color: var(--bfcco-green) !important;
}
/* назва кроку — темна, як у макеті */
.bfcco-skin .litecheckout__ab_step-title { color: var(--bfcco-ink) !important; }

/* підписи над полями */
.bfcco-skin .bfcco-lbl {
    display: block;
    font-size: 12.5px;
    color: var(--bfcco-mut);
    margin: 0 0 5px;
    line-height: 1.3;
}
.bfcco-skin .bfcco-lbl b { color: var(--bfcco-red); font-weight: 400; }
.bfcco-skin .bfcco-lbl i { font-style: normal; color: #9aa2ac; }

/* дві колонки замість трьох */
.bfcco-skin .bfcco-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin-top: 4px;
}
.bfcco-skin .bfcco-fields > .bfcco-fw { grid-column: 1 / -1; }
.bfcco-skin .bfcco-fields .litecheckout__field { margin-bottom: 14px !important; width: auto !important; float: none !important; }
.bfcco-skin .bfcco-hint { font-size: 12px; color: var(--bfcco-mut); margin: -8px 0 12px; }

/* жовта підказка теми — тихіше */
.bfcco-skin .litecheckout__ab_steps .ty-notice,
.bfcco-skin .litecheckout__ab_steps .notice-warning {
    border-radius: 9px !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
}

@media (max-width: 767px) {
    .bfcco-skin .bfcco-fields { grid-template-columns: 1fr; }
    .bfcco-skin .bfcco-login { padding: 12px 14px; gap: 10px; }
}

/* ============================================================
   БЛОК 1 — за фактичною розміткою (0.3.2)
   поле: <input> потім <label class="litecheckout__label">
   плейсхолдер = " ", лейбл плаваючий
   ============================================================ */

/* floating label -> статичний підпис над полем */
.bfcco-skin .bfcco-fields .litecheckout__field {
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    min-width: 0;
    float: none !important;
    margin: 0 0 14px !important;
    position: static !important;
}
.bfcco-skin .bfcco-fields .litecheckout__label {
    order: -1;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    color: var(--bfcco-mut) !important;
    background: none !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
    pointer-events: auto;
    opacity: 1 !important;
    width: auto !important;
    white-space: normal;
}
.bfcco-skin .bfcco-fields .litecheckout__input { width: 100% !important; }

/* селектор країни телефону від phone-guard */
.bfcco-skin .bfcco-fields .phone-guard-controls { order: 2; margin-top: 6px; }

/* прибираємо примусово вузькі поля теми */
.bfcco-skin .bfcco-fields .litecheckout__field--small,
.bfcco-skin .bfcco-fields .litecheckout__field--xsmall { width: auto !important; }

/* ширину сторінки лишаємо рідну */

/* ============================================================
   БЛОК 1 — правки 0.3.3
   ============================================================ */

/* 2. сітка на всю ширину колонки */
.bfcco-skin .bfcco-fields {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 18px !important;
}
.bfcco-skin .bfcco-fields > * { min-width: 0; max-width: none !important; }
.bfcco-skin .bfcco-fields .litecheckout__field,
.bfcco-skin .bfcco-fields .litecheckout__input,
.bfcco-skin .bfcco-fields .litecheckout__field--small,
.bfcco-skin .bfcco-fields .litecheckout__field--xsmall,
.bfcco-skin .bfcco-fields .litecheckout__field--full {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-basis: auto !important;
}

/* 1. зірочки: ставимо самі, чужі ховаємо */
.bfcco-skin .bfcco-fields .litecheckout__label span,
.bfcco-skin .bfcco-fields .litecheckout__label em,
.bfcco-skin .bfcco-fields .litecheckout__label b { display: none !important; }
.bfcco-skin .bfcco-fields .bfcco-req > .litecheckout__label:after {
    content: " *";
    color: var(--bfcco-red);
}
.bfcco-skin .bfcco-fields .bfcco-opt > .litecheckout__label:after { content: none !important; }

/* 4. жовта підказка — тієї ж ширини, що й поля */
.bfcco-skin .litecheckout__ab_steps .ty-notice,
.bfcco-skin .litecheckout__ab_steps .notice-warning,
.bfcco-skin .litecheckout__ab_steps .litecheckout__notice {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 2px 0 0 !important;
}

/* 5. зайвий розділювач унизу блоку */
.bfcco-skin .litecheckout__ab_steps > .row-fluid hr,
.bfcco-skin .litecheckout__ab_steps > .row-fluid > .span16 > hr,
.bfcco-skin .litecheckout__ab_steps > .row-fluid .litecheckout__divider { display: none !important; }
.bfcco-skin .litecheckout__ab_steps > .row-fluid > *:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }

/* --- 0.3.4: три поля в один ряд --- */
.bfcco-skin .bfcco-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.bfcco-skin .bfcco-fields > .bfcco-fw { grid-column: auto !important; }

@media (max-width: 1023px) {
    .bfcco-skin .bfcco-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .bfcco-skin .bfcco-fields > .bfcco-fw { grid-column: 1 / -1 !important; }
}
@media (max-width: 767px) {
    .bfcco-skin .bfcco-fields { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ПРАПОР У ПОЛІ ТЕЛЕФОНУ 0.3.9
   Чистий фон поля: жодного нового вузла і жодного обробника,
   щоб не заважати аддону checkout_phone_guard.
   Показуємо при фокусі, лишаємо, поки в полі щось є.
   ============================================================ */
.bfcco-page .phone-guard-input,
.bfcco-page input[name="user_data[phone]"] {
    transition: padding-left .15s, border-color .15s, box-shadow .15s;
}
.bfcco-page .phone-guard-input:focus,
.bfcco-page .phone-guard-input:not(:placeholder-shown),
.bfcco-page input[name="user_data[phone]"]:focus,
.bfcco-page input[name="user_data[phone]"]:not(:placeholder-shown) {
    padding-left: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cg clip-path='url(%23bfccoFlag)'%3E%3Crect width='20' height='7' fill='%230057B7'/%3E%3Crect y='7' width='20' height='7' fill='%23FFD700'/%3E%3C/g%3E%3Crect x='.5' y='.5' width='19' height='13' rx='1.5' fill='none' stroke='rgba(0,0,0,.14)'/%3E%3Cdefs%3E%3CclipPath id='bfccoFlag'%3E%3Crect width='20' height='14' rx='2'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px 14px;
}

/* ============================================================
   ДОСТАВКА І ОПЛАТА 0.4.0 — стиснення карток
   Заміряно на dev: необраний спосіб 116px, з яких лише 46px — текст.
   Решта: 14px відступу лейбла з обох боків, 20px усередині блоку
   тексту з обох боків і лого 80x40, яке задає мінімальну висоту.
   ============================================================ */
.bfcco-skin .b--ship-way__unit,
.bfcco-skin .b--pay-way__unit { margin: 0 0 8px !important; }

/* 0.4.2: селектор .b--ship-way__unit > label звідси прибрано — він був
   специфічніший за правило лівого відступу під радіокнопку і глушив його */
.bfcco-skin .b--pay-way__unit > label,
.bfcco-skin .b--pay-way__unit label { padding: 10px 12px !important; }

/* лого перевізника — менше і без власного відступу */
.bfcco-skin .b--ship-way__unit__label__logo,
.bfcco-skin .litecheckout__shipping-method__logo {
    width: 56px !important; height: 28px !important;
    margin: 0 !important; flex: none !important;
    display: flex !important; align-items: center; justify-content: center;
}
.bfcco-skin .b--ship-way__unit__label__logo img,
.bfcco-skin .litecheckout__shipping-method__logo-image {
    max-width: 56px !important; max-height: 28px !important;
    width: auto !important; height: auto !important;
    object-fit: contain; margin: 0 !important;
}

/* назва і термін в один рядок замість двох поверхів */
.bfcco-skin .b--ship-way__unit__label__text {
    padding: 0 34px 0 12px !important;
    display: flex !important; flex-wrap: wrap;
    align-items: baseline; gap: 1px 10px;
}
.bfcco-skin .litecheckout__shipping-method__title {
    font-size: 14.5px !important; line-height: 1.35 !important; margin: 0 !important;
}
.bfcco-skin .b--ship-way__unit__label__text__beside-title { margin: 0 !important; }
.bfcco-skin .litecheckout__shipping-method__delivery-time {
    font-size: 12.5px !important; line-height: 1.35 !important;
    color: var(--bfcco-mut) !important; margin: 0 !important;
}

/* обраний спосіб: селект відділення без зайвого повітря */
.bfcco-skin .b--ship-way__unit_active select,
.bfcco-skin .b--ship-way__unit_active .litecheckout__field {
    margin: 0 12px 10px !important;
    width: calc(100% - 24px) !important;
}
.bfcco-skin .b--ship-way__unit_active select { min-height: 42px; }

/* оплата: та сама щільність */
.bfcco-skin .b--pay-way__unit label { font-size: 14.5px; line-height: 1.35; }
.bfcco-skin .b--pay-way__unit .litecheckout__payment-method__description,
.bfcco-skin .b--pay-way__unit p { margin: 2px 0 0 !important; font-size: 12.5px; }

@media (max-width: 767px) {
    .bfcco-skin .b--ship-way__unit__label,
    .bfcco-skin .b--pay-way__unit label { padding: 9px 10px !important; }
    .bfcco-skin .b--ship-way__unit__label__logo,
    .bfcco-skin .litecheckout__shipping-method__logo { width: 44px !important; height: 24px !important; }
    .bfcco-skin .b--ship-way__unit__label__logo img,
    .bfcco-skin .litecheckout__shipping-method__logo-image { max-width: 44px !important; max-height: 24px !important; }
    .bfcco-skin .b--ship-way__unit__label__text { padding: 0 28px 0 10px !important; }
    .bfcco-skin .litecheckout__shipping-method__title { font-size: 14px !important; }
}

/* ============================================================
   0.4.1
   ============================================================ */

/* Позиція без знижки з'їжджала праворуч: <li> у теми — flex-контейнер,
   а наш рядок як flex-item брав ширину по вмісту. Без старої ціни й
   бейджа вміст вужчий, і рядок притискало до правого краю. */
.bfcco-page .bfcco-goods .ty-order-products__item { display: block !important; }
.bfcco-page .bfcco-gi { width: 100%; }

/* --- доставка: прибрати порожнечу і зайві дані --- */

/* 34px відступу зверху і стільки ж знизу від теми: список способів
   висів посеред картки. Плюс 20px від обгортки кроку. */
.bfcco-skin .b--ship-way { margin: 8px 0 0 !important; }
.bfcco-page .litecheckout__step-delivery,
.bfcco-page .litecheckout__step-payment { padding-bottom: 0 !important; }
.bfcco-skin .litecheckout__ab_steps > .row-fluid { padding-bottom: 10px; }

/* графік роботи відділення, ліміт ваги і примітка про час відправлення —
   це довідка, а не рішення покупця. У чекауті вона тільки додає висоти
   і смикає сторінку при кожній зміні способу. */
/* 0.4.8: ховаємо лише довідкові блоки. Той самий .litecheckout__group
   у кур'єрській доставці містить обов'язкові поля адреси —
   ab__np_address[street], [house], [flat] — і сховати його означало
   зробити замовлення кур'єром неможливим. */
.bfcco-page .b--ship-way__unit__details .litecheckout__group:not(:has(input, select, textarea)) {
    display: none !important;
}

/* 0.9.1: опис способу доставки повертаємо. Я ховав його разом із
   рештою довідкових блоків, але саме в нього магазин пише важливе —
   графік відправлень, час відсічки. Лишаємо, тільки дрібнішим, щоб
   він не змагався за увагу з назвою й ціною. */
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content {
    display: block !important;
    /* той самий кегль, що й в описів способів оплати — 13px/1.45 */
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #4b5563 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content p {
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content p + p {
    margin-top: 5px !important;
}

/* Кегль задавався контейнеру в розрахунку на успадкування, і для Нової
   пошти це працювало — її текст лежить прямо в `.ty-wysiwyg-content`.
   А поштомат і Rozetka загорнуті в `div.info-note`, у якої власний
   розмір від теми: успадковувати нема чого, вона його перебиває.
   Заміряно на дев:

       відділення Нова пошта   13px / 18.85px
       поштомат Нова пошта     15px / 21.75px
       відділення Rozetka      15px / 21.75px
       жовта плашка (b)        14px / 17.5px

   Тому не покладаємось на успадкування, а вмикаємо його явно всередині
   опису. Вибір відділення сюди не потрапляє — select2 живе поза
   `.ty-wysiwyg-content`. */
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content *,
body #litecheckout_form .b--pay-way__unit__details .ty-wysiwyg-content * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* А описи способів оплати взагалі не мали `.ty-wysiwyg-content` —
   там своя обгортка `.litecheckout__payment-instruction > .payment-box`.
   Тому всі правила вище їх просто не бачили, і опис оплати лишався
   більшим за опис доставки. Заміряно:

       опис доставки            13px / 18.85px
       опис оплати (p)          15px / 21px
       плашка в оплаті (strong) 14px / 17.5px

   Задаємо кегль обгортці й вмикаємо успадкування всередині. */
/* 0.9.25: тема пише цей клас і в однині, і в множині —
   «Онлайн оплата» живе в .litecheckout__payment-instructions.
   Тримаємо обидва написання. */
body #litecheckout_form .b--pay-way__unit__details .litecheckout__payment-instruction,
body #litecheckout_form .b--pay-way__unit__details .litecheckout__payment-instructions,
body #litecheckout_form .b--pay-way__unit__details .payment-box {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #4b5563 !important;
}
body #litecheckout_form .b--pay-way__unit__details .litecheckout__payment-instruction *,
body #litecheckout_form .b--pay-way__unit__details .litecheckout__payment-instructions *,
body #litecheckout_form .b--pay-way__unit__details .payment-box * {
    font-size: inherit !important;
    line-height: inherit !important;
}
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content strong,
body #litecheckout_form .b--ship-way__unit__details .ty-wysiwyg-content b {
    color: var(--bfcco-ink, #1f2933) !important;
    font-weight: 600 !important;
}
.bfcco-skin .b--ship-way__unit__details { padding: 0 12px !important; }
.bfcco-skin .b--ship-way__unit__details__in { padding: 0 0 10px !important; }
.bfcco-skin .b--ship-way__unit__details .litecheckout__container { margin: 0 !important; }

/* радіокнопка ліворуч, як у макеті */
.bfcco-skin .b--ship-way__unit__label { position: relative; padding-left: 40px !important; }
.bfcco-skin .b--ship-way__unit__label__text { padding: 0 0 0 12px !important; }
.bfcco-skin .b--ship-way__unit__label__text__pseudo-radio {
    position: absolute !important;
    left: 12px; top: 50%; transform: translateY(-50%);
    margin: 0 !important;
}
.bfcco-skin .b--ship-way__unit_active .b--ship-way__unit__label__text__pseudo-radio { top: 24px; }

@media (max-width: 767px) {
    /* 60px відступу обгортки з'їдають третину екрана */
    .bfcco-page .litecheckout__step-delivery > .litecheckout__container,
    .bfcco-page .litecheckout__step-delivery > .b--ship-way { padding-left: 0 !important; }
    .bfcco-skin .b--ship-way__unit__label { padding-left: 36px !important; }
    .bfcco-skin .b--ship-way__unit__label__text__pseudo-radio { left: 10px; }
}

/* ============================================================
   ДОСТАВКА 0.4.2 — під префіксом #litecheckout_form
   Тема має правила виду .b--ship-way_mode_radio-list .…__logo,
   і змагатися з ними списками класів безглуздо: id б'є все.
   ============================================================ */

/* лейбл: місце ліворуч під радіокнопку, лого поруч */
#litecheckout_form .b--ship-way__unit__label {
    position: relative;
    padding: 10px 12px 10px 44px !important;
    align-items: center;
    /* тема тримає min-height 74px, хоча вміст займає 57 */
    min-height: 0 !important;
}
#litecheckout_form .b--ship-way__unit__label__logo,
#litecheckout_form .litecheckout__shipping-method__logo {
    width: 28px !important; height: 28px !important;
    min-width: 28px !important; flex: 0 0 28px !important;
    margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
}
#litecheckout_form .b--ship-way__unit__label__logo img {
    max-width: 28px !important; max-height: 28px !important;
    width: auto !important; height: auto !important; object-fit: contain;
}

/* радіокнопка по центру рядка — автополями, без хардкоду top */
#litecheckout_form .b--ship-way__unit__label__text__pseudo-radio {
    position: absolute !important;
    left: 12px; top: 0; bottom: 0; margin: auto 0 !important;
    transform: none !important;
}

/* назва і термін ліворуч стовпчиком, ціна праворуч */
#litecheckout_form .b--ship-way__unit__label__text {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 0 0 0 12px !important;
}
#litecheckout_form .litecheckout__shipping-method__title,
#litecheckout_form .b--ship-way__unit__label__text__beside-title { grid-column: 1; }
#litecheckout_form .bfcco-ship-price {
    grid-column: 2; grid-row: 1 / span 2; justify-self: end;
    font-size: 15px; font-weight: 600; white-space: nowrap;
}

/* селект відділення не притиснутий до назви */
#litecheckout_form .b--ship-way__unit__details__in { padding: 8px 0 10px !important; }

/* Віджети вибору відділення живуть за власними правилами: карта Укрпошти,
   пошук, список. Наші стилі полів там усе ламають — знімаємо їх. */
#litecheckout_form .pickup input,
#litecheckout_form .pickup select,
#litecheckout_form [class*="pickup__"] input,
#litecheckout_form .ty-checkout-select-store__map-full-div input,
#litecheckout_form .js-pickup-search-input {
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}
#litecheckout_form .ty-checkout-select-store__map-full-div,
#litecheckout_form .pickup__map-wrapper,
#litecheckout_form .pickup__map-container { max-width: 100% !important; }

@media (max-width: 767px) {
    #litecheckout_form .b--ship-way__unit__label { padding-left: 40px !important; }
    #litecheckout_form .b--ship-way__unit__label__text__pseudo-radio { left: 10px; }
    #litecheckout_form .bfcco-ship-price { font-size: 14.5px; }
}

/* ============================================================
   0.4.3
   ============================================================ */

/* 1. Порожнеча в картках: відступи контейнера деталей у 0.4.2 діяли й на
   згорнутих способах, у яких деталі порожні. 20px під кожним із семи. */
#litecheckout_form .b--ship-way__unit__details__in { padding: 0 !important; }
#litecheckout_form .b--ship-way__unit_active .b--ship-way__unit__details__in {
    padding: 8px 0 10px !important;
}
#litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active) .b--ship-way__unit__details {
    display: none !important;
}

/* Заслінка на описи, поки покупець не обрав сам.
   Знімати `checked` й клас `_active` виявилось мало: CS-Cart віддає
   форму серверно обраного способу вже розгорнутою, і блок `__details`
   не залежить ані від радіокнопки, ані від класу — заміряно на дев:
   перший спосіб оплати checked=false, active=false, а display=block
   і висота 122px. Тому ховаємо описи класом на <html>: він живе рівно
   до першого кліку покупця і знімається в ту саму мить, не чекаючи
   на перезбірку. */
html.bfcco-pay-unchosen #litecheckout_form .b--pay-way__unit__details,
html.bfcco-ship-unchosen #litecheckout_form .b--ship-way__unit__details {
    display: none !important;
}

/* У доставки опис прив'язаний до активної картки, а в оплати — ні:
   заміряно, що після кліку в документі один розгорнутий опис при нулі
   активних карток, тобто відкритий той, який вважає активним сервер, а
   не той, який щойно обрали. Секунду видно чужий опис, потім приходить
   відповідь і опис міняється — це і є ривок на Safari.
   Прив'язуємо опис оплати до тієї самої активної картки, що й у
   доставки. Далі позначку переставляє `pickNow()` одразу по кліку. */
/* знято при відкаті: опис оплати показує тема, як показувала до 0.9.13 */

/* Опис обраного способу приїжджає з сервера приблизно через секунду після
   кліку — розібрано по кадрах відео:

       кадр 95   картка вже зелена, опису під нею немає
       кадр 98   під карткою з'явився опис, усе нижче з'їхало

   Вгадати його висоту наперед не можна: ми цей опис ще жодного разу не
   бачили. Тобто саме зростання блоку не прибрати — сервер віддає вміст
   тоді, коли віддає. Але секундна пауза відв'язує рух від кліку, і тому
   він читається як глітч, а не як розкриття.
   Домальовуємо зв'язок: опис не з'являється миттєво, а розгортається за
   0.18 с. Тоді око бачить розкриття, а не ривок. Сам зсув той самий. */
/* знято при відкаті: опис оплати показує тема, як показувала до 0.9.13 */
/* 0.9.26: анімацію розкриття прибрано остаточно на прохання магазину —
   опис з'являється одразу, без розгортання */

/* 9. Доставка й оплата в тій самій коробці, що й контакти.
   У «Покупця» тема тримає padding-left 60px. Спроба підігнати числами
   зсунула заголовок і кружечок кроку на 19px — беремо рівно те саме
   значення, що й у першій секції, і нічого не вигадуємо. */
#litecheckout_form .litecheckout__step-delivery > .litecheckout__container,
#litecheckout_form .litecheckout__step-payment > .litecheckout__container {
    padding-left: 60px !important;
    padding-right: 0 !important;
}
/* списки способів мають власні 4.8px усередині — компенсуємо, щоб краї
   лягли рівно на межі полів «Покупця»: 532 і 1364 */
#litecheckout_form .litecheckout__step-delivery > .b--ship-way,
#litecheckout_form .litecheckout__step-payment > .b--pay-way {
    padding-left: 65px !important;
    padding-right: 5px !important;
}

/* поле міста в тій самій формі, що й картки способів */
#litecheckout_form .cm-abt--ut2-select-city input[type="text"],
#litecheckout_form .cm-abt--ut2-select-city input[type="search"] {
    border-radius: 11px !important;
    border-color: var(--bfcco-line) !important;
}

/* 3. Заголовки кроків: 24px вагою 900 — це рівень заголовка сторінки */
#litecheckout_form .litecheckout__ab_step-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 10px 0 8px !important;
    margin: 0 !important;
}
#litecheckout_form .litecheckout__ab_step-title:before,
#litecheckout_form .litecheckout__step-num,
#litecheckout_form .litecheckout__ab_step-title > span:first-child {
    width: 26px !important; height: 26px !important;
    min-width: 26px !important;
    font-size: 13px !important; line-height: 26px !important;
    margin-right: 10px !important;
}
.bfcco-page .bfcco-sumbar { padding: 11px 0; gap: 9px; }
.bfcco-page .bfcco-sumbar__tick { width: 18px; height: 18px; font-size: 10px; }
.bfcco-page .bfcco-sumbar__t { font-size: 12px; }
.bfcco-page .bfcco-sumbar__v { font-size: 13.5px; }
.bfcco-page .bfcco-sumbar__edit { font-size: 13px; }

/* 4. Поле пошуку Укрпошти вилазило з колонки списку */
#litecheckout_form .js-pickup-search-input,
#litecheckout_form .pickup__offices-wrapper input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#litecheckout_form .pickup__offices-wrapper { overflow: hidden; }

/* ============================================================
   0.4.4 — Укрпошта без карти
   Карта займала 500px, була головним внеском у стрибок сторінки
   і тягла за собою дві колонки, які ніяк не вирівнювались.
   Радіокнопки відділень лишаються рідними — нічого не дублюємо.
   ============================================================ */
#litecheckout_form .pickup__map-wrapper,
#litecheckout_form .ty-checkout-select-store__map { display: none !important; }

#litecheckout_form .ty-checkout-select-store__map-full-div {
    display: block !important;
    border: 0 !important;
    background: none !important;
}
#litecheckout_form .pickup__offices-wrapper,
#litecheckout_form .ty-checkout-select-store {
    width: 100% !important; max-width: 100% !important;
    float: none !important; border: 0 !important; background: none !important;
}
/* Обгортка тримала фіксовані 502px під розмір карти — звідси величезна
   порожнеча під списком з одного відділення. Логотип UKRPOSHTA намальовано
   фоном цієї ж обгортки, він уже є в шапці способу. */
#litecheckout_form .ty-checkout-select-store__map-full-div,
#litecheckout_form .pickup__offices-wrapper,
#litecheckout_form .ty-checkout-select-store {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    background-image: none !important;
    padding-top: 0 !important;
}
#litecheckout_form .pickup__offices-wrapper > img,
#litecheckout_form .pickup__offices-wrapper > a > img,
#litecheckout_form .pickup__offices-wrapper .pickup__logo { display: none !important; }

/* пошук одразу вгорі, під ним список */
#litecheckout_form .pickup__search { margin: 0 !important; padding: 0 !important; }

/* Було 186px — на екрані вміщалось три відділення, і покупець гортав
   довгий список у крихітному віконці. Піднімаємо на 35%, до 252px:
   це приблизно сім рядків.
   body на початку — бо правило теми має рівну вагу, а після переносу
   наших стилів у <head> воно застосовується пізніше і вигравало. */
body #litecheckout_form .pickup__offices-wrapper .litecheckout__fields-row,
body #litecheckout_form #pickup_office_list {
    height: auto !important;
    max-height: 252px !important;
    overflow-y: auto !important;
    margin-top: 8px !important;
    border: 1px solid var(--bfcco-line);
    border-radius: 8px;
}
#litecheckout_form .ab-up-post-office-item {
    padding: 9px 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f2f4;
}
#litecheckout_form .ab-up-post-office-item:last-child { border-bottom: 0; }

/* відступ над селектом відділення був 8px проти 10px знизу */
#litecheckout_form .b--ship-way__unit_active .b--ship-way__unit__details__in {
    padding: 14px 0 10px !important;
}

/* ============================================================
   0.4.6
   ============================================================ */

/* Логотип UKRPOSHTA виявився псевдоелементом ::before самої обгортки —
   фон ukrposhta-logo-w.png розміром 806x50. Саме тому його не бачив
   жоден пошук по вузлах: псевдоелементи в DOM не існують.
   Обгорток дві — мобільна й десктопна, правило працює для обох. */
#litecheckout_form .pickup__offices-wrapper:before {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
}
#litecheckout_form .pickup__offices-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Єдине заокруглення: секція 12, усе всередині 11 */
#litecheckout_form .b--ship-way__unit,
#litecheckout_form .b--pay-way__unit,
#litecheckout_form .pickup__offices-wrapper .litecheckout__fields-row,
#litecheckout_form .js-pickup-search-input,
#litecheckout_form .cm-abt--ut2-select-city input[type="text"],
#litecheckout_form .cm-abt--ut2-select-city input[type="search"],
#litecheckout_form .select2-selection,
#litecheckout_form .b--ship-way__unit_active select {
    border-radius: 11px !important;
}

/* ============================================================
   0.4.8
   ============================================================ */

/* Обгортка списку відділень лишилася з часів карти і має margin 18px
   згори і знизу. Разом із 14/10 у деталях це давало 90px між назвою
   способу і першим відділенням. */
#litecheckout_form .ty-checkout-select-store__map-full-div {
    margin: 0 !important;
}
#litecheckout_form .b--ship-way__unit_active .b--ship-way__unit__details__in {
    padding: 10px 0 !important;
}

/* місто через кому відділення просто в шапці кроку */
.bfcco-page .bfcco-step-sub {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--bfcco-mut);
    line-height: 1.35;
    margin-top: 3px;
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   0.4.9
   ============================================================ */

/* підзаголовок кроку прибрано на прохання */
.bfcco-page .bfcco-step-sub { display: none !important; }

/* --- адреса кур'єра в один рядок: вулиця, будинок, квартира --- */
#litecheckout_form .b--ship-way__unit__details .litecheckout__group:has(input) {
    display: grid !important;
    grid-template-columns: 7fr 1.6fr 1.6fr;
    gap: 0 10px;
    align-items: start;
}
#litecheckout_form .b--ship-way__unit__details .litecheckout__field {
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
    position: static !important;
}
/* плаваючий підпис теми — у статичний над полем */
#litecheckout_form .b--ship-way__unit__details .litecheckout__field > .litecheckout__label {
    order: -1;
    position: static !important;
    transform: none !important;
    top: auto !important; left: auto !important;
    width: auto !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    color: var(--bfcco-mut) !important;
    background: none !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
    opacity: 1 !important;
    white-space: nowrap;
}
#litecheckout_form .b--ship-way__unit__details .litecheckout__input { width: 100% !important; }

/* Текст у полях кур'єрської адреси лежав на дні поля. Причина не у
   вирівнюванні, а в несиметричних відступах від теми: заміряно
   padding-top 14px проти padding-bottom 2px при висоті поля 50px —
   рядок опинявся на шість пікселів нижче середини. Вирівнюємо відступи,
   висота не змінюється: box-sizing тут border-box. */
/* Ловимо за класом, а не за типом. Перша спроба чіплялась до
   `input[type="text"]` — і повз: заміряно, що в будинку й квартири
   атрибута `type` у розмітці немає взагалі. Браузер вважає їх
   текстовими, властивість `input.type` віддає "text", а селектор за
   атрибутом їх не бачить. Тому вирівнялась тільки вулиця, у якої
   `type="search"` прописано явно:

       вулиця   padding-top 8px    ← правило спрацювало
       будинок  padding-top 14px   ← атрибута немає, правило повз
       квартира padding-top 7px    ← те саме

   Клас `litecheckout__input` є в усіх трьох. Заразом знімаємо службове
   оформлення поля пошуку: у Safari воно рахує висоту інакше, ніж
   звичайне текстове, і вулиця стояла б вище за сусідів. */
body #litecheckout_form .b--ship-way__unit__details input.litecheckout__input {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 50px !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: normal !important;
}
/* службовий хрестик очищення в полі пошуку Safari з'їдає праву частину */
body #litecheckout_form .b--ship-way__unit__details input[type="search"]::-webkit-search-decoration,
body #litecheckout_form .b--ship-way__unit__details input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 767px) {
    #litecheckout_form .b--ship-way__unit__details .litecheckout__group:has(input) {
        grid-template-columns: 1fr 1fr;
    }
    #litecheckout_form .b--ship-way__unit__details .litecheckout__field:first-child {
        grid-column: 1 / -1;
    }
}

/* --- випадаючі списки: міста і відділення --- */
/* Малюються поза формою, тому без префікса #litecheckout_form */
/* .litecheckout__autocomplete-dropdown завжди присутній у розмітці.
   Рамка й поля на ньому давали видиму смужку 817x12 навіть коли
   підказок немає, а overflow:hidden обрізав сам список.
   Тому оформлюємо не його, а те, що він показує. */
.litecheckout__autocomplete-dropdown {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.litecheckout__autocomplete-dropdown > *,
.ui-autocomplete,
.select2-dropdown {
    border: 1px solid var(--bfcco-line, #e5e7eb) !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .12) !important;
    padding: 5px !important;
    background: #fff !important;
    overflow: hidden;
}
.litecheckout__autocomplete-dropdown li,
.ui-autocomplete li,
.ui-autocomplete .ui-menu-item-wrapper,
.select2-results__option {
    border: 0 !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    background: #fff !important;
    color: #1f2328 !important;
    margin: 0 !important;
}
.litecheckout__autocomplete-dropdown li:hover,
.ui-autocomplete li:hover,
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background: #f2f5f0 !important;
    color: var(--bfcco-green-d, #5a8f2f) !important;
    border: 0 !important;
    outline: 0 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #f2f5f0 !important;
    color: #5a8f2f !important;
}
.select2-search__field {
    border: 1px solid var(--bfcco-line, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
}

/* --- список відділень: нижчий і дрібніший --- */
#litecheckout_form .pickup__offices-wrapper .litecheckout__fields-row {
    max-height: 152px !important;
}
#litecheckout_form .ab-up-post-office-item {
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
#litecheckout_form .ab-up-post-office-item .ty-one-store__label { font-size: 13px !important; }
#litecheckout_form .ab-up-post-office-item:hover { background: #f7faf4 !important; }

/* --- 0.4.10: місто в стилі карток способів, нижчі списки --- */
#litecheckout_form .cm-abt--ut2-select-city input[type="text"],
#litecheckout_form .cm-abt--ut2-select-city input[type="search"],
#litecheckout_form .litecheckout__input--selectable {
    border: 1px solid var(--bfcco-line) !important;
    border-radius: 11px !important;
    min-height: 50px !important;
    font-size: 15px !important;
    background: #fff !important;
}
#litecheckout_form .cm-abt--ut2-select-city input:focus {
    border-color: var(--bfcco-green) !important;
    box-shadow: 0 0 0 3px rgba(107, 165, 57, .16) !important;
}
#litecheckout_form .pickup__offices-wrapper .litecheckout__fields-row {
    max-height: 130px !important;
}
.select2-results__options { max-height: 200px !important; }

/* --- 0.5.0: безкоштовна доставка і власні бейджі --- */

/* три колонки: назва, бейдж, ціна */
#litecheckout_form .b--ship-way__unit__label__text {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
}
#litecheckout_form .bfcco-ship-badge {
    grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
    background: #eef7e6; color: #4d7c1f;
    border-radius: 6px; padding: 3px 8px;
    font-size: 12px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; margin-right: 10px;
}
#litecheckout_form .bfcco-ship-price {
    grid-column: 3; grid-row: 1 / span 2; justify-self: end;
}
/* «безкоштовно» тепер стоїть праворуч на місці ціни */
#litecheckout_form .bfcco-ship-price.bfcco-ship-free {
    background: #eef7e6; color: #4d7c1f;
    border-radius: 6px; padding: 4px 9px;
    font-size: 13px; font-weight: 600; line-height: 1.25;
}

/* An unknown carrier quote must not look like a free-delivery benefit. */
#litecheckout_form .bfcco-ship-price.bfcco-ship-unquoted {
    max-width: 156px; white-space: normal; text-align: right;
    color: #6b7280; font-size: 12px; font-weight: 400; line-height: 1.3;
}
#litecheckout_form #bfcco_ship_free .bfcco-ship-unquoted {
    white-space: normal; color: #6b7280; font-weight: 400;
}

@media (max-width: 767px) {
    #litecheckout_form .bfcco-ship-price.bfcco-ship-unquoted { max-width: 112px; }
    #litecheckout_form .bfcco-ship-badge { font-size: 11px; padding: 2px 6px; margin-right: 6px; }
    #litecheckout_form .bfcco-ship-price.bfcco-ship-free { font-size: 12px; padding: 3px 7px; }
}

/* --- 0.5.0: пропуски на кутах обраного способу ---
   Лейбл мав радіус 6px і власний темніший фон, картка — 11px і світліший.
   На кутах світліший фон визирав з-під темнішого. Радіуси зводимо. */
#litecheckout_form .b--ship-way__unit__label,
#litecheckout_form .b--pay-way__unit > label {
    border-radius: 10px !important;
}
#litecheckout_form .b--ship-way__unit_active .b--ship-way__unit__label,
#litecheckout_form .b--pay-way__unit_active > label {
    border-radius: 10px 10px 0 0 !important;
}
#litecheckout_form .b--ship-way__unit_active .b--ship-way__unit__details {
    border-radius: 0 0 10px 10px !important;
}
/* селект відділення вилазив на 12px праворуч за свій контейнер */
#litecheckout_form .b--ship-way__unit_active select,
#litecheckout_form .b--ship-way__unit_active .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
   0.5.1 — оплата в стилі доставки + степер
   ============================================================ */

/* лого способу оплати не потрібне */
#litecheckout_form .b--pay-way__unit__label__logo,
#litecheckout_form .litecheckout__payment-method__logo { display: none !important; }

#litecheckout_form .b--pay-way__unit { margin: 0 0 8px !important; }
#litecheckout_form .b--pay-way__unit > label {
    position: relative;
    padding: 10px 12px 10px 44px !important;
    min-height: 0 !important;
    align-items: center;
    border-radius: 10px !important;
}
#litecheckout_form .b--pay-way__unit_active > label { border-radius: 10px 10px 0 0 !important; }
#litecheckout_form .b--pay-way__unit__label__text__pseudo-radio {
    position: absolute !important;
    left: 12px; top: 0; bottom: 0; margin: auto 0 !important;
    transform: none !important;
}
#litecheckout_form .b--pay-way__unit__label__text {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 0 0 0 12px !important;
}
#litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__title {
    font-size: 15px !important; font-weight: 600 !important;
    line-height: 1.35 !important; margin: 0 !important;
}
#litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__delivery-time {
    font-size: 13px !important; color: var(--bfcco-mut) !important;
    line-height: 1.35 !important; margin: 0 !important;
}
#litecheckout_form .b--pay-way__unit__details { padding: 0 12px !important; }
#litecheckout_form .b--pay-way__unit__details__in { padding: 0 !important; }
#litecheckout_form .b--pay-way__unit_active .b--pay-way__unit__details__in { padding: 10px 0 !important; }

/* 0.5.3: опис способу лишається видимим — його прибирання було зайвим.
   Компактний рядок комісії просто стає під ним. */
/* 0.6.2: комісія переїхала в саму картку, праворуч, на місце опису */
#litecheckout_form .bfcco-pay-fee {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    margin-left: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: #a8620a;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
}
/* коли є комісія, опис праворуч поступається їй місцем */
#litecheckout_form .bfcco-has-fee .b--pay-way__unit__label__text__beside-title {
    display: none !important;
}

/* обраний спосіб сірим рядком під заголовком кроку */
.bfcco-page .bfcco-pay-sub {
    display: block;
    font-size: 13px; font-weight: 400;
    color: var(--bfcco-mut);
    line-height: 1.35; margin-top: 3px;
    text-transform: none; letter-spacing: 0;
}

/* --- степер у стилі скріна: без рамки, світла підкладка --- */
.bfcco-page .bfcco-qty {
    border: 0 !important;
    background: #f4f5f7 !important;
    border-radius: 9px;
    padding: 2px;
}
.bfcco-page .bfcco-qty-b { color: #4b5563; font-size: 17px; }
.bfcco-page .bfcco-qty-v { color: #1f2328; }

/* ============================================================
   0.5.2
   ============================================================ */

/* бейдж знижки стоїть перед сумою */
.bfcco-page .bfcco-gi-badge { margin-left: 0; margin-right: 6px; }

/* підпис під заголовком кроку — не кружечок номера */
.bfcco-page .litecheckout__ab_step-title .bfcco-pay-sub,
.bfcco-skin .litecheckout__ab_step-title .bfcco-pay-sub {
    background: none !important;
    color: var(--bfcco-mut) !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

/* центр степера білий */
.bfcco-page .bfcco-qty-v {
    background: #fff;
    border-radius: 7px;
    height: 26px;
    line-height: 26px;
    display: inline-block;
}

/* Порожня рамка під обраним способом: деталі є в розмітці завжди,
   і навіть без вмісту давали смужку у 20px від власних відступів. */
/* Історія повчальна. Спершу ховали через :not(:has(перелік обгорток)) —
   і перелік двічі промахувався: у 0.9.23 порожню рамку повернули
   приховані службові поля, у 0.9.24 — опис «Онлайн оплати», що лежить
   у .litecheckout__payment-instructions (множина!), якої в переліку не
   було, і справжній опис ховався разом із порожніми. Вгадувати обгортки
   теми — програшна гра. Тепер порожнечу визначає JS по суті (є текст або
   живе поле — див. markBlankDetails у script.js) і позначає класом ще до
   того, як браузер намалює кадр. */
#litecheckout_form .b--pay-way__unit__details.bfcco-det-blank,
#litecheckout_form .b--ship-way__unit__details.bfcco-det-blank {
    display: none !important;
}
/* тоді лейбл лишається з повним заокругленням */
#litecheckout_form .b--pay-way__unit_active:has(> .b--pay-way__unit__details.bfcco-det-blank) > label,
#litecheckout_form .b--ship-way__unit_active:has(.b--ship-way__unit__details.bfcco-det-blank) .b--ship-way__unit__label {
    border-radius: 10px !important;
}

/* ============================================================
   0.5.3 — опис способу оплати щільніший, підпис у заголовку прибрано
   ============================================================ */
.bfcco-page .bfcco-pay-sub { display: none !important; }

#litecheckout_form .b--pay-way__unit_active .b--pay-way__unit__details__in {
    padding: 2px 0 8px !important;
}
#litecheckout_form .b--pay-way__unit__details .ty-wysiwyg-content,
#litecheckout_form .b--pay-way__unit__details .ty-wysiwyg-content p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #4b5563;
}
#litecheckout_form .b--pay-way__unit__details .ty-wysiwyg-content p + p { margin-top: 5px !important; }


/* ============================================================
   0.5.4 — бейджі способів оплати
   ============================================================ */
#litecheckout_form .b--pay-way__unit__label__text {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
}
#litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__title { grid-column: 1; }
#litecheckout_form .b--pay-way__unit .bfcco-ship-badge { grid-column: 2; margin-right: 0; }
#litecheckout_form .b--pay-way__unit .b--pay-way__unit__label__text__beside-title {
    grid-column: 3; justify-self: end; margin-left: 10px;
}

/* 0.9.78: leave room for the payment title in the narrow two-column checkout. */
@media (min-width: 768px) and (max-width: 1100px) {
    body #litecheckout_form .b--pay-way__unit__label__text {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    body #litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0;
    }
    body #litecheckout_form .b--pay-way__unit .bfcco-ship-badge {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
    }
    body #litecheckout_form .b--pay-way__unit .b--pay-way__unit__label__text__beside-title,
    body #litecheckout_form .b--pay-way__unit .bfcco-pay-fee {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        min-width: 0;
        margin: 3px 0 0 !important;
        text-align: left !important;
        white-space: normal;
    }
}

/* ============================================================
   0.6.0 — комісія в модулі, дрібніші радіокнопки
   ============================================================ */

/* круглі перемикачі способів були 24px — робимо 20 */
#litecheckout_form .b--ship-way__unit__label__text__pseudo-radio,
#litecheckout_form .b--pay-way__unit__label__text__pseudo-radio {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 2px !important;
}
#litecheckout_form .b--ship-way__unit__label__text__pseudo-radio:before,
#litecheckout_form .b--pay-way__unit__label__text__pseudo-radio:before,
#litecheckout_form .b--ship-way__unit__label__text__pseudo-radio > *,
#litecheckout_form .b--pay-way__unit__label__text__pseudo-radio > * {
    width: 10px !important;
    height: 10px !important;
}
#litecheckout_form .b--ship-way__unit__label,
#litecheckout_form .b--pay-way__unit > label { padding-left: 40px !important; }

/* наш рядок комісії у підсумку — рідною розміткою таблиці */
#bfcco_fee_row td { color: #6b7280; }

/* ============================================================
   0.6.1 — службова підказка тихим текстом
   Була жовтою карткою 833x42 з рамкою, тобто голоснішою за самі поля.
   Жовтий лишаємо там, де він щось означає — «Відправлення: завтра».
   ============================================================ */
#litecheckout_form .notice-box {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: #8a8a8a !important;
}

/* --- 0.7.6: знижка на одній лінії з сумою, і весь текст по центру ---
   У 0.6.2 я вирівняв ці елементи по базовій лінії. Але у флексі базова
   лінія рахується відносно найвищого сусіда, а сусіди тут — мініатюри
   36px і кнопка 32px. Через це текст піднімало на 16px угору.
   Правильно: спільна висота рядка плюс вирівнювання по центру. */
.bfcco-page .bfcco-gs-ttl,
.bfcco-page .bfcco-gs-dot,
.bfcco-page .bfcco-gs-sum,
.bfcco-page .bfcco-gs-disc {
    align-self: center;
    line-height: 20px;
}

/* ============================================================
   0.6.3 — коментар до замовлення згорнутий
   ============================================================ */
.bfcco-page .bfcco-comment-field { display: none !important; }
.bfcco-page .bfcco-comment-field.bfcco-open { display: flex !important; }
.bfcco-page .bfcco-comment-toggle {
    display: inline-block;
    background: none; border: 0; padding: 6px 0;
    color: var(--bfcco-green-d);
    font-size: 14px; line-height: 1.35; cursor: pointer;
}
.bfcco-page .bfcco-comment-toggle:hover { text-decoration: underline; }
.bfcco-page .bfcco-comment-field.bfcco-open textarea { min-height: 96px !important; }

/* ============================================================
   0.6.4 — «Примітка покупця» прибрана, посилання жирне
   Заголовок секції і підпис поля дублювали одне одного і разом
   давали 53px над полем, яке й так згорнуте. Правило прив'язане
   до секції з коментарем, тому інші .ty-mainbox-title на сторінці,
   зокрема «Сума замовлення», лишаються недоторканими.
   ============================================================ */
#litecheckout_form .row-fluid:has(.bfcco-comment-field) .ty-mainbox-title { display: none !important; }
.bfcco-page .bfcco-comment-field > .litecheckout__label { display: none !important; }
.bfcco-page .bfcco-comment-toggle { font-weight: 600; }

/* ============================================================
   0.6.5 — вирівнювання коментаря і перевірка ПІБ
   ============================================================ */

/* картка коментаря: 20px нижнього поля лишалися від часів,
   коли тут був повноцінний блок із заголовком і полем */
#litecheckout_form .row-fluid:has(.bfcco-comment-toggle) .ty-mainbox-container { margin: 0 !important; }
.bfcco-skin .litecheckout__ab_steps > .row-fluid:has(.bfcco-comment-toggle) {
    padding: 2px 20px !important;
}
.bfcco-page .bfcco-comment-toggle { padding: 8px 0 !important; }

/* ім'я та прізвище */
.bfcco-page input.bfcco-invalid {
    border-color: #e0a01a !important;
    box-shadow: 0 0 0 3px rgba(224, 160, 26, .14) !important;
}
.bfcco-page .bfcco-name-hint {
    font-size: 12px;
    line-height: 1.35;
    color: #a8620a;
    margin-top: 5px;
}

/* ============================================================
   0.7.0 — права колонка, білий фон, промокод
   ============================================================ */

/* 0.7.1: сірий фон сторінки повертається — білими мають бути картки,
   а не полотно під ними. Білим у 0.7.0 я зробив помилково. */

/* Подвійні рамки: я загорнув блоки правої колонки у білі картки з рамкою,
   а всередині лишилися рідні сірі підкладки теми з власним заокругленням. */
#litecheckout_form .litecheckout__pm_sf,
#litecheckout_form .litecheckout__ab_cart {
    background: none !important;
    border-radius: 0 !important;
    border: 0 !important;
}

/* блок входу — один рядок */
.bfcco-skin .bfcco-login { padding: 10px 16px; margin-bottom: 12px; }
.bfcco-skin .bfcco-login__t { font-size: 14.5px; font-weight: 600; }
.bfcco-skin .bfcco-login__s { display: none; }

/* --- промокод --- */
#litecheckout_form .litecheckout__pm_sf a.cm-combination {
    font-weight: 600;
    color: var(--bfcco-green-d) !important;
}
#litecheckout_form .litecheckout__pm_sf a.cm-combination:before { content: '+ '; }
/* коли поле розкрите, посилання стає «Закрити» — плюс там ні до чого */
#litecheckout_form .litecheckout__pm_sf a.cm-combination.bfcco-promo-open:before { content: none; }
#litecheckout_form #coupon_code_form { margin-top: 10px; }
#litecheckout_form #coupon_code_form input[type="text"] {
    border: 1px solid var(--bfcco-line) !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    font-size: 14.5px !important;
}
#litecheckout_form #coupon_code_form .ty-btn-go,
#litecheckout_form #coupon_code_form button {
    background: var(--bfcco-green) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 11px 16px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* --- підсумок --- */
#bfcco_items_disc td,
.bfcco-disc-row td,
#bfcco_items_disc td span,
.bfcco-disc-row td span { color: var(--bfcco-red) !important; }
#bfcco_fee_row td { color: #6b7280 !important; }

/* дата відправлення з іконкою магазину */
.bfcco-truck {
    width: 24px; height: 24px;
    display: inline-block; vertical-align: -6px;
    margin-right: 2px;
}
@media (max-width: 767px) {
    .bfcco-truck { width: 22px; height: 22px; vertical-align: -5px; }
}

/* --- блок про дзвінок тихіше --- */
#litecheckout_form .litecheckout__ab_sticky-block .important,
.litecheckout__ab_sticky-block .important {
    border: 0 !important;
    border-radius: 10px !important;
    background: #f7f8fa !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    text-align: left !important;
}
.litecheckout__ab_sticky-block .important b,
.litecheckout__ab_sticky-block .important strong,
.litecheckout__ab_sticky-block .important span {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
}
.litecheckout__ab_sticky-block .checkout-block-contact { font-size: 13px; }

/* ============================================================
   0.7.1 — відкат зайвого і щільна права колонка
   ============================================================ */

/* Блок товарів стояв на 536, решта секцій на 532: обгортка теми має
   власні margin 4.8px з боків поверх відступу в 60px. */
#litecheckout_form .litecheckout__step-order-products > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Промокод: 126px картки на випадаючий список у 32px.
   Підкладка мала 20px відступів з усіх боків плюс 20 знизу. */
#litecheckout_form .litecheckout__pm_sf { padding: 0 !important; margin: 0 !important; }

/* Підсумок: кожен блок усередині мав власні 20px з боків поверх 18px
   картки — тобто 38px на край замість 18. */
#litecheckout_form .litecheckout__ab_cart > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
}
#litecheckout_form .litecheckout__ab_cart > *:last-child { padding-bottom: 0 !important; }

/* Чекбокс: прибираємо пульсацію і робимо його акуратним */
#litecheckout_form .litecheckout__ab_sticky-block input[type="checkbox"],
.litecheckout__ab_sticky-block input[type="checkbox"] {
    animation: none !important;
    transition: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* ============================================================
   0.7.2
   ============================================================ */

/* 1. Блок товарів не має номера кроку, тому його рядок вирівнюємо
   по лівій межі заголовків, а не по полях усередині секцій. */
#litecheckout_form .litecheckout__step-order-products > div { padding-left: 0 !important; }

/* 2. Промокод: поле і кнопка в один рядок з нормальними розмірами */
#litecheckout_form #coupon_code_form {
    display: flex !important;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px !important;
}
#litecheckout_form #coupon_code_form input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
}
#litecheckout_form #coupon_code_form .ty-btn-go,
#litecheckout_form #coupon_code_form button {
    flex: 0 0 auto;
    position: static !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    white-space: nowrap;
}

/* 4. комісія тим самим кольором, що й решта рядків підсумку */
#bfcco_fee_row td,
#bfcco_fee_row td span { color: inherit !important; }

/* 5. блок дати відправлення — те саме заокруглення, що й у решти */
#litecheckout_form .dispatch-highlight { border-radius: 10px !important; margin: 10px 0 !important; }

/* 6. зайвий відступ перед кнопкою замовлення */
#litecheckout_form .litecheckout__ab_cart > .ty-wysiwyg-content { padding-bottom: 0 !important; }
#litecheckout_form .litecheckout__ab_sticky-block .important { margin: 8px 0 0 !important; }
#litecheckout_form .litecheckout__submit-order,
#litecheckout_form .litecheckout__group.litecheckout__submit-order { padding-top: 12px !important; }

/* ============================================================
   0.7.4 — блок бонусів
   Був білою карткою з червоною рискою зліва, тобто читався як
   попередження. Насправді це пропозиція вигоди — робимо її зеленою.
   ============================================================ */
#litecheckout_form .ty-coupons__item {
    border: 0 !important;
    background: #f2f8ec !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    list-style: none;
    margin-bottom: 10px;
}
#litecheckout_form .ty-coupons__item .ty-strong {
    display: block;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4d7c1f !important;
    margin-bottom: 2px;
}
#litecheckout_form .ty-coupons__item a {
    font-size: 13px !important;
    color: #3f6d16 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
}
#litecheckout_form .ty-coupons__item a:hover { text-decoration: underline !important; }

/* ============================================================
   0.7.5
   ============================================================ */

/* Промокод. Справжня форма — .ty-discount-coupon, а не #coupon_code_form:
   той порожній і містить лише прихований input. Кнопка в ній позиційована
   абсолютно і лежала поверх поля. */
#litecheckout_form .ty-discount-coupon__control-group {
    display: flex !important;
    gap: 8px;
    align-items: stretch;
}
#litecheckout_form .ty-discount-coupon__control-group .ty-input-text {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    border-radius: 10px !important;
}
#litecheckout_form .ty-discount-coupon__control-group .ty-btn-go {
    position: static !important;
    flex: 0 0 auto;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    background: var(--bfcco-green) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Картка товарів мала 6px зверху і 10 знизу — вміст сидів вище центру */
.bfcco-skin .litecheckout__ab_steps > .row-fluid.bfcco-goods { padding: 0 20px !important; }
.bfcco-skin .litecheckout__ab_steps > .row-fluid.bfcco-goods-open { padding: 0 20px 10px !important; }

/* Зайві відступи в нижній частині правої колонки */
#litecheckout_form .ty-coupons__list { margin: 8px 0 0 !important; }
#litecheckout_form .responsive-table-container { margin-bottom: 8px !important; }
#litecheckout_form .litecheckout__submit-order,
#litecheckout_form .litecheckout__group.litecheckout__submit-order { padding-top: 4px !important; }

/* ============================================================
   0.7.6 — дрібні відступи і розміри
   ============================================================ */

/* зазор між бонусами і датою відправлення */
#litecheckout_form .ty-coupons__list { margin: 6px 0 0 !important; }
#litecheckout_form .ty-coupons__item { margin-bottom: 0 !important; }
#litecheckout_form .dispatch-highlight { margin: 8px 0 !important; }

/* підпис біля чекбокса про дзвінок */
#litecheckout_form .litecheckout__ab_sticky-block .checkout-block-contact,
.litecheckout__ab_sticky-block .checkout-block-contact,
.litecheckout__ab_sticky-block .checkbox-container label {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* ============================================================
   0.7.7 — обране відділення Укрпошти зеленим
   Тема підсвічує його бурштином rgba(249,189,38,.15), хоча всі інші
   обрані елементи чекауту зелені. Вирівнюємо з рештою.
   ============================================================ */
/* Індекс — головний орієнтир: відділення Укрпошти шукають саме за ним.
   Але жодної плашки під ним не треба: це просто число перед адресою.
   Моноширинні цифри і фіксована ширина колонки — щоб індекси стояли
   рівним стовпчиком і їх було зручно сканувати оком. */
body #litecheckout_form .ty-one-store__w_number {
    display: inline-block !important;
    flex: 0 0 auto;
    min-width: 46px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--bfcco-mut, #6b7280) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    font-variant-numeric: tabular-nums;
}

/* Вибір відділення був невидимий: справжню радіокнопку тема ховає
   (display: none), і єдиною ознакою лишався ледь помітний фон — люди
   не розуміли, обрано щось чи ні. Після адреси обраного відділення
   ставимо зелену галочку. */
body #litecheckout_form .ab-up-post-office-item {
    display: flex !important;
    align-items: center;
    padding: 9px 10px !important;
    border-radius: 8px;
    border-left: 0 !important;
    cursor: pointer;
}
body #litecheckout_form .ab-up-post-office-item.office__selected {
    background: rgba(107, 165, 57, .12) !important;
}
body #litecheckout_form .ab-up-post-office-item .ty-one-store__label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
body #litecheckout_form .ab-up-post-office-item .ty-one-store__name {
    font-size: 13.5px;
    line-height: 1.35;
}
/* Галочка йде одразу за назвою відділення, всередині того самого
   рядка тексту. Коли вона висіла на .ty-one-store__label, на вузькому
   екрані контейнер переносив її третім рядком і кожен пункт списку
   ставав утричі вищим. */
body #litecheckout_form .ab-up-post-office-item.office__selected .ty-one-store__name::after {
    content: '✓';
    display: inline;
    margin-left: 8px;
    color: var(--bfcco-green, #6ba539);
    font-size: 14px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   0.7.7 — промокод і бонуси одним блоком
   Тема малює їх двома окремими зеленими картками з 5px білим
   зазором між ними — на екрані це читалось як розрив лінії.
   Робимо один суцільний блок з тонким роздільником усередині.
   ------------------------------------------------------------ */
#litecheckout_form .ty-coupons__list {
    background: #f2f8ec !important;
    border-radius: 10px !important;
    overflow: hidden;
    padding: 0 !important;
}
#litecheckout_form .ty-coupons__list > .ty-coupons__item {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
#litecheckout_form .ty-coupons__list > .ty-coupons__item + .ty-coupons__item {
    border-top: 1px solid rgba(107, 165, 57, .2) !important;
}
/* залишок каретки від тултипа теми — висів окремою рискою над блоком */
#litecheckout_form .ty-coupons__list .ty-caret-info,
#litecheckout_form .ty-coupons__list .ty-caret-outer,
#litecheckout_form .ty-coupons__list .ty-caret-inner { display: none !important; }

/* ------------------------------------------------------------
   0.7.7 — повідомлення валідації
   Контейнер вибору відділення — flex з переносом, тому текст
   помилки опинявся ПЕРЕД полем, у першому рядку. Ставимо колонку
   і відправляємо помилку під поле.
   ------------------------------------------------------------ */
#litecheckout_form .object-picker__simple {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}
#litecheckout_form .object-picker__simple > .help-inline { order: 2 !important; }

/* Іконка і текст в одному flex-рядку: за абсолютним позиціюванням
   кружечок не тримався на базовій лінії і плавав по вертикалі. */
#litecheckout_form .help-inline,
.bfcco-page .bfcco-name-hint {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    float: none !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
    color: #d33a2c !important;
}
#litecheckout_form .help-inline:empty { display: none !important; }
#litecheckout_form .help-inline::before,
.bfcco-page .bfcco-name-hint::before {
    content: '!';
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d33a2c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
#litecheckout_form .cm-failed-field .litecheckout__input,
#litecheckout_form .cm-failed-field .select2-selection {
    border-color: #d33a2c !important;
}

/* зведене повідомлення біля кнопки замовлення */
#litecheckout_form .bfcco-submit-err {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px !important;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecea;
    color: #b3261e;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
}
#litecheckout_form .bfcco-submit-err::before {
    content: '!';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d33a2c;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

/* ============================================================
   0.7.8 — єдина вертикаль для всіх секцій
   Тема тримала ліворуч 60–65px службового відступу під кружечок
   з номером кроку: через це вміст «Покупця», «Доставки» й «Оплати»
   починався на 60px правіше за смужку товарів, а праві краї
   розходились ще на 5–10px. Знімаємо ці відступи — усе стає на
   ту саму лінію, що й рядки товарів.
   ============================================================ */
#litecheckout_form div.litecheckout__container.ab_step-container,
#litecheckout_form div.ab_step-container,
#litecheckout_form .litecheckout__group,
#litecheckout_form .litecheckout__item,
#litecheckout_form .b--pay-way {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#litecheckout_form div.b--ship-way.b--ship-way_mode_radio-list {
    padding-left: 0 !important;
    /* .b--ship-way__list ширший за свій контейнер рівно на 9.6px
       (компенсація ґраток теми). Гасимо це тут, інакше картки
       доставки вилазять праворуч за край картки-секції. */
    padding-right: 9.6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#litecheckout_form div.b--ship-way__in {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
}
#litecheckout_form .b--ship-way__list,
#litecheckout_form .b--pay-way__list {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Кружечок з номером кроку жив у тому службовому відступі
   (margin-left: -64px). Відступу більше немає — повертаємо
   кружечок у рядок із заголовком. */
#litecheckout_form .litecheckout__ab_step-title {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
#litecheckout_form .litecheckout__ab_step-title::before {
    flex: 0 0 auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ті самі 60px службового відступу є ще у двох обгортках теми:
   .ty-mainbox-container (блок коментаря) і .ty-wysiwyg-content
   (підказка «Замовляєте на іншу особу?»). */
#litecheckout_form .ty-wysiwyg-content,
#litecheckout_form div.ty-mainbox-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* лінк коментаря був по центру — ставимо на ту саму ліву лінію */
#litecheckout_form .bfcco-comment-toggle {
    text-align: left !important;
    width: 100% !important;
}
/* чипси міст зсувала ґраткова компенсація поля (4.8px) */
#litecheckout_form .litecheckout__field { margin-left: 0 !important; }

/* ============================================================
   0.7.9 — сторінка «замовлення прийнято»
   Штатна сторінка теми показувала заголовок «Замовлення», блок
   «Інформація щодо платежу» і три сині кнопки. Після оплати це
   зайвий шум — лишаємо саме підтвердження.
   ============================================================ */
.bfcco-complete .ty-mainbox-title,
.bfcco-complete .ty-checkout-complete__login-info,
.bfcco-complete .ty-checkout-complete__buttons,
.bfcco-complete .ty-checkout-complete__order-success a {
    display: none !important;
}

/* Без картки: сторінка й так біла, тому фон і тінь читались просто
   як зайва рамка навколо тексту. */
.bfcco-complete .ty-checkout-complete__order-success {
    max-width: 560px;
    margin: 56px auto 96px !important;
    padding: 0 20px 40px !important;
    text-align: center;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bfcco-complete .ty-checkout-complete__order-success p {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 !important;
}
.bfcco-done__t {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--bfcco-ink, #1f2933);
}
/* номер має чіплятись оком — це єдине, що покупець
   потім шукатиме в листі чи диктуватиме по телефону */
.bfcco-done__n {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--bfcco-ink, #1f2933);
}
/* тиха приписка: вона заспокоює, а не інформує — тому дрібніша */
.bfcco-done__note {
    font-size: 13.5px;
    line-height: 1.5;
    color: #7a8794;
}

.bfcco-done {
    width: 96px;
    height: 96px;
    margin: 0 auto 26px;
}
.bfcco-done svg { display: block; width: 100%; height: 100%; }
.bfcco-done__c {
    fill: rgba(107, 165, 57, .1);
    stroke: var(--bfcco-green, #6ba539);
    stroke-width: 2;
    opacity: .5;
}
.bfcco-done__v {
    fill: none;
    stroke: var(--bfcco-green, #6ba539);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: bfccoDone .5s .2s cubic-bezier(.65, 0, .45, 1) forwards;
}
@keyframes bfccoDone { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bfcco-done__v { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   0.8.2 — блок «Відправлення»
   Був єдиним у правій колонці з рамкою, шрифтом 15px і помаранчевим
   акцентом, тоді як усе поруч — 12.5–13px без рамок у зелено-сірій
   гамі. Приводимо до вигляду блоку бонусів.
   ============================================================ */
#litecheckout_form .dispatch-highlight,
.litecheckout__ab_sticky-block .dispatch-highlight {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px 8px;
    background: #f2f8ec !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #4d7c1f !important;
}
#litecheckout_form .dispatch-highlight .truck-label,
.litecheckout__ab_sticky-block .dispatch-highlight .truck-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px;
}
#litecheckout_form .dispatch-highlight strong,
.litecheckout__ab_sticky-block .dispatch-highlight strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4d7c1f !important;
}
/* дату притискаємо до правого краю — як ціни в решті рядків */
#litecheckout_form .dispatch-highlight > span:last-child,
.litecheckout__ab_sticky-block .dispatch-highlight > span:last-child {
    margin-left: auto !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bfcco-green, #6ba539) !important;
}
#litecheckout_form .dispatch-highlight .truck-icon,
.litecheckout__ab_sticky-block .dispatch-highlight .truck-icon {
    display: flex !important;
    align-items: center;
    color: var(--bfcco-green, #6ba539) !important;
}
/* inline-SVG замість жовтої картинки: бере колір із currentColor.
   Іконка широка (пропорція ~1.76:1), тому висоту лишаємо авто. */
svg.bfcco-truck {
    display: block;
    width: 22px;
    height: auto;
    flex: 0 0 auto;
    fill: currentColor;
}

/* ------------------------------------------------------------
   Заслінка над списком доставки
   Щойно поле міста змінюється, тема накриває список способів
   напівпрозорою плашкою rgba(0,0,0,.5) з написом «Введіть місто
   і область і натисніть сюди, щоб оновити вартість доставки».
   Малюється через #shipping_rates_list::after (клас
   litecheckout__overlay--active). Ціни під нею й так на місці,
   а покупця вона лякає — прибираємо. Обробник кліку лишається
   на самому контейнері, тож перерахунок працює як раніше.
   ------------------------------------------------------------ */
#litecheckout_form #shipping_rates_list::after,
#litecheckout_form .litecheckout__overlay--active::after {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------------------------
   Випадаючий список міст (jQuery UI autocomplete)
   Відступ був подвоєний: 9px/12px стояли і на li.ui-menu-item,
   і на вкладеному div.ui-menu-item-wrapper — тому рядок займав
   55px на 19px тексту. Лишаємо відступ тільки на обгортці.
   Селектори без #litecheckout_form: список рендериться в кінці
   <body>, поза формою.
   ------------------------------------------------------------ */
.ui-autocomplete.ui-menu { padding: 4px !important; }
.ui-autocomplete .ui-menu-item {
    padding: 0 !important;
    margin: 0 !important;
}
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 7px 10px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    border-radius: 8px !important;
}

/* ------------------------------------------------------------
   Вартість доставки — інформаційний рядок
   Покупець платить її перевізнику при отриманні, у підсумок вона
   не входить. Рядок лишається серед решти інформації, але під
   назвою йде дрібний підпис, хто і коли за неї платить, — інакше
   цифра читається як складова суми, і арифметика не сходиться.
   ------------------------------------------------------------ */
#litecheckout_form tr.bfcco-ship-info td { vertical-align: top !important; }

#litecheckout_form .bfcco-ship-sub {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.3;
    color: #9aa2ac;
    font-weight: 400;
}

/* ============================================================
   0.8.4
   ============================================================ */

/* Юридичний текст під кнопкою був 15px — того ж кегля, що й самі
   поля. Він потрібен, але не має важити стільки ж, скільки вибір
   покупця. */
#litecheckout_form .litecheckout__ab_cart > .ty-wysiwyg-content {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #8a93a0 !important;
}
#litecheckout_form .litecheckout__ab_cart > .ty-wysiwyg-content a {
    font-size: inherit !important;
}

@media (max-width: 767px) {
    /* --- смужка товарів --- */
    /* Кнопка «Показати всі» стояла одразу за мініатюрами, посеред
       смужки. Притискаємо її до правого краю, як у решті рядків. */
    .bfcco-page .bfcco-gs-more { margin-left: auto !important; }
    /* Кількість мініатюр тепер обмежує JS (три на телефоні), тож нічого
       ховати не треба — і «+N» рахується від реального ліміту.
       Смужка стає у два ряди: в один рядок текст, фото й кнопка на
       вузькому екрані фізично не вміщаються, і будь-яка спроба їх
       ужати закінчувалась або обрізаними фото, або накладанням тексту. */
    body .bfcco-page .bfcco-goods-strip {
        flex-wrap: wrap;
        row-gap: 9px;
    }
    body .bfcco-page .bfcco-gs-ttl,
    body .bfcco-page .bfcco-gs-sum,
    body .bfcco-page .bfcco-gs-disc,
    body .bfcco-page .bfcco-gs-dot { flex: 0 0 auto; white-space: nowrap; }

    /* Кнопка — у правий верхній кут першого ряду, мініатюри — окремим
       рядом на всю ширину. Так у них є місце на всі п'ять і «+N». */
    body .bfcco-page .bfcco-gs-more {
        order: 1;
        margin-left: auto !important;
    }
    body .bfcco-page .bfcco-gs-thumbs {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        overflow: visible !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    body .bfcco-page .bfcco-gs-rest { display: grid !important; flex: 0 0 auto; }

    /* --- назви товарів --- */
    /* Довгі назви обрізались уже на другому слові. Дрібніший кегль
       і щільніший інтерліньяж дають вмістити більше в ті самі три рядки. */
    .bfcco-page .bfcco-gi-n a {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
    }
    .bfcco-page .bfcco-gi-m {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* --- картки доставки й оплати --- */
    /* Заголовок і опис лежали в одній ґратці: колонка опису з'їдала
       ширину, і назва ламалась на три рядки. Опис відправляємо на
       власний рядок під назву — тоді назві дістається вся ширина. */
    /* Вага селектора тут навмисно висока. Наше ж десктопне правило
       (.b--pay-way__unit .b--pay-way__unit__label__text__beside-title)
       важче за коротке мобільне, і при однакових !important вигравало
       воно — опис так і лишався притиснутим праворуч. */
    body #litecheckout_form .b--pay-way__unit .b--pay-way__unit__label__text__beside-title,
    body #litecheckout_form .b--ship-way__unit .b--ship-way__unit__label__text__beside-title {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        margin: 2px 0 0 !important;
        text-align: left !important;
    }
    /* опис при наявності комісії теж показуємо — місця тепер вистачає */
    body #litecheckout_form .bfcco-has-fee .b--pay-way__unit__label__text__beside-title {
        display: block !important;
    }
    body #litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__title,
    body #litecheckout_form .b--ship-way__unit .litecheckout__shipping-method__title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        text-align: left !important;
    }
    /* Бейдж автоматично лягав у нульову колонку ґратки і накладався
       просто посеред назви — «Онлайн [знижка 2%] карткою».
       В оплаті права колонка вільна, тому бейдж іде туди: назва й опис
       вирівняні зліва, бейдж справа. У доставці праворуч уже стоїть
       ціна, тому там бейдж лишається окремим рядком під назвою. */
    /* Назву ламав не бейдж, а комісія: це окремий елемент у правій
       колонці ґратки. Відправляємо її під назву, як і опис. */
    body #litecheckout_form .b--pay-way__unit .bfcco-pay-fee {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        margin: 3px 0 0 !important;
        text-align: left !important;
    }
    body #litecheckout_form .b--pay-way__unit .bfcco-ship-badge {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
    }
    body #litecheckout_form .b--ship-way__unit .bfcco-ship-badge {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        margin: 4px 0 0 !important;
    }
}

/* мініатюри на вузьких екранах не ховаємо — показуємо три */
@media (max-width: 479px) {
    body .bfcco-page .bfcco-gs-thumbs { display: flex !important; }
    body .bfcco-page .bfcco-gs-thumbs i { width: 30px; height: 30px; }
}

/* ------------------------------------------------------------
   Підписи полів до того, як відпрацює скрипт
   Статичні підписи були прив'язані до .bfcco-skin і .bfcco-fields —
   обидва класи створює JS. Поки він не відпрацював, тема малює свої
   плаваючі лейбли, і на екрані видно порожні поля з самою зірочкою.
   На телефоні скрипт іноді не встигає до того, як запобіжник знімає
   заслінку, — тому підписи «з'являлись із затримкою».
   Ті самі правила, але прив'язані до розмітки теми, а не до наших
   класів: працюють з першого малювання.
   ------------------------------------------------------------ */
/* body на початку — навмисно. Після переносу <link> у <head> наші стилі
   вантажаться РАНІШЕ за стилі теми, тож при однаковій вазі селектора
   виграє тема. Зайвий елемент у селекторі повертає нам перевагу
   незалежно від порядку завантаження. */
body #litecheckout_form .litecheckout__field--input {
    display: flex !important;
    flex-direction: column;
    position: static !important;
}
body #litecheckout_form .litecheckout__field--input > .litecheckout__label {
    order: -1 !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
    background: none !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    white-space: normal !important;
    pointer-events: auto !important;
}

/* ------------------------------------------------------------
   Ширина карток доставки на телефоні
   У 0.7.8 я додав .b--ship-way { padding-right: 9.6px } — там це
   гасило переповнення: .b--ship-way__list ширший за свій контейнер
   рівно на стільки. На вузькому екрані того переповнення немає,
   і відступ просто вкорочував картки доставки на 9.6px проти
   решти блоків сторінки.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    #litecheckout_form div.b--ship-way.b--ship-way_mode_radio-list {
        padding-right: 0 !important;
    }
}

/* ------------------------------------------------------------
   Автоматичне наближення на iOS
   Safari сам наближає сторінку при фокусі в поле, якщо шрифт у
   ньому менший за 16px. У теми скрізь 15px — звідси «масштаб
   трішки збільшився» після введення телефону.
   user-scalable=no в <meta viewport> це не лікує: сучасний Safari
   його навмисно ігнорує. Єдиний робочий спосіб — 16px у полях.
   Вводимо тільки на телефоні, щоб не роздувати десктоп.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    body #litecheckout_form input[type="text"],
    body #litecheckout_form input[type="tel"],
    body #litecheckout_form input[type="email"],
    body #litecheckout_form input[type="search"],
    body #litecheckout_form input[type="number"],
    body #litecheckout_form textarea,
    body #litecheckout_form select {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------
   Перекриття текстів у згорнутій смужці товарів
   Причина не в позиціюванні: у flex-контейнері елементи за
   замовчуванням стискаються НИЖЧЕ свого вмісту, а white-space:
   nowrap не дає тексту перенестись — тож він вилазить за межі
   своєї коробки і накладається на сусідній. Забороняємо
   стискатись тексту, дозволяємо мініатюрам.
   Бейджі й ціни в позиціях списку не чіпаємо.
   ------------------------------------------------------------ */

/* опис способу доставки прилипав до списку відділень — зазор був 0px */
body #litecheckout_form .pickup__offices-wrapper { margin-bottom: 12px !important; }
body #litecheckout_form .ty-checkout-select-store__map-full-div { margin-bottom: 12px !important; }

/* «Безкоштовно» в підсумку — тим самим зеленим, що й у списку способів */
body #litecheckout_form #bfcco_ship_free .bfcco-ship-free {
    color: var(--bfcco-green-d, #4d7c1f) !important;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Єдина типографіка карток доставки й оплати
   Заміряно: заголовок доставки 14.5px, оплати 15px; підпис під
   назвою в доставці 12.5px сірим, а в оплаті — 15px темним, тобто
   того ж кегля, що й сам заголовок. Через це блок оплати важчий за
   блок доставки, хоча за змістом вони рівноцінні.
   Зводимо до одного: назва 14.5/600, підпис 12.5/400 приглушеним.
   ------------------------------------------------------------ */
body #litecheckout_form .b--ship-way__unit .litecheckout__shipping-method__title,
body #litecheckout_form .b--pay-way__unit .litecheckout__shipping-method__title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--bfcco-ink, #363636) !important;
}
body #litecheckout_form .litecheckout__shipping-method__delivery-time,
body #litecheckout_form .b--pay-way__unit .b--pay-way__unit__label__text__beside-title,
body #litecheckout_form .b--ship-way__unit .b--ship-way__unit__label__text__beside-title {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--bfcco-mut, #6b7280) !important;
}

/* ------------------------------------------------------------
   Смужка товарів: текст по базовій лінії
   Знижка 14px і сума 15px мають однакові коробки (20px), але при
   вирівнюванні по центру коробки текст меншого кегля сідає вище —
   заміряно 0.5px різниці в базовій лінії. Вирівнюємо саме текст по
   базовій лінії, а мініатюри й кнопка лишаються центровані.
   ------------------------------------------------------------ */
body .bfcco-page .bfcco-gs-ttl,
body .bfcco-page .bfcco-gs-dot,
body .bfcco-page .bfcco-gs-sum,
body .bfcco-page .bfcco-gs-disc {
    align-self: baseline !important;
}

/* ------------------------------------------------------------
   Мобільна Укрпошта
   Кнопка «Выбрати зі списку» була вузькою жовтою плашкою з обрізаним
   написом — на телефоні це головна дія в блоці, тож даємо їй усю
   ширину і вигляд решти кнопок чекауту.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    body #litecheckout_form .pickup__open-pickupups-btn {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 4px 0 10px !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
        background: #fff !important;
        border: 1px solid var(--bfcco-green, #6ba539) !important;
        border-radius: 10px !important;
        color: var(--bfcco-green-d, #4d7c1f) !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-transform: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        white-space: normal !important;
        height: auto !important;
    }

    /* повноекранний список: пошук закріплений угорі, прокручується лише
       перелік — інакше поле їде вгору разом зі списком і його не видно */
    body #litecheckout_form .pickup__offices-wrapper-open .pickup__search {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        padding: 8px 0 !important;
    }
    body #litecheckout_form .pickup__offices-wrapper-open .litecheckout__fields-row {
        max-height: none !important;
    }
}

@media (max-width: 767px) {
    /* індекс і адреса лишаються в одному рядку, не стають у стовпчик */
    body #litecheckout_form .ab-up-post-office-item .ty-one-store__label {
        flex-wrap: nowrap !important;
        text-align: left !important;
    }
    body #litecheckout_form .ab-up-post-office-item .ty-one-store__name {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ------------------------------------------------------------
   Відступ над заголовком сторінки
   Уся порожнеча над «Оформити замовлення» — це margin-top: 40px
   самого заголовка, більше туди нічого не додає (заміряно: від
   верху форми до тексту рівно 40px). На десктопі лишаємо 16px,
   на телефоні 12px.
   Висоти інших блоків це не чіпає: ліва колонка просто піднімається
   цілком, а розпірка правої колонки перераховується сама при
   наступному вирівнюванні.
   ------------------------------------------------------------ */
body #litecheckout_form .litecheckout__page-title {
    margin-top: 16px !important;
}
@media (max-width: 767px) {
    body #litecheckout_form .litecheckout__page-title {
        margin-top: 12px !important;
    }
}

/* Поки перемальовка не вщухла, описів не показуємо взагалі: висота блоку
   стоїть, і нижче нічого не їде. Заміряно, що інакше опис блимає п'ять
   разів за 650 мс — вузол зникає й повертається разом із розміткою теми. */
/* Ховати опис виявилось помилкою: клік згортав його, а через секунду
   розгортав назад — два рухи замість одного. Тепер вміст не чіпаємо
   взагалі, а на час перемальовки тримаємо висоту секції (див. settleStart
   у script.js). Правило лишаємо порожнім навмисно, щоб клас `bfcco-settling`
   нічого не ховав. */

/* ============================================================
   0.9.25 — порожнеча під списком способів оплати
   Заміряно на дев: під останньою карткою оплати 64 пікселі пустки,
   яку легко прийняти за місце під прихований спосіб. Насправді це
   рідні відступи теми, що складаються один на одний:
       34px  margin-bottom групи #litecheckout_step_payment
       20px  padding-bottom обгортки .litecheckout__step-payments
       10px  padding-bottom нашої картки (їх і лишаємо)
   У доставки такого немає — тому оплата й виглядала «недовершеною».
   ============================================================ */
.bfcco-skin #litecheckout_step_payment { margin-bottom: 0 !important; }
.bfcco-skin .litecheckout__step-payments { padding-bottom: 0 !important; }

/* ============================================================
   0.9.26 — контейнер товарів по краях решти блоків
   Тема кладе padding-left: 60px прямим дітям картки кроку (правило
   живе у зведеному CSS-бандлі, закритому для читання, тож перекриваємо
   своїм). Наш контейнер — пряма дитина картки, і смужка з рядками
   з'їжджали на ті самі 60px. Заміряно на дев: текст смужки починався
   на 532px при полях сусідніх карток на 472px.
   Скидаємо горизонтальні відступи всім трьом — краї тепер збігаються
   з картками способів піксель у піксель (472..1364).
   ============================================================ */
.bfcco-page .bfcco-goods .bfcco-goods-box,
.bfcco-page .bfcco-goods-box .bfcco-goods-strip,
.bfcco-page .bfcco-goods-box .bfcco-golist {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Рідна обгортка списку стала порожньою коробкою з border-bottom теми —
   на екрані це «незрозуміла лінія» під верхнім краєм картки товарів.
   Вміст читаємо з неї і схованої, тож ховаємо цілком. */
.bfcco-page .bfcco-goods .litecheckout__step-order-products {
    display: none !important;
}

/* ============================================================
   0.9.27 — ціна при правому краї навіть без степера
   Сітка рядка розрахована на п'ять колонок (фото · назва · степер ·
   ціна · хрестик). Коли степер схований (кількість не редагується),
   грід пересаджував сусідів на колонку вліво — і ціна опинялась у
   колонці степера, за 176px від правого краю. Заміряно на дев у
   0.9.26 через порожній cart_id (полагоджено у script.js), але
   правило лишаємо: рядок без степера — законний стан, і ціна в
   ньому має стояти там само, де і з ним.
   ============================================================ */
.bfcco-page .bfcco-gi--noqty {
    grid-template-columns: 44px minmax(0, 1fr) 132px 20px;
}

/* ============================================================
   0.9.32 — відступи опису оплати як у доставки
   Заміряно на дев: у доставки лейбл→вміст 10px і вміст→низ 11px,
   а в оплати було 24px і 29px. Зайве давала рідна обгортка
   .litecheckout__payment-method (padding 20px зверху, 10px знизу)
   плюс власні низи опису й інструкцій. Зводимо до тих самих 10px.
   ============================================================ */
#litecheckout_form .b--pay-way__unit .litecheckout__payment-method {
    padding: 0 !important;
}
#litecheckout_form .b--pay-way__unit_active .b--pay-way__unit__details__in {
    padding: 10px 0 !important;
}
#litecheckout_form .b--pay-way__unit__details .litecheckout__payment-instructions {
    padding-bottom: 0 !important;
}

/* ============================================================
   0.9.37 — на тачскріні нічого не «залипає»
   Скрол пальцем по картці способу вмикав емульований :hover/:active,
   і тема підсвічувала псевдо-коло вибору: покупець бачив напівобраний
   спосіб, якого не торкався. Правила теми до нас не належать, тому
   гасимо саме стан наведення — вибір (клас _active) не чіпаємо.
   ============================================================ */
@media (hover: none) {
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):hover
        .b--ship-way__unit__label__text__pseudo-radio,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):hover
        .b--pay-way__unit__label__text__pseudo-radio,
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):active
        .b--ship-way__unit__label__text__pseudo-radio,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):active
        .b--pay-way__unit__label__text__pseudo-radio {
        background: #fff !important;
        border-color: var(--bfcco-line, #e3e7ec) !important;
        box-shadow: none !important;
    }
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):hover
        .b--ship-way__unit__label__text__pseudo-radio:before,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):hover
        .b--pay-way__unit__label__text__pseudo-radio:before,
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):hover
        .b--ship-way__unit__label__text__pseudo-radio > *,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):hover
        .b--pay-way__unit__label__text__pseudo-radio > * {
        opacity: 0 !important;
    }
    /* і сама картка не міняє рамку від дотику */
    body .bfcco-skin .b--ship-way__unit:not(.b--ship-way__unit_active):hover,
    body .bfcco-skin .b--pay-way__unit:not(.b--pay-way__unit_active):hover {
        border-color: var(--bfcco-line, #e3e7ec) !important;
    }
}

/* ============================================================
   0.9.38 — системна підсвітка дотику (Safari/iOS)
   Коло вибору «зʼявлялося» під пальцем навіть після того, як усі
   :hover-правила було вимкнено на тачі. Причина не в верстці:
   мобільний браузер малює власну підсвітку елемента при дотику
   (-webkit-tap-highlight-color) — вона лягає поверх сторінки, і
   жодним правилом стану її не прибрати.
   На десктопі цієї підсвітки не існує, тож наведення мишкою
   працює як раніше — коло на :hover лишається.
   ============================================================ */
#litecheckout_form .b--ship-way__unit,
#litecheckout_form .b--pay-way__unit,
#litecheckout_form .b--ship-way__unit label,
#litecheckout_form .b--pay-way__unit label,
#litecheckout_form .b--ship-way__unit__label,
#litecheckout_form .b--ship-way__unit__label__text__pseudo-radio,
#litecheckout_form .b--pay-way__unit__label__text__pseudo-radio {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ============================================================
   0.9.40 — фантомне «напівобране» коло на телефоні. Корінь.
   Знайдено емпірично (правило теми живе у закритому для читання
   бандлі): крапку вибору малює :after псевдоелемента-радіо, вона
   існує ЗАВЖДИ — у необраних просто біла на білому. :hover фарбує
   її в rgba(106,157,19,.6) — оце і є «коло при наведенні» на
   десктопі, яке магазин просив зберегти. На iPhone дотик під час
   скролу вмикає емульований hover, iOS тримає його до наступного
   тапу — і напівпрозоре коло висить на способі, якого ніхто не
   обирав. Попередні спроби (0.9.37/38) гасили :before, дочірні
   вузли й системну підсвітку — а крапка виявилась в :after.
   Гасимо тільки на пристроях без наведення і тільки для НЕобраних
   карток: реальний вибір і десктоп не зачеплені. */
@media (hover: none) {
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):hover [class*="pseudo-radio"]:after,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):hover [class*="pseudo-radio"]:after,
    body #litecheckout_form .b--ship-way__unit:not(.b--ship-way__unit_active):active [class*="pseudo-radio"]:after,
    body #litecheckout_form .b--pay-way__unit:not(.b--pay-way__unit_active):active [class*="pseudo-radio"]:after {
        background: #fff !important;
    }
}

/* ============================================================
   0.9.41 — хрестик видалення товару
   Іконку малював шрифт теми (span.ty-icon-cancel-circle), але його
   правило з кодом гліфа не дотягується до наших рядків: коли у 0.9.25
   рядки переїхали з рідного списку у власний контейнер, гліф став
   порожнім (заміряно: content "" — посилання клікабельне, але
   невидиме). Тому малюємо свій хрестик, без залежності від шрифтів
   теми: кругла-квадратна сіра кнопка з ×, за зразком магазину.
   ============================================================ */
/* ШИРШІ КОЛОНКИ — ЛИШЕ ДЕСКТОП. Цей блок стоїть у файлі ПІСЛЯ
   мобільної сітки з областями (@media max-width:767px вище), і без
   обмеження перекривав її: телефон отримував п'ять десктопних колонок
   і величезну пустку справа. Заміряно на iPhone 11.08. */
@media (min-width: 768px) {
    .bfcco-page .bfcco-gi {
        grid-template-columns: 44px minmax(0, 1fr) 100px 132px 30px;
    }
    .bfcco-page .bfcco-gi--noqty {
        grid-template-columns: 44px minmax(0, 1fr) 132px 30px;
    }
}
/* а в мобільній сітці лише розширюємо трек хрестика 18 -> 30px */
@media (max-width: 767px) {
    .bfcco-page .bfcco-gi {
        grid-template-columns: 40px minmax(0, 1fr) auto 30px;
    }
}
.bfcco-page .bfcco-gi-x a {
    /* тема позиціонує це посилання абсолютно відносно рідної позиції
       товару; у нашому рядку опори немає — хрестик відлітав за межі
       екрана (заміряно: 3395,1 при рядку до 1940). Саме так він і
       «пропав». Повертаємо в потік. */
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f1f3f5;
    color: #8a919a !important;
    font-size: 0 !important;   /* глушимо все внутрішнє */
    transition: background .15s, color .15s;
}
/* мертвий шрифтовий гліф — геть */
.bfcco-page .bfcco-gi-x a .ty-icon { display: none !important; }
.bfcco-page .bfcco-gi-x a:before {
    content: '✕';
    font-size: 13px;
    line-height: 1;
}
/* підсвітка — лише там, де є справжнє наведення (урок 0.9.40) */
@media (hover: hover) {
    .bfcco-page .bfcco-gi-x a:hover {
        background: #fdeceb;
        color: var(--bfcco-red, #d1392f) !important;
    }
}

/* ============================================================
   0.9.45 — «Сплачується перевізнику» після підсумку (зразок Розетки)
   Доставка й комісія — гроші перевізника, не магазину. Тому вони
   стоять окремою групою ПІД «Вартістю замовлення», а стовпчик над
   нею рахується без них. Кольори — як у сусідніх рядків (заміряно:
   підпис #8f8f8f, значення #363636), заголовок групи — темний,
   як «Платежі при отриманні» у зразку.
   ============================================================ */
/* 0.9.46: заголовок приглушено (#363636 вибивався), відступи вирівняні:
   14px над групою, 7px під заголовком, рядки рівномірно по 4px */
tr.bfcco-carrier-ttl td {
    padding-top: 14px !important;
    padding-bottom: 7px !important;
    border-top: 1px solid #ececec;
    border-bottom: 0 !important;
    color: #7c8590 !important;
    font-weight: 600;
    font-size: 13.5px;
}
tr.bfcco-carrier-row td {
    border: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
tr.bfcco-carrier-row td:first-child { color: #8f8f8f !important; }
tr.bfcco-carrier-row td:last-child,
tr.bfcco-carrier-row td:last-child span { color: #363636 !important; }

/* рідний рядок доставки, перенесений у блок перевізника */
.ty-checkout-summary__block tr.bfcco-row-off { display: none !important; }

/* ============================================================
   0.9.47 — порожнеча над підсумком
   Заміряно: 16px падінгу картки + 20px рідного margin-top таблиці
   = 37px пустки перед «Кількість товару». Маргін зайвий — картка
   вже має власний відступ, як у всіх сусідніх блоків.
   ============================================================ */
.litecheckout__ab_sticky-block .ty-checkout-summary__block {
    margin-top: 0 !important;
}

/* 0.9.81: the gift's intrinsic width must not widen the totals table.
   Size the table from its sidebar, and let gift controls wrap inside it. */
.bfcco-page .ty-checkout-summary__block {
    width: 100%;
    table-layout: fixed;
}
.bfcco-page .ty-checkout-summary__item:first-child {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}
.bfcco-page .ty-checkout-summary__item.ty-right {
    width: 7.75em;
    overflow-wrap: anywhere;
}
.bfcco-page .ty-checkout-summary__total > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.bfcco-page .ty-checkout-summary__total-sum {
    margin-left: auto;
}
.bfcco-page .ty-checkout-summary .bfc-cg__content {
    width: clamp(200px, 68%, 250px);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.bfcco-page .ty-checkout-summary .bfc-cg__actions {
    flex-wrap: wrap;
    gap: 8px;
}
.bfcco-page .ty-checkout-summary .bfc-cg__open,
.bfcco-page .ty-checkout-summary .bfc-cg__remove {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}
.bfcco-page .ty-checkout-summary .bfc-cg__actions > .ty-btn {
    margin-left: 0;
}

/* ============================================================
   0.9.48 — липкість правої колонки (знову)
   Корінь: у самої теми стоїть
   .litecheckout__ab_sticky-block { margin-top: -70px; }
   (standalone.*.css) — колонку затягує вгору, вище заголовка
   сторінки. Розпірка з JS це компенсувала; у 0.9.47 розпірку
   прибрано, і мінус-70 лишився нічим не перекритий. Обнуляємо
   його раз і назавжди: колонка стартує рівно з верху свого ряду —
   Промокод на рівні «Я постійний клієнт» (заміряно: 153 = 153),
   при прокруті липне на 16px від верху.
   ============================================================ */
@media (min-width: 768px) {
    .bfcco-page .litecheckout__ab_sticky-block {
        margin-top: 0 !important;
    }
}

/* 0.9.48: шрифт заголовка «Сплачуєте перевізнику».
   Було фіксовано 13.5px — на мобайлі тема масштабує рядки підсумку,
   і заголовок випадав із блоку (виглядав дрібнішим за сусідів).
   Заміряно: сусідні клітинки не мають власного font-size, вони
   успадковують (15px на десктопі). Робимо так само — inherit,
   тоді розмір збігається на будь-якому екрані, а вирізняється
   заголовок лише вагою і приглушеним кольором. */
tr.bfcco-carrier-ttl td {
    font-size: inherit;
}

/* ============================================================
   0.9.50 — заголовок «Сплачуєте перевізнику» без жирності
   Прохання магазину: акцент на цьому рядку не потрібен.
   Лишається тільки приглушений колір — цього досить, щоб
   відділити групу перевізника від решти підсумку.
   ============================================================ */
tr.bfcco-carrier-ttl td {
    font-weight: 400;
}

/* 0.9.77: final order processing, independent of generic AJAX status styles. */
#bfcco_order_loading[hidden] { display: none !important; }
#bfcco_order_loading {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; padding: 20px;
    background: rgba(245, 247, 242, .86);
    color: #25341c; text-align: center; cursor: progress;
    touch-action: none; outline: none;
}
#bfcco_order_loading .bfcco-order-loading__card {
    box-sizing: border-box; width: 100%; max-width: 360px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 30px 24px; border-radius: 20px; background: #fff;
    box-shadow: 0 12px 48px rgba(29, 51, 18, .14);
}
#bfcco_order_loading .bfcco-order-loading__spinner {
    box-sizing: border-box; display: block; position: relative;
    width: 58px; height: 58px; flex: 0 0 58px;
    border: 0; border-radius: 0; background: transparent;
    animation: none; transform: none;
}
/* The clipped window and its image move in opposite directions, so the
   emblem stays still while colour rises. Transform/opacity keep running in
   Safari while native form navigation waits for the server; clip-path did not.
   Keep all work local to the visible order indicator. */
#bfcco_order_loading .bfcco-order-loading__spinner {
    overflow: hidden;
}
#bfcco_order_loading .bfcco-order-loading__spinner::before,
#bfcco_order_loading .bfcco-order-loading__wave,
#bfcco_order_loading .bfcco-order-loading__wave::before {
    content: ''; display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; box-sizing: border-box;
    border: 0; padding: 0; margin: 0; pointer-events: none;
}
#bfcco_order_loading .bfcco-order-loading__spinner::before,
#bfcco_order_loading .bfcco-order-loading__wave::before {
    background-position: center; background-size: contain;
    background-repeat: no-repeat;
}
#bfcco_order_loading .bfcco-order-loading__spinner::before {
    opacity: .18;
}
#bfcco_order_loading .bfcco-order-loading__wave {
    overflow: hidden;
}
/* No PNG request or compositing hint until the order indicator is shown. */
#bfcco_order_loading:not([hidden]) .bfcco-order-loading__spinner::before,
#bfcco_order_loading:not([hidden]) .bfcco-order-loading__wave::before {
    background-image: url("../../../media/addons/bfc_checkout_v2/emblem.png?v=0.9.82");
}
#bfcco_order_loading:not([hidden]) .bfcco-order-loading__wave {
    will-change: transform, opacity;
    animation: bfccoOrderEmblemReveal 2.2s ease-in-out infinite;
}
#bfcco_order_loading:not([hidden]) .bfcco-order-loading__wave::before {
    will-change: transform;
    animation: bfccoOrderEmblemImage 2.2s ease-in-out infinite;
}
#bfcco_order_loading .bfcco-order-loading__title {
    font-family: inherit; font-size: 20px;
    font-weight: 600; line-height: 1.35;
}
#bfcco_order_loading .bfcco-order-loading__hint {
    font-size: 14px; line-height: 1.5; color: #5b6653;
}
@keyframes bfccoOrderEmblemReveal {
    0%, 10% { transform: translate3d(0, 100%, 0); opacity: 1; }
    66%, 84% { transform: translate3d(0, 0, 0); opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 0; }
}
@keyframes bfccoOrderEmblemImage {
    0%, 10% { transform: translate3d(0, -100%, 0); }
    66%, 100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #bfcco_order_loading:not([hidden]) .bfcco-order-loading__wave,
    #bfcco_order_loading:not([hidden]) .bfcco-order-loading__wave::before {
        animation: none; transform: none; will-change: auto;
    }
}