﻿/* ============================================================================
   AROVANO — PRODUCT DETAILS PAGE
   نسخه: 3.0 (بهینه‌شده)
   ============================================================================ */

/* ============================================
   ۱. پایه و ریست
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazirmatn', sans-serif;
}

body {
    background-color: #f9f9f9;
    color: #333;
    direction: rtl;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ============================================
   ۲. متغیرها
   ============================================ */
:root {
    --arv-teal: #008f86;
    --arv-teal-dark: #006f69;
    --arv-teal-light: #eaf8f6;
    --arv-gold: #efa91f;
    --arv-red: #dc4658;
    --arv-text: #20282d;
    --arv-muted: #7e8a8f;
    --arv-border: #e4ebec;
    --arv-bg: #f6faf9;
    --arv-shadow-sm: 0 6px 20px rgba(24,39,44,.045);
    --arv-shadow-md: 0 16px 38px rgba(24,39,44,.085);
    --fs-base: 15px;
    --fs-lead: 17px;
    --fs-h1: 30px;
    --fs-h2: 22px;
    --fs-h3: 20px;
    --fs-h4: 17px;
    --fs-label: 13px;
    --fs-small: 12px;
    --fs-btn: 14px;
    --fs-price: 26px;
    --fs-price-old: 14px;
    --fs-product-title: 13px;
    --fs-product-price: 15px;
    --lh-base: 1.9;
    --lh-tight: 1.6;
    --lh-card: 1.75;
}

/* ============================================
   ۳. بدنه صفحه محصول
   ============================================ */
