/* UA / CONNECTED.GR - WVS archive support for ALL variation attribute types */

/* Keep native WVS availability styling visible, including disabled/crossed out-of-stock swatches. */

/* Each variation attribute gets its own compact row. */
body .products .ua-product-color-swatches .woo-variation-items-wrapper,
body .products .wvs-archive-variations-wrapper .woo-variation-items-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

body .products .ua-product-color-swatches .archive-variable-items,
body .products .wvs-archive-variations-wrapper .archive-variable-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
}

/* Image swatches, e.g. MX010 / pa_schedio. */
body .products .ua-product-color-swatches .variable-item.image-variable-item,
body .products .wvs-archive-variations-wrapper .variable-item.image-variable-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 1px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

body .products .ua-product-color-swatches .variable-item.image-variable-item .variable-item-contents,
body .products .wvs-archive-variations-wrapper .variable-item.image-variable-item .variable-item-contents {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 3px !important;
}

body .products .ua-product-color-swatches .variable-item.image-variable-item img.variable-item-image,
body .products .wvs-archive-variations-wrapper .variable-item.image-variable-item img.variable-item-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* Button/text swatches, e.g. sizes and other properties. */
body .products .ua-product-color-swatches .variable-item.button-variable-item,
body .products .wvs-archive-variations-wrapper .variable-item.button-variable-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}

/* Out-of-stock / disabled values intentionally stay visible.
   WVS supplies the native disabled/cross styling and interaction state. */

/* Fallback for a normal dropdown attribute that WVS did not convert to swatches. */
body .products .wvs-archive-variations-wrapper .ua-wvs-raw-select-fallback select.woo-variation-raw-select,
body .products .ua-product-color-swatches .ua-wvs-raw-select-fallback select.woo-variation-raw-select {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 2px 25px 2px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

@media only screen and (max-width: 767px) {
    body .products .ua-product-color-swatches .variable-item.image-variable-item,
    body .products .wvs-archive-variations-wrapper .variable-item.image-variable-item {
        flex-basis: 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
}