@media (max-width: 768px) {
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: visible !important; /* جلوگیری از اسکرول افقی */
max-width: 100vw;
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}
.container {
display: flex !important;
flex-wrap: wrap;
gap: 0 !important; /* فاصله بین ستون‌ها */
}
}

.container {
display: flex !important;
flex-wrap: wrap;
gap: 20px; /* فاصله بین ستون‌ها */
}

.column {
width: 30% !important;
position: relative;
}

/* برای موبایل (عرض کمتر از 768px) */
@media (max-width: 768px) {
.container {
justify-items: center; /* وسط‌چین کردن محتوا در گرید */
}
.column {
width: 100% !important; /* عرض دلخواه هر ستون */
}

}

/* استایل سویپر */
.swiper { width: 100%; max-width: 480px; margin: auto; position: relative; }
.swiper-slide img { width: 100%; border-radius: 10px; display: block; }
.swiper-slide { margin:auto; }
.thumb-slider { margin-top: 10px; }
.thumb-slider .swiper-slide { width: 50px !important; height: 50px; opacity: 1; cursor: pointer; }
.thumb-slider .swiper-slide-thumb-active { opacity: 1; border: 2px solid #222;border-radius: 5px; }
.thumb-slider{right: 0; bottom: 5px;}
.swiper-button-next, .swiper-button-prev {
color: #111; width: 50px !important; height: 50px !important;
background: rgba(255, 255, 255, 1); border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
margin:auto;
}

.thumb-nav .swiper-button-next,
.thumb-nav .swiper-button-prev {
position: absolute;
--swiper-navigation-size: none;
top: 50%; transform: translateY(-50%);
width: 40px; height: 40px;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 25px !important;   
color: #000;
}

.swiper-button-next::after { content: "►"; }  /* آیکون دلخواه برای بعدی */
.swiper-button-prev::after { content: "◄"; }  /* آیکون دلخواه برای قبلی */
/* ======= موبایل ======= */
@media (max-width: 768px) {
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
display: none;  /* روی موبایل پنهان شوند */
}
.main-slider{
max-width: 100%;
}
}

