/* Probioday — упрощение оформления заказа (этап 3).
   Одна страница, минимум полей, фирменные цвета.

   Фирменная палитра берётся из темы:
   #99BC85 — основной зелёный, #88ab76 — нажатие/наведение,
   #7FA36E — тёмный зелёный, #E4EFE7 — светлый фон. */

:root {
    --pd-green: #99BC85;
    --pd-green-dark: #88ab76;
    --pd-green-deep: #7FA36E;
    --pd-green-light: #E4EFE7;
}

/* ─────────────────────────────────────────────
   1. ЛИШНЕЕ С ГЛАЗ ДОЛОЙ

   Поля не удаляем из формы, а прячем: на них завязан
   JS темы (расстановка адресных полей ищет элементы по id).
   ───────────────────────────────────────────── */

/* Страна. Прячем ТОЛЬКО когда магазин продаёт в одну страну —
   класс проставляется в PHP по реальным настройкам WooCommerce.
   Здесь разрешено 27 стран ЕС, поэтому выбор остаётся на месте. */
.woocommerce-checkout .pd-single-country {
    display: none !important;
}

/* «Создать аккаунт?» — заказ оформляется как гость, регистрация не нужна.
   Класс ставит PHP и только когда регистрация на оформлении не обязательна:
   включат обязательную — поле пароля должно остаться видимым, иначе форма
   не отправится и человек не поймёт почему. */
.woocommerce-checkout.pd-guest-checkout .woocommerce-account-fields {
    display: none !important;
}

/* Реквизиты для фактуры — по умолчанию скрыты, открываются галочкой */
.woocommerce-checkout .pd-invoice-field {
    display: none !important;
}

.woocommerce-checkout .pd-invoice-field.pd-invoice-visible {
    display: block !important;
}

/* Галочка «Хочу фактуру» */
.pd-invoice-toggle-row {
    margin: 4px 0 18px !important;
}

.pd-invoice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    user-select: none;
}

.pd-invoice-toggle__input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--pd-green);
    cursor: pointer;
}

/* Комментарий к заказу нужен единицам — прячем под ссылку,
   чтобы он не занимал полэкрана перед кнопкой оплаты */
.woocommerce-checkout .pd-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 10px;
    font-size: 15px;
    color: var(--pd-green-deep);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.woocommerce-checkout .pd-note-hidden {
    display: none !important;
}

/* Cookie-баннер сознательно НЕ трогаем: от согласия зависит сбор
   аналитики, а её на этом проекте только что чинили. */

/* ─────────────────────────────────────────────
   2. РАСКЛАДКА: поля попарно, а не в столбик
   ───────────────────────────────────────────── */

/* Сетку строим на самом контейнере полей.
   Через float/inline-block не выходит: виджет Elementor
   задаёт полям свою ширину, а inline-block ещё и ловит перенос
   из-за пробела между блоками. Flex надёжнее и не зависит от
   порядка, который тема переставляет своим скриптом. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3%;
}

/* По умолчанию поле занимает всю строку */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
}

/* Поля, которые ставим парами.
   Адресуем по идентификатору, а не по классу: у адресных полей
   класс переписывает скрипт локализации адресов WooCommerce
   (wc-address-i18n) уже после загрузки страницы, и обычные
   form-row-first/last там просто слетают. */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_company_field.pd-invoice-visible,
.woocommerce-checkout #billing_tax_no_field.pd-invoice-visible,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_building_no_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_first_name_field,
.woocommerce-checkout #shipping_last_name_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_building_no_field,
.woocommerce-checkout #shipping_postcode_field,
.woocommerce-checkout #shipping_city_field {
    flex: 0 0 48.5% !important;
    max-width: 48.5% !important;
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Поля покрупнее — по ним чаще промахиваются пальцем на телефоне */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection {
    min-height: 46px;
    border-radius: 8px;
}

