/* Payam mobile bottom navigation + category drawer v1.2 category arrow polish */
.mobile-bottom-nav,
.mobile-category-drawer{display:none}

@media (max-width:700px){
  :root{--mobile-bottom-nav-height:58px}
  body{padding-bottom:calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom,0px))}
  body.mobile-category-drawer-open{overflow:hidden!important;touch-action:none}

  .mobile-bottom-nav{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:100260;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:var(--mobile-bottom-nav-height);
    padding:2px 4px calc(2px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #e5e7eb;
    background:rgba(255,255,255,.985);
    box-shadow:0 -8px 24px rgba(15,23,42,.08);
    backdrop-filter:blur(12px);
    direction:rtl;
  }
  .mobile-bottom-nav__item{
    position:relative;
    min-width:0;
    min-height:50px;
    padding:3px 2px 1px;
    border:0;
    background:transparent;
    color:#7b8490;
    text-decoration:none;
    font:inherit;
    font-size:9.5px;
    font-weight:700;
    line-height:1.25;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* Header .pro-cart styles must not affect the fixed mobile navigation. */
  .mobile-bottom-nav .mobile-bottom-nav__cart.pro-cart{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:50px!important;
    padding:3px 2px 1px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#7b8490!important;
    box-shadow:none!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  .mobile-bottom-nav .mobile-bottom-nav__cart.pro-cart:hover{
    transform:none!important;
    box-shadow:none!important;
    border:0!important;
  }
  .mobile-bottom-nav .mobile-bottom-nav__cart.pro-cart>span{display:flex!important}
  .mobile-bottom-nav .mobile-bottom-nav__cart.pro-cart>span:last-child{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  .mobile-bottom-nav .mobile-bottom-nav__cart.pro-cart.is-active{color:#111827!important}

  .mobile-bottom-nav__item::before{
    content:"";
    position:absolute;
    top:0;
    width:28px;
    height:3px;
    border-radius:0 0 4px 4px;
    background:transparent;
    transition:.16s ease;
  }
  .mobile-bottom-nav__item.is-active,
  .mobile-bottom-nav__item[aria-expanded="true"]{color:#111827}
  .mobile-bottom-nav__item.is-active::before,
  .mobile-bottom-nav__item[aria-expanded="true"]::before{background:#ef4056}
  .mobile-bottom-nav__icon{
    position:relative;
    width:23px;
    height:23px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-bottom-nav__icon svg{
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-bottom-nav__category .mobile-bottom-nav__icon svg{fill:currentColor;stroke:none}
  .mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon,
  .mobile-bottom-nav__item[aria-expanded="true"] .mobile-bottom-nav__icon{transform:translateY(-1px)}
  .mobile-bottom-nav__cart>b{
    position:absolute!important;
    top:1px!important;
    right:calc(50% - 18px)!important;
    left:auto!important;
    z-index:2;
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:#ef4056!important;
    color:#fff!important;
    font-size:8px!important;
    font-weight:900!important;
    line-height:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .mobile-category-drawer{
    position:fixed;
    inset:0 0 calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom,0px)) 0;
    z-index:100240;
    display:flex;
    flex-direction:column;
    background:#fff;
    direction:rtl;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .18s ease,transform .2s ease,visibility 0s linear .2s;
  }
  .mobile-category-drawer.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition:opacity .18s ease,transform .2s ease,visibility 0s linear 0s;
  }
  .mobile-category-drawer__header{
    flex:0 0 auto;
    min-height:68px;
    padding:10px 12px;
    border-bottom:1px solid #edf0f3;
    background:#fff;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .mobile-category-drawer__back{
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    border:0;
    border-radius:12px;
    background:#fff;
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-category-drawer__back svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-category-drawer__search{
    min-width:0;
    flex:1;
    height:44px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #e3e7eb;
    border-radius:14px;
    background:#f4f6f8;
  }
  .mobile-category-drawer__search input{
    min-width:0;
    flex:1;
    height:100%;
    padding:0 13px;
    border:0;
    outline:0;
    background:transparent;
    color:#374151;
    font:inherit;
    font-size:12px;
  }
  .mobile-category-drawer__search button{
    width:44px;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    color:#6b7280;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-category-drawer__search svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
  }
  .mobile-category-drawer__body{
    min-height:0;
    flex:1;
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    overflow:hidden;
    background:#fff;
  }
  .mobile-category-drawer__rail{
    min-width:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#f3f4f6;
    border-left:1px solid #e5e7eb;
    scrollbar-width:none;
  }
  .mobile-category-drawer__rail::-webkit-scrollbar{display:none}
  .mobile-category-tab{
    position:relative;
    width:100%;
    min-height:88px;
    padding:10px 5px;
    border:0;
    border-bottom:1px solid #e0e3e7;
    background:transparent;
    color:#6b7280;
    font:inherit;
    font-size:10px;
    font-weight:700;
    line-height:1.45;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
  }
  .mobile-category-tab::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:3px;
    background:transparent;
  }
  .mobile-category-tab.is-active{
    background:#fff;
    color:#e11d48;
  }
  .mobile-category-tab.is-active::after{background:#ef4056}
  .mobile-category-tab__icon{
    width:31px;
    height:31px;
    border-radius:9px;
    overflow:hidden;
    color:currentColor;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
  }
  .mobile-category-tab__icon img{width:100%;height:100%;object-fit:contain}
  .mobile-category-tab__icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6}
  .mobile-category-drawer__panels{
    min-width:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 14px 24px;
    background:#fff;
  }
  .mobile-category-panel{display:none;animation:mobileCategoryPanelIn .16s ease}
  .mobile-category-panel.is-active{display:block}
  @keyframes mobileCategoryPanelIn{from{opacity:.35;transform:translateX(-4px)}to{opacity:1;transform:none}}
  .mobile-category-panel__all{
    min-height:52px;
    padding:13px 0;
    border-bottom:1px solid #edf0f3;
    color:#0f4c6e;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .mobile-category-panel__all i,
  .mobile-category-row i{
    position:relative;
    width:20px;
    height:20px;
    flex:0 0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#64748b;
  }
  .mobile-category-panel__all i::before,
  .mobile-category-panel__all i::after,
  .mobile-category-row i::before,
  .mobile-category-row i::after{
    content:"";
    position:absolute;
    width:8px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    right:5px;
    transform-origin:right center;
  }
  .mobile-category-panel__all i::before,
  .mobile-category-row i::before{top:7px;transform:rotate(-45deg)}
  .mobile-category-panel__all i::after,
  .mobile-category-row i::after{top:11px;transform:rotate(45deg)}
  .mobile-category-panel>h2{
    margin:18px 0 7px;
    color:#111827;
    font-size:16px;
    line-height:1.7;
    font-weight:950;
  }
  .mobile-category-panel__list{display:block}
  .mobile-category-row,
  .mobile-category-branch__trigger{
    width:100%;
    min-height:55px;
    padding:13px 0;
    border:0;
    border-bottom:1px solid #eceff2;
    background:transparent;
    color:#20242a;
    text-decoration:none;
    font:inherit;
    font-size:13.5px;
    font-weight:800;
    line-height:1.7;
    text-align:right;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .mobile-category-branch__trigger i{
    position:relative;
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
  }
  .mobile-category-branch__trigger i::before,
  .mobile-category-branch__trigger i::after{
    content:"";
    position:absolute;
    top:10px;
    width:7px;
    height:2px;
    border-radius:2px;
    background:#475569;
  }
  .mobile-category-branch__trigger i::before{right:4px;transform:rotate(45deg)}
  .mobile-category-branch__trigger i::after{left:4px;transform:rotate(-45deg)}
  .mobile-category-branch.is-open .mobile-category-branch__trigger i{
    transform:rotate(180deg);
    background:#fff1f2;
    border-color:#fecdd3;
  }
  .mobile-category-row:hover,
  .mobile-category-branch__trigger:hover,
  .mobile-category-row:active,
  .mobile-category-branch__trigger:active{color:#111827}
  .mobile-category-row:hover i,
  .mobile-category-row:active i,
  .mobile-category-panel__all:hover i,
  .mobile-category-panel__all:active i{
    color:#ef4056;
  }
  .mobile-category-branch__content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 12px;
    background:#fafafa;
    transition:max-height .24s ease,opacity .18s ease,padding .24s ease;
  }
  .mobile-category-branch.is-open .mobile-category-branch__content{
    opacity:1;
    padding-top:5px;
    padding-bottom:7px;
  }
  .mobile-category-child{
    display:block;
    padding:9px 3px;
    border-bottom:1px dashed #e6e8eb;
    color:#4b5563;
    text-decoration:none;
    font-size:12px;
    line-height:1.7;
  }
  .mobile-category-child:last-child{border-bottom:0}
  .mobile-category-child--all{color:#e11d48;font-weight:850}
  .mobile-category-drawer__empty{
    flex:1;
    padding:50px 20px;
    text-align:center;
    color:#6b7280;
  }
  .mobile-category-drawer__empty a{
    display:inline-flex;
    margin-top:12px;
    padding:10px 16px;
    border-radius:10px;
    background:#ef4056;
    color:#fff;
    text-decoration:none;
    font-weight:850;
  }
}

@media (max-width:390px){
  .mobile-category-drawer__body{grid-template-columns:92px minmax(0,1fr)}
  .mobile-category-tab{min-height:82px;font-size:9.5px}
  .mobile-category-drawer__panels{padding-inline:12px}
  .mobile-bottom-nav__item{font-size:10px}
}