/* Xbau cart and checkout refinements shared by all storefront locales. */

/* Magento's core loader is dismissed before every Knockout checkout region has
   finished mounting. Reserve the finished checkout footprint and reveal its
   primary regions together so the footer and half-rendered sections do not
   jump through the viewport during first load. */
.checkout-index-index .checkout-container {
    position: relative;
    min-height: max(720px, calc(100vh - 260px));
    align-content: flex-start;
}

/* Reserve space only for the loading shell; once the checkout is mounted,
   content height must determine where the footer starts. */
.checkout-index-index .checkout-container.xbau-checkout-ready {
    min-height: 0;
}

.checkout-index-index .checkout-container.xbau-checkout-booting #checkout-loader {
    display: none !important;
}

/* The Magento spinner otherwise flashes back after the short shell watchdog. */
.checkout-index-index .checkout-container #checkout-loader {
    display: none !important;
}

.checkout-index-index .xbau-checkout-loading-shell {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    width: 80%;
    padding: 10px 0 40px;
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.checkout-index-index .xbau-checkout-loading-line {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2f4f4 20%, #e5eeee 50%, #f2f4f4 80%);
    background-size: 240% 100%;
    animation: xbau-checkout-loading 1.25s ease-in-out infinite;
}

.checkout-index-index .xbau-checkout-loading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
    gap: 24px;
}

.checkout-index-index .xbau-checkout-loading-card {
    box-sizing: border-box;
    min-height: 380px;
    padding: 28px;
    border: 1px solid rgba(156, 158, 161, .24);
    border-radius: 16px;
    background: #fff;
}

.checkout-index-index .xbau-checkout-loading-summary {
    min-height: 310px;
}

.checkout-index-index .xbau-checkout-loading-line {
    width: 100%;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 10px;
}

.checkout-index-index .xbau-checkout-loading-title {
    width: 42%;
    height: 24px;
    margin-bottom: 28px;
}

.checkout-index-index .xbau-checkout-loading-short {
    width: 64%;
}

.checkout-index-index .checkout-container.xbau-checkout-booting :is(
    .opc-estimated-wrapper,
    .messages,
    .opc-wrapper,
    .opc-summary-wrapper
) {
    opacity: 0 !important;
    visibility: hidden !important;
}

.checkout-index-index .checkout-container.xbau-checkout-ready :is(
    .opc-estimated-wrapper,
    .messages,
    .opc-wrapper,
    .opc-summary-wrapper
) {
    /* Do not retain the transform/opacity stacking context after the reveal.
       Shipping stays in the Knockout-owned left column but is positioned below
       the summary on desktop. A retained transform lets the summary's reserved
       padding intercept shipping radio and Continue clicks. */
    animation: xbau-checkout-reveal .22s ease backwards;
}

.checkout-index-index .checkout-container.xbau-checkout-ready .xbau-checkout-loading-shell {
    opacity: 0;
    visibility: hidden;
}