.woocommerce-checkout .form-row label {
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

/* ─────────────────────────────────────────────
   3. ФИРМЕННЫЙ ЗЕЛЁНЫЙ ВМЕСТО ЧУЖОГО ГОЛУБОГО
   ───────────────────────────────────────────── */

/* Заголовок страницы «Składanie zamówienia» */
/* Красим заголовки ТОЛЬКО внутри формы оформления и сводки.
   Раньше правило доставало все заголовки Elementor на странице, включая
   шапку с подвалом, и срабатывало на «Спасибо за заказ» — там is_checkout()
   тоже истинно. */
.woocommerce-checkout form.checkout h1,
.woocommerce-checkout form.checkout .elementor-heading-title,
.woocommerce-checkout .woocommerce-checkout-review-order .elementor-heading-title {
    color: var(--pd-green-deep) !important;
}

/* Главная кнопка оплаты */
.woocommerce-checkout #place_order,
.woocommerce-checkout button.alt,
.woocommerce-checkout .button.alt {
    background-color: var(--pd-green) !important;
    border-color: var(--pd-green) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 15px 24px !important;
    border-radius: 8px !important;
    width: 100%;
    transition: background-color .15s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button.alt:hover,
.woocommerce-checkout .button.alt:hover {
    background-color: var(--pd-green-dark) !important;
    border-color: var(--pd-green-dark) !important;
}

/* Выбранный способ доставки — подсвечиваем зелёным, а не голубым */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
    accent-color: var(--pd-green);
}

/* Ссылки внутри формы (в том числе «Zapłać później») */
.woocommerce-checkout .woocommerce-checkout-review-order a,
.woocommerce-checkout form.checkout a {
    color: var(--pd-green-deep);
}

/* ─────────────────────────────────────────────
   4. СВОДКА ЗАКАЗА ЕДЕТ ЗА ЧЕЛОВЕКОМ

   Чтобы сумма и кнопка оплаты были на виду,
   пока он листает форму.
   ───────────────────────────────────────────── */

@media (min-width: 992px) {
    .woocommerce-checkout .woocommerce-checkout-review-order {
        position: sticky;
        top: 24px;
    }
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border-radius: 10px;
}

/* Итоговая сумма — крупно, её ищут глазами */
.woocommerce-checkout .order-total .woocommerce-Price-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--pd-green-deep);
}

/* ─────────────────────────────────────────────
   5. ТЕЛЕФОН
   ───────────────────────────────────────────── */

@media (max-width: 767px) {

    /* На узком экране два поля в строке не помещаются */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
    .woocommerce-checkout #billing_first_name_field,
    .woocommerce-checkout #billing_last_name_field,
    .woocommerce-checkout #billing_email_field,
    .woocommerce-checkout #billing_phone_field,
    .woocommerce-checkout #billing_company_field.pd-invoice-visible,
    .woocommerce-checkout #billing_tax_no_field.pd-invoice-visible,
    .woocommerce-checkout #billing_address_1_field,
    .woocommerce-checkout #billing_building_no_field,
    .woocommerce-checkout #shipping_first_name_field,
    .woocommerce-checkout #shipping_last_name_field,
    .woocommerce-checkout #shipping_address_1_field,
    .woocommerce-checkout #shipping_building_no_field {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Индекс и город остаются парой: индекс короткий,
       растягивать его на весь экран телефона незачем */
    .woocommerce-checkout #billing_postcode_field,
    .woocommerce-checkout #shipping_postcode_field {
        flex: 0 0 44% !important;
        max-width: 44% !important;
    }

    .woocommerce-checkout #billing_city_field,
    .woocommerce-checkout #shipping_city_field {
        flex: 0 0 53% !important;
        max-width: 53% !important;
    }

    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row .select2-selection {
        min-height: 48px;
        font-size: 16px; /* меньше 16px — iPhone зумит страницу при вводе */
    }

    /* Место под липкую полосу с кнопкой оплаты.
       Родную кнопку не прячем: по ней работает вся проверка формы,
       полоса лишь нажимает её за человека. */
    body.woocommerce-checkout.pd-mobile-bar-active {
        padding-bottom: 76px;
    }
}

/* Липкая полоса «К оплате» внизу экрана телефона */
.pd-mobile-bar {
    display: none;
}

@media (max-width: 767px) {
    .pd-mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        box-shadow: 0 -2px 14px rgba(0, 0, 0, .12);
    }

    .pd-mobile-bar__sum {
        font-size: 13px;
        line-height: 1.2;
        color: #5f5f5f;
        white-space: nowrap;
    }

    .pd-mobile-bar__sum strong {
        display: block;
        font-size: 18px;
        color: #1c1f20;
    }

    .pd-mobile-bar__btn {
        flex: 1;
        background: var(--pd-green);
        color: #fff;
        border: 0;
        border-radius: 8px;
        padding: 14px 16px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .pd-mobile-bar__btn:active {
        background: var(--pd-green-dark);
    }
}

/* ═════════════════════════════════════════════
   6. СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ — КАРТОЧКАМИ

   Было: голый список радио-кнопок, надписи в строку,
   иконки вразнобой. Стало: плитки с рамкой, выбранная
   подсвечена зелёным. Тот же приём, что на dobrekrzesla.
   ═════════════════════════════════════════════ */

