/* =========================================================
   ARYATO PRODUCT CATEGORY MENU (Desktop)
   مقادیر رنگ/اندازه از طریق متغیرهای CSS تزریق می‌شوند
   (پنل تنظیمات ظاهری در ادمین وردپرس). مقدار بعد از کاما
   در هر var() فقط یک "پیش‌فرض اضطراری" است.
========================================================= */

#aryato-products-menu {

  position: relative;

  width: 100%;

  direction: rtl;

  z-index: 99990;

  font-family: var(--menu-font, YekanBakhFaNum, sans-serif);
}


/* =========================================================
   MAIN BUTTON
========================================================= */

#aryato-products-menu .aryato-main-trigger {

  position: relative;
  z-index: 300;

  display: flex;
  align-items: center;

  width: 100%;
  max-width: 320px;
  min-width: 270px;

  min-height: 41px;
  height: 100%;

  padding: 10px 15px;

  background-color: var(--trigger-bg, rgba(21, 96, 255, 1));

  color: var(--trigger-color, #fff);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  line-height: 1;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  border-top-left-radius: var(--wd-brd-radius, .001px);
  border-top-right-radius: var(--wd-brd-radius, .001px);

  box-sizing: border-box;

  transition: all .25s ease;
}


#aryato-products-menu .aryato-main-trigger:hover {

  background-color: var(--trigger-bg, rgba(21, 96, 255, 1));

  color: var(--trigger-color, #fff);

}


#aryato-products-menu .aryato-main-icon {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  margin-inline-end: 9px;

  color: var(--trigger-color, #fff);

  font-family: Arial, sans-serif;

  font-size: 17px;
  font-weight: 400;

  line-height: 1;
}


#aryato-products-menu .aryato-main-trigger > span:nth-child(2) {

  display: inline-block;

  color: var(--trigger-color, #fff);

  font-family: inherit;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.5;
}


#aryato-products-menu .aryato-main-arrow {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  margin-inline-start: auto;

  color: var(--trigger-color, #fff);

  font-family: Arial, sans-serif;

  font-size: 13px;
  font-weight: 400;

  line-height: 1;

  transition: transform .25s ease;
}


#aryato-products-menu.is-open .aryato-main-arrow {

  transform: rotate(180deg);

}


/* =========================================================
   MAIN DROPDOWN
========================================================= */

#aryato-products-menu .aryato-products-dropdown {

  position: absolute;

  top: 100%;

  right: 0;

  display: flex;

  align-items: stretch;

  width: min(var(--dropdown-width, 1100px), calc(100vw - 30px));

  min-height: var(--dropdown-min-height, 300px);

  background: #fff;

  border: 1px solid rgba(0,0,0,.07);

  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);

  box-shadow:
    0 14px 40px rgba(0,0,0,.12);

  overflow: hidden;

  visibility: hidden;

  opacity: 0;

  transform: translateY(-7px);

  pointer-events: none;

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;

  z-index: 99999;
}


#aryato-products-menu.is-open .aryato-products-dropdown {

  visibility: visible;

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}


/* =========================================================
   CATEGORY SIDE
========================================================= */

#aryato-products-menu .aryato-category-list {

  flex: 0 0 var(--category-width, 230px);

  width: var(--category-width, 230px);

  padding: 10px 0;

  background: var(--category-bg, #fafafa);

  border-left: 1px solid rgba(0,0,0,.06);

}


#aryato-products-menu .aryato-category-item {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  min-height: 53px;

  padding: 10px 18px;

  color: var(--category-text, #333);

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition:
    color .16s ease,
    background .16s ease;
}


#aryato-products-menu .aryato-category-item:hover,
#aryato-products-menu .aryato-category-item.is-active {

  color: var(--blue, #2E79FF);

  background: #fff;

}


#aryato-products-menu .aryato-category-item::before {

  content: "";

  position: absolute;

  top: 8px;

  right: 0;

  bottom: 8px;

  width: 3px;

  background: var(--blue, #2E79FF);

  opacity: 0;

  transition: opacity .16s ease;

}


#aryato-products-menu .aryato-category-item:hover::before,
#aryato-products-menu .aryato-category-item.is-active::before {

  opacity: 1;

}


#aryato-products-menu .aryato-category-arrow {

  font-family: Arial, sans-serif;

  font-size: 20px;

  line-height: 1;

  opacity: .6;

  transition:
    transform .16s ease,
    opacity .16s ease;
}


#aryato-products-menu .aryato-category-item:hover .aryato-category-arrow,
#aryato-products-menu .aryato-category-item.is-active .aryato-category-arrow {

  opacity: 1;

  transform: translateX(-3px);

}


/* =========================================================
   MEGA AREA
========================================================= */

#aryato-products-menu .aryato-mega-container {

  flex: 1 1 auto;

  min-width: 0;

  padding: 22px;

  background: var(--mega-bg, #fff);

}


