:root {
    --omfvs-swatch-bg: #f9fafb;
    --omfvs-swatch-bg-hover: #111827;
    --omfvs-swatch-border: #e5e7eb;
    --omfvs-swatch-text: #111827;
    --omfvs-swatch-text-active: #ffffff;

    --omfvs-btn-primary-bg: #111827;
    --omfvs-btn-accent-bg: #f97316;
    --omfvs-btn-text: #ffffff;

    --omfvs-radius-pill: 999px;
    --omfvs-font-size: 13px;
}

/* --- SINGLE PRODUCT CLEANUP --- */

/* Hide attribute labels like "Adult Sizes" etc. */
.variations_form .label {
    display: none !important;
}

/* Hide "Clear" link */
.variations_form .reset_variations {
    display: none !important;
}

/* Hide original selects but keep them for WC JS */
.omfvs-swatch-select-wrap {
    position: relative;
}
.omfvs-swatch-select-wrap select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}

/* --- GENERIC SWATCH STYLE (single + archive) --- */

.omfvs-swatch-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    max-width: 100%;
    box-sizing: border-box;
}

.omfvs-swatch {
    border-radius: var(--omfvs-radius-pill);
    padding: 5px 12px;
    min-width: 32px;
    font-size: var(--omfvs-font-size);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--omfvs-swatch-bg);
    color: var(--omfvs-swatch-text);
    border: 1px solid var(--omfvs-swatch-border);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
    white-space: nowrap;
}

.omfvs-swatch:hover {
    background: #e5e7eb;
    border-color: #cbd5f5;
    transform: translateY(-1px);
}

/* Selected swatch */
.omfvs-swatch-selected {
    background: var(--omfvs-swatch-bg-hover);
    color: var(--omfvs-swatch-text-active);
    border-color: var(--omfvs-swatch-bg-hover);
    transform: translateY(-1px);
}

/* --- ARCHIVE / SHOP / SEARCH SHORTCODE FORM --- */

/* Keep the form compact, full width of card, no weird flex from theme */
.omfvs-archive-variations-form {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
}

/* If inside Bricks product cards, make sure we don't blow the grid */
.brxe-post .omfvs-archive-variations-form,
.woocommerce ul.products li.product .omfvs-archive-variations-form {
    margin-top: 8px;
}

/* All attribute groups stacked tightly */
.omfvs-archive-swatches {
    margin: 0 0 6px 0;
}

.omfvs-archive-attribute-group {
    margin-bottom: 4px;
}

/* Buttons container */
.omfvs-archive-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

/* Button base (scoped to our plugin classes) */
.omfvs-archive-buttons .button,
.omfvs-buy-now-single {
    appearance: none;
    border-radius: var(--omfvs-radius-pill);
    padding: 7px 14px;
    font-size: var(--omfvs-font-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition:
        background 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
    white-space: nowrap;
}

/* Add to Cart – dark solid */
.omfvs-add-to-cart {
    background: var(--omfvs-btn-primary-bg);
    color: var(--omfvs-btn-text);
}

.omfvs-add-to-cart:hover {
    background: #020617;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
}

/* Buy Now – accent solid */
.omfvs-buy-now,
.omfvs-buy-now-single {
    background: var(--omfvs-btn-accent-bg);
    color: var(--omfvs-btn-text);
}

.omfvs-buy-now:hover,
.omfvs-buy-now-single:hover {
    background: #ea580c;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(248, 113, 22, 0.3);
}

/* Small screens: stack buttons vertically inside card */
@media (max-width: 480px) {
    .omfvs-archive-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .omfvs-archive-buttons .button {
        width: 100%;
        text-align: center;
    }
}