﻿
/* فونت وزیرمتن */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/font/vazirmatn/Vazirmatn%5Bwght%5D.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* اعمال فونت وزیرمتن روی صفحه جزئیات محصول */
.product.type-product,
.product.type-product * {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

    /* حفظ فونت آیکون‌ها */
    .product.type-product .fa,
    .product.type-product .fa::before {
        font-family: FontAwesome !important;
    }

    .product.type-product .mdi,
    .product.type-product .mdi::before {
        font-family: "Material Design Icons" !important;
    }
/* ============================
           رنگ‌بندی صورتی آرشیو محصولات
           ============================ */
.shop-archive-content {
    --archive-pink: #ebacb6;
    --archive-pink-dark: #c45c83;
    --archive-pink-light: #fff0f5;
    --archive-border: #f0dce4;
    --archive-text: #493640;
    direction: rtl;
    color: var(--archive-text);
}

    .shop-archive-content .archive-header-title {
        color: #493640;
        font-weight: 800;
    }

    .shop-archive-content .sort-tabs h4 {
        color: #9f5362;
    }

    .shop-archive-content .sort-tabs-options .nav-link {
        color: #493640 !important;
        background: #fff;
        border: 1px solid var(--archive-border);
        border-radius: 20px;
        margin: 3px;
        transition: all 0.2s ease;
    }

        .shop-archive-content .sort-tabs-options .nav-link:hover,
        .shop-archive-content .sort-tabs-options .nav-link.active {
            color: #fff !important;
            background: var(--archive-pink-dark) !important;
            border-color: var(--archive-pink-dark) !important;
        }

    .shop-archive-content .product-box {
        background: #fff;
        border: 1px solid var(--archive-border) !important;
        border-radius: 14px !important;
        transition: all 0.2s ease;
    }

        .shop-archive-content .product-box:hover {
            border-color: var(--archive-pink) !important;
            box-shadow: 0 6px 20px rgba(196, 92, 131, 0.12);
            transform: translateY(-2px);
        }

        .shop-archive-content .product-box .title a,
        .shop-archive-content .product-box .title a:visited {
            color: var(--archive-text) !important;
            text-decoration: none !important;
            transition: color 0.2s ease;
        }

            .shop-archive-content .product-box .title a:hover {
                color: var(--archive-pink-dark) !important;
            }

        .shop-archive-content .product-box .price,
        .shop-archive-content .product-box .price .amount {
            color: var(--archive-pink-dark) !important;
            font-weight: 800;
        }

    .shop-archive-content .product-rate .fa-star {
        color: #e5d7dc;
    }

        .shop-archive-content .product-rate .fa-star.active {
            color: #e6a23c;
        }

    /* ============================
           صفحه‌بندی صورتی
           ============================ */
    .shop-archive-content .pagination {
        display: flex;
        gap: 6px;
        margin-top: 20px;
    }

        .shop-archive-content .pagination .page-link {
            color: var(--archive-pink-dark) !important;
            background: #fff !important;
            border: 1px solid var(--archive-border) !important;
            border-radius: 9px !important;
            min-width: 38px;
            text-align: center;
            transition: all 0.2s ease;
        }

            .shop-archive-content .pagination .page-link:hover {
                color: #fff !important;
                background: var(--archive-pink) !important;
                border-color: var(--archive-pink) !important;
            }

            .shop-archive-content .pagination .page-item.active .page-link,
            .shop-archive-content .pagination .page-link.active {
                color: #fff !important;
                background: var(--archive-pink-dark) !important;
                border-color: var(--archive-pink-dark) !important;
            }

        .shop-archive-content .pagination .page-item.disabled .page-link {
            color: #cdbbc2 !important;
            background: #fff8fa !important;
            border-color: var(--archive-border) !important;
        }

/* ============================
           تنظیمات کلی گالری محصول
           ============================ */

.product-gallery-section {
    min-width: 0;
}

.product-gallery,
.product-gallery .gallery,
.product-gallery .gallery-img {
    width: 100%;
    max-width: 100%;
}

/* ============================
           قاب تصویر اصلی محصول
           ============================ */

#img-product-zoom {
    display: block;
    width: 100% !important;
    height: 400px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fff;
}

/* ============================
           دکمه‌های محبوب و نمایش بیشتر
           ============================ */

.product.type-product .gallery-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    list-style: none !important;
}

    .product.type-product .gallery-actions > li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
    }

    .product.type-product .gallery-actions .btn-option {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 60px;
        min-height: 60px;
        padding: 8px;
        border-radius: 16px;
        text-decoration: none;
    }

        .product.type-product .gallery-actions .btn-option i {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .product.type-product .gallery-actions .btn-option span {
            font-size: 11px;
            white-space: nowrap;
        }

/* ============================
           تصاویر کوچک زیر تصویر اصلی
           ============================ */

#gallery-slider .elevatezoom-gallery {
    display: flex;
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

    #gallery-slider .elevatezoom-gallery img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        border: none !important;
        border-radius: 4px;
    }

    #gallery-slider .elevatezoom-gallery.active {
        border: 1px solid #c45c83;
    }

/* ============================
           قاب تصاویر پنجره نمایش بیشتر
           ============================ */

#custom-events {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

    #custom-events a {
        display: flex;
        width: 180px;
        height: 180px;
        flex: 0 0 180px;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
    }

        #custom-events a img {
            display: block;
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            object-position: center !important;
        }

/* ============================
           بهینه‌سازی نمایش موبایل
           ============================ */

@media (max-width: 576px) {
    /* گالری تمام عرض را بگیرد */
    .product-main-wrapper {
        gap: 12px !important;
    }

    .product-gallery-section {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .product-gallery,
    .product-gallery .gallery,
    .product-gallery .gallery-item,
    .product-gallery .gallery-img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* قاب تصویر عریض‌تر و کوتاه‌تر */
    #img-product-zoom {
        width: 100% !important;
        height: 250px !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 10px;
    }
    /* دکمه‌ها بالای تصویر در مرکز باشند */
    .product.type-product .gallery-actions {
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

        .product.type-product .gallery-actions .btn-option {
            min-width: 58px;
            min-height: 52px;
            padding: 5px;
            border-radius: 13px;
        }

            .product.type-product .gallery-actions .btn-option i {
                font-size: 18px;
            }

            .product.type-product .gallery-actions .btn-option span {
                font-size: 10px;
            }
    /* تصاویر کوچک */
    #gallery-slider {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center;
        gap: 6px !important;
        margin-top: 8px !important;
    }

        #gallery-slider .elevatezoom-gallery {
            width: 55px !important;
            height: 55px !important;
        }
    /* تصاویر پنجره نمایش بیشتر */
    #custom-events {
        gap: 8px;
    }

        #custom-events a {
            width: 140px;
            height: 140px;
            flex: 0 0 140px;
        }
    /* جلوگیری از بیرون‌زدگی ستون اطلاعات */
    .product-info-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
