/**
 * Shared "size pill" subheading — "Available in 10ml · 30ml".
 *
 * The markup is emitted by eman_size_pills_html() in inc/fragrance-cards.php
 * and is used on templates that are NOT WooCommerce pages too (the Inspired
 * List hero/toolbar, the Oud Al Naramain collection, shop heroes), so the
 * component lives in its own stylesheet and is enqueued on every page instead
 * of hiding inside woocommerce.css.
 *
 * Modifiers:
 *   eman-size-pills--on-dark   light text for dark/photographic backdrops
 *   eman-size-pills--center    centred row
 */

.eman-size-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
}

.eman-size-pills-lead {
    margin-right: 4px;
    color: var(--color-gold);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.eman-size-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 16px;
    border: 1px solid rgba(122, 92, 34, 0.32);
    border-radius: 999px;
    background: rgba(201, 164, 92, 0.12);
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.eman-size-pills--center {
    justify-content: center;
}

.eman-size-pills--on-dark .eman-size-pills-lead {
    color: rgba(244, 235, 221, 0.72);
}

.eman-size-pills--on-dark .eman-size-pill {
    border-color: rgba(201, 164, 92, 0.55);
    background: rgba(201, 164, 92, 0.14);
    color: var(--color-gold-light, #c9a45c);
}