/* ================== HEADER RTL CLEAN FINAL ================== */

:root{
  --hc-bg:#ffffff;
  --hc-text:#121212;
  --hc-muted:#6b6b6b;
  --hc-accent:#E10600;
  --hc-cta-bg:#2B2F6B;
  --hc-cta-radius:10px;
  --hc-height:72px;
  --hc-container:1200px;
}

.hc-header, .hc-header *{ direction:rtl; }

/* ===== پایه ===== */
.hc-header{
    background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 40%, #e8e8e8 100%);
  box-shadow: 0 0 50px rgba(0,0,0,0.06);
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
  position:relative;
  z-index:80;
}

.hc-header-inner{
  max-width:var(--hc-container);
  margin:0 auto;
  height:var(--hc-height);
  display:flex;
  align-items:center;
  padding:0 18px;
  width:100%;
  gap:18px;
}

/* ترتیب در دسکتاپ */
.hc-right{ order:1; display:flex; align-items:center; } /* لوگو سمت راست */
.hc-center{ order:2; flex:1; display:flex; justify-content:center; } /* منو وسط */
.hc-left{ order:3; display:flex; align-items:center; gap:14px; margin-right:auto; } /* دکمه‌ها سمت چپ */

/* ===== لوگو ===== */
.custom-logo,
.hc-logo-img{
  height:52px;
  width:auto;
  display:block;
}

/* ===== دکمه‌ها ===== */
.hc-cta-store{
  background:var(--hc-cta-bg);
  color:#fff;
  padding:10px 16px;
  border-radius:var(--hc-cta-radius);
  text-decoration:none;
  font-weight:700;
  transition:.15s;
}
.hc-cta-store:hover{ transform:translateY(-2px); }

.hc-login{
  padding:8px 12px;
  border:1.6px solid var(--hc-accent);
  border-radius:8px;
  color:var(--hc-accent);
  text-decoration:none;
  font-weight:700;
}

/* ===== سبد خرید ===== */
.hc-cart{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--hc-text);
  font-weight:700;
}
.hc-cart-count{
  background:var(--hc-accent);
  color:#fff;
  border-radius:999px;
  padding:3px 7px;
  font-size:12px;
}

/* ===== منوی افقی دسکتاپ ===== */
.hc-main-menu{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:28px;
  list-style:none !important;
  margin:0;
  padding:0;
}
.hc-main-menu li{ position:relative; }
.hc-main-menu a{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  padding:8px 4px;
  color:var(--hc-text);
}
.hc-main-menu a:hover{ color:var(--hc-accent); }

/* ===== همبرگر (دسکتاپ مخفی) ===== */
.hc-menu-toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
}
.hc-hamb-line{
  width:20px; height:2px;
  background:var(--hc-text);
  margin:3px 0;
  border-radius:2px;
}

/* ===== منوی موبایل کشویی ===== */
.hc-mobile-menu{
  position:fixed;
  right:0; top:0;
  width:320px; height:100vh;
  background:var(--hc-bg);
  transform:translateX(110%);
  transition:.28s cubic-bezier(.2,.9,.2,1);
  box-shadow:-10px 0 30px rgba(0,0,0,0.1);
  padding:22px;
  overflow:auto;
  z-index:200;
}
.hc-mobile-menu[aria-hidden="false"]{
  transform:translateX(0);
}

.hc-mobile-nav{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.hc-mobile-nav a{
  padding:12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--hc-text);
  font-weight:700;
}
.hc-mobile-nav a:hover{
  background:rgba(225,0,0,0.06);
  color:var(--hc-accent);
}

/* ===== واکنش‌گرا ===== */
@media(max-width:980px){

  .hc-center{ display:none; } /* منو مخفی -> فقط آیکون‌ها */
  
  /* ترتیب موبایل: همبرگر راست، لوگو وسط، حساب/سبد چپ */
  .hc-right{ order:2; flex:1; justify-content:center; }
  .hc-center{ order:3; }
  .hc-left{ order:1; margin-right:0; }

  .hc-menu-toggle{
    display:flex;
    border:1px solid #ccc;
    border-radius:8px;
  }

  .hc-login{ padding:8px; }
  .hc-cta-store{ padding:8px 12px; }
  .custom-logo, .hc-logo-img{ height:40px; }
}

@media(max-width:420px){
  .custom-logo, .hc-logo-img{ height:34px; }
}






/* FIX — جلوگیری از Display: Block و Bullet در دسکتاپ */

@media(min-width: 981px){

  /* حذف نقطه‌های ul هر قالبی */
  .hc-center ul,
  .hc-main-menu{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* مجبور کردن لیست به حالت افقی */
  .hc-center ul li,
  .hc-main-menu > li{
    display: inline-flex !important;
    align-items: center;
    margin: 0 14px !important;
  }

  /* لینک‌ها هم افقی و دارای ریتم درست */
  .hc-main-menu a{
    display: inline-block !important;
    white-space: nowrap;
  }
}




@media (max-width:980px){

  /* چینش کلی: همبرگری چپ — لوگو راست */
  .hc-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px !important;
    position: relative;
  }

  /* همبرگری دقیقاً چپ */
  .hc-menu-toggle{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* لوگو دقیقاً بچسبد به راست */
  .custom-logo{
    position: absolute;
    top: 12px;        /* فاصله از بالا */
    right: 12px;      /* فاصله از راست */
    max-width: 112px; /* همون سایزی که گفتی */
    height: auto;
   
    z-index: 1;    /* که زیر منو و چیزای عجیب نره */
  }

  /* چون فقط دو المان داریم، دکمه‌ها و منوی افقی مخفی */
  .hc-left,
  .hc-center{
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hc-menu-toggle .custom-logo-link {
    display: none;
  }
}