/* ══════════════════════════════════════════════════════════════
   Vanguard — Variation swatches
   Scoped so it can't affect other elements.

   The selected tile is a solid orange fill with white text, so it
   reads as clearly different from both the resting and hover
   states. !important on the selected rule only, because the Hub
   theme sets its own background on elements in this area.
   ══════════════════════════════════════════════════════════════ */

.hub-swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0;
    clear: both;
}

/* ── Resting ────────────────────────────────────────────────── */
.hub-swatch-item {
    padding: 5px 20px;
    border: 2px solid #ececec;
    background-color: #fff;
    color: #222;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    border-radius: 4px;
    text-align: center;
    min-width: 60px;
    user-select: none;
}

/* ── Hover — a light tint, deliberately NOT the selected fill ─ */
.hub-swatch-item:hover {
    border-color: #EA801A;
    background-color: #FDF1E4;
    color: #222;
}

.hub-swatch-item:focus-visible {
    outline: 2px solid #EA801A;
    outline-offset: 2px;
}

/* ── Selected — solid orange, white text ────────────────────── */
.hub-swatch-item.is-active,
.hub-swatch-item.is-active:hover {
    background-color: #EA801A !important;
    border-color: #EA801A !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(234, 128, 26, .35);
}

/* Anything the theme might drop inside the tile inherits the
   white text too, so a nested span can't stay dark on orange. */
.hub-swatch-item.is-active * {
    color: #fff !important;
}

/* Keep WooCommerce's "Clear" link from breaking the layout. */
.variations .reset_variations {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #ff0000;
}