@keyframes xbau-checkout-loading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@keyframes xbau-checkout-reveal {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
    .checkout-index-index .checkout-container {
        min-height: max(760px, calc(100vh - 190px));
    }

    .checkout-index-index .xbau-checkout-loading-shell {
        width: calc(100% - 32px);
        padding-top: 6px;
    }

    .checkout-index-index .xbau-checkout-loading-grid {
        display: block;
    }

    .checkout-index-index .xbau-checkout-loading-card {
        min-height: 520px;
        padding: 20px;
        border-radius: 14px;
    }

    .checkout-index-index .xbau-checkout-loading-summary {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-index-index .xbau-checkout-loading-line,
    .checkout-index-index .checkout-container.xbau-checkout-ready :is(
        .opc-estimated-wrapper,
        .messages,
        .opc-wrapper,
        .opc-summary-wrapper
    ) {
        animation: none;
    }
}

/* Keep the checkout CTA on the same geometry and type scale as other Xbau
   primary actions. The nested span had a legacy semibold override. */
@media (max-width: 767px) {
    /* The legacy mobile design fixed this card above the bottom navigation.
       That made it cover cart rows and the footer while scrolling. Keep it in
       the document flow so every section remains readable and tappable. */
    .checkout-cart-index .cart-summary {
        position: static !important;
        inset: auto !important;
        z-index: auto;
        box-sizing: border-box;
        width: 100% !important;
        margin: 16px 0 12px;
        border-radius: 16px;
    }

    /* Give product metadata and quantity controls separate visual rows. The
       legacy 0.5fr second row left only a one-pixel seam below Seller. */
    .checkout-cart-index .cart.table-wrapper .items > .item {
        padding: 14px;
    }

    .checkout-cart-index .cart.table-wrapper .product-item-details .product-item-name {
        margin-top: 0 !important;
        margin-bottom: 8px;
        line-height: 22px;
    }

    .checkout-cart-index .cart.table-wrapper .product-item-details .product-item-name a {
        line-height: inherit;
    }

    .checkout-cart-index .cart.table-wrapper .action-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .checkout-cart-index .item-info {
        box-sizing: border-box;
        column-gap: 12px !important;
        row-gap: 16px !important;
        grid-template-columns: clamp(86px, 26vw, 110px) minmax(0, 1fr) 44px !important;
        grid-template-rows: auto auto !important;
        min-width: 0;
        width: 100% !important;
    }

    .checkout-cart-index .item-info .col.item {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0;
        padding: 0 !important;
    }

    .checkout-cart-index .item-info .col.name {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0;
    }

    .checkout-cart-index .item-info .item-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        justify-self: end;
        min-width: 0;
    }

    .checkout-cart-index .item-info .col.subtotal {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        min-width: 0;
        width: auto !important;
    }

    .checkout-cart-index .col.qty,
    .checkout-cart-index .col.qty .control-qty {
        min-height: 64px;
    }

    .checkout-cart-index .col.qty .control-qty {
        box-sizing: border-box;
        width: min(150px, 100%) !important;
        max-width: 100%;
        margin: 0 0 0 auto;
    }

    .checkout-cart-index .item-info .col.qty {
        grid-column: 2 / 4 !important;
        grid-row: 2 / 3 !important;
        justify-self: stretch;
        min-width: 0;
        width: 100%;
    }

    .checkout-cart-index .col.qty .control-qty input {
        height: 64px;
        margin: 0 !important;
        padding-inline: 48px;
    }

    .checkout-cart-index .col.qty .control-qty .qty-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        top: 50%;
        transform: translateY(-50%);
    }

    .checkout-cart-index .col.qty .control-qty .minus {
        left: 4px;
    }

    .checkout-cart-index .col.qty .control-qty .plus {
        right: 4px;
    }

    /* Consistent field rhythm and tap targets throughout both checkout steps. */
    .checkout-index-index :is(.form-shipping-address, .billing-address-form) .field {
        margin-bottom: 16px;
    }

    .checkout-index-index :is(.form-shipping-address, .billing-address-form) :is(input.input-text, select) {
        min-height: 56px;
    }

    .checkout-index-index .table-checkout-shipping-method tbody tr {
        min-height: 72px;
    }

    .checkout-index-index .table-checkout-shipping-method tbody tr td {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* The original 768-991px rule kept checkout at only half of the available
   tablet width. Use one comfortable, centred column until the desktop layout
   has enough room for a real sidebar. */
@media (min-width: 768px) and (max-width: 991px) {
    .checkout-index-index .checkout-container {
        justify-content: center;
    }

    .checkout-index-index .checkout-container .opc-wrapper {
        box-sizing: border-box;
        flex: 0 1 640px;
        max-width: 640px;
        width: calc(100% - 48px) !important;
    }

    .checkout-index-index .checkout-container .opc-sidebar {
        box-sizing: border-box;
        flex: 0 1 640px;
        max-width: 640px;
        width: calc(100% - 48px) !important;
    }

    .checkout-index-index .checkout-container .opc-wrapper :is(
        .form-login,
        .form-shipping-address,
        .methods-shipping
    ) {
        max-width: none;
    }

    .checkout-index-index .xbau-checkout-loading-shell {
        width: calc(100% - 48px);
    }

    .checkout-index-index .xbau-checkout-loading-grid {
        display: block;
    }

    .checkout-index-index .xbau-checkout-loading-summary {
        display: none;
    }
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout {
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 24px;
    border: 2px solid #1E99A4;
    border-radius: 12px;
    background: #1E99A4;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    box-shadow: none;
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout span {
    color: inherit;
    font: inherit;
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:is(:hover, :active) {
    border-color: #1E99A4;
    background: #1E99A4;
    color: #4D4D4F;
    box-shadow: none;
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:focus {
    border-color: #1E99A4;
    background: #1E99A4;
    box-shadow: none;
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:focus-visible {
    outline: 2px solid #1E99A4;
    outline-offset: 3px;
}

/* The SKU is rendered as <small>, while the Seller line inherits the product
   metadata typography. Make the SKU inherit that exact type and colour without
   changing the Seller line itself. */
.checkout-cart-index .cart.table-wrapper .product-item-details .sku {
    color: inherit;
    font: inherit;
}

/* Magento renders both the street group label and the first line label. The
   group label is visually hidden so the two strings cannot overlap, while all
   actual field labels use the same regular Montserrat treatment as Line 2. */
.checkout-index-index :is(.form-shipping-address, .billing-address-form) :is(.field.street, fieldset.street) > :is(label, legend).label {
    display: none !important;
}

.checkout-index-index :is(.form-shipping-address, .billing-address-form) .field > .label,
.checkout-index-index :is(.form-shipping-address, .billing-address-form) .field > .label :is(span, strong, b) {
    color: #9C9EA1 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Shipping-address modal actions follow the same type scale, geometry and
   interaction language as the rest of Xbau. Constant borders prevent hover
   shifts and nested spans cannot reintroduce a legacy bold font. */
.checkout-index-index .modal-popup .modal-footer :is(.action-save-address, .action-hide-popup) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 24px;
    border: 2px solid #1E99A4;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    box-shadow: none !important;
    text-transform: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.checkout-index-index .modal-popup .modal-footer :is(.action-save-address, .action-hide-popup) :is(span, strong, b) {
    color: inherit !important;
    font: inherit !important;
}

.checkout-index-index .modal-popup .modal-footer .action-save-address {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
    color: #fff !important;
}

.checkout-index-index .modal-popup .modal-footer .action-save-address:is(:hover, :active) {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
    color: #4D4D4F !important;
}

.checkout-index-index .modal-popup .modal-footer .action-hide-popup {
    border-color: #1E99A4 !important;
    background: #fff !important;
    color: #1E99A4 !important;
}

.checkout-index-index .modal-popup .modal-footer .action-hide-popup:is(:hover, :active) {
    border-color: #4D4D4F !important;
    background: #fff !important;
    color: #4D4D4F !important;
}

.checkout-index-index .modal-popup .modal-footer :is(.action-save-address, .action-hide-popup):focus-visible {
    outline: 2px solid #1E99A4;
    outline-offset: 3px;
}

/* The wrapper is also named .primary, so the legacy generic hover rule drew a
   second dark outline around Next. Reset the wrapper and keep a constant,
   visually blended 2px border on the actual button to prevent layout shifts. */
.checkout-index-index #shipping-method-buttons-container > .primary,
.checkout-index-index #shipping-method-buttons-container > .primary:is(:hover, :focus, :active) {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.checkout-index-index #shipping-method-buttons-container .action.continue.primary {
    box-sizing: border-box;
    border: 2px solid #1E99A4 !important;
    background: #1E99A4 !important;
    box-shadow: none !important;
}

.checkout-index-index #shipping-method-buttons-container .action.continue.primary:is(:hover, :active) {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
    color: #4D4D4F !important;
}

.checkout-index-index #shipping-method-buttons-container .action.continue.primary:focus {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
}

.checkout-index-index #shipping-method-buttons-container .action.continue.primary:focus-visible {
    outline: 2px solid #1E99A4;
    outline-offset: 3px;
}

/* Keep selectable shipping rows on constant border geometry. Selecting a row
   now changes colour only, so the method list does not move by two pixels. */
.checkout-index-index .table-checkout-shipping-method .row {
    box-sizing: border-box;
    border: 2px solid rgba(30, 153, 164, .24);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* Cart actions and the destructive-action confirmation use the same Xbau
   geometry as checkout. Constant borders and an explicit gap prevent the two
   modal buttons from drawing over one another on narrow screens. */
.checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) :is(.action.clear, .action.update),
.checkout-cart-index .modal-popup.confirm .modal-footer :is(.action-primary, .action-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 24px;
    border: 2px solid #1E99A4 !important;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    box-shadow: none !important;
    text-transform: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) :is(.action.clear, .action.update) :is(span, strong, b),
.checkout-cart-index .modal-popup.confirm .modal-footer :is(.action-primary, .action-secondary) :is(span, strong, b) {
    color: inherit !important;
    font: inherit !important;
}

.checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) :is(.action.clear, .action.update),
.checkout-cart-index .modal-popup.confirm .modal-footer .action-primary {
    background: #1E99A4 !important;
    color: #fff !important;
}

.checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) :is(.action.clear, .action.update):is(:hover, :active),
.checkout-cart-index .modal-popup.confirm .modal-footer .action-primary:is(:hover, :active) {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
    color: #4D4D4F !important;
}

.checkout-cart-index .modal-popup.confirm .modal-footer .action-secondary {
    margin: 0 !important;
    background: #fff !important;
    color: #1E99A4 !important;
}

.checkout-cart-index .modal-popup.confirm .modal-footer .action-secondary:is(:hover, :active) {
    border-color: #4D4D4F !important;
    background: #fff !important;
    color: #4D4D4F !important;
}

.checkout-cart-index .modal-popup.confirm .modal-footer {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
}

.checkout-cart-index .modal-popup.confirm .modal-footer :is(.action-primary, .action-secondary) {
    width: auto;
    min-width: 112px;
    margin: 0 !important;
}

.checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) :is(.action.clear, .action.update):focus-visible,
.checkout-cart-index .modal-popup.confirm .modal-footer :is(.action-primary, .action-secondary):focus-visible {
    outline: 2px solid #1E99A4;
    outline-offset: 3px;
}

