@charset "UTF-8";
/* ==========================================================================
   بوش مرکزی — صفحه اصلی

   ⚠ هیچ جداکنندهٔ تزئینی وجود ندارد.
   نسخهٔ قبلی بین هر دو بخش یک مرزِ شکل‌دار داشت (مورب، موج، قوس، محو). آن‌ها
   حذف شدند: اسکرول صفحه باید پیوسته و آرام باشد و کاربر نباید حس کند هر بخش
   یک بنر جداگانه است. جداسازی فقط با سه چیز انجام می‌شود:
     ۱. فضای سفید  (--sec-gap)
     ۲. تغییر بسیار ملایم پس‌زمینه  (سفید ↔ #F6F7F8)
     ۳. خط مویی  (1px solid #E5E7EB)
   ========================================================================== */

/* ---------- اسکلت بخش ----------
   ⚠ به app.css منتقل شد: partials/call-cta.php وقتی boxed نگیرد
   همین .hsec را بیرون می‌دهد و آن پارشال در صفحهٔ محصول/دسته/جستجو
   هم رندر می‌شود، جایی که home.css لود نیست. */

/* کلاس‌های قدیمیِ جداکننده خنثی شده‌اند تا اگر ویویی جا مانده باشد
   شکل تزئینی برنگردد. */
.divider::after,
.divider--slant::after,.divider--slant-rev::after,
.divider--curve::after,.divider--fade::after,.divider--wave::after{content:none !important}
.hsec--dark,.hsec--blog,.hsec--cats,.hsec--rule{background:var(--c-surface)}
.hsec--rule::before{content:none}

/* ---------- تیتر بخش ---------- */
.hsec-head{margin-bottom:var(--sp-6)}
.hsec-head h2{
  font-size:clamp(21px,2.3vw,30px);font-weight:700;
  letter-spacing:-.01em;line-height:1.5;color:var(--c-ink);
}
.hsec-head p{margin:10px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.8;max-width:62ch}
.hsec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4)}
.hsec-title-sm{font-size:clamp(19px,2vw,24px);margin-bottom:var(--sp-4)}

