.axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 45px;
    width: 45px;
    background-color: var(--color-icoin-prod);
    border: 3px solid var(--color-white);
    color: var(--color-heading);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
/* Dark mode */
body.dark-mode .axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors) {
    background-color: #484848 !important;
}

/* hover للأيقونة العادية (بدون ألوان) */
.axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors):hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 16px 0 rgba(53, 119, 240, 0.3);
}

/* SVG داخل الرابط اللي بدون ألوان */
.axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors) svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor;
}

/* إلغاء التنسيقات القديمة عند وجود ألوان فقط */
.axil-product.product-style-seven .product-content .cart-btn a.product-link-with-colors {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 45px !important;
    width: 45px !important;
    line-height: normal !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* دائرة الألوان مع SVG في المنتصف */
.colors-circle-with-svg {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    border: 3px solid #fff;
    overflow: hidden;
    background: transparent;
}

/* توزيع الألوان */
.color-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* لون واحد - دائرة كاملة */
.colors-circle-with-svg .color-segment:only-of-type {
    clip-path: none;
}

/* لونين - نص ونص */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(2) {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%);
}

.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(1) {
    clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 50% 0);
}

/* ثلاثة ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(3) {
    clip-path: polygon(50% 50%, 50% 0, 143% 0, 143% 100%);
}

.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(2) {
    clip-path: polygon(50% 50%, 143% 100%, 0% 100%);
}

.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(1) {
    clip-path: polygon(50% 50%, 0% 100%, -43% 0, 50% 0);
}

/* أربعة ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(4) {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%);
}

.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(3) {
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}

.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(2) {
    clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 50%);
}

.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(1) {
    clip-path: polygon(50% 50%, 0 50%, 0 0, 50% 0);
}

/* خمسة ألوان وأكثر - شرائط أفقية */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-11:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-12:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-13:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-14:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-15:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-16:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-17:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-18:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-19:nth-last-of-type(n+5),
.colors-circle-with-svg .color-segment.segment-20:nth-last-of-type(n+5) {
    clip-path: none;
}

