/* Product card badges (Limited Edition + Leaving Soon), stacked top-right —
   opposite the theme's top-left .onsale flash inside .product-card-image
   (already position:relative). Fallback selector covers contexts without
   the .product-card wrapper (e.g. related products). */
.woocommerce .product-card .b4le-badges,
.woocommerce ul.products li.product .b4le-badges {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.b4le-badge {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Urgency badge (card + single product page use the same red as .onsale) */
.b4le-badge--leaving-soon {
    background: #EC2024;
    color: #ffffff;
}

/* Status badge — deliberately a different color from the urgency red so
   the two read as distinct signals (status vs. act-now) when both show. */
.b4le-badge--limited {
    background: #1a1a1a;
    color: #ffffff;
}

/* Single product page Limited Edition badge — inline near the title,
   not absolute-positioned like the card version. */
.b4le-badge--single {
    margin: 8px 0;
}

/* Single product page expiration countdown */
.b4le-countdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: rgba(236, 32, 36, 0.08);
    border: 1px solid #EC2024;
    border-radius: 8px;
}

.b4le-countdown-label {
    margin: 0;
    color: #EC2024;
    font-weight: 700;
    font-size: 0.95rem;
}

.b4le-countdown-timer {
    display: flex;
    gap: 0.9rem;
}

.b4le-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.5rem;
}

.b4le-countdown-unit span {
    font-size: 1.4rem;
    font-weight: 700;
    color: #EC2024;
    line-height: 1;
}

.b4le-countdown-unit small {
    font-size: 0.7rem;
    color: #666666;
    text-transform: uppercase;
    margin-top: 0.15rem;
}

/* PWA app-shell shop-grid cards (b4-pwa-plugin's template-pwa-shop.php) use
   different markup (.card / .card__image) than the desktop theme's
   .product-card, so the badge positioning rules above don't match there.
   .b4pwa-card-image-wrap is a small wrapper the PWA template adds around
   just the card image to establish this positioning context. */
.b4pwa-card-image-wrap {
    position: relative;
}

.b4pwa-card-image-wrap .b4le-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}