/**
 * Product card selling-point bullets.
 *
 * Rendered by inc/woo/WooProductHighlights.php inside .product-card__content,
 * between the title and the price. The bullet is the same purple mountain used
 * in the single-product tabs (main.css: .theme-product-tabs ... li::before).
 *
 * Cards flagged .has-card-highlights fill their grid cell and pin the price to
 * the bottom so prices line up across a row even when bullets wrap.
 */

.product-card__highlights {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.product-card__highlight {
    position: relative;
    margin: 0;
    padding-left: 24px;
    color: var(--Violet-Dark, #292642);
    font-family: Avenir, var(--font-family, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.product-card__highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9245 20H4.5407H2L7.68384 9.66676L8.65336 11.0295L12.3884 4L22 20H19.4525H14.9245Z' fill='%235246B8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Equal-height cards: price sits on the bottom edge. */
.has-card-highlights {
    display: flex;
    flex-direction: column;
}

.has-card-highlights > .product-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.has-card-highlights .product-card__image-wrapper {
    flex: 0 0 auto;
}

.has-card-highlights .product-card__content {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.has-card-highlights .product-card__price {
    margin-top: auto;
}

@media (max-width: 576px) {
    .product-card__highlights {
        gap: 4px;
    }

    .product-card__highlight {
        font-size: 13px;
        padding-left: 20px;
    }

    .product-card__highlight::before {
        width: 15px;
        height: 15px;
    }
}