/* لینک «همه …» — هرگز دوخط نمی‌شود */
.hsec-more{
  display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  min-height:44px;padding-inline:2px;
  color:var(--c-ink);font-size:15px;font-weight:500;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.hsec-more svg{width:16px;height:16px;flex:none}
.hsec-more:hover{color:var(--c-primary);border-bottom-color:var(--c-primary)}

/* ══════════════════════════════════════════════════ ۱. هیرو
   ⚠ تصویر و ساختار اسلایدر عمداً دست‌نخورده مانده‌اند؛ فقط قاب، فاصله و
   کنترل‌ها با سیستم جدید هماهنگ شده‌اند. */
.hsec--hero{padding-block:0;background:var(--c-surface)}
.hero-slider{
  position:relative;overflow:hidden;
  background:var(--c-bg);
  min-height:clamp(200px,30vw,430px);
  max-height:520px;
}
.hero-track{display:flex;transition:transform .25s var(--ease);will-change:transform}
.hero-slide{flex:0 0 100%;position:relative;min-width:0}
.hero-slide>a{display:block}
.hero-slide img{width:100%;height:clamp(200px,30vw,430px);object-fit:cover;object-position:center}
.hero-slider.is-single .hero-track{transform:none !important}

/* ⚠ موبایل: هیچ برشی. اسلایدِ موبایل ۱:۱ آپلود شده، پس باید کاملِ تصویر
   دیده شود و ارتفاع از خودِ نسبتِ تصویر بیاید.
   سه چیز با هم لازم است، وگرنه برش برمی‌گردد:
     height:auto      → ارتفاعِ ثابتِ clamp را خنثی می‌کند
     object-fit:fill  → cover را خنثی می‌کند (با height:auto اثری هم ندارد،
                        ولی صریح نوشته می‌شود تا بعداً کسی گیج نشود)
     min/max-height   → روی خودِ اسلایدر هم باید باز شوند، وگرنه ظرف
                        تصویرِ بلندتر از ۵۲۰px را می‌بُرد */
@media (max-width:639px){
  .hero-slider{min-height:0;max-height:none}
  .hero-slide img{height:auto;object-fit:fill}
}

.hero-caption{
  position:absolute;inset-block-end:0;inset-inline:0;
  padding-block:clamp(20px,3.5vw,44px);
  background:linear-gradient(to top,rgba(29,29,27,.78),rgba(29,29,27,.22) 60%,transparent);
  color:#fff;
}
.hero-caption h2{color:#fff;font-size:clamp(25px,3vw,38px);margin-bottom:10px;max-width:22ch;line-height:1.45}
.hero-caption p{color:rgba(255,255,255,.9);font-size:clamp(15px,1.4vw,17px);margin-bottom:20px;max-width:46ch}
@media (max-width:639px){
  .hero-caption p{display:none}
  .hero-caption h2{font-size:25px}
}

.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--c-ink);
  border:1px solid var(--c-line);
  transition:background var(--t-fast);
}
.hero-nav svg{width:20px;height:20px;stroke-width:2}
.hero-nav.prev{inset-inline-end:16px}
.hero-nav.next{inset-inline-start:16px}
.hero-nav:hover{background:#fff}
@media (max-width:767px){.hero-nav{display:none}}

.hero-dots{
  position:absolute;inset-block-end:14px;inset-inline:0;z-index:4;
  display:flex;justify-content:center;gap:7px;
}
.hero-dots button{
  width:8px;height:8px;border-radius:var(--r-full);
  background:rgba(255,255,255,.55);transition:all var(--t-fast);
}
.hero-dots button.is-active{width:24px;background:var(--c-primary)}

.hero-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
.hero-side a{border-radius:var(--r-lg);overflow:hidden;display:block;background:var(--c-bg)}
.hero-side img{width:100%;height:auto;display:block}
@media (max-width:639px){.hero-side{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════════ ۲. نوار اعتماد
   نوار ساده، نه کارت بزرگ و شلوغ. */
.hsec--trust{
  background:var(--c-surface);
  border-block:1px solid var(--c-line);
  padding-block:var(--sp-6);
}
.trustbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.trustbar li{display:flex;align-items:center;gap:12px;min-width:0;padding-inline:var(--sp-2)}
.trustbar li + li{border-inline-start:1px solid var(--c-line)}
.trust-ic{
  flex:none;width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--c-bg);color:var(--c-ink);
}
.trust-ic svg{width:20px;height:20px;stroke-width:1.75}
.trust-tx{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.6}
.trust-tx b{color:var(--c-ink);font-size:15px;font-weight:700}
.trust-tx span{color:var(--c-ink-2);font-size:15px}
@media (max-width:900px){
  .trustbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
  .trustbar li + li{border-inline-start:0}
  .trustbar li:nth-child(2n){border-inline-start:1px solid var(--c-line)}
}
@media (max-width:479px){
  .trustbar li{padding-inline:0;gap:10px}
  .trust-ic{width:36px;height:36px}
  .trust-tx b{font-size:15px}
  .trust-tx span{font-size:15px}
}

/* ══════════════════════════════════════════════════ ۳. دسته‌بندی‌ها
   کارت‌ها فقط تصویر + عنوان. بدون متن اضافه، بدون سایه. */
/* align-items:start ⇒ هر کارت به قدِ خودش می‌ماند. اگر stretch (پیش‌فرض) بماند،
   همهٔ کارت‌های یک ردیف هم‌قدِ بلندترین می‌شوند و تصویر دوباره کشیده می‌شود. */
.cat-banners{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-4);align-items:start;
}
@media (max-width:1023px){.cat-banners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.cat-banners{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}}

/* ⚠ عمداً aspect-ratio ندارد و تصویر با object-fit:cover پر نمی‌شود.
   قبلاً کارت نسبتِ ثابتِ ۱۶/۷ داشت و بنر با cover داخلش جا داده می‌شد؛ چون
   نسبتِ بنرهای سایت قدیم با ۱۶/۷ یکی نیست، مرورگر مجبور بود بنر را هم بزرگ‌نمایی
   کند و هم از دو طرف ببرد — دقیقاً همان «بی‌کیفیت و کراپ‌شده».
   حالا ارتفاع از خودِ نسبتِ تصویر می‌آید: نه بزرگ‌نمایی، نه برش. */
.catb{
  position:relative;display:block;overflow:hidden;min-width:0;
  border-radius:var(--r-lg);
  background:#F7F7F7;
  border:1px solid var(--c-line);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
/* height:auto اجباری است: تگ <img> ویژگیِ height هم دارد (برای جلوگیری از پرشِ
   چیدمان). بدون این، همان عددِ ثابتِ ویژگی اعمال می‌شد و تصویر له می‌شد. */
.catb img{width:100%;height:auto;display:block}
@media (hover:hover){
  .catb:hover{border-color:var(--c-ink-3);box-shadow:var(--sh-1)}
}
/* فلشِ گوشه حذف شد — تزئین اضافه بود */
.catb-go{display:none}

/* کارتِ بدون بنر: کاشیِ متنیِ تمیز. حالا که کارت‌ها ارتفاعِ ثابت ندارند،
   این یکی به کفِ ارتفاع نیاز دارد وگرنه کنارِ بنرها خیلی کوتاه می‌افتد. */
.catb--plain{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:var(--sp-4);text-align:center;background:#F7F7F7;
  min-height:128px;
}
@media (max-width:767px){.catb--plain{min-height:112px}}
.catb--plain .catb-ic{
  width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-ink-2);
}
.catb--plain .catb-ic svg{width:20px;height:20px}
.catb--plain b{font-size:15px;font-weight:700;line-height:1.6;color:var(--c-ink)}
@media (max-width:479px){.catb--plain b{font-size:15px}}

/* ══════════════════════════════════════════════════ ۵. بنر عریض */
.wide-banner{
  display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg);
  border:1px solid var(--c-line);
}
.wide-banner img{width:100%;height:auto;display:block}
.banner-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4)}
@media (max-width:639px){.banner-duo{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}}