@media (max-width: 991px) {
    /* The mobile clear action is intentionally quieter than the primary
       checkout CTA and matches the text action in the desktop minicart. */
    .checkout-cart-index .cart.main.actions {
        display: flex;
        justify-content: center;
    }

    .checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) .action.clear,
    .checkout-cart-index .cart.table-wrapper > .action.clear {
        display: flex;
        width: auto;
        min-height: 0;
        margin: 12px auto 0 !important;
        padding: 10px 12px;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        color: #1E99A4 !important;
        box-shadow: none !important;
    }

    .checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) .action.clear:is(:hover, :active),
    .checkout-cart-index .cart.table-wrapper > .action.clear:is(:hover, :active) {
        border: 0 !important;
        background: transparent !important;
        color: #4D4D4F !important;
    }

    .checkout-cart-index :is(.cart.main.actions, .cart.table-wrapper .actions) .action.clear:focus-visible,
    .checkout-cart-index .cart.table-wrapper > .action.clear:focus-visible {
        outline: 2px solid #1E99A4;
        outline-offset: 2px;
    }
}

@media (max-width: 479px) {
    .checkout-cart-index .modal-popup.confirm .modal-footer {
        flex-wrap: nowrap;
        padding-inline: 20px;
    }

    .checkout-cart-index .modal-popup.confirm .modal-footer :is(.action-primary, .action-secondary) {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 14px;
    }
}

