.addToCart {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 80px;
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 9999999999999999;
}

.addToCardCol2 {
    right: 45%;
    bottom: 1rem;
}
.addToCardCol5 {
    position: absolute;
    right: 43%;
    bottom: 5rem;
}
.addToCardCol8 {
    position: absolute;
    right: 38%;
    bottom: 1rem;
}
.plusCart{
    position: relative;
    top: 4px;
}

.row-z {


    /*margin: 0 -5px; !* فاصله افقی بین ستون‌ها *!*/


}

/* کلاس col برای ستون‌ها */
.col-z {
    box-sizing: border-box; /* شامل padding و border در محاسبه عرض شود */
    text-align: center;
    opacity: 1; /* شفافیت پیش‌فرض */
    transition: opacity 0.5s ease-in-out; /* افزودن انیمیشن fade */
}

/* کلاس‌های مختلف برای تعداد ستون‌ها */
.col-z-2 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    padding: 25px;
}
.col-z-2>.product-card{
    /*height: 147.2vh !important;*/
}
.col-z-5 {
    flex: 0 0 calc(20% - 0px);
    max-width: calc(20% - 0px);
}
.col-z-8 {
    flex: 0 0 calc(12.5% - 0px);
    max-width: calc(12.5% - 0px);
}
.mobileBtn{
    outline: none;
    border: 1px solid black;
    background-color: rgba(0,0,0,0);
}
#selectColor{
    top: 25px;
    left: -11px;
    position: absolute;
    width: 100%;
    z-index: 999999;
}
#selectSize{
    position: absolute;
    z-index: 9999999;
    top: 25px;
    width: 100%;
}
#selectPrice{
    position: absolute;
    z-index: 99;
    width: 100%;
    top: 25px;
    text-align: center;
}
#selectCollection{
    position: absolute;
    z-index: 999;
    top: 25px;
    width: 100%;
}

/* تنظیمات پیش‌فرض برای دسکتاپ */
img.z-layout {
    width: 16px; /* عرض پیش‌فرض برای دسکتاپ */
    height:16px;
    cursor: pointer;
}

img.z-layout:hover {
    background-color: #fff;
    text-underline: #00bfd6;
}

/* Media Queries برای پاسخگویی در موبایل و تبلت */
/* برای تبلت (max-width: 768px) */
@media (max-width: 768px) {
    #selectColor{
        top: 25px;
        position: absolute;
        width: 100%;
        z-index: 999999;
    }
    #selectSize{
        position: absolute;
        z-index: 9999999;
        top: 25px;
        width: 100%;
    }
    #selectPrice{
        position: absolute;
        z-index: 99;
        width: 100%;
        top: 25px;
        text-align: center;
    }
    #selectCollection{
        position: absolute;
        z-index: 999;
        top: 25px;
        width: 100%;
    }
    .col-z-2 {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .col-z-5 {
        flex: 0 0 calc(33.33% - 0px);
        max-width: calc(33.33% - 0px);
    }

    .col-z-8 {
        flex: 0 0 calc(25% - 0px);
        max-width: calc(25% - 0px);
    }

}

/* برای موبایل (max-width: 480px) */
@media (max-width: 480px) {
    .col-z-5, .col-z-8 {
        padding: 0; /* حذف padding پیش‌فرض */
        margin: 0; /* حذف margin پیش‌فرض */
    }
    .product-card {
        margin: 0; /* حذف margin برای product-card */
        padding: 0; /* حذف padding برای product-card */
    }

    .detailProduct {
        margin: 0; /* حذف margin برای detailProduct */
        padding: 0; /* حذف padding برای detailProduct */
    }
    #selectColor{
        top: 25px;
        position: absolute;
        width: 100%;
        z-index: 999999;
    }
    #selectSize{
        position: absolute;
        z-index: 9999999;
        top: 25px;
        width: 100%;
    }
    #selectPrice{
        position: absolute;
        z-index: 99;
        width: 100%;
        top: 25px;
        text-align: center;
    }
    #selectCollection{
        position: absolute;
        z-index: 999;
        top: 25px;
        width: 100%;
    }
    .row-z {
        flex-wrap: wrap;
        display: flex;
    }
    .col-z-2 {
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
        padding: 20px;
    }
    /* هر سطر 1 ستون */
    .col-z-5 {
        flex: 0 0 calc(50% - 0px);
        max-width: calc(50% - 0px);
    }

    /* هر سطر 2 ستون */
    .col-z-8 {
        flex: 0 0 calc(25% - 0px);
        max-width: calc(25% - 0px);
    }
    /* هر سطر 4 ستون */
    .mobileCalibration{
        position: relative;
        right: 24%;
        bottom: 22px;
    }
    .mobileBtn{
        outline: none;
        border: 1px solid black;
        background-color: rgba(0,0,0,0);
    }


}


.animationLoding {
    /* HTML: <div class="loader"></div> */
    width: fit-content;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    padding-bottom: 8px;
    background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
    animation: l2 2s linear infinite;
}

.animationLoding:before {
    content: "در حال بارگذاری ..."
}

@keyframes l2 {
    to {
        background-size: 100% 3px
    }
}