/* --- общий вид плитки --- */
.woocommerce-checkout #shipping_method li,
.woocommerce-checkout .wc_payment_methods > li {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border: 1.5px solid #e3e6e3;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce-checkout #shipping_method li:hover,
.woocommerce-checkout .wc_payment_methods > li:hover {
    border-color: var(--pd-green);
}

.woocommerce-checkout #shipping_method li label,
.woocommerce-checkout .wc_payment_methods > li > label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.3;
}

/* цена доставки — вправо, чтобы колонка читалась сверху вниз */
.woocommerce-checkout #shipping_method li label .woocommerce-Price-amount {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

/* --- сама радио-кнопка --- */
/* Родную радио-кнопку убираем с глаз, но оставляем для клавиатуры
   и озвучки. Просто position:absolute без координат не годится:
   кнопка остаётся на своём месте в потоке и распирает карточку
   на свою ширину (ловилось как переполнение на 13 px). */
.woocommerce-checkout #shipping_method li input[type="radio"],
.woocommerce-checkout .wc_payment_methods > li > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.woocommerce-checkout #shipping_method li label::before,
.woocommerce-checkout .wc_payment_methods > li > label::before {
    content: '';
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #c9d2c9;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* выбранный способ */
.woocommerce-checkout #shipping_method li input[type="radio"]:checked + label,
.woocommerce-checkout .wc_payment_methods > li > input[type="radio"]:checked + label {
    font-weight: 600;
}

.woocommerce-checkout #shipping_method li input[type="radio"]:checked + label::before,
.woocommerce-checkout .wc_payment_methods > li > input[type="radio"]:checked + label::before {
    border-color: var(--pd-green);
    box-shadow: inset 0 0 0 4px var(--pd-green);
}

/* --- логотипы способов оплаты --- */
.woocommerce-checkout .wc_payment_methods > li > label img {
    max-height: 26px;
    width: auto;
    margin-left: auto;
    order: 3;
}

/* пояснение под выбранным способом */
.woocommerce-checkout .wc_payment_methods .payment_box {
    margin: 0;
    padding: 0 14px 13px 44px;
    background: none;
    border: 0;
    font-size: 14px;
    color: #5f5f5f;
}

.woocommerce-checkout .wc_payment_methods .payment_box::before {
    display: none; /* треугольник-стрелка от темы тут лишний */
}

.woocommerce-checkout .wc_payment_methods .payment_box p:last-child {
    margin-bottom: 0;
}

/* заголовок над блоком доставки в сводке */
.woocommerce-checkout .woocommerce-shipping-totals th {
    padding-bottom: 10px;
    vertical-align: top;
}

/* ═════════════════════════════════════════════
   7. СВОДКА ЗАКАЗА: ТОВАР С КАРТИНКОЙ
   ═════════════════════════════════════════════ */

.woocommerce-checkout .pd-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.woocommerce-checkout .pd-item__thumb {
    flex: 0 0 54px;
    display: block;
}

.woocommerce-checkout .pd-item__thumb img {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    object-fit: contain;
    border-radius: 8px;
    background: #fafaf7;
}

.woocommerce-checkout .pd-item__title {
    font-size: 14px;
    line-height: 1.35;
}

/* ═════════════════════════════════════════════
   8. ЗНАЧКИ ДОВЕРИЯ ПОД КНОПКОЙ ОПЛАТЫ
   ═════════════════════════════════════════════ */


/* ═════════════════════════════════════════════
   9. ШАГИ ОФОРМЛЕНИЯ

   Показывают, что до конца остался один шаг.
   ═════════════════════════════════════════════ */

.pd-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}

.pd-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #9aa39a;
}


.pd-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1ee;
    font-size: 13px;
    font-weight: 700;
}


.pd-steps__item.is-current .pd-steps__num {
    background: var(--pd-green);
    color: #fff;
}

.pd-steps__item.is-current {
    color: #1c1f20;
    font-weight: 600;
}

@media (max-width: 767px) {
    .pd-steps {
        gap: 4px;
        margin-bottom: 16px;
    }

    .pd-steps__item {
        font-size: 12.5px;
    }

    .pd-steps__item + .pd-steps__item::before {
        width: 14px;
        margin-right: 4px;
    }
}

/* ═════════════════════════════════════════════
   10. МЕНЬШЕ ОТВЛЕКАЮЩЕГО НА СТРАНИЦЕ ОПЛАТЫ

   Логотип и контакты оставляем — по ним человек
   понимает, что он там же, где покупал.
   ═════════════════════════════════════════════ */