body.product-details-page {
    background: radial-gradient(circle at 100% 0%, rgba(0,143,134,.055), transparent 24%), radial-gradient(circle at 0% 22%, rgba(239,169,31,.035), transparent 20%), linear-gradient(180deg, #f9fcfb 0%, #f4f8f7 100%);
    color: var(--arv-text);
}

    body.product-details-page a {
        color: inherit;
    }

    body.product-details-page > .container,
    body.product-details-page .container {
        position: relative;
    }

    body.product-details-page button:focus-visible,
    body.product-details-page a:focus-visible {
        outline: 3px solid rgba(0,143,134,.2);
        outline-offset: 2px;
    }

/* ============================================
   ۴. بلوک اصلی محصول
   ============================================ */
.product-main-content {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--arv-border);
    border-radius: 23px;
    background: radial-gradient(circle at 100% 0%, rgba(0,143,134,.045), transparent 24%), linear-gradient(135deg, #fff 0%, #fbfdfd 100%);
    box-shadow: var(--arv-shadow-sm);
}

    .product-main-content::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 96px;
        border-radius: 0 23px 0 5px;
        background: linear-gradient(180deg, #00aaa0, #00857d);
    }

    .product-main-content::after {
        content: "";
        position: absolute;
        left: -85px;
        bottom: -110px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        border: 1px solid rgba(0,143,134,.05);
        pointer-events: none;
    }

/* ============================================
   ۵. گالری تصویر
   ============================================ */
.gallery-wrapper {
    position: relative;
    max-width: 410px;
    width: 100%;
    margin: 0 auto;
    padding: 6px;
}

.main-image-container {
    position: relative;
    width: 100%;
    min-height: 410px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 1px solid #e9efef;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 42%, rgba(0,143,134,.055), transparent 57%), linear-gradient(145deg, #fbfdfd 0%, #f3f8f7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 22px rgba(24,39,44,.045);
    overflow: hidden;
    cursor: zoom-in;
}

    .main-image-container::after {
        content: "";
        position: absolute;
        left: 13%;
        right: 13%;
        bottom: 20px;
        height: 25px;
        border-radius: 50%;
        background: rgba(25,42,47,.07);
        filter: blur(14px);
        pointer-events: none;
    }

    .main-image-container img {
        position: relative;
        z-index: 2;
        max-width: 92%;
        max-height: 92%;
        object-fit: contain;
        display: block;
        pointer-events: none;
        filter: drop-shadow(0 15px 23px rgba(24,39,44,.075));
        transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .2s ease, filter .35s ease;
    }

    .main-image-container:hover img {
        transform: scale(1.035);
        filter: drop-shadow(0 19px 29px rgba(24,39,44,.11));
    }

/* ناوبری گالری */
.gallery-nav-btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 13px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.gallery-wrapper:hover .gallery-nav-btns {
    opacity: 1;
}

.gallery-nav-btn {
    pointer-events: auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e9e8;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #59666b;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(24,39,44,.09);
    backdrop-filter: blur(8px);
    transition: 0.3s;
}

    .gallery-nav-btn:hover {
        background: var(--arv-teal);
        border-color: var(--arv-teal);
        color: #fff;
        transform: scale(1.07);
    }

/* Badge تخفیف روی تصویر */
.discount-badge-image {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #ec5b69, #cf394e);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: 950;
    z-index: 11;
    box-shadow: 0 9px 19px rgba(211,61,80,.2);
}

/* Thumbnails */
.product-thumbnails {
    display: flex;
    gap: 9px;
    margin-top: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

    .product-thumbnails img {
        width: 61px;
        height: 70px;
        padding: 6px;
        border: 1px solid #e3ebeb;
        border-radius: 12px;
        background: #fff;
        object-fit: contain;
        cursor: pointer;
        box-shadow: 0 3px 9px rgba(24,39,44,.035);
        transition: 0.3s;
    }

        .product-thumbnails img:hover,
        .product-thumbnails img.active {
            border-color: #65c7bd;
            box-shadow: 0 0 0 3px rgba(0,143,134,.08), 0 7px 14px rgba(0,143,134,.08);
            transform: translateY(-2px);
        }

/* ============================================
   ۶. اطلاعات متنی محصول
   ============================================ */
.text-info-wrapper {
    padding: 8px 4px 4px;
}

    .text-info-wrapper .rating-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 31px;
        margin-bottom: 10px;
        color: #f2b51e;
        font-size: var(--fs-label);
    }

        .text-info-wrapper .rating-row span {
            padding: 5px 9px;
            border-radius: 8px;
            background: #fff8e5;
            color: #b47c00;
            font-size: var(--fs-small);
            font-weight: 750;
        }

    .text-info-wrapper h1 {
        max-width: 760px;
        margin-bottom: 7px;
        color: var(--arv-text);
        font-size: var(--fs-h1);
        font-weight: 950;
        line-height: 1.5;
        letter-spacing: -.35px;
    }

    .text-info-wrapper .en-title {
        display: block;
        margin-bottom: 15px;
        color: #a0aaae;
        font-size: var(--fs-label);
        font-weight: 650;
        direction: ltr;
        text-align: right;
    }

    .text-info-wrapper .excerpt {
        max-width: 760px;
        margin-bottom: 16px;
        padding: 13px 15px;
        border-right: 3px solid #9bd9d2;
        border-radius: 0 11px 11px 0;
        background: #f6fbfa;
        color: #68757a;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

        /* لیست‌های داخل excerpt */
        .text-info-wrapper .excerpt ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

            .text-info-wrapper .excerpt ul li {
                position: relative;
                padding: 9px 42px 9px 14px;
                background: #ffffff;
                border: 1px solid #e4efed;
                border-radius: 10px;
                color: #4a555a;
                font-size: var(--fs-base);
                line-height: var(--lh-base);
                box-shadow: 0 2px 6px rgba(24,39,44,.03);
                transition: all 0.25s ease;
            }

                .text-info-wrapper .excerpt ul li::before {
                    content: "\f00c";
                    position: absolute;
                    right: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 22px;
                    height: 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(135deg, #00a99d, #00877f);
                    color: #fff;
                    border-radius: 50%;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900;
                    font-size: 11px;
                    box-shadow: 0 3px 8px rgba(0,143,134,.2);
                    flex-shrink: 0;
                }

                .text-info-wrapper .excerpt ul li:hover {
                    background: #f5fbfa;
                    border-color: #b8dfda;
                    transform: translateX(-3px);
                    box-shadow: 0 5px 14px rgba(0,143,134,.08);
                }

                .text-info-wrapper .excerpt ul li strong {
                    color: #00877f;
                    font-weight: 850;
                }

        .text-info-wrapper .excerpt > p {
            margin-bottom: 10px;
        }

            .text-info-wrapper .excerpt > p:last-child {
                margin-bottom: 0;
            }

    /* برند */
    .text-info-wrapper .brand-meta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 13px;
        padding: 7px 10px;
        border: 1px solid #dcebea;
        border-radius: 9px;
        background: #f7fbfa;
        color: #68757a;
        font-size: var(--fs-label);
    }

        .text-info-wrapper .brand-meta strong {
            color: var(--arv-teal);
            font-weight: 850;
        }

    /* متادیتای محصول */
    .text-info-wrapper .product-metadata {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 760px;
        margin-top: 13px;
        padding-top: 13px;
        border-top: 1px solid #edf1f2;
        font-size: var(--fs-label);
        color: #666;
    }

        .text-info-wrapper .product-metadata > * {
            padding: 8px 0;
            border-bottom: 1px dashed #edf1f2;
        }

            .text-info-wrapper .product-metadata > *:last-child {
                border-bottom: 0;
            }

        .text-info-wrapper .product-metadata .label {
            color: #344147;
            font-weight: 850;
        }

/* ============================================
   ۷. سایدبار خرید
   ============================================ */
.product-sidebar {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 18px;
    align-self: start;
}

.sidebar-wrapper {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    border: 1px solid #dcebea;
    border-radius: 19px;
    background: radial-gradient(circle at 100% 0%, rgba(0,143,134,.09), transparent 38%), linear-gradient(180deg, #f2fbf9 0%, #e9f7f4 100%);
    box-shadow: var(--arv-shadow-sm);
}

/* آیتم‌های اعتماد */
.trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 3px 1px;
}

    .trust-item i {
        width: 41px;
        height: 41px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dcebea;
        border-radius: 12px;
        background: #fff;
        color: var(--arv-teal);
        font-size: 18px;
        flex-shrink: 0;
        box-shadow: 0 5px 12px rgba(0,143,134,.07);
    }

    .trust-item .trust-text h4 {
        margin-bottom: 3px;
        color: #2d393e;
        font-size: var(--fs-label);
        font-weight: 850;
    }

    .trust-item .trust-text p {
        color: #758187;
        font-size: var(--fs-small);
        line-height: 1.75;
        margin: 0;
    }

/* Highlight Box */
.sidebar-wrapper .highlight-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid #e3eeec;
    border-radius: 11px;
    background: rgba(255,255,255,.82);
}

    .sidebar-wrapper .highlight-box .title {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #3c484d;
        font-size: var(--fs-label);
        font-weight: 800;
    }

/* Installment */
.installment-box .text {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #3c484d;
    font-size: var(--fs-label);
    font-weight: 600;
}

    .installment-box .text span {
        color: #7c888d;
        font-weight: normal;
    }

.installment-box img {
    max-width: 100%;
    height: 42px;
    object-fit: contain;
}

/* قیمت و سبد خرید */
.price-cart-box {
    padding: 15px;
    border: 1px solid #e0e9e8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(24,39,44,.055);
}

    .price-cart-box .price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 13px;
    }

        .price-cart-box .price-row .curr {
            color: #00877f;
            font-size: var(--fs-price);
            font-weight: 950;
            letter-spacing: -.25px;
        }

        .price-cart-box .price-row .old {
            color: #a8b0b3;
            font-size: var(--fs-price-old);
            text-decoration: line-through;
        }

