/*
 * 會員限定產品卡片的「會員專屬」標記（evomni/issues#108；PRD Part2 §6.2 B／§6.8 B 第 6 條）；檔末另有 0 元「免費」膠囊。
 *
 * 標記由 page-builder 卡片管線插入在標題元素內最前面（span.ec-members-only-badge），
 * 範本零改動 ⇒ 各列表範本、動態綁定區塊、相關產品區塊共用這一份樣式。
 * 行內排版、跟著標題的字色與字級走，⛔ 不用絕對定位（範本角落已有 SALE／溫層等標記，位置因範本而異）。
 */
.ec-members-only-badge {
    display: inline-block;
    margin-right: 0.4em;
    padding: 0.1em 0.5em;
    border: 1px solid currentColor;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

/*
 * 0 元產品價格位置的「免費」膠囊（片 pc-storefront-free-product-label；PRD Part2 §6.8 D 第 2 條）。
 *
 * 膠囊由 page-builder 換進售價標記（span.ec-free-badge，詳情頁與列表卡片共用）；本檔隨 cart-scripts 載入每個電商動態頁，
 * 獨立商品頁的 .pd-price-free／.product-card__free 在動態頁不載 ⇒ 同款樣式寫在這裡。
 * 動態頁不一定載 tokens.css ⇒ 每個 token 都帶 tokens.css 的值當退路。
 */
.ec-free-badge {
    display: inline-block;
    padding: var(--s-2, 8px) var(--s-5, 20px);
    border-radius: var(--radius-pill, 9999px);
    background: var(--ink-900, #303133);
    color: var(--brand-on, #ffffff);
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    white-space: nowrap;
}