/* 5 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(5) { height: 20%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(4) { height: 20%; top: 20%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(3) { height: 20%; top: 40%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(2) { height: 20%; top: 60%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(1) { height: 20%; top: 80%; }

/* 6 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(6) { height: 16.66%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(5) { height: 16.66%; top: 16.66%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(4) { height: 16.66%; top: 33.33%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(3) { height: 16.66%; top: 50%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(2) { height: 16.66%; top: 66.66%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(1) { height: 16.66%; top: 83.33%; }

/* 7 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(7) { height: 14.28%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(6) { height: 14.28%; top: 14.28%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(5) { height: 14.28%; top: 28.57%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(4) { height: 14.28%; top: 42.85%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(3) { height: 14.28%; top: 57.14%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(2) { height: 14.28%; top: 71.42%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(1) { height: 14.28%; top: 85.71%; }

/* 8 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(8) { height: 12.5%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(7) { height: 12.5%; top: 12.5%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(6) { height: 12.5%; top: 25%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(5) { height: 12.5%; top: 37.5%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(4) { height: 12.5%; top: 50%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(3) { height: 12.5%; top: 62.5%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(2) { height: 12.5%; top: 75%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(1) { height: 12.5%; top: 87.5%; }

/* 9 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(9) { height: 11.11%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(8) { height: 11.11%; top: 11.11%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(7) { height: 11.11%; top: 22.22%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(6) { height: 11.11%; top: 33.33%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(5) { height: 11.11%; top: 44.44%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(4) { height: 11.11%; top: 55.55%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(3) { height: 11.11%; top: 66.66%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(2) { height: 11.11%; top: 77.77%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(1) { height: 11.11%; top: 88.88%; }

/* 10 ألوان */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(10) { height: 10%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(9) { height: 10%; top: 10%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(8) { height: 10%; top: 20%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(7) { height: 10%; top: 30%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(6) { height: 10%; top: 40%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(5) { height: 10%; top: 50%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(4) { height: 10%; top: 60%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(3) { height: 10%; top: 70%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(2) { height: 10%; top: 80%; }
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(1) { height: 10%; top: 90%; }

/* 11 لون */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(11) { height: 9.09%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(10) { height: 9.09%; top: 9.09%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(9) { height: 9.09%; top: 18.18%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(8) { height: 9.09%; top: 27.27%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(7) { height: 9.09%; top: 36.36%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(6) { height: 9.09%; top: 45.45%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(5) { height: 9.09%; top: 54.54%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(4) { height: 9.09%; top: 63.63%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(3) { height: 9.09%; top: 72.72%; }
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(2) { height: 9.09%; top: 81.81%; }
.colors-circle-with-svg .color-segment.segment-11:nth-last-of-type(1) { height: 9.09%; top: 90.90%; }

/* 12 لون */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(12) { height: 8.33%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(11) { height: 8.33%; top: 8.33%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(10) { height: 8.33%; top: 16.66%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(9) { height: 8.33%; top: 25%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(8) { height: 8.33%; top: 33.33%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(7) { height: 8.33%; top: 41.66%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(6) { height: 8.33%; top: 50%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(5) { height: 8.33%; top: 58.33%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(4) { height: 8.33%; top: 66.66%; }
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(3) { height: 8.33%; top: 75%; }
.colors-circle-with-svg .color-segment.segment-11:nth-last-of-type(2) { height: 8.33%; top: 83.33%; }
.colors-circle-with-svg .color-segment.segment-12:nth-last-of-type(1) { height: 8.33%; top: 91.66%; }

/* 13-20 لون - بنفس المنطق */
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(13) { height: 7.69%; top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(12) { height: 7.69%; top: 7.69%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(11) { height: 7.69%; top: 15.38%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(10) { height: 7.69%; top: 23.07%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(9) { height: 7.69%; top: 30.76%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(8) { height: 7.69%; top: 38.45%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(7) { height: 7.69%; top: 46.14%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(6) { height: 7.69%; top: 53.83%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(5) { height: 7.69%; top: 61.52%; }
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(4) { height: 7.69%; top: 69.21%; }
.colors-circle-with-svg .color-segment.segment-11:nth-last-of-type(3) { height: 7.69%; top: 76.90%; }
.colors-circle-with-svg .color-segment.segment-12:nth-last-of-type(2) { height: 7.69%; top: 84.59%; }
.colors-circle-with-svg .color-segment.segment-13:nth-last-of-type(1) { height: 7.69%; top: 92.28%; }

/* من 14 لـ 20 - مختصرين */
.colors-circle-with-svg .color-segment:nth-last-of-type(n+14) { height: 7.14%; }
.colors-circle-with-svg .color-segment.segment-1:nth-last-of-type(n+14) { top: 0; }
.colors-circle-with-svg .color-segment.segment-2:nth-last-of-type(n+14) { top: 7.14%; }
.colors-circle-with-svg .color-segment.segment-3:nth-last-of-type(n+14) { top: 14.28%; }
.colors-circle-with-svg .color-segment.segment-4:nth-last-of-type(n+14) { top: 21.42%; }
.colors-circle-with-svg .color-segment.segment-5:nth-last-of-type(n+14) { top: 28.56%; }
.colors-circle-with-svg .color-segment.segment-6:nth-last-of-type(n+14) { top: 35.70%; }
.colors-circle-with-svg .color-segment.segment-7:nth-last-of-type(n+14) { top: 42.84%; }
.colors-circle-with-svg .color-segment.segment-8:nth-last-of-type(n+14) { top: 50%; }
.colors-circle-with-svg .color-segment.segment-9:nth-last-of-type(n+14) { top: 57.14%; }
.colors-circle-with-svg .color-segment.segment-10:nth-last-of-type(n+14) { top: 64.28%; }
.colors-circle-with-svg .color-segment.segment-11:nth-last-of-type(n+14) { top: 71.42%; }
.colors-circle-with-svg .color-segment.segment-12:nth-last-of-type(n+14) { top: 78.56%; }
.colors-circle-with-svg .color-segment.segment-13:nth-last-of-type(n+14) { top: 85.70%; }
.colors-circle-with-svg .color-segment.segment-14:nth-last-of-type(n+14) { top: 92.84%; }

.center-svg {
    position: absolute;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 8px;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none;
    fill: var(--color-heading);
}

/* hover effect */
.product-link-with-colors:hover .colors-circle-with-svg {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* للموبايل */
@media (max-width: 768px) {
    .colors-circle-with-svg {
        width: 40px;
        height: 40px;
        border: 2px solid #fff;
    }
    
    .axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors) {
        height: 40px;
        width: 40px;
        border: 2px solid var(--color-white);
        box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    }
    
    .axil-product.product-style-seven .product-content .cart-btn a:not(.product-link-with-colors) svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .center-svg {
        width: 24px !important;
        height: 24px !important;
        padding: 6px;
    }
}