﻿/* Image consistency */
.offer-img {
    position: relative;
    padding-top: 20px; /* space under offer-discount label */
    width : 280px !important;
    height : unset !important;

}

.offer-img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* change to 4/3 if you prefer */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px
}

    .offer-img-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* ---------- Product attributes ---------- */
.product-attrs {
    margin-top: 20px;
    margin-bottom: 20px;
}

.product-attrs-title {
    font-weight: 700;
    margin-bottom: 6px;
    display: inline-block;
}

.product-attrs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

    .product-attrs-list li {
        margin: 2px 0;
        display: flex;
        align-items: start;
        gap: 6px;
    }

.attr-label {
    font-weight: 700;
}

.color-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}

.product-attrs-list .color-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

/* ---------- Offer content layout (button at bottom) ---------- */
.offer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.offer-desc {
}

/* ---------- Price section synced with your other pages ---------- */
.offer-desc-price {
    margin-top: 14px;
    border-top: 1px solid rgba(var(--sa-text-rgb),.2);
    padding: 18px 0px 0 0;
}

    .offer-desc-price .discount-column {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .offer-desc-price .price-column {
        line-height: 1.4;
    }

/* ---------- CTA button ---------- */
.offer-button {
    padding-bottom : 30px;
}

    .offer-button a.sa-btn-primary {
        border-radius: var(--sa-btn-radius);
        padding: 15px 14px;
        font-weight: 700;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

/* ---------- Title sizes ---------- */
.se-title h5 {
    font-size: 20px !important;
}

.se-title h6 {
    font-size: 12px !important;
}

.countdown {
    padding-top : 12px;
}

@media (max-width: 767.98px) {
    .offer-content {
        padding-inline: 16px; /* adjust as needed */
    }
}

.moment-offers .countdown-container .countdown-value {
    border-radius: var(--sa-btn-radius);
    background: rgba(var(--sa-body-bg-secondary-rgb),0.4);
    border: 1px solid rgba(var(--sa-text-rgb),.06);
}

.countdown-container .countdown-heading{
    margin-top : 10px;
}

.offer-item-link {
    max-height: 360px; /* your desired height */
    overflow: hidden;
}

    .offer-item-link.is-scroll {
        overflow: auto; /* enable scroll only if needed */
    }