/* ═════════════════════════════════════════════
   11. СВОДКА: СТРОКА ДОСТАВКИ ВО ВСЮ ШИРИНУ

   В таблице заказа подпись «Przesyłka» съедала половину
   ширины, и карточкам доставки оставалось ~220 px —
   названия ломались на две строки. Разворачиваем строку
   на всю ширину: подпись сверху, способы под ней.
   ═════════════════════════════════════════════ */

/* Саму СТРОКУ выводим из табличной раскладки — иначе колонка
   со способами схлопывается по минимуму содержимого (было 58 px). */
.woocommerce-checkout .woocommerce-shipping-totals {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-shipping-totals > th,
.woocommerce-checkout .woocommerce-shipping-totals > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.woocommerce-checkout .woocommerce-shipping-totals th {
    padding-bottom: 8px;
    font-size: 14px;
    color: #5f5f5f;
}

.woocommerce-checkout #shipping_method {
    margin: 0;
    padding: 0;
}

/* название способа доставки не должно прилипать к цене */
.woocommerce-checkout #shipping_method li label {
    padding-right: 12px;
}

/* товар в сводке — картинка слева, название и цена справа */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    padding-right: 8px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
    white-space: nowrap;
    vertical-align: top;
}

/* Список способов доставки тема раскладывает по-своему, из-за чего
   карточки сжимались по содержимому и цена вылезала за рамку.
   Возвращаем простую вертикальную раскладку во всю ширину. */
.woocommerce-checkout #shipping_method {
    display: block !important;
    width: 100% !important;
    list-style: none;
}

.woocommerce-checkout #shipping_method > li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.woocommerce-checkout #shipping_method > li > label {
    flex-wrap: nowrap;
    white-space: normal;
}

/* название способа занимает свободное место, цена прижата вправо */
.woocommerce-checkout #shipping_method > li > label > .woocommerce-Price-amount,
.woocommerce-checkout #shipping_method > li > label > .amount {
    margin-left: auto;
    padding-left: 10px;
}

/* ═════════════════════════════════════════════
   12. ПРОПОРЦИИ КОЛОНОК

   Виджет Elementor отдаёт правой колонке ~478 px, и внутри
   неё способы доставки/оплаты ужимаются. Форма слева после
   упрощения стала короткой — отдаём часть ширины сводке.
   ═════════════════════════════════════════════ */

@media (min-width: 992px) {
    .woocommerce-checkout .e-checkout__container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 560px) !important;
        align-items: start;
    }
}

/* ═════════════════════════════════════════════
   13. БЛОК ПОМОЩИ ПОД ФОРМОЙ
   ═════════════════════════════════════════════ */

.pd-help {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid #e7eae6;
    border-radius: 12px;
    background: #fff;
}

.pd-help__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.pd-help__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 10px;
}

.pd-help__link {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-green-deep) !important;
    text-decoration: none;
}

.pd-help__link:hover {
    text-decoration: underline;
}

.pd-help__note {
    font-size: 13px;
    line-height: 1.45;
    color: #7c847c;
}

/* метки полей в одну строку — иначе пара полей едет по высоте */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row > label,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row > label {
    min-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Итог: сумма одной строкой, пометка про НДС — под ней.
   Иначе «60,00 zł (zawiera 11,22 zł VAT)» рвётся посреди скобки. */
.woocommerce-checkout .order-total .includes_tax,
.woocommerce-checkout .order-total small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #7c847c;
}

.woocommerce-checkout .order-total th {
    white-space: nowrap;
}

.woocommerce-checkout .order-total td {
    text-align: right;
}

/* ═════════════════════════════════════════════
   14. СВОДКА ЗАКАЗА — БЕЗ ТАБЛИЧНЫХ ОГРАНИЧЕНИЙ

   Таблица держала строку доставки на 360 px при доступных 498 —
   карточки не дотягивались до края и справа зияла пустота.
   Переводим сводку на гибкую раскладку: строка = «слева название,
   справа сумма», а доставка — заголовок и карточки под ним.
   ═════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    display: block;
    width: auto !important;
    border: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr > *:last-child {
    text-align: right;
    white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    flex: 1 1 auto;
    white-space: normal;
}

/* строка доставки — заголовок сверху, карточки во всю ширину под ним */
.woocommerce-checkout .woocommerce-shipping-totals {
    display: block !important;
}

.woocommerce-checkout .woocommerce-shipping-totals > td {
    padding-right: 0 !important;
}


/* разделители между товарами вместо пустых интервалов */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f2ef;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item:first-of-type {
    padding-top: 0;
}

