/* Compact sale bar. All colors and sizes remain overrideable from Elementor/site CSS. */
.mst-countdown {
    --mst-countdown-gap: 0px;
    --mst-countdown-font-size: 14px;
    --mst-countdown-radius: 11px;
    --mst-countdown-color: var(--maincolor, #0089eb);
    --mst-countdown-font-weight: 500;
    --mst-countdown-padding: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--mst-countdown-padding);
    border-radius: var(--mst-countdown-radius);
    background: var(--mst-countdown-bg, #f2f9ff);
    color: var(--mst-countdown-color);
    font-family: inherit;
    font-size: var(--mst-countdown-font-size);
    font-weight: var(--mst-countdown-font-weight);
    line-height: 1.7;
}
@supports (background: color-mix(in srgb, blue 5%, white)) {
    .mst-countdown {
        background: var(--mst-countdown-bg, color-mix(in srgb, var(--mst-countdown-color) 5%, white));
    }
}
.mst-countdown .mst-countdown__before,
.mst-countdown .mst-countdown__digits {
    color: var(--mst-countdown-color);
    margin-left: 5px;
    font-weight: var(--mst-countdown-font-weight);
}
.mst-countdown .mst-countdown__before {
    color: var(--mst-countdown-text-color, var(--mst-countdown-color));
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    font-size: inherit;
}
.mst-countdown .mst-countdown__digits {
    color: var(--mst-countdown-timer-color, var(--mst-countdown-color));
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: flex-start;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    gap: var(--mst-countdown-gap);
    margin-right: auto;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
}
.mst-countdown .mst-countdown__unit {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
/* Insert a colon only when another visible unit precedes this one. */
.mst-countdown .mst-countdown__unit:not([hidden]) ~ .mst-countdown__unit:not([hidden])::before {
    content: ":";
    display: inline-block;
    margin: 0 1px;
    color: inherit;
    font: inherit;
}
.mst-countdown .mst-countdown__value {
    color: inherit;
    font: inherit;
    line-height: inherit;
    font-variant-numeric: tabular-nums;
}
/* Preserve accessible unit names without showing English labels beneath the timer. */
.mst-countdown .mst-countdown__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.mst-countdown .mst-countdown__message {
    color: var(--mst-countdown-text-color, var(--mst-countdown-color));
    font: inherit;
}
.mst-countdown .mst-countdown__message:empty {
    display: none;
}

/* Compact row above the loop thumbnail, matching the card's own background. */
.mst-countdown.mst-countdown--archive {
    --mst-countdown-font-size: 12px;
    --mst-countdown-padding: 4px 10px;
    min-height: 28px;
    margin: 0 0 4px;
    background: var(--mst-countdown-bg, transparent);
}

/* Digiland card type 5 stretches every slide to the tallest sale card, while
   its purchase control is anchored to the bottom. Keep each direct price in
   that same footer area even when this card has no visible countdown/del row.
   Scope to cards containing our archive shell; other themes/types are untouched. */
.item .item-area.elm_pg_5:has(.mst-countdown--archive) {
    display: flex;
    flex-direction: column;
}
.item .item-area.elm_pg_5:has(.mst-countdown--archive) > .product-image-area,
.item .item-area.elm_pg_5:has(.mst-countdown--archive) > .product-name {
    flex: 0 0 auto;
}
.item .item-area.elm_pg_5:has(.mst-countdown--archive) > .price {
    margin-top: auto;
    flex: 0 0 auto;
}

/* Digiland's absolute hover image otherwise starts at the top of the link,
   covering the countdown and leaving the first image exposed underneath.
   Give the clock its own auto-sized row, then overlap both photos in row 2.
   The positioned back_img is now the containing block for its absolute image. */
.item .item-area .product-image-area > .product-image:has(> .mst-countdown--archive):has(> .back_img) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
}
.item .item-area .product-image-area > .product-image:has(> .back_img) > .mst-countdown--archive {
    grid-area: 1 / 1;
}
.item .item-area .product-image-area > .product-image:has(> .mst-countdown--archive):has(> .back_img) > img {
    grid-area: 2 / 1;
    min-width: 0;
}
.item .item-area .product-image-area > .product-image:has(> .mst-countdown--archive) > .back_img {
    grid-area: 2 / 1;
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    z-index: 1;
    pointer-events: none;
}
.item .item-area .product-image-area > .product-image:has(> .mst-countdown--archive) > .back_img > img {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Keep hidden states after all layout rules, including the inline units. */
.mst-countdown[hidden],
.mst-countdown [hidden] {
    display: none;
}