/**
 * MyPodDesign — Single Product Variation Labels.
 *
 * Renders the "COLOUR: RED" / "SIZE: M" inline value next to each
 * variation label. The base label (`.mypod-single-product .variations
 * th label`) keeps its existing uppercase / small-cap styling defined
 * in single-product.css; this file only styles the new inline pieces
 * and ensures they render on the same baseline as the prefix.
 *
 * @package MyPodDesign
 */

/* The augmented label is composed of three inline spans:
 *   .mypod-sp__var-label-text  — the original prefix ("Colour", "Size", …)
 *   .mypod-sp__var-label-sep   — the visual ":"
 *   .mypod-sp__var-label-value — the live selection ("RED", "M", …)
 *
 * The base rule in single-product.css declares `display: block` on the
 * label, which still works for us — the spans inside it sit inline. We
 * just need to make sure individual spans don't pick up block layout. */
.mypod-single-product .variations th label .mypod-sp__var-label-text,
.mypod-single-product .variations th label .mypod-sp__var-label-sep,
.mypod-single-product .variations th label .mypod-sp__var-label-value {
    display: inline;
}

.mypod-single-product .variations th label .mypod-sp__var-label-sep {
    margin-right: 0.25em;
    opacity: 0.8;
}

.mypod-single-product .variations th label .mypod-sp__var-label-value {
    font-size: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mypod-color-text, #1a1a1a);
}

/* Subtle dash placeholder when no option is currently selected. Keeps
 * the line from visually collapsing while the user is still picking. */
.mypod-single-product .variations th label .mypod-sp__var-label-value:empty::before {
    content: '—';
    opacity: 0.5;
    font-weight: 400;
}