body.dark .avp-shell {
    --avp-primary: #8198cc;
    --avp-accent: #72dc3c;
    --avp-canvas: #0f172a;
    --avp-surface: #294139;
    --avp-text: #f8fafc;
    --avp-muted: #aab6c8;
    color: var(--avp-text) !important;
    background: var(--avp-canvas) !important
}

    body.dark .avp-shell:before {
        background: linear-gradient(180deg,color-mix(in srgb,var(--avp-primary) 5%,transparent),transparent 260px) !important
    }

    body.dark .avp-shell h1, body.dark .avp-shell h2, body.dark .avp-shell h3, body.dark .avp-shell strong, body.dark .avp-shell b {
        color: var(--avp-text) !important
    }

    body.dark .avp-shell p, body.dark .avp-shell span, body.dark .avp-shell small, body.dark .avp-shell label, body.dark .avp-shell li {
        color: var(--avp-muted) !important
    }

    body.dark .avp-shell .avp-glass-card, body.dark .avp-shell .avp-cart-row, body.dark .avp-shell .avp-order-panel, body.dark .avp-shell .avp-address-card, body.dark .avp-shell .avp-address-side, body.dark .avp-shell .avp-payment-order-panel, body.dark .avp-shell .avp-bank-card, body.dark .avp-shell .avp-login-card, body.dark .avp-shell .avp-login-side, body.dark .avp-shell .avp-account-v2-sidebar, body.dark .avp-shell .avp-account-v2-hero, body.dark .avp-shell .avp-account-v2-welcome, body.dark .avp-shell .avp-account-v2-info, body.dark .avp-shell .avp-account-v2-orders, body.dark .avp-shell .avp-account-v2-mini-card {
        background: var(--avp-surface) !important;
        border-color: rgba(255,255,255,.09) !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.18) !important
    }

    body.dark .avp-shell input, body.dark .avp-shell textarea, body.dark .avp-shell select {
        background: #153129 !important;
        border-color: #344054 !important;
        color: var(--avp-text) !important
    }

    body.dark .avp-shell .avp-total, body.dark .avp-shell .is-selected, body.dark .avp-shell .is-active {
        background: color-mix(in srgb,var(--avp-primary) 10%,var(--avp-surface)) !important;
        border-color: color-mix(in srgb,var(--avp-primary) 30%,transparent) !important
    }

    body.dark .avp-shell .avp-modal-box, body.dark .avp-account-modal-box {
        background: var(--avp-surface) !important;
        border-color: rgba(255,255,255,.1) !important;
        box-shadow: 0 22px 60px rgba(0,0,0,.38) !important
    }

/* Keep checkout width identical when the night stylesheet loads last. */
@media(min-width:721px) {
    :is(.avp-cart-page,.avp-address-page,.avp-payment-page) {
        padding-inline: 14px !important
    }

        :is(.avp-cart-page,.avp-address-page,.avp-payment-page) > .avp-container {
            width: min(1380px,calc(100% - 28px)) !important;
            max-width: 1380px !important;
            margin-inline: auto !important;
            padding-inline: 0 !important
        }
}

