/* ============================================
   Checkout Page - Dark Theme Fixes
   ============================================ */

/* Order Summary Box - Dark Background */
.opc-block-summary {
    background-color: #0f1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.opc-block-summary .title {
    color: #ffffff !important;
    font-size: 18px !important;
}

.opc-block-summary .block.items-in-cart {
    background-color: transparent !important;
}

.opc-block-summary .block.items-in-cart > .title {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.opc-block-summary .block.items-in-cart > .title strong {
    color: #d6d6d6 !important;
    font-size: 14px !important;
}

.opc-block-summary .minicart-items-wrapper {
    background-color: transparent !important;
}

.opc-block-summary .product-item-name {
    color: #ffffff !important;
}

.opc-block-summary .details-qty .label,
.opc-block-summary .details-qty .value {
    color: #d6d6d6 !important;
}

.opc-block-summary .price {
    color: #9ec3ff !important;
}

/* Progress Bar - Properly styled for dark theme */
.opc-progress-bar {
    margin: 0 0 30px 0 !important;
    padding: 20px 0 !important;
    counter-reset: i !important;
}

.opc-progress-bar-item {
    display: inline-block !important;
    position: relative !important;
    text-align: center !important;
    vertical-align: top !important;
    width: 150px !important;
}

/* Horizontal connecting line (on item:before) */
.opc-progress-bar-item:before {
    content: '' !important;
    position: absolute !important;
    top: 19px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #333333 !important;
    border: none !important;
    border-radius: 0 !important;
}

.opc-progress-bar-item:first-child:before {
    border-radius: 3px 0 0 3px !important;
}

.opc-progress-bar-item:last-child:before {
    border-radius: 0 3px 3px 0 !important;
}

.opc-progress-bar-item._active:before,
.opc-progress-bar-item._complete:before {
    background: #9ec3ff !important;
}

/* Step label text */
.opc-progress-bar-item > span {
    display: inline-block !important;
    padding-top: 50px !important;
    font-size: 13px !important;
    color: #666666 !important;
    word-wrap: break-word !important;
    font-weight: 500 !important;
    width: 100% !important;
}

.opc-progress-bar-item._active > span {
    color: #9ec3ff !important;
    font-weight: 600 !important;
}

.opc-progress-bar-item._complete > span {
    color: #5a9a5a !important;
}

/* Outer circle (span:before) */
.opc-progress-bar-item > span:before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: -19px !important;
    width: 38px !important;
    height: 38px !important;
    background: #333333 !important;
    border: 1px solid #444444 !important;
    border-radius: 50% !important;
}

.opc-progress-bar-item._active > span:before,
.opc-progress-bar-item._complete > span:before {
    background: #9ec3ff !important;
    border-color: #9ec3ff !important;
}

/* Inner circle with number (span:after) */
.opc-progress-bar-item > span:after {
    content: counter(i) !important;
    counter-increment: i !important;
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    margin-left: -13px !important;
    width: 26px !important;
    height: 26px !important;
    background: #0f1214 !important;
    border: none !important;
    border-radius: 50% !important;
    color: #888888 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    text-align: center !important;
}

.opc-progress-bar-item._active > span:after {
    background: #0f1214 !important;
    color: #9ec3ff !important;
}

.opc-progress-bar-item._complete > span:after {
    content: '✓' !important;
    background: #0f1214 !important;
    color: #5a9a5a !important;
}

/* Remove any extra :after on the item itself */
.opc-progress-bar-item:after {
    display: none !important;
}