.checkout-index-index .table-checkout-shipping-method .row:hover {
    border-color: rgba(30, 153, 164, .72);
    background: rgba(30, 153, 164, .045);
    box-shadow: 0 5px 14px rgba(30, 153, 164, .10);
}

.checkout-index-index .table-checkout-shipping-method .row.active {
    border-color: #1E99A4;
    background: rgba(30, 153, 164, .10);
    box-shadow: 0 5px 14px rgba(30, 153, 164, .12);
}

.checkout-index-index .table-checkout-shipping-method .row:has(input[type="radio"]:checked) {
    border-color: #1E99A4;
    background: rgba(30, 153, 164, .10);
    box-shadow: 0 5px 14px rgba(30, 153, 164, .12);
}

/* Magento exposes both carrier_title and method_title. Ced uses the same text
   for both, so the template suppresses the duplicate and gives collection a
   clear, actionable location instead. */
.checkout-index-index .table-checkout-shipping-method .xbau-pickup-address {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px 15px 90px;
    border: 0;
}

.checkout-index-index .xbau-pickup-address__label {
    display: block;
    margin-bottom: 3px;
    color: #9C9EA1;
    font-size: 13px;
    line-height: 1.35;
}

.checkout-index-index .xbau-pickup-address__link {
    color: #4D4D4F;
    font-size: 14px;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-color: rgba(30, 153, 164, .45);
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.checkout-index-index .xbau-pickup-address__link:is(:hover, :focus-visible) {
    color: #1E99A4;
    text-decoration-color: #1E99A4;
}

@media (max-width: 639px) {
    .checkout-index-index .table-checkout-shipping-method .xbau-pickup-address {
        padding: 0 15px 15px;
    }
}

/* Payment options used the same 1px-to-2px selected-border swap. Keep their
   outer width constant as customers move from Shipping to Payments. */
.checkout-index-index .checkout-container .opc-wrapper .payment-method {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    border-width: 2px;
    border-color: rgba(156, 158, 161, .24);
}

.checkout-index-index .checkout-container .opc-wrapper .payment-method._active {
    border-color: #1E99A4;
}

/* Keep the selector visible in BOTH states: customers must be able to return
   to Stripe after choosing company credit or another payment method. */
.checkout-index-index .checkout-container .opc-wrapper
.xbau-primary-payment-method .xbau-primary-payment-method__title {
    position: relative;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: 0;
    overflow: visible;
    white-space: normal;
}

.checkout-index-index .checkout-container .opc-wrapper
.xbau-primary-payment-method .xbau-primary-payment-method__title .label {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding-right: 32px;
    cursor: pointer;
}

.checkout-index-index .xbau-primary-payment-method__title .xbau-stripe-logo {
    width: 64px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 64px;
    margin-left: auto;
}

.checkout-index-index .checkout-container .opc-wrapper
.xbau-primary-payment-method._active .payment-method-billing-address {
    margin-top: 0;
}

/* The selected-address badge occupies the card's top-right corner. Clip it to
   the same rounded border so its square background cannot protrude past the
   card curve at any zoom level or breakpoint. */
.checkout-index-index .shipping-address-item.selected-item {
    overflow: hidden;
}

.checkout-index-index .shipping-address-item.selected-item::after {
    box-sizing: border-box;
    /* The card itself clips the outer top-right curve. Keeping this corner
       square lets the teal fill reach the border without a white seam. */
    border-radius: 0 0 0 8px;
}

/* Give the selected payment option a clear visual rhythm: the payment title
   and icon form one row, followed by the billing-address choice with enough
   breathing room to read as the next control. */
.checkout-index-index .checkout-container .opc-wrapper .payment-method._active .payment-method-billing-address {
    margin-top: 18px;
}

/* Keep checkout actions on the same fixed geometry as the rest of Xbau. The
   theme's generic .primary rules also target wrapper elements, so scope these
   rules to the actual buttons and reset nested text explicitly. */
.checkout-index-index .checkout-payment-method .payment-method-content > .actions-toolbar > .primary {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout,
.checkout-index-index .checkout-billing-address .action-update,
.checkout-index-index .checkout-billing-address .action-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 24px;
    border: 2px solid #1E99A4 !important;
    border-radius: 12px;
    background: #1E99A4 !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    box-shadow: none !important;
    text-transform: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout :is(span, strong, b),
.checkout-index-index .checkout-billing-address .action-update :is(span, strong, b),
.checkout-index-index .checkout-billing-address .action-cancel :is(span, strong, b) {
    color: inherit !important;
    font: inherit !important;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout:not(:disabled):is(:hover, :active),
.checkout-index-index .checkout-billing-address .action-update:is(:hover, :active) {
    border-color: #1E99A4 !important;
    background: #1E99A4 !important;
    color: #4D4D4F !important;
}

.checkout-index-index .checkout-billing-address .action-cancel {
    margin-right: 8px;
    border-color: #1E99A4 !important;
    background: #fff !important;
    color: #1E99A4 !important;
    text-decoration: none;
}

.checkout-index-index .checkout-billing-address .action-cancel:is(:hover, :active) {
    border-color: #4D4D4F !important;
    background: #fff !important;
    color: #4D4D4F !important;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout:focus-visible,
.checkout-index-index .checkout-billing-address .action-update:focus-visible,
.checkout-index-index .checkout-billing-address .action-cancel:focus-visible {
    outline: 2px solid #1E99A4;
    outline-offset: 3px;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout:disabled,
.checkout-index-index .checkout-payment-method .action.primary.checkout.disabled {
    border-color: rgba(30, 153, 164, .55) !important;
    background: rgba(30, 153, 164, .55) !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Server-side validation details may contain paths or identifiers without
   spaces. Keep those messages inside the payment column instead of allowing
   one long token to overlap the order summary. */
.checkout-index-index .checkout-container .opc-wrapper .payment-method .message {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Match the tax notice to the rounded checkout card language while retaining
   Magento's warning colour and meaning. */
.checkout-index-index .opc-block-summary .tax.message.warning {
    box-sizing: border-box;
    margin: 24px 0 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 12px;
    line-height: 1.45;
    overflow: hidden;
}

@media (max-width: 767px) {
    .checkout-index-index .opc-block-summary .tax.message.warning {
        padding: 14px 16px;
        border-radius: 10px;
    }
}

/* Use the same horizontal rhythm as the catalogue instead of the legacy
   narrow, centred checkout island. Keep Magento's two-column checkout DOM. */
.checkout-index-index .page-main {
    box-sizing: border-box;
    max-width: 1700px;
    width: calc(100% - 10.5vw);
    margin-inline: auto;
    padding-inline: 0;
}

/* Breadcrumbs are a sibling of .page-main in Magento's layout. Give both
   the same content width so Home > Checkout never touches the viewport edge. */
.checkout-index-index .breadcrumbs {
    box-sizing: border-box;
    max-width: 1700px;
    width: calc(100% - 10.5vw);
    margin: 20px auto 32px;
    padding-inline: 0;
}

.checkout-index-index .page-title-wrapper {
    text-align: left;
    margin-top: 0;
    padding-inline: 0;
}

.checkout-index-index .page-title-wrapper .page-title {
    margin: 0 0 28px;
    color: #4D4D4F;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}

/* Shipping and Review & Payments are internal Magento step indicators,
   not actions. The form's own headings and Next button remain available. */
.checkout-index-index .opc-progress-bar {
    display: none !important;
}

.checkout-index-index .checkout-container {
    justify-content: flex-start;
    column-gap: 28px;
    row-gap: 12px;
}

.checkout-index-index .checkout-container > .messages:empty {
    display: none;
}

.checkout-index-index .checkout-container > :is(.opc-wrapper, .opc-sidebar) {
    margin-top: 0 !important;
    padding-top: 0;
}

.checkout-index-index .checkout-container .opc-wrapper > .opc {
    margin-top: 0;
}

.checkout-index-index .checkout-container .opc-wrapper {
    padding: 0 !important;
}

.checkout-index-index .checkout-container .opc-sidebar {
    margin-left: 0 !important;
}

.checkout-index-index .checkout-shipping-address,
.checkout-index-index .checkout-shipping-address .step-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.checkout-index-index .checkout-container .opc-wrapper :is(
    .form-login,
    .form-shipping-address,
    .methods-shipping
) {
    max-width: none;
    width: 100%;
}

.checkout-index-index .checkout-shipping-address .step-title {
    margin-top: 0;
}

@media (min-width: 992px) {
    .checkout-index-index .checkout-container {
        display: grid;
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        align-items: start;
    }

    .checkout-index-index .checkout-container > :is(.opc-progress-bar, .messages) {
        grid-column: 1 / -1;
    }

    .checkout-index-index .checkout-container .opc-wrapper {
        box-sizing: border-box;
        grid-column: 1;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .checkout-index-index .checkout-container .opc-sidebar {
        box-sizing: border-box;
        grid-column: 2;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .checkout-index-index #opc-shipping_method.xbau-shipping-in-sidebar {
        box-sizing: border-box;
        width: 100%;
        margin-top: 0;
        padding: 24px;
        border: 1px solid rgba(156, 158, 161, .28);
        border-radius: 16px;
        background: #fff;
        z-index: 1;
    }

    .checkout-index-index #opc-shipping_method.xbau-shipping-in-sidebar .step-content,
    .checkout-index-index #opc-shipping_method.xbau-shipping-in-sidebar .table-checkout-shipping-method,
    .checkout-index-index #opc-shipping_method.xbau-shipping-in-sidebar .actions-toolbar {
        box-sizing: border-box;
        width: 100%;
        margin-inline: 0 !important;
    }
}

@media (max-width: 767px) {
    .checkout-index-index .page-main {
        width: calc(100% - 32px);
    }

    .checkout-index-index .breadcrumbs {
        width: calc(100% - 32px);
    }

    .checkout-index-index .page-title-wrapper {
        padding-inline: 0;
    }

    .checkout-index-index .page-title-wrapper .page-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .checkout-index-index .checkout-container {
        gap: 16px;
    }

    .checkout-index-index .checkout-container .opc-wrapper,
    .checkout-index-index .checkout-container .opc-sidebar {
        width: 100%;
    }
}