body.dark .avp-shell {
    background-image: url('/websiteimages/main/avp-soft-wash.svg'),linear-gradient(180deg,rgba(129,152,204,.035),transparent 48%) !important;
    background-position: center top,0 0 !important;
    background-size: cover,auto !important;
    background-repeat: no-repeat !important
}

    body.dark .avp-shell .avp-progress-line {
        background: #303b4d !important;
        border-color: #3a4659 !important
    }

        body.dark .avp-shell .avp-progress-line span {
            background: #8198cc !important
        }

    body.dark .avp-shell .avp-address-preview {
        background: linear-gradient(145deg, #2e483f, #2e483f) !important;
        border-color: #344054 !important;
        box-shadow: inset 3px 0 0 #8198cc !important
    }

        body.dark .avp-shell .avp-address-preview .avp-address-line {
            background: #153129 !important;
            border-color: #344054 !important;
            color: #d7deea !important
        }

    body.dark .avp-shell .avp-address-side, body.dark .avp-shell .avp-payment-order-panel {
        background: linear-gradient(145deg,#153129,#153129) !important;
        border-color: #344054 !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.22),inset 0 3px 0 #8198cc !important
    }

    body.dark .avp-shell .avp-modal-box.avp-payment-modal-box {
        background: rgba(23,32,51,.9) !important;
        border-color: rgba(255,255,255,.14) !important;
        box-shadow: 0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1) !important
    }

    body.dark .avp-shell .avp-payment-modal-box .avp-gateway-amount {
        background: linear-gradient(145deg,#202d43,#182337) !important;
        border-color: #3b4960 !important
    }

    body.dark .avp-shell .avp-payment-modal-box .avp-gateway-preview p {
        color: #b6c1d2 !important
    }

    body.dark .avp-shell.avp-address-page .avp-modal-box, body.dark .avp-shell .avp-modal-box.avp-coupon-modal-box {
        background: rgba(23,32,51,.91) !important;
        border-color: rgba(255,255,255,.14) !important;
        box-shadow: 0 30px 80px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.1) !important
    }

    body.dark .avp-shell.avp-address-page .avp-modal-title, body.dark .avp-shell .avp-coupon-modal-head {
        border-color: #344054 !important
    }

    body.dark .avp-shell.avp-address-page .avp-address-book-item {
        background: #153129 !important;
        border-color: #344054 !important
    }

@media(min-width:901px) {
    :is(.avp-account-page-v2,.avp-sale-report-page,.avp-promo-page,.avp-popular-clean-page,.avp-address-book-page,.avp-sale-detail-page,.avp-cart-page,.avp-address-page,.avp-payment-page).avp-shell {
        overflow: visible !important
    }

    .avp-account-page-v2 .avp-account-v2-sidebar, .avp-sale-report-page .avp-account-v2-sidebar, .avp-promo-page .avp-account-v2-sidebar, .avp-popular-clean-page .avp-account-v2-sidebar, .avp-address-book-page .avp-account-v2-sidebar, .avp-sale-detail-page .avp-account-v2-sidebar, .avp-cart-page .avp-order-panel, .avp-address-page .avp-address-side, .avp-payment-page .avp-payment-detailbox {
        position: sticky !important;
        align-self: start !important;
        height: max-content !important;
        max-height: calc(100dvh - 36px) !important;
        z-index: 20 !important
    }
}

/* Preserve desktop sticky side panels when this stylesheet is loaded last. */
@media(min-width:901px) {
    .avp-account-page-v2 .avp-account-v2-sidebar, .avp-sale-report-page .avp-account-v2-sidebar, .avp-promo-page .avp-account-v2-sidebar, .avp-popular-clean-page .avp-account-v2-sidebar, .avp-address-book-page .avp-account-v2-sidebar, .avp-sale-detail-page .avp-account-v2-sidebar, .avp-cart-page .avp-order-panel, .avp-address-page .avp-address-side, .avp-payment-page .avp-payment-detailbox {
        position: sticky !important;
        align-self: start !important;
        height: max-content !important;
        max-height: calc(100dvh - 36px) !important;
        z-index: 20 !important
    }
}


body.dark .avp-payment-page .avp-payment-summary-list div {
    background: linear-gradient(135deg, #294139, #2e483f) !important;
}

body.dark .avp-payment-page .avp-choice-line,
body.dark .avp-payment-page .avp-payment-type {
    background: linear-gradient(145deg, #294139, #2e483f) !important;
}

body.dark .avp-payment-page .avp-invoice-check,
body.dark .avp-payment-page .avp-rule-check {
    background: #294139 !important;
}

body.dark .avp-payment-page .avp-coupon-strip {
    background: linear-gradient(135deg, #294139, #294139) !important;
}

body.dark .avp-payment-page .avp-payment-summary-copy {
    background: transparent !important;
}

body.dark .avp-payment-page .avp-payment-title > b {
    background: #2e483f !important;
}

body.dark .avp-day-card {
    background: transparent !important;
}

body.dark .avp-address-side .avp-summary-line,
body.dark .avp-payment-order-panel .avp-summary-line {
    background: transparent !important;
}

body.dark .avp-address-page .avp-time-option {
    background: transparent !important;
    color: #fff !important;
}

body.dark .avp-account-v2-info dl > div {
    background: transparent !important;
}

body.dark .avp-account-v2-sidebar nav a.is-active {
    background: transparent !important;
}

body.dark .avp-account-v2-mini-card, .avp-sale-report-page .avp-sale-summary-card, .avp-promo-page .avp-promo-summary article, .avp-sale-detail-page .avp-sale-detail-chip {
    background: transparent !important;
}

body.dark .avp-address-book-item {
    background: transparent !important;
}

body.dark .avp-order-note, body.dark .avp-order-note {
    background: transparent !important;
    color: #fff !important;
}