/**
 * Subscription-option benefit line (product category: ED Injections).
 *
 * Rendered by inc/woo/WooEdInjectionsBenefit.php inside the subscription
 * option's existing .product-purchase-option__content column, so it inherits
 * the bordered card, the selected-state tint and the label's click target.
 *
 * Loaded only on products in that category, so everything here is
 * category-scoped by virtue of the enqueue - no extra selectors needed.
 *
 * Colours are the existing purchase-option tokens: #6057A6 (PeakNow purple)
 * for the tick, #777 (the .product-purchase-option__note secondary tone) for
 * the copy, so the line stays subordinate to the title and price above it.
 *
 * Spacing note: the price line above no longer carries the 32px bottom margin
 * it used to inherit from the main product price (see
 * assets/css/product-purchase-options.css), so the small margin below is the
 * whole gap - the message now reads as part of the subscription offer.
 */

.product-purchase-option__benefit {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: #777;
    /* Never inherit the title's weight/colour if the markup order changes. */
    text-transform: none;
    letter-spacing: normal;
}

.product-purchase-option__benefit-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    /* Optically centre the tick on the first line of text. */
    margin-top: 3px;
    color: #6057A6;
}

.product-purchase-option__benefit-text {
    /* Allow the text to shrink inside the flex row instead of overflowing. */
    min-width: 0;
    overflow-wrap: break-word;
}

/* Matches the breakpoint the purchase-option block already uses. */
@media (max-width: 767px) {
    .product-purchase-option__benefit {
        margin-top: 6px;
        gap: 6px;
        font-size: 13px;
        line-height: 1.45;
    }

    .product-purchase-option__benefit-icon {
        margin-top: 2px;
    }
}