/* Approved product SKU variants: progressive enhancement, no client-side identity mutation. */
.storefront-body .product-variant-group {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--p24-line, #eadcda);
}
.storefront-body .product-variant-group-title {
    margin: 0;
    color: var(--p24-ink, #211719);
    font-size: 0.95rem;
    font-weight: 700;
}
.storefront-body .product-variant-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}
.storefront-body .product-variant-group-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 48px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--p24-line, #eadcda);
    border-radius: var(--p24-radius-sm, 10px);
    background: var(--p24-paper, #fff);
    color: var(--p24-ink, #211719);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.storefront-body a.product-variant-group-chip:hover,
.storefront-body a.product-variant-group-chip:focus-visible {
    border-color: var(--p24-red-dark, #c90011);
    color: var(--p24-red-dark, #c90011);
}
.storefront-body .product-variant-group-chip.is-current {
    border: 2px solid var(--p24-red-dark, #c90011);
    color: var(--p24-red-dark, #c90011);
    background: var(--p24-blush, #f8e9e7);
}
.storefront-body a.product-variant-group-chip:focus-visible {
    outline: 2px solid var(--p24-red-dark, #c90011);
    outline-offset: 3px;
}

/* Unavailable variants stay navigable for SEO, comparison and restock checks. */
.storefront-body .product-variant-group-chip.is-unavailable {
    border-style: dashed;
    color: var(--p24-muted, #746d6d);
}
.storefront-body .product-variant-group-chip.is-current.is-unavailable {
    border-style: solid;
}

/* #482: one compact row per option. Stock is a small filled dot (green in
   stock, red out of stock) PLUS the dashed/muted chip and a localised
   sr-only/title text, so status never relies on colour alone and is not
   confused with the SKU's own colour label. */
.storefront-body .product-variant-group-label {
    min-width: 0;
}

.storefront-body .product-variant-stock-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #14845a;
    box-shadow: 0 0 0 2px rgb(20 132 90 / 15%);
}

.storefront-body .product-variant-group-chip.is-unavailable .product-variant-stock-dot {
    background: #bb4747;
    box-shadow: 0 0 0 2px rgb(187 71 71 / 15%);
}

@media (forced-colors: active) {
    .storefront-body .product-variant-stock-dot {
        border: 1px solid CanvasText;
    }
}