.promoWindow {
    position: fixed;
    display: none;
    z-index: 10;
}

/* Sizes & positions — mobile first.
   !important + extra specificity beats the global `.windowDif { width: 450px !important }`
   set for >= 638px in newCustomStyles.css. */
.promoWindow .windowDif {
    width: 50vw !important;
    box-sizing: border-box;
}

/* Mobile: tour window sits just below these (see .tourWindowWrapper in newCustomStyles.css) */
#promoDuggy      { top: 52px; left: 3vw; }
#promoEverything { top: 76px; right: 3vw; }

.promoWindow .windowDif-body {
    padding: 0;
}

.promoWindow .windowDif-body a {
    display: block;
}

.promoWindow .windowDif-body img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.promoWindow .title-bar-controls {
    flex-shrink: 0;
}

.promoWindow .title-bar-text {
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin-right: 8px;
}

.promoWindow .title-bar-text a {
    color: inherit;
    text-decoration: none;
}

/* Only shown where the title bar has room for it */
.promoWindow .promoWindow-cta {
    display: none;
}

/* Title bar colors */
#promoDuggy .title-bar {
    background: #FF00FF;
}

#promoEverything .title-bar {
    background: linear-gradient(90deg, #8A3F0F, #E0904A 60%, #FFD9A0);
}

/* Tablet */
@media (min-width: 638px) {
    .promoWindow .windowDif {
        width: min(40vw, 60vh, 330px) !important;
    }

    .promoWindow .promoWindow-cta {
        display: inline;
    }

    #promoDuggy      { top: 56px;  left: 4vw; }
    #promoEverything { top: 110px; right: 4vw; }
}

/* Desktop */
@media (min-width: 950px) {
    .promoWindow .windowDif {
        width: min(26vw, 46vh, 400px) !important;
    }

    #promoDuggy      { top: 64px; left: max(90px, 6vw); }
    #promoEverything { top: 96px; right: 5vw; }
}