/**
 * "Members Earn X" label — adopts the theme's design language for the
 * original PDP earning label (.rewardpoints-product-view-earning in
 * _extend.less: Rajdhani, bold, uppercase, #5f5f5f, icon gap 7px), scoped
 * per context: PDP (inside .product-extra-info) and listing tiles
 * (.product-item, which are center-aligned).
 */
/*
 * The whole label is an anchor now (see list_earning.phtml), so it has to
 * carry the label's own colour rather than inherit the theme's link blue, and
 * it must not pick up an underline until hover.
 */
.rewardpoints-list-earning,
.rewardpoints-list-earning:visited {
    text-decoration: none;
}

.rewardpoints-list-earning:hover .rewardpoints-list-earning-text,
.rewardpoints-list-earning:focus .rewardpoints-list-earning-text {
    text-decoration: underline;
}

.rewardpoints-list-earning:hover,
.rewardpoints-list-earning:focus {
    color: #1a1a1a;
}

/*
 * inline-flex, not flex: the label is an anchor now, and a block-level one
 * stretched to the full column width — measured 658px for a 350px sentence,
 * which is a lot of invisible clickable space to the right of the text. It
 * hugs its content instead. Tiles centre it via their own text-align.
 */
.rewardpoints-list-earning {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #5f5f5f;
    font-size: 14px;
    line-height: 20px;
}

/*
 * The money value is the half of the label a first-time shopper can actually
 * read, so it stays on the same line wherever there is room and only drops to
 * its own line when there is not. Lighter weight keeps it a clause rather than
 * competing with the point count.
 */
.rewardpoints-list-earning-value {
    font-weight: 600;
    color: #767676;
}

/*
 * Magestore's icon markup: `.rewardpoints-name-img` is the anchor it used to
 * wrap the icon in. That anchor is gone (getImageHtml(false)), so this now
 * matches nothing on our pages — kept because the same class is emitted by
 * other Magestore surfaces that still ask for the anchored form.
 */
.rewardpoints-list-earning .rewardpoints-name-img {
    display: flex;
    align-items: center;
    margin-right: 7px;
}

/* Unanchored icon — the gap the anchor used to provide. */
.rewardpoints-list-earning > img {
    margin-right: 7px;
}

.rewardpoints-list-earning img {
    display: block;
}

/* PDP: sits between "Check stock availability in-store" and "Need some help?" */
.product-extra-info .rewardpoints-list-earning {
    margin: 14px 0 10px;
}

/* Listing tiles: compact, centered like the rest of the tile content */
.product-item .rewardpoints-list-earning {
    justify-content: center;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

/* Magestore's image block hardcodes width:18px inline */
.product-item .rewardpoints-list-earning img {
    width: 14px !important;
}

.product-item .rewardpoints-list-earning .rewardpoints-name-img {
    margin-right: 5px;
}