/* ═════════════════════════════════════════════
   15. СВОЙ ПОЧЕРК

   Первый вариант получился слишком узнаваемым: круги-с-линиями
   в шагах, одинаковые рамки карточек и три квадрата со значками —
   это почерк другого нашего проекта. Здесь тот же смысл подан иначе:
   шаги — мягкими «таблетками», выбранный способ — акцентной полосой
   слева, значки доверия — строкой с тонкими иконками.
   ═════════════════════════════════════════════ */

/* --- шаги: таблетки вместо кругов с линиями --- */
.pd-steps {
    gap: 6px;
}

.pd-steps__item {
    gap: 6px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: #f2f5f1;
}

.pd-steps__item + .pd-steps__item::before {
    display: none; /* соединительных линий больше нет */
}

.pd-steps__num {
    width: 20px;
    height: 20px;
    font-size: 12px;
    background: #fff;
}


.pd-steps__item.is-current {
    background: var(--pd-green);
    color: #fff;
}

.pd-steps__item.is-current .pd-steps__num {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

/* --- карточки: акцент слева вместо сплошной рамки --- */
.woocommerce-checkout #shipping_method li,
.woocommerce-checkout .wc_payment_methods > li {
    position: relative;
    overflow: hidden;
    border-color: #edf0ec;
    box-shadow: 0 1px 2px rgba(28, 31, 32, .04);
}

.woocommerce-checkout #shipping_method li::before,
.woocommerce-checkout .wc_payment_methods > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background-color .15s ease;
}

.woocommerce-checkout #shipping_method li:has(input:checked)::before,
.woocommerce-checkout .wc_payment_methods > li:has(input:checked)::before {
    background: var(--pd-green);
}

.woocommerce-checkout #shipping_method li:has(input:checked),
.woocommerce-checkout .wc_payment_methods > li:has(input:checked) {
    background: #fbfdfa;
    border-color: #dfe8db;
}

.woocommerce-checkout #shipping_method li label,
.woocommerce-checkout .wc_payment_methods > li > label {
    padding-left: 18px;
}

/* --- значки доверия: строка, а не три квадрата --- */
.pd-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 14px;
}

.pd-trust__item {
    display: flex;
    align-items: center;
    gap: 7px;
    text-align: left;
    font-size: 12.5px;
}

.pd-trust__icon {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    color: var(--pd-green-deep);
    flex: 0 0 18px;
}

.pd-trust__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* согласие с правилами не должно рваться перед звёздочкой */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
}

/* текст про обработку данных — помельче, он справочный */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: 13px;
    line-height: 1.5;
    color: #7c847c;
}

/* Подписи карточек: ширина 100% вместе с внутренними отступами,
   иначе содержимое вылезает за рамку на величину этих отступов. */
.woocommerce-checkout #shipping_method li label,
.woocommerce-checkout .wc_payment_methods > li > label {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 14px;
    gap: 8px;
}

.woocommerce-checkout #shipping_method > li > label > .woocommerce-Price-amount,
.woocommerce-checkout #shipping_method > li > label > .amount {
    padding-left: 8px;
    flex: 0 0 auto;
}

/* Длинные названия товаров переносим по словам, а не выталкиваем сумму */
.woocommerce-checkout .pd-item {
    min-width: 0;
}

/* Переносим по словам, а не по буквам: anywhere схлопывал колонку
   названия до ширины одной буквы («Antyperspiran t roll-on»),
   потому что влияет на расчёт минимальной ширины блока. */
.woocommerce-checkout .pd-item__title {
    flex: 1 1 auto;
    overflow-wrap: break-word;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    flex: 1 1 auto;
    min-width: 55%;
}

/* На телефоне колонка растягивалась по содержимому и вылезала
   за экран на ~23 px (страница ехала вбок). Колонкам сетки нужно
   явно разрешить сжиматься — иначе они считаются по своему контенту. */
.woocommerce-checkout .e-checkout__container > *,
.woocommerce-checkout .e-checkout__column,
.woocommerce-checkout .e-checkout__column-inner,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 {
    min-width: 0;
    max-width: 100%;
}

