/* HIDE DEFAULT SELECT */
table.variations select {
    display: none !important;
}

table.variations.rem3dx-transparent-background,
table.variations.rem3dx-transparent-background tbody,
table.variations tr.rem3dx-transparent-background,
table.variations tr.rem3dx-transparent-background th,
table.variations tr.rem3dx-transparent-background td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

table.variations tr.rem3dx-hide-attribute-label {
    display: block;
}

table.variations tr.rem3dx-hide-attribute-label th.label,
table.variations tr.rem3dx-hide-attribute-label td.label,
table.variations tr.rem3dx-hide-attribute-label label {
    display: none !important;
}

table.variations tr.rem3dx-hide-attribute-label td.value {
    display: block;
    width: 100%;
}

table.variations tr.rem3dx-swatches-row td.value {
    padding-left: 0 !important;
    text-align: center;
}

/* WRAPPER */
.rem3dx-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rem3dx-swatch-gap, 12px);
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 12px;

    --rem3dx-active-color: var(--rem3dx-swatch-color, #00d9ff);
}

.rem3dx-orientation-horizontal {
    flex-direction: row;
}

.rem3dx-orientation-vertical {
    flex-direction: column;
}

.rem3dx-transparent-background {
    background: transparent !important;
}

/* BUTTON -- base (swatch color background is painted inline by JS) */
.rem3dx-swatch,
.rem3dx-reset-variations {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: var(--rem3dx-swatch-min-width, 0);
    min-height: var(--rem3dx-swatch-height, 46px);

    padding: 16px var(--rem3dx-swatch-padding-x, 28px);

    border: none;
    border-radius: var(--rem3dx-swatch-radius, 999px);

    /* Fallback colour for anything not painted inline yet. */
    background: linear-gradient(135deg, #19D7FF 0%, #1492FF 100%);

    color: #fff;
    font-size: var(--rem3dx-swatch-font-size, 15px);
    font-family: var(--rem3dx-swatch-font-family, inherit);
    font-weight: var(--rem3dx-swatch-font-weight, 700);
    line-height: 1;
    white-space: nowrap;

    cursor: pointer;
    box-shadow: 0 0 18px rgba(var(--rem3dx-swatch-rgb, 0, 217, 255), .18);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.rem3dx-swatch > span {
    position: relative;
    z-index: 1;
}

/* HOVER -- one shared animation for everything: jump straight up */
.rem3dx-swatch:not(.disabled):hover,
.rem3dx-reset-variations:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(var(--rem3dx-swatch-rgb, 0, 217, 255), .30);
}

/* ACTIVE swatch: white ring + glow so the chosen colour reads clearly */
.rem3dx-swatch.active {
    transform: translateY(-2px);
    color: #fff;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .9),
        0 0 30px rgba(var(--rem3dx-swatch-rgb, 0, 217, 255), .38);
}

.rem3dx-swatch.disabled {
    cursor: not-allowed;
    opacity: .42;
    transform: none;
    filter: grayscale(.75);
    box-shadow: none;
}

.rem3dx-swatch.disabled::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 1px;
    z-index: 2;

    background: rgba(255, 255, 255, .62);
    transform: rotate(-12deg);
    transform-origin: center;
}

/* STYLE PRESETS -- tint but keep brand shape + hover */
.rem3dx-preset-minimal .rem3dx-swatch,
.rem3dx-preset-minimal .rem3dx-reset-variations {
    box-shadow: none;
}

.rem3dx-preset-minimal .rem3dx-swatch:not(.disabled):hover,
.rem3dx-preset-minimal .rem3dx-reset-variations:hover {
    box-shadow: 0 0 22px rgba(var(--rem3dx-swatch-rgb, 0, 217, 255), .22);
}

.rem3dx-preset-solid .rem3dx-swatch,
.rem3dx-preset-solid .rem3dx-reset-variations {
    background-size: 100% 100%;
}

