/* ==========================================================================
   AraShop — LAYOUT
   هدر، ناوبری، کشوی موبایل، جستجوی تمام‌صفحه، نوار پایین موبایل،
   سربرگ صفحات و فوتر.
   ========================================================================== */

/* =========================================================
   1) TOPBAR
   ========================================================= */
.ara-topbar{
  position:relative; z-index:2;
  background:var(--ara-ink); color:color-mix(in srgb, var(--ara-bg) 88%, transparent);
  font-size:var(--ara-fs-xs);
}
[data-ara-theme="dark"] .ara-topbar{ background:color-mix(in srgb, var(--ara-primary) 22%, #0B0918); }
.ara-topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ara-s4);
  min-height:38px; padding-block:6px;
}
.ara-topbar-msg{ display:inline-flex; align-items:center; gap:7px; min-width:0; }
.ara-topbar-msg svg{ width:15px; height:15px; flex:0 0 auto; color:var(--ara-accent); }
.ara-topbar-msg span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ara-topbar-links{ display:none; align-items:center; gap:var(--ara-s5); flex:0 0 auto; }
.ara-topbar-links a{ display:inline-flex; align-items:center; gap:5px; opacity:.85; transition:opacity var(--ara-t) var(--ara-ease); }
.ara-topbar-links a:hover{ opacity:1; color:var(--ara-accent); }
.ara-topbar-links svg{ width:14px; height:14px; }
@media (min-width:900px){ .ara-topbar-links{ display:flex; } }

/* =========================================================
   2) HEADER
   ========================================================= */
.ara-header{
  position:sticky; top:0; z-index:120;
  transition:transform var(--ara-t) var(--ara-ease);
}
.ara-header-bar{
  background:var(--ara-glass-bg);
  -webkit-backdrop-filter:blur(var(--ara-blur)) saturate(var(--ara-saturate));
  backdrop-filter:blur(var(--ara-blur)) saturate(var(--ara-saturate));
  border-bottom:1px solid var(--ara-glass-line-soft);
  box-shadow:inset 0 1px 0 var(--ara-glass-inner);
  transition:box-shadow var(--ara-t) var(--ara-ease), background-color var(--ara-t) var(--ara-ease);
}
.ara-header.is-stuck .ara-header-bar{
  box-shadow:var(--ara-e2), inset 0 1px 0 var(--ara-glass-inner);
  background:var(--ara-glass-bg-strong);
}
/* پنهان‌شدن هدر هنگام اسکرول به پایین روی موبایل (فضای بیشتر برای محتوا) */
.ara-header.is-hidden{ transform:translateY(-100%); }
@media (min-width:1024px){ .ara-header.is-hidden{ transform:none; } }

.ara-header-inner{
  display:flex; align-items:center; gap:var(--ara-s3);
  min-height:var(--ara-header-h);
}

/* ---- برند ---- */
.ara-brand{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  margin-inline-end:auto;
}
.ara-brand-mark{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ara-primary); color:var(--ara-on-primary);
  font-weight:800; font-size:18px; letter-spacing:-.03em;
  box-shadow:var(--ara-e-primary), inset 0 1px 0 rgba(255,255,255,.35);
}
.ara-brand-mark svg{ width:22px; height:22px; }
.ara-brand img{ max-height:42px; width:auto; }
.ara-brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.ara-brand-text strong{ font-size:var(--ara-fs-md); font-weight:800; letter-spacing:-.02em; color:var(--ara-ink); }
.ara-brand-text small{ font-size:10.5px; color:var(--ara-ink-mute); font-weight:500; }
@media (max-width:400px){ .ara-brand-text small{ display:none; } }

/* ---- ناوبری اصلی ---- */
.ara-nav{ flex:0 1 auto; min-width:0; }
.ara-nav > ul{ display:flex; align-items:center; gap:2px; }
.ara-nav li{ position:relative; }
.ara-nav a{
  display:flex; align-items:center; gap:5px;
  padding:9px 14px; border-radius:var(--ara-r-pill);
  font-size:var(--ara-fs-sm); font-weight:600; color:var(--ara-ink-soft);
  white-space:nowrap;
  transition:background-color var(--ara-t) var(--ara-ease), color var(--ara-t) var(--ara-ease);
}
.ara-nav a:hover,
.ara-nav .current-menu-item > a,
.ara-nav .current_page_item > a,
.ara-nav .current-menu-ancestor > a{ background:var(--ara-primary-tint); color:var(--ara-primary); }

/* فلش زیرمنو */
.ara-nav .menu-item-has-children > a::after{
  content:""; width:14px; height:14px; flex:0 0 auto; opacity:.6;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--ara-t) var(--ara-ease);
}
.ara-nav .menu-item-has-children:hover > a::after{ transform:rotate(180deg); }