/* Строка доставки должна оставаться блочной (заголовок сверху,
   карточки под ним) — правило гибкой раскладки строк оказалось
   сильнее и возвращало её в две колонки, из-за чего карточки
   уезжали вправо за край сводки. Поднимаем вес селектора. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
}

/* Между строками сводки оставались большие пустоты — родные отступы
   таблицы складывались с нашими. Приводим к единому ритму. */
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 8px 0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item {
    padding: 10px 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total {
    padding: 6px 0;
}

.woocommerce-checkout .woocommerce-shipping-totals > th {
    padding-bottom: 6px !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total {
    border-top: 1px solid #eceee9;
    margin-top: 4px;
    padding-top: 12px;
}

@media (max-width: 767px) {
    /* На телефоне названию товара нужно больше места,
       иначе оно переносится по два слова в строку */
    .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
        min-width: 68%;
    }

    .woocommerce-checkout .pd-item__thumb img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
    }

    .woocommerce-checkout .pd-item__thumb {
        flex: 0 0 44px;
    }

    .woocommerce-checkout .pd-item {
        gap: 8px;
    }
}

/* ═════════════════════════════════════════════
   16. ПОЛЕ ТЕЛЕФОНА

   Плагин рисует слева флаг страны и код «+48». Тема сбивала
   внутреннюю раскладку этой кнопки, и код выпадал вниз, вылезая
   за поле отдельной строкой. Возвращаем флаг и код в одну строку.
   ═════════════════════════════════════════════ */

.woocommerce-checkout .iti {
    display: block;
    width: 100%;
}

.woocommerce-checkout .iti__country-container {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding: 0;
}

.woocommerce-checkout .iti__selected-country {
    display: flex !important;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 0 8px 0 12px;
    background: none;
    border: 0;
    cursor: pointer;
}

.woocommerce-checkout .iti__selected-country-primary {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.woocommerce-checkout .iti__selected-dial-code {
    display: inline-block !important;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: #5f5f5f;
    white-space: nowrap;
}

/* фиксируем ширину блока со страной, чтобы номер начинался
   ровно после него, а не наезжал на код */
.woocommerce-checkout .iti__country-container {
    width: 96px;
}

/* разделительная черта между кодом страны и номером */
.woocommerce-checkout .iti__selected-country::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: #dfe3de;
}

.woocommerce-checkout .iti__selected-country {
    position: relative;
    width: 96px;
    justify-content: flex-start;
}

/* сам номер не должен налезать на блок с флагом */
.woocommerce-checkout .iti > input.input-text,
.woocommerce-checkout .iti > input[type="tel"],
.woocommerce-checkout .iti input#billing_phone {
    padding-left: 108px !important;
}

.woocommerce-checkout .iti__arrow,
.woocommerce-checkout .iti__dropdown-arrow {
    margin: 0;
}

/* ═════════════════════════════════════════════
   17. КОРЗИНА ВНУТРИ ОФОРМЛЕНИЯ

   Отдельной страницы корзины больше нет — количество
   и удаление правятся прямо в сводке заказа.
   ═════════════════════════════════════════════ */

.woocommerce-checkout .pd-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
}

.woocommerce-checkout .pd-qty.is-busy {
    opacity: .45;
    pointer-events: none;
}

.woocommerce-checkout .pd-qty__btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e4df;
    background: #fff;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1;
    color: #3b423b;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce-checkout .pd-qty__btn:hover {
    border-color: var(--pd-green);
    background: var(--pd-green-light);
}

