/* ============================================================
   لایه واکنش‌گرای موبایل — روی style.css و modern.css سوار می‌شود
   هدف: فیت بودن کامل صفحه در مرورگرهای تلفن همراه (۳۲۰px به بالا)
   ============================================================ */

/* ---------- پایه: جلوگیری از اسکرول افقی ---------- */
html,body{overflow-x:hidden;max-width:100%}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe,table{max-width:100%}
img{height:auto}

/* دکمه همبرگری — فقط موبایل */
.nav-toggle{display:none}

/* ---------- تبلت و پایین‌تر (≤1024px) ---------- */
@media (max-width:1024px){
  .container{padding:0 16px}
  .header-inner{gap:14px}
  .nav a{padding:8px 10px;font-size:.9rem}
  .mega-menu{min-width:560px}
  .wp-slide{padding:80px 0 90px}
  .hero{padding:50px 0}
  .hero h1{font-size:1.9rem}
  .invoice-wrap{grid-template-columns:1fr}
  .invoice-summary{position:static}
  .wp-content-wrap{grid-template-columns:1fr}
}

/* ---------- موبایل (≤768px): منوی همبرگری ---------- */
@media (max-width:768px){
  /* هدر: لوگو + دکمه منو در یک ردیف */
  .site-header{position:sticky;top:0}
  .header-inner{padding:10px 16px;flex-wrap:nowrap;gap:12px}
  .logo{font-size:1.05rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-cta{display:none} /* دکمه پیش‌فاکتور داخل منوی موبایل هم هست */

  /* دکمه همبرگری */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;flex:0 0 44px;
    background:var(--light);border:1px solid #e4e7ec;border-radius:12px;
    cursor:pointer;padding:10px;
  }
  .nav-toggle span{display:block;height:2.5px;width:100%;border-radius:3px;background:var(--dark);transition:.25s}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* منوی کشویی موبایل */
  .nav{
    position:absolute;top:100%;right:0;left:0;
    display:none;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid #e4e7ec;
    box-shadow:0 14px 30px rgba(16,24,40,.15);
    max-height:calc(100vh - 64px);overflow-y:auto;
    margin:0;padding:6px 10px 14px;
  }
  .nav.open{display:flex}
  .nav a{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 12px;border-radius:10px;font-size:1rem;
    border-bottom:1px solid #f2f4f7;
  }
  .nav a:last-of-type{border-bottom:none}
  .nav a::after{display:none} /* خط گرادیانی هاور دسکتاپ در موبایل بی‌معناست */
  .nav a.active{background:linear-gradient(120deg,rgba(29,110,245,.12),rgba(124,92,255,.12));color:var(--primary)}

  /* مگامنو → آکاردئون داخل منو (با کلاس open که JS می‌گذارد) */
  .nav-item.has-mega{width:100%}
  .nav-item.has-mega > a{border-bottom:1px solid #f2f4f7}
  .mega-menu{position:static;display:none;min-width:0;box-shadow:none;border-radius:0;background:var(--light);padding:8px 12px 12px;animation:none;border:none}
  .nav-item.has-mega.open .mega-menu{display:block}
  .mega-grid{grid-template-columns:1fr;gap:14px}
  .mega-col .mega-title{padding:8px 0}
  .mega-col li a{padding:8px 4px;font-size:.92rem}
  .mega-cta{padding:14px}

  /* تاپ‌بار: جمع‌وجور */
  .topbar{font-size:.78rem}
  .topbar-inner{flex-direction:column;gap:4px;padding:6px 12px;text-align:center}
  .topbar-phones{gap:12px;justify-content:center}

  /* بردکرامب: قابل اسکرول افقی */
  .breadcrumb{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .breadcrumb .container{display:inline-block;padding:0 16px}

  /* ---------- هیرو / اسلایدر ---------- */
  .wp-slide,.hero{padding:44px 0 64px;text-align:center}
  .wp-slide-inner h1{font-size:clamp(1.35rem,6vw,1.9rem);line-height:1.6}
  .wp-slide-inner p{font-size:.95rem;margin-inline:4px}
  .slide-tag{font-size:.8rem;padding:4px 14px}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.95rem}
  .hero-actions,.wp-slide-inner .header-cta{display:flex;flex-direction:column;gap:10px;align-items:center}
  .hero-actions .btn,.wp-slide-inner .header-cta .btn{width:min(320px,86%);text-align:center}
  .slider-dots{bottom:12px}

  /* ---------- سکشن‌ها و تیترها ---------- */
  section{padding:36px 0}
  .section-title{font-size:clamp(1.25rem,5.4vw,1.6rem)}
  .section-sub{font-size:.9rem;margin-bottom:24px}
  .page-title{font-size:clamp(1.3rem,5.6vw,1.7rem)}
  .cat-intro{padding:28px 0}

  /* ---------- گریدها: تک‌ستونه روی صفحه باریک ---------- */
  .grid{gap:16px}
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:12px}
  @media (max-width:420px){
    .grid-3,.grid-4{grid-template-columns:1fr}
  }
  .trust-badges{grid-template-columns:repeat(2,1fr);gap:10px}
  @media (max-width:420px){.trust-badges{grid-template-columns:1fr}}
  .trust-badge{padding:12px}
  .trust-badge .tb-icon{width:40px;height:40px;flex-basis:40px;font-size:1.25rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .stat-num{font-size:1.9rem}

  /* ---------- کارت محصول ---------- */
  .product-img,.card-img{height:130px;font-size:3.2rem}
  .product-body,.card-body{padding:14px}
  .product-body h3{font-size:.98rem;line-height:1.7}
  .price-block .price{font-size:1rem}
  .listing-bar{padding:12px 14px;gap:10px}
  .brand-filter{justify-content:center}
  .cat-tabs{gap:8px;margin-bottom:20px}
  .cat-tabs a{padding:7px 14px;font-size:.85rem}

  /* کارت دسته‌بندی */
  .cat-card{height:180px}

  /* ---------- پیش‌فاکتور ---------- */
  .inv-item{padding:12px 14px;gap:10px}
  .inv-item .info{min-width:0;flex:1 1 100%}
  .inv-item .p{width:auto;flex:1;text-align:left}
  .invoice-summary{padding:16px;position:static}
  .btn-lg{padding:12px 22px;font-size:1rem}

  /* ---------- فرم‌ها ---------- */
  .form{padding:20px 16px}
  .form input,.form textarea,.form select{font-size:16px} /* جلوگیری از زوم خودکار iOS */
  .contact-grid{grid-template-columns:1fr;gap:16px}
  .contact-box{padding:20px 16px}
  input,textarea,select{font-size:16px}

  /* ---------- جدول فاکتور چاپی: اسکرول افقی ---------- */
  .print-invoice{padding:20px 14px;margin:16px 10px;overflow-x:auto}
  .print-invoice table{min-width:560px}

  /* ---------- بلاگ ---------- */
  .wp-post{flex-direction:column;padding:14px}
  .wp-post-thumb{width:100%;flex-basis:auto;height:140px;font-size:2.8rem}
  .wp-sidebar .widget{padding:16px}

  /* ---------- فوتر ---------- */
  .site-footer{padding:32px 0 18px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-contact li{word-break:break-word}

  /* ---------- دکمه‌های شناور: جمع‌وجور و بدون هم‌پوشانی ---------- */
  .floating-cta{
    bottom:14px;left:14px;padding:10px 16px;font-size:.9rem;
  }
  #toTop{bottom:14px;right:14px;width:42px;height:42px}
  /* فضای امن گوشی‌های نات‌دار (iPhone) */
  @supports (bottom:env(safe-area-inset-bottom)){
    .floating-cta{bottom:calc(14px + env(safe-area-inset-bottom))}
    #toTop{bottom:calc(14px + env(safe-area-inset-bottom))}
  }

  /* ---------- فیلتر کتابی ---------- */
  .fb-layout{gap:16px;padding:16px 12px}
  .fb-opt{padding:12px}
}

/* ---------- موبایل خیلی باریک (≤360px) ---------- */
@media (max-width:360px){
  .container{padding:0 12px}
  .logo{font-size:.95rem}
  .topbar-hours{display:none}
  .btn{padding:9px 16px;font-size:.9rem}
  .btn-lg{padding:11px 18px;font-size:.95rem}
  .trust-badge small{font-size:.75rem}
}

/* ---------- حالت افقی موبایل: هدر فشرده ---------- */
@media (max-width:768px) and (orientation:landscape){
  .nav{max-height:calc(100vh - 56px)}
  .wp-slide{padding:36px 0 56px}
}