/* زیرمنوی شیشه‌ای */
.ara-nav .sub-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-start:0; z-index:20;
  min-width:216px; padding:8px;
  border-radius:var(--ara-r-md);
  background:var(--ara-glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  border:1px solid var(--ara-glass-line);
  box-shadow:var(--ara-e3), inset 0 1px 0 var(--ara-glass-inner);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--ara-t) var(--ara-ease), transform var(--ara-t) var(--ara-ease-out), visibility var(--ara-t);
}
.ara-nav li:hover > .sub-menu,
.ara-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.ara-nav .sub-menu a{ padding:10px 13px; border-radius:var(--ara-r-xs); font-weight:600; }
.ara-nav .sub-menu .sub-menu{ top:-8px; inset-inline-start:calc(100% + 8px); }

/* ---- اکشن‌های سمت چپ هدر ---- */
.ara-header-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.ara-cart-link{ position:relative; }
.ara-theme-toggle .ara-icon-moon{ display:none; }
[data-ara-theme="dark"] .ara-theme-toggle .ara-icon-moon{ display:block; }
[data-ara-theme="dark"] .ara-theme-toggle .ara-icon-sun{ display:none; }

/* =========================================================
   3) MOBILE DRAWER
   ========================================================= */
.ara-drawer{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:200;
  width:min(88vw, 360px);
  display:flex; flex-direction:column;
  background:var(--ara-glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  border-inline-start:1px solid var(--ara-glass-line);
  box-shadow:var(--ara-e4);
  transform:translateX(-100%);
  transition:transform var(--ara-t-slow) var(--ara-ease-out);
  overflow-y:auto; overscroll-behavior:contain;
}
[dir="rtl"] .ara-drawer{ transform:translateX(100%); }
.ara-drawer.is-open{ transform:none!important; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ara-drawer{ background:var(--ara-bg); }
}

.ara-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ara-s3);
  padding:var(--ara-s4) var(--ara-s5);
  border-bottom:1px solid var(--ara-glass-line-soft);
  position:sticky; top:0; z-index:2;
  background:inherit;
}
.ara-drawer-body{ padding:var(--ara-s5); flex:1 1 auto; }
.ara-drawer-menu > ul{ display:flex; flex-direction:column; gap:2px; }
.ara-drawer-menu li{ border-radius:var(--ara-r-sm); }
.ara-drawer-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ara-s3);
  padding:13px 14px; border-radius:var(--ara-r-sm);
  font-size:var(--ara-fs-base); font-weight:600; color:var(--ara-ink);
  transition:background-color var(--ara-t) var(--ara-ease), color var(--ara-t) var(--ara-ease);
}
.ara-drawer-menu a:hover,
.ara-drawer-menu .current-menu-item > a{ background:var(--ara-primary-tint); color:var(--ara-primary); }
.ara-drawer-menu .sub-menu{
  margin:2px 0 6px; padding-inline-start:var(--ara-s4);
  border-inline-start:2px solid var(--ara-glass-line);
}
.ara-drawer-menu .sub-menu a{ padding:10px 12px; font-size:var(--ara-fs-sm); font-weight:500; color:var(--ara-ink-soft); }
.ara-drawer-foot{
  padding:var(--ara-s5); border-top:1px solid var(--ara-glass-line-soft);
  display:flex; flex-direction:column; gap:var(--ara-s3);
  position:sticky; bottom:0; background:inherit;
}
.ara-drawer-social{ display:flex; align-items:center; gap:var(--ara-s2); justify-content:center; }

/* =========================================================
   4) FULLSCREEN SEARCH
   ========================================================= */
.ara-searchbox{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh var(--ara-gutter) var(--ara-s6);
  background:color-mix(in srgb, var(--ara-bg) 72%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  opacity:0; visibility:hidden;
  transition:opacity var(--ara-t) var(--ara-ease), visibility var(--ara-t);
}
.ara-searchbox.is-open{ opacity:1; visibility:visible; }
.ara-searchbox-inner{
  width:100%; max-width:640px;
  transform:translateY(-16px) scale(.98);
  transition:transform var(--ara-t-slow) var(--ara-ease-out);
}
.ara-searchbox.is-open .ara-searchbox-inner{ transform:none; }
.ara-searchbox form{
  display:flex; align-items:center; gap:var(--ara-s3);
  padding:8px 8px 8px var(--ara-s5);
  border-radius:var(--ara-r-pill);
  background:var(--ara-glass-bg-strong);
  border:1px solid var(--ara-glass-line);
  box-shadow:var(--ara-e4), inset 0 1px 0 var(--ara-glass-inner);
}
.ara-searchbox input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font-size:var(--ara-fs-md); font-weight:600; color:var(--ara-ink); padding:12px 0;
}
.ara-searchbox-close{ margin:var(--ara-s5) auto 0; display:flex; }
.ara-searchbox-tags{
  display:flex; flex-wrap:wrap; gap:var(--ara-s2);
  justify-content:center; margin-top:var(--ara-s5);
}
.ara-searchbox-tags small{ width:100%; text-align:center; color:var(--ara-ink-mute); margin-bottom:4px; }

