.product-card-colors {
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:4px; margin:0 0 4px; padding:0;
}
/* Keep focus scrolling on the page rather than inside clipped product cards. */
:is(.cat-detail-products-box,.cat-detail-products-box-big,.cat-detail-products-box-list,.cat-detail-products-box-caturunvitrin,.urun-detay-benzer-urun-box,.product-recent-card):has(.product-card-colors) {
    overflow:clip!important;
}
.product-card-colors .product-card-color {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px;
    width:22px; height:22px; min-width:0; min-height:0; margin:0; padding:3px;
    appearance:none; border:1px solid transparent; border-radius:50%;
    background:transparent; color:#172033; cursor:pointer; line-height:1;
    box-shadow:none; touch-action:manipulation;
}
.product-card-color > span {
    display:block; flex-shrink:0; box-sizing:border-box; width:14px; height:14px; border-radius:50%;
    background:var(--product-option-color); border:1px solid #0003;
}
.product-card-colors .product-card-color[aria-pressed="true"] { border-color:#7b8796; background:#fff; }
.product-card-colors .product-card-color:hover { border-color:#8491a2; }
.product-card-colors .product-card-color:focus-visible { outline:2px solid #17628c; outline-offset:2px; }
.product-card-colors .product-card-color:disabled { opacity:.4; cursor:default; }
img.product-card-color-preview { object-fit:contain!important; }
@media(max-width:575px) {
    .product-card-colors { gap:3px; }
    .product-card-colors .product-card-color { flex-basis:20px; width:20px; height:20px; }
    .product-card-color > span { width:12px; height:12px; }
}