.isavior-color-dots{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:12px 0 8px!important;
    line-height:1!important;
}

.isavior-color-dots--loop{
    justify-content:center!important;
    width:100%!important;
}

.isavior-color-dot{
    --is-color:#bdbdbd;
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
    flex:0 0 24px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    border:1px solid rgba(0,0,0,.22)!important;
    background:var(--is-color)!important;
    box-shadow:0 0 0 2px #fff inset!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    transform:none!important;
    overflow:visible!important;
    outline:none!important;
}

button.isavior-color-dot{
    appearance:none!important;
    -webkit-appearance:none!important;
    font-size:0!important;
}

.isavior-color-dots--single .isavior-color-dot{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    min-height:31px!important;
    max-width:31px!important;
    max-height:31px!important;
    flex-basis:31px!important;
}

.isavior-color-dot:hover,
.isavior-color-dot:focus-visible{
    box-shadow:
        0 0 0 2px #fff inset,
        0 0 0 3px rgba(120,97,163,.35)!important;
}

.isavior-color-dot.is-selected{
    box-shadow:
        0 0 0 2px #fff inset,
        0 0 0 3px #7861A3!important;
}

.isavior-color-dot.is-out-of-stock{
    opacity:.5!important;
    cursor:not-allowed!important;
}

.isavior-oos-x{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#D50000!important;
    font-size:25px!important;
    font-weight:800!important;
    line-height:1!important;
    text-shadow:0 0 2px #fff,0 0 2px #fff!important;
    pointer-events:none!important;
    z-index:3!important;
}

.isavior-color-dots--single .isavior-oos-x{
    font-size:30px!important;
}

.isavior-color-tooltip{
    position:absolute!important;
    left:50%!important;
    bottom:calc(100% + 9px)!important;
    transform:translateX(-50%)!important;
    padding:6px 8px!important;
    border-radius:6px!important;
    background:#111!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:999999!important;
}

.isavior-color-dot:hover .isavior-color-tooltip,
.isavior-color-dot:focus-visible .isavior-color-tooltip{
    opacity:1!important;
    visibility:visible!important;
}

.variations tr.isavior-hidden-color-row{
    position:absolute!important;
    left:-99999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}

/* Overlay image used only on shop/category hover. */
.isavior-hover-overlay{
    position:absolute!important;
    z-index:4!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    pointer-events:none!important;
    object-fit:contain!important;
    opacity:0!important;
    transition:opacity .12s ease!important;
    background:#fff!important;
}

.isavior-hover-overlay.is-visible{
    opacity:1!important;
}


/* v1.3.3 — Single product: replace the native Color dropdown visually
   with the swatches INSIDE the WooCommerce variation row. */
.woocommerce form.variations_form tr.isavior-color-row{
    display:table-row !important;
}

.woocommerce form.variations_form tr.isavior-color-row > th.label{
    display:none !important;
}

.woocommerce form.variations_form tr.isavior-color-row > td.value{
    display:table-cell !important;
    width:100% !important;
    padding:14px 12px !important;
    text-align:left !important;
}

.woocommerce form.variations_form tr.isavior-color-row select.isavior-native-color-select{
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.woocommerce form.variations_form tr.isavior-color-row .isavior-color-dots--single{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin:0 !important;
    padding:2px 0 !important;
}

.woocommerce form.variations_form tr.isavior-color-row .reset_variations{
    display:none !important;
}

/* Old hiding rule from previous versions must not hide the whole row anymore. */
.woocommerce form.variations_form tr.isavior-hidden-color-row{
    position:static !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}