/* =========================================================
   5) MOBILE BOTTOM NAV
   ========================================================= */
.ara-bottomnav{
  position:fixed; inset-inline:0; bottom:0; z-index:110;
  display:flex; align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom, 0);
  background:var(--ara-glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  backdrop-filter:blur(var(--ara-blur-lg)) saturate(var(--ara-saturate));
  border-top:1px solid var(--ara-glass-line);
  box-shadow:0 -8px 28px rgba(23,18,51,.10), inset 0 1px 0 var(--ara-glass-inner);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ara-bottomnav{ background:var(--ara-bg); }
}
.ara-bottomnav a{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--ara-bottomnav-h); padding:8px 2px;
  font-size:10.5px; font-weight:700; color:var(--ara-ink-mute);
  transition:color var(--ara-t) var(--ara-ease);
}
.ara-bottomnav a svg{ width:22px; height:22px; }
.ara-bottomnav a span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ara-bottomnav a.is-active{ color:var(--ara-primary); }
.ara-bottomnav a.is-active::before{
  content:""; position:absolute; top:0; inset-inline-start:50%; transform:translateX(50%);
  width:30px; height:3px; border-radius:0 0 4px 4px; background:var(--ara-primary);
}
.ara-bottomnav .ara-count{ top:4px; inset-inline-start:calc(50% - 22px); border-color:transparent; }
@media (min-width:768px){ .ara-bottomnav{ display:none; } }

/* دکمه‌ی شناور تماس/واتس‌اپ */
.ara-fab{
  position:fixed; z-index:100;
  inset-inline-start:16px; bottom:calc(var(--ara-bottomnav-h) + 14px);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ara-accent); color:var(--ara-on-accent);
  box-shadow:var(--ara-e-accent), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform var(--ara-t) var(--ara-spring);
}
.ara-fab svg{ width:25px; height:25px; }
.ara-fab:hover{ transform:scale(1.08); }
@media (min-width:768px){ .ara-fab{ bottom:24px; inset-inline-start:24px; } }

/* =========================================================
   6) PAGE HERO (سربرگ صفحات داخلی)
   ========================================================= */
.ara-phero{ padding-block:var(--ara-s7) var(--ara-s6); }
.ara-phero-inner{
  border-radius:var(--ara-r-xl);
  padding:var(--ara-s7) var(--ara-s6);
  text-align:center;
  position:relative; overflow:hidden;
}
.ara-phero h1{ margin:0 0 8px; font-size:var(--ara-fs-2xl); }
.ara-phero p{ margin:0; color:var(--ara-ink-soft); font-size:var(--ara-fs-sm); max-width:62ch; margin-inline:auto; }
.ara-phero .ara-crumbs{ justify-content:center; margin-top:var(--ara-s4); }
@media (min-width:1024px){
  .ara-phero-inner{ padding:var(--ara-s8) var(--ara-s7); }
}

/* =========================================================
   7) FOOTER
   ========================================================= */
.ara-footer{
  position:relative; margin-top:var(--ara-s10);
  padding-bottom:var(--ara-s6);
}
.ara-footer-cta{
  position:relative; z-index:2;
  border-radius:var(--ara-r-xl);
  padding:var(--ara-s7);
  display:grid; gap:var(--ara-s5); align-items:center;
  margin-bottom:calc(var(--ara-s7) * -1 - var(--ara-s5));
  background:var(--ara-primary);
  color:var(--ara-on-primary);
  box-shadow:var(--ara-e3), inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;
}
.ara-footer-cta::after{
  content:""; position:absolute; z-index:0; border-radius:50%;
  width:280px; height:280px; inset-inline-end:-90px; top:-140px;
  background:rgba(255,255,255,.12);
}
.ara-footer-cta > *{ position:relative; z-index:1; }
.ara-footer-cta h3{ color:inherit; margin:0 0 6px; font-size:var(--ara-fs-xl); }
.ara-footer-cta p{ margin:0; opacity:.88; font-size:var(--ara-fs-sm); }
.ara-footer-cta form{ display:flex; gap:var(--ara-s2); flex-wrap:wrap; }
.ara-footer-cta input{
  flex:1 1 200px; min-width:0; min-height:50px; padding:0 var(--ara-s5);
  border-radius:var(--ara-r-pill); border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16); color:#fff; outline:none;
}
.ara-footer-cta input::placeholder{ color:rgba(255,255,255,.7); }
.ara-footer-cta input:focus{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.6); }
@media (min-width:900px){
  .ara-footer-cta{ grid-template-columns:1fr minmax(320px, 42%); padding:var(--ara-s8); }
}

