.vk-pro-menu,.vk-pro-menu *,.vk-pro-floating-layer,.vk-pro-floating-layer *{
    font-family:"IRANYekanXFaNum","IRANYekanX",IRANYekan,YekanBakh,Vazirmatn,Tahoma,Arial,sans-serif!important;
    box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.vk-pro-menu,.vk-pro-floating-layer{
    --vk-font:"IRANYekanXFaNum","IRANYekanX",IRANYekan,YekanBakh,Vazirmatn,Tahoma,Arial,sans-serif;
    --vk-black:#111111;--vk-yellow:#ffcd11;--vk-yellow-soft:#fff7d1;
    --vk-border:#efe6c8;--vk-shadow:0 16px 38px rgba(17,17,17,0.085);
}

/* ── Anchor ── */
.vk-pro-menu-anchor{display:block;width:0;height:0;overflow:hidden;opacity:0}

/* ── Wrapper ── */
.vk-pro-menu{position:relative;z-index:9999;width:100%;direction:rtl;overflow-x:hidden}

/* ── Desktop bar ── */
.vk-pro-desktop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}

/* ── Nav links / trigger buttons ── */
.vk-pro-link{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:40px;padding:7px 13px;border-radius:13px;border:1px solid transparent;
    background:transparent;color:var(--vk-black)!important;
    font-size:14px;font-weight:700;line-height:1.7;
    text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:all .2s ease;
}
/* رفعِ باگِ رنگِ صورتیِ reset.css (button:focus{background-color:#c36}):
   «کفش»/«برندها»/«راهنمای خرید» دکمه‌اند، نه لینک؛ کلیک(نه فقط Tab) هم
   :focus می‌دهد و رنگِ پیش‌فرضِ صورتی را نشان می‌داد چون قاعده‌ی پایه
   پسوندِ :focus نداشت (فقط outline بسته می‌شد، background نه). */