/* ردیف افزودن به سبد */
.add-cart-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    flex-wrap: wrap;
}

    .add-cart-row .qty {
        display: flex;
        height: 45px;
        border: 1px solid #dfe8e8;
        border-radius: 11px;
        overflow: hidden;
        background: #fff;
    }

        .add-cart-row .qty button {
            width: 34px;
            padding: 0;
            border: none;
            background: #f5f8f8;
            color: #627075;
            font-size: 16px;
            font-weight: 850;
            cursor: pointer;
            transition: .2s;
        }

            .add-cart-row .qty button:hover {
                color: var(--arv-teal);
                background: #edf8f6;
            }

        .add-cart-row .qty input {
            width: 40px;
            height: 100%;
            border: none;
            border-left: 1px solid #e7eeee;
            border-right: 1px solid #e7eeee;
            text-align: center;
            color: #344147;
            font-size: var(--fs-label);
            font-weight: 750;
            outline: none;
            background: #fff;
        }

    .add-cart-row .btn-add {
        flex: 1;
        min-width: 100px;
        height: 45px;
        padding: 0 15px;
        border: none;
        border-radius: 11px;
        background: linear-gradient(135deg, #00a99d 0%, #00847c 100%);
        color: #fff;
        font-size: var(--fs-btn);
        font-weight: 900;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: 0 9px 18px rgba(0,143,134,.19);
        transition: 0.3s;
    }

        .add-cart-row .btn-add:hover {
            background: linear-gradient(135deg, #008f86 0%, #006f69 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 22px rgba(0,143,134,.24);
        }

/* Badge تخفیف inline */
.discount-badge-inline {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #ec5b69, #cf394e);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: bold;
    box-shadow: 0 7px 15px rgba(211,61,80,.18);
}

/* بنر سایدبار */
.sidebar-banner {
    display: block;
    margin-top: 1px;
    border: 1px solid #e1e9e8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 7px 17px rgba(24,39,44,.045);
}

    .sidebar-banner img {
        width: 100%;
        display: block;
        transition: transform .4s ease;
    }

    .sidebar-banner:hover img {
        transform: scale(1.02);
    }

/* ============================================
   ۸. تب‌های اطلاعات
   ============================================ */
.product-tabs-section {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--arv-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--arv-shadow-sm);
}

.p-tabs-header {
    position: relative;
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid #e9efef;
    background: #fbfdfd;
}

.p-tab-btn {
    min-height: 42px;
    padding: 7px 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 10px;
    background: none;
    color: #7b878c;
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
}

    .p-tab-btn:hover {
        color: var(--arv-teal);
        background: #f2faf8;
    }

    .p-tab-btn.active {
        border-color: #cfe8e4;
        color: #007f77;
        background: #eaf8f6;
        box-shadow: 0 4px 10px rgba(0,143,134,.07);
    }

.p-tab-content {
    display: none;
    padding: 22px;
    text-rendering: optimizeLegibility;
}

    .p-tab-content.active {
        display: block;
    }

    .p-tab-content h4 {
        margin-bottom: 10px;
        color: #273238;
        font-size: var(--fs-h4);
        font-weight: 900;
    }

    .p-tab-content p {
        color: #68757a;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

/* جدول مشخصات */
.spec-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e5ecec;
    border-radius: 12px;
    font-size: var(--fs-label);
    line-height: 1.9;
}

    .spec-table tr:nth-child(odd) {
        background: #f7faf9;
    }

    .spec-table tr:nth-child(even) {
        background: #fff;
    }

    .spec-table td {
        padding: 11px 13px;
        border: 1px solid #e7eded;
        color: #667278;
        font-size: var(--fs-label);
        line-height: 1.8;
        text-align: right;
    }

        .spec-table td:first-child {
            width: 28%;
            color: #344147;
            font-weight: 850;
        }

/* ============================================
   ۹. بخش‌های کارتی (Description / Specs / Reviews / FAQ)
   ============================================ */
.card-style-section {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--arv-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--arv-shadow-sm);
}

    .card-style-section .section-header {
        position: relative;
        padding: 17px 20px;
        border-bottom: 1px solid #e9efef;
        background: linear-gradient(180deg, #fff, #fbfdfd);
        text-align: center;
    }

        .card-style-section .section-header::before {
            content: "";
            position: absolute;
            right: 20px;
            bottom: -2px;
            width: 46px;
            height: 3px;
            border-radius: 4px;
            background: var(--arv-teal);
        }

        .card-style-section .section-header h2,
        .card-style-section .section-header h3 {
            color: #273238;
            font-size: var(--fs-h4);
            font-weight: 900;
            margin: 0;
        }

    .card-style-section .section-body {
        padding: 20px;
    }

        .card-style-section .section-body p,
        .card-style-section .section-body ul,
        .card-style-section .section-body li {
            font-size: var(--fs-base);
            line-height: var(--lh-base);
        }

        /* محتوای توضیحات */
        .card-style-section .section-body .desc-content {
            color: #68757a;
            font-size: var(--fs-base);
            line-height: var(--lh-base);
        }

            .card-style-section .section-body .desc-content h2,
            .card-style-section .section-body .desc-content h3 {
                color: #303c41;
                font-size: var(--fs-h3);
                font-weight: 850;
                line-height: 1.7;
            }
            .card-style-section .section-body .desc-content a{
                color:darkblue;
                
            }
            .card-style-section .section-body .desc-content img {
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
                border-radius: 15px;
                box-shadow: 0 8px 22px rgba(24,39,44,.07);
            }

            /* لیست‌های داخل desc-content */
            .card-style-section .section-body .desc-content ul,
            .card-style-section .section-body .desc-content ol {
                list-style: none;
                padding: 0;
                margin: 16px 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .card-style-section .section-body .desc-content ol {
                counter-reset: desc-counter;
            }

                .card-style-section .section-body .desc-content ul li,
                .card-style-section .section-body .desc-content ol li {
                    position: relative;
                    padding: 10px 44px 10px 14px;
                    background: linear-gradient(135deg, #f8fcfb 0%, #f3faf8 100%);
                    border: 1px solid #e3f0ee;
                    border-radius: 11px;
                    color: #4a555a;
                    font-size: var(--fs-base);
                    line-height: var(--lh-base);
                    transition: all 0.25s ease;
                }

                    .card-style-section .section-body .desc-content ul li::before {
                        content: "\f00c";
                        position: absolute;
                        right: 13px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 22px;
                        height: 22px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: linear-gradient(135deg, #00a99d, #00877f);
                        color: #fff;
                        border-radius: 50%;
                        font-family: "Font Awesome 6 Free";
                        font-weight: 900;
                        font-size: 11px;
                        box-shadow: 0 3px 8px rgba(0,143,134,.18);
                    }

                .card-style-section .section-body .desc-content ol li {
                    counter-increment: desc-counter;
                    padding: 10px 48px 10px 14px;
                }

                    .card-style-section .section-body .desc-content ol li::before {
                        content: counter(desc-counter);
                        position: absolute;
                        right: 12px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 26px;
                        height: 26px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: linear-gradient(135deg, #00a99d, #00877f);
                        color: #fff;
                        border-radius: 8px;
                        font-size: var(--fs-label);
                        font-weight: 900;
                        box-shadow: 0 3px 8px rgba(0,143,134,.18);
                    }

                    .card-style-section .section-body .desc-content ul li:hover,
                    .card-style-section .section-body .desc-content ol li:hover {
                        background: linear-gradient(135deg, #eef9f7 0%, #e6f5f2 100%);
                        border-color: #a8dbd5;
                        transform: translateX(-3px);
                        box-shadow: 0 5px 15px rgba(0,143,134,.08);
                    }

                    .card-style-section .section-body .desc-content ul li strong,
                    .card-style-section .section-body .desc-content ol li strong {
                        color: #00877f;
                        font-weight: 850;
                    }

                /* لیست تودرتو */
                .card-style-section .section-body .desc-content ul ul,
                .card-style-section .section-body .desc-content ol ul,
                .card-style-section .section-body .desc-content ul ol,
                .card-style-section .section-body .desc-content ol ol {
                    margin: 8px 0 0 0;
                    gap: 6px;
                }

                    .card-style-section .section-body .desc-content ul ul li,
                    .card-style-section .section-body .desc-content ol ul li,
                    .card-style-section .section-body .desc-content ul ol li,
                    .card-style-section .section-body .desc-content ol ol li {
                        padding: 8px 40px 8px 12px;
                        background: #fff;
                    }

                        .card-style-section .section-body .desc-content ul ul li::before,
                        .card-style-section .section-body .desc-content ol ul li::before {
                            width: 18px;
                            height: 18px;
                            font-size: 9px;
                            background: #b8dfda;
                        }

            /* جدول داخل desc-content */
            .card-style-section .section-body .desc-content table {
                width: 100%;
                margin: 20px 0;
                border-collapse: separate;
                border-spacing: 0;
                overflow: hidden;
                border: 1px solid #e2ebeb;
                border-radius: 14px;
                background: #fff;
                box-shadow: 0 4px 16px rgba(24,39,44,.05);
                font-size: var(--fs-base);
                line-height: var(--lh-tight);
            }

                .card-style-section .section-body .desc-content table thead {
                    background: linear-gradient(135deg, #00a99d 0%, #00877f 100%);
                }

                    .card-style-section .section-body .desc-content table thead tr th {
                        position: relative;
                        padding: 14px 16px;
                        color: #ffffff;
                        font-size: var(--fs-label);
                        font-weight: 800;
                        text-align: right;
                        border: none;
                        white-space: nowrap;
                        letter-spacing: 0.2px;
                    }

                        .card-style-section .section-body .desc-content table thead tr th strong {
                            color: #ffffff;
                            font-weight: 800;
                        }

                        .card-style-section .section-body .desc-content table thead tr th:not(:last-child)::after {
                            content: "";
                            position: absolute;
                            left: 0;
                            top: 25%;
                            height: 50%;
                            width: 1px;
                            background: rgba(255,255,255,.2);
                        }

                .card-style-section .section-body .desc-content table tbody tr {
                    transition: background 0.2s ease;
                }

                    .card-style-section .section-body .desc-content table tbody tr:nth-child(even) {
                        background: #f8fbfb;
                    }

                    .card-style-section .section-body .desc-content table tbody tr:hover {
                        background: #eef9f7;
                    }

                    .card-style-section .section-body .desc-content table tbody tr:not(:last-child) td {
                        border-bottom: 1px solid #eef3f3;
                    }

                    .card-style-section .section-body .desc-content table tbody tr td {
                        padding: 13px 16px;
                        color: #4a555a;
                        font-size: var(--fs-base);
                        font-weight: 500;
                        text-align: right;
                        vertical-align: middle;
                        line-height: var(--lh-base);
                    }

                        .card-style-section .section-body .desc-content table tbody tr td:first-child {
                            color: #1a1a2e;
                            font-weight: 700;
                            background: rgba(0,143,134,.03);
                        }

                    .card-style-section .section-body .desc-content table tbody tr:hover td:first-child {
                        color: #00877f;
                        background: rgba(0,143,134,.06);
                    }

/* دکمه نمایش بیشتر */
.read-more-wrapper {
    margin-top: 15px;
    text-align: center;
}

/* ============================================
   توضیحات - حالت جمع‌شده و بازشده
   ============================================ */
.desc-content-wrapper {
    position: relative;
    transition: max-height 0.4s ease;
}

    .desc-content-wrapper.collapsed {
        max-height: 280px; /* ارتفاع پیش‌فرض نمایش خلاصه */
        overflow: hidden;
    }

        .desc-content-wrapper.collapsed::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
            pointer-events: none;
        }

    .desc-content-wrapper.expanded {
        max-height: none;
        overflow: visible;
    }

/* اگر متن کوتاه بود، دکمه مخفی شود */
.read-more-wrapper.hidden {
    display: none;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 24px;
    background: #eaf8f6;
    border: 1px solid #cfe8e4;
    border-radius: 30px;
    color: #00877f;
    font-size: var(--fs-label);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .read-more-link:hover {
        background: linear-gradient(135deg, #00a99d, #00877f);
        border-color: #00a99d;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 17px rgba(0,143,134,.2);
    }

    .read-more-link::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        transition: transform 0.3s ease;
    }

    .read-more-link.expanded::after {
        transform: rotate(180deg);
    }

/* ============================================
   ۱۰. نظرات
   ============================================ */
.reviews-section .section-body .review-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #e6eeee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(24,39,44,.025);
    transition: all .25s ease;
}

    .reviews-section .section-body .review-item:nth-child(even) {
        background: #f7fbfa;
    }

    .reviews-section .section-body .review-item:hover {
        transform: translateY(-2px);
        border-color: #cce6e2;
        box-shadow: 0 9px 20px rgba(0,143,134,.06);
    }

    .reviews-section .section-body .review-item .review-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

        .reviews-section .section-body .review-item .review-header .user-name {
            color: #344147;
            font-size: var(--fs-label);
            font-weight: 850;
        }

        .reviews-section .section-body .review-item .review-header .user-tag {
            padding: 3px 7px;
            border-radius: 7px;
            background: #eaf8f6;
            color: #087e76;
            font-size: var(--fs-small);
            font-weight: 800;
        }

        .reviews-section .section-body .review-item .review-header .review-date {
            color: #9aa4a8;
            font-size: var(--fs-small);
        }

        .reviews-section .section-body .review-item .review-header .user-avatar i {
            font-size: 32px;
            color: #aab7b9;
        }

        .reviews-section .section-body .review-item .review-header .user-avatar img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
        }

    .reviews-section .section-body .review-item .review-content .star-rating {
        margin-bottom: 5px;
        color: #f2b51e;
        font-size: var(--fs-label);
        letter-spacing: 2px;
    }

    .reviews-section .section-body .review-item .review-content p {
        color: #68757a;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        margin: 0;
    }

.review-item.user-review {
    border: 1px solid #9bd8d1;
    background: #f1fbf9;
    box-shadow: 0 8px 20px rgba(0,143,134,.07);
}

/* فرم ثبت نظر */
.reviews-section .section-body .review-form-section {
    margin-top: 16px;
    padding: 17px;
    border: 1px solid #dcebea;
    border-radius: 15px;
    background: #f1faf8;
}

    .reviews-section .section-body .review-form-section h4 {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dce9e7;
        color: #344147;
        font-size: var(--fs-h4);
    }

    .reviews-section .section-body .review-form-section .form-group {
        margin-bottom: 15px;
    }

        .reviews-section .section-body .review-form-section .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #47545a;
            font-size: var(--fs-label);
            font-weight: 600;
        }

            .reviews-section .section-body .review-form-section .form-group label .required {
                color: #e03a3a;
            }

        .reviews-section .section-body .review-form-section .form-group .star-input,
        .star-input-big {
            display: flex;
            gap: 2px;
            font-size: 20px;
            color: #ddd;
            cursor: pointer;
        }

            .reviews-section .section-body .review-form-section .form-group .star-input i.active,
            .star-input-big i.active {
                color: #fbc02d;
            }

            .star-input-big i {
                transition: all 0.2s ease;
            }

                .star-input-big i:hover {
                    transform: scale(1.1);
                }

        .reviews-section .section-body .review-form-section .form-group textarea {
            width: 100%;
            height: 105px;
            padding: 10px;
            border: 1px solid #dfe9e8;
            border-radius: 11px;
            font-size: var(--fs-base);
            line-height: var(--lh-base);
            font-family: inherit;
            background: #fff;
            outline: none;
            resize: vertical;
        }

            .reviews-section .section-body .review-form-section .form-group textarea:focus {
                border-color: #7dcfc6;
                box-shadow: 0 0 0 3px rgba(0,143,134,.07);
            }

    .reviews-section .section-body .review-form-section .btn-submit-review {
        min-height: 39px;
        padding: 8px 22px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #00a99d, #00847c);
        color: #fff;
        font-size: var(--fs-btn);
        font-weight: 850;
        cursor: pointer;
        transition: 0.3s;
    }

        .reviews-section .section-body .review-form-section .btn-submit-review:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 17px rgba(0,143,134,.2);
        }

    .reviews-section .section-body .review-form-section .login-note {
        font-size: var(--fs-small);
        color: #777;
        margin-top: 10px;
        display: block;
    }

/* پاسخ‌های نظرات */
.review-replies {
    animation: fadeIn 0.3s ease;
}

.reply-item {
    transition: all 0.2s ease;
}

    .reply-item:hover {
        background: #f1fbf8 !important;
    }

    .reply-item .reply-actions {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }

        .reply-item .reply-actions button {
            background: none;
            border: none;
            color: #888;
            font-size: var(--fs-small);
            cursor: pointer;
            padding: 0;
            transition: 0.3s;
        }

            .reply-item .reply-actions button:hover {
                color: #00a99d;
            }

.reply-icon {
    color: #00a99d;
    font-size: var(--fs-small);
    margin-left: 5px;
}

/* مراحل فرم نظر */
.review-step {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ۱۱. FAQ آکاردئون
   ============================================ */
.faq-item {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid #e4ecec;
    border-radius: 13px;
    background: #fff;
}

.faq-question {
    min-height: 47px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border-radius: 13px;
    background: #fff;
    color: #3a474c;
    font-size: var(--fs-base);
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

    .faq-question:hover {
        background: #f5fbfa;
        color: var(--arv-teal);
    }

    .faq-question i {
        color: var(--arv-teal);
        transition: transform 0.3s ease;
    }

.faq-item.open .faq-question i {
    transform: rotate(-180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #68757a;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
    padding: 18px 20px 20px;
    border-top: 1px solid #e4eeee;
}

.faq-answer p {
    margin-bottom: 8px;
}

.faq-answer ul,
.faq-answer ol {
    padding-right: 20px;
    margin-bottom: 8px;
}

.faq-answer a {
    color: var(--arv-teal);
}

    .faq-answer a:hover {
        text-decoration: underline;
    }

/* ============================================
   ۱۲. Toast پیام‌ها
   ============================================ */
.toast-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 90%;
    padding: 12px 24px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 12px;
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: center;
    box-shadow: 0 13px 30px rgba(24,39,44,.16);
    backdrop-filter: blur(8px);
    animation: slideDown 0.3s ease;
}

    .toast-message.success {
        background: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .toast-message.error {
        background: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }

    .toast-message.warning {
        background: #fff3cd;
        color: #856404;
        border-color: #ffc107;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}



/* ============================================
   ۱۴. برچسب ناموجود
   ============================================ */
.out-of-stock-banner {
    margin-bottom: 14px;
    padding: 12px 15px;
    border: 1px solid #e2e7e8;
    border-radius: 13px;
    background: linear-gradient(135deg, #fafbfb, #f2f5f5);
    text-align: center;
}

.out-of-stock-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    .out-of-stock-banner-content i {
        color: #929da1;
        font-size: 15px;
    }

    .out-of-stock-banner-content span {
        color: #7e888c;
        font-size: var(--fs-base);
        font-weight: 750;
        letter-spacing: 2px;
    }

/* ============================================
   ۱۵. لایت‌باکس گالری
   ============================================ */
.product-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    direction: rtl;
}

    .product-gallery-lightbox.active {
        display: flex;
    }

.product-gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(3px);
}

.product-gallery-lightbox-content {
    position: relative;
    width: min(94vw, 1100px);
    height: min(92vh, 850px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.product-gallery-lightbox-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}

    .product-gallery-lightbox-image-wrapper img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
        user-select: none;
        -webkit-user-drag: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    }

.product-gallery-lightbox-close {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #333;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s ease;
}

    .product-gallery-lightbox-close:hover {
        background: #fff;
        transform: scale(1.05);
    }

.product-gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #333;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

    .product-gallery-lightbox-nav:hover {
        background: #fff;
        transform: translateY(-50%) scale(1.05);
    }

.product-gallery-lightbox-prev {
    right: 10px;
}

.product-gallery-lightbox-next {
    left: 10px;
}

.product-gallery-lightbox-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: var(--fs-label);
    z-index: 10;
    white-space: nowrap;
}

body.product-gallery-lightbox-open {
    overflow: hidden !important;
}

/* ============================================
   ۱۶. Mobile Buy Bar
   ============================================ */
.mobile-product-buy-bar {
    display: none;
}

@media (max-width: 962px) {
    body.product-details-page {
        padding-bottom: calc(91px + env(safe-area-inset-bottom)) !important;
    }

        body.product-details-page .mobile-bottom-nav {
            display: none !important;
        }

        body.product-details-page .mobile-product-buy-bar {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1050;
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 11px calc(9px + env(safe-area-inset-bottom));
            border-top: 1px solid #dfe9e8;
            background: rgba(255,255,255,.97);
            box-shadow: 0 -9px 27px rgba(24,39,44,.11);
            backdrop-filter: blur(14px);
            direction: rtl;
        }

        body.product-details-page .mobile-product-price {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
            direction: ltr;
        }

    .mobile-product-price-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        direction: rtl;
        line-height: 1.2;
    }

    .mobile-product-old-price {
        min-height: 18px;
        color: #a1aaad;
        font-size: var(--fs-small);
        text-decoration: line-through;
        white-space: nowrap;
    }

        .mobile-product-old-price span {
            margin-right: 3px;
            font-size: var(--fs-small);
            text-decoration: none;
        }

    .mobile-product-current-price {
        color: #00877f;
        font-size: var(--fs-h4);
        font-weight: 950;
        white-space: nowrap;
    }

        .mobile-product-current-price span {
            margin-right: 3px;
            font-size: var(--fs-small);
            font-weight: 500;
        }

    .mobile-product-discount {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        height: 30px;
        padding: 0 8px;
        border-radius: 9px;
        background: #df4c5d;
        color: #ffffff;
        font-size: var(--fs-label);
        font-weight: 900;
        white-space: nowrap;
    }

    body.product-details-page .mobile-product-add-cart {
        flex: 1;
        max-width: 210px;
        min-height: 47px;
        padding: 0 18px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #00a99d, #00847c);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: inherit;
        font-size: var(--fs-label);
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 8px 17px rgba(0,143,134,.2);
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

        body.product-details-page .mobile-product-add-cart:hover {
            background: linear-gradient(135deg, #008f86, #006f69);
        }

        body.product-details-page .mobile-product-add-cart:active {
            transform: scale(0.98);
        }

    .mobile-product-add-cart i {
        font-size: 15px;
    }
}

/* ============================================================================
   ۱۷. RESPONSIVE — TABLET (max-width: 1199.98px)
   ============================================================================ */
@media (max-width: 1199.98px) {
    .product-sidebar {
        width: 300px;
    }

    .main-image-container {
        min-height: 350px;
    }

    .text-info-wrapper h1 {
        font-size: var(--fs-h2);
    }
}

/* ============================================================================
   ۱۸. RESPONSIVE — TABLET/PORTRAIT (max-width: 992px)
   ============================================================================ */
@media (max-width: 992px) {
    :root {
        --fs-base: 14px;
        --fs-lead: 15.5px;
        --fs-h1: 24px;
        --fs-h2: 20px;
        --fs-h3: 18px;
        --fs-h4: 16px;
        --fs-label: 12.5px;
        --fs-small: 12px;
        --fs-btn: 13px;
        --fs-price: 22px;
        --fs-price-old: 12.5px;
        --fs-product-title: 12.5px;
        --fs-product-price: 14px;
    }

    .product-main-content {
        padding: 15px;
        border-radius: 18px;
    }

    .product-sidebar {
        width: 100%;
        position: static;
        order: -1;
        margin-bottom: 12px;
    }

    .sidebar-wrapper {
        border-radius: 16px;
    }

    .gallery-wrapper {
        max-width: 390px;
    }

    .main-image-container {
        min-height: 360px;
    }

    .slider-wrapper {
        padding: 0 28px;
    }
}

/* ============================================================================
   ۱۹. RESPONSIVE — MOBILE (max-width: 767.98px)
   ============================================================================ */
@media (max-width: 767.98px) {
    :root {
        --fs-base: 13.5px;
        --fs-lead: 15px;
        --fs-h1: 21px;
        --fs-h2: 18px;
        --fs-h3: 17px;
        --fs-h4: 15px;
        --fs-label: 12.5px;
        --fs-small: 12px;
        --fs-btn: 12.5px;
        --fs-price: 20px;
        --fs-price-old: 12px;
        --fs-product-title: 12px;
        --fs-product-price: 13.5px;
    }

    body.product-details-page {
        background: #f5f9f8;
    }

    .product-main-content {
        padding: 10px;
        border-radius: 15px;
        box-shadow: 0 6px 18px rgba(24,39,44,.045);
    }

        .product-main-content::before {
            width: 4px;
            height: 65px;
            border-radius: 0 15px 0 4px;
        }

    .gallery-wrapper {
        max-width: 100%;
        padding: 3px;
    }

    .main-image-container {
        min-height: 0;
        padding: 15px;
        border-radius: 15px;
    }

        .main-image-container img {
            max-width: 88%;
            max-height: 88%;
        }

    .gallery-nav-btns {
        opacity: 1;
        padding: 0 7px;
    }

    .gallery-nav-btn {
        width: 32px;
        height: 32px;
        font-size: var(--fs-label);
    }

    .discount-badge-image {
        top: 10px;
        left: 10px;
        width: 41px;
        height: 41px;
        border-radius: 11px;
        font-size: var(--fs-small);
    }

    .product-thumbnails {
        gap: 6px;
        margin-top: 10px;
    }

        .product-thumbnails img {
            width: 48px;
            height: 55px;
            border-radius: 9px;
        }

    .text-info-wrapper {
        padding: 13px 4px 2px;
    }

        .text-info-wrapper .rating-row {
            margin-bottom: 7px;
            font-size: var(--fs-label);
        }

            .text-info-wrapper .rating-row span {
                padding: 4px 7px;
                font-size: var(--fs-small);
            }

        .text-info-wrapper h1 {
            margin-bottom: 5px;
            font-size: var(--fs-h2);
            line-height: 1.6;
        }

        .text-info-wrapper .en-title {
            margin-bottom: 10px;
            font-size: var(--fs-small);
        }

        .text-info-wrapper .excerpt {
            margin-bottom: 10px;
            padding: 9px 10px;
            font-size: var(--fs-base);
        }

            .text-info-wrapper .excerpt ul li {
                padding: 8px 38px 8px 11px;
                font-size: var(--fs-base);
                border-radius: 9px;
            }

                .text-info-wrapper .excerpt ul li::before {
                    right: 10px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                }

        .text-info-wrapper .brand-meta {
            margin-bottom: 8px;
            padding: 5px 7px;
            font-size: var(--fs-small);
        }

        .text-info-wrapper .product-metadata {
            margin-top: 8px;
            padding-top: 8px;
            font-size: var(--fs-small);
        }

            .text-info-wrapper .product-metadata > * {
                padding: 6px 0;
            }

    .sidebar-wrapper {
        padding: 11px;
        gap: 8px;
    }

    .trust-item {
        gap: 8px;
    }

        .trust-item i {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            font-size: 14px;
        }

        .trust-item .trust-text h4 {
            font-size: var(--fs-label);
        }

        .trust-item .trust-text p {
            font-size: var(--fs-small);
        }

    .price-cart-box {
        padding: 11px;
        border-radius: 13px;
    }

        .price-cart-box .price-row .curr {
            font-size: var(--fs-h2);
        }

        .price-cart-box .price-row .old {
            font-size: var(--fs-small);
        }

    .add-cart-row .qty {
        height: 40px;
    }

    .add-cart-row .btn-add {
        height: 40px;
        font-size: var(--fs-small);
    }

    .discount-badge-inline {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        font-size: var(--fs-small);
    }

    .product-tabs-section,
    .card-style-section {
        margin-top: 12px;
        border-radius: 15px;
    }

    .p-tabs-header {
        gap: 4px;
        padding: 7px;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .p-tabs-header::-webkit-scrollbar {
            display: none;
        }

    .p-tab-btn {
        flex: 0 0 auto;
        min-height: 37px;
        padding: 6px 11px;
        border-radius: 9px;
        font-size: var(--fs-label);
    }

    .p-tab-content {
        padding: 14px;
    }

        .p-tab-content h4 {
            font-size: var(--fs-h4);
        }

        .p-tab-content p {
            font-size: var(--fs-base);
        }

    .spec-table td {
        padding: 8px 9px;
        font-size: var(--fs-label);
    }

    .card-style-section .section-header {
        padding: 13px 15px;
    }

        .card-style-section .section-header h2,
        .card-style-section .section-header h3 {
            font-size: var(--fs-h4);
        }

    .card-style-section .section-body {
        padding: 13px;
    }

        .card-style-section .section-body .desc-content {
            font-size: var(--fs-base);
            line-height: var(--lh-base);
        }

            /* لیست‌ها */
            .card-style-section .section-body .desc-content ul li,
            .card-style-section .section-body .desc-content ol li {
                padding: 9px 40px 9px 12px;
                font-size: var(--fs-base);
                border-radius: 9px;
            }

                .card-style-section .section-body .desc-content ul li::before {
                    right: 11px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                }

                .card-style-section .section-body .desc-content ol li::before {
                    right: 10px;
                    width: 24px;
                    height: 24px;
                    font-size: var(--fs-small);
                }

            /* جدول responsive */
            .card-style-section .section-body .desc-content table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                border-radius: 12px;
                font-size: var(--fs-label);
                margin: 16px 0;
            }

                .card-style-section .section-body .desc-content table thead,
                .card-style-section .section-body .desc-content table tbody,
                .card-style-section .section-body .desc-content table tr {
                    display: table;
                    width: 100%;
                    table-layout: auto;
                }

                    .card-style-section .section-body .desc-content table thead tr th,
                    .card-style-section .section-body .desc-content table tbody tr td {
                        padding: 10px 12px;
                        font-size: var(--fs-label);
                        min-width: 110px;
                    }

                        .card-style-section .section-body .desc-content table thead tr th:first-child,
                        .card-style-section .section-body .desc-content table tbody tr td:first-child {
                            min-width: 130px;
                        }

                .card-style-section .section-body .desc-content table::-webkit-scrollbar {
                    height: 6px;
                }

                .card-style-section .section-body .desc-content table::-webkit-scrollbar-track {
                    background: #f0f4f4;
                    border-radius: 10px;
                }

                .card-style-section .section-body .desc-content table::-webkit-scrollbar-thumb {
                    background: #b8d8d5;
                    border-radius: 10px;
                }

                    .card-style-section .section-body .desc-content table::-webkit-scrollbar-thumb:hover {
                        background: #8fc4bf;
                    }

    .read-more-link {
        padding: 8px 20px;
        font-size: var(--fs-small);
    }

    /* اسلایدر */
    .slider-wrapper {
        padding: 0 22px;
    }

    .slider-btn {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: var(--fs-label);
    }

    .slider-btn-prev {
        right: 1px;
    }

    .slider-btn-next {
        left: 1px;
    }

    .similar-product-card,
    .brand-product-card {
        flex-basis: 155px;
        min-height: 250px;
        padding: 8px;
        border-radius: 12px;
    }

        .similar-product-card .sim-img,
        .brand-product-card .br-img {
            height: 130px;
            border-radius: 9px;
        }

        .similar-product-card .sim-title,
        .brand-product-card .br-title {
            min-height: 38px;
            font-size: var(--fs-small);
        }

        .similar-product-card .sim-price-box .price-new,
        .brand-product-card .br-price-box .price-new {
            font-size: var(--fs-product-price);
        }

    /* نظرات */
    .reviews-section .section-body .review-item {
        padding: 11px;
        border-radius: 12px;
    }

        .reviews-section .section-body .review-item .review-header .user-name {
            font-size: var(--fs-label);
        }

        .reviews-section .section-body .review-item .review-content p {
            font-size: var(--fs-base);
        }

    /* FAQ */
    .faq-question {
        min-height: 43px;
        padding: 9px 11px;
        font-size: var(--fs-base);
    }

    .faq-answer {
        font-size: var(--fs-base);
    }

    /* لایت‌باکس */
    .product-gallery-lightbox-content {
        width: 100vw;
        height: 100vh;
    }

    .product-gallery-lightbox-image-wrapper {
        width: 100%;
        height: 100%;
        padding: 70px 45px;
    }

    .product-gallery-lightbox-close {
        top: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .product-gallery-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .product-gallery-lightbox-prev {
        right: 8px;
    }

    .product-gallery-lightbox-next {
        left: 8px;
    }

    .product-gallery-lightbox-counter {
        bottom: 18px;
        font-size: var(--fs-small);
    }
    .desc-content-wrapper.collapsed {
        max-height: 220px;
    }
}

/* ============================================================================
   ۲۰. RESPONSIVE — VERY SMALL PHONES (max-width: 420px)
   ============================================================================ */
@media (max-width: 420px) {
    :root {
        --fs-base: 13px;
        --fs-h1: 19px;
        --fs-h2: 17px;
        --fs-h3: 16px;
        --fs-h4: 14.5px;
        --fs-label: 12px;
        --fs-small: 12px;
        --fs-btn: 12px;
        --fs-price: 18px;
        --fs-price-old: 12px;
        --fs-product-title: 12px;
        --fs-product-price: 13px;
    }

    .product-main-content {
        padding: 7px;
    }

    .text-info-wrapper h1 {
        font-size: var(--fs-h3);
    }

    .product-thumbnails img {
        width: 43px;
        height: 50px;
    }

    .similar-product-card,
    .brand-product-card {
        flex-basis: 145px;
    }

    body.product-details-page .mobile-product-buy-bar {
        gap: 7px;
    }

    body.product-details-page .mobile-product-add-cart {
        max-width: 175px;
        font-size: var(--fs-small);
    }
}

/* ============================================================================
   ۲۱. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

.spec-value {
    white-space: pre-line;
    line-height: 1.6;
}



/* ============================================
   دکمه‌های ناوبری گرد (دایره کامل)
   ============================================ */
.round-nav-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
}

    .round-nav-btn i {
        font-size: 13px;
        line-height: 1;
        display: block;
        margin: 0;
    }