/**
 * Product configurator rail.
 * Match the desktop Call of Duty selector's 148px sticky offset and 24px
 * viewport-bottom breathing room.
 */

@media (min-width: 1025px) {
    html body.single-product .dm-product-purchase-column {
        position: sticky !important;
        top: 148px !important;
        align-self: start !important;
        max-height: calc(100vh - 172px) !important;
        max-height: calc(100dvh - 172px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 88, 88, 0.45) rgba(255, 255, 255, 0.035) !important;
        z-index: 3 !important;
    }

    html body.single-product .dm-product-purchase-column > .dm-product-buy-card {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.single-product .dm-product-purchase-column::-webkit-scrollbar {
        width: 7px !important;
    }

    html body.single-product .dm-product-purchase-column::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.025) !important;
        border-radius: 999px !important;
    }

    html body.single-product .dm-product-purchase-column::-webkit-scrollbar-thumb {
        background: rgba(255, 88, 88, 0.38) !important;
        border-radius: 999px !important;
    }

    /* WCPA menus are rendered above the card while open. Temporarily release
       clipping so the menu is never cut off; normal sticky scrolling resumes
       as soon as it closes. */
    html.dm-wcpa-menu-open body.single-product .dm-product-purchase-column,
    html.dm-wcpa-package-menu-open body.single-product .dm-product-purchase-column {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* The 1025-1199px product layout is two columns. At that width the purchase
   column lives inside the already-sticky sidebar, so the three-column desktop
   rail rules must not make it a shrink-to-fit nested sticky element. */
@media (min-width: 1025px) and (max-width: 1199px) {
    html body.single-product .dm-product-purchase-column {
        position: static !important;
        top: auto !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body.single-product .dm-product-purchase-column .dm-product-buy-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
    html body.single-product .dm-product-purchase-column {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}