/* ── Catalog Color Swatches ──────────────────────────────────────────────── */

.ccs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
    padding: 0 2px;
    justify-content: flex-start;
}

.ccs-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, outline-color 0.15s ease, border-color 0.15s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    flex-shrink: 0;
}

/* White/light swatch needs a visible border so it's not invisible */
.ccs-swatch[style*="#f5f5f5"],
.ccs-swatch[style*="#fff"],
.ccs-swatch[style*="white"],
.ccs-swatch[style*="#E8D5B7"],
.ccs-swatch[style*="#F5F5F5"] {
    border-color: #ddd;
}

/* Hover */
.ccs-swatch:hover:not(:disabled) {
    transform: scale(1.18);
    outline: 2px solid rgba(0,0,0,0.25);
    outline-offset: 2px;
}

/* Selected state */
.ccs-swatch.is-selected {
    outline: 2px solid #333;
    outline-offset: 2px;
    transform: scale(1.12);
}

/* No image = slightly transparent, still visible */
.ccs-swatch--no-image {
    opacity: 0.4;
    cursor: default;
}

/* ── Product card image transition ───────────────────────────────────────── */
.ccs-img-fade {
    transition: opacity 0.2s ease;
}
.ccs-img-fade.ccs-loading {
    opacity: 0.5;
}