/* ══════════════════════════════════════════════════ ۸. مشاوره / درخواست تماس
   ⚠ استایلِ این بخش به app.css منتقل شد و عمداً اینجا نیست.
   دلیل: partials/call-cta.php در چهار ویو استفاده می‌شود — صفحهٔ اول،
   محصول، دستهٔ محصولات و جستجو — ولی home.css فقط در صفحهٔ اول لود
   می‌شود. نتیجه این بود که همان بخش در سه صفحهٔ دیگر کاملاً بی‌استایل
   رندر می‌شد. قاعدهٔ کلی: هر پارشالِ مشترک باید در یک CSS مشترک
   استایل بگیرد، نه در CSS مخصوصِ یک صفحه. */

/* ══════════════════════════════════════════════════ ۹. شعبه‌ها */
.stores{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4)}
@media (max-width:767px){.stores{grid-template-columns:minmax(0,1fr)}}
.store{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
.store h3{font-size:18px;color:var(--c-ink)}
.store-row{display:flex;gap:10px;align-items:flex-start;color:var(--c-ink-2);font-size:15px;line-height:1.8}
.store-row svg{width:18px;height:18px;flex:none;color:var(--c-ink-3);margin-top:4px}
.store-row .tel-link{color:var(--c-ink);font-weight:700}
.store-actions{display:flex;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-2)}
.store-actions .btn{flex:1}
@media (max-width:359px){.store-actions{flex-direction:column}}

/* ══════════════════════════════════════════════════ ۱۰. مقالات
   کارت مقاله عمداً ساده‌تر از کارت محصول است. */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:959px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.blog-grid{grid-template-columns:minmax(0,1fr)}}

.bpost{
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.bpost-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-bg)}
.bpost-img img{width:100%;height:100%;object-fit:cover}
.bpost-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.bpost-body h3{font-size:16px;line-height:1.7;margin:0}
.bpost-body h3 a{color:var(--c-ink)}
.bpost-body p{color:var(--c-ink-2);font-size:15px;line-height:1.8;margin:0}
.bpost-go{
  margin-top:auto;padding-top:var(--sp-2);
  display:inline-flex;align-items:center;gap:5px;
  color:var(--c-ink);font-size:15px;font-weight:500;
}
.bpost-go svg{width:15px;height:15px}
@media (hover:hover){
  .bpost:hover{border-color:var(--c-ink-3);box-shadow:var(--sh-1)}
  .bpost:hover .bpost-go{color:var(--c-primary)}
}

/* ══════════════════════════════════════════════════ ۱۱. درباره ما و متن سئو
   متن طولانی برای خوانایی محدود می‌شود ولی حذف نمی‌شود (سئو). */
.about-block{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-6);align-items:start}
.about-block .prose{max-width:900px;max-height:250px;overflow:hidden;position:relative}
.about-block .prose.is-open{max-height:none}
.about-block .prose:not(.is-open)::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:80px;
  background:linear-gradient(to top,var(--c-surface),transparent);
}
.about-more{margin-top:var(--sp-4)}
.about-figure img{border-radius:var(--r-lg);width:100%;height:auto}
@media (max-width:900px){.about-block{grid-template-columns:minmax(0,1fr)}.about-figure{display:none}}

.home-seo{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-6)}
.home-seo .prose{max-width:900px}