.woocommerce-checkout .pd-qty__value {
    min-width: 26px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.woocommerce-checkout .pd-qty__remove {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    border: 0;
    background: none;
    color: #b0b8b0;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 7px;
    transition: color .15s ease, background-color .15s ease;
}

.woocommerce-checkout .pd-qty__remove:hover {
    color: #b3261e;
    background: #fdeceb;
}

/* количество и удаление живут в колонке названия, под самим названием */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .pd-qty {
    margin-left: 64px;
}

@media (max-width: 767px) {
    .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .pd-qty {
        margin-left: 52px;
    }
}

/* Пустая корзина на странице оформления */
.pd-empty {
    max-width: 520px;
    margin: 10px auto 40px;
    padding: 34px 28px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7eae6;
    border-radius: 14px;
}

.pd-empty__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pd-empty__text {
    font-size: 15px;
    color: #7c847c;
    margin: 0 0 18px;
}

.pd-empty__btn {
    display: inline-block;
    padding: 13px 26px;
    background: var(--pd-green);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none !important;
}

.pd-empty__btn:hover {
    background: var(--pd-green-dark);
}

/* когда корзина пуста — форму и шаги не показываем */
.woocommerce-checkout .pd-empty ~ .pd-steps,
.woocommerce-checkout .pd-empty ~ form.checkout {
    display: none;
}

/* ═════════════════════════════════════════════
   18. ДОПРОДАЖИ НА СТРАНИЦЕ ОФОРМЛЕНИЯ
   ═════════════════════════════════════════════ */

/* Тема задаёт кнопкам свои рамку, цвет и скругление с высоким весом —
   без !important кнопка «Dodaj» выглядела просто текстом. */
.woocommerce-checkout .pd-upsell__add {
    flex: 0 0 auto;
    padding: 9px 18px !important;
    border: 1.5px solid var(--pd-green) !important;
    background: #fff !important;
    color: var(--pd-green-deep) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.woocommerce-checkout .pd-upsell__add:hover {
    background: var(--pd-green) !important;
    color: #fff !important;
}

/* ═════════════════════════════════════════════
   19. ЧИТАЕМОСТЬ И КЛАВИАТУРА

   Фирменный светло-зелёный хорош как фон, но на белом
   мелкий текст им читается плохо. Для текста, ссылок и
   иконок берём тот же тон темнее — бренд сохраняется,
   читаемость приходит в норму.
   ═════════════════════════════════════════════ */

:root {
    --pd-green-text: #5A7F4A;
}

.woocommerce-checkout .woocommerce-checkout-review-order a,
.woocommerce-checkout form.checkout a,
.woocommerce-checkout .pd-note-toggle,
.pd-help__link,
.pd-trust__icon,
.woocommerce-checkout .order-total .woocommerce-Price-amount {
    color: var(--pd-green-text) !important;
}

.pd-upsell__name:hover,
.woocommerce-checkout .pd-upsell__add {
    color: var(--pd-green-text) !important;
}

/* неактивный шаг был почти невидим на светлом фоне */
.pd-steps__item {
    color: #6b706b;
}

/* крестик удаления и рамка невыбранного варианта — различимы */
.woocommerce-checkout .pd-qty__remove {
    color: #6b746b;
}

.woocommerce-checkout #shipping_method li label::before,
.woocommerce-checkout .wc_payment_methods > li > label::before {
    border-color: #9aa89a;
}

/* Видимая рамка при переходе клавишей Tab.
   Родные радио-кнопки скрыты, поэтому подсвечиваем наш кружок —
   иначе человек с клавиатуры не понимает, где находится. */
.woocommerce-checkout #shipping_method li input[type="radio"]:focus-visible + label::before,
.woocommerce-checkout .wc_payment_methods > li > input[type="radio"]:focus-visible + label::before {
    outline: 2px solid var(--pd-green-text);
    outline-offset: 2px;
}

.woocommerce-checkout .pd-qty__btn:focus-visible,
.woocommerce-checkout .pd-qty__remove:focus-visible,
.woocommerce-checkout .pd-upsell__add:focus-visible,
.woocommerce-checkout .pd-note-toggle:focus-visible,
.pd-invoice-toggle__input:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
    outline: 2px solid var(--pd-green-text);
    outline-offset: 2px;
}

/* Выбранный вариант отличался только полоской слева — добавляем фон */
.woocommerce-checkout #shipping_method li:has(input:checked),
.woocommerce-checkout .wc_payment_methods > li:has(input:checked) {
    background: #f3f8ef;
}

/* ═════════════════════════════════════════════
   20. ПОДПИСИ ПОЛЕЙ БЕЗ ОБРЕЗКИ

   Раньше подпись резалась многоточием. После перевода на три
   языка подписи стали длиннее — вместе с текстом терялась бы
   и звёздочка обязательного поля, она стоит в конце.
   ═════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row > label,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row > label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-height: 21px;
}

/* Ряд полей выравниваем по низу — если одна подпись перенеслась
   на две строки, поля всё равно останутся на одной линии */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    align-items: end;
}

/* Красная ошибка «сессия истекла» рядом с нашим сообщением о пустой
   корзине — страховка на случай, если WooCommerce добавит её позже */
.woocommerce-checkout .pd-empty ~ .woocommerce-error,
.woocommerce-checkout .pd-empty ~ .woocommerce-info,
.woocommerce-checkout .pd-empty ~ .woocommerce-notices-wrapper {
    display: none !important;
}

