/* Star member price badge — appears on shop/product/category listings sitewide */
.smx-star-member-price {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 6px; padding: 3px 10px;
border-radius: 100px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 12px; font-weight: 700;
line-height: 1.4;
text-decoration: none !important;
white-space: nowrap;
vertical-align: middle;
transition: transform .15s ease, box-shadow .15s ease;
}
.smx-star-member-price .smx-star-badge {
font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
font-weight: 800; padding: 2px 7px; border-radius: 100px;
}
.smx-star-member-price.is-active {
background: linear-gradient(135deg, #FBF3E5, #FCD9A0);
color: #78350F;
border: 1px solid rgba(220,160,80,.35);
}
.smx-star-member-price.is-active .smx-star-badge {
background: rgba(255,255,255,.55); color: #B45309;
}
.smx-star-member-price.is-pitch {
background: rgba(220,160,80,.08);
color: #78350F;
border: 1px dashed rgba(220,160,80,.4);
cursor: pointer;
}
.smx-star-member-price.is-pitch:hover {
background: rgba(220,160,80,.14);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(220,160,80,.18);
}
.smx-star-member-price.is-pitch .smx-star-badge {
background: linear-gradient(135deg, #FBD07A, #DCA050); color: #78350F;
}
.smx-star-member-price .woocommerce-Price-amount { font-weight: 700; }
/* On product single pages the price is bigger — make the badge scale a touch */
.single-product .smx-star-member-price { font-size: 13px; padding: 4px 12px; }
.single-product .smx-star-member-price .smx-star-badge { font-size: 10px; padding: 3px 8px; }
/* ------------------------------------------------------------------ *
* On archive / shop / related-product CARDS the price line is narrow.
*
* IMPORTANT DOM NOTE: the non-member "pitch" badge is an . The
* whole card is wrapped in , and the
* HTML parser forbids nested , so it HOISTS our badge OUT of `.price` to be
* a direct child of `li.product`. Therefore we must scope to
* `li.product .smx-star-member-price` (NOT `.price …`, which never matches the
* pitch badge). As a direct flex-column child the badge is block-level, so it
* fills the card width, `flex-wrap:wrap` engages and the amount drops to a
* second line instead of overflowing/clipping ("₹2,3…"). The active-member
* badge is a that stays inside `.price`; the same selector covers it.
* ------------------------------------------------------------------ */
.woocommerce ul.products li.product .smx-star-member-price {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 3px 6px; width: fit-content; max-width: 100%; box-sizing: border-box;
margin: 6px auto 0; /* hug the content and centre it under the price */
padding: 4px 11px; font-size: 11.5px; line-height: 1.25;
white-space: normal; /* still wraps rather than overflowing a narrow card */
}
.woocommerce ul.products li.product .smx-star-member-price .smx-star-badge {
flex: 0 0 auto; white-space: nowrap; /* keep the "★ Member" chip intact */
font-size: 8.5px; letter-spacing: .03em; padding: 2px 6px;
}
.woocommerce ul.products li.product .smx-star-member-price .woocommerce-Price-amount {
white-space: nowrap; font-size: 12px; font-weight: 800;
}
/* Let the price container shrink below content width (grid-track safety), and keep
the MRP/sale line + member pill centred so the member and non-member states read
as the same, balanced block. */
.woocommerce ul.products li.product .price { min-width: 0; max-width: 100%; text-align: center; }
/* ------------------------------------------------------------------ *
* Single-product buy box member line — injected by star-pdp.js as a
* sibling right after the theme's `.sm-buybox-price` subtotal box.
* It mirrors the qty-driven subtotal, so member price + savings update
* live with the quantity stepper. Full-width row under the subtotal.
* ------------------------------------------------------------------ */
.smx-star-buybox-member {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
width: 100%; box-sizing: border-box;
margin: 10px 0 0; padding: 10px 14px;
border-radius: 12px;
background: linear-gradient(135deg, #FBF3E5, #FCE9CC);
border: 1px solid rgba(220,160,80,.32);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13.5px; line-height: 1.35; color: #78350F;
text-decoration: none !important;
}
.smx-star-buybox-member[hidden] { display: none !important; } /* beat theme a{display:…} */
.smx-star-buybox-member.is-pitch { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.smx-star-buybox-member.is-pitch:hover { box-shadow: 0 6px 16px rgba(220,160,80,.22); transform: translateY(-1px); }
.smx-star-buybox-member .smx-star-bbm-ic { color: #DCA050; font-size: 16px; line-height: 1; flex-shrink: 0; }
.smx-star-buybox-member .smx-star-bbm-txt { color: #78350F !important; }
.smx-star-buybox-member .smx-star-bbm-amt { font-weight: 800; color: #78350F; white-space: nowrap; }
.smx-star-buybox-member .smx-star-bbm-save {
display: inline-block; padding: 2px 9px; border-radius: 100px;
background: rgba(21,128,61,.12); color: #15803D;
font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.smx-star-buybox-member .smx-star-bbm-cta {
margin-left: auto; padding: 4px 12px; border-radius: 100px;
background: linear-gradient(135deg, #FBD07A, #DCA050); color: #6B3B08 !important;
font-size: 12px; font-weight: 800; white-space: nowrap;
}