/* ------------------------------------------------------------------
   Sale theme: campaign overrides for the active sale banners
   (Pre-Black Friday: light yellow images, maroon text).
   Loaded last in _Layout_v2 and _Layout_DesignLab, after each page's own
   stylesheets, so these rules win over the originals they repeat.
   For a new campaign, edit or remove this file; the original CSS files
   are untouched. Home hero banner styles live in banner.css.
------------------------------------------------------------------ */

/* ---------- Header: Design Lab pill (desktop) ---------- */
@media (min-width: 768px) {
    a.newBadgeBack[href="/designlab"] {
        background: #6f1d23;
        color: #ecd06f !important;
    }
}

/* ---------- Sale timer text (_SaleTimeLine: product, diamond detail, drawer) ---------- */
.global-Timer-txt-color {
    color: #6f1d23 !important;
}

.global-Timer-dot-color {
    background: #6f1d23 !important;
}

/* ---------- Shop listing: sale banner card (.gridBanner from site.js) ---------- */
.countdownSection .countdownContent .countdownTitleContainer p,
.countdownSection .countdownContent .timer .time-item .time-label {
    color: #6f1d23;
}

.countdownSection .countdownContent .timer .timerSeperator .dot {
    background: #6f1d23;
}

/* ---------- Product detail: no dark overlay on the light banner ---------- */
.luvanshNewPage .productDetailSection .rightMainContainer .countdownSection::before {
    background: none;
}

/* ---------- Diamond detail + diamond drawer: no dark overlay ---------- */
.countdownSection {
    background-image: var(--desktop-banner);
}

/* Diamond drawer is narrow: use the mobile banner (gift boxes in its right half) fitted to the height */
.scrollParent .countdownSection {
    background-image: var(--mobile-banner);
    background-color: #ebce72;
    background-size: auto 100%;
    background-position: right center;
}

@media screen and (max-width: 1090px) {
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection {
        background-image: var(--mobile-banner);
        background-color: #ebce72;
    }
}

/* ---------- Mobile: text in the left half, gift boxes on the right of the mobile image ---------- */
@media screen and (max-width: 601px) {
    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection {
        background-image: var(--mobile-bg);
        background-color: #ebce72;
        background-size: auto 100%;
        background-position: right center;
    }

    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection {
        background-position: right center;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection > *,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection > * {
        max-width: 48%;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .countdownTitleContainer p,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .countdownTitleContainer p {
        font-size: 16px;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .couponContainer .couponTitle,
    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .couponContainer .couponValue,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .couponContainer .couponTitle,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .couponContainer .couponValue {
        font-size: 12px;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .timer,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .timer {
        gap: 2px;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .timer .time-item .time-box,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .timer .time-item .time-box {
        height: 30px;
        width: 30px;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .timer .time-item .time-box .countdownValue,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .timer .time-item .time-box .countdownValue {
        font-size: 15px;
    }

    .luvanshNewPage .productDetailSection .rightMainContainer .countdownSection .timer .time-item .time-label,
    .luvanshNewPage .diamondProductDetailSection .rightMainContainer .countdownSection .timer .time-item .time-label {
        font-size: 9px;
    }
}