.shop-checkout-access { border-bottom: 1px solid var(--shop-border); padding-bottom: 24px; margin-bottom: 24px; }

.shop-basketorder-checkout {
    --bs-form-invalid-color: var(--shop-brand);
    --bs-form-invalid-border-color: var(--shop-brand);
}
.shop-basketorder-checkout .form-control.is-invalid { background-image: none; }
.shop-basketorder-checkout .form-select.is-invalid { background-image: var(--bs-form-select-bg-img); }
.shop-basketorder-checkout .form-check-input.is-invalid ~ .form-check-label { color: var(--shop-text); }
.shop-basketorder-checkout .payment-switch input:not(:checked) ~ .shop-bank-transfer { display: none; }

/* Details from the customer profile are changed there, not in the checkout. */
.shop-basketorder-checkout .form-control[readonly],
.shop-basketorder-checkout .form-select:disabled {
    background-color: #f3f3f3;
    color: #555;
    cursor: not-allowed;
}
.shop-basketorder-checkout .form-control[readonly]:focus {
    border-color: var(--bs-border-color);
    box-shadow: none;
}

/* Phones: the two checkout buttons do not fit in one row, so they are stacked at full width. */
@media (max-width: 575px) {
    .shop-basketorder-checkout .checkout-button > .btn {
        flex: 1 1 100%;
    }
}

/* coding.ms labels the quantity with a disabled button; it is a label, not an action. */
.basket-item-list .basket-item-unit:disabled {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--shop-text);
    opacity: 1;
}

/*
 * Below the full desktop width the basket scrolls sideways instead of dropping columns: the table needs about
 * 1100 px, because article numbers are often the full product name.
 */
@media (max-width: 1199px) {
    .basket-item-list {
        display: block;
        overflow-x: auto;
    }

    /* The caption holds messages about the basket; it stays as wide as the visible area. */
    .basket-item-list > caption {
        display: block;
        position: sticky;
        left: 0;
    }

    /*
     * Personal data on the confirmation page: the labels take 40 %, words are hyphenated and long values wrap
     * anywhere. Email addresses are not hyphenated, because the hyphen would read as part of the address.
     */
    .shop-basketorder-confirm-order table:not(.basket-item-list) {
        hyphens: auto;
    }

    .shop-basketorder-confirm-order table:not(.basket-item-list) td:first-child:not(:last-child) {
        width: 40%;
    }

    .shop-basketorder-confirm-order table:not(.basket-item-list) td:last-child {
        overflow-wrap: anywhere;
    }

    .shop-basketorder-confirm-order table:not(.basket-item-list) [data-field="email"] {
        hyphens: manual;
    }
}