/*
CTC Separate Stylesheet
Updated: 2025-09-25 20:01:18
*/
/* ===========================================
   Elementor + Astra Product Gallery Thumbs
   اصلاح شده برای 5 بند انگشتی در هر ردیف
   =========================================== */

/* کانتینر بند انگشتی‌ها */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    display: flex;
    justify-content: flex-start; /* تصاویر به سمت چپ چیده می‌شوند */
    gap: 10px; /* فاصله ثابت بین تصاویر */
    flex-wrap: nowrap; /* جلوگیری از رفتن به ردیف بعدی */
    padding: 0;
    margin: 0;
}

/* هر بند انگشتی */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    width: 17%; /* پنج بند در یک ردیف */
    height: auto;
    flex: 0 0 17%; /* ثابت کردن سایز */
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(12,20,30,0.08);
    transition: 0.25s ease;
    margin: 0; /* فاصله با gap کنترل می‌شود */
}

/* تصویر داخل بند انگشتی */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* حفظ نسبت مربع */
    transition: 0.25s ease;
    border-radius: 12px;
}

/* hover */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:hover img {
    transform: scale(1.06);
}

/* active thumbnail */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img.flex-active {
    outline: 3px solid rgba(63,120,255,0.25);
    border-radius: 12px;
}