/*
 * Corsia — make the weight swatches show which one is selected.
 *
 * style.css line 84 sets `background/border/border-radius` on a bare `button`
 * selector with !important. The swatch rules further down the same file carry no
 * !important, so every one of them loses:
 *
 *   .cs-swatch.active { background:#fff }      → overridden by the maroon fill
 *   .cs-swatch.active { border-color:maroon }  → moot, border:none!important
 *   .cs-swatch.active { box-shadow: inset }    → maroon on maroon, invisible
 *   .cs-sw-price      { color:maroon }         → maroon on maroon, invisible
 *
 * The result was a control where choosing a weight changed nothing on screen and
 * the prices were only readable one at a time, on hover.
 *
 * These selectors are three classes deep specifically to beat that bare `button`
 * rule without touching it — rewriting 67 KB of style.css to add one word is the
 * riskier change. Delete this file and the require_once in inc/quickview.php and
 * the control returns to its previous behaviour.
 */

.variations .cs-swatches .cs-swatch {
    background: var(--maroon, #9B2D22) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 9px 14px !important;
    font-weight: 700 !important;
}

/* The price has to be legible on an unselected chip too. Without this the only
   way to compare prices is to hover each option in turn. */
.variations .cs-swatches .cs-swatch .cs-sw-price {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 700 !important;
}

.variations .cs-swatches .cs-swatch:hover {
    background: var(--gold, #C8912F) !important;
    color: var(--ink, #2B2B2B) !important;
}

.variations .cs-swatches .cs-swatch:hover .cs-sw-price {
    color: var(--ink, #2B2B2B) !important;
}

/*
 * Selected. Deliberately NOT the hover colour: "what I am pointing at" and "what
 * I have chosen" must never look the same, or the control still reads as though
 * nothing happened once the mouse moves away — and on a touch screen there is no
 * hover at all, so this is the only state that exists there.
 */
.variations .cs-swatches .cs-swatch.active {
    background: #fff !important;
    color: var(--maroon, #9B2D22) !important;
    border-color: var(--maroon, #9B2D22) !important;
    box-shadow: 0 0 0 3px rgba(155, 45, 34, .18) !important;
}

.variations .cs-swatches .cs-swatch.active .cs-sw-price {
    color: var(--maroon, #9B2D22) !important;
}

/* A second, non-colour signal: colour alone is not an accessible indicator, and
   this one has to survive high-contrast and greyscale modes. */
.variations .cs-swatches .cs-swatch.active .cs-sw-label::after {
    content: " \2713";
    font-weight: 900;
}

/* border:none!important also removed the focus ring, which left the control
   unusable by keyboard. */
.variations .cs-swatches .cs-swatch:focus-visible {
    outline: 3px solid var(--ink, #2B2B2B) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .variations .cs-swatches .cs-swatch {
        transition: none !important;
    }
}