/* Desktop promotional banners placed in the gutters outside the 1250px content area. */
.side-banners {
    display: none;
}

.side-banners,
.side-banners *,
.side-banners *::before,
.side-banners *::after {
    box-sizing: border-box;
}

@media screen and (min-width: 1602px) {
    .side-banners {
        display: block !important;
        /*
         * The partial is rendered after <main>.  Keeping its coordinate system
         * in the viewport prevents an absolute position from being resolved at
         * the footer on pages whose content is taller than the viewport.
         */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw;
        height: 0;
        z-index: 1001 !important;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: opacity 180ms ease;
    }

    .side-banners.is-ready {
        visibility: visible;
        opacity: 1;
    }

    /* Product listings render this element after the breadcrumb, inside main. */
    .side-banners--category {
        position: sticky !important;
        top: 120px !important;
        margin-top: 16px;
    }

    .side-banner-column {
        position: absolute;
        top: 0;
        width: 160px;
        max-height: calc(100vh - var(--side-banner-top, 120px) - 16px);
        overflow: hidden;
        pointer-events: auto;
    }

    .side-banner-column--left {
        left: max(16px, calc((100vw - 1602px) / 2));
    }

    .side-banner-column--right {
        right: max(16px, calc((100vw - 1602px) / 2));
    }

    .side-banner-item {
        width: 160px;
        margin-bottom: 12px;
    }

    .side-banner-link,
    .side-banner-item img {
        display: block;
        width: 160px;
    }

    .side-banner-item img {
        height: 600px;
        object-fit: cover;
    }

    .side-banners-dismiss {
        position: absolute;
        top: 0;
        right: max(16px, calc((100vw - 1602px) / 2));
        width: 28px;
        height: 28px;
        padding: 0;
        transform: translate(50%, -50%);
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.65);
        color: #fff;
        cursor: pointer;
        font-size: 22px;
        line-height: 26px;
        pointer-events: auto;
    }

    .side-banners--left-only .side-banners-dismiss {
        right: auto;
        left: max(176px, calc((100vw - 1602px) / 2 + 160px));
        transform: translate(-50%, -50%);
        z-index: inherit;
    }

    .side-banners-dismiss:hover,
    .side-banners-dismiss:focus-visible {
        background: rgba(0, 0, 0, 0.9);
    }

    .side-banners[hidden] {
        display: none;
    }
}