/**
 * NEW product badge.
 *
 * Rendered inside article.product-card by inc/woo/WooProductBadge.php
 * (woocommerce_before_shop_loop_item:16, right after the card image) for every
 * product in the "new" product category. Loaded site-wide after the compiled
 * theme CSS ('peaks-styles') because cards can appear on any page.
 *
 * Tokens (main.css :root): --violet-bright #5246B8, --bright-purple #8342fe,
 * --white #fff, --font-family. Card facts: .product-card is position:relative,
 * overflow:hidden, radius 18px; a.product-card__link-cover is z-index 2 and
 * a.product-card__link is z-index 3; the image sits in a 20px light-grey band
 * (#edf0f4), so a 14px inset keeps the badge on neutral space.
 */

.peak-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 12px 4px;
    border-radius: 999px;
    font-family: var(--font-family, "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.peak-badge--new {
    color: var(--white, #fff);
    background: var(--violet-bright, #5246B8);
    background: linear-gradient(120deg, var(--violet-bright, #5246B8) 0%, var(--bright-purple, #8342fe) 100%);
    box-shadow:
        0 4px 12px rgba(82, 70, 184, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* Placement inside the shared product card: top-left, above the cover link. */
.product-card > .peak-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    max-width: calc(100% - 28px);
}

/*
 * WooCommerce's sale flash is filtered to an empty string theme-wide today.
 * If it is ever re-enabled, keep both states readable: NEW stays top-left and
 * the sale flash moves to the top-right of the same card.
 */
.product--is-new .product-card .onsale,
.product-card > .peak-badge--new ~ .onsale {
    left: auto;
    right: 12px;
}

@media (max-width: 576px) {
    .product-card > .peak-badge {
        top: 12px;
        left: 12px;
    }
}