/* ==========================================================================
   Parin Sanat – Header Categories (Desktop + Mobile)
   یکپارچه، RTL-safe، ریسپانسیو، کم‌ریسک
   ========================================================================== */

/* ---------------------------
   Tokens
   --------------------------- */
:root{
  --psp-bg:#fff;
  --psp-bg-elev:#fff;
  --psp-text:#1f2328;
  --psp-muted:#667085;
  --psp-primary:#2563eb;
  --psp-accent:#0ea5e9;
  --psp-border:rgba(0,0,0,.08);
  --psp-border-strong:rgba(0,0,0,.12);
  --psp-radius:14px;
  --psp-radius-sm:10px;
  --psp-gap:12px;
  --psp-pad:12px;
  --psp-speed:.2s;
  --psp-shadow:0 10px 28px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------
   Desktop Mega Menu (trigger)
   --------------------------- */
#menucats{
  display:inline-flex;gap:8px;align-items:center;
  padding:10px 14px;border-radius:var(--psp-radius-sm);
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.02));
  cursor:pointer;user-select:none;
  transition:background var(--psp-speed),transform var(--psp-speed);
}
#menucats:hover{background:rgba(37,99,235,.08)}
#menucats:active{transform:scale(.98)}

/* کانتینر مگامنو */
#menucats-container{
  position:absolute;
  inset-inline-start:0; inset-block-start:calc(100% + 8px);
  display:none; /* در دسکتاپ با hover یا .open نمایش داده می‌شود */
  background:var(--psp-bg-elev);
  border:1px solid var(--psp-border);
  box-shadow:var(--psp-shadow);
  border-radius:var(--psp-radius);
  padding:var(--psp-pad);
  gap:var(--psp-gap);
  z-index:50;
  max-width:min(96vw,1280px);
  min-height:320px;
}

/* ستون سطح اول */
.menucats-cats{
  min-width:260px;max-width:320px;padding:6px;
  border-inline-end:1px solid var(--psp-border);
  max-height:62vh;overflow:auto;scrollbar-width:thin;
}
.menucats-cats::-webkit-scrollbar{width:8px}
.menucats-cats::-webkit-scrollbar-thumb{background:var(--psp-border-strong);border-radius:999px}

.menucats-cats-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;color:var(--psp-text);
  transition:background var(--psp-speed),color var(--psp-speed);
}
.menucats-cats-item:hover{background:rgba(37,99,235,.10);color:var(--psp-primary)}
.menucats-cats-item:focus-visible{outline:2px solid var(--psp-primary);outline-offset:2px}

/* پنل زیرمنو برای هر دسته سطح اول */
.menucats-subcats{display:none;padding:16px;min-width:560px;max-width:min(78vw,980px);max-height:62vh;overflow:auto}
.menucats-subcats-all{font-weight:700;margin-bottom:10px;display:inline-flex;gap:6px;color:var(--psp-primary)}
.menucats-subcats-all:hover{text-decoration:underline}

/* درخت بازگشتی (ستون‌بندی خودکار) */
.menucats-tree{list-style:none;margin:0;padding:0;columns:3 240px;column-gap:24px;direction:rtl}
@media (max-width:1200px){.menucats-tree{columns:2 240px}}
@media (max-width:900px){.menucats-tree{columns:1 240px}}
.menucats-tree .cat-item{break-inside:avoid;margin:4px 0}
.menucats-tree .cat-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px;border-radius:8px;line-height:1.9;color:var(--psp-text);
  transition:background var(--psp-speed),color var(--psp-speed);white-space:nowrap;
}
.menucats-tree .cat-link:hover{background:rgba(0,0,0,.05)}
.menucats-tree ul{list-style:none;margin:6px 0 8px;padding-inline-start:14px;border-inline-start:1px dashed var(--psp-border)}

/* ---------------------------
   Desktop behavior restore
   --------------------------- */
@media (min-width:1025px){
  /* باز شدن با hover روی گروه منو یا نگه داشتن ماوس داخل پنل */
  .header-menus-group:hover #menucats-container,
  #menucats-container:hover{display:flex}
  /* اگر با JS کلاس .open بدهی هم باز بماند */
  #menucats-container.open{display:flex}

  /* سوییچ پنل‌ها توسط JS: فقط .show دیده شود */
  .menucats-subcats{display:none}
  .menucats-subcats.show{display:block}
}

/* در موبایل، پنل دسکتاپ اصلاً نمایش داده نشود */
@media (max-width:1024px){
  #menucats-container{display:none!important;visibility:hidden!important}
}

/* ---------------------------
   Mobile Slide-in Menu (Accordion)
   --------------------------- */

/* Wrapper تار + جلوگیری از کلیک زیر آن */
.mobile-category-menu{
  position:fixed; inset:0; z-index:1000;
  background:rgba(16,24,40,.30);
  backdrop-filter:blur(4px);
  transition:opacity .25s ease;
}
.mobile-category-menu.hide{opacity:0;pointer-events:none}

/* پنل */
.mobile-category-header,
.mobile-category-body{
  width:min(92vw,420px);
  height:100dvh;
  background:#fff; color:#0f172a;
  box-shadow:-10px 0 30px rgba(0,0,0,.12);
}