/* Checkout container - centered and spacious */
.checkout-container {
    padding: 20px 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.opc-wrapper {
    padding-right: 30px !important;
}

.opc-wrapper .step-content {
    padding: 20px 0 !important;
}

/* Main Shipping Address wrapper - ONE container with rounded corners */
.checkout-shipping-address {
    background-color: #0f1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 25px !important;
}

/* Checkout step title */
.checkout-shipping-address .step-title,
.checkout-payment-method .step-title,
.opc-wrapper .step-title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Remove inner box styling - make transparent */
.checkout-shipping-address .form-login,
.checkout-shipping-address .form.form-login,
.checkout-shipping-address .fieldset {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Shipping Methods Section */
.checkout-shipping-method {
    background-color: #0f1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin-top: 20px !important;
}

.checkout-shipping-method .step-title {
    font-size: 20px !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Shipping method table */
.table-checkout-shipping-method {
    width: 100% !important;
    background-color: transparent !important;
}

.table-checkout-shipping-method tbody tr {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.table-checkout-shipping-method tbody tr:last-child {
    border-bottom: none !important;
}

.table-checkout-shipping-method td {
    padding: 12px 10px !important;
    color: #d6d6d6 !important;
    vertical-align: middle !important;
}

.table-checkout-shipping-method .col-price {
    color: #9ec3ff !important;
    font-weight: 600 !important;
}

.table-checkout-shipping-method .col-method {
    font-weight: 500 !important;
}

/* Radio buttons in shipping methods */
.table-checkout-shipping-method input[type="radio"] {
    accent-color: #9ec3ff !important;
}

/* Form field spacing */
.checkout-shipping-address .field {
    margin-bottom: 15px !important;
}

/* Next button styling */
.checkout-shipping-method .actions-toolbar {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.checkout-shipping-method .action.primary {
    background-color: #9ec3ff !important;
    border: none !important;
    color: #0b0d0e !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.checkout-shipping-method .action.primary:hover {
    background-color: #b8d4ff !important;
}

/* ============================================
   Payment Method - Clean Container Style
   ============================================ */

/* Main Payment Method wrapper - ONE container with rounded corners */
.checkout-payment-method {
    background-color: #0f1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin-top: 20px !important;
}

/* Remove inner box styling - make transparent */
.checkout-payment-method .payment-methods,
.checkout-payment-method .payment-method,
.checkout-payment-method .payment-method-content,
.checkout-payment-method .fieldset {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.checkout-payment-method .payment-method {
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.checkout-payment-method .payment-method:last-child {
    border-bottom: none !important;
}

.checkout-payment-method .payment-method-title {
    color: #ffffff !important;
}

.checkout-payment-method .payment-method-title label {
    color: #ffffff !important;
}

/* Payment method radio buttons */
.checkout-payment-method input[type="radio"] {
    accent-color: #9ec3ff !important;
}

/* Place Order button */
.checkout-payment-method .action.primary.checkout,
.checkout-payment-method .action.primary {
    background-color: #9ec3ff !important;
    border: none !important;
    color: #0b0d0e !important;
    padding: 14px 30px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.checkout-payment-method .action.primary:hover {
    background-color: #b8d4ff !important;
}

/* ============================================
   Minicart Dark Theme Styles
   ============================================ */

/* Main minicart container */
.block-minicart,
.block.block-minicart,
#minicart-content-wrapper {
    background: #0f1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Minicart title */
.block-minicart .block-title,
.block-minicart .block-title .text,
.block-minicart .block-title .qty {
    color: #ffffff !important;
    background: transparent !important;
}

.block-minicart .block-title {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Block content */
.block-minicart .block-content {
    background: #0f1214 !important;
    padding: 16px 20px !important;
}

/* Close button */
.block-minicart .action.close {
    color: #bdbdbd !important;
    background: transparent !important;
}

.block-minicart .action.close:hover {
    color: #ffffff !important;
}

.block-minicart .action.close:before {
    color: inherit !important;
}

/* Items total count */
.block-minicart .items-total,
.block-minicart .items-total .count {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Subtotal section */
.block-minicart .subtotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    margin: 12px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}

.block-minicart .subtotal .label,
.block-minicart .subtotal .label span {
    color: #d6d6d6 !important;
    font-weight: 600 !important;
}

.block-minicart .subtotal .price,
.block-minicart .subtotal .amount .price {
    color: #9ec3ff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* Minicart items wrapper */
.block-minicart .minicart-items-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow: visible !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Product items list */
.block-minicart .minicart-items {
    background: transparent !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.block-minicart .minicart-items .item.product {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}

.block-minicart .minicart-items .item.product:last-child {
    border-bottom: none !important;
}

/* Product container */
.block-minicart .minicart-items .product {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Product image */
.block-minicart .product-image-container,
.block-minicart .product-image-wrapper {
    background: #1a1d20 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.block-minicart .product-image-photo {
    max-width: 100% !important;
    height: auto !important;
}

/* Product item photo link */
.block-minicart .product-item-photo {
    flex-shrink: 0 !important;
}

/* Product details */
.block-minicart .product-item-details {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
}

/* Product name */
.block-minicart .product-item-name,
.block-minicart .product-item-name a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.block-minicart .product-item-name a:hover {
    color: #9ec3ff !important;
}

/* Product pricing */
.block-minicart .product-item-pricing {
    margin-top: 8px !important;
}

.block-minicart .product-item-pricing .price,
.block-minicart .minicart-price .price {
    color: #d6d6d6 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Qty section */
.block-minicart .details-qty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.block-minicart .details-qty .label {
    color: #bdbdbd !important;
    font-size: 13px !important;
}

.block-minicart .details-qty .item-qty,
.block-minicart .details-qty input {
    background: #1a1d20 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    width: 50px !important;
    padding: 6px 8px !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* Product actions (Edit/Remove) */
.block-minicart .product.actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.block-minicart .product.actions > .primary,
.block-minicart .product.actions > .secondary {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.block-minicart .action.edit,
.block-minicart .action.delete {
    color: #9ec3ff !important;
    font-size: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    vertical-align: top !important;
}

.block-minicart .action.edit:before,
.block-minicart .action.delete:before {
    color: inherit !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    position: relative;
}

.block-minicart .action.edit:before {
    top: 0;
}

.block-minicart .action.delete:before {
    top: 2px;
}

.block-minicart .action.edit:hover,
.block-minicart .action.delete:hover {
    color: #e7f0ff !important;
}

/* Checkout button */
.block-minicart .action.primary.checkout,
.block-minicart #top-cart-btn-checkout {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    text-align: center !important;
}

.block-minicart .action.primary.checkout:hover,
.block-minicart #top-cart-btn-checkout:hover {
    background: rgba(158, 195, 255, 0.15) !important;
    border-color: #9ec3ff !important;
}

/* View and Edit Cart link */
.block-minicart .action.viewcart,
.block-minicart .actions .secondary a {
    color: #9ec3ff !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
}

.block-minicart .action.viewcart:hover,
.block-minicart .actions .secondary a:hover {
    color: #e7f0ff !important;
    text-decoration: underline !important;
}

/* ============================================
   Storefront UI refinement pass
   ============================================ */

/* Magento renders a shipping-method LI and a nested DIV with the same class.
   Keep the outer card and flatten the inner duplicate container. */
#opc-shipping_method > .checkout-shipping-method {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* One intentional divider under the title is enough. */
.checkout-shipping-method .actions-toolbar {
    border-top: 0 !important;
    padding-top: 0 !important;
}

.table-checkout-shipping-method tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Match checkout actions to the store's established outlined buttons. */
.checkout-shipping-method .action.primary,
.checkout-payment-method .action.primary.checkout,
.checkout-payment-method .action.primary,
.block-minicart .action.primary.checkout,
.block-minicart #top-cart-btn-checkout {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    text-align: center !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.checkout-shipping-method .action.primary:hover,
.checkout-shipping-method .action.primary:focus,
.checkout-payment-method .action.primary:hover,
.checkout-payment-method .action.primary:focus,
.block-minicart .action.primary.checkout:hover,
.block-minicart .action.primary.checkout:focus,
.block-minicart #top-cart-btn-checkout:hover,
.block-minicart #top-cart-btn-checkout:focus {
    background: rgba(158, 195, 255, 0.15) !important;
    border-color: #9ec3ff !important;
    color: #ffffff !important;
}

/* Replace the inherited green icon-font glyph with a crisp branded badge. */
.message-success.success.message,
.message.success {
    background: rgba(60, 130, 255, 0.1) !important;
    border: 1px solid rgba(116, 169, 255, 0.28) !important;
    border-radius: 0 !important;
    color: #e7f0ff !important;
    padding: 14px 18px !important;
}

.message-success.success.message > div,
.message.success > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 24px !important;
    padding: 0 !important;
}

.message-success.success.message > div:before,
.message.success > div:before {
    content: '\2713' !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #9ec3ff !important;
    color: #0b0d0e !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.message-success.success.message a,
.message.success a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Equal icon-button boxes remove the edit/delete baseline mismatch. */
.block-minicart #minicart-content-wrapper .product.actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
}

.block-minicart #minicart-content-wrapper .product.actions > .primary,
.block-minicart #minicart-content-wrapper .product.actions > .secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
}

.block-minicart #minicart-content-wrapper .action.edit,
.block-minicart #minicart-content-wrapper .action.delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9ec3ff !important;
    line-height: 1 !important;
}

.block-minicart #minicart-content-wrapper .action.edit:before,
.block-minicart #minicart-content-wrapper .action.delete:before {
    position: static !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    line-height: 22px !important;
    margin: 0 !important;
    text-align: center !important;
}

.block-minicart #minicart-content-wrapper .action.edit:hover,
.block-minicart #minicart-content-wrapper .action.edit:focus,
.block-minicart #minicart-content-wrapper .action.delete:hover,
.block-minicart #minicart-content-wrapper .action.delete:focus {
    background: rgba(158, 195, 255, 0.12) !important;
    border-color: #9ec3ff !important;
    color: #ffffff !important;
}

/* ============================================
   Responsive Checkout + Minicart Polish
   ============================================ */

/* The popup is the card. Keep Magento's inner Knockout wrapper flat so the
   minicart does not render as a card nested inside another card. */
.block-minicart #minicart-content-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Stack these two summary rows on the same left/right grid instead of letting
   Magento's floated item count squeeze the subtotal into the remaining space. */
.block-minicart .block-content > .items-total {
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.block-minicart .block-content > .subtotal {
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 12px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media only screen and (max-width: 767px) {
    /* Let checkout use the width already provided by .page-main rather than
       subtracting another 60px from a small viewport. */
    .checkout-index-index .checkout-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 0 24px !important;
    }

    .checkout-index-index .opc-progress-bar {
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 14px 0 8px !important;
        white-space: nowrap !important;
    }

    .checkout-index-index .opc-progress-bar-item {
        flex: 1 1 50% !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .checkout-index-index .opc-progress-bar-item > span {
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .checkout-index-index .opc-estimated-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 72px !important;
        margin: 0 0 18px !important;
        padding: 12px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: transparent !important;
    }

    .checkout-index-index .opc-estimated-wrapper:before,
    .checkout-index-index .opc-estimated-wrapper:after {
        display: none !important;
    }

    .checkout-index-index .opc-estimated-wrapper .estimated-block,
    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper {
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .checkout-index-index .opc-estimated-wrapper .estimated-block {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper {
        flex: 0 0 auto !important;
    }

    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper .action.showcart {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(158, 195, 255, 0.5) !important;
        border-radius: 4px !important;
        background: rgba(158, 195, 255, 0.08) !important;
        color: #9ec3ff !important;
        box-shadow: none !important;
    }

    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper .action.showcart:hover,
    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper .action.showcart:focus {
        border-color: #9ec3ff !important;
        background: rgba(158, 195, 255, 0.16) !important;
        color: #ffffff !important;
    }

    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper .action.showcart:before {
        position: static !important;
        display: block !important;
        margin: 0 !important;
        color: inherit !important;
        font-size: 24px !important;
        line-height: 24px !important;
    }

    .checkout-index-index .opc-estimated-wrapper .minicart-wrapper .action.showcart .counter.qty {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border: 2px solid #0b0d0e !important;
        border-radius: 11px !important;
        background: #9ec3ff !important;
        color: #0b0d0e !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }

    .checkout-index-index .opc-wrapper {
        float: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    .checkout-index-index .checkout-shipping-address,
    .checkout-index-index .checkout-shipping-method,
    .checkout-index-index .checkout-payment-method,
    .checkout-index-index .opc-block-summary {
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 20px 18px !important;
    }

    .checkout-index-index .table-checkout-shipping-method td {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

/* ============================================
   Checkout navigation, address cards, and actions
   ============================================ */

/* Keep the two checkout steps centered over the checkout content. */
.checkout-index-index .opc-progress-bar {
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Replace Magento's float-based saved-address layout with an even grid. */
.checkout-index-index .shipping-address-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.checkout-index-index .shipping-address-item {
    float: none !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 238px !important;
    margin: 0 !important;
    padding: 20px 20px 78px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.015) !important;
    color: #ffffff !important;
    line-height: 1.9 !important;
    transition: border-color 160ms ease, background-color 160ms ease !important;
}

.checkout-index-index .shipping-address-item.selected-item {
    border-color: #9ec3ff !important;
    background: rgba(47, 115, 210, 0.08) !important;
}

.checkout-index-index .shipping-address-item.selected-item:after {
    background: #2f73d2 !important;
    color: #ffffff !important;
}

.checkout-index-index .shipping-address-item a {
    color: #9ec3ff !important;
}

/* Checkout actions that otherwise inherit Magento's white button. Match the
   store's established transparent, square, outlined button treatment. */
.checkout-index-index .shipping-address-item .action-select-shipping-item,
.checkout-index-index .new-address-popup .action-show-popup,
.checkout-index-index .checkout-payment-method .action-edit-address,
.checkout-index-index .checkout-payment-method .action-update,
.checkout-index-index .modal-popup .action-save-address,
.checkout-index-index .payment-option .action-apply,
.checkout-index-index .authentication-wrapper .action-login,
.checkout-index-index .form-login .action.login {
    box-sizing: border-box !important;
    vertical-align: middle !important;
    min-width: 90px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.checkout-index-index .shipping-address-item .action-select-shipping-item:hover,
.checkout-index-index .shipping-address-item .action-select-shipping-item:focus,
.checkout-index-index .new-address-popup .action-show-popup:hover,
.checkout-index-index .new-address-popup .action-show-popup:focus,
.checkout-index-index .checkout-payment-method .action-edit-address:hover,
.checkout-index-index .checkout-payment-method .action-edit-address:focus,
.checkout-index-index .checkout-payment-method .action-update:hover,
.checkout-index-index .checkout-payment-method .action-update:focus,
.checkout-index-index .modal-popup .action-save-address:hover,
.checkout-index-index .modal-popup .action-save-address:focus,
.checkout-index-index .payment-option .action-apply:hover,
.checkout-index-index .payment-option .action-apply:focus,
.checkout-index-index .authentication-wrapper .action-login:hover,
.checkout-index-index .authentication-wrapper .action-login:focus,
.checkout-index-index .form-login .action.login:hover,
.checkout-index-index .form-login .action.login:focus {
    border-color: #9ec3ff !important;
    background: rgba(158, 195, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.checkout-index-index .shipping-address-item .action-select-shipping-item > span,
.checkout-index-index .new-address-popup .action-show-popup > span,
.checkout-index-index .checkout-payment-method .action-edit-address > span,
.checkout-index-index .checkout-payment-method .action-update > span,
.checkout-index-index .modal-popup .action-save-address > span,
.checkout-index-index .payment-option .action-apply > span,
.checkout-index-index .authentication-wrapper .action-login > span,
.checkout-index-index .form-login .action.login > span {
    color: inherit !important;
}

/* A disabled action should look unavailable without turning into a white box. */
.checkout-index-index .checkout-payment-method .action-update:disabled,
.checkout-index-index .checkout-payment-method .action-update[disabled],
.checkout-index-index .modal-popup .action-save-address:disabled,
.checkout-index-index .modal-popup .action-save-address[disabled],
.checkout-index-index .payment-option .action-apply:disabled,
.checkout-index-index .payment-option .action-apply[disabled] {
    border-color: rgba(158, 195, 255, 0.28) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.56) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Keep every saved-address action on the same baseline. */
.checkout-index-index .shipping-address-item .action-select-shipping-item {
    position: absolute !important;
    left: auto !important;
    right: 20px !important;
    bottom: 18px !important;
    width: auto !important;
}

.checkout-index-index .shipping-address-item .edit-address-link {
    position: absolute !important;
    bottom: 30px !important;
    left: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #9ec3ff !important;
    font-weight: 600 !important;
}

.checkout-index-index .new-address-popup {
    display: flex !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
}

/* Align billing and modal actions without changing their Knockout behavior. */
.checkout-index-index .checkout-billing-address .actions-toolbar > .primary,
.checkout-index-index .modal-popup .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
}

.checkout-index-index .checkout-billing-address .actions-toolbar > .primary {
    float: none !important;
    width: 100% !important;
}

.checkout-index-index .checkout-billing-address .action-update {
    order: 2 !important;
}

.checkout-index-index .checkout-billing-address .action-cancel {
    order: 1 !important;
}

.checkout-index-index .checkout-billing-address .action-cancel,
.checkout-index-index .modal-popup .action-hide-popup,
.checkout-index-index .payment-option .action-cancel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9ec3ff !important;
    font-weight: 600 !important;
}

.checkout-index-index .checkout-billing-address .action-cancel:hover,
.checkout-index-index .checkout-billing-address .action-cancel:focus,
.checkout-index-index .modal-popup .action-hide-popup:hover,
.checkout-index-index .modal-popup .action-hide-popup:focus,
.checkout-index-index .payment-option .action-cancel:hover,
.checkout-index-index .payment-option .action-cancel:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

@media only screen and (max-width: 767px) {
    .checkout-index-index .shipping-address-items {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .checkout-index-index .shipping-address-item {
        min-height: 0 !important;
        padding: 18px 18px 76px !important;
    }

    .checkout-index-index .shipping-address-item .action-select-shipping-item {
        left: auto !important;
        right: 18px !important;
        bottom: 16px !important;
        width: auto !important;
    }

    .checkout-index-index .new-address-popup .action-show-popup {
        width: auto !important;
    }

    /* ParadoxLabs' inherited 80px year width clips its label and arrow. */
    .checkout-index-index .payment-method select[name="payment[cc_exp_year]"] {
        box-sizing: border-box !important;
        width: 108px !important;
        min-width: 108px !important;
        padding-right: 32px !important;
    }
}