/* Per-colour accent vars (the background itself is painted inline by JS) */
.rem3dx-swatch-blue {
    --rem3dx-swatch-color: var(--rem3dx-color-blue, #29b5ea);
    --rem3dx-swatch-rgb: 41, 181, 234;
}

.rem3dx-swatch-green {
    --rem3dx-swatch-color: var(--rem3dx-color-green, #35e88b);
    --rem3dx-swatch-rgb: 53, 232, 139;
}

.rem3dx-swatch-pink {
    --rem3dx-swatch-color: var(--rem3dx-color-pink, #ff4da6);
    --rem3dx-swatch-rgb: 255, 77, 166;
}

.rem3dx-swatch-red {
    --rem3dx-swatch-color: var(--rem3dx-color-red, #ff4b4b);
    --rem3dx-swatch-rgb: 255, 75, 75;
}

.rem3dx-swatch-yellow {
    --rem3dx-swatch-color: var(--rem3dx-color-yellow, #ffe45c);
    --rem3dx-swatch-rgb: 255, 228, 92;
}

/* RESET + ADD TO CART: shared brand cyan gradient, same pill + hover */
.rem3dx-reset-variations,
.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;

    /* Neutralize any theme/site base transform (e.g. the -7.4px left shift added
       to align Add to cart) so the resting button is not offset sideways and the
       hover becomes a clean straight-up jump. */
    transform: none !important;

    background:
        linear-gradient(135deg, #19D7FF 0%, #1492FF 100%) !important;

    box-shadow: 0 0 18px rgba(0, 217, 255, .18) !important;

    --rem3dx-swatch-rgb: 0, 217, 255;

    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}

.rem3dx-reset-variations {
    overflow: hidden;
    text-decoration: none !important;
    vertical-align: middle;
    line-height: 1;
}

.rem3dx-reset-variations[style*="hidden"] {
    display: none !important;
}

.rem3dx-reset-variations:hover,
.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 28px rgba(0, 217, 255, .28) !important;
}

/* PRICE */
.product.rem3dx-price-styled .price,
.product.rem3dx-price-styled .price span,
.product.rem3dx-price-styled .price bdi,
.product.rem3dx-price-styled .woocommerce-variation-price,
.product.rem3dx-price-styled .woocommerce-variation-price .price,
.product.rem3dx-price-styled .woocommerce-variation-price .price span,
.product.rem3dx-price-styled .woocommerce-variation-price .price bdi {
    color: var(--rem3dx-price-color, #00d9ff) !important;
    font-family: var(--rem3dx-price-font-family, inherit) !important;
    font-size: var(--rem3dx-price-font-size, 20px) !important;
    font-weight: var(--rem3dx-price-font-weight, 700) !important;
}

.product.rem3dx-has-variation-image {
    background-image:
        var(--rem3dx-product-image);
    background-repeat: no-repeat;
    background-position: right 24px top 24px;
    background-size: clamp(180px, 22vw, 360px);
    transition:
        background-image .25s ease,
        background-color .25s ease;
}

@supports (color: color-mix(in srgb, #000 50%, transparent)) {
    .product.rem3dx-has-variation-image {
        background-image:
            radial-gradient(
                circle at 80% 8%,
                color-mix(in srgb, var(--rem3dx-active-color, #00d9ff) 18%, transparent),
                transparent 34%
            ),
            var(--rem3dx-product-image);
        background-position: right top, right 24px top 24px;
        background-size: auto, clamp(180px, 22vw, 360px);
    }
}

/* MOBILE */
@media (max-width: 767px) {

    .rem3dx-swatches {
        gap: var(--rem3dx-swatch-gap, 10px);
    }

    .rem3dx-swatch,
    .rem3dx-reset-variations {
        min-height: max(38px, calc(var(--rem3dx-swatch-height, 46px) - 4px));
        padding: 14px var(--rem3dx-swatch-padding-x, 22px);
    }

    .product.rem3dx-has-variation-image {
        background-size: 140px;
        background-position: right 12px top 12px;
    }

    @supports (color: color-mix(in srgb, #000 50%, transparent)) {
        .product.rem3dx-has-variation-image {
            background-size: auto, 140px;
            background-position: right top, right 12px top 12px;
        }
    }
}