#aryato-products-menu .aryato-mega-panel {

  display: none;

  width: 100%;

  /* پیش‌فرض ۲ ستون؛ تعداد واقعی ستون‌ها بر اساس data-col-count زیر تنظیم می‌شود. */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 30px;

  direction: rtl;
}


#aryato-products-menu .aryato-mega-panel.is-active {

  display: grid;

}


/* تعداد ستون‌های هر دسته را خود آن دسته (data-col-count) تعیین می‌کند؛
   این مقدار از تعداد گروه‌هایی که ادمین برای هر ستون در نظر گرفته مستقل است،
   پس گذاشتن همه‌ی گروه‌ها روی یک ستون باعث می‌شود همه زیر هم بیفتند. */
#aryato-products-menu .aryato-mega-panel[data-col-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

#aryato-products-menu .aryato-mega-panel[data-col-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#aryato-products-menu .aryato-mega-panel[data-col-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#aryato-products-menu .aryato-mega-panel[data-col-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   GROUP
========================================================= */

#aryato-products-menu .aryato-mega-group {

  width: 100%;

  margin: 0 0 14px;

}


#aryato-products-menu .aryato-mega-group h3 {

  margin: 0;

  padding: 0;

  color: var(--blue, #2E79FF);

  font-family: inherit;

  font-size: var(--group-title-size, 18px);

  font-weight: 600;

  line-height: 1.7;

  transition: color .15s ease;
}


#aryato-products-menu .aryato-mega-group h3:hover {

  color: var(--purple, #CF66E9);

}


/* =========================================================
   LIST
========================================================= */

#aryato-products-menu .aryato-mega-list {

  width: 100%;

  margin: 15px 0 0;

  padding: 0;

  list-style: none;

}


#aryato-products-menu .aryato-mega-list li {

  width: 100%;

  margin: 0;

  padding: 0;

  list-style: none;

}


#aryato-products-menu .aryato-mega-list li + li {

  margin-top: 10px;

}


#aryato-products-menu .aryato-mega-list li:not(:last-child) {

  padding-bottom: 10px;

  border-bottom: 1px solid var(--divider, rgba(46,121,255,.16));

}


#aryato-products-menu .aryato-mega-list a {

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 28px;

  gap: 6px;

  margin: 0;

  padding: 0;

  color: var(--item-text, #333);

  text-decoration: none;

  font-family: inherit;

  font-size: var(--item-font-size, 14px);

  font-weight: 400;

  line-height: 1.8;

  transition:
    color .15s ease,
    transform .15s ease;
}


#aryato-products-menu .aryato-mega-list a:hover {

  color: var(--blue-hover, #1A65CE);

  transform: translateX(-2px);

}


#aryato-products-menu .aryato-mega-list img {

  display: block;

  flex: 0 0 auto;

  width: var(--icon-size, 25px);

  height: var(--icon-size, 25px);

  object-fit: contain;

}


/* =========================================================
   IMAGES
========================================================= */

#aryato-products-menu .aryato-mega-image {

  width: 100%;

  margin-top: 5px;

  overflow: hidden;

  border-radius: 4px;

}


#aryato-products-menu .aryato-mega-image img {

  display: block;

  width: 100%;

  height: var(--mega-image-height, 239px);

  object-fit: fill;

}


#aryato-products-menu .aryato-mega-spacer {

  height: 33px;

}


#aryato-products-menu .aryato-empty-title h3 {

  min-height: 31px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  #aryato-products-menu .aryato-main-trigger {

    width: 100%;

    max-width: none;

    min-width: 0;

    min-height: 41px;

    padding: 10px 15px;

    justify-content: flex-start;

  }


  #aryato-products-menu .aryato-products-dropdown {

    position: absolute;

    right: 0;

    width: 100%;

    max-width: 100vw;

    min-height: auto;

    display: block;

    overflow: visible;

  }


  #aryato-products-menu .aryato-category-list {

    width: 100%;

    padding: 0;

    border: 0;

    background: var(--category-bg, #fafafa);

  }


  #aryato-products-menu .aryato-category-item {

    min-height: 48px;

    border-bottom: 1px solid rgba(0,0,0,.06);

  }


  #aryato-products-menu .aryato-mega-container {

    width: 100%;

    padding: 15px;

  }


  #aryato-products-menu .aryato-mega-panel,
  #aryato-products-menu .aryato-mega-panel[data-col-count="1"],
  #aryato-products-menu .aryato-mega-panel[data-col-count="2"],
  #aryato-products-menu .aryato-mega-panel[data-col-count="3"],
  #aryato-products-menu .aryato-mega-panel[data-col-count="4"] {

    grid-template-columns: 1fr;

    gap: 8px;

  }


  #aryato-products-menu .aryato-mega-image img {

    height: auto;

    max-height: var(--mega-image-height, 239px);

  }

}