/* Variant pill — used by the product page (size / color / etc.
 * selectors) and the product popup. Was duplicated inline in
 * layouts/storefront.blade.php and storefront/product_page.blade.php
 * with two slightly different definitions (inline-block vs
 * inline-flex). Consolidated to a single flex variant so an icon +
 * label can sit side-by-side inside the same pill when needed; plain
 * text-only pills still render the same. */

.variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1.5px solid #dee2e6;
    border-radius: 20px;
    cursor: pointer;
    font-size: .85rem;
    transition: all .15s;
    user-select: none;
}

.variant-pill:hover { border-color: #6c757d; }

.variant-pill.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Small "+ amount" label tucked next to the pill's main label —
 * used when a variant adds a surcharge to the base price. */
.pill-add-label {
    font-size: .72rem;
    opacity: .75;
}