{"id":14,"date":"2026-07-27T22:26:09","date_gmt":"2026-07-27T22:26:09","guid":{"rendered":"https:\/\/pakhshposhak.ir\/?page_id=14"},"modified":"2026-08-07T23:10:23","modified_gmt":"2026-08-07T23:10:23","slug":"%d8%a7%d9%84%d9%85%d9%86%d8%aa%d9%88%d8%b1-14","status":"publish","type":"page","link":"https:\/\/vexastyle.ir\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"14\" class=\"elementor elementor-14\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d88d91d e-con-full e-flex e-con e-parent\" data-id=\"d88d91d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6a3241 elementor-widget elementor-widget-html\" data-id=\"c6a3241\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     Vexa Style \u2013 Full Width Hero Slider\n     \u0646\u0633\u062e\u0647 \u0628\u0647\u06cc\u0646\u0647: peek-carousel \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 + \u0633\u0626\u0648 \u0648 \u0633\u0631\u0639\u062a \u0628\u0647\u06cc\u0646\u0647\n     \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0627 scroll-snap \u0646\u06cc\u062a\u06cc\u0648 \u0628\u0647\u200c\u062c\u0627\u06cc \u06a9\u0631\u0627\u0633\u200c\u0641\u06cc\u062f \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc\n     \u2705 \u0631\u0641\u0639 \u0628\u0627\u06af: \u067e\u0631\u0634 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0635\u0641\u062d\u0647 \u0628\u0647 \u0628\u0627\u0644\u0627 \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\n     ============================================================ -->\n\n<style>\n    .vexa-slider-wrapper * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .vexa-slider-wrapper {\n        position: relative;\n        width: 100%;\n        max-width: 100vw;\n        overflow: hidden;\n        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        height: 420px;\n        background: #f5f5f5;\n    }\n\n    \/* ====== \u062a\u0631\u06a9 \u0627\u0633\u06a9\u0631\u0648\u0644 (\u0646\u06cc\u062a\u06cc\u0648\u060c \u0628\u062f\u0648\u0646 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a) ====== *\/\n    .vexa-track {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        overflow-x: auto;\n        overflow-y: hidden;\n        scroll-snap-type: x mandatory;\n        scroll-behavior: smooth;\n        -webkit-overflow-scrolling: touch;\n        overscroll-behavior-x: contain;\n        scrollbar-width: none;\n        direction: rtl;\n    }\n\n    .vexa-track::-webkit-scrollbar {\n        display: none;\n    }\n\n    .vexa-slide-item {\n        position: relative;\n        flex: 0 0 100%;\n        width: 100%;\n        height: 100%;\n        scroll-snap-align: start;\n        scroll-snap-stop: always;\n        display: block;\n        overflow: hidden;\n        text-decoration: none;\n        background: #eee;\n        -webkit-tap-highlight-color: transparent;\n    }\n\n    .vexa-slide-item picture {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n\n    .vexa-slide-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n        display: block;\n        pointer-events: none;\n    }\n\n    .vexa-slide-item::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, .08);\n        pointer-events: none;\n    }\n\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e) ====== *\/\n    .vexa-nav-buttons {\n        position: absolute;\n        bottom: 20px;\n        right: 20px;\n        display: flex;\n        gap: 10px;\n        z-index: 10;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity .3s ease;\n    }\n\n    .vexa-slider-wrapper:hover .vexa-nav-buttons {\n        opacity: 1;\n        pointer-events: auto;\n    }\n\n    .vexa-btn {\n        width: 44px;\n        height: 44px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, .95);\n        border: none;\n        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background .2s, transform .2s, box-shadow .2s;\n        color: #1a1a1a;\n    }\n\n    .vexa-btn svg {\n        width: 20px;\n        height: 20px;\n        display: block;\n        pointer-events: none;\n    }\n\n    .vexa-btn-prev svg { transform: translateX(-1px); }\n    .vexa-btn-next svg { transform: translateX(1px); }\n\n    .vexa-btn:hover {\n        background: #fff;\n        transform: scale(1.05);\n        box-shadow: 0 6px 20px rgba(0, 0, 0, .18);\n    }\n\n    .vexa-btn:active { transform: scale(.95); }\n\n    \/* ================================================================\n       \u0645\u0648\u0628\u0627\u06cc\u0644: \u0627\u0641\u06a9\u062a Peek Carousel (\u0645\u062b\u0644 \u062f\u06cc\u062c\u06cc\u200c\u06a9\u0627\u0644\u0627)\n       \u0644\u0628\u0647\u200c\u0647\u0627\u06cc \u06a9\u0646\u0627\u0631\u06cc \u062e\u0627\u0644\u06cc \u0645\u06cc\u200c\u0645\u0648\u0646\u0646 \u062a\u0627 \u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\/\u0642\u0628\u0644 \u06a9\u0645\u06cc \u062f\u06cc\u062f\u0647 \u0628\u0634\u0647\n       \u0647\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f \u06af\u0648\u0634\u0647 \u06af\u0631\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u0647\u061b \u0641\u0644\u0634\u200c\u0647\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u0632 \u0686\u06cc\u062f\u0645\u0627\u0646 \u062e\u0627\u0631\u062c \u0645\u06cc\u200c\u0634\u0646\n       ================================================================ *\/\n    @media (max-width: 767px) {\n        .vexa-slider-wrapper {\n            height: 260px;\n            background: transparent;\n        }\n\n        .vexa-track {\n            padding: 0 28px;\n            gap: 10px;\n            scroll-padding: 0 28px;\n        }\n\n        .vexa-slide-item {\n            flex: 0 0 calc(100% - 56px);\n            width: calc(100% - 56px);\n            scroll-snap-align: center;\n            border-radius: 16px;\n        }\n\n        .vexa-nav-buttons {\n            display: none;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .vexa-slider-wrapper { height: 200px; }\n        .vexa-track { padding: 0 20px; gap: 8px; scroll-padding: 0 20px; }\n        .vexa-slide-item {\n            flex: 0 0 calc(100% - 40px);\n            width: calc(100% - 40px);\n            border-radius: 14px;\n        }\n    }\n\n    @media (max-width: 380px) {\n        .vexa-slider-wrapper { height: 175px; }\n        .vexa-track { padding: 0 14px; gap: 6px; scroll-padding: 0 14px; }\n        .vexa-slide-item {\n            flex: 0 0 calc(100% - 28px);\n            width: calc(100% - 28px);\n            border-radius: 12px;\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .vexa-track { scroll-behavior: auto; }\n        .vexa-btn { transition: none !important; }\n    }\n<\/style>\n\n<div class=\"vexa-slider-wrapper\">\n\n    <div class=\"vexa-track\" id=\"vexaTrack\" role=\"list\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc\">\n\n        <!-- ==========================================================\n             \u0627\u0633\u0644\u0627\u06cc\u062f \u06f1\n             desktop-img : \u0639\u06a9\u0633 \u0645\u062e\u0635\u0648\u0635 \u062f\u0633\u06a9\u062a\u0627\u067e\/\u062a\u0628\u0644\u062a (\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0627\u0628\u0639\u0627\u062f: 1600\u00d7420 \u067e\u06cc\u06a9\u0633\u0644\u060c \u0646\u0633\u0628\u062a \u062a\u0642\u0631\u06cc\u0628\u06cc 3.8:1)\n             mobile-img  : \u0639\u06a9\u0633 \u0645\u062e\u0635\u0648\u0635 \u0645\u0648\u0628\u0627\u06cc\u0644 (\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0627\u0628\u0639\u0627\u062f: 700\u00d7380 \u067e\u06cc\u06a9\u0633\u0644\u060c \u0646\u0633\u0628\u062a \u062a\u0642\u0631\u06cc\u0628\u06cc 1.8:1)\n             ========================================================== -->\n        <a href=\"https:\/\/example.com\/product-1\" target=\"_blank\" rel=\"noopener noreferrer\"\n           class=\"vexa-slide-item\" role=\"listitem\" aria-label=\"\u0633\u0631\u0645 \u0622\u0628\u0631\u0633\u0627\u0646 \u0635\u0648\u0631\u062a \u0648\u06cc\u0633\u06a9\u0627 - \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644\">\n            <picture>\n                <source media=\"(max-width: 767px)\"\n                        srcset=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/jS1Lu.jpg\">\n                <img fetchpriority=\"high\" src=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_vbnh00vbnh00vbnh.png\"\n                     alt=\"\u0633\u0631\u0645 \u0622\u0628\u0631\u0633\u0627\u0646 \u0635\u0648\u0631\u062a \u0648\u06cc\u0633\u06a9\u0627 \u0628\u0631\u0627\u06cc \u067e\u0648\u0633\u062a \u0634\u0627\u062f\u0627\u0628 \u0648 \u062f\u0631\u062e\u0634\u0627\u0646\"\n                     width=\"1600\" height=\"420\"\n                     loading=\"eager\" fetchpriority=\"high\" decoding=\"async\">\n            <\/picture>\n        <\/a>\n\n        <!-- \u0627\u0633\u0644\u0627\u06cc\u062f \u06f2 -->\n        <a href=\"https:\/\/example.com\/product-2\" target=\"_blank\" rel=\"noopener noreferrer\"\n           class=\"vexa-slide-item\" role=\"listitem\" aria-label=\"\u0645\u062d\u0635\u0648\u0644 \u0634\u0645\u0627\u0631\u0647 \u062f\u0648 - \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644\">\n            <picture>\n                <source media=\"(max-width: 767px)\"\n                        srcset=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/jS1Lu.jpg\">\n                <img loading=\"lazy\" src=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_lsxn2elsxn2elsxn.png\"\n                     alt=\"\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0648\u06cc\u0698\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0648\u06a9\u0633\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\"\n                     width=\"1600\" height=\"420\"\n                     loading=\"lazy\" decoding=\"async\">\n            <\/picture>\n        <\/a>\n\n        <!-- \u0627\u0633\u0644\u0627\u06cc\u062f \u06f3 -->\n        <a href=\"https:\/\/example.com\/product-2\" target=\"_blank\" rel=\"noopener noreferrer\"\n           class=\"vexa-slide-item\" role=\"listitem\" aria-label=\"\u0645\u062d\u0635\u0648\u0644 \u0634\u0645\u0627\u0631\u0647 \u0633\u0647 - \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644\">\n            <picture>\n                <source media=\"(max-width: 767px)\"\n                        srcset=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/jS1Lu.jpg\">\n                <img loading=\"lazy\" src=\"https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_bsqlrnbsqlrnbsql.png\"\n                     alt=\"\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0644\u06a9\u0634\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0648\u06a9\u0633\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\"\n                     width=\"1600\" height=\"420\"\n                     loading=\"lazy\" decoding=\"async\">\n            <\/picture>\n        <\/a>\n\n    <\/div>\n\n    <div class=\"vexa-nav-buttons\">\n        <button class=\"vexa-btn vexa-btn-prev\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u0642\u0628\u0644\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n        <button class=\"vexa-btn vexa-btn-next\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n    <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    'use strict';\n\n    const wrapper = document.querySelector('.vexa-slider-wrapper');\n    if (!wrapper) return;\n\n    const track = wrapper.querySelector('.vexa-track');\n    const slides = wrapper.querySelectorAll('.vexa-slide-item');\n    const prevBtn = wrapper.querySelector('.vexa-btn-prev');\n    const nextBtn = wrapper.querySelector('.vexa-btn-next');\n    if (!track || !slides.length) return;\n\n    const total = slides.length;\n    const AUTO_INTERVAL = 5000;\n    let current = 0;\n    let timer = null;\n    let resumeTimer = null;\n\n    function setActive(index) {\n        current = index;\n    }\n\n    \/\/ \u2705 \u0628\u0647\u200c\u062c\u0627\u06cc scrollIntoView (\u06a9\u0647 \u0628\u0627\u0639\u062b \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0644 \u0635\u0641\u062d\u0647 \u0628\u0647 \u0628\u0627\u0644\u0627 \u0645\u06cc\u200c\u0634\u062f)\n    \/\/ \u0641\u0642\u0637 \u062e\u0648\u062f\u0650 \u062a\u0631\u06a9 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0647\u060c \u0628\u062f\u0648\u0646 \u062a\u0623\u062b\u06cc\u0631 \u0631\u0648\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0635\u0641\u062d\u0647.\n    function goTo(index) {\n        index = (index + total) % total;\n        const slide = slides[index];\n        const trackRect = track.getBoundingClientRect();\n        const slideRect = slide.getBoundingClientRect();\n        const delta = slideRect.left - trackRect.left;\n        track.scrollBy({ left: delta, behavior: 'smooth' });\n        setActive(index);\n    }\n\n    const next = () => goTo(current + 1);\n    const prev = () => goTo(current - 1);\n\n    function startAutoPlay() {\n        stopAutoPlay();\n        timer = setInterval(next, AUTO_INTERVAL);\n    }\n    function stopAutoPlay() {\n        if (timer) { clearInterval(timer); timer = null; }\n    }\n    function pauseThenResume() {\n        stopAutoPlay();\n        clearTimeout(resumeTimer);\n        resumeTimer = setTimeout(startAutoPlay, AUTO_INTERVAL);\n    }\n\n    if (prevBtn) prevBtn.addEventListener('click', () => { prev(); pauseThenResume(); });\n    if (nextBtn) nextBtn.addEventListener('click', () => { next(); pauseThenResume(); });\n\n    \/\/ \u062a\u0634\u062e\u06cc\u0635 \u0627\u0633\u0644\u0627\u06cc\u062f \u0641\u0639\u0627\u0644 \u062d\u06cc\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644\/\u0633\u0648\u0627\u067e \u0628\u0627 IntersectionObserver\n    \/\/ (\u0628\u0647\u200c\u062c\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u062f\u0633\u062a\u06cc scrollLeft \u062f\u0631 \u0647\u0631 \u0641\u0631\u06cc\u0645 \u0627\u0633\u06a9\u0631\u0648\u0644 -> \u0645\u0635\u0631\u0641 CPU \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0645\u062a\u0631)\n    const observer = new IntersectionObserver((entries) => {\n        let best = null;\n        entries.forEach((entry) => {\n            if (entry.isIntersecting && (!best || entry.intersectionRatio > best.intersectionRatio)) {\n                best = entry;\n            }\n        });\n        if (best) {\n            const idx = Array.prototype.indexOf.call(slides, best.target);\n            if (idx !== -1) setActive(idx);\n        }\n    }, { root: track, threshold: [0.5, 0.6, 0.7, 0.8, 0.9, 1] });\n\n    slides.forEach((slide) => observer.observe(slide));\n\n    \/\/ \u062a\u0648\u0642\u0641 \u0627\u062a\u0648\u067e\u0644\u06cc \u0647\u0646\u06af\u0627\u0645 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u062a\u0631\u06a9 (\u0633\u0648\u0627\u067e \u0644\u0645\u0633\u06cc \u06cc\u0627 \u062f\u0631\u06af \u0645\u0627\u0648\u0633)\n    track.addEventListener('pointerdown', () => stopAutoPlay(), { passive: true });\n    track.addEventListener('scroll', () => {\n        clearTimeout(resumeTimer);\n        resumeTimer = setTimeout(startAutoPlay, AUTO_INTERVAL);\n    }, { passive: true });\n\n    wrapper.addEventListener('keydown', (e) => {\n        if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); pauseThenResume(); }\n        else if (e.key === 'ArrowRight') { e.preventDefault(); next(); pauseThenResume(); }\n    });\n\n    document.addEventListener('visibilitychange', () => {\n        document.hidden ? stopAutoPlay() : startAutoPlay();\n    });\n\n    startAutoPlay();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7838f32 e-con-full e-flex e-con e-parent\" data-id=\"7838f32\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-372235b elementor-widget elementor-widget-html\" data-id=\"372235b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* ============================================================\n       \u0648\u06a9\u0633\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u2014 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc (\u062f\u0627\u06cc\u0631\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u062f\u0631 \u062f\u0633\u06a9\u062a\u0627\u067e)\n       ============================================================ *\/\n\n    \/* \u0631\u06cc\u0633\u062a \u0645\u062d\u0644\u06cc \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0628\u062e\u0634 *\/\n    .vexa-categories-section,\n    .vexa-categories-section *,\n    .vexa-categories-section *::before,\n    .vexa-categories-section *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .vexa-categories-section {\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        margin: 0;\n        padding: 16px 0;\n        background: transparent;\n        font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        line-height: 1.5;\n        color: #1a1a1a;\n    }\n\n    .vexa-categories-section .vexa-section-header {\n        display: none;\n    }\n\n    \/* ====== \u0634\u0628\u06a9\u0647 \u062f\u0633\u06a9\u062a\u0627\u067e ====== *\/\n    .vexa-categories-section .vexa-categories-grid {\n        display: grid;\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n        gap: 24px; \/* \u0627\u0641\u0632\u0627\u06cc\u0634 \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u062f\u0627\u06cc\u0631\u0647\u200c\u0647\u0627 *\/\n        list-style: none;\n        margin: 0 auto;\n        padding: 0 4px;\n        width: 100%;\n        max-width: 660px; \/* \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u06f5 \u0622\u06cc\u062a\u0645 + \u06f4 \u062a\u0627 \u06af\u067e \u06f2\u06f4px *\/\n        justify-content: center;\n    }\n\n    .vexa-categories-section .vexa-category-item {\n        position: relative;\n        list-style: none;\n        max-width: 110px;\n        justify-self: center;\n        width: 100%;\n    }\n\n    .vexa-categories-section .vexa-category-link {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        text-decoration: none;\n        color: inherit;\n        padding: 2px 0 6px;\n        border-radius: 6px;\n        background: transparent;\n        border: none;\n        cursor: pointer;\n        font-family: inherit;\n        transition: none;\n        width: 100%;\n    }\n\n    .vexa-categories-section .vexa-category-circle {\n        width: 100%;\n        aspect-ratio: 1 \/ 1;\n        border-radius: 50%;\n        overflow: hidden;\n        background: #f5f5f5;\n        border: 1px solid rgba(0,0,0,0.06);\n        max-width: 110px;\n        margin: 0 auto;\n    }\n\n    .vexa-categories-section .vexa-category-circle img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        filter: none;\n    }\n\n    .vexa-categories-section .vexa-category-name {\n        font-size: 0.7rem;\n        font-weight: 400;\n        color: #1a1a1a;\n        margin-top: 8px;\n        line-height: 1.3;\n        letter-spacing: 0.01em;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: 100%;\n        padding: 0 2px;\n    }\n\n    \/* ====== \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 ====== *\/\n    .vexa-categories-section .vexa-categories-slider {\n        display: none;\n        width: 100%;\n        overflow-x: auto;\n        overflow-y: hidden;\n        scroll-snap-type: x proximity;\n        -webkit-overflow-scrolling: touch;\n        scrollbar-width: none;\n        background: transparent;\n        padding: 4px 0 8px;\n        margin: 0;\n    }\n\n    .vexa-categories-section .vexa-categories-slider::-webkit-scrollbar {\n        display: none;\n    }\n\n    .vexa-categories-section .vexa-slider-track {\n        display: flex;\n        gap: 16px; \/* \u0627\u0641\u0632\u0627\u06cc\u0634 \u0641\u0627\u0635\u0644\u0647 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 *\/\n        padding: 4px 8px 6px;\n        width: max-content;\n        background: transparent;\n    }\n\n    .vexa-categories-section .vexa-slider-track .vexa-category-item {\n        flex: 0 0 calc((100vw - 48px) \/ 5);\n        min-width: 70px;\n        max-width: 120px;\n        list-style: none;\n    }\n\n    .vexa-categories-section .vexa-slider-track .vexa-category-link {\n        padding: 0;\n        scroll-snap-align: center;\n    }\n\n    .vexa-categories-section .vexa-slider-track .vexa-category-circle {\n        width: 100%;\n        aspect-ratio: 1 \/ 1;\n    }\n\n    .vexa-categories-section .vexa-slider-track .vexa-category-name {\n        font-size: 0.68rem;\n        margin-top: 10px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    \/* \u0641\u06cc\u062f\u0628\u06a9 \u0644\u0645\u0633\u06cc *\/\n    @media (hover: none) {\n        .vexa-categories-section .vexa-category-item:active .vexa-category-circle {\n            transform: scale(0.94);\n            transition: transform 0.15s ease;\n        }\n    }\n\n    \/* ====== \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 ====== *\/\n    @media (max-width: 1180px) {\n        .vexa-categories-section .vexa-categories-grid {\n            max-width: 610px; \/* \u06f5 * \u06f1\u06f0\u06f0 + \u06f4 * \u06f2\u06f4 = \u06f5\u06f9\u06f6 \u2248 \u06f6\u06f1\u06f0 *\/\n        }\n        .vexa-categories-section .vexa-category-item {\n            max-width: 100px;\n        }\n        .vexa-categories-section .vexa-category-circle {\n            max-width: 100px;\n        }\n    }\n\n    @media (max-width: 1024px) {\n        .vexa-categories-section .vexa-categories-grid {\n            max-width: 560px; \/* \u06f5 * \u06f9\u06f0 + \u06f4 * \u06f2\u06f4 = \u06f5\u06f4\u06f6 \u2248 \u06f5\u06f6\u06f0 *\/\n        }\n        .vexa-categories-section .vexa-category-item {\n            max-width: 90px;\n        }\n        .vexa-categories-section .vexa-category-circle {\n            max-width: 90px;\n        }\n        .vexa-categories-section .vexa-category-name {\n            font-size: 0.68rem;\n        }\n    }\n\n    @media (max-width: 900px) {\n        .vexa-categories-section .vexa-categories-grid {\n            max-width: 510px; \/* \u06f5 * \u06f8\u06f0 + \u06f4 * \u06f2\u06f4 = \u06f4\u06f9\u06f6 \u2248 \u06f5\u06f1\u06f0 *\/\n        }\n        .vexa-categories-section .vexa-category-item {\n            max-width: 80px;\n        }\n        .vexa-categories-section .vexa-category-circle {\n            max-width: 80px;\n        }\n    }\n\n    @media (max-width: 768px) {\n        .vexa-categories-section .vexa-categories-grid {\n            display: none !important;\n        }\n        .vexa-categories-section .vexa-categories-slider {\n            display: block;\n        }\n        .vexa-categories-section {\n            padding: 8px 0;\n        }\n        .vexa-categories-section .vexa-slider-track {\n            padding: 4px 4px 6px;\n            gap: 12px;\n        }\n        .vexa-categories-section .vexa-slider-track .vexa-category-item {\n            flex: 0 0 calc((100vw - 40px) \/ 5);\n            min-width: 60px;\n            max-width: none;\n        }\n        .vexa-categories-section .vexa-slider-track .vexa-category-circle {\n            max-width: none;\n        }\n        .vexa-categories-section .vexa-category-name {\n            font-size: 0.7rem;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .vexa-categories-section .vexa-slider-track {\n            gap: 10px;\n            padding: 4px 2px 6px;\n        }\n        .vexa-categories-section .vexa-slider-track .vexa-category-item {\n            flex: 0 0 calc((100vw - 32px) \/ 5);\n            min-width: 55px;\n        }\n        .vexa-categories-section .vexa-slider-track .vexa-category-name {\n            font-size: 0.6rem;\n            margin-top: 8px;\n        }\n    }\n\n    @media print {\n        .vexa-categories-section {\n            background: #fff !important;\n            padding: 20px 0;\n        }\n        .vexa-categories-section .vexa-category-name {\n            color: #000 !important;\n        }\n        .vexa-categories-section .vexa-categories-slider {\n            display: none !important;\n        }\n        .vexa-categories-section .vexa-categories-grid {\n            display: grid !important;\n            grid-template-columns: repeat(5, 1fr) !important;\n            max-width: 100% !important;\n        }\n    }\n<\/style>\n\n<!-- HTML -->\n<div class=\"vexa-categories-section\" aria-label=\"\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648\u06a9\u0633\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\">\n    <div style=\"width:100%; padding:0; margin:0; max-width:100%;\">\n        <div class=\"vexa-section-header\"><\/div>\n        <ul class=\"vexa-categories-grid\" role=\"list\"><\/ul>\n        <div class=\"vexa-categories-slider\" role=\"list\">\n            <div class=\"vexa-slider-track\" role=\"presentation\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        'use strict';\n\n        const categories = [{\n            name: '\u0622\u0631\u0627\u06cc\u0634\u06cc \u0648 \u0628\u0647\u062f\u0627\u0634\u062a\u06cc',\n            image: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/eb9585d1-d2f4-4a67-b8e8-36953671550d.png',\n            alt: '\u0622\u0631\u0627\u06cc\u0634\u06cc \u0628\u0647\u062f\u0627\u0634\u062a\u06cc',\n            link: '#'\n        }, {\n            name: '\u067e\u0648\u0634\u0627\u06a9 \u0645\u0631\u062f\u0627\u0646\u0647',\n            image: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_49_49-PM.png',\n            alt: '\u067e\u0648\u0634\u0627\u06a9 \u0645\u0631\u062f\u0627\u0646\u0647',\n            link: '#'\n        }, {\n            name: '\u067e\u0648\u0634\u0627\u06a9 \u0632\u0646\u0627\u0646\u0647',\n            image: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_40_02-PM.png',\n            alt: '\u067e\u0648\u0634\u0627\u06a9 \u0632\u0646\u0627\u0646\u0647',\n            link: '#'\n        }, {\n            name: '\u067e\u0648\u0634\u0627\u06a9 \u0628\u0686\u06af\u0627\u0646\u0647',\n            image: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/jxNJL.jpg',\n            alt: '\u067e\u0648\u0634\u0627\u06a9 \u0628\u0686\u06af\u0627\u0646\u0647',\n            link: '#'\n        }, {\n            name: '\u0648\u0631\u0632\u0634 \u0648 \u0633\u0644\u0627\u0645\u062a\u06cc',\n            image: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/RFmGc.jpg',\n            alt: '\u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0648\u0631\u0632\u0634\u06cc \u0648 \u0633\u0644\u0627\u0645\u062a\u06cc',\n            link: '#'\n        },];\n\n        const section = document.querySelector('.vexa-categories-section');\n        const grid = section.querySelector('.vexa-categories-grid');\n        const track = section.querySelector('.vexa-slider-track');\n\n        function itemHTML(cat, tag) {\n            return `\n                <${tag} class=\"vexa-category-item\">\n                    <a href=\"${cat.link}\" class=\"vexa-category-link\" aria-label=\"${cat.alt}\">\n                        <div class=\"vexa-category-circle\">\n                            <img loading=\"lazy\" src=\"${cat.image}\" alt=\"${cat.alt}\" loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\">\n                        <\/div>\n                        <span class=\"vexa-category-name\">${cat.name}<\/span>\n                    <\/a>\n                <\/${tag}>`;\n        } \n\n        grid.innerHTML = categories.map(c => itemHTML(c, 'li')).join('');\n        track.innerHTML = categories.map(c => itemHTML(c, 'div')).join('');\n\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8541419 e-flex e-con-boxed e-con e-parent\" data-id=\"8541419\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be74a99 elementor-widget elementor-widget-html\" data-id=\"be74a99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* ================================================================\n       \u0627\u06cc\u0632\u0648\u0644\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u2014 \u0641\u0642\u0637 \u0631\u0648\u06cc .amazing-container \u0627\u062b\u0631 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f\n       ================================================================ *\/\n    .amazing-container,\n    .amazing-container *,\n    .amazing-container *::before,\n    .amazing-container *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .amazing-container {\n        --red-primary: #E53935;\n        --red-dark: #B71C1C;\n        --radius: 20px;\n        --card-radius: 14px;\n        --transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n        --card-w: clamp(118px, 30vw, 190px);\n\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        background: linear-gradient(145deg, #E53935, #B71C1C);\n        border-radius: var(--radius);\n        overflow: hidden;\n        padding: 8px 20px;\n        gap: 20px;\n        direction: rtl;\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\n        box-shadow: 0 4px 20px rgba(229, 57, 53, 0.3);\n        border: 1px solid rgba(255, 255, 255, 0.15);\n        position: relative;\n        box-sizing: border-box;\n        width: 100%;\n    }\n\n    \/* ====== \u0628\u062e\u0634 \u06a9\u0646\u0627\u0631\u06cc (\u0633\u0627\u06cc\u062f\u0628\u0627\u0631 \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc) ====== *\/\n    .amazing-container .amazing-side {\n        flex: 0 0 164px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        color: #1a1a1a;\n        text-align: center;\n        padding: 18px 14px;\n        background: rgba(255, 255, 255, 0.45);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border-radius: var(--radius);\n        border: 1px solid rgba(255, 255, 255, 0.3);\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .amazing-container .amazing-side-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #E53935;\n        position: relative;\n        z-index: 1;\n        filter: drop-shadow(0 0 8px rgba(229, 57, 53, 0.15));\n    }\n\n    .amazing-container .amazing-side::after {\n        content: '';\n        position: absolute;\n        top: -50%;\n        left: -50%;\n        width: 200%;\n        height: 200%;\n        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 70%);\n        animation: amazing-side-glow 8s linear infinite;\n        pointer-events: none;\n    }\n\n    @keyframes amazing-side-glow {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n    .amazing-container .amazing-side-title {\n        font-size: 19px;\n        line-height: 1.35;\n        font-weight: 900;\n        color: #ffffff;\n        position: relative;\n        z-index: 1;\n        text-shadow: 0 2px 8px rgba(0,0,0,0.15);\n    }\n\n    \/* ====== \u062f\u06a9\u0645\u0647 \u0633\u0627\u06cc\u062f\u0628\u0627\u0631 ====== *\/\n    .amazing-container .amazing-side-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        background: #ffffff;\n        color: #E53935;\n        font-size: 12.5px;\n        font-weight: 700;\n        padding: 9px 14px;\n        border-radius: 40px;\n        text-decoration: none;\n        white-space: nowrap;\n        transition: all var(--transition);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n        border: 1px solid rgba(229, 57, 53, 0.15);\n        text-shadow: none;\n        position: relative;\n        z-index: 1;\n        letter-spacing: 0.3px;\n        width: 100%;\n        justify-content: center;\n        transform-origin: center;\n        flex-shrink: 0;\n    }\n\n    .amazing-container .amazing-side-btn:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 8px 28px rgba(229, 57, 53, 0.2);\n        background: #f5f5f5;\n    }\n\n    .amazing-container .amazing-side-btn svg {\n        width: 16px;\n        height: 16px;\n        stroke: currentColor;\n        fill: none;\n        stroke-width: 2.5;\n        transition: transform var(--transition);\n        flex-shrink: 0;\n    }\n\n    \/* ====== \u0646\u0627\u062d\u06cc\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 (\u062a\u0631\u06a9) ====== *\/\n    .amazing-container .amazing-track-wrap {\n        position: relative;\n        flex: 1;\n        min-width: 0;\n        background: transparent !important;\n        backdrop-filter: none !important;\n        -webkit-backdrop-filter: none !important;\n        border: none !important;\n        border-radius: 0;\n        padding: 10px 4px 6px;\n        overflow: visible;\n    }\n\n    .amazing-container .amazing-track {\n        display: flex;\n        gap: 14px;\n        overflow-x: auto;\n        overflow-y: visible;\n        scroll-snap-type: x proximity;\n        scroll-behavior: smooth;\n        padding: 2px 2px 4px;\n        scrollbar-width: none;\n        -webkit-overflow-scrolling: touch;\n        overscroll-behavior-x: contain;\n        direction: rtl;\n    }\n\n    .amazing-container .amazing-track::-webkit-scrollbar {\n        display: none;\n    }\n\n    \/* ====== \u06a9\u0627\u0631\u062a ====== *\/\n    .amazing-container .amazing-card {\n        scroll-snap-align: start;\n        scroll-snap-stop: normal;\n        flex: 0 0 var(--card-w);\n        width: var(--card-w);\n        background: rgba(255, 255, 255, 0.85);\n        backdrop-filter: blur(4px);\n        border-radius: var(--card-radius);\n        overflow: hidden;\n        text-decoration: none;\n        color: #1a1a1a;\n        display: flex;\n        flex-direction: column;\n        transition: transform var(--transition), box-shadow var(--transition);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n        border: 1px solid rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        contain: layout paint;\n        will-change: transform;\n    }\n\n    .amazing-container .amazing-card:hover {\n        transform: translateY(-6px);\n        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);\n    }\n\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\n    .amazing-container .amazing-card-img {\n        position: relative;\n        background: rgba(255, 255, 255, 0.2);\n        aspect-ratio: 1 \/ 1;\n        width: 100%;\n        display: block;\n        overflow: hidden;\n    }\n\n    .amazing-container .amazing-card-img.loading {\n        background: linear-gradient(100deg, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.3) 70%);\n        background-size: 200% 100%;\n        animation: amazing-img-shimmer 1.4s ease infinite;\n    }\n\n    @keyframes amazing-img-shimmer {\n        0% { background-position: 100% 50%; }\n        100% { background-position: 0 50%; }\n    }\n\n    .amazing-container .amazing-card-img img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n        transition: opacity var(--transition);\n        opacity: 0;\n    }\n\n    .amazing-container .amazing-card-img img.loaded {\n        opacity: 1;\n    }\n\n    \/* ====== \u0628\u0631\u0686\u0633\u0628 \u062f\u0631\u0635\u062f \u062a\u062e\u0641\u06cc\u0641 ====== *\/\n    .amazing-container .amazing-badge {\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        background: #E53935;\n        color: #ffffff;\n        font-size: 11px;\n        font-weight: 800;\n        padding: 2px 10px;\n        border-radius: 20px;\n        box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);\n        z-index: 3;\n        line-height: 1.6;\n        border: 1px solid rgba(255, 255, 255, 0.2);\n    }\n\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\n    .amazing-container .amazing-card-body {\n        padding: 9px 10px 10px;\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n        flex: 1;\n    }\n\n    .amazing-container .amazing-card-title {\n        font-size: 12.5px;\n        line-height: 1.45;\n        min-height: 36px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        color: #1e1e1e;\n        text-align: right;\n        font-weight: 500;\n    }\n\n    \/* ====== \u0642\u06cc\u0645\u062a\u200c\u0647\u0627 ====== *\/\n    .amazing-container .amazing-price-row {\n        margin-top: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n        align-items: flex-end;\n    }\n\n    .amazing-container .amazing-old-line {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        flex-wrap: wrap;\n        justify-content: flex-end;\n    }\n\n    .amazing-container .amazing-old-price {\n        font-size: 10.5px;\n        color: #888;\n        text-decoration: line-through;\n    }\n\n    .amazing-container .amazing-percent {\n        font-size: 10.5px;\n        font-weight: 800;\n        color: #ffffff;\n        background: #E53935;\n        padding: 1px 8px;\n        border-radius: 20px;\n        box-shadow: 0 2px 8px rgba(229, 57, 53, 0.15);\n    }\n\n    .amazing-container .amazing-new-price {\n        font-size: 15px;\n        font-weight: 800;\n        color: #0f0f0f;\n        display: flex;\n        align-items: baseline;\n        gap: 4px;\n    }\n\n    .amazing-container .amazing-new-price small {\n        font-size: 10.5px;\n        font-weight: 400;\n        color: #888;\n    }\n\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc ====== *\/\n    .amazing-container .amazing-nav {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 36px;\n        height: 36px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255, 255, 255, 0.8);\n        backdrop-filter: blur(8px);\n        -webkit-backdrop-filter: blur(8px);\n        color: #E53935;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        z-index: 5;\n        opacity: 0.9;\n        transition: all var(--transition);\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n        border: 1px solid rgba(255, 255, 255, 0.3);\n    }\n\n    .amazing-container .amazing-nav:hover {\n        background: #ffffff;\n        transform: translateY(-50%) scale(1.1);\n        box-shadow: 0 0 20px rgba(229, 57, 53, 0.15);\n    }\n\n    .amazing-container .amazing-nav:disabled {\n        opacity: 0 !important;\n        pointer-events: none;\n    }\n\n    .amazing-container .amazing-nav svg {\n        width: 18px;\n        height: 18px;\n        stroke-width: 2.5;\n    }\n\n    .amazing-container .amazing-nav.prev {\n        left: 6px;\n    }\n    .amazing-container .amazing-nav.next {\n        right: 6px;\n    }\n\n    \/* ====== \u0645\u0648\u0628\u0627\u06cc\u0644 (\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0633\u0627\u06cc\u062f\u0628\u0627\u0631) ====== *\/\n    .amazing-container .amazing-mobile-bar {\n        display: none;\n    }\n\n    \/* ================================================================\n       \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648\n       ================================================================ *\/\n    @media (max-width: 900px) {\n        .amazing-container {\n            flex-direction: column;\n            padding: 6px 0 0;\n            gap: 6px;\n            border-radius: 0;\n            width: 100vw;\n            max-width: 100vw;\n            margin-left: calc(50% - 50vw);\n            margin-right: calc(50% - 50vw);\n            border-left: none;\n            border-right: none;\n            box-shadow: none;\n        }\n\n        .amazing-container .amazing-side {\n            display: none;\n        }\n\n        .amazing-container .amazing-mobile-bar {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 10px 14px;\n            margin: 0;\n            background: rgba(255, 255, 255, 0.5);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: none;\n            border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n            border-radius: 0;\n            color: #1a1a1a;\n            position: relative;\n        }\n\n        .amazing-container .amazing-mobile-bar-info {\n            flex: 1;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .amazing-container .amazing-mobile-title {\n            font-size: 14px;\n            font-weight: 900;\n            color: #ffffff;\n            white-space: nowrap;\n            text-shadow: 0 2px 8px rgba(0,0,0,0.15);\n        }\n\n        .amazing-container .amazing-mobile-btn {\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            padding: 7px 12px;\n            border-radius: 20px;\n            background: #ffffff;\n            color: #E53935;\n            text-decoration: none;\n            font-size: 12px;\n            font-weight: 700;\n            white-space: nowrap;\n            border: 1px solid rgba(229,57,53,0.15);\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n        }\n\n        .amazing-container .amazing-mobile-btn svg {\n            width: 13px;\n            height: 13px;\n            stroke: currentColor;\n            fill: none;\n            stroke-width: 2.5;\n        }\n\n        .amazing-container .amazing-nav {\n            display: none;\n        }\n\n        .amazing-container .amazing-track-wrap {\n            background: transparent !important;\n            backdrop-filter: none !important;\n            -webkit-backdrop-filter: none !important;\n            border: none !important;\n            padding: 6px 0;\n            overflow: visible;\n        }\n\n        .amazing-container .amazing-track {\n            gap: 3px;\n            padding: 2px 0 4px;\n        }\n\n        .amazing-container .amazing-card {\n            border-radius: 0;\n            border-left: none;\n            border-right: none;\n            box-shadow: none;\n            background: rgba(255, 255, 255, 0.8);\n        }\n        .amazing-container .amazing-card:not(:last-child) {\n            border-left: 1px solid rgba(255,255,255,0.3);\n        }\n    }\n\n    @media (max-width: 480px) {\n        .amazing-container {\n            padding: 4px 0 0;\n            gap: 4px;\n        }\n        .amazing-container .amazing-mobile-bar {\n            padding: 8px 12px;\n            gap: 8px;\n        }\n        .amazing-container .amazing-mobile-title {\n            font-size: 12.5px;\n        }\n        .amazing-container .amazing-mobile-btn {\n            padding: 6px 10px;\n            font-size: 11px;\n        }\n        .amazing-container .amazing-track {\n            gap: 2px;\n            padding: 2px 0 3px;\n        }\n        .amazing-container .amazing-card-body {\n            padding: 7px 8px 8px;\n            gap: 4px;\n        }\n        .amazing-container .amazing-card-title {\n            font-size: 11.5px;\n            min-height: 32px;\n            line-height: 1.4;\n        }\n        .amazing-container .amazing-old-price,\n        .amazing-container .amazing-percent {\n            font-size: 9.5px;\n        }\n        .amazing-container .amazing-new-price {\n            font-size: 13px;\n        }\n        .amazing-container .amazing-new-price small {\n            font-size: 9.5px;\n        }\n        .amazing-container .amazing-badge {\n            font-size: 9.5px;\n            padding: 1.5px 7px;\n            top: 6px;\n            right: 6px;\n        }\n    }\n\n    @media (max-width: 360px) {\n        .amazing-container {\n            --card-w: clamp(110px, 42vw, 150px);\n        }\n        .amazing-container .amazing-mobile-title {\n            font-size: 11px;\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .amazing-container .amazing-side::after {\n            animation: none !important;\n        }\n        .amazing-container .amazing-card,\n        .amazing-container .amazing-nav,\n        .amazing-container .amazing-side-btn {\n            transition: none !important;\n        }\n        .amazing-container .amazing-track {\n            scroll-behavior: auto;\n        }\n    }\n<\/style>\n\n<!-- ====== HTML \u06a9\u0627\u0631\u0648\u0633\u0644 ====== -->\n<div class=\"amazing-container\" id=\"amazingContainer\">\n\n    <!-- \u0633\u0627\u06cc\u062f\u0628\u0627\u0631 \u062f\u0633\u06a9\u062a\u0627\u067e -->\n    <div class=\"amazing-side\">\n        <div class=\"amazing-side-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"7\" cy=\"7\" r=\"3\"><\/circle>\n                <circle cx=\"17\" cy=\"17\" r=\"3\"><\/circle>\n                <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"><\/line>\n            <\/svg>\n        <\/div>\n        <div class=\"amazing-side-title\">\u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632<\/div>\n        <a href=\"#\" class=\"amazing-side-btn\" id=\"amazingDetailLink\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n                <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n            <\/svg>\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\n        <\/a>\n    <\/div>\n\n    <!-- \u0646\u0648\u0627\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 -->\n    <div class=\"amazing-mobile-bar\">\n        <div class=\"amazing-mobile-bar-info\">\n            <div class=\"amazing-mobile-title\">\u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632<\/div>\n        <\/div>\n        <a href=\"#\" class=\"amazing-mobile-btn\" id=\"amazingMobileLink\">\n            \u0647\u0645\u0647\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n            <\/svg>\n        <\/a>\n    <\/div>\n\n    <!-- \u062a\u0631\u06a9 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 -->\n    <div class=\"amazing-track-wrap\">\n        <button class=\"amazing-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n        <button class=\"amazing-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n        <div class=\"amazing-track\" id=\"amazingTrack\" role=\"list\"><\/div>\n    <\/div>\n\n<\/div>\n\n<!-- ====== \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a ====== -->\n<script>\n    (function() {\n        'use strict';\n\n        const container = document.getElementById('amazingContainer');\n        if (!container) return;\n\n        const products = [{\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Jun-7-2026-03_34_49-PM.jpg',\n            title: '\ud83d\udd25 \u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0631\u0648\u0632\u0645\u0631\u0647 \u0645\u062f\u0644 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 9060',\n            oldPrice: '\u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: '#'\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM.jpg',\n            title: '\ud83d\udd25 \u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0645\u062f\u0644 \u062c\u0631\u062f\u0646 \u0648\u0627\u0646',\n            oldPrice: '\u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: '#'\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/59765-2025259758149.jpg',\n            title: '\ud83d\udd25 \u06a9\u0631\u0645 \u0622\u0628\u0631\u0633\u0627\u0646 \u0631\u0627\u06a9\u0648\u062a\u0646 \u0645\u0646\u0627\u0633\u0628 \u067e\u0648\u0633\u062a \u0686\u0631\u0628 \u0648 \u0645\u062e\u062a\u0644\u0637 \u062d\u062c\u0645 50 \u0645\u06cc\u0644\u06cc \u0644\u06cc\u062a\u0631',\n            oldPrice: '\u06f5\u06f9\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f5\u06f9,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: '#'\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/Prime-Spf-50-Fusion-Water-Sun-Protector-40-ml-Khanoumi-20241289462089.jpg',\n            title: '\ud83d\udd25 \u0641\u0644\u0648\u0626\u06cc\u062f \u0636\u062f\u0622\u0641\u062a\u0627\u0628 \u0628\u06cc\u200c\u0631\u0646\u06af \u067e\u0631\u0627\u06cc\u0645 SPF50',\n            oldPrice: '\u06f9\u06f5\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f9\u06f5,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: '#'\n        }];\n\n        const track = container.querySelector('#amazingTrack');\n        if (!track) return;\n\n        function renderCards() {\n            track.innerHTML = products.map((p, index) => {\n                return `\n                    <a href=\"${p.link}\" class=\"amazing-card\" data-index=\"${index}\">\n                        <div class=\"amazing-card-img loading\" data-imgwrap=\"${index}\">\n                            <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.title}\" loading=\"lazy\" data-img=\"${index}\">\n                            <span class=\"amazing-badge\">${p.percent}<\/span>\n                        <\/div>\n                        <div class=\"amazing-card-body\">\n                            <div class=\"amazing-card-title\">${p.title}<\/div>\n                            <div class=\"amazing-price-row\">\n                                <div class=\"amazing-old-line\">\n                                    <span class=\"amazing-old-price\">${p.oldPrice}<\/span>\n                                    <span class=\"amazing-percent\">${p.percent}<\/span>\n                                <\/div>\n                                <div class=\"amazing-new-price\">${p.newPrice} <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/a>\n                `;\n            }).join('');\n\n            products.forEach((p, index) => {\n                const img = track.querySelector(`[data-img=\"${index}\"]`);\n                const wrap = track.querySelector(`[data-imgwrap=\"${index}\"]`);\n                if (!img) return;\n                const onReady = () => {\n                    img.classList.add('loaded');\n                    if (wrap) wrap.classList.remove('loading');\n                };\n                if (img.complete) onReady();\n                else {\n                    img.addEventListener('load', onReady);\n                    img.addEventListener('error', onReady);\n                }\n            });\n        }\n\n        const prevBtn = container.querySelector('.amazing-nav.prev');\n        const nextBtn = container.querySelector('.amazing-nav.next');\n\n        function getScrollStep() {\n            const firstCard = track.querySelector('.amazing-card');\n            return firstCard ? firstCard.offsetWidth + 14 : 200;\n        }\n\n        function refreshNavState() {\n            const maxScroll = track.scrollWidth - track.clientWidth;\n            const atStart = Math.abs(track.scrollLeft) < 3;\n            const atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 3;\n            if (prevBtn) prevBtn.disabled = atEnd;\n            if (nextBtn) nextBtn.disabled = atStart;\n        }\n\n        if (prevBtn) {\n            prevBtn.addEventListener('click', () => {\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\n            });\n        }\n        if (nextBtn) {\n            nextBtn.addEventListener('click', () => {\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\n            });\n        }\n\n        let raf = null;\n        track.addEventListener('scroll', () => {\n            if (raf) return;\n            raf = requestAnimationFrame(() => {\n                refreshNavState();\n                raf = null;\n            });\n        }, { passive: true });\n\n        track.setAttribute('tabindex', '0');\n        track.addEventListener('keydown', (e) => {\n            if (e.key === 'ArrowRight') {\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\n                e.preventDefault();\n            } else if (e.key === 'ArrowLeft') {\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\n                e.preventDefault();\n            }\n        });\n\n        renderCards();\n        refreshNavState();\n        window.addEventListener('resize', refreshNavState);\n\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abdc498 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"abdc498\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c2816c elementor-widget elementor-widget-html\" data-id=\"5c2816c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.vexa-size-bar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 10px 15px;\r\n    max-width: 1000px;\r\n    margin: 16px auto 8px;\r\n    padding: 10px 20px;\r\n    background: #f8f8fa;\r\n    border-radius: 40px;\r\n    border: 1px solid #e8e8ec;\r\n    direction: rtl;\r\n    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.02);\r\n}\r\n.vexa-size-bar .vexa-size-text {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    color: #1d1d1f;\r\n}\r\n.vexa-size-bar .vexa-size-text i {\r\n    font-style: normal;\r\n    font-size: 20px;\r\n    line-height: 1;\r\n}\r\n.vexa-size-bar .vexa-size-link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 6px 18px;\r\n    background: #b71c1c;\r\n    color: #fff !important;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    border-radius: 30px;\r\n    transition: background 0.2s, transform 0.1s;\r\n    white-space: nowrap;\r\n}\r\n.vexa-size-bar .vexa-size-link:hover {\r\n    background: #8b1515;\r\n    color: #fff !important;\r\n}\r\n.vexa-size-bar .vexa-size-link:active {\r\n    transform: scale(0.96);\r\n}\r\n.vexa-size-bar .vexa-size-link .arrow {\r\n    display: inline-block;\r\n    transition: transform 0.2s;\r\n}\r\n.vexa-size-bar .vexa-size-link:hover .arrow {\r\n    transform: translateX(4px);\r\n}\r\n@media (max-width: 600px) {\r\n    .vexa-size-bar {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        text-align: center;\r\n        padding: 12px 16px;\r\n        border-radius: 20px;\r\n        margin: 12px 12px 6px;\r\n    }\r\n    .vexa-size-bar .vexa-size-text {\r\n        justify-content: center;\r\n        font-size: 13px;\r\n    }\r\n    .vexa-size-bar .vexa-size-link {\r\n        justify-content: center;\r\n        padding: 8px 16px;\r\n        font-size: 13px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"vexa-size-bar\">\r\n    <div class=\"vexa-size-text\">\r\n        <i>\ud83d\udc5f<\/i>\r\n        <span>\u0645\u062d\u0627\u0633\u0628\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0633\u0627\u06cc\u0632 \u06a9\u0641\u0634 \u0648 \u06a9\u062a\u0627\u0646\u06cc <\/span>\r\n    <\/div>\r\n    <a href=\"\/shoe-size-calculator\" class=\"vexa-size-link vexa-loading-link\">\r\n        \u0645\u062d\u0627\u0633\u0628\u0647 \u0633\u0627\u06cc\u0632\r\n        <span class=\"arrow\">\u2190<\/span>\r\n    <\/a>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e5d5976 e-con-full e-flex e-con e-parent\" data-id=\"e5d5976\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee121d8 elementor-widget elementor-widget-html\" data-id=\"ee121d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fa\" dir=\"rtl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>\u0634\u06af\u0641\u062a\u0627\u0646\u0647 VEXA \u2014 \u0646\u0633\u062e\u0647 \u0627\u0635\u0644\u0627\u062d\u200c\u0634\u062f\u0647<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n  html, body { margin:0; padding:0; overflow-x:hidden; background:#0e0e14; }\n  \/* \u06cc\u06a9 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0632 \u06cc\u06a9 \u0635\u0641\u062d\u0647\u0654 \u0633\u0627\u06cc\u062a \u0628\u0627 \u067e\u062f\u06cc\u0646\u06af \u06a9\u0646\u0627\u0631\u06cc\u060c \u062a\u0627 \u0627\u062b\u0631 \u00ab\u0686\u0633\u0628\u06cc\u062f\u0646 \u0628\u0647 \u062f\u06cc\u0648\u0627\u0631\u00bb \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u0647 *\/\n  .page-demo {\n    max-width: 1180px;\n    margin: 0 auto;\n    padding: 24px 16px;\n    font-family: 'Vazirmatn', sans-serif;\n  }\n  .page-demo h2 { color:#fff; font-size:14px; opacity:.5; margin:0 0 12px; }\n  @media (max-width: 900px) {\n    .page-demo { max-width: 480px; }\n  }\n<\/style>\n\n<style>\n    \/* ====== \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0644\u06cc ====== *\/\n    .vexa-golden {\n        --gold-primary: #FFD700;\n        --gold-dark: #B8860B;\n        --gold-glow: rgba(255, 215, 0, 0.4);\n        --radius: 20px;\n        --card-radius: 14px;\n        --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.12);\n        --transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n        --card-w: clamp(118px, 30vw, 190px);\n\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        background: radial-gradient(ellipse at 30% 40%, #1a1a2e, #0f0f1a);\n        border-radius: var(--radius);\n        overflow: hidden;\n        \/* \u2705 \u067e\u062f\u06cc\u0646\u06af \u0639\u0645\u0648\u062f\u06cc \u06a9\u0645 \u0634\u062f \u062a\u0627 \u0641\u0627\u0635\u0644\u0647 \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0644\u0627\/\u067e\u0627\u06cc\u06cc\u0646 \u0648\u06cc\u062c\u062a \u062d\u0630\u0641 \u0628\u0634\u0647 *\/\n        padding: 8px 20px;\n        gap: 20px;\n        direction: rtl;\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\n        box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.15);\n        border: 1px solid rgba(255, 215, 0, 0.2);\n        position: relative;\n        box-sizing: border-box;\n    }\n\n    .vexa-golden *,\n    .vexa-golden *::before,\n    .vexa-golden *::after {\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\n        box-sizing: border-box;\n    }\n\n    .vexa-golden::before {\n        content: '';\n        position: absolute;\n        inset: -2px;\n        background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark), var(--gold-primary));\n        border-radius: inherit;\n        z-index: -1;\n        opacity: 0.15;\n        filter: blur(8px);\n    }\n\n    \/* ====== \u0628\u062e\u0634 \u06a9\u0646\u0627\u0631\u06cc (\u062f\u0633\u06a9\u062a\u0627\u067e) ====== *\/\n    .vexa-golden-side {\n        flex: 0 0 164px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        color: #fff;\n        text-align: center;\n        padding: 18px 14px;\n        background: rgba(255, 215, 0, 0.04);\n        border-radius: var(--radius);\n        backdrop-filter: blur(12px);\n        border: 1px solid rgba(255, 215, 0, 0.15);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .vexa-side-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #FFD700;\n        position: relative;\n        z-index: 1;\n        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));\n    }\n\n    .vexa-golden-side::after {\n        content: '';\n        position: absolute;\n        top: -50%;\n        left: -50%;\n        width: 200%;\n        height: 200%;\n        background: radial-gradient(circle at center, rgba(255, 215, 0, 0.03), transparent 70%);\n        animation: side-glow 8s linear infinite;\n        pointer-events: none;\n    }\n\n    @keyframes side-glow {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n    .vexa-side-title {\n        font-size: 19px;\n        line-height: 1.35;\n        font-weight: 900;\n        background: linear-gradient(135deg, #FFF8DC, #FFD700, #FFC125, #DAA520);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        position: relative;\n        z-index: 1;\n        animation: title-shine 3s ease-in-out infinite alternate;\n    }\n\n    @keyframes title-shine {\n        0% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.2)); }\n        100% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6)); }\n    }\n\n    .vexa-side-timer {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 4px;\n        background: rgba(0, 0, 0, 0.4);\n        padding: 8px 14px;\n        border-radius: 14px;\n        backdrop-filter: blur(4px);\n        border: 1px solid rgba(255, 215, 0, 0.2);\n        position: relative;\n        z-index: 1;\n        width: 100%;\n    }\n\n    .vexa-side-timer .side-time {\n        display: flex;\n        justify-content: center;\n        gap: 4px;\n        direction: ltr;\n        font-size: 15px;\n        font-weight: 700;\n        color: #FFD700;\n        font-variant-numeric: tabular-nums;\n    }\n\n    .vexa-side-timer .side-time .box {\n        background: rgba(255, 215, 0, 0.08);\n        border-radius: 8px;\n        padding: 4px 6px;\n        min-width: 26px;\n        text-align: center;\n    }\n\n    .vexa-side-timer .side-time .sep {\n        color: rgba(255, 215, 0, 0.5);\n    }\n\n    \/* ====== \u062f\u06a9\u0645\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 ====== *\/\n    .vexa-side-detail-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        background: linear-gradient(145deg, #FFD700, #D4AF37);\n        color: #1a1a1a;\n        font-size: 12.5px;\n        font-weight: 700;\n        padding: 9px 14px;\n        border-radius: 40px;\n        text-decoration: none;\n        white-space: nowrap;\n        transition: all var(--transition);\n        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);\n        border: 1px solid rgba(255, 255, 255, 0.25);\n        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n        position: relative;\n        z-index: 1;\n        letter-spacing: 0.3px;\n        width: 100%;\n        justify-content: center;\n        transform-origin: center;\n        flex-shrink: 0;\n    }\n\n    \/* \u2705 \u0641\u0642\u0637 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u0627\u0648\u0633\/\u0647\u0627\u0648\u0631 \u062f\u0627\u0631\u0646 \u0627\u06cc\u0646 \u0627\u0641\u06a9\u062a \u0631\u0648 \u0628\u06af\u06cc\u0631\u0646 (\u0646\u0647 \u0644\u0645\u0633\u06cc) *\/\n    @media (hover: hover) and (pointer: fine) {\n        .vexa-side-detail-btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 36px rgba(255, 215, 0, 0.6);\n            background: linear-gradient(145deg, #FFE066, #C9A800);\n        }\n        .vexa-side-detail-btn:hover svg {\n            transform: translateX(-4px);\n        }\n    }\n\n    .vexa-side-detail-btn svg {\n        width: 16px;\n        height: 16px;\n        stroke: currentColor;\n        fill: none;\n        stroke-width: 2.5;\n        transition: transform var(--transition);\n        flex-shrink: 0;\n    }\n\n    \/* ====== \u0646\u0627\u062d\u06cc\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 ====== *\/\n    .vexa-golden-track-wrap {\n        position: relative;\n        flex: 1;\n        min-width: 0;\n    }\n\n    .vexa-golden-track {\n        display: flex;\n        gap: 14px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        \/* proximity \u0628\u0647\u200c\u062c\u0627\u06cc mandatory: \u0627\u0633\u0646\u067e \u0646\u0631\u0645\u200c\u062a\u0631\u0647 \u0648 \u062f\u06cc\u06af\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0639\u0645\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u0631\u0648 \u062f\u0631 \u06af\u0648\u0634\u06cc \u0642\u0641\u0644 \u0646\u0645\u06cc\u200c\u06a9\u0646\u0647 *\/\n        scroll-snap-type: x proximity;\n        scroll-behavior: smooth;\n        \/* \u2705 \u067e\u062f\u06cc\u0646\u06af \u0628\u0627\u0644\u0627\/\u067e\u0627\u06cc\u06cc\u0646 \u062a\u0631\u06a9 \u06a9\u0627\u0647\u0634 \u06cc\u0627\u0641\u062a (\u0642\u0628\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u062c\u0627\u062e\u0627\u0644\u06cc \u0627\u0641\u06a9\u062a \u0647\u0627\u0648\u0631 \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0647\u0645 \u0644\u0627\u0632\u0645 \u0628\u0648\u062f\u060c \u0627\u0644\u0627\u0646 \u06a9\u0647 \u0647\u0627\u0648\u0631 \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a) *\/\n        padding: 2px 2px 4px;\n        scrollbar-width: none;\n        -webkit-overflow-scrolling: touch;\n        overscroll-behavior-x: contain;\n        direction: rtl;\n    }\n\n    .vexa-golden-track::-webkit-scrollbar {\n        display: none;\n    }\n\n    \/* ====== \u06a9\u0627\u0631\u062a ====== *\/\n    .vexa-golden-card {\n        scroll-snap-align: start;\n        \/* normal \u0628\u0647\u200c\u062c\u0627\u06cc always: \u0627\u0632 \u0642\u0641\u0644\u200c\u0634\u062f\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0644\u0645\u0633\u06cc \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0647 *\/\n        scroll-snap-stop: normal;\n        flex: 0 0 var(--card-w);\n        width: var(--card-w);\n        background: #ffffff;\n        border-radius: var(--card-radius);\n        overflow: hidden;\n        text-decoration: none;\n        color: #1a1a1a;\n        display: flex;\n        flex-direction: column;\n        transition: transform var(--transition), border-color var(--transition);\n        box-shadow: none;\n        position: relative;\n        border: 1px solid rgba(255, 215, 0, 0.1);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        \/* \u2705 \u06a9\u0645\u06a9 \u0628\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u06a9\u0631\u0648\u0644: \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0646\u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u062e\u0627\u0631\u062c \u0627\u0632 \u062f\u06cc\u062f \u0631\u0648 \u0645\u062d\u062f\u0648\u062f \u0645\u06cc\u200c\u06a9\u0646\u0647 *\/\n        contain: layout paint;\n    }\n\n    \/* \u2705 \u0627\u0641\u06a9\u062a \u0647\u0627\u0648\u0631 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u0627\u064b \u0647\u0627\u0648\u0631\u067e\u0630\u06cc\u0631 (\u0645\u0627\u0648\u0633) \u0641\u0639\u0627\u0644 \u0645\u06cc\u0634\u0647\n       \u062a\u0627 \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0644\u0645\u0633\u060c \u06a9\u0627\u0631\u062a \u0646\u0647 \u0628\u067e\u0631\u0647 \u0628\u0627\u0644\u0627 \u0648 \u0646\u0647 \u0633\u0627\u06cc\u0647\/\u062d\u0627\u0644\u062a \u0637\u0644\u0627\u06cc\u06cc \u0628\u06af\u06cc\u0631\u0647 \u0648 \u06af\u06cc\u0631 \u0646\u06a9\u0646\u0647 *\/\n    @media (hover: hover) and (pointer: fine) {\n        .vexa-golden-card:hover {\n            \/* \u2705 \u0641\u0642\u0637 \u0628\u0627\u0644\u0627 \u0645\u06cc\u200c\u0631\u0647\u060c \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0633\u0627\u06cc\u0647\u200c\u06cc \u0627\u0636\u0627\u0641\u0647 (\u0646\u0647 \u0637\u0644\u0627\u06cc\u06cc\u060c \u0646\u0647 \u0645\u0634\u06a9\u06cc) \u062f\u0648\u0631 \u0628\u0627\u06a9\u0633 *\/\n            transform: translateY(-4px);\n        }\n    }\n\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\n    .vexa-golden-card-img {\n        position: relative;\n        background: #f0f0f0;\n        aspect-ratio: 1 \/ 1;\n        width: 100%;\n        display: block;\n        overflow: hidden;\n    }\n\n    .vexa-golden-card-img.loading {\n        background: linear-gradient(100deg, #f0f0f0 30%, #f8f8f8 50%, #f0f0f0 70%);\n        background-size: 200% 100%;\n        animation: img-shimmer 1.4s ease infinite;\n    }\n\n    @keyframes img-shimmer {\n        0% { background-position: 100% 50%; }\n        100% { background-position: 0 50%; }\n    }\n\n    .vexa-golden-card-img img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n        transition: opacity var(--transition);\n        opacity: 0;\n    }\n\n    .vexa-golden-card-img img.loaded {\n        opacity: 1;\n    }\n\n    \/* ====== \u0628\u0631\u0686\u0633\u0628 \u062f\u0631\u0635\u062f \u062a\u062e\u0641\u06cc\u0641 (\u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631) ====== *\/\n    .vexa-golden-badge {\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        background: linear-gradient(135deg, #FFD700, #DAA520);\n        color: #1a1a1a;\n        font-size: 11px;\n        font-weight: 800;\n        padding: 2px 10px;\n        border-radius: 20px;\n        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.5);\n        z-index: 3;\n        line-height: 1.6;\n    }\n\n    \/* ====== \u062a\u0627\u06cc\u0645\u0631 \u06a9\u0627\u0631\u062a ====== *\/\n    .vexa-item-timer {\n        position: absolute;\n        bottom: 8px;\n        left: 8px;\n        right: 8px;\n        z-index: 3;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 2px;\n        background: rgba(0, 0, 0, 0.5);\n        backdrop-filter: blur(4px);\n        padding: 4px 6px;\n        border-radius: 10px;\n        border: 1px solid rgba(255, 215, 0, 0.15);\n        transition: background var(--transition), border-color var(--transition);\n        min-height: 34px;\n    }\n\n    .vexa-item-timer .timer-days {\n        font-size: 10px;\n        font-weight: 700;\n        color: #FFD700;\n        line-height: 1.2;\n    }\n\n    .vexa-item-timer .timer-time {\n        display: flex;\n        gap: 3px;\n        direction: ltr;\n        font-size: 12px;\n        font-weight: 700;\n        color: #FFD700;\n        font-variant-numeric: tabular-nums;\n    }\n\n    .vexa-item-timer .timer-time .box {\n        background: rgba(255, 215, 0, 0.1);\n        border-radius: 4px;\n        padding: 1px 4px;\n        min-width: 18px;\n        text-align: center;\n    }\n\n    .vexa-item-timer .timer-time .sep {\n        color: rgba(255, 215, 0, 0.4);\n    }\n\n    .vexa-item-timer.urgent {\n        background: rgba(228, 69, 58, 0.8);\n        border-color: #ff6b5a;\n        animation: urgent-pulse 1s ease-in-out infinite;\n    }\n\n    .vexa-item-timer.urgent .timer-days,\n    .vexa-item-timer.urgent .timer-time {\n        color: #fff;\n    }\n\n    @keyframes urgent-pulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.85; transform: scale(0.98); }\n    }\n\n    .vexa-item-timer.ended {\n        background: rgba(60, 60, 60, 0.7);\n        border-color: transparent;\n    }\n    .vexa-item-timer.ended .timer-days,\n    .vexa-item-timer.ended .timer-time {\n        color: #aaa;\n    }\n\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\n    .vexa-golden-card-body {\n        padding: 9px 10px 10px;\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n        flex: 1;\n    }\n\n    .vexa-golden-card-title {\n        font-size: 12.5px;\n        line-height: 1.45;\n        min-height: 36px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        color: #1e1e1e;\n        text-align: right;\n        font-weight: 500;\n    }\n\n    \/* ====== \u0628\u0631\u0686\u0633\u0628 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a ====== *\/\n    .vexa-limited-badge {\n        font-size: 9.5px;\n        font-weight: 700;\n        color: #fff;\n        background: rgba(228, 69, 58, 0.85);\n        padding: 2px 8px;\n        border-radius: 6px;\n        display: inline-block;\n        align-self: flex-start;\n        margin-top: 1px;\n        letter-spacing: 0.2px;\n        animation: limited-pulse 1.8s ease-in-out infinite;\n        white-space: nowrap;\n    }\n\n    @keyframes limited-pulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.8; transform: scale(0.96); }\n    }\n\n    \/* ====== \u0642\u06cc\u0645\u062a\u200c\u0647\u0627 ====== *\/\n    .vexa-golden-price-row {\n        margin-top: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n        align-items: flex-end;\n    }\n\n    .vexa-golden-old-price-line {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        flex-wrap: wrap;\n        justify-content: flex-end;\n    }\n\n    .vexa-golden-old-price {\n        font-size: 10.5px;\n        color: #999;\n        text-decoration: line-through;\n    }\n\n    .vexa-golden-percent {\n        font-size: 10.5px;\n        font-weight: 800;\n        color: #1a1a1a;\n        background: linear-gradient(135deg, #FFD700, #DAA520);\n        padding: 1px 8px;\n        border-radius: 20px;\n        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);\n    }\n\n    .vexa-golden-new-price {\n        font-size: 15px;\n        font-weight: 800;\n        color: #0f0f0f;\n        display: flex;\n        align-items: baseline;\n        gap: 4px;\n    }\n\n    .vexa-golden-new-price small {\n        font-size: 10.5px;\n        font-weight: 400;\n        color: #888;\n    }\n\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e\/\u062a\u0628\u0644\u062a) ====== *\/\n    .vexa-golden-nav {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 36px;\n        height: 36px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255, 215, 0, 0.85);\n        backdrop-filter: blur(8px);\n        color: #1a1a1a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        z-index: 5;\n        opacity: 0.9;\n        transition: all var(--transition);\n        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);\n        border: 1px solid rgba(255, 255, 255, 0.2);\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        .vexa-golden-nav:hover {\n            background: #ffffff;\n            transform: translateY(-50%) scale(1.1);\n            box-shadow: 0 0 24px var(--gold-glow);\n        }\n    }\n\n    .vexa-golden-nav:disabled {\n        opacity: 0 !important;\n        pointer-events: none;\n    }\n\n    .vexa-golden-nav svg {\n        width: 18px;\n        height: 18px;\n        stroke-width: 2.5;\n    }\n\n    .vexa-golden-nav.prev {\n        left: 6px;\n    }\n    .vexa-golden-nav.next {\n        right: 6px;\n    }\n\n    \/* ====== \u0646\u0633\u062e\u0647 \u0641\u0634\u0631\u062f\u0647 \u0647\u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u062e\u0641\u06cc) ====== *\/\n    .vexa-mobile-bar {\n        display: none;\n    }\n\n    \/* ================================================================\n       \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648\n       ================================================================ *\/\n\n    \/* \u062a\u0628\u0644\u062a \/ \u0645\u0648\u0628\u0627\u06cc\u0644: \u0686\u0633\u0628\u06cc\u062f\u0647 \u0628\u0647 \u062f\u06cc\u0648\u0627\u0631\u0647\u200c\u0647\u0627\u060c \u0628\u062f\u0648\u0646 \u06af\u0631\u062f\u06cc\u060c \u0628\u062f\u0648\u0646 \u0641\u0627\u0635\u0644\u0647\u0654 \u0627\u0636\u0627\u0641\u0647 *\/\n    @media (max-width: 900px) {\n        .vexa-golden {\n            flex-direction: column;\n            \/* \u2705 \u0641\u0627\u0635\u0644\u0647 \u0628\u0627\u0644\u0627\u06cc \u0648\u06cc\u062c\u062a \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u06a9\u0645\u062a\u0631 \u0634\u062f *\/\n            padding: 6px 0 0;\n            gap: 6px;\n            border-radius: 0;\n            \/* \u0634\u06a9\u0633\u062a\u0646 \u0627\u0632 \u067e\u062f\u06cc\u0646\u06af \u0648\u0627\u0644\u062f \u0648 \u0686\u0633\u0628\u06cc\u062f\u0646 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0644\u0628\u0647\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647\u060c \u0645\u062b\u0644 \u062f\u06cc\u062c\u06cc\u200c\u06a9\u0627\u0644\u0627 *\/\n            width: 100vw;\n            max-width: 100vw;\n            margin-left: calc(50% - 50vw);\n            margin-right: calc(50% - 50vw);\n        }\n\n        \/* \u0628\u062e\u0634 \u06a9\u0646\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u062d\u0630\u0641 \u0648 \u0646\u0648\u0627\u0631 \u0641\u0634\u0631\u062f\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f *\/\n        .vexa-golden-side {\n            display: none;\n        }\n\n        .vexa-mobile-bar {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 10px 14px;\n            margin: 0;\n            background: rgba(255, 215, 0, 0.06);\n            border: none;\n            border-bottom: 1px solid rgba(255, 215, 0, 0.15);\n            border-radius: 0;\n            color: #fff;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .vexa-mobile-bar-info {\n            flex: 1;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .vexa-mobile-title {\n            font-size: 14px;\n            font-weight: 900;\n            background: linear-gradient(135deg, #FFF8DC, #FFD700, #DAA520);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            white-space: nowrap;\n        }\n\n        .vexa-mobile-status {\n            font-size: 10.5px;\n            color: rgba(255,255,255,0.55);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .vexa-mobile-timer {\n            display: flex;\n            align-items: center;\n            gap: 3px;\n            direction: ltr;\n            font-size: 13px;\n            font-weight: 700;\n            color: #FFD700;\n            font-variant-numeric: tabular-nums;\n            flex-shrink: 0;\n            background: rgba(0,0,0,.35);\n            padding: 5px 8px;\n            border-radius: 10px;\n        }\n\n        .vexa-mobile-timer .box {\n            min-width: 20px;\n            text-align: center;\n        }\n\n        .vexa-mobile-timer .sep {\n            color: rgba(255,215,0,.4);\n        }\n\n        \/* \u062f\u06a9\u0645\u0647\u0654 \u00ab\u0647\u0645\u0647\u00bb \u2014 \u0645\u062b\u0644 \u0644\u06cc\u0646\u06a9 \u0645\u0634\u0627\u0647\u062f\u0647\u0654 \u0647\u0645\u0647 \u062f\u0631 \u0648\u06cc\u062c\u062a \u062f\u06cc\u062c\u06cc\u200c\u06a9\u0627\u0644\u0627 *\/\n        .vexa-mobile-detail-btn {\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            padding: 7px 12px;\n            border-radius: 20px;\n            background: linear-gradient(145deg, #FFD700, #D4AF37);\n            color: #1a1a1a;\n            text-decoration: none;\n            font-size: 12px;\n            font-weight: 700;\n            white-space: nowrap;\n        }\n\n        .vexa-mobile-detail-btn svg {\n            width: 13px;\n            height: 13px;\n            stroke: currentColor;\n            fill: none;\n            stroke-width: 2.5;\n        }\n\n        :root {\n            --card-w: clamp(128px, 32vw, 172px);\n        }\n\n        .vexa-golden-nav {\n            display: none;\n        }\n\n        \/* \u0628\u062f\u0648\u0646 \u067e\u062f\u06cc\u0646\u06af \u0627\u0641\u0642\u06cc \u0631\u0648\u06cc \u062a\u0631\u06a9: \u0627\u0648\u0644\u06cc\u0646 \u0648 \u0622\u062e\u0631\u06cc\u0646 \u06a9\u0627\u0631\u062a \u062f\u0642\u06cc\u0642\u0627\u064b \u0628\u0647 \u0644\u0628\u0647\u0654 \u0635\u0641\u062d\u0647 \u0645\u06cc\u200c\u0686\u0633\u0628\u0646\u062f\n           \u2705 \u067e\u062f\u06cc\u0646\u06af \u0639\u0645\u0648\u062f\u06cc \u0647\u0645 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0631\u0633\u06cc\u062f \u0686\u0648\u0646 \u062f\u06cc\u06af\u0647 \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u062c\u0627\u06cc \u0647\u0627\u0648\u0631 \u062e\u0627\u0644\u06cc \u0628\u0645\u0648\u0646\u0647 *\/\n        .vexa-golden-track {\n            gap: 3px;\n            padding: 2px 0 4px;\n        }\n\n        .vexa-golden-card {\n            border-radius: 0;\n        }\n    }\n\n    \/* \u0645\u0648\u0628\u0627\u06cc\u0644 \u06a9\u0648\u0686\u06a9 *\/\n    @media (max-width: 480px) {\n        .vexa-golden {\n            padding: 4px 0 0;\n            gap: 4px;\n        }\n\n        .vexa-mobile-bar {\n            padding: 8px 12px;\n            gap: 8px;\n        }\n\n        .vexa-mobile-title {\n            font-size: 12.5px;\n        }\n\n        .vexa-mobile-status {\n            font-size: 9.5px;\n        }\n\n        .vexa-mobile-timer {\n            font-size: 12px;\n            padding: 4px 7px;\n        }\n\n        .vexa-mobile-detail-btn {\n            padding: 6px 10px;\n            font-size: 11px;\n        }\n\n        .vexa-golden-track {\n            gap: 2px;\n            padding: 2px 0 3px;\n        }\n\n        .vexa-golden-card-body {\n            padding: 7px 8px 8px;\n            gap: 4px;\n        }\n\n        .vexa-golden-card-title {\n            font-size: 11.5px;\n            min-height: 32px;\n            line-height: 1.4;\n        }\n\n        .vexa-limited-badge {\n            font-size: 8.5px;\n            padding: 1.5px 6px;\n        }\n\n        .vexa-golden-old-price,\n        .vexa-golden-percent {\n            font-size: 9.5px;\n        }\n\n        .vexa-golden-new-price {\n            font-size: 13px;\n        }\n\n        .vexa-golden-new-price small {\n            font-size: 9.5px;\n        }\n\n        .vexa-golden-badge {\n            font-size: 9.5px;\n            padding: 1.5px 7px;\n            top: 6px;\n            right: 6px;\n        }\n\n        .vexa-item-timer {\n            padding: 3px 5px;\n            min-height: 28px;\n            bottom: 6px;\n            left: 6px;\n            right: 6px;\n            border-radius: 8px;\n        }\n\n        .vexa-item-timer .timer-time {\n            font-size: 10px;\n        }\n\n        .vexa-item-timer .timer-days {\n            font-size: 8.5px;\n        }\n    }\n\n    \/* \u0645\u0648\u0628\u0627\u06cc\u0644 \u062e\u06cc\u0644\u06cc \u06a9\u0648\u0686\u06a9 *\/\n    @media (max-width: 360px) {\n        :root {\n            --card-w: clamp(110px, 42vw, 150px);\n        }\n        .vexa-mobile-title {\n            font-size: 11px;\n        }\n        .vexa-mobile-status {\n            display: none;\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .vexa-golden-side::after {\n            animation: none !important;\n        }\n        .vexa-golden-card,\n        .vexa-golden-nav,\n        .vexa-side-detail-btn {\n            transition: none !important;\n        }\n        .vexa-limited-badge {\n            animation: none !important;\n        }\n        .vexa-golden-track {\n            scroll-behavior: auto;\n        }\n    }\n<\/style>\n<\/head>\n<body>\n<div class=\"page-demo\">\n<!-- ====== HTML ====== -->\n<div class=\"vexa-golden\">\n\n    <!-- \u0628\u062e\u0634 \u06a9\u0646\u0627\u0631\u06cc (\u062f\u0633\u06a9\u062a\u0627\u067e\/\u062a\u0628\u0644\u062a \u0628\u0632\u0631\u06af) -->\n    <div class=\"vexa-golden-side\">\n        <div class=\"vexa-side-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"7\" cy=\"7\" r=\"3\"><\/circle>\n                <circle cx=\"17\" cy=\"17\" r=\"3\"><\/circle>\n                <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"><\/line>\n            <\/svg>\n        <\/div>\n        <div class=\"vexa-side-title\">\u0634\u06af\u0641\u062a\u0627\u0646\u0647<br>VEXA<\/div>\n        <div class=\"vexa-side-timer\" id=\"vexaSideTimer\" role=\"timer\">\n            <div class=\"side-time\">\n                <span class=\"box\" id=\"vexaSideHours\">\u06f0\u06f0<\/span>\n                <span class=\"sep\">:<\/span>\n                <span class=\"box\" id=\"vexaSideMinutes\">\u06f0\u06f0<\/span>\n                <span class=\"sep\">:<\/span>\n                <span class=\"box\" id=\"vexaSideSeconds\">\u06f0\u06f0<\/span>\n            <\/div>\n        <\/div>\n        <a href=\"#\" class=\"vexa-side-detail-btn\" id=\"vexaDetailLink\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n                <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n            <\/svg>\n    \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\n        <\/a>\n    <\/div>\n\n    <!-- \u0646\u0648\u0627\u0631 \u0641\u0634\u0631\u062f\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644: \u0639\u0646\u0648\u0627\u0646 \u0628\u0631\u0646\u062f \u062b\u0627\u0628\u062a \u0627\u0633\u062a \u0648 \u062f\u06cc\u06af\u0631 \u0628\u0627 \u0627\u0633\u0645 \u0645\u062d\u0635\u0648\u0644 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f -->\n    <div class=\"vexa-mobile-bar\">\n        <div class=\"vexa-mobile-bar-info\">\n            <div class=\"vexa-mobile-title\">\u0634\u06af\u0641\u062a\u0627\u0646\u0647 VEXA<\/div>\n            <div class=\"vexa-mobile-status\" id=\"vexaMobileStatus\">\u062a\u0627 \u0634\u0631\u0648\u0639 \u062a\u062e\u0641\u06cc\u0641 \u23f3<\/div>\n        <\/div>\n        <div class=\"vexa-mobile-timer\" id=\"vexaMobileTimer\" role=\"timer\">\n            <span class=\"box\" id=\"vexaMobileHours\">\u06f0\u06f0<\/span>\n            <span class=\"sep\">:<\/span>\n            <span class=\"box\" id=\"vexaMobileMinutes\">\u06f0\u06f0<\/span>\n            <span class=\"sep\">:<\/span>\n            <span class=\"box\" id=\"vexaMobileSeconds\">\u06f0\u06f0<\/span>\n        <\/div>\n        <a href=\"#\" class=\"vexa-mobile-detail-btn\" id=\"vexaMobileDetailLink\">\n            \u0647\u0645\u0647\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n            <\/svg>\n        <\/a>\n    <\/div>\n\n    <!-- \u0646\u0627\u062d\u06cc\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 -->\n    <div class=\"vexa-golden-track-wrap\">\n        <button class=\"vexa-golden-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n        <button class=\"vexa-golden-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n            <\/svg>\n        <\/button>\n        <div class=\"vexa-golden-track\" id=\"vexaGoldenTrack\" role=\"list\"><\/div>\n    <\/div>\n\n<\/div>\n\n<\/div>\n\n<!-- ====== \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a ====== -->\n<script>\n    (function() {\n        'use strict';\n\n        \/* ============================================================\n           \ud83d\udd25 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u062a\u0627\u0631\u06cc\u062e\u200c\u0647\u0627\u06cc \u0634\u0631\u0648\u0639 \u062a\u062e\u0641\u06cc\u0641\n           ============================================================ *\/\n        const productsRaw = [{\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Jun-7-2026-03_34_49-PM.jpg',\n            title: '\ud83d\udd25 \u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0631\u0648\u0632\u0645\u0631\u0647 \u0645\u062f\u0644 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 9060',\n            oldPrice: '\u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: '',\n            dealStartsAt: new Date('2026-08-07T20:00:00').getTime(),\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM.jpg',\n            title: '\ud83d\udd25 \u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0645\u062f\u0644 \u062c\u0631\u062f\u0646 \u0648\u0627\u0646',\n            oldPrice: '\u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: 'https:\/\/example.com\/product\/2',\n            dealStartsAt: new Date('2026-08-06T14:00:00').getTime(),\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/59765-2025259758149.jpg',\n            title: '\ud83d\udd25 \u06a9\u0631\u0645 \u0622\u0628\u0631\u0633\u0627\u0646 \u0631\u0627\u06a9\u0648\u062a\u0646 \u0645\u0646\u0627\u0633\u0628 \u067e\u0648\u0633\u062a \u0686\u0631\u0628 \u0648 \u0645\u062e\u062a\u0644\u0637 \u062d\u062c\u0645 50 \u0645\u06cc\u0644\u06cc \u0644\u06cc\u062a\u0631',\n            oldPrice: '\u06f5\u06f9\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f5\u06f9,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: 'https:\/\/example.com\/product\/3',\n            dealStartsAt: new Date('2026-08-08T10:00:00').getTime(),\n        }, {\n            img: 'https:\/\/pakhshposhak.ir\/wp-content\/uploads\/2026\/08\/Prime-Spf-50-Fusion-Water-Sun-Protector-40-ml-Khanoumi-20241289462089.jpg',\n            title: '\ud83d\udd25 \u0641\u0644\u0648\u0626\u06cc\u062f \u0636\u062f\u0622\u0641\u062a\u0627\u0628 \u0628\u06cc\u200c\u0631\u0646\u06af \u067e\u0631\u0627\u06cc\u0645 SPF50',\n            oldPrice: '\u06f9\u06f5\u06f0,\u06f0\u06f0\u06f0',\n            newPrice: '\u06f9\u06f5,\u06f0\u06f0\u06f0',\n            percent: '\u06f9\u06f0\u066a',\n            link: 'https:\/\/example.com\/product\/4',\n            dealStartsAt: new Date('2026-08-06T16:30:00').getTime(),\n        }];\n\n        const track = document.getElementById('vexaGoldenTrack');\n        if (!track) return;\n\n        const faDigits = ['\u06f0', '\u06f1', '\u06f2', '\u06f3', '\u06f4', '\u06f5', '\u06f6', '\u06f7', '\u06f8', '\u06f9'];\n\n        function toFa(n) {\n            return String(n).replace(\/[0-9]\/g, d => faDigits[d]);\n        }\n\n        function pad(n) {\n            return toFa(String(Math.max(0, n)).padStart(2, '0'));\n        }\n\n        function sortProductsByClosest(products) {\n            const now = Date.now();\n            return [...products].sort((a, b) => {\n                const diffA = a.dealStartsAt - now;\n                const diffB = b.dealStartsAt - now;\n                const aFuture = diffA > 0;\n                const bFuture = diffB > 0;\n                if (aFuture && !bFuture) return -1;\n                if (!aFuture && bFuture) return 1;\n                return diffA - diffB;\n            });\n        }\n\n        let products = sortProductsByClosest(productsRaw);\n\n        function renderCards() {\n            track.innerHTML = products.map((p, index) => {\n                return `\n                    <a href=\"${p.link}\" class=\"vexa-golden-card\" data-index=\"${index}\">\n                        <div class=\"vexa-golden-card-img loading\" data-imgwrap=\"${index}\">\n                            <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.title}\" loading=\"lazy\" data-img=\"${index}\">\n                            <span class=\"vexa-golden-badge\">${p.percent}<\/span>\n                            <div class=\"vexa-item-timer\" data-timer=\"${index}\">\n                                <div class=\"timer-days\" data-days=\"${index}\"><\/div>\n                                <div class=\"timer-time\">\n                                    <span class=\"box\" data-h=\"${index}\">\u06f0\u06f0<\/span>\n                                    <span class=\"sep\">:<\/span>\n                                    <span class=\"box\" data-m=\"${index}\">\u06f0\u06f0<\/span>\n                                    <span class=\"sep\">:<\/span>\n                                    <span class=\"box\" data-s=\"${index}\">\u06f0\u06f0<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"vexa-golden-card-body\">\n                            <div class=\"vexa-golden-card-title\">${p.title}<\/div>\n                            <div class=\"vexa-limited-badge\">\ud83d\udd25 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0639\u062f\u062f \u062f\u0631 \u062a\u062e\u0641\u06cc\u0641<\/div>\n                            <div class=\"vexa-golden-price-row\">\n                                <div class=\"vexa-golden-old-price-line\">\n                                    <span class=\"vexa-golden-old-price\">${p.oldPrice}<\/span>\n                                    <span class=\"vexa-golden-percent\">${p.percent}<\/span>\n                                <\/div>\n                                <div class=\"vexa-golden-new-price\">${p.newPrice} <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/a>\n                `;\n            }).join('');\n\n            products.forEach((p, index) => {\n                const img = track.querySelector(`[data-img=\"${index}\"]`);\n                const wrap = track.querySelector(`[data-imgwrap=\"${index}\"]`);\n                if (!img) return;\n                const onReady = () => {\n                    img.classList.add('loaded');\n                    if (wrap) wrap.classList.remove('loading');\n                };\n                if (img.complete) onReady();\n                else {\n                    img.addEventListener('load', onReady);\n                    img.addEventListener('error', onReady);\n                }\n            });\n\n        }\n\n        function getClosestFutureProduct() {\n            const now = Date.now();\n            let closest = null;\n            let minDiff = Infinity;\n            for (const p of products) {\n                const diff = p.dealStartsAt - now;\n                if (diff > 0 && diff < minDiff) {\n                    minDiff = diff;\n                    closest = p;\n                }\n            }\n            return closest;\n        }\n\n        function updateSidebar() {\n            const closest = getClosestFutureProduct();\n\n            const hoursEl = document.getElementById('vexaSideHours');\n            const minsEl = document.getElementById('vexaSideMinutes');\n            const secsEl = document.getElementById('vexaSideSeconds');\n            const detailLink = document.getElementById('vexaDetailLink');\n\n            const mStatusEl = document.getElementById('vexaMobileStatus');\n            const mHoursEl = document.getElementById('vexaMobileHours');\n            const mMinsEl = document.getElementById('vexaMobileMinutes');\n            const mSecsEl = document.getElementById('vexaMobileSeconds');\n            const mDetailLink = document.getElementById('vexaMobileDetailLink');\n\n            if (!closest) {\n                hoursEl.textContent = '\u06f0\u06f0';\n                minsEl.textContent = '\u06f0\u06f0';\n                secsEl.textContent = '\u06f0\u06f0';\n                detailLink.href = '#';\n\n                mStatusEl.textContent = '\u0647\u0645\u0647 \u062a\u062e\u0641\u06cc\u0641\u200c\u0647\u0627 \u0641\u0639\u0627\u0644 \ud83c\udf89';\n                mHoursEl.textContent = '\u06f0\u06f0';\n                mMinsEl.textContent = '\u06f0\u06f0';\n                mSecsEl.textContent = '\u06f0\u06f0';\n                mDetailLink.href = '#';\n                return;\n            }\n\n            detailLink.href = closest.link || '#';\n            mDetailLink.href = closest.link || '#';\n\n            const diff = closest.dealStartsAt - Date.now();\n            if (diff <= 0) {\n                hoursEl.textContent = '\u06f0\u06f0';\n                minsEl.textContent = '\u06f0\u06f0';\n                secsEl.textContent = '\u06f0\u06f0';\n\n                mStatusEl.textContent = '\u0647\u0645\u200c\u0627\u06a9\u0646\u0648\u0646 \u0641\u0639\u0627\u0644 \u2705';\n                mHoursEl.textContent = '\u06f0\u06f0';\n                mMinsEl.textContent = '\u06f0\u06f0';\n                mSecsEl.textContent = '\u06f0\u06f0';\n                return;\n            }\n\n            const totalHours = Math.floor(diff \/ 3600000);\n            const remAfterHours = diff - totalHours * 3600000;\n            const sideMinutes = Math.floor(remAfterHours \/ 60000);\n            const sideSeconds = Math.floor((remAfterHours - sideMinutes * 60000) \/ 1000);\n            hoursEl.textContent = pad(totalHours);\n            minsEl.textContent = pad(sideMinutes);\n            secsEl.textContent = pad(sideSeconds);\n\n            const days = Math.floor(diff \/ 86400000);\n            const rem = diff - days * 86400000;\n            const hours = Math.floor(rem \/ 3600000);\n            const rem2 = rem - hours * 3600000;\n            const minutes = Math.floor(rem2 \/ 60000);\n            const seconds = Math.floor((rem2 - minutes * 60000) \/ 1000);\n            const daysText = days > 0 ? (toFa(days) + ' \u0631\u0648\u0632') : '';\n\n            mStatusEl.textContent = daysText ? (daysText + ' \u062a\u0627 \u0634\u0631\u0648\u0639 \u0628\u0639\u062f\u06cc \u23f3') : '\u062a\u0627 \u0634\u0631\u0648\u0639 \u062a\u062e\u0641\u06cc\u0641 \u23f3';\n            mHoursEl.textContent = pad(hours);\n            mMinsEl.textContent = pad(minutes);\n            mSecsEl.textContent = pad(seconds);\n        }\n\n        function updateItemTimers() {\n            const now = Date.now();\n            products.forEach((p, index) => {\n                const card = track.querySelector(`.vexa-golden-card[data-index=\"${index}\"]`);\n                if (!card) return;\n\n                const timerEl = card.querySelector('[data-timer]');\n                const daysEl = card.querySelector('[data-days]');\n                const hEl = card.querySelector('[data-h]');\n                const mEl = card.querySelector('[data-m]');\n                const sEl = card.querySelector('[data-s]');\n\n                if (!timerEl || !daysEl) return;\n\n                const diff = p.dealStartsAt - now;\n\n                if (diff <= 0) {\n                    daysEl.textContent = '\u0641\u0639\u0627\u0644 \u2705';\n                    hEl.textContent = '\u06f0\u06f0';\n                    mEl.textContent = '\u06f0\u06f0';\n                    sEl.textContent = '\u06f0\u06f0';\n                    timerEl.classList.remove('urgent', 'ended');\n                    return;\n                }\n\n                const days = Math.floor(diff \/ 86400000);\n                const rem = diff - days * 86400000;\n                const hours = Math.floor(rem \/ 3600000);\n                const rem2 = rem - hours * 3600000;\n                const minutes = Math.floor(rem2 \/ 60000);\n                const seconds = Math.floor((rem2 - minutes * 60000) \/ 1000);\n\n                daysEl.textContent = days > 0 ? (toFa(days) + ' \u0631\u0648\u0632') : '';\n\n                hEl.textContent = pad(hours);\n                mEl.textContent = pad(minutes);\n                sEl.textContent = pad(seconds);\n\n                if (diff < 3600000) {\n                    timerEl.classList.add('urgent');\n                } else {\n                    timerEl.classList.remove('urgent');\n                }\n            });\n        }\n\n        function tick() {\n            updateSidebar();\n            updateItemTimers();\n\n            const newSorted = sortProductsByClosest(productsRaw);\n            let changed = false;\n            if (newSorted.length !== products.length) changed = true;\n            else {\n                for (let i = 0; i < products.length; i++) {\n                    if (newSorted[i].dealStartsAt !== products[i].dealStartsAt) {\n                        changed = true;\n                        break;\n                    }\n                }\n            }\n            if (changed) {\n                products = newSorted;\n                renderCards();\n                updateItemTimers();\n                updateSidebar();\n                refreshNavState();\n            }\n        }\n\n        const prevBtn = document.querySelector('.vexa-golden-nav.prev');\n        const nextBtn = document.querySelector('.vexa-golden-nav.next');\n\n        function getScrollStep() {\n            const firstCard = track.querySelector('.vexa-golden-card');\n            return firstCard ? firstCard.offsetWidth + 14 : 220;\n        }\n\n        function refreshNavState() {\n            const maxScroll = track.scrollWidth - track.clientWidth;\n            const atStart = Math.abs(track.scrollLeft) < 4;\n            const atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 4;\n            if (prevBtn) prevBtn.disabled = atEnd;\n            if (nextBtn) nextBtn.disabled = atStart;\n        }\n\n        if (prevBtn) {\n            prevBtn.addEventListener('click', () => {\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\n            });\n        }\n        if (nextBtn) {\n            nextBtn.addEventListener('click', () => {\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\n            });\n        }\n\n        let scrollRaf = null;\n        track.addEventListener('scroll', () => {\n            if (scrollRaf) return;\n            scrollRaf = requestAnimationFrame(() => {\n                refreshNavState();\n                scrollRaf = null;\n            });\n        }, { passive: true });\n\n        track.setAttribute('tabindex', '0');\n        track.addEventListener('keydown', (e) => {\n            if (e.key === 'ArrowRight') {\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\n                e.preventDefault();\n            } else if (e.key === 'ArrowLeft') {\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\n                e.preventDefault();\n            }\n        });\n\n        renderCards();\n        tick();\n        setInterval(tick, 1000);\n        refreshNavState();\n        window.addEventListener('resize', refreshNavState);\n\n    })();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31f22b0 e-flex e-con-boxed e-con e-parent\" data-id=\"31f22b0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-241f89b elementor-widget elementor-widget-html\" data-id=\"241f89b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     \u06a9\u0627\u0631\u0648\u0633\u0644 \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u2013 UI \u062e\u0627\u0644\u0635\r\n     \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ============================================\r\n       \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0627\u0631\u0648\u0633\u0644 \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u0647\u0627 (\u0641\u0642\u0637 UI)\r\n       ============================================ *\/\r\n    .vexa-bestseller-ui {\r\n        --bs-primary: #2d3436;\r\n        --bs-accent: #e17055;\r\n        --bs-bg: #ffffff;\r\n        --bs-radius: 16px;\r\n        --bs-shadow: 0 4px 20px rgba(0,0,0,0.06);\r\n        --bs-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        --card-w: clamp(140px, 22vw, 200px);\r\n\r\n        direction: rtl;\r\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\r\n        max-width: 1200px;\r\n        margin: 20px auto;\r\n        padding: 16px 0;\r\n        position: relative;\r\n    }\r\n\r\n    .vexa-bestseller-ui * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    \/* \u0647\u062f\u0631 *\/\r\n    .vexa-bs-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 0 8px 16px 8px;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-bs-title {\r\n        font-size: 20px;\r\n        font-weight: 800;\r\n        color: var(--bs-primary);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-bs-title span {\r\n        background: var(--bs-accent);\r\n        color: #fff;\r\n        font-size: 12px;\r\n        padding: 2px 12px;\r\n        border-radius: 20px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .vexa-bs-all {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--bs-accent);\r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        transition: var(--bs-transition);\r\n    }\r\n\r\n    .vexa-bs-all:hover {\r\n        color: #c0392b;\r\n        transform: translateX(-4px);\r\n    }\r\n\r\n    .vexa-bs-all svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    \/* \u06a9\u0627\u0631\u0648\u0633\u0644 *\/\r\n    .vexa-bs-track-wrap {\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-bs-track {\r\n        display: flex;\r\n        gap: 14px;\r\n        overflow-x: auto;\r\n        scroll-snap-type: x proximity;\r\n        scroll-behavior: smooth;\r\n        padding: 4px 2px 12px;\r\n        scrollbar-width: none;\r\n        -webkit-overflow-scrolling: touch;\r\n        direction: rtl;\r\n    }\r\n\r\n    .vexa-bs-track::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    \/* \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 *\/\r\n    .vexa-bs-card {\r\n        scroll-snap-align: start;\r\n        flex: 0 0 var(--card-w);\r\n        background: var(--bs-bg);\r\n        border-radius: var(--bs-radius);\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        color: var(--bs-primary);\r\n        box-shadow: var(--bs-shadow);\r\n        transition: transform var(--bs-transition), box-shadow var(--bs-transition);\r\n        border: 1px solid rgba(0,0,0,0.04);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-bs-card:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 32px rgba(0,0,0,0.10);\r\n        }\r\n        .vexa-bs-card:hover .vexa-bs-img img {\r\n            transform: scale(1.04);\r\n        }\r\n    }\r\n\r\n    .vexa-bs-img {\r\n        position: relative;\r\n        background: #f8f9fa;\r\n        aspect-ratio: 1\/1;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-bs-img img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform var(--bs-transition);\r\n    }\r\n\r\n    .vexa-bs-rank {\r\n        position: absolute;\r\n        top: 8px;\r\n        right: 8px;\r\n        background: var(--bs-accent);\r\n        color: #fff;\r\n        font-size: 11px;\r\n        font-weight: 800;\r\n        width: 28px;\r\n        height: 28px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 2px 8px rgba(225, 112, 85, 0.4);\r\n    }\r\n\r\n    .vexa-bs-body {\r\n        padding: 10px 12px 12px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex: 1;\r\n    }\r\n\r\n    .vexa-bs-title-text {\r\n        font-size: 12.5px;\r\n        line-height: 1.5;\r\n        min-height: 38px;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        color: #2d3436;\r\n        font-weight: 500;\r\n        text-align: right;\r\n    }\r\n\r\n    .vexa-bs-price {\r\n        font-size: 15px;\r\n        font-weight: 700;\r\n        color: var(--bs-primary);\r\n        margin-top: auto;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 4px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .vexa-bs-price small {\r\n        font-size: 10.5px;\r\n        font-weight: 400;\r\n        color: #888;\r\n    }\r\n\r\n    .vexa-bs-price .sale {\r\n        color: var(--bs-accent);\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        margin-left: 4px;\r\n    }\r\n\r\n    .vexa-bs-price .old {\r\n        font-size: 11px;\r\n        color: #999;\r\n        text-decoration: line-through;\r\n        font-weight: 400;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e) *\/\r\n    .vexa-bs-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 32px;\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        border: none;\r\n        background: rgba(255,255,255,0.92);\r\n        backdrop-filter: blur(4px);\r\n        color: var(--bs-primary);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 4;\r\n        box-shadow: 0 2px 12px rgba(0,0,0,0.08);\r\n        transition: var(--bs-transition);\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        padding: 0;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-bs-track-wrap:hover .vexa-bs-nav {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n        .vexa-bs-nav:hover {\r\n            background: #fff;\r\n            transform: translateY(-50%) scale(1.06);\r\n            box-shadow: 0 4px 16px rgba(0,0,0,0.12);\r\n        }\r\n    }\r\n\r\n    .vexa-bs-nav:disabled {\r\n        opacity: 0 !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    .vexa-bs-nav svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    .vexa-bs-nav.prev {\r\n        left: 4px;\r\n    }\r\n    .vexa-bs-nav.next {\r\n        right: 4px;\r\n    }\r\n\r\n    \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n    @media (max-width: 768px) {\r\n        .vexa-bestseller-ui {\r\n            padding: 12px 0;\r\n        }\r\n        .vexa-bs-title {\r\n            font-size: 17px;\r\n        }\r\n        .vexa-bs-nav {\r\n            display: none;\r\n        }\r\n        .vexa-bs-track {\r\n            gap: 10px;\r\n            padding: 2px 0 8px;\r\n        }\r\n        :root {\r\n            --card-w: clamp(140px, 40vw, 180px);\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vexa-bs-title {\r\n            font-size: 15px;\r\n        }\r\n        .vexa-bs-title span {\r\n            font-size: 10px;\r\n            padding: 1px 10px;\r\n        }\r\n        .vexa-bs-title-text {\r\n            font-size: 11.5px;\r\n            min-height: 34px;\r\n        }\r\n        .vexa-bs-price {\r\n            font-size: 13px;\r\n        }\r\n        :root {\r\n            --card-w: clamp(120px, 44vw, 160px);\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .vexa-bs-card,\r\n        .vexa-bs-nav,\r\n        .vexa-bs-all {\r\n            transition: none !important;\r\n        }\r\n        .vexa-bs-card:hover .vexa-bs-img img {\r\n            transform: none !important;\r\n        }\r\n        .vexa-bs-track {\r\n            scroll-behavior: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"vexa-bestseller-ui\">\r\n\r\n    <!-- \u0647\u062f\u0631 -->\r\n    <div class=\"vexa-bs-header\">\r\n        <div class=\"vexa-bs-title\">\r\n            \ud83d\udd25 \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a\r\n            <span>\u06f8<\/span>\r\n        <\/div>\r\n        <a href=\"#\" class=\"vexa-bs-all\">\r\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u06a9\u0627\u0631\u0648\u0633\u0644 -->\r\n    <div class=\"vexa-bs-track-wrap\">\r\n        <button class=\"vexa-bs-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        <button class=\"vexa-bs-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <div class=\"vexa-bs-track\" id=\"vexaBsTrackUI\">\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f1 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f1\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f1<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0631\u0648\u0632\u0645\u0631\u0647 \u0645\u062f\u0644 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 9060<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f2 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/21\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f2\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f2<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0637\u0628\u06cc \u0645\u062f\u0644 \u0647\u0644\u0646\u0627 \u0628\u0646\u062f\u06cc \u062a\u0645\u0627\u0645 \u0686\u0631\u0645<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f5,\u06f5\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f3,\u06f3\u06f4\u06f8,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f3 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/26\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f3\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f3<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u067e\u06cc\u0627\u062f\u0647\u200c\u0631\u0648\u06cc \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 ASIK6787<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f1,\u06f6\u06f6\u06f0,\u06f8\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f1\u06f6\u06f2,\u06f5\u06f6\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f4 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/55\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f4\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f4<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u0641\u0648\u062a\u0633\u0627\u0644 \u0645\u062f\u0644 \u0627\u06cc\u0633 \u067e\u0631\u0648<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f5,\u06f9\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f3,\u06f5\u06f2\u06f7,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f5 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/96\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f5\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f5<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u067e\u06cc\u0627\u062f\u0647\u200c\u0631\u0648\u06cc \u062e\u0627\u0646\u0645 \u0645\u062f\u0644 \u0627\u0633\u067e\u0631\u062a \u0622\u0644\u0641\u0627<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f2,\u06f5\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f5\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f6 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/106\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f6\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f6<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u067e\u06cc\u0627\u062f\u0647\u200c\u0631\u0648\u06cc \u0632\u0646\u0627\u0646\u0647 \u067e\u0648\u06cc\u0627\u0646 \u06af\u0627\u0645 \u0645\u062f\u0644 \u067e\u06cc\u0627\u0645<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f1,\u06f6\u06f9\u06f4,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f0\u06f6\u06f7,\u06f2\u06f2\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f7 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/145\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f7\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f7<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u0648\u0631\u0632\u0634\u06cc \u0632\u0646\u0627\u0646\u0647 \u0631\u0648\u0648\u06a9\u06cc\u0633 \u0645\u062f\u0644 ON<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f7,\u06f6\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f5,\u06f7\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f8 -->\r\n            <a href=\"#\" class=\"vexa-bs-card\">\r\n                <div class=\"vexa-bs-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/168\/300\/300\" alt=\"\u0645\u062d\u0635\u0648\u0644 \u06f8\" loading=\"lazy\">\r\n                    <span class=\"vexa-bs-rank\">\u06f8<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-bs-body\">\r\n                    <div class=\"vexa-bs-title-text\">\u06a9\u0641\u0634 \u0627\u0633\u067e\u0631\u062a \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u0646\u0627\u06cc\u06a9 \u0627\u06cc\u0631 \u0645\u06a9\u0633<\/div>\r\n                    <div class=\"vexa-bs-price\">\r\n                        <span class=\"old\">\u06f3,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0627\u0631\u0648\u0633\u0644\r\n    (function() {\r\n        const track = document.getElementById('vexaBsTrackUI');\r\n        if (!track) return;\r\n\r\n        const prevBtn = document.querySelector('.vexa-bs-nav.prev');\r\n        const nextBtn = document.querySelector('.vexa-bs-nav.next');\r\n\r\n        function getStep() {\r\n            const card = track.querySelector('.vexa-bs-card');\r\n            return card ? card.offsetWidth + 14 : 180;\r\n        }\r\n\r\n        function updateNavState() {\r\n            const maxScroll = track.scrollWidth - track.clientWidth;\r\n            const atStart = Math.abs(track.scrollLeft) < 2;\r\n            const atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 2;\r\n            if (prevBtn) prevBtn.disabled = atEnd;\r\n            if (nextBtn) nextBtn.disabled = atStart;\r\n        }\r\n\r\n        if (prevBtn) {\r\n            prevBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: getStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n        if (nextBtn) {\r\n            nextBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: -getStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        let raf = null;\r\n        track.addEventListener('scroll', function() {\r\n            if (raf) return;\r\n            raf = requestAnimationFrame(function() {\r\n                updateNavState();\r\n                raf = null;\r\n            });\r\n        }, { passive: true });\r\n\r\n        updateNavState();\r\n        window.addEventListener('resize', updateNavState);\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54f9a34 e-flex e-con-boxed e-con e-parent\" data-id=\"54f9a34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec3f43b elementor-widget elementor-widget-html\" data-id=\"ec3f43b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     \u06a9\u0627\u0631\u0648\u0633\u0644 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0622\u0631\u0627\u06cc\u0634\u06cc \u0648 \u0628\u0647\u062f\u0627\u0634\u062a\u06cc \u2013 \u0646\u0633\u062e\u0647 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644 \u0648 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\r\n     \u0628\u062f\u0648\u0646 \u0647\u0627\u0648\u0631\u060c \u0628\u062f\u0648\u0646 \u0633\u062a\u0627\u0631\u0647\u060c \u0628\u062f\u0648\u0646 \u062f\u06a9\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\r\n     \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ====== \u0631\u06cc\u0633\u062a ====== *\/\r\n    .vexa-beauty-minimal * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .vexa-beauty-minimal {\r\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 24px 0;\r\n        position: relative;\r\n        direction: rtl;\r\n        color: #1a1a1a;\r\n    }\r\n\r\n    \/* ====== \u0647\u062f\u0631 ====== *\/\r\n    .vexa-beauty-minimal-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 0 4px 20px 4px;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        border-bottom: 1px solid #f0f0f0;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .vexa-beauty-minimal-title {\r\n        font-size: 20px;\r\n        font-weight: 800;\r\n        color: #1a1a1a;\r\n        letter-spacing: -0.3px;\r\n    }\r\n\r\n    .vexa-beauty-minimal-all {\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        color: #666;\r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: 0.25s ease;\r\n        padding: 6px 12px;\r\n        border-radius: 30px;\r\n        background: #f8f8f8;\r\n    }\r\n\r\n    .vexa-beauty-minimal-all:hover {\r\n        background: #1a1a1a;\r\n        color: #fff;\r\n    }\r\n\r\n    .vexa-beauty-minimal-all svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u0648\u0633\u0644 ====== *\/\r\n    .vexa-beauty-minimal-track-wrap {\r\n        position: relative;\r\n        overflow: visible;\r\n        padding: 0 2px;\r\n    }\r\n\r\n    .vexa-beauty-minimal-track {\r\n        display: flex;\r\n        gap: 20px;\r\n        overflow-x: auto;\r\n        scroll-snap-type: x proximity;\r\n        scroll-behavior: smooth;\r\n        padding: 8px 2px 20px;\r\n        scrollbar-width: none;\r\n        -webkit-overflow-scrolling: touch;\r\n        direction: rtl;\r\n    }\r\n\r\n    .vexa-beauty-minimal-track::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 ====== *\/\r\n    .vexa-beauty-minimal-card {\r\n        scroll-snap-align: start;\r\n        flex: 0 0 195px;\r\n        width: 195px;\r\n        background: #ffffff;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        color: #1a1a1a;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);\r\n        border: 1px solid #f0f0f0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        cursor: default;\r\n        position: relative;\r\n        background: #fcfcfc;\r\n        transition: none; \/* \u0628\u062f\u0648\u0646 \u0647\u0627\u0648\u0631 *\/\r\n    }\r\n\r\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\r\n    .vexa-beauty-minimal-card-img {\r\n        position: relative;\r\n        background: #f7f7f7;\r\n        aspect-ratio: 1 \/ 1;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-img img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block;\r\n        transition: none; \/* \u0628\u062f\u0648\u0646 \u0628\u0632\u0631\u06af\u200c\u0646\u0645\u0627\u06cc\u06cc *\/\r\n    }\r\n\r\n    \/* ====== \u0628\u0631\u0686\u0633\u0628 \u062a\u062e\u0641\u06cc\u0641 ====== *\/\r\n    .vexa-beauty-minimal-badge {\r\n        position: absolute;\r\n        top: 10px;\r\n        right: 10px;\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 2px 10px;\r\n        border-radius: 30px;\r\n        color: #fff;\r\n        z-index: 2;\r\n        letter-spacing: 0.3px;\r\n        background: #d32f2f;\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\r\n    .vexa-beauty-minimal-card-body {\r\n        padding: 12px 14px 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex: 1;\r\n        background: #ffffff;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-title {\r\n        font-size: 12.5px;\r\n        line-height: 1.55;\r\n        min-height: 38px;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        font-weight: 500;\r\n        color: #1a1a1a;\r\n        letter-spacing: -0.2px;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-price {\r\n        font-size: 15px;\r\n        font-weight: 700;\r\n        color: #1a1a1a;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n        padding-top: 4px;\r\n        border-top: 1px solid #f5f5f5;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-price .old {\r\n        font-size: 11px;\r\n        color: #bbb;\r\n        text-decoration: line-through;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-price .sale {\r\n        color: #d32f2f;\r\n    }\r\n\r\n    .vexa-beauty-minimal-card-price small {\r\n        font-size: 10px;\r\n        font-weight: 400;\r\n        color: #aaa;\r\n    }\r\n\r\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc ====== *\/\r\n    .vexa-beauty-minimal-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 32px;\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        border: none;\r\n        background: rgba(255, 255, 255, 0.92);\r\n        backdrop-filter: blur(4px);\r\n        color: #333;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 4;\r\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\r\n        transition: 0.25s ease;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        border: 1px solid #f0f0f0;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-beauty-minimal-track-wrap:hover .vexa-beauty-minimal-nav {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .vexa-beauty-minimal-nav:hover {\r\n            background: #fff;\r\n            transform: translateY(-50%) scale(1.05);\r\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n            border-color: #ccc;\r\n        }\r\n    }\r\n\r\n    .vexa-beauty-minimal-nav:disabled {\r\n        opacity: 0 !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    .vexa-beauty-minimal-nav svg {\r\n        width: 15px;\r\n        height: 15px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    .vexa-beauty-minimal-nav.prev {\r\n        left: -6px;\r\n    }\r\n    .vexa-beauty-minimal-nav.next {\r\n        right: -6px;\r\n    }\r\n\r\n    \/* ====== \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\u06cc\u06cc ====== *\/\r\n    @media (max-width: 768px) {\r\n        .vexa-beauty-minimal {\r\n            padding: 16px 0;\r\n        }\r\n\r\n        .vexa-beauty-minimal-title {\r\n            font-size: 17px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-nav {\r\n            display: none;\r\n        }\r\n\r\n        .vexa-beauty-minimal-track {\r\n            gap: 12px;\r\n            padding: 4px 0 12px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card {\r\n            flex: 0 0 165px;\r\n            width: 165px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card-title {\r\n            font-size: 12px;\r\n            min-height: 36px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vexa-beauty-minimal-title {\r\n            font-size: 15px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-all {\r\n            font-size: 11px;\r\n            padding: 4px 10px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card {\r\n            flex: 0 0 145px;\r\n            width: 145px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card-body {\r\n            padding: 10px 10px 12px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card-title {\r\n            font-size: 11px;\r\n            min-height: 32px;\r\n        }\r\n\r\n        .vexa-beauty-minimal-card-price {\r\n            font-size: 13px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 360px) {\r\n        .vexa-beauty-minimal-card {\r\n            flex: 0 0 125px;\r\n            width: 125px;\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .vexa-beauty-minimal-track {\r\n            scroll-behavior: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"vexa-beauty-minimal\">\r\n\r\n    <!-- \u0647\u062f\u0631 -->\r\n    <div class=\"vexa-beauty-minimal-header\">\r\n        <div class=\"vexa-beauty-minimal-title\">\u0622\u0631\u0627\u06cc\u0634\u06cc \u0648 \u0628\u0647\u062f\u0627\u0634\u062a\u06cc<\/div>\r\n        <a href=\"#\" class=\"vexa-beauty-minimal-all\">\r\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u06a9\u0627\u0631\u0648\u0633\u0644 -->\r\n    <div class=\"vexa-beauty-minimal-track-wrap\">\r\n\r\n        <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc -->\r\n        <button class=\"vexa-beauty-minimal-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        <button class=\"vexa-beauty-minimal-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <!-- \u0645\u062d\u0635\u0648\u0644\u0627\u062a -->\r\n        <div class=\"vexa-beauty-minimal-track\" id=\"vexaBeautyMinimalTrack\">\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f1 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1\/300\/300\" alt=\"\u0631\u0698 \u0644\u0628 \u0645\u0627\u062a\" loading=\"lazy\">\r\n                    <span class=\"vexa-beauty-minimal-badge\">\u06f3\u06f0\u066a<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u0631\u0698 \u0644\u0628 \u0645\u0627\u062a \u0645\u0627\u0646\u062f\u06af\u0627\u0631 \u0648\u0644\u0648\u0648\u062a<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\r\n                        <span class=\"old\">\u06f2\u06f5\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1\u06f7\u06f5,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f2 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/21\/300\/300\" alt=\"\u06a9\u0631\u0645 \u067e\u0648\u062f\u0631\" loading=\"lazy\">\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u06a9\u0631\u0645 \u067e\u0648\u062f\u0631 \u0645\u0627\u06cc\u0639 \u067e\u0648\u0634\u0634 \u06a9\u0627\u0645\u0644<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\u06f3\u06f2\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f3 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/26\/300\/300\" alt=\"\u0631\u06cc\u0645\u0644\" loading=\"lazy\">\r\n                    <span class=\"vexa-beauty-minimal-badge\">\u06f2\u06f0\u066a<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u0631\u06cc\u0645\u0644 \u062d\u062c\u0645\u200c\u062f\u0647\u0646\u062f\u0647 \u0636\u062f \u0622\u0628<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\r\n                        <span class=\"old\">\u06f1\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1\u06f4\u06f4,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f4 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/55\/300\/300\" alt=\"\u067e\u0627\u0644\u062a \u0633\u0627\u06cc\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-beauty-minimal-badge\">\u06f2\u06f0\u066a<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u067e\u0627\u0644\u062a \u0633\u0627\u06cc\u0647 \u0686\u0634\u0645 \u06f1\u06f2 \u0631\u0646\u06af<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\r\n                        <span class=\"old\">\u06f4\u06f5\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f3\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f5 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/96\/300\/300\" alt=\"\u06a9\u0631\u0645 \u0645\u0631\u0637\u0648\u0628\u200c\u06a9\u0646\u0646\u062f\u0647\" loading=\"lazy\">\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u06a9\u0631\u0645 \u0645\u0631\u0637\u0648\u0628\u200c\u06a9\u0646\u0646\u062f\u0647 \u0622\u0628\u0631\u0633\u0627\u0646<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\u06f2\u06f9\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f6 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/106\/300\/300\" alt=\"\u062e\u0637 \u0686\u0634\u0645\" loading=\"lazy\">\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u062e\u0637 \u0686\u0634\u0645 \u0645\u0627\u06cc\u0639 \u0636\u062f \u0622\u0628<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\u06f1\u06f5\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f7 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/145\/300\/300\" alt=\"\u062a\u0648\u0646\u0631\" loading=\"lazy\">\r\n                    <span class=\"vexa-beauty-minimal-badge\">\u06f1\u06f5\u066a<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u062a\u0648\u0646\u0631 \u067e\u0627\u06a9\u200c\u06a9\u0646\u0646\u062f\u0647 \u0645\u0646\u0642\u0628\u0636\u200c\u06a9\u0646\u0646\u062f\u0647<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\r\n                        <span class=\"old\">\u06f2\u06f2\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1\u06f8\u06f7,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f8 -->\r\n            <div class=\"vexa-beauty-minimal-card\">\r\n                <div class=\"vexa-beauty-minimal-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/177\/300\/300\" alt=\"\u0633\u0631\u0645 \u0636\u062f\u0686\u0631\u0648\u06a9\" loading=\"lazy\">\r\n                <\/div>\r\n                <div class=\"vexa-beauty-minimal-card-body\">\r\n                    <div class=\"vexa-beauty-minimal-card-title\">\u0633\u0631\u0645 \u0636\u062f\u0686\u0631\u0648\u06a9 \u0648 \u0644\u06cc\u0641\u062a\u06cc\u0646\u06af<\/div>\r\n                    <div class=\"vexa-beauty-minimal-card-price\">\u06f4\u06f8\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div><!-- \/track -->\r\n    <\/div><!-- \/track-wrap -->\r\n<\/div><!-- \/vexa-beauty-minimal -->\r\n\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        var track = document.getElementById('vexaBeautyMinimalTrack');\r\n        if (!track) return;\r\n\r\n        var prevBtn = document.querySelector('.vexa-beauty-minimal-nav.prev');\r\n        var nextBtn = document.querySelector('.vexa-beauty-minimal-nav.next');\r\n\r\n        function getScrollStep() {\r\n            var firstCard = track.querySelector('.vexa-beauty-minimal-card');\r\n            return firstCard ? firstCard.offsetWidth + 20 : 200;\r\n        }\r\n\r\n        function refreshNavState() {\r\n            if (!prevBtn || !nextBtn) return;\r\n            var maxScroll = track.scrollWidth - track.clientWidth;\r\n            var atStart = Math.abs(track.scrollLeft) < 3;\r\n            var atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 3;\r\n            prevBtn.disabled = atEnd;\r\n            nextBtn.disabled = atStart;\r\n        }\r\n\r\n        if (prevBtn) {\r\n            prevBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        if (nextBtn) {\r\n            nextBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        var raf = null;\r\n        track.addEventListener('scroll', function() {\r\n            if (raf) return;\r\n            raf = requestAnimationFrame(function() {\r\n                refreshNavState();\r\n                raf = null;\r\n            });\r\n        }, { passive: true });\r\n\r\n        track.setAttribute('tabindex', '0');\r\n        track.addEventListener('keydown', function(e) {\r\n            var step = getScrollStep();\r\n            if (e.key === 'ArrowRight') {\r\n                track.scrollBy({ left: step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            } else if (e.key === 'ArrowLeft') {\r\n                track.scrollBy({ left: -step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            }\r\n        });\r\n\r\n        refreshNavState();\r\n        window.addEventListener('resize', refreshNavState);\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a27fce7 e-flex e-con-boxed e-con e-parent\" data-id=\"a27fce7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d17cce0 elementor-widget elementor-widget-html\" data-id=\"d17cce0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     \u06a9\u0627\u0631\u0648\u0633\u0644 \u067e\u0648\u0634\u0627\u06a9 \u0632\u0646\u0627\u0646\u0647 \u2013 UI \u062e\u0627\u0644\u0635\r\n     \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ====== \u0631\u06cc\u0633\u062a ====== *\/\r\n    .vexa-women-ui * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .vexa-women-ui {\r\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 20px 0;\r\n        position: relative;\r\n        direction: rtl;\r\n    }\r\n\r\n    \/* ====== \u0647\u062f\u0631 ====== *\/\r\n    .vexa-women-ui-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 0 8px 20px 8px;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-women-ui-title {\r\n        font-size: 22px;\r\n        font-weight: 800;\r\n        color: #2d1b1b;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-women-ui-title span {\r\n        background: #e8437e;\r\n        color: #fff;\r\n        font-size: 12px;\r\n        padding: 3px 14px;\r\n        border-radius: 30px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.3px;\r\n    }\r\n\r\n    .vexa-women-ui-all {\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        color: #e8437e;\r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: 0.25s ease;\r\n    }\r\n\r\n    .vexa-women-ui-all:hover {\r\n        color: #c0396b;\r\n        transform: translateX(-4px);\r\n    }\r\n\r\n    .vexa-women-ui-all svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u0648\u0633\u0644 ====== *\/\r\n    .vexa-women-ui-track-wrap {\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-women-ui-track {\r\n        display: flex;\r\n        gap: 18px;\r\n        overflow-x: auto;\r\n        scroll-snap-type: x proximity;\r\n        scroll-behavior: smooth;\r\n        padding: 6px 4px 16px;\r\n        scrollbar-width: none;\r\n        -webkit-overflow-scrolling: touch;\r\n        direction: rtl;\r\n    }\r\n\r\n    .vexa-women-ui-track::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 ====== *\/\r\n    .vexa-women-ui-card {\r\n        scroll-snap-align: start;\r\n        flex: 0 0 200px;\r\n        background: #ffffff;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        color: #1e1e1e;\r\n        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);\r\n        border: 1px solid rgba(232, 67, 126, 0.06);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        cursor: default;\r\n        position: relative;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-women-ui-card:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 32px rgba(232, 67, 126, 0.10);\r\n            border-color: rgba(232, 67, 126, 0.15);\r\n        }\r\n    }\r\n\r\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\r\n    .vexa-women-ui-card-img {\r\n        position: relative;\r\n        background: #fdf6f4;\r\n        aspect-ratio: 1 \/ 1;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-women-ui-card-img img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .vexa-women-ui-card:hover .vexa-women-ui-card-img img {\r\n        transform: scale(1.04);\r\n    }\r\n\r\n    \/* \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 *\/\r\n    .vexa-women-ui-badge {\r\n        position: absolute;\r\n        top: 10px;\r\n        right: 10px;\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 3px 12px;\r\n        border-radius: 30px;\r\n        color: #fff;\r\n        z-index: 2;\r\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .vexa-women-ui-badge.sale {\r\n        background: linear-gradient(135deg, #e8437e, #d6336c);\r\n    }\r\n\r\n    .vexa-women-ui-badge.new {\r\n        background: linear-gradient(135deg, #00b894, #00a381);\r\n    }\r\n\r\n    .vexa-women-ui-badge.best {\r\n        background: linear-gradient(135deg, #fdcb6e, #f9a825);\r\n        color: #2d1b1b;\r\n    }\r\n\r\n    .vexa-women-ui-badge.collection {\r\n        background: linear-gradient(135deg, #6c5ce7, #a29bfe);\r\n    }\r\n\r\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\r\n    .vexa-women-ui-card-body {\r\n        padding: 12px 14px 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex: 1;\r\n    }\r\n\r\n    .vexa-women-ui-card-title {\r\n        font-size: 13px;\r\n        line-height: 1.5;\r\n        min-height: 40px;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        font-weight: 500;\r\n        color: #2d1b1b;\r\n    }\r\n\r\n    .vexa-women-ui-card-rating {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        font-size: 12px;\r\n        color: #f9a825;\r\n    }\r\n\r\n    .vexa-women-ui-card-rating span {\r\n        color: #999;\r\n        font-size: 11px;\r\n        margin-right: 4px;\r\n    }\r\n\r\n    .vexa-women-ui-card-price {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: #1e1e1e;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 6px;\r\n        flex-wrap: wrap;\r\n        margin-top: auto;\r\n    }\r\n\r\n    .vexa-women-ui-card-price .old {\r\n        font-size: 12px;\r\n        color: #aaa;\r\n        text-decoration: line-through;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .vexa-women-ui-card-price .sale {\r\n        color: #e8437e;\r\n    }\r\n\r\n    .vexa-women-ui-card-price small {\r\n        font-size: 10.5px;\r\n        font-weight: 400;\r\n        color: #999;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f *\/\r\n    .vexa-women-ui-add {\r\n        margin-top: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        padding: 8px 0;\r\n        background: #fdf0ee;\r\n        border-radius: 40px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: #e8437e;\r\n        transition: 0.25s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n        width: 100%;\r\n        font-family: inherit;\r\n    }\r\n\r\n    .vexa-women-ui-add:hover {\r\n        background: #e8437e;\r\n        color: #fff;\r\n    }\r\n\r\n    .vexa-women-ui-add svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2;\r\n        transition: 0.2s;\r\n    }\r\n\r\n    .vexa-women-ui-add:hover svg {\r\n        stroke: #fff;\r\n    }\r\n\r\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e) ====== *\/\r\n    .vexa-women-ui-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 34px;\r\n        height: 34px;\r\n        border-radius: 50%;\r\n        border: none;\r\n        background: rgba(255, 255, 255, 0.92);\r\n        backdrop-filter: blur(4px);\r\n        color: #2d1b1b;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 4;\r\n        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);\r\n        transition: 0.25s ease;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        border: 1px solid rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-women-ui-track-wrap:hover .vexa-women-ui-nav {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n        .vexa-women-ui-nav:hover {\r\n            background: #fff;\r\n            transform: translateY(-50%) scale(1.06);\r\n            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);\r\n            border-color: #e8437e;\r\n            color: #e8437e;\r\n        }\r\n    }\r\n\r\n    .vexa-women-ui-nav:disabled {\r\n        opacity: 0 !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    .vexa-women-ui-nav svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    .vexa-women-ui-nav.prev {\r\n        left: 4px;\r\n    }\r\n    .vexa-women-ui-nav.next {\r\n        right: 4px;\r\n    }\r\n\r\n    \/* ====== \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\u06cc\u06cc ====== *\/\r\n    @media (max-width: 768px) {\r\n        .vexa-women-ui {\r\n            padding: 12px 0;\r\n        }\r\n        .vexa-women-ui-title {\r\n            font-size: 18px;\r\n        }\r\n        .vexa-women-ui-nav {\r\n            display: none;\r\n        }\r\n        .vexa-women-ui-track {\r\n            gap: 12px;\r\n            padding: 4px 0 12px;\r\n        }\r\n        .vexa-women-ui-card {\r\n            flex: 0 0 170px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vexa-women-ui-title {\r\n            font-size: 16px;\r\n        }\r\n        .vexa-women-ui-title span {\r\n            font-size: 10px;\r\n            padding: 2px 10px;\r\n        }\r\n        .vexa-women-ui-card {\r\n            flex: 0 0 150px;\r\n        }\r\n        .vexa-women-ui-card-title {\r\n            font-size: 12px;\r\n            min-height: 36px;\r\n        }\r\n        .vexa-women-ui-card-price {\r\n            font-size: 14px;\r\n        }\r\n        .vexa-women-ui-add {\r\n            font-size: 11px;\r\n            padding: 6px 0;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 360px) {\r\n        .vexa-women-ui-card {\r\n            flex: 0 0 130px;\r\n        }\r\n        .vexa-women-ui-card-body {\r\n            padding: 8px 10px 10px;\r\n        }\r\n        .vexa-women-ui-card-title {\r\n            font-size: 11px;\r\n            min-height: 32px;\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .vexa-women-ui-card,\r\n        .vexa-women-ui-nav,\r\n        .vexa-women-ui-all,\r\n        .vexa-women-ui-add {\r\n            transition: none !important;\r\n        }\r\n        .vexa-women-ui-card:hover .vexa-women-ui-card-img img {\r\n            transform: none !important;\r\n        }\r\n        .vexa-women-ui-track {\r\n            scroll-behavior: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"vexa-women-ui\">\r\n\r\n    <!-- \u0647\u062f\u0631 -->\r\n    <div class=\"vexa-women-ui-header\">\r\n        <div class=\"vexa-women-ui-title\">\r\n            \ud83d\udc57 \u067e\u0648\u0634\u0627\u06a9 \u0632\u0646\u0627\u0646\u0647\r\n            <span>\u062c\u062f\u06cc\u062f<\/span>\r\n        <\/div>\r\n        <a href=\"#\" class=\"vexa-women-ui-all\">\r\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u06a9\u0627\u0631\u0648\u0633\u0644 -->\r\n    <div class=\"vexa-women-ui-track-wrap\">\r\n\r\n        <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc -->\r\n        <button class=\"vexa-women-ui-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        <button class=\"vexa-women-ui-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <!-- \u0645\u062d\u0635\u0648\u0644\u0627\u062a -->\r\n        <div class=\"vexa-women-ui-track\" id=\"vexaWomenUITrack\">\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f1 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1\/300\/300\" alt=\"\u0644\u0628\u0627\u0633 \u0645\u062c\u0644\u0633\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge sale\">\u06f3\u06f5\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u0644\u0628\u0627\u0633 \u0645\u062c\u0644\u0633\u06cc \u0628\u0644\u0646\u062f \u0645\u062f\u0644 \u0627\u0628\u0631\u06cc\u0634\u0645\u06cc<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f2\u06f3\u06f4)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\r\n                        <span class=\"old\">\u06f3,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f0\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f2 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/21\/300\/300\" alt=\"\u0628\u0644\u0648\u0632 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u0628\u0644\u0648\u0632 \u0632\u0646\u0627\u0646\u0647 \u0637\u0631\u062d \u06af\u0644\u200c\u062f\u0627\u0631 \u0622\u0633\u062a\u06cc\u0646 \u0628\u0644\u0646\u062f<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f6\u06f7)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\u06f8\u06f9\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f3 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/26\/300\/300\" alt=\"\u062f\u0627\u0645\u0646 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u062f\u0627\u0645\u0646 \u0645\u06cc\u062f\u06cc \u067e\u0644\u06cc\u0633\u0647 \u0645\u062f\u0644 \u0634\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f3\u06f1\u06f2)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\r\n                        <span class=\"old\">\u06f1,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f9\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f4 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/55\/300\/300\" alt=\"\u06a9\u062a \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge collection\">\u06a9\u0644\u06a9\u0633\u06cc\u0648\u0646<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u06a9\u062a \u0632\u0646\u0627\u0646\u0647 \u067e\u0634\u0645\u06cc \u0645\u062c\u0644\u0633\u06cc \u0645\u062f\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f4\u06f5)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\r\n                        <span class=\"old\">\u06f4,\u06f5\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f3,\u06f6\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f5 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/96\/300\/300\" alt=\"\u0634\u0644\u0648\u0627\u0631 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u0634\u0644\u0648\u0627\u0631 \u067e\u0627\u0631\u0686\u0647\u200c\u0627\u06cc \u0632\u0646\u0627\u0646\u0647 \u0645\u062f\u0644 \u0627\u0633\u0644\u0634<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f9\u06f8)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\u06f6\u06f5\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f6 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/106\/300\/300\" alt=\"\u06a9\u06cc\u0641 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u06a9\u06cc\u0641 \u062f\u0633\u062a\u06cc \u0686\u0631\u0645 \u0637\u0628\u06cc\u0639\u06cc \u0645\u062f\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f2\u06f8\u06f7)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\r\n                        <span class=\"old\">\u06f2,\u06f8\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f2\u06f4\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f7 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/145\/300\/300\" alt=\"\u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge sale\">\u06f2\u06f0\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u06a9\u0641\u0634 \u067e\u0627\u0634\u0646\u0647 \u0628\u0644\u0646\u062f \u0645\u062c\u0644\u0633\u06cc \u0645\u062f\u0644 \u0627\u0633\u067e\u0631\u062a<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f8\u06f6)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\r\n                        <span class=\"old\">\u06f1,\u06f6\u06f5\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f3\u06f2\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f8 -->\r\n            <div class=\"vexa-women-ui-card\">\r\n                <div class=\"vexa-women-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/177\/300\/300\" alt=\"\u0634\u0627\u0644 \u0632\u0646\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-women-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-women-ui-card-body\">\r\n                    <div class=\"vexa-women-ui-card-title\">\u0634\u0627\u0644 \u0648 \u0631\u0648\u0633\u0631\u06cc \u0627\u0628\u0631\u06cc\u0634\u0645\u06cc \u0637\u0631\u062d \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-women-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f7\u06f6)<\/span><\/div>\r\n                    <div class=\"vexa-women-ui-card-price\">\u06f4\u06f8\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-women-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div><!-- \/track -->\r\n    <\/div><!-- \/track-wrap -->\r\n<\/div><!-- \/vexa-women-ui -->\r\n\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        var track = document.getElementById('vexaWomenUITrack');\r\n        if (!track) return;\r\n\r\n        var prevBtn = document.querySelector('.vexa-women-ui-nav.prev');\r\n        var nextBtn = document.querySelector('.vexa-women-ui-nav.next');\r\n\r\n        function getScrollStep() {\r\n            var firstCard = track.querySelector('.vexa-women-ui-card');\r\n            return firstCard ? firstCard.offsetWidth + 18 : 200;\r\n        }\r\n\r\n        function refreshNavState() {\r\n            var maxScroll = track.scrollWidth - track.clientWidth;\r\n            var atStart = Math.abs(track.scrollLeft) < 3;\r\n            var atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 3;\r\n            if (prevBtn) prevBtn.disabled = atEnd;\r\n            if (nextBtn) nextBtn.disabled = atStart;\r\n        }\r\n\r\n        if (prevBtn) {\r\n            prevBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        if (nextBtn) {\r\n            nextBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        var raf = null;\r\n        track.addEventListener('scroll', function() {\r\n            if (raf) return;\r\n            raf = requestAnimationFrame(function() {\r\n                refreshNavState();\r\n                raf = null;\r\n            });\r\n        }, { passive: true });\r\n\r\n        \/\/ \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u06a9\u06cc\u0628\u0648\u0631\u062f\r\n        track.setAttribute('tabindex', '0');\r\n        track.addEventListener('keydown', function(e) {\r\n            var step = getScrollStep();\r\n            if (e.key === 'ArrowRight') {\r\n                track.scrollBy({ left: step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            } else if (e.key === 'ArrowLeft') {\r\n                track.scrollBy({ left: -step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            }\r\n        });\r\n\r\n        refreshNavState();\r\n        window.addEventListener('resize', refreshNavState);\r\n\r\n        \/\/ \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f (\u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645)\r\n        document.querySelectorAll('.vexa-women-ui-add').forEach(function(btn) {\r\n            btn.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                var originalText = btn.innerHTML;\r\n                btn.innerHTML = '\u2705 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f';\r\n                btn.style.background = '#00b894';\r\n                btn.style.color = '#fff';\r\n                setTimeout(function() {\r\n                    btn.innerHTML = originalText;\r\n                    btn.style.background = '';\r\n                    btn.style.color = '';\r\n                }, 2000);\r\n            });\r\n        });\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b2d2d0 e-flex e-con-boxed e-con e-parent\" data-id=\"9b2d2d0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a2dab0 elementor-widget elementor-widget-html\" data-id=\"8a2dab0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     \u06a9\u0627\u0631\u0648\u0633\u0644 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u0632\u0634\u06cc \u2013 UI \u062e\u0627\u0644\u0635\r\n     \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ====== \u0631\u06cc\u0633\u062a ====== *\/\r\n    .vexa-sport-ui * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .vexa-sport-ui {\r\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 20px 0;\r\n        position: relative;\r\n        direction: rtl;\r\n    }\r\n\r\n    \/* ====== \u0647\u062f\u0631 ====== *\/\r\n    .vexa-sport-ui-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 0 8px 20px 8px;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-sport-ui-title {\r\n        font-size: 22px;\r\n        font-weight: 800;\r\n        color: #1a1a2e;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-sport-ui-title span {\r\n        background: #e17055;\r\n        color: #fff;\r\n        font-size: 12px;\r\n        padding: 3px 14px;\r\n        border-radius: 30px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.3px;\r\n    }\r\n\r\n    .vexa-sport-ui-all {\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        color: #e17055;\r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: 0.25s ease;\r\n    }\r\n\r\n    .vexa-sport-ui-all:hover {\r\n        color: #c0392b;\r\n        transform: translateX(-4px);\r\n    }\r\n\r\n    .vexa-sport-ui-all svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u0648\u0633\u0644 ====== *\/\r\n    .vexa-sport-ui-track-wrap {\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-sport-ui-track {\r\n        display: flex;\r\n        gap: 18px;\r\n        overflow-x: auto;\r\n        scroll-snap-type: x proximity;\r\n        scroll-behavior: smooth;\r\n        padding: 6px 4px 16px;\r\n        scrollbar-width: none;\r\n        -webkit-overflow-scrolling: touch;\r\n        direction: rtl;\r\n    }\r\n\r\n    .vexa-sport-ui-track::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 ====== *\/\r\n    .vexa-sport-ui-card {\r\n        scroll-snap-align: start;\r\n        flex: 0 0 200px;\r\n        background: #ffffff;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        color: #1e1e1e;\r\n        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);\r\n        border: 1px solid rgba(225, 112, 85, 0.06);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        cursor: default;\r\n        position: relative;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-sport-ui-card:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 32px rgba(225, 112, 85, 0.10);\r\n            border-color: rgba(225, 112, 85, 0.15);\r\n        }\r\n    }\r\n\r\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\r\n    .vexa-sport-ui-card-img {\r\n        position: relative;\r\n        background: #f5f6fa;\r\n        aspect-ratio: 1 \/ 1;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-sport-ui-card-img img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .vexa-sport-ui-card:hover .vexa-sport-ui-card-img img {\r\n        transform: scale(1.04);\r\n    }\r\n\r\n    \/* \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 *\/\r\n    .vexa-sport-ui-badge {\r\n        position: absolute;\r\n        top: 10px;\r\n        right: 10px;\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 3px 12px;\r\n        border-radius: 30px;\r\n        color: #fff;\r\n        z-index: 2;\r\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .vexa-sport-ui-badge.sale {\r\n        background: linear-gradient(135deg, #e17055, #d63031);\r\n    }\r\n\r\n    .vexa-sport-ui-badge.new {\r\n        background: linear-gradient(135deg, #00b894, #00a381);\r\n    }\r\n\r\n    .vexa-sport-ui-badge.best {\r\n        background: linear-gradient(135deg, #fdcb6e, #f9a825);\r\n        color: #1a1a2e;\r\n    }\r\n\r\n    .vexa-sport-ui-badge.sport {\r\n        background: linear-gradient(135deg, #0984e3, #6c5ce7);\r\n    }\r\n\r\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\r\n    .vexa-sport-ui-card-body {\r\n        padding: 12px 14px 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex: 1;\r\n    }\r\n\r\n    .vexa-sport-ui-card-title {\r\n        font-size: 13px;\r\n        line-height: 1.5;\r\n        min-height: 40px;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        font-weight: 500;\r\n        color: #1a1a2e;\r\n    }\r\n\r\n    .vexa-sport-ui-card-rating {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        font-size: 12px;\r\n        color: #f9a825;\r\n    }\r\n\r\n    .vexa-sport-ui-card-rating span {\r\n        color: #999;\r\n        font-size: 11px;\r\n        margin-right: 4px;\r\n    }\r\n\r\n    .vexa-sport-ui-card-price {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: #1e1e1e;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 6px;\r\n        flex-wrap: wrap;\r\n        margin-top: auto;\r\n    }\r\n\r\n    .vexa-sport-ui-card-price .old {\r\n        font-size: 12px;\r\n        color: #aaa;\r\n        text-decoration: line-through;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .vexa-sport-ui-card-price .sale {\r\n        color: #e17055;\r\n    }\r\n\r\n    .vexa-sport-ui-card-price small {\r\n        font-size: 10.5px;\r\n        font-weight: 400;\r\n        color: #999;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f *\/\r\n    .vexa-sport-ui-add {\r\n        margin-top: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        padding: 8px 0;\r\n        background: #f0f2f5;\r\n        border-radius: 40px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: #e17055;\r\n        transition: 0.25s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n        width: 100%;\r\n        font-family: inherit;\r\n    }\r\n\r\n    .vexa-sport-ui-add:hover {\r\n        background: #e17055;\r\n        color: #fff;\r\n    }\r\n\r\n    .vexa-sport-ui-add svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2;\r\n        transition: 0.2s;\r\n    }\r\n\r\n    .vexa-sport-ui-add:hover svg {\r\n        stroke: #fff;\r\n    }\r\n\r\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e) ====== *\/\r\n    .vexa-sport-ui-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 34px;\r\n        height: 34px;\r\n        border-radius: 50%;\r\n        border: none;\r\n        background: rgba(255, 255, 255, 0.92);\r\n        backdrop-filter: blur(4px);\r\n        color: #1a1a2e;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 4;\r\n        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);\r\n        transition: 0.25s ease;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        border: 1px solid rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-sport-ui-track-wrap:hover .vexa-sport-ui-nav {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n        .vexa-sport-ui-nav:hover {\r\n            background: #fff;\r\n            transform: translateY(-50%) scale(1.06);\r\n            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);\r\n            border-color: #e17055;\r\n            color: #e17055;\r\n        }\r\n    }\r\n\r\n    .vexa-sport-ui-nav:disabled {\r\n        opacity: 0 !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    .vexa-sport-ui-nav svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    .vexa-sport-ui-nav.prev {\r\n        left: 4px;\r\n    }\r\n    .vexa-sport-ui-nav.next {\r\n        right: 4px;\r\n    }\r\n\r\n    \/* ====== \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\u06cc\u06cc ====== *\/\r\n    @media (max-width: 768px) {\r\n        .vexa-sport-ui {\r\n            padding: 12px 0;\r\n        }\r\n        .vexa-sport-ui-title {\r\n            font-size: 18px;\r\n        }\r\n        .vexa-sport-ui-nav {\r\n            display: none;\r\n        }\r\n        .vexa-sport-ui-track {\r\n            gap: 12px;\r\n            padding: 4px 0 12px;\r\n        }\r\n        .vexa-sport-ui-card {\r\n            flex: 0 0 170px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vexa-sport-ui-title {\r\n            font-size: 16px;\r\n        }\r\n        .vexa-sport-ui-title span {\r\n            font-size: 10px;\r\n            padding: 2px 10px;\r\n        }\r\n        .vexa-sport-ui-card {\r\n            flex: 0 0 150px;\r\n        }\r\n        .vexa-sport-ui-card-title {\r\n            font-size: 12px;\r\n            min-height: 36px;\r\n        }\r\n        .vexa-sport-ui-card-price {\r\n            font-size: 14px;\r\n        }\r\n        .vexa-sport-ui-add {\r\n            font-size: 11px;\r\n            padding: 6px 0;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 360px) {\r\n        .vexa-sport-ui-card {\r\n            flex: 0 0 130px;\r\n        }\r\n        .vexa-sport-ui-card-body {\r\n            padding: 8px 10px 10px;\r\n        }\r\n        .vexa-sport-ui-card-title {\r\n            font-size: 11px;\r\n            min-height: 32px;\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .vexa-sport-ui-card,\r\n        .vexa-sport-ui-nav,\r\n        .vexa-sport-ui-all,\r\n        .vexa-sport-ui-add {\r\n            transition: none !important;\r\n        }\r\n        .vexa-sport-ui-card:hover .vexa-sport-ui-card-img img {\r\n            transform: none !important;\r\n        }\r\n        .vexa-sport-ui-track {\r\n            scroll-behavior: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"vexa-sport-ui\">\r\n\r\n    <!-- \u0647\u062f\u0631 -->\r\n    <div class=\"vexa-sport-ui-header\">\r\n        <div class=\"vexa-sport-ui-title\">\r\n            \u26bd \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u0632\u0634\u06cc\r\n            <span>\u062c\u062f\u06cc\u062f<\/span>\r\n        <\/div>\r\n        <a href=\"#\" class=\"vexa-sport-ui-all\">\r\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u06a9\u0627\u0631\u0648\u0633\u0644 -->\r\n    <div class=\"vexa-sport-ui-track-wrap\">\r\n\r\n        <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc -->\r\n        <button class=\"vexa-sport-ui-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        <button class=\"vexa-sport-ui-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <!-- \u0645\u062d\u0635\u0648\u0644\u0627\u062a -->\r\n        <div class=\"vexa-sport-ui-track\" id=\"vexaSportUITrack\">\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f1 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1\/300\/300\" alt=\"\u06a9\u0641\u0634 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge sale\">\u06f3\u06f0\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u06a9\u0641\u0634 \u0648\u0631\u0632\u0634\u06cc \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u0646\u0627\u06cc\u06a9 \u0627\u06cc\u0631 \u0645\u06a9\u0633<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f2\u06f4\u06f5)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\r\n                        <span class=\"old\">\u06f4,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f9\u06f4\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f2 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/21\/300\/300\" alt=\"\u0644\u0628\u0627\u0633 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u0633\u062a \u0648\u0631\u0632\u0634\u06cc \u0632\u0646\u0627\u0646\u0647 \u0645\u062f\u0644 \u06cc\u0648\u06af\u0627 \u067e\u0631\u0648<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f8\u06f7)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\u06f1,\u06f8\u06f5\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f3 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/26\/300\/300\" alt=\"\u062a\u0648\u067e \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u062a\u0648\u067e \u0641\u0648\u062a\u0628\u0627\u0644 \u0645\u062f\u0644 \u067e\u0631\u0648 \u0645\u0686 \u06f2\u06f0\u06f2\u06f4<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f3\u06f2\u06f1)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\r\n                        <span class=\"old\">\u06f1,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f9\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f4 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/55\/300\/300\" alt=\"\u06a9\u06cc\u0641 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge sport\">\u0648\u0631\u0632\u0634\u06cc<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u06a9\u06cc\u0641 \u0648\u0631\u0632\u0634\u06cc \u0636\u062f \u0622\u0628 \u0645\u062f\u0644 \u0627\u0633\u067e\u0631\u062a \u06f4\u06f0 \u0644\u06cc\u062a\u0631\u06cc<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f9\u06f8)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\r\n                        <span class=\"old\">\u06f2,\u06f8\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f1\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f5 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/96\/300\/300\" alt=\"\u062f\u0633\u062a\u06a9\u0634 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u062f\u0633\u062a\u06a9\u0634 \u0628\u0648\u06a9\u0633 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0645\u062f\u0644 \u0627\u0648\u0631\u062c\u06cc\u0646\u0627\u0644<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f1\u06f5\u06f6)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\u06f3,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f6 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/106\/300\/300\" alt=\"\u0639\u06cc\u0646\u06a9 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u0639\u06cc\u0646\u06a9 \u0648\u0631\u0632\u0634\u06cc \u0622\u0641\u062a\u0627\u0628\u06cc \u067e\u0644\u0627\u0631\u06cc\u0632\u0647<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f2\u06f1\u06f2)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\r\n                        <span class=\"old\">\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f7\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f7 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/145\/300\/300\" alt=\"\u0633\u0627\u06a9 \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge sale\">\u06f2\u06f5\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u0633\u0627\u06a9 \u0648\u0631\u0632\u0634\u06cc \u0686\u0646\u062f\u06a9\u0627\u0631\u0647 \u0628\u0631\u0646\u062f \u0627\u0633\u067e\u0631\u062a<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f8\u06f7)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\r\n                        <span class=\"old\">\u06f1,\u06f6\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f8 -->\r\n            <div class=\"vexa-sport-ui-card\">\r\n                <div class=\"vexa-sport-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/177\/300\/300\" alt=\"\u0633\u0627\u0639\u062a \u0648\u0631\u0632\u0634\u06cc\" loading=\"lazy\">\r\n                    <span class=\"vexa-sport-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-sport-ui-card-body\">\r\n                    <div class=\"vexa-sport-ui-card-title\">\u0633\u0627\u0639\u062a \u0647\u0648\u0634\u0645\u0646\u062f \u0648\u0631\u0632\u0634\u06cc \u0645\u062c\u0647\u0632 \u0628\u0647 GPS<\/div>\r\n                    <div class=\"vexa-sport-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f1\u06f9\u06f4)<\/span><\/div>\r\n                    <div class=\"vexa-sport-ui-card-price\">\u06f5,\u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-sport-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div><!-- \/track -->\r\n    <\/div><!-- \/track-wrap -->\r\n<\/div><!-- \/vexa-sport-ui -->\r\n\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        var track = document.getElementById('vexaSportUITrack');\r\n        if (!track) return;\r\n\r\n        var prevBtn = document.querySelector('.vexa-sport-ui-nav.prev');\r\n        var nextBtn = document.querySelector('.vexa-sport-ui-nav.next');\r\n\r\n        function getScrollStep() {\r\n            var firstCard = track.querySelector('.vexa-sport-ui-card');\r\n            return firstCard ? firstCard.offsetWidth + 18 : 200;\r\n        }\r\n\r\n        function refreshNavState() {\r\n            var maxScroll = track.scrollWidth - track.clientWidth;\r\n            var atStart = Math.abs(track.scrollLeft) < 3;\r\n            var atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 3;\r\n            if (prevBtn) prevBtn.disabled = atEnd;\r\n            if (nextBtn) nextBtn.disabled = atStart;\r\n        }\r\n\r\n        if (prevBtn) {\r\n            prevBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        if (nextBtn) {\r\n            nextBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        var raf = null;\r\n        track.addEventListener('scroll', function() {\r\n            if (raf) return;\r\n            raf = requestAnimationFrame(function() {\r\n                refreshNavState();\r\n                raf = null;\r\n            });\r\n        }, { passive: true });\r\n\r\n        \/\/ \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u06a9\u06cc\u0628\u0648\u0631\u062f\r\n        track.setAttribute('tabindex', '0');\r\n        track.addEventListener('keydown', function(e) {\r\n            var step = getScrollStep();\r\n            if (e.key === 'ArrowRight') {\r\n                track.scrollBy({ left: step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            } else if (e.key === 'ArrowLeft') {\r\n                track.scrollBy({ left: -step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            }\r\n        });\r\n\r\n        refreshNavState();\r\n        window.addEventListener('resize', refreshNavState);\r\n\r\n        \/\/ \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f (\u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645)\r\n        document.querySelectorAll('.vexa-sport-ui-add').forEach(function(btn) {\r\n            btn.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                var originalText = btn.innerHTML;\r\n                btn.innerHTML = '\u2705 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f';\r\n                btn.style.background = '#00b894';\r\n                btn.style.color = '#fff';\r\n                setTimeout(function() {\r\n                    btn.innerHTML = originalText;\r\n                    btn.style.background = '';\r\n                    btn.style.color = '';\r\n                }, 2000);\r\n            });\r\n        });\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cab2777 e-flex e-con-boxed e-con e-parent\" data-id=\"cab2777\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e3086f elementor-widget elementor-widget-html\" data-id=\"0e3086f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     \u06a9\u0627\u0631\u0648\u0633\u0644 \u067e\u0648\u0634\u0627\u06a9 \u0645\u0631\u062f\u0627\u0646\u0647 \u2013 UI \u062e\u0627\u0644\u0635\r\n     \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ====== \u0631\u06cc\u0633\u062a ====== *\/\r\n    .vexa-men-ui * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .vexa-men-ui {\r\n        font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 20px 0;\r\n        position: relative;\r\n        direction: rtl;\r\n    }\r\n\r\n    \/* ====== \u0647\u062f\u0631 ====== *\/\r\n    .vexa-men-ui-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 0 8px 20px 8px;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-men-ui-title {\r\n        font-size: 22px;\r\n        font-weight: 800;\r\n        color: #1a1a2e;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vexa-men-ui-title span {\r\n        background: #2d3436;\r\n        color: #fff;\r\n        font-size: 12px;\r\n        padding: 3px 14px;\r\n        border-radius: 30px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.3px;\r\n    }\r\n\r\n    .vexa-men-ui-all {\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        color: #2d3436;\r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: 0.25s ease;\r\n    }\r\n\r\n    .vexa-men-ui-all:hover {\r\n        color: #0984e3;\r\n        transform: translateX(-4px);\r\n    }\r\n\r\n    .vexa-men-ui-all svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u0648\u0633\u0644 ====== *\/\r\n    .vexa-men-ui-track-wrap {\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-men-ui-track {\r\n        display: flex;\r\n        gap: 18px;\r\n        overflow-x: auto;\r\n        scroll-snap-type: x proximity;\r\n        scroll-behavior: smooth;\r\n        padding: 6px 4px 16px;\r\n        scrollbar-width: none;\r\n        -webkit-overflow-scrolling: touch;\r\n        direction: rtl;\r\n    }\r\n\r\n    .vexa-men-ui-track::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    \/* ====== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 ====== *\/\r\n    .vexa-men-ui-card {\r\n        scroll-snap-align: start;\r\n        flex: 0 0 200px;\r\n        background: #ffffff;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        color: #1e1e1e;\r\n        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);\r\n        border: 1px solid rgba(45, 52, 54, 0.06);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        cursor: default;\r\n        position: relative;\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-men-ui-card:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 32px rgba(45, 52, 54, 0.10);\r\n            border-color: rgba(45, 52, 54, 0.15);\r\n        }\r\n    }\r\n\r\n    \/* ====== \u062a\u0635\u0648\u06cc\u0631 ====== *\/\r\n    .vexa-men-ui-card-img {\r\n        position: relative;\r\n        background: #f0f2f5;\r\n        aspect-ratio: 1 \/ 1;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .vexa-men-ui-card-img img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .vexa-men-ui-card:hover .vexa-men-ui-card-img img {\r\n        transform: scale(1.04);\r\n    }\r\n\r\n    \/* \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 *\/\r\n    .vexa-men-ui-badge {\r\n        position: absolute;\r\n        top: 10px;\r\n        right: 10px;\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 3px 12px;\r\n        border-radius: 30px;\r\n        color: #fff;\r\n        z-index: 2;\r\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .vexa-men-ui-badge.sale {\r\n        background: linear-gradient(135deg, #e17055, #d63031);\r\n    }\r\n\r\n    .vexa-men-ui-badge.new {\r\n        background: linear-gradient(135deg, #00b894, #00a381);\r\n    }\r\n\r\n    .vexa-men-ui-badge.best {\r\n        background: linear-gradient(135deg, #fdcb6e, #f9a825);\r\n        color: #1a1a2e;\r\n    }\r\n\r\n    .vexa-men-ui-badge.collection {\r\n        background: linear-gradient(135deg, #0984e3, #6c5ce7);\r\n    }\r\n\r\n    \/* ====== \u0628\u062f\u0646\u0647 \u06a9\u0627\u0631\u062a ====== *\/\r\n    .vexa-men-ui-card-body {\r\n        padding: 12px 14px 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex: 1;\r\n    }\r\n\r\n    .vexa-men-ui-card-title {\r\n        font-size: 13px;\r\n        line-height: 1.5;\r\n        min-height: 40px;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        font-weight: 500;\r\n        color: #1a1a2e;\r\n    }\r\n\r\n    .vexa-men-ui-card-rating {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        font-size: 12px;\r\n        color: #f9a825;\r\n    }\r\n\r\n    .vexa-men-ui-card-rating span {\r\n        color: #999;\r\n        font-size: 11px;\r\n        margin-right: 4px;\r\n    }\r\n\r\n    .vexa-men-ui-card-price {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: #1e1e1e;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 6px;\r\n        flex-wrap: wrap;\r\n        margin-top: auto;\r\n    }\r\n\r\n    .vexa-men-ui-card-price .old {\r\n        font-size: 12px;\r\n        color: #aaa;\r\n        text-decoration: line-through;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .vexa-men-ui-card-price .sale {\r\n        color: #e17055;\r\n    }\r\n\r\n    .vexa-men-ui-card-price small {\r\n        font-size: 10.5px;\r\n        font-weight: 400;\r\n        color: #999;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f *\/\r\n    .vexa-men-ui-add {\r\n        margin-top: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        padding: 8px 0;\r\n        background: #f0f2f5;\r\n        border-radius: 40px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: #2d3436;\r\n        transition: 0.25s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n        width: 100%;\r\n        font-family: inherit;\r\n    }\r\n\r\n    .vexa-men-ui-add:hover {\r\n        background: #2d3436;\r\n        color: #fff;\r\n    }\r\n\r\n    .vexa-men-ui-add svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2;\r\n        transition: 0.2s;\r\n    }\r\n\r\n    .vexa-men-ui-add:hover svg {\r\n        stroke: #fff;\r\n    }\r\n\r\n    \/* ====== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (\u0641\u0642\u0637 \u062f\u0633\u06a9\u062a\u0627\u067e) ====== *\/\r\n    .vexa-men-ui-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 34px;\r\n        height: 34px;\r\n        border-radius: 50%;\r\n        border: none;\r\n        background: rgba(255, 255, 255, 0.92);\r\n        backdrop-filter: blur(4px);\r\n        color: #1a1a2e;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 4;\r\n        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);\r\n        transition: 0.25s ease;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        border: 1px solid rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    @media (hover: hover) and (pointer: fine) {\r\n        .vexa-men-ui-track-wrap:hover .vexa-men-ui-nav {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n        .vexa-men-ui-nav:hover {\r\n            background: #fff;\r\n            transform: translateY(-50%) scale(1.06);\r\n            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);\r\n            border-color: #2d3436;\r\n            color: #2d3436;\r\n        }\r\n    }\r\n\r\n    .vexa-men-ui-nav:disabled {\r\n        opacity: 0 !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    .vexa-men-ui-nav svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: currentColor;\r\n        fill: none;\r\n        stroke-width: 2.2;\r\n    }\r\n\r\n    .vexa-men-ui-nav.prev {\r\n        left: 4px;\r\n    }\r\n    .vexa-men-ui-nav.next {\r\n        right: 4px;\r\n    }\r\n\r\n    \/* ====== \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\u06cc\u06cc ====== *\/\r\n    @media (max-width: 768px) {\r\n        .vexa-men-ui {\r\n            padding: 12px 0;\r\n        }\r\n        .vexa-men-ui-title {\r\n            font-size: 18px;\r\n        }\r\n        .vexa-men-ui-nav {\r\n            display: none;\r\n        }\r\n        .vexa-men-ui-track {\r\n            gap: 12px;\r\n            padding: 4px 0 12px;\r\n        }\r\n        .vexa-men-ui-card {\r\n            flex: 0 0 170px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vexa-men-ui-title {\r\n            font-size: 16px;\r\n        }\r\n        .vexa-men-ui-title span {\r\n            font-size: 10px;\r\n            padding: 2px 10px;\r\n        }\r\n        .vexa-men-ui-card {\r\n            flex: 0 0 150px;\r\n        }\r\n        .vexa-men-ui-card-title {\r\n            font-size: 12px;\r\n            min-height: 36px;\r\n        }\r\n        .vexa-men-ui-card-price {\r\n            font-size: 14px;\r\n        }\r\n        .vexa-men-ui-add {\r\n            font-size: 11px;\r\n            padding: 6px 0;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 360px) {\r\n        .vexa-men-ui-card {\r\n            flex: 0 0 130px;\r\n        }\r\n        .vexa-men-ui-card-body {\r\n            padding: 8px 10px 10px;\r\n        }\r\n        .vexa-men-ui-card-title {\r\n            font-size: 11px;\r\n            min-height: 32px;\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .vexa-men-ui-card,\r\n        .vexa-men-ui-nav,\r\n        .vexa-men-ui-all,\r\n        .vexa-men-ui-add {\r\n            transition: none !important;\r\n        }\r\n        .vexa-men-ui-card:hover .vexa-men-ui-card-img img {\r\n            transform: none !important;\r\n        }\r\n        .vexa-men-ui-track {\r\n            scroll-behavior: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"vexa-men-ui\">\r\n\r\n    <!-- \u0647\u062f\u0631 -->\r\n    <div class=\"vexa-men-ui-header\">\r\n        <div class=\"vexa-men-ui-title\">\r\n            \ud83d\udc54 \u067e\u0648\u0634\u0627\u06a9 \u0645\u0631\u062f\u0627\u0646\u0647\r\n            <span>\u062c\u062f\u06cc\u062f<\/span>\r\n        <\/div>\r\n        <a href=\"#\" class=\"vexa-men-ui-all\">\r\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u06a9\u0627\u0631\u0648\u0633\u0644 -->\r\n    <div class=\"vexa-men-ui-track-wrap\">\r\n\r\n        <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc -->\r\n        <button class=\"vexa-men-ui-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        <button class=\"vexa-men-ui-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <!-- \u0645\u062d\u0635\u0648\u0644\u0627\u062a -->\r\n        <div class=\"vexa-men-ui-track\" id=\"vexaMenUITrack\">\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f1 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1\/300\/300\" alt=\"\u06a9\u062a \u0648 \u0634\u0644\u0648\u0627\u0631\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge sale\">\u06f3\u06f0\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u06a9\u062a \u0648 \u0634\u0644\u0648\u0627\u0631 \u0645\u062c\u0644\u0633\u06cc \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f1\u06f8\u06f9)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\r\n                        <span class=\"old\">\u06f6,\u06f8\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f4,\u06f7\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f2 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/21\/300\/300\" alt=\"\u067e\u06cc\u0631\u0627\u0647\u0646 \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u067e\u06cc\u0631\u0627\u0647\u0646 \u0645\u0631\u062f\u0627\u0646\u0647 \u0622\u0633\u062a\u06cc\u0646 \u0628\u0644\u0646\u062f \u0637\u0631\u062d \u0686\u0647\u0627\u0631\u062e\u0627\u0646\u0647<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f3\u06f4)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\u06f1,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f3 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/26\/300\/300\" alt=\"\u06a9\u0641\u0634 \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u06a9\u0641\u0634 \u0627\u0633\u067e\u0631\u062a \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u0646\u0627\u06cc\u06a9 \u0627\u06cc\u0631 \u0641\u0648\u0631\u0633<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f4\u06f1\u06f2)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\r\n                        <span class=\"old\">\u06f3,\u06f5\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f2,\u06f8\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f4 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/55\/300\/300\" alt=\"\u0634\u0644\u0648\u0627\u0631 \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge collection\">\u06a9\u0644\u06a9\u0633\u06cc\u0648\u0646<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u0634\u0644\u0648\u0627\u0631 \u062c\u06cc\u0646 \u0627\u0633\u0644\u0634 \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f5\u06f6)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\r\n                        <span class=\"old\">\u06f1,\u06f8\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f4\u06f4\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f5 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/96\/300\/300\" alt=\"\u0633\u0627\u0639\u062a \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u0633\u0627\u0639\u062a \u0645\u0686\u06cc \u0645\u0631\u062f\u0627\u0646\u0647 \u0627\u062a\u0648\u0645\u0627\u062a\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f2\u06f3\u06f4)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\u06f4,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f6 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/106\/300\/300\" alt=\"\u06a9\u06cc\u0641 \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge best\">\u067e\u0631\u0641\u0631\u0648\u0634<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u06a9\u06cc\u0641 \u0686\u0631\u0645 \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u0627\u0633\u067e\u0631\u062a<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f1\u06f9\u06f8)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\r\n                        <span class=\"old\">\u06f2,\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f1,\u06f7\u06f6\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f7 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/145\/300\/300\" alt=\"\u06a9\u0644\u0627\u0647 \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge sale\">\u06f1\u06f5\u066a \u062a\u062e\u0641\u06cc\u0641<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u06a9\u0644\u0627\u0647 \u0644\u0628\u0647\u200c\u062f\u0627\u0631 \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2606 <span>(\u06f8\u06f7)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\r\n                        <span class=\"old\">\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0<\/span>\r\n                        <span class=\"sale\">\u06f8\u06f3\u06f3,\u06f0\u06f0\u06f0<\/span>\r\n                        <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u06a9\u0627\u0631\u062a \u06f8 -->\r\n            <div class=\"vexa-men-ui-card\">\r\n                <div class=\"vexa-men-ui-card-img\">\r\n                    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/177\/300\/300\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u0645\u0631\u062f\u0627\u0646\u0647\" loading=\"lazy\">\r\n                    <span class=\"vexa-men-ui-badge new\">\u062c\u062f\u06cc\u062f<\/span>\r\n                <\/div>\r\n                <div class=\"vexa-men-ui-card-body\">\r\n                    <div class=\"vexa-men-ui-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u0648\u0631\u0632\u0634\u06cc \u0645\u0631\u062f\u0627\u0646\u0647 \u0645\u062f\u0644 \u0627\u0633\u0644\u0634<\/div>\r\n                    <div class=\"vexa-men-ui-card-rating\">\u2605\u2605\u2605\u2605\u2605 <span>(\u06f3\u06f5\u06f6)<\/span><\/div>\r\n                    <div class=\"vexa-men-ui-card-price\">\u06f2,\u06f6\u06f0\u06f0,\u06f0\u06f0\u06f0 <small>\u062a\u0648\u0645\u0627\u0646<\/small><\/div>\r\n                    <button class=\"vexa-men-ui-add\">\r\n                        <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n                            <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n                        <\/svg>\r\n                        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div><!-- \/track -->\r\n    <\/div><!-- \/track-wrap -->\r\n<\/div><!-- \/vexa-men-ui -->\r\n\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        var track = document.getElementById('vexaMenUITrack');\r\n        if (!track) return;\r\n\r\n        var prevBtn = document.querySelector('.vexa-men-ui-nav.prev');\r\n        var nextBtn = document.querySelector('.vexa-men-ui-nav.next');\r\n\r\n        function getScrollStep() {\r\n            var firstCard = track.querySelector('.vexa-men-ui-card');\r\n            return firstCard ? firstCard.offsetWidth + 18 : 200;\r\n        }\r\n\r\n        function refreshNavState() {\r\n            var maxScroll = track.scrollWidth - track.clientWidth;\r\n            var atStart = Math.abs(track.scrollLeft) < 3;\r\n            var atEnd = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 3;\r\n            if (prevBtn) prevBtn.disabled = atEnd;\r\n            if (nextBtn) nextBtn.disabled = atStart;\r\n        }\r\n\r\n        if (prevBtn) {\r\n            prevBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        if (nextBtn) {\r\n            nextBtn.addEventListener('click', function() {\r\n                track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' });\r\n            });\r\n        }\r\n\r\n        var raf = null;\r\n        track.addEventListener('scroll', function() {\r\n            if (raf) return;\r\n            raf = requestAnimationFrame(function() {\r\n                refreshNavState();\r\n                raf = null;\r\n            });\r\n        }, { passive: true });\r\n\r\n        \/\/ \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u06a9\u06cc\u0628\u0648\u0631\u062f\r\n        track.setAttribute('tabindex', '0');\r\n        track.addEventListener('keydown', function(e) {\r\n            var step = getScrollStep();\r\n            if (e.key === 'ArrowRight') {\r\n                track.scrollBy({ left: step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            } else if (e.key === 'ArrowLeft') {\r\n                track.scrollBy({ left: -step, behavior: 'smooth' });\r\n                e.preventDefault();\r\n            }\r\n        });\r\n\r\n        refreshNavState();\r\n        window.addEventListener('resize', refreshNavState);\r\n\r\n        \/\/ \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f (\u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645)\r\n        document.querySelectorAll('.vexa-men-ui-add').forEach(function(btn) {\r\n            btn.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                var originalText = btn.innerHTML;\r\n                btn.innerHTML = '\u2705 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f';\r\n                btn.style.background = '#00b894';\r\n                btn.style.color = '#fff';\r\n                setTimeout(function() {\r\n                    btn.innerHTML = originalText;\r\n                    btn.style.background = '';\r\n                    btn.style.color = '';\r\n                }, 2000);\r\n            });\r\n        });\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12b07c8 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"12b07c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bc382e elementor-widget elementor-widget-shortcode\" data-id=\"3bc382e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"vexa-new\" id=\"vexaNewProducts\">\n        <!-- \u0628\u062e\u0634 \u0639\u0646\u0648\u0627\u0646 -->\n        <div class=\"vexa-new-side\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\">\n                <polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"><\/polyline>\n                <polyline points=\"17 6 23 6 23 12\"><\/polyline>\n            <\/svg>\n            <div class=\"vexa-new-title\">\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/div>\n            <a href=\"https:\/\/vexastyle.ir\/?page_id=7\" class=\"vexa-new-more\">\n                \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n                    <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n                <\/svg>\n            <\/a>\n        <\/div>\n\n        <!-- \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 -->\n        <div class=\"vexa-new-track-wrap\">\n            <button class=\"vexa-new-nav prev\" aria-label=\"\u0642\u0628\u0644\u06cc\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n                <\/svg>\n            <\/button>\n            <button class=\"vexa-new-nav next\" aria-label=\"\u0628\u0639\u062f\u06cc\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                <\/svg>\n            <\/button>\n\n            <div class=\"vexa-new-track\">\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d9%81%d8%b4-%d9%86%db%8c%d9%88%d8%a8%d8%a7%d9%84%d8%a7%d9%86%d8%b3-%d9%85%d8%af%d9%84-530\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Jun-7-2026-03_05_19-PM-300x300.jpg\" alt=\"\u06a9\u0641\u0634 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 \u0645\u062f\u0644 530\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u0641\u0634 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 \u0645\u062f\u0644 530<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"woocommerce-Price-amount amount\" aria-hidden=\"true\">1.980.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span> <span aria-hidden=\"true\">&ndash;<\/span> <span class=\"woocommerce-Price-amount amount\" aria-hidden=\"true\">2.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><span class=\"screen-reader-text\">\u0645\u062d\u062f\u0648\u062f\u0647 \u0642\u06cc\u0645\u062a: 1.980.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u062a\u0627 2.000.000&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 777\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 777<\/div>\n                        <div class=\"vexa-new-price\"><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-2\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"sale-price\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">4.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/del> <span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0627\u0635\u0644\u06cc 4.000.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0628\u0648\u062f.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">500.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/ins><span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0641\u0639\u0644\u06cc 500.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0627\u0633\u062a.<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-2\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"sale-price\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">4.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/del> <span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0627\u0635\u0644\u06cc 4.000.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0628\u0648\u062f.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">500.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/ins><span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0641\u0639\u0644\u06cc 500.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0627\u0633\u062a.<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-2\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"sale-price\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">4.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/del> <span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0627\u0635\u0644\u06cc 4.000.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0628\u0648\u062f.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\">500.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/ins><span class=\"screen-reader-text\">\u0642\u06cc\u0645\u062a \u0641\u0639\u0644\u06cc 500.000&#x62A;&#x648;&#x645;&#x627;&#x646; \u0627\u0633\u062a.<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"woocommerce-Price-amount amount\">5.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c-%da%a9%d9%be%db%8c\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc) (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"woocommerce-Price-amount amount\">5.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                                <a href=\"https:\/\/vexastyle.ir\/?product=%da%a9%d8%aa%d8%a7%d9%86%db%8c-%d8%ac%d8%b1%d8%af%d9%86-%d9%88%d8%a7%d9%86-%d8%b2%d9%86%d8%a7%d9%86%d9%87-%da%a9%d9%be%db%8c\" class=\"vexa-new-card\">\n                    <div class=\"vexa-new-card-img\">\n                        <img decoding=\"async\" src=\"https:\/\/vexastyle.ir\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-25-2026-01_25_23-AM-300x300.jpg\" alt=\"\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc)\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"vexa-new-card-body\">\n                        <div class=\"vexa-new-card-title\">\u06a9\u062a\u0627\u0646\u06cc \u062c\u0631\u062f\u0646 \u0648\u0627\u0646 \u0632\u0646\u0627\u0646\u0647 (\u06a9\u067e\u06cc)<\/div>\n                        <div class=\"vexa-new-price\"><span class=\"woocommerce-Price-amount amount\">5.000.000<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/div>\n                    <\/div>\n                <\/a>\n                            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        \/* ====== \u0627\u0633\u062a\u0627\u06cc\u0644 ====== *\/\n        .vexa-new * { margin:0; padding:0; box-sizing:border-box; }\n        .vexa-new {\n            --primary: #e6396b;\n            --bg-start: #1a1a2e;\n            --bg-end: #16213e;\n            --radius: 18px;\n            display: flex;\n            align-items: stretch;\n            background: linear-gradient(135deg, var(--bg-start), var(--bg-end));\n            border-radius: var(--radius);\n            padding: 18px;\n            gap: 16px;\n            font-family: system-ui, sans-serif;\n            direction: rtl;\n            box-shadow: 0 8px 30px rgba(0,0,0,0.25);\n            position: relative;\n        }\n        \/* \u0628\u062e\u0634 \u0639\u0646\u0648\u0627\u0646 *\/\n        .vexa-new-side {\n            flex: 0 0 160px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: 12px;\n            color: #fff;\n            text-align: center;\n            padding: 12px 8px;\n            background: rgba(255,255,255,0.06);\n            border-radius: var(--radius);\n            backdrop-filter: blur(2px);\n        }\n        .vexa-new-side svg {\n            width: 44px; height:44px; stroke:#fff; fill:none;\n            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));\n        }\n        .vexa-new-title {\n            font-size: 20px; font-weight:800; letter-spacing:0.5px;\n            text-shadow: 0 2px 10px rgba(0,0,0,0.15);\n        }\n        .vexa-new-more {\n            display: inline-flex; align-items:center; gap:8px;\n            background: rgba(255,255,255,0.95);\n            color: #222;\n            font-size: 12.5px; font-weight:700;\n            padding: 8px 18px; border-radius:30px;\n            text-decoration: none;\n            transition: all .25s;\n            border:1px solid rgba(255,255,255,0.2);\n        }\n        .vexa-new-more:hover {\n            transform:translateY(-2px);\n            box-shadow:0 8px 24px rgba(0,0,0,0.15);\n            background:#fff;\n        }\n        .vexa-new-more svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; }\n\n        \/* \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 *\/\n        .vexa-new-track-wrap {\n            flex:1; min-width:0; position:relative;\n        }\n        .vexa-new-track {\n            display:flex; gap:16px; overflow-x:auto;\n            scroll-snap-type:x mandatory; scroll-behavior:smooth;\n            padding:4px 4px 8px; scrollbar-width:none;\n            -webkit-overflow-scrolling:touch;\n            direction:rtl;\n        }\n        .vexa-new-track::-webkit-scrollbar { display:none; }\n\n        \/* \u06a9\u0627\u0631\u062a *\/\n        .vexa-new-card {\n            scroll-snap-align:start; flex:0 0 180px;\n            background:#fff; border-radius:12px; overflow:hidden;\n            text-decoration:none; color:#1a1a1a;\n            display:flex; flex-direction:column;\n            transition: transform .25s, box-shadow .25s;\n            box-shadow:0 2px 8px rgba(0,0,0,0.06);\n        }\n        .vexa-new-card:hover {\n            transform:translateY(-4px) scale(1.01);\n            box-shadow:0 12px 28px rgba(0,0,0,0.18);\n        }\n        .vexa-new-card-img {\n            height:150px; background:#f5f5f5;\n            display:flex; align-items:center; justify-content:center;\n            overflow:hidden;\n        }\n        .vexa-new-card-img img {\n            width:100%; height:100%; object-fit:contain;\n            transition:transform .25s;\n        }\n        .vexa-new-card:hover .vexa-new-card-img img { transform:scale(1.05); }\n        .vexa-new-card-body {\n            padding:10px 12px 12px; flex:1;\n            display:flex; flex-direction:column; gap:8px;\n        }\n        .vexa-new-card-title {\n            font-size:13px; line-height:1.7; min-height:43px;\n            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;\n            overflow:hidden; text-align:right; color:#333;\n        }\n        .vexa-new-price {\n            font-size:15px; font-weight:700; color:#1a1a1a;\n            margin-top:auto; text-align:right;\n        }\n        .vexa-new-price del { color:#999; font-size:12px; margin-left:6px; }\n        .vexa-new-price ins { text-decoration:none; }\n\n        \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/\n        .vexa-new-nav {\n            position:absolute; top:50%; transform:translateY(-50%);\n            width:34px; height:34px; border-radius:50%; border:none;\n            background:rgba(255,255,255,0.9); backdrop-filter:blur(4px);\n            color:#1a1a1a; cursor:pointer; z-index:5;\n            opacity:0; transition: opacity .25s, transform .25s;\n            box-shadow:0 2px 12px rgba(0,0,0,0.12);\n            display:flex; align-items:center; justify-content:center;\n        }\n        .vexa-new-track-wrap:hover .vexa-new-nav { opacity:1; }\n        .vexa-new-nav:hover { background:#fff; transform:translateY(-50%) scale(1.08); }\n        .vexa-new-nav svg { width:18px; height:18px; stroke-width:2.4; }\n        .vexa-new-nav.prev { left:6px; }\n        .vexa-new-nav.next { right:6px; }\n\n        \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n        @media (max-width:900px) {\n            .vexa-new { flex-direction:column; padding:16px; }\n            .vexa-new-side { flex:none; flex-direction:row; justify-content:space-around; padding:12px 16px; min-height:auto; }\n            .vexa-new-card { flex:0 0 180px; }\n        }\n        @media (max-width:480px) {\n            .vexa-new-side { flex-wrap:wrap; gap:8px; }\n            .vexa-new-title { font-size:16px; }\n            .vexa-new-card { flex:0 0 150px; }\n            .vexa-new-card-img { height:120px; }\n            .vexa-new-nav { width:28px; height:28px; }\n            .vexa-new-nav svg { width:14px; height:14px; }\n        }\n    <\/style>\n\n    <script>\n    (function() {\n        const track = document.querySelector('.vexa-new-track');\n        if (!track) return;\n        const prev = track.closest('.vexa-new-track-wrap').querySelector('.prev');\n        const next = track.closest('.vexa-new-track-wrap').querySelector('.next');\n        const amount = 200;\n\n        if (prev) prev.addEventListener('click', () => track.scrollBy({ left: amount, behavior:'smooth' }));\n        if (next) next.addEventListener('click', () => track.scrollBy({ left: -amount, behavior:'smooth' }));\n\n        \/\/ \u06a9\u06cc\u0628\u0648\u0631\u062f\n        document.addEventListener('keydown', (e) => {\n            if (e.key === 'ArrowRight') { track.scrollBy({ left: amount, behavior:'smooth' }); e.preventDefault(); }\n            else if (e.key === 'ArrowLeft') { track.scrollBy({ left: -amount, behavior:'smooth' }); e.preventDefault(); }\n        });\n    })();\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f149534 e-con-full e-flex e-con e-parent\" data-id=\"f149534\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca7e3ef elementor-widget elementor-widget-html\" data-id=\"ca7e3ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ===== \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 ===== *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@400;600;700;800&display=swap');\r\n\r\n\/* ===== \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0635\u0644\u06cc ===== *\/\r\n.posts-scroll-wrapper {\r\n    max-width: 1200px;\r\n    margin: 40px auto;\r\n    padding: 0 20px;\r\n    direction: rtl;\r\n}\r\n\r\n\/* ===== \u0639\u0646\u0648\u0627\u0646 ===== *\/\r\n.section-title {\r\n    text-align: right;\r\n    font-family: 'Vazirmatn', 'Vazir', 'IRANSans', sans-serif;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #2d3436;\r\n    margin-bottom: 30px;\r\n    padding-bottom: 15px;\r\n    position: relative;\r\n    padding-right: 5px;\r\n}\r\n\r\n.section-title::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0;\r\n    right: 0;\r\n    width: 120px;\r\n    height: 4px;\r\n    background: #000000;\r\n    border-radius: 2px;\r\n}\r\n\r\n\/* ===== \u0631\u062f\u06cc\u0641 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 \u0628\u0627 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0627\u0641\u0642\u06cc ===== *\/\r\n.posts-grid {\r\n    display: flex;\r\n    flex-wrap: nowrap;\r\n    gap: 20px;\r\n    overflow-x: auto;\r\n    padding-bottom: 10px;\r\n    scroll-snap-type: x mandatory;\r\n    -webkit-overflow-scrolling: touch;\r\n    direction: ltr;\r\n    \r\n    \/* \u0645\u062e\u0641\u06cc\u200c\u06a9\u0631\u062f\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644\u200c\u0628\u0627\u0631 *\/\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n}\r\n\r\n.posts-grid::-webkit-scrollbar {\r\n    display: none;\r\n}\r\n\r\n\/* ===== \u0647\u0631 \u06a9\u0627\u0631\u062a ===== *\/\r\n.post-card {\r\n    flex: 0 0 calc(33.333% - 14px);\r\n    min-width: 250px;\r\n    scroll-snap-align: start;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 12px;\r\n    aspect-ratio: 16 \/ 10;\r\n}\r\n\r\n.post-card .thumbnail {\r\n    width: 100%;\r\n    height: 100%;\r\n    background-size: cover;\r\n    background-position: center;\r\n    position: relative;\r\n}\r\n\r\n.post-card .overlay {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    padding: 30px 20px 20px;\r\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\r\n    color: #fff;\r\n}\r\n\r\n.post-card .title {\r\n    margin: 0;\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\r\n    font-family: 'Vazirmatn', 'Vazir', 'IRANSans', sans-serif;\r\n    text-align: right; \/* \u0631\u0627\u0633\u062a\u200c\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u062a\u0627\u06cc\u062a\u0644 *\/\r\n}\r\n\r\n.post-card a {\r\n    text-decoration: none;\r\n    display: block;\r\n    height: 100%;\r\n}\r\n.post-card{\r\n    transition:.35s;\r\n}\r\n\r\n.post-card:hover{\r\n    transform:translateY(-6px);\r\n}\r\n\r\n.thumbnail{\r\n    transition:transform .5s;\r\n}\r\n\r\n.post-card:hover .thumbnail{\r\n    transform:scale(1.06);\r\n}\r\n\r\n\/* ===== \u0645\u0648\u0628\u0627\u06cc\u0644 (\u0639\u0631\u0636 \u06a9\u0645\u062a\u0631 \u0627\u0632 768px) ===== *\/\r\n@media (max-width: 768px) {\r\n    .post-card {\r\n        flex: 0 0 80%;\r\n        min-width: 200px;\r\n    }\r\n    .post-card .title {\r\n        font-size: 16px;\r\n    }\r\n    .section-title {\r\n        font-size: 26px;\r\n        font-weight: 600;\r\n    }\r\n    .section-title::after {\r\n        width: 100px;\r\n    }\r\n}\r\n\r\n\/* ===== \u0645\u0648\u0628\u0627\u06cc\u0644 \u062e\u06cc\u0644\u06cc \u06a9\u0648\u0686\u06a9 ===== *\/\r\n@media (max-width: 480px) {\r\n    .post-card {\r\n        flex: 0 0 90%;\r\n        min-width: 180px;\r\n    }\r\n    .section-title {\r\n        font-size: 22px;\r\n        font-weight: 600;\r\n    }\r\n    .section-title::after {\r\n        width: 80px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- ===== \u0634\u0631\u0648\u0639 \u0628\u062e\u0634 ===== -->\r\n<div class=\"posts-scroll-wrapper\">\r\n\r\n    <h2 class=\"section-title\">\r\n        \u062e\u0648\u0627\u0646\u062f\u0646\u06cc\u200c\u0647\u0627\r\n    <\/h2>\r\n\r\n    <div class=\"posts-grid\" id=\"vexa-posts-container\">\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632 \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632 \u0647\u0645\u0647 \ud83d\udc5f \u0645\u062d\u0627\u0633\u0628\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0633\u0627\u06cc\u0632 \u06a9\u0641\u0634 \u0648 \u06a9\u062a\u0627\u0646\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0633\u0627\u06cc\u0632 \u2190 \u0634\u06af\u0641\u062a\u0627\u0646\u0647 VEXA \u2014 \u0646\u0633\u062e\u0647 \u0627\u0635\u0644\u0627\u062d\u200c\u0634\u062f\u0647 \u0634\u06af\u0641\u062a\u0627\u0646\u0647VEXA \u06f0\u06f0 : \u06f0\u06f0 : \u06f0\u06f0 \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0634\u06af\u0641\u062a\u0627\u0646\u0647 VEXA \u062a\u0627 \u0634\u0631\u0648\u0639 \u062a\u062e\u0641\u06cc\u0641 \u23f3 \u06f0\u06f0 : \u06f0\u06f0 : \u06f0\u06f0 \u0647\u0645\u0647 \ud83d\udd25 \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u06f8 \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u06f1 \u06a9\u0641\u0634 \u0632\u0646\u0627\u0646\u0647 \u0631\u0648\u0632\u0645\u0631\u0647 \u0645\u062f\u0644 \u0646\u06cc\u0648\u0628\u0627\u0644\u0627\u0646\u0633 9060 \u06f4,\u06f0\u06f0\u06f0,\u06f0\u06f0\u06f0 \u06f4\u06f0\u06f0,\u06f0\u06f0\u06f0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vexastyle.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":431,"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/vexastyle.ir\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/642"}],"wp:attachment":[{"href":"https:\/\/vexastyle.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}