/* На телефонах с жестовой полосой кнопка стояла впритык к краю */
@media (max-width: 767px) {
    .pd-mobile-bar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═════════════════════════════════════════════
   21. ЛЕВАЯ КОЛОНКА ЕДЕТ ВМЕСТЕ С ПРОКРУТКОЙ

   Само значение «прилипания» считает скрипт: оно зависит от
   высоты формы и высоты экрана. Здесь только страховка,
   чтобы колонка вела себя предсказуемо.
   ═════════════════════════════════════════════ */

@media (min-width: 992px) {
    .woocommerce-checkout .e-checkout__column-start .e-checkout__column-inner {
        align-self: start;
    }
}

/* ═════════════════════════════════════════════
   22. ПРОГРЕСС ДО БЕСПЛАТНОЙ ДОСТАВКИ

   Блок жил на странице корзины (код клиента), а её мы вывели
   из маршрута. Возвращаем в сводку — прямо над способами
   доставки, то есть в момент выбора, а не в стороне от него.

   Строка приходит внутри таблицы сводки, поэтому выводим её
   из табличной раскладки — тем же приёмом, что уже применён
   к строке доставки (иначе колонка схлопывается по содержимому).
   ═════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-fs,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-fs > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    background: none;
}

/* !important здесь по той же причине, что и у строки доставки выше:
   общее правило отступов ячеек сводки идёт с !important, а без своей
   ширины строка сжимается по длине текста и полоса обрывается на нём. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-fs > td {
    padding: 14px 0 12px !important;
    /* В сводке суммы прижаты вправо, и ячейка тянула туда же нашу подпись —
       она должна начинаться слева, как заголовки строк. */
    text-align: left !important;
}

.pd-fs__text {
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--pd-green-text);
    /* Ячейки сводки на телефоне идут с nowrap (там короткие суммы),
       а у нас целая фраза — на 320 px она вылезала за край блока. */
    white-space: normal;
    overflow-wrap: break-word;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-fs > td {
    white-space: normal;
}

.pd-fs__track {
    height: 6px;
    border-radius: 999px;
    background: var(--pd-green-light);
    overflow: hidden;
}

.pd-fs__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--pd-green);
    /* Полоса заезжает плавно, но только если человек не просил
       убрать анимации в системе. */
    transition: width .25s ease;
}

/* Порог взят — полоса тем же тоном, что и текст: заполненность
   читается даже без цветовосприятия, не только по цвету. */
.pd-fs--done .pd-fs__fill {
    background: var(--pd-green-text);
}

@media (prefers-reduced-motion: reduce) {
    .pd-fs__fill {
        transition: none;
    }
}

/* ═════════════════════════════════════════════
   20. ПРОМОКОД В СВОДКЕ ЗАКАЗА

   Блок живёт строкой таблицы сводки — как и полоса
   бесплатной доставки, поэтому из табличной раскладки
   его выводим теми же приёмами и по той же причине:
   общее правило отступов ячеек идёт с !important,
   а без своей ширины строка сжимается по тексту.
   ═════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-coupon,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-coupon > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    background: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.pd-coupon > td {
    padding: 10px 0 12px !important;
    text-align: left !important;
    white-space: normal;
}

/* Кнопка-раскрывашка выглядит ссылкой: это второстепенное действие,
   рядом стоит главная кнопка оплаты и спорить с ней ей незачем. */
.woocommerce-checkout .pd-coupon__toggle {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--pd-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.woocommerce-checkout .pd-coupon__toggle:hover {
    color: var(--pd-green-deep);
}

.pd-coupon__form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.pd-coupon__form[hidden] {
    display: none;
}

/* Поле уже стоит внутри формы заказа, где у полей свои общие правила —
   поэтому размеры задаём явно, иначе оно приезжало на всю ширину строки
   и кнопка уезжала под него. */
.woocommerce-checkout .pd-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #d7ddd7;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    text-transform: uppercase;
}

/* Введённый код показываем заглавными — коды на сайте заглавные,
   и человек сразу видит их в привычном виде. Подсказку в пустом поле
   это правило капсить не должно: «WPISZ KOD» выглядит криком,
   а у клиента в мини-корзине стоит обычное «Wpisz kod». */
.woocommerce-checkout .pd-coupon__input::placeholder {
    text-transform: none;
}

.woocommerce-checkout .pd-coupon__input:focus {
    border-color: var(--pd-green);
    outline: 2px solid var(--pd-green-light);
    outline-offset: 0;
}

.woocommerce-checkout .pd-coupon__submit {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--pd-green);
    border-radius: 8px;
    background: #fff;
    color: var(--pd-green-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.woocommerce-checkout .pd-coupon__submit:hover {
    background: var(--pd-green-light);
}

.woocommerce-checkout .pd-coupon__submit[disabled] {
    opacity: .6;
    cursor: default;
}

.pd-coupon__msg {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
}

.pd-coupon__msg:empty {
    display: none;
}

.pd-coupon__msg.is-ok {
    color: var(--pd-green-text);
}

.pd-coupon__msg.is-err {
    color: #b3261e;
}

.pd-coupon__msg.is-wait {
    color: #6b746b;
}