/* buy box */
    body > div.container > div.column:nth-child(2) > h1{font-size: 1.5rem;}
            .stock.instock{
                white-space: nowrap;
            }
            div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled > form{
                justify-content: center;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 10px;
            }
            .buy-box{
                display: flex;
                align-items: center;
                gap:10px;
            }
            .stock.in-stock{
                order:5;
            }
                /* برای موبایل (عرض کمتر از 768px) */
            @media (max-width: 1000px) {
            .quantity.qty-enhanced{
                order:2 !important;
            }

            .variable-price-box{
                    background-color: #fff;
                    border-radius: 12px;
                    position: static;
                    bottom: 60px;
                    left: 0;
                    width: 100%;
                    background: #fff;
                    padding: 10px;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
                    z-index: 9999;
                }
        .single_variation_wrap{
                    background-color: #fff;
                    border-radius: 12px;
                    position: static;
                    bottom: 55px;
                    left: 0;
                    width: 100%;
                    background: #fff;
                    padding: 0px;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
                    z-index: 9999;
                }

            }

                .position-disable {
                        display: none;
                    }
                .variable-price-box{
                    background-color: #fff;
                    border-radius: 12px;
                    padding: 10px 15px;
                    margin: 10px 0;
                }

                /* 🎨 استایل مدرن و تمام‌عرض برای فرم انتخاب ویژگی ووکامرس */
            table.variations {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 0px 0;
            padding: 1px;
            background: #fff;
            border: 1px solid #e3e6ea;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            }

            table.variations:hover {
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            }

            /* سطرها */
            table.variations tr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0;
            }

            /* برچسب‌ها */
            table.variations th.label {
            font-size: 14px;
            color: #333;
            font-weight: 700;
            text-align: right;
            min-width: 70px;
            margin-left: 10px;
            }

            /* بخش مقدار (سلکت و لینک) */
            table.variations td.value {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            }
            table.variations td,table.variations th{
            background-color: #fff !important;
                border: none !important;
                line-height: 1.5;
                padding: 3px 15px !important;
                vertical-align: top;
            }
            /* سلکت مدرن تمام‌عرض */
            table.variations select {
            flex: 1;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: #f8f9fa;
            color: #333;
            outline: none;
            transition: all 0.25s ease;
            }

            table.variations select:hover {
            background-color: #f1f3f5;
            border-color: #999;
            }

            table.variations select:focus {
            border-color: #0073aa;
            box-shadow: 0 0 5px rgba(0,115,170,0.3);
            }

            /* لینک پاک کردن انتخاب */
            table.variations a.reset_variations {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: #0073aa;
            text-decoration: none;
            background: #eef6ff;
            padding: 5px 10px;
            border-radius: 8px;
            white-space: nowrap;
            transition: all 0.25s ease;
            }

            table.variations a.reset_variations:hover {
            background: #d9ecff;
            color: #005f8a;
            }


                .single_variation_wrap{
                    display:flex;
                    gap:4px;
                    justify-content: space-around;
                }
                .woocommerce-variation.single_variation{
                    order: 2;
                }
                .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled, .buy-box.cart{
                    display: flex;
                    align-items: center;
                    gap:4px;
                }
                
                .price{
                    display: flex;
                    flex-direction: column;
                }
                ins>.woocommerce-Price-amount.amount{
                        font-size: 22px ;
                        color: green;
                }
                ins{
                    text-decoration:none;
                }
                del>.woocommerce-Price-amount.amount{
                        font-size: 16px !important;
                        color: red;
                }
                @media (max-width:992px) {
                del>.woocommerce-Price-amount.amount{
                        font-size: 4vw !important;
                        color: red;
                }
                ins>.woocommerce-Price-amount.amount{
                        font-size: 5vw !important;
                        color: green;
                }
                    div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled > button{
                        padding: 10px 2px;
                    }
                    div.woocommerce-variation-availability > p{
                        display: none;
                    }
                }
                .stock.in-stock{
                    color: #474747;
                    white-space: nowrap;
                }
                .quantity.qty-enhanced{
                    order:1;
                }
                /* Modern quantity control for WooCommerce (RTL-friendly) */
            .quantity {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            direction: rtl; /* چون فارسی */
            }

            /* Wrapper to visually contain buttons + input */
            .quantity .qty-wrap {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
            border: 1px solid #e6e6e6;
            box-shadow: 0 2px 6px rgba(18, 38, 63, 0.04);
            border-radius: 12px;
            overflow: hidden;
            padding: 4px;
            }

            /* Buttons */
            .quantity .qty-btn {
            -webkit-tap-highlight-color: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 44px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            user-select: none;
            transition: background .12s ease, transform .06s ease;
            color: #333;
            }

            /* Hover / active */
            .quantity .qty-btn:hover { background: rgba(0,0,0,0.03); }
            .quantity .qty-btn:active { transform: translateY(1px); }

            /* Disabled state */
            .quantity .qty-btn[disabled] {
            opacity: 0.38;
            cursor: not-allowed;
            }

            /* Input styling */
            .quantity input[type="number"].qty {
            -moz-appearance: textfield;
            appearance: none;
            width: 20px;
            height: 44px;
            border: none;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background: transparent;
            padding: 0 6px;
            outline: none;
            }

            /* Remove default number arrows in WebKit */
            .quantity input[type=number]::-webkit-outer-spin-button,
            .quantity input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
            }

            /* Small helper label (optional) */
            .quantity .qty-note {
            font-size: 12px;
            color: #6b7280;
            margin-left: 10px;
            white-space: nowrap;
            }

            /* Make sure it looks good on mobile */
            @media (max-width: 480px) {
            .quantity .qty-btn { min-width: 18px; height: 40px; font-size: 32px; }
            .quantity input.qty { width: 56px; height: 40px; font-size: 15px; }
            }

            /* Optional: animate when value changes */
            .quantity .qty-wrap.change-flash {
            animation: flash 260ms ease;
            }
            @keyframes flash {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.12); }
            100% { box-shadow: 0 8px 28px -8px rgba(34,197,94,0); }
            }
                                                /* برای موبایل (عرض کمتر از 768px) */
            @media (max-width: 1000px) {
            .variable-price-box{
                    background-color: #fff;
                    border-radius: 12px;
                    position: static !important;
                    bottom: 100px;
                    left: 0;
                    width: 100%;
                    background: #fff;
                    padding: 2px;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
                    z-index: 9999;
                }
                }

/* tabs */
@media (max-width: 1000px) {
    .tab-links a {
        font-size: 0.7rem !important;
    }
    }
    /* ===== تب‌های محصول ===== */
    .tab-links {
        position: sticky;
        top: 0;
        z-index: 99;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        gap: 4px;
    }

    .tab-links a {
        flex: 1 1 auto;
        text-align: center;
        padding: 12px 16px;
        border-radius: 8px;
        font-weight: 500;
        color: #555;
        text-decoration: none;
        background: #f9f9f9;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .tab-links a.active {
        color: #fff;
        background: #6254ff;
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    .tab-contents {
        padding: 20px 10px;
    }

    .tab-content {
        margin-bottom: 15px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0px 6px 20px 10px #0000000d;
        padding: 20px;
    }

    /* انیمیشن نرم هنگام اسکرول */
    html {
        scroll-behavior: smooth;
    }
        .tab-links {
        overflow-x: visible;
        justify-content: flex-start;
        padding: 8px;
        }
        .tab-links a {
            flex: 0 0 auto;
            font-size: 11px;
            font-weight: 800;
            padding: 10px 12px;
        }
        .woocommerce div.product {
        overflow: visible !important;
        }
/* محصولات مرتبط */
  .related-advanced-section {
    margin-top: 50px;
}

.related-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: right;
}

/* کارت محصول */
.related-card {
    background: #fff;
    padding: 10px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: auto;
    direction: rtl;
}

.related-card a {
    text-decoration: none;
    color: #000;
    display: block;
}

/* تصویر */
.img-box {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: red;
    color: #fff;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
}

/* عنوان 3 خط */
.product-title {
    font-size: 14px;
    margin: 10px 0;
    line-height: 1.5em;
    height: 4.5em; /* سه خط */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* قیمت */
.price-box {
    margin-top: 5px;
}

.price-box .regular {
    text-decoration: line-through;
    color: #777;
    font-size: 13px;
    margin-left: 8px;
}

.price-box .sale {
    color: green;
    font-weight: bold;
    font-size: 15px;
}

/* ستاره‌ها */
.rate-box {
    margin-top: 8px;
    font-size: 16px;
    color: gold;
}

.rate-box .star {
    color: #ccc;
}

.rate-box .full {
    color: gold;
}

/* دکمه‌های Swiper رنگی‌تر شوند */
.swiper-button-next,
.swiper-button-prev {
    color: #000;
}
/* پیام موفقیت افزودن به سبد */
.custom-notice {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #4caf50;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.custom-notice .notice-buttons {
    margin-top: 10px;
}
.custom-notice .notice-buttons a {
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.custom-notice.notice-success { background: #4caf50; }
.custom-notice.notice-error { background: #f44336; }

/* سی اس اس بخش نظرات محصول */

/* باکس لیست نظر */
#comments > ol{
    padding: 0 !important;
}

/* اواتار نظر دهنده */
#comments > ol >li>div>img{
    position: unset !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 100px !important;
    box-shadow: 0 0 50px #bfbfbf;

}
/* اواتار پاسخ دهنده */
.children>li>div> .avatar{
    position: unset !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 100px !important;
    box-shadow: 0 0 50px #bfbfbf;


}
/* رنگ ستاره ها */
.woocommerce .star-rating span::before {
    color: #ffc800;
}
/* حذف خط بین نام نظر دهنده و تاریخ */
.woocommerce-review__dash{
    display: none;
}
/* باکس دارای نام کاربر و تاریخ */
.meta{
    display: flex;
    flex-wrap: wrap;
}
/* برای تعیین اندازه فونت تاریخ و نام نظر دهنده */
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{
    font-size: 1rem;
}
/* تعیین اندازه متن تایتل دیدگاه ها */
.woocommerce-Reviews-title{
        font-size: 18px !important;
}
/*  باکس نظرات کاربران کمی گرد تر شود*/
.woocommerce #reviews #comments ol.commentlist li .comment-text{
    border-radius: 18px;
    box-shadow: 0 0 20px #d8d8d8;

}

/* بخش ثبت نظر */

/* باکس ثبت نظر */
#review_form{
    padding: 22px;
    background-color: #ffffff;
    border-radius: 18px;
    border: solid 2px #c2c2c2;
    box-shadow: 0 0 50px #bfbfbf;
}
/* رنگ ستاره بخش ثبت نظر */
.woocommerce p.stars a::before {
    color: #ffc800;
}
/* اینپوت متن کامنت */
#comment,#author,#email{
    background-color: #ffffff;
    box-shadow: 0 0 50px 0px #ffffff;
    border: solid 3px #878787;
    border-radius: 10px;

}
/* دکمه ثبت نظر */
#submit{
    background-color: #6254ff !important;
    width: 150px;
    border: solid 2px #000000 !important;
    color: #fff !important;
    box-shadow: 0 0 10px #000000 !important;
}
#submit:hover{
    background-color: #7569ff !important;
}