/* هدر داخل پنل */
.mobile-category-header{
  position:sticky; top:0; z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid #eef2f7;
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  font-family:inherit;
}
.mobile-category-header .title{font-weight:700;font-size:16px}
.mobile-category-header .back-btn{color:#243B6B;font-weight:600;display:inline-flex;gap:6px}

/* بدنه اسکرول‌پذیر */
.mobile-category-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:22px;
}

/* آیتم‌ها */
.category-item{border-bottom:1px dashed rgba(0,0,0,.06)}
.category-title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;min-height:52px;
}
.main-category-link{color:#0f172a;font-size:14px;font-weight:700;text-decoration:none}
.main-category-link:active{opacity:.85}

/* دکمه باز/بستن */
.toggle-btn{
  width:36px;height:36px;border-radius:10px;
  display:inline-grid;place-items:center;flex:0 0 auto;
  transition:background-color .2s ease;
}
.toggle-btn i{transition:transform .25s ease}
.toggle-btn.open i{transform:rotate(-180deg)}
.toggle-btn:active{background:rgba(0,0,0,.06)}

/* آکاردئون: انیمیشن اسلاید نرم بدون ارتفاع محاسباتی */
.subcategory-list{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .25s ease, opacity .2s ease, padding .2s ease;
  overflow:hidden; opacity:1; padding-inline:10px;
}
.subcategory-list.hide{
  grid-template-rows:0fr; opacity:0; padding-inline:10px;
}
.subcategory-list-inner{min-height:0}

/* لینک “مشاهده همه …” */
.subcategory-list .main-category-link{
  display:inline-flex;align-items:center;gap:6px;
  margin:6px 6px 8px 6px; padding:8px 10px;
  border-radius:10px;border:1px dashed #e5e7eb;
  color:#243B6B;background:linear-gradient(180deg,rgba(36,59,107,.06),rgba(36,59,107,.02));
}

/* تو رفتگی‌های سطحی برای درخت بازگشتی */
.subcategory-list.level .category-title{position:relative;padding-inline-start:18px}
.subcategory-list.level .category-title::before{
  content:"";position:absolute;right:10px;top:16px;width:4px;height:4px;border-radius:50%;background:#cbd5e1
}

/* لینک‌های زیرشاخه */
.subcategory-link{
  display:block;padding:10px 12px 10px 8px;border-radius:8px;
  color:#334155;font-size:13px;text-decoration:none
}
.subcategory-link:active{background:rgba(15,23,42,.05)}

/* وقتی منوی موبایل باز است، اسکرول صفحه بسته شود */
body.psp-menu-open{overflow:hidden;touch-action:none}

/* ریز بهینه برای گوشی‌های کوچک */
@media (max-width:360px){
  .mobile-category-header{padding:12px}
  .category-title{padding:12px}
  .main-category-link{font-size:13.5px}
}
/* ==== Mobile menu FIX (put at the very end) ==== */

/* پنل سمت راست: آیتم‌ها را به سمت راست overlay بیاور */
.mobile-category-menu{
  display: flex;
  justify-content: flex-end;
}

/* هدر نباید height:100dvh داشته باشد */
.mobile-category-header{
  width: min(92vw, 420px);
  height: auto;                /* override */
}

/* بدنه: اسکرول‌پذیر با حداکثر ارتفاع منطقی */
.mobile-category-body{
  width: min(92vw, 420px);
  height: auto;                /* override */
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* اگر خواستی دقیق‌ترش کنی، ارتفاع را بر اساس ارتفاع هدر محدود کن: */
  max-height: calc(100dvh - 56px); /* 56px = حد تقریبی هدر؛ در صورت نیاز تنظیمش کن */
}


/* آیکون باز/بسته هم وقتی باز است بچرخد */
.mobile-category-menu .toggle-btn.open i{
  transform: rotate(180deg);
}
/* ==== Mobile menu: FULL-WIDTH panel (put these at the very end) ==== */
@media (max-width: 1024px) {
  /* خود اوورلی رو نگه‌دار، ولی پنل رو تمام‌عرض کن */
  .mobile-category-menu{
    justify-content: flex-start;      /* پنل از سمت راست بیاد ولی کش بیاد تا کل عرض */
  }
  /* هدر و بادی داخل پنل کل عرض صفحه را بگیرند */
  .mobile-category-header,
  .mobile-category-body{
    width: 100vw !important;
    max-width: 100vw !important;
    border-inline-start: 0;           /* مرز کنار پنل لازم نیست */
    box-shadow: none;                  /* سایه کناری حذف شود تا یک‌پارچه شود */
  }
  /* اسکرول فقط روی بدنه‌ی لیست */
  .mobile-category-body{
    height: auto;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* اگر بک‌دراپ شیشه‌ای نمی‌خواهی، کامنت بعدی را بردار */
  /* .mobile-category-menu::before{ display:none; } */
}

/* اگر از انیمیشن translateX برای خودِ پنل استفاده می‌کنی و روی container hide/ show می‌زنی،
   این‌ها را هم می‌توانی نگه داری: */
.mobile-category-menu{ transition: opacity .25s ease; }
.mobile-category-menu.hide{ opacity: 0; pointer-events: none; }
#main-header >.wrapper {
padding: 10px 16px !important;
}