/* Container Spacing */
.cpm-flex-gap {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}

/* Base Bubble - Locks Astra out */
.cpm-product-variations-wrapper .cpm-bubble {
    display: inline-flex; justify-content: center; align-items: center;
    box-sizing: border-box; cursor: pointer; text-decoration: none !important;
    border: 2px solid #ccc; background: #fff; color: #333; margin: 0 !important;
    transition: all 0.2s; position: relative; flex-shrink: 0;
}

/* SIZES - Rounded Square */
.cpm-product-variations-wrapper .cpm-size-box {
    min-width: 45px; height: 45px; border-radius: 6px; padding: 0 10px;
    font-size: 15px; font-weight: 700; background: #f9f9f9;
}

/* COLOURS - Perfect Circle */
.cpm-product-variations-wrapper .cpm-color-circle {
    width: 50px !important; height: 50px !important; /* Exact width/height makes it square */
    border-radius: 50% !important; /* 50% radius turns the square into a perfect circle */
    padding: 0 !important; overflow: hidden;
}

/* Make sure the image inside perfectly fills the circle */
.cpm-color-circle img {
    width: 100% !important; height: 100% !important; 
    object-fit: cover !important; margin: 0 !important; border-radius: 50% !important;
}

/* ACTIVE STATE - Darker Tint */
.cpm-product-variations-wrapper .cpm-bubble.cpm-active {
    border-color: #000 !important;
}
.cpm-product-variations-wrapper .cpm-size-box.cpm-active {
    background: #000 !important; color: #fff !important;
}
.cpm-product-variations-wrapper .cpm-color-circle.cpm-active {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #000 !important;
}

/* OUT OF STOCK STATE */
.cpm-product-variations-wrapper .cpm-oos {
    opacity: 0.5; border-color: #eee !important;
}
.cpm-product-variations-wrapper .cpm-oos::after {
    content: ''; position: absolute; top: 50%; left: -20%; right: -20%;
    height: 2px; background: #ff0000; transform: translateY(-50%) rotate(-45deg);
}