/**
 * Bolinhas de cor — shortcode [ksl_bolinhas_cor] no loop Elementor / arquivo.
 */
.ksl-bolinhas-cor {
    margin-top: 0.5rem;
    line-height: 0;
}

.ksl-bolinhas-cor__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
}

.ksl-bolinhas-cor__dot-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ksl-bolinhas-cor__dot-wrap[data-preview-url] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .ksl-bolinhas-cor__dot-wrap[data-preview-url]:hover:not(.is-selected) .ksl-bolinhas-cor__dot {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 2px rgba(43, 89, 176, 0.45);
    }
}

/* Cor cuja pré-visualização está ativa no card (imagem “fixa” até sair do produto) */
.ksl-bolinhas-cor__dot-wrap.is-selected .ksl-bolinhas-cor__dot {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 0 2px #fff,
        0 0 0 4px #2b59b0,
        0 0 0 5px rgba(43, 89, 176, 0.35);
}

.ksl-bolinhas-cor__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    vertical-align: middle;
}