/*
 * CT_PRODUCT_DETAIL_02F_NATIVE_COLOR_GROUP_REVEAL_SAFE
 * Root cause AppPageBuilder:
 * - la miniatura visibile e' il link sibling .giov-link;
 * - il vero gruppo colore nativo e' ul#group_2 con style="display:none";
 * - 02E stilizzava correttamente label/span.color, ma l'antenato nascosto lasciava il cerchio a 0x0.
 * Questa patch mostra il gruppo nativo e nasconde esclusivamente la miniatura legacy.
 * Scope esclusivo: body#product / form prodotto.
 */
html body#product
form#add-to-cart-or-refresh
.product-variants.js-product-variants
> a.giov-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-color-swatch-02e="active"]
> ul,
html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-variant-02a="color"]
> ul#group_2 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 32px !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
}

html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-color-swatch-02e="active"]
> ul > li,
html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-variant-02a="color"]
> ul#group_2 > li {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    flex: 0 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-color-swatch-02e="active"]
> ul > li > label[data-ct-product-color-option-02e="active"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex: 0 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html body#product
form#add-to-cart-or-refresh
.product-variants-item[data-ct-product-color-swatch-02e="active"]
> ul > li > label[data-ct-product-color-option-02e="active"]
> [data-ct-product-color-circle-02e="active"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    background-image: none !important;
}

@media (max-width: 767px) {
    html body#product
    form#add-to-cart-or-refresh
    .product-variants-item[data-ct-product-color-swatch-02e="active"]
    > ul {
        gap: 5px !important;
    }
}