.vk-pro-link:focus,.vk-pro-trigger:focus{background:transparent!important;color:var(--vk-black)!important;outline:none!important}
.vk-pro-link:hover,.vk-pro-link.is-open{background:var(--vk-yellow-soft);border-color:#ead275;color:var(--vk-black)!important}
.vk-pro-trigger{appearance:none;-webkit-appearance:none}

/* ── Chevron arrow ── */
.vk-pro-arrow{width:13px;height:13px;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}
.vk-pro-arrow::before{content:"";width:7px;height:7px;border-left:2px solid var(--vk-black);border-bottom:2px solid var(--vk-black);transform:rotate(-45deg);margin-top:-4px}
.vk-pro-link.is-open .vk-pro-arrow{transform:rotate(180deg)}

/* ── Floating layer ── */
.vk-pro-floating-layer{position:relative;z-index:9000;direction:rtl}

/* ── Dropdown panels ── */
.vk-pro-panel{
    position:fixed;z-index:9001;top:0;left:0;min-width:240px;padding:10px;
    border-radius:18px;border:1px solid var(--vk-border);background:#fff;
    box-shadow:var(--vk-shadow);opacity:0;visibility:hidden;
    transform:translateY(8px);pointer-events:none;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.vk-pro-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.vk-pro-panel a{
    display:flex;align-items:center;min-height:34px;padding:7px 11px;
    border-radius:11px;color:#222!important;text-decoration:none!important;
    font-size:13px;font-weight:700;line-height:1.8;white-space:nowrap;transition:all .2s ease;
}
.vk-pro-panel a:hover{background:#fff7d1;color:#111!important;padding-right:16px}

/* ── Mega menu ── */
/* پهنا+نسبتِ ستون‌ها: قبلاً کارتِ CTA (.68fr از 535px تقریبا 126px) به‌قدری تنگ
   بود که هم تیتر به 3-4 خط می‌شکست هم برچسبِ دکمه به 2 خط — با ستون‌های
   لینکِ کناری (185px) هم‌تراز نبود. حالا هر سه ستون تقریباً هم‌عرضند. */
.vk-pro-mega{width:600px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:11px}
.vk-pro-guide-panel{min-width:250px;padding:11px}
.vk-pro-panel-col{display:flex;flex-direction:column;gap:3px}
.vk-pro-panel-title{display:block;padding:6px 12px 9px;margin-bottom:2px;color:#6f6f6f;font-size:11.5px;font-weight:800}

/* ── CTA card inside mega ── */
.vk-pro-panel-cta{
    display:flex;flex-direction:column;justify-content:center;gap:8px;
    padding:14px;border-radius:14px;
    background:linear-gradient(135deg,#111,#242424);color:#fff;
}
.vk-pro-panel-cta span{width:fit-content;padding:4px 9px;border-radius:999px;background:#ffcd11;color:#111;font-size:10.5px;font-weight:900}
.vk-pro-panel-cta strong{color:#fff;font-size:12px;font-weight:800;line-height:1.6}
.vk-pro-panel-cta a{width:fit-content;padding:8px 14px;border-radius:999px;background:#ffcd11;color:#111!important;font-size:11.5px;font-weight:900;white-space:nowrap}
.vk-pro-panel-cta a:hover{padding-right:16px;background:#fff}

/* ── Mobile toggle ── */
.vk-pro-mobile-toggle{
    display:none;align-items:center;justify-content:center;gap:8px;
    min-height:42px;padding:9px 13px;border:1px solid #eee;border-radius:14px;
    background:#fff;color:#111;font-size:14px;font-weight:800;cursor:pointer;
}
/* همان باگِ رنگِ صورتیِ :focus (پایین توضیح داده شده)، اینجا هم لازم بود. */
.vk-pro-mobile-toggle:focus{background:#fff!important;color:#111!important}
.vk-pro-burger{width:18px;display:flex;flex-direction:column;gap:4px}
.vk-pro-burger span{display:block;height:2px;border-radius:99px;background:#111}

/* ── Mobile overlay ── */
.vk-pro-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:2147482998}

/* ── Mobile side panel ── */
.vk-pro-mobile-panel{
    position:fixed;top:0;right:0;width:min(86vw,380px);height:100dvh;
    padding:14px;background:#fff;box-shadow:-20px 0 60px rgba(17,17,17,.16);
    transform:translateX(105%);transition:transform .25s ease;
    z-index:2147482999;overflow-y:auto;
}
.vk-pro-mobile-panel a,.vk-pro-mobile-acc{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:46px;padding:12px 14px;border:0;border-radius:14px;
    background:transparent;color:#111!important;text-decoration:none!important;
    font-size:14px;font-weight:700;cursor:pointer;
}
.vk-pro-mobile-panel a:hover,.vk-pro-mobile-acc:hover{background:#fff7d1}
/* باگِ رنگِ صورتیِ reset.cssِ پایه (button:focus{background-color:#c36}):
   لمس/کلیکِ آکاردئون و دکمه‌ی بستن :focus می‌دهند و بدونِ این override
   پس‌زمینه‌ی صورتی نشان می‌دادند (ممیزیِ کاربر این را زنده پیدا کرد). */
.vk-pro-mobile-acc:focus{background:transparent!important;color:#111!important}
.vk-pro-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 14px;border-bottom:1px solid #eee;margin-bottom:8px}
.vk-pro-mobile-head strong{font-size:15px;font-weight:900;color:#111}
.vk-pro-mobile-close{width:44px;height:44px;border:1px solid #eee;border-radius:12px;background:#fff;color:#111;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vk-pro-mobile-close:focus{background:#fff!important;color:#111!important}
.vk-pro-mobile-sub-title{display:block;padding:8px 14px 4px;color:#6f6f6f;font-size:11px;font-weight:800}

/* ── آکاردئون موبایل با grid ── */
.vk-pro-mobile-sub{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .3s ease,margin .3s ease,padding .3s ease;
    margin:0;border-radius:16px;background:#fafafa;
}
.vk-pro-mobile-sub-inner{overflow:hidden;padding:0 6px}
.vk-pro-mobile-sub.is-open{grid-template-rows:1fr;margin:2px 0 8px;padding:6px 0}

/* ── Open state classes ── */
.vk-pro-menu.vk-mobile-open .vk-pro-mobile-overlay{display:block}
.vk-pro-menu.vk-mobile-open .vk-pro-mobile-panel{transform:translateX(0)}

/* ── Elementor search z-index fix ── */
.elementor-location-header .elementor-search-form,
.elementor-location-header .elementor-search-form__container,
.elementor-location-header .elementor-search-form__input,
header .elementor-search-form,
header .elementor-search-form__container,
header .elementor-search-form__input{position:relative!important;z-index:12000!important}
.elementor-location-header .elementor-search-form__container,
header .elementor-search-form__container{overflow:visible!important}
.elementor-location-header input[type="search"],
header input[type="search"]{overflow:hidden!important;max-height:none!important}

/* ── Responsive: 1024px ── */
@media(max-width:1024px){
    .vk-pro-link{padding:8px 10px;font-size:13px}
    .vk-pro-desktop{gap:5px}
}

/* ── Responsive: 767px — show mobile toggle, hide desktop ── */
@media(max-width:767px){
    .vk-pro-desktop{display:none!important}
    .vk-pro-mobile-toggle{display:flex!important}
}

/* ── Responsive: 480px — small mobile tweaks ── */
@media(max-width:480px){
    .vk-pro-mobile-panel{width:100vw;border-radius:0}
    .vk-pro-mobile-panel a,.vk-pro-mobile-acc{font-size:13.5px;min-height:44px;padding:11px 12px}
    .vk-pro-mobile-head{padding:4px 4px 12px}
    .vk-pro-mobile-head strong{font-size:14px}
    .vk-pro-mobile-toggle{min-height:38px;padding:7px 11px;font-size:13px}
}