.single-product .xw-vs-control {
    position: relative;
    min-width: 0;
}

.single-product .xw-vs-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.single-product .xw-vs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xw-vs-gap-y) var(--xw-vs-gap-x);
    padding: var(--xw-vs-pad-top) var(--xw-vs-pad-right) var(--xw-vs-pad-bottom) var(--xw-vs-pad-left);
}

.single-product.xw-vs-align-left .xw-vs-list,
.single-product .xw-vs-align-left .xw-vs-list {
    justify-content: flex-start;
}

.single-product.xw-vs-align-center .xw-vs-list,
.single-product .xw-vs-align-center .xw-vs-list {
    justify-content: center;
}

.single-product.xw-vs-align-right .xw-vs-list,
.single-product .xw-vs-align-right .xw-vs-list {
    justify-content: flex-end;
}

.single-product .variations tr + tr > th,
.single-product .variations tr + tr > td {
    padding-top: var(--xw-vs-attribute-gap);
}

.single-product.xw-vs-label-above .variations tbody,
.single-product.xw-vs-label-above .variations tr,
.single-product .xw-vs-label-above .variations tbody,
.single-product .xw-vs-label-above .variations tr {
    display: block;
    width: 100%;
}

.single-product.xw-vs-label-above .variations th.label,
.single-product.xw-vs-label-above .variations td.value,
.single-product .xw-vs-label-above .variations th.label,
.single-product .xw-vs-label-above .variations td.value {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: inherit;
}

.single-product.xw-vs-label-above .variations th.label,
.single-product .xw-vs-label-above .variations th.label {
    padding-bottom: 8px;
}

.single-product.xw-vs-label-hidden .variations th.label,
.single-product .xw-vs-label-hidden .variations th.label {
    display: none !important;
}

.single-product .xw-vs-selected-name {
    margin-left: .35em;
    font-weight: 400;
    opacity: .72;
}

.single-product .xw-vs-item {
    all: unset;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}

.single-product .xw-vs-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.single-product .xw-vs-item:not(.is-disabled):hover {
    transform: translateY(-1px);
}

.single-product .xw-vs-item--label {
    min-width: var(--xw-vs-label-min-width);
    width: auto;
    height: var(--xw-vs-label-height);
    padding: 0 12px;
    border: 1px solid var(--xw-vs-label-border);
    border-radius: var(--xw-vs-label-radius);
    background: var(--xw-vs-label-bg);
    color: var(--xw-vs-label-color);
    font-size: var(--xw-vs-label-font-size);
    line-height: 1;
}

.single-product .xw-vs-item--label:not(.is-disabled):hover,
.single-product .xw-vs-item--label:focus-visible {
    border-color: var(--xw-vs-label-hover-border);
    background: var(--xw-vs-label-hover-bg);
    color: var(--xw-vs-label-hover-color);
}

.single-product .xw-vs-item--label.is-selected {
    border-color: var(--xw-vs-label-selected-border);
    background: var(--xw-vs-label-selected-bg);
    color: var(--xw-vs-label-selected-color);
}

.single-product .xw-vs-item--color {
    width: var(--xw-vs-color-width);
    height: var(--xw-vs-color-height);
    padding: var(--xw-vs-color-padding);
    border: 2px solid var(--xw-vs-color-border);
    border-radius: var(--xw-vs-color-radius);
    background: #fff;
}

.single-product .xw-vs-item--color:not(.is-disabled):hover,
.single-product .xw-vs-item--color:focus-visible {
    border-color: var(--xw-vs-color-hover-border);
}

.single-product .xw-vs-item--color.is-selected {
    border-color: var(--xw-vs-color-selected-border);
}

.single-product .xw-vs-color-chip,
.single-product .xw-vs-item--color .xw-vs-item__content {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: max(0px, calc(var(--xw-vs-color-radius) - 3px));
}

.single-product .xw-vs-item--image {
    width: var(--xw-vs-image-size);
    height: var(--xw-vs-image-size);
    padding: var(--xw-vs-image-padding);
    border: 2px solid var(--xw-vs-image-border);
    border-radius: var(--xw-vs-image-radius);
    background: #fff;
}

.single-product .xw-vs-item--image:not(.is-disabled):hover,
.single-product .xw-vs-item--image:focus-visible {
    border-color: var(--xw-vs-image-hover-border);
}

.single-product .xw-vs-item--image.is-selected {
    border-color: var(--xw-vs-image-selected-border);
}

.single-product .xw-vs-item--image .xw-vs-item__content,
.single-product .xw-vs-item--image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: max(0px, calc(var(--xw-vs-image-radius) - 3px));
    object-fit: cover;
}

.single-product .xw-vs-item.is-disabled {
    cursor: not-allowed;
}

.single-product.xw-vs-disabled-hide .xw-vs-item.is-disabled,
.single-product .xw-vs-disabled-hide .xw-vs-item.is-disabled {
    display: none;
}

.single-product.xw-vs-disabled-blur .xw-vs-item.is-disabled,
.single-product.xw-vs-disabled-blur-cross .xw-vs-item.is-disabled,
.single-product .xw-vs-disabled-blur .xw-vs-item.is-disabled,
.single-product .xw-vs-disabled-blur-cross .xw-vs-item.is-disabled {
    opacity: .35;
    filter: grayscale(.6);
}

.single-product.xw-vs-disabled-cross .xw-vs-item.is-disabled::after,
.single-product.xw-vs-disabled-blur-cross .xw-vs-item.is-disabled::after,
.single-product .xw-vs-disabled-cross .xw-vs-item.is-disabled::after,
.single-product .xw-vs-disabled-blur-cross .xw-vs-item.is-disabled::after {
    content: "";
    position: absolute;
    inset: 50% -3px auto;
    height: 1px;
    background: currentColor;
    transform: rotate(-35deg);
    transform-origin: center;
}

.single-product.xw-vs-hide-reset .reset_variations,
.single-product .xw-vs-hide-reset .reset_variations {
    display: none !important;
}

.single-product .xw-vs-tooltip {
    position: absolute;
    z-index: 999;
    left: 50%;
    bottom: calc(100% + 9px);
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: max-content;
    max-width: 180px;
    padding: var(--xw-vs-tooltip-padding);
    border-radius: var(--xw-vs-tooltip-radius);
    background: var(--xw-vs-tooltip-bg);
    color: var(--xw-vs-tooltip-color);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.single-product .xw-vs-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--xw-vs-tooltip-bg);
    transform: translateX(-50%);
}

.single-product .xw-vs-tooltip img {
    width: var(--xw-vs-tooltip-image);
    height: var(--xw-vs-tooltip-image);
    border-radius: max(0px, calc(var(--xw-vs-tooltip-radius) - 2px));
    object-fit: cover;
}

.single-product .xw-vs-item:hover .xw-vs-tooltip,
.single-product .xw-vs-item:focus-visible .xw-vs-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .single-product .xw-vs-item,
    .single-product .xw-vs-tooltip {
        transition: none;
    }
}