.ara-footer-main{
  border-radius:var(--ara-r-xl);
  padding:calc(var(--ara-s7) + var(--ara-s6)) var(--ara-s6) var(--ara-s6);
}
.ara-footer-main.has-cta{ padding-top:calc(var(--ara-s8) + var(--ara-s7)); }
.ara-footer-grid{
  display:grid; grid-template-columns:1fr; gap:var(--ara-s7);
  padding-bottom:var(--ara-s6);
}
@media (min-width:640px){ .ara-footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .ara-footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--ara-s6); } }

.ara-footer-col h4{ font-size:var(--ara-fs-base); margin:0 0 var(--ara-s4); }
.ara-footer-col ul{ display:flex; flex-direction:column; gap:2px; }
.ara-footer-col ul a{
  display:inline-block; padding:6px 0; font-size:var(--ara-fs-sm); color:var(--ara-ink-soft);
  transition:color var(--ara-t) var(--ara-ease), padding-inline-start var(--ara-t) var(--ara-ease);
}
.ara-footer-col ul a:hover{ color:var(--ara-primary); padding-inline-start:6px; }
.ara-footer-about p{ font-size:var(--ara-fs-sm); color:var(--ara-ink-soft); margin:var(--ara-s3) 0 var(--ara-s4); }

.ara-footer-contact li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--ara-fs-sm); color:var(--ara-ink-soft); padding:6px 0;
}
.ara-footer-contact svg{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; color:var(--ara-primary); }

.ara-socials{ display:flex; align-items:center; gap:var(--ara-s2); flex-wrap:wrap; }
.ara-social{
  width:40px; height:40px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ara-ink-soft);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  transition:all var(--ara-t) var(--ara-ease);
}
.ara-social svg{ width:19px; height:19px; }
.ara-social:hover{ background:var(--ara-primary); color:var(--ara-on-primary); border-color:transparent; transform:translateY(-3px); }

.ara-trust{ display:flex; align-items:center; gap:var(--ara-s3); flex-wrap:wrap; margin-top:var(--ara-s4); }
.ara-trust a,.ara-trust span{
  display:block; padding:6px; border-radius:var(--ara-r-xs);
  background:#fff; border:1px solid var(--ara-line);
}
.ara-trust img{ height:62px; width:auto; }

.ara-footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ara-s4);
  flex-wrap:wrap;
  padding-top:var(--ara-s5); border-top:1px solid var(--ara-glass-line-soft);
  font-size:var(--ara-fs-xs); color:var(--ara-ink-mute);
}
.ara-footer-credit{ display:inline-flex; align-items:center; gap:6px; }
.ara-footer-credit strong{ color:var(--ara-primary); font-weight:800; }
.ara-footer-credit svg{ width:14px; height:14px; color:var(--ara-accent); }
.ara-footer-payments{ display:flex; align-items:center; gap:var(--ara-s2); }

/* فوتر مینیمال */
.ara-footer-minimal .ara-footer-main{ padding:var(--ara-s5) var(--ara-s6); }
.ara-footer-minimal .ara-footer-bottom{ border-top:0; padding-top:0; }

/* =========================================================
   8) BACK TO TOP
   ========================================================= */
.ara-totop{
  position:fixed; z-index:100;
  inset-inline-end:16px; bottom:calc(var(--ara-bottomnav-h) + 14px);
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ara-glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--ara-blur-sm)); backdrop-filter:blur(var(--ara-blur-sm));
  border:1px solid var(--ara-glass-line);
  box-shadow:var(--ara-e2);
  color:var(--ara-ink);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--ara-t) var(--ara-ease), transform var(--ara-t) var(--ara-ease-out), visibility var(--ara-t);
}
.ara-totop svg{ width:20px; height:20px; }
.ara-totop.is-visible{ opacity:1; visibility:visible; transform:none; }
.ara-totop:hover{ background:var(--ara-primary); color:var(--ara-on-primary); }
@media (min-width:768px){ .ara-totop{ bottom:24px; inset-inline-end:24px; } }