/* 3D Shadow Effect for Product Images using MGreen color from Tailwind */
        /* MGreen: #234a34 = rgb(35, 74, 52) */
        .product-image-3d {
            position: relative;
            --mgreen: #234a34;
            --mgreen-rgb: 35, 74, 52;

            /* حالت پایه - LTR پیش‌فرض */
            box-shadow:
                0 10px 30px rgba(var(--mgreen-rgb), 0.3),
                -12px 12px 0 rgba(var(--mgreen-rgb), 2),
                -12px 12px 20px rgba(var(--mgreen-rgb), 0.2);

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }

        /* Mobile (زیر md در Tailwind - عرض < 768px) */
        @media (max-width: 767px) {
            .product-image-3d {
                /* LTR موبایل */
                box-shadow:
                    0 8px 25px rgba(var(--mgreen-rgb), 0.25),
                    -10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    -10px 10px 15px rgba(var(--mgreen-rgb), 0.2);

                margin-left: 5px;
                /* فاصله کوچکتر در موبایل */
            }

            .product-image-3d:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 10px 30px rgba(var(--mgreen-rgb), 0.2),
                    -10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    -12px 12px 20px rgba(var(--mgreen-rgb), 0.25);
            }

            /* RTL موبایل */
            [dir="rtl"] .product-image-3d {
                box-shadow:
                    0 8px 25px rgba(var(--mgreen-rgb), 0.25),
                    10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    10px 10px 15px rgba(var(--mgreen-rgb), 0.2);

                margin-left: 0;
                margin-right: 10px;
                /* فاصله از راست در موبایل RTL */
            }

            [dir="rtl"] .product-image-3d:hover {
                box-shadow:
                    0 10px 30px rgba(var(--mgreen-rgb), 0.2),
                    10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    12px 12px 20px rgba(var(--mgreen-rgb), 0.25);
            }
        }

        /* Desktop و بالاتر (768px+) - مقدار پیش‌فرض 12px */
        @media (min-width: 768px) {
            .product-image-3d:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 12px 35px rgba(var(--mgreen-rgb), 0.2),
                    -10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    -15px 15px 25px rgba(var(--mgreen-rgb), 0.25);
            }

            /* RTL دسکتاپ */
            [dir="rtl"] .product-image-3d {
                box-shadow:
                    0 10px 30px rgba(var(--mgreen-rgb), 0.15),
                    12px 12px 0 rgba(var(--mgreen-rgb), 2),
                    12px 12px 20px rgba(var(--mgreen-rgb), 0.2);

                margin-left: 0;
                margin-right: 12px;
                /* فاصله از راست در دسکتاپ RTL */
            }

            [dir="rtl"] .product-image-3d:hover {
                box-shadow:
                    0 12px 35px rgba(var(--mgreen-rgb), 0.2),
                    10px 10px 0 rgba(var(--mgreen-rgb), 2),
                    15px 15px 25px rgba(var(--mgreen-rgb), 0.25);
            }
        }