/*
Theme Name: فرداد زغال
Theme URI: https://fardadcoco.com
Author: Fardad Zoghale
Author URI: https://fardadcoco.com
Description: تم اختصاصی وردپرس برای فرداد زغال — فروش زغال فشرده پسته‌ای و بامبو (چینی). طراحی تیره با رنگ کهربایی، راست‌به‌چپ، سازگار با المنتور.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fardad-zoghale
Tags: dark, rtl, one-column, custom-menu, translation-ready
*/

/* ==========================================================================
   فونت وزیرمتن — به‌صورت لوکال از خود قالب لود می‌شود (نه از Google Fonts)
   دلیل: fonts.googleapis.com روی خیلی از موبایل‌ها و هاست‌های ایرانی کند
   بارگذاری می‌شود یا فیلتر است و باعث می‌شود بارگذاری اولیه‌ی سایت روی
   گوشی طولانی و ناهماهنگ (پرش فونت/FOUT) به نظر برسد.
   ========================================================================== */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens (rebuilt from the original Fardad Zoghale design)
   ========================================================================== */
:root {
  --background: #121212;
  --foreground: #fafafa;
  --card: #1a1a1a;
  --card-foreground: #fafafa;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #b3aea6;
  --border: #363330;
  --input: #262626;
  --destructive: #e0524a;
  --amber: #e0b563;
  --amber-light: #eccd94;
  --amber-dark: #b8863a;
  --primary-foreground: #241d10;
  /* Metallic / silver accents — used for industrial-grade dividers,
     icon strokes and secondary borders (steel, not gold). */
  --silver: #c8cdd4;
  --silver-dim: #9096a0;
  --silver-metal: linear-gradient(135deg, #e7eaee 0%, #9aa0aa 45%, #cfd3d9 60%, #7d838d 100%);
  --radius: 0.9rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --font-sans: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip; /* قوی‌تر از hidden: جلوی هر نوع اسکرول افقی رو حتی از المان‌های fixed/absolute هم می‌گیره */
  width: 100%;
  overscroll-behavior-x: none; /* جلوگیری از حرکت افقی صفحه با ژست کشیدن (swipe) در کروم موبایل */
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته روی گوشی */
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100%;
  width: 100%;
  position: relative; /* تا هر المان absolute داخل صفحه نسبت به body محدود بشه، نه کل viewport */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout helpers */
.wrap { max-width: 1152px; margin-inline: auto; padding-inline: 24px; }
.wrap-sm { max-width: 672px; margin-inline: auto; padding-inline: 24px; }
.wrap-md { max-width: 768px; margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 80px; }
.section-border { border-top: 1px solid var(--border); background: var(--card); }
@media (max-width: 768px) { .section { padding-block: 56px; } }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
}
.section-title { font-size: 32px; font-weight: 700; text-wrap: balance; }
@media (min-width: 768px) { .section-title { font-size: 38px; } }
.section-lede { margin-top: 16px; color: var(--muted-foreground); max-width: 640px; margin-inline: auto; }
.text-center { text-align: center; }

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s, transform .2s;
}
.btn-primary { background: var(--amber); color: var(--primary-foreground); box-shadow: 0 8px 24px rgba(224,181,99,.25); }
.btn-primary:hover { background: var(--amber-light); box-shadow: 0 10px 30px rgba(224,181,99,.4); transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid #6b6b6b;
  background: rgba(23,23,23,.5);
  color: #f4f4f4;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(38,38,38,.7); }

.card { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); }

/* Location map card (Google Maps embed, used on the About page) */
.map-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.map-card-frame { position: relative; width: 100%; aspect-ratio: 16 / 8; filter: grayscale(.15) contrast(1.05); }
.map-card-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-top: 1px solid var(--border);
}
.map-card-address { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--foreground); }
.map-card-pin { flex: none; display: flex; align-items: center; justify-content: center; color: var(--amber); }
.map-card-btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .map-card-frame { aspect-ratio: 4 / 3; } }

/* Reveal-on-scroll animation (progressive enhancement) */
/* پیش‌فرض: محتوا همیشه دیده می‌شود. افکت محو‌شدن-و-ظاهرشدن فقط وقتی
   فعال می‌شود که جاوااسکریپت با موفقیت اجرا شده باشد (کلاس js-ready
   روی <html> اضافه می‌شود). این یعنی اگر جاوااسکریپت روی یک مرورگر/
   شبکه‌ی موبایل خاص لود یا اجرا نشود، محتوای سایت هیچ‌وقت نامرئی نمی‌ماند. */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.grid > .reveal:nth-child(2) { transition-delay: .08s; }
.grid > .reveal:nth-child(3) { transition-delay: .16s; }
.grid > .reveal:nth-child(4) { transition-delay: .24s; }

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0; z-index: 10000;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-light));
  transition: width .1s linear;
}

/* ==========================================================================
   Mobile hamburger menu
   ========================================================================== */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: 10px; background: rgba(43,43,43,.5); flex-shrink: 0;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--foreground); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle-hero { position: relative; z-index: 10; }

.mobile-menu {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 9998;
  width: min(320px, 84vw);
  background: var(--card); border-inline-start: 1px solid var(--border);
  padding: 88px 28px 28px; box-shadow: -20px 0 60px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto;
}
[dir="rtl"] .mobile-menu { transform: translateX(-100%); }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a { display: block; padding: 14px 4px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border); }
.mobile-menu nav a:hover { color: var(--amber); }

/* زیرمنوی «انواع زغال» به‌صورت آکاردئون در منوی موبایل/کشویی */
.mobile-menu .menu-item-has-children { position: relative; }
.mobile-menu .menu-item-has-children > a { border-bottom: 1px solid var(--border); padding-inline-end: 44px; }
.mobile-menu-caret-btn {
  position: absolute; top: 4px; inset-inline-end: 0;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted-foreground); cursor: pointer;
}
.mobile-menu-caret-btn .dropdown-caret {
  width: 8px; height: 8px; transform: rotate(45deg); transition: transform .25s ease;
}
.mobile-menu .menu-item-has-children > a > .dropdown-caret { display: none; }
.mobile-menu .menu-item-has-children.is-open > .mobile-menu-caret-btn .dropdown-caret { transform: rotate(225deg); }
.mobile-menu .sub-menu.dropdown-panel {
  list-style: none; margin: 0; padding: 0 0 0 4px;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.mobile-menu .menu-item-has-children.is-open > .sub-menu.dropdown-panel { max-height: 900px; }
.mobile-menu .dropdown-group-title {
  font-size: 11px; font-weight: 700; color: var(--amber);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 12px 4px 6px;
}
.mobile-menu .dropdown-link { display: block; padding: 11px 4px; border-bottom: 1px dashed var(--border); font-weight: 600; font-size: 14.5px; }
.mobile-menu .dropdown-view-all { margin-bottom: 4px; }
.mobile-menu .dropdown-view-all .dropdown-link { color: var(--amber); border-bottom: 1px solid var(--border); }
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .mobile-menu, .mobile-menu-backdrop { display: none; } }

/* Accessibility: visible focus states */
a:focus-visible, button:focus-visible, .field:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .product-card .thumb img, .gallery-item img, .floating-whatsapp, .back-to-top { transition: none; }
  .photo-slider-slide img { animation: none; }
}

/* ==========================================================================
   Sticky header
   ========================================================================== */
.site-sticky-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(64,64,64,.6);
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(10px);
  transform: translateY(-100%); opacity: 0;
  transition: transform .3s, opacity .3s;
}
.site-sticky-header.is-visible { transform: translateY(0); opacity: 1; }
.site-sticky-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand-mini { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mini img { height: 32px; width: 32px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(224,181,99,.4); background: rgba(224,181,99,.1); }
.sticky-nav { display: none; align-items: center; font-size: 14px; font-weight: 500; color: #d4d4d4; }
.sticky-nav ul, .sticky-nav .menu-fallback { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sticky-nav a:hover { color: var(--amber); }
@media (min-width: 900px) { .sticky-nav { display: flex; } }

/* ==========================================================================
   منوی کشویی «انواع زغال» (دسکتاپ) — در هدر چسبان و هدر ویدیویی هر دو
   یک لیست تک‌ستونه و مرتب، چسبیده به لبه‌ی همان آیتم منو (بدون ترفند
   ترنسفورم برای وسط‌چین کردن که در راست‌به‌چپ به‌هم می‌ریخت).
   ========================================================== */
.sticky-nav .menu-item-has-children,
.hero-nav .menu-item-has-children { position: relative; }
.sticky-nav .menu-item-has-children > a,
.hero-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
/* پل نامرئی بین دکمه‌ی منو و پنل کشویی: بدون این پل، در فاصله‌ی خالی بین
   لینک و پنل، هاور از بین می‌رفت و پنل قبل از رسیدن موس بسته می‌شد. */
.sticky-nav .menu-item-has-children::after,
.hero-nav .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  height: 14px;
  width: max-content;
  min-width: max(100%, 240px);
}
.dropdown-caret {
  width: 7px; height: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  opacity: .8;
}
.menu-item-has-children:hover > a > .dropdown-caret,
.menu-item-has-children.is-open > a > .dropdown-caret { transform: rotate(225deg) translateY(1px); }

.dropdown-panel {
  position: absolute; top: 100%; margin-top: 14px;
  inset-inline-start: 0;
  width: max-content; min-width: 240px; max-width: min(300px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, #202020, #191919);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(224,181,99,.05);
  padding: 10px;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.menu-item-has-children:hover > .dropdown-panel,
.menu-item-has-children:focus-within > .dropdown-panel,
.menu-item-has-children.is-open > .dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.dropdown-group-title {
  font-size: 11px; font-weight: 700; color: var(--amber);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--border);
}
.dropdown-group-title:first-child { border-top: 0; padding-top: 4px; }
.dropdown-item { list-style: none; }
.dropdown-link {
  display: block;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--foreground); transition: background .15s ease;
}
.dropdown-link:hover, .dropdown-link:focus-visible { background: rgba(224,181,99,.1); color: var(--amber); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-lang {
  border-radius: 999px; border: 1px solid #737373; background: rgba(23,23,23,.5);
  padding: 6px 12px; font-size: 12px; font-weight: 700; color: #f4f4f4;
}
.btn-order-mini { border-radius: 999px; background: var(--amber); color: var(--primary-foreground); padding: 6px 16px; font-size: 12px; font-weight: 700; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: #000; }
@supports (height: 100dvh) { .hero { min-height: 100dvh; } }
/* لایه‌ی رسانه (ویدیو/عکس/گرادیان): overflow:hidden فقط همین لایه رو محدود
   می‌کنه تا ویدیوی بزرگ‌شده از کادر هیرو بیرون نزنه. قبلاً این overflow:hidden
   (به‌همراه transform روی خودِ .hero) روی کل بخش هیرو بود و چون منوی کشویی
   «انواع زغال» داخل هیرو رندر می‌شه، همون overflow باعث می‌شد پنل کشویی از
   لبه‌ی هیرو بریده بشه و گزینه‌هاش قابل کلیک نباشن — این باگ با جدا کردن
   لایه‌ی رسانه از بقیه‌ی محتوای هیرو (نوار بالا/دکمه‌ها) حل شده. */
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; transform: translateZ(0); background: #000; }
/* دوربینِ ویدیوی هیرو رو «عقب‌تر» می‌بریم: چون پس‌زمینه‌ی ویدیو مشکیِ خالصه،
   با کوچیک‌کردنِ خودِ ویدیو (نه برش‌زدنش) دور تا دورش مشکی دیده می‌شه و حس
   می‌شه دوربین از سوژه فاصله گرفته، بدون این‌که فایل ویدیو دوباره رندر بشه.
   عدد رو با همین متغیر عوض کن: ۰.۵ یعنی سوژه نصفِ اندازه‌ی قبل (دوربین ~۲برابر
   عقب‌تر). می‌خوای بیشتر عقب بره؟ عدد رو کمتر کن (مثلاً ۰.۴۰ یا ۰.۳۵). */
:root { --hero-video-zoom: 0.5; }
.hero video {
  position: absolute; top: 50%; left: 50%;
  /* چون بعداً با scale(var(--hero-video-zoom)) کوچیک می‌شه، از قبل به همون
     نسبت بزرگ‌ترش می‌کنیم تا بعد از کوچیک‌شدن، دقیقاً هم‌اندازه‌ی کادر بمونه
     و کل صفحه (هم دسکتاپ هم موبایل) رو بگیره، بدون نوار مشکی دور تا دورش. */
  min-width: calc(100% / var(--hero-video-zoom));
  min-height: calc(100% / var(--hero-video-zoom));
  width: auto; height: auto;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(var(--hero-video-zoom)) translateZ(0);
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* عکس پس‌زمینه‌ی همیشه-قابل‌اطمینان: تا وقتی ویدیو لود/پخش بشه (یا اگر به هر
   دلیلی نشه) این عکس زیر ویدیو همیشه دیده می‌شه و صفحه هیچوقت سیاه نمی‌مونه.
   همون مقیاسِ ویدیو رو می‌گیره تا موقع رد و بدل شدن عکس/ویدیو، اندازه‌ی سوژه
   ناگهانی عوض نشه. */
.hero-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform: translateZ(0); }
.hero-poster-img img {
  width: calc(100% / var(--hero-video-zoom)); height: calc(100% / var(--hero-video-zoom));
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--hero-video-zoom)) translateZ(0);
  object-fit: cover;
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hero video { z-index: 2; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,.82) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.92) 100%);
}
/* z-index این بخش عمداً از hero-body و hero-stats بالاتره (نه ۱۰ مثل آن‌ها):
   پنل کشویی «انواع زغال» به‌صورت absolute از داخل همین بخش باز می‌شود و تا
   روی بخش hero-body پایین‌تر می‌رود. اگر z-index این‌جا با hero-body یکسان
   باشد، چون hero-body در HTML بعد از این بخش می‌آید، مرورگر آن را روی پنل
   کشویی می‌کشد و کلیک روی گزینه‌های «انواع زغال» به‌جای لینک‌ها به hero-body
   می‌خورد (دقیقاً همان باگی که فقط در صفحه‌ی اصلی رخ می‌داد). */
.hero-topbar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 44px; width: 44px; flex-shrink: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(224,181,99,.4); background: rgba(224,181,99,.1); }
.brand-logo img { height: 100%; width: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 16px; font-weight: 700; }
.brand-tag { font-size: 12px; color: var(--muted-foreground); }
.hero-nav { display: none; align-items: center; font-size: 14px; font-weight: 500; color: #e5e5e5; }
.hero-nav ul, .hero-nav .menu-fallback { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.hero-nav a:hover { color: var(--amber); }
@media (min-width: 900px) { .hero-nav { display: flex; } }
.hero-body { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 64px 24px; text-align: center; }
.hero-badge { border-radius: 999px; border: 1px solid rgba(224,181,99,.4); background: rgba(224,181,99,.1); padding: 6px 20px; font-size: 14px; font-weight: 500; color: var(--amber-light); }
.hero-title { max-width: 780px; font-size: 40px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
@media (min-width: 768px) { .hero-title { font-size: 60px; } }
.hero-subtitle { max-width: 560px; font-size: 16px; line-height: 1.7; color: #d4d4d4; }
@media (min-width: 768px) { .hero-subtitle { font-size: 18px; } }
.hero-ctas { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-stats { position: relative; z-index: 10; border-top: 1px solid rgba(38,38,38,.6); background: rgba(10,10,10,.4); backdrop-filter: blur(4px); }
.hero-stats-grid { max-width: 900px; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px; text-align: center; }
@media (min-width: 640px) { .hero-stats-grid { grid-template-columns: repeat(3, 1fr); } }
.hero-stat-value { font-size: 24px; font-weight: 700; color: var(--amber); }
.hero-stat-label { margin-top: 2px; font-size: 14px; color: #d4d4d4; }

/* ==========================================================================
   Hero mobile
   باکس ویدیو دقیقاً همون اندازه/جای همیشگیه (زیر نوار بالا، ۴۶vh بین ۲۶۰
   تا ۴۲۰ پیکسل) — بدون تغییر.
   روی خودِ ویدیو: فقط بج («تولیدکننده و صادرکننده مستقیم — بدون واسطه»)
   نزدیکِ بالای ویدیو، و دو دکمه‌ی CTA با سایز جمع‌وجورتر (نه full-width)
   نزدیکِ پایینِ ویدیو — هر دو با position:absolute نسبت به hero-body که
   position:relative داره و دقیقاً از همون‌جایی شروع می‌شه که ویدیو تموم
   می‌شه (پس با top منفی می‌شه به داخل کادر ویدیو کشیدشون بالا).
   زیر ویدیو (جریان عادی صفحه): تیتر، توضیحات، و بعدش آمار (۵۰۰ تن / ۰
   واسطه / ۹۰+ دقیقه) — دقیقاً طبق درخواست.
   ========================================================================== */
@media (max-width: 899px) {
	.hero {
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	/* ارتفاع نوار بالا رو صریح/ثابت می‌کنیم (همون ارتفاعی که طبیعتاً همیشه
	   داشته: لوگوی ۴۴px + ۲۰px پدینگ بالا و پایین = ۸۴px) تا بشه موقعیت
	   دقیق «زیر ویدیو» رو براساس آن محاسبه کرد؛ ظاهرش هیچ تغییری نمی‌کند. */
	.hero-topbar {
		order: 1;
		min-height: 84px;
		/* قبلاً پس‌زمینه‌ی این نوار همون مشکیِ خامِ .hero بود (پشتِ لوگو صاف
		   و بی‌روح می‌زد توی ذوق). گرادیانِ قبلی هم چون مرکزش خیلی بالاتر از
		   کادر بود (-20%) و زود به مشکی ختم می‌شد، عملاً همون‌قدر مشکی به‌نظر
		   می‌رسید. این‌جا دو تا هاله‌ی نرمِ طلایی/کهربایی (یکی دقیقاً پشتِ
		   لوگو که در RTL سمتِ راستِ نوار قرار داره، یکی پخش‌تر روی کل نوار)
		   روی یه زمینه‌ی قهوه‌ایِ خیلی تاریک (نه مشکیِ خالص) گذاشته شده و در
		   پایین به مشکی ختم می‌شه — دقیقاً همون‌جا که ویدیو (hero-media) شروع
		   می‌شه، پس درزی بینشون حس نمی‌شه ولی دیگه پشتِ لوگو خالیِ بی‌روح نیست. */
		background:
			radial-gradient(38% 160% at 85% -10%, rgba(224,181,99,.32) 0%, rgba(224,181,99,0) 70%),
			radial-gradient(70% 140% at 50% -30%, rgba(184,134,58,.18) 0%, rgba(184,134,58,0) 65%),
			linear-gradient(to bottom, #1d1710 0%, #120d08 55%, #000 100%);
		position: relative;
		z-index: 21;
	}
	.hero-media {
		order: 2;
		position: relative;
		inset: auto;
		width: 100%;
		height: 46vh;
		min-height: 260px;
		max-height: 420px;
		overflow: hidden;
	}
	.hero-overlay { opacity: .55; }

	/* آمار (۵۰۰ / ۰ / ۹۰+) دقیقاً بعد از ویدیو (hero-media) و قبل از تیتر/
	   توضیحات (hero-body) قرار می‌گیره — یعنی به پایین ویدیو می‌چسبد. */
	.hero-stats { order: 3; }
	.hero-stats-grid { padding: 18px 20px; gap: 14px; }

	.hero-body {
		order: 4;
		padding: 32px 20px 40px;
		gap: 14px;
		/* بج و دکمه‌های داخل این بخش دیگه نسبت به خودش absolute نمی‌شن،
		   بلکه نسبت به .hero (والدِ مشترک) محاسبه می‌شن؛ این‌طوری جابجا شدنِ
		   آمار به بالای این بخش، هیچ تأثیری روی موقعیتِ بج/دکمه‌ها روی
		   ویدیو نمی‌گذاره و همه‌چیز دقیقاً سر جای قبلی‌اش می‌مونه. */
		position: static;
	}
	.hero-badge {
		position: absolute;
		left: 20px;
		right: 20px;
		top: calc(84px + 20px);
		text-align: center;
		z-index: 5;
	}
	.hero-title { order: 1; font-size: 32px; }
	.hero-subtitle { order: 2; font-size: 15px; }
	.hero-ctas {
		position: absolute;
		left: 20px;
		right: 20px;
		top: calc(84px + clamp(260px, 46vh, 420px) - 120px);
		margin-top: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		z-index: 5;
	}
	.hero-ctas .btn { width: auto; padding: 10px 20px; font-size: 13px; }
}

/* ==========================================================================
   Generic page hero (About / other pages)
   ========================================================================== */
.page-hero { padding: 160px 24px 56px; text-align: center; border-bottom: 1px solid var(--border); background: linear-gradient(to bottom, #000 0%, var(--background) 100%); }
.page-hero h1 { font-size: 36px; font-weight: 700; }
.page-content { padding-block: 64px; }
.page-content .wrap-md { line-height: 1.9; }
.page-content img { border-radius: var(--radius-2xl); margin-block: 24px; }

/* ==========================================================================
   Grids / cards
   ========================================================================== */
.grid { display: grid !important; width: 100% !important; float: none !important; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.product-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); transition: border-color .2s, transform .3s, box-shadow .3s; }
.product-card:hover { border-color: rgba(224,181,99,.5); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.product-card .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--secondary); }
.product-card .thumb img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 24px; }
.product-card h3 { font-size: 18px; font-weight: 700; margin: 0; }
.product-card p { font-size: 14px; color: var(--muted-foreground); margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border-radius: 999px; border: 1px solid var(--border); background: rgba(43,43,43,.6); padding: 4px 12px; font-size: 12px; color: #d4d4d4; }
.product-card .cta { margin-top: auto; border-radius: 999px; background: var(--amber); padding: 10px; text-align: center; font-size: 14px; font-weight: 700; color: var(--primary-foreground); }
.product-card .cta:hover { background: var(--amber-light); }

/* ---------------- Types slider (شکل‌های تولیدی زغال) ---------------- */
.types-slider-wrap { position: relative; }
.types-slider {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 6px 4px 20px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.types-slider::-webkit-scrollbar { height: 6px; }
.types-slider::-webkit-scrollbar-track { background: var(--muted); border-radius: 999px; }
.types-slider::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.type-card {
	scroll-snap-align: start; flex: 0 0 auto; width: 250px; display: flex; flex-direction: column;
	overflow: hidden; border: 1px solid var(--border); background: var(--card);
	border-radius: var(--radius-2xl); transition: border-color .2s, transform .3s, box-shadow .3s;
}
.type-card:hover { border-color: rgba(224,181,99,.5); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.type-card .thumb { aspect-ratio: 1/1; overflow: hidden; background: var(--secondary); }
.type-card .thumb img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.type-card:hover .thumb img { transform: scale(1.05); }
.type-card .thumb video { height: 100%; width: 100%; object-fit: cover; display: block; transition: transform .5s; }
.type-card:hover .thumb video { transform: scale(1.05); }
.type-card .body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; }
.type-card h4 { font-size: 16px; font-weight: 700; margin: 0; }
.type-card p { font-size: 13px; line-height: 1.8; color: var(--muted-foreground); margin: 0; flex: 1; }
.type-card .cta { margin-top: auto; border-radius: 999px; background: var(--amber); padding: 9px; text-align: center; font-size: 13px; font-weight: 700; color: var(--primary-foreground); }
.type-card .cta:hover { background: var(--amber-light); }

/* ---------- گرید کارت‌های محصول در صفحه‌ی مستقل «انواع زغال» ---------- */
/* کلاس type-card اصالتاً برای اسلایدر افقی صفحه‌ی اصلی طراحی شده و عرض
   ثابت 250px دارد (types-slider). همین عرض ثابت باعث می‌شد داخل گرید
   صفحه‌ی مستقل «انواع زغال»، هر کارت به‌جای پر کردن کل ستون، فقط 250px
   بماند و به‌صورت پیش‌فرض به گوشه‌ی سمت راست ستون بچسبد. اینجا هم مثل
   بخش «درباره ما» از فلکس با justify-content: center استفاده شده و عرض
   ثابت type-card برای این حالت خنثی می‌شود تا کارت‌ها همیشه وسط و
   هم‌عرض ستون‌ها بمانند. */
.types-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 100% !important;
	float: none !important;
	gap: 24px;
}
.types-grid .type-card {
	width: auto !important;
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.types-grid .type-card {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}
@media (min-width: 900px) {
	.types-grid .type-card {
		flex: 1 1 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}
}
.slider-nav-btn {
	position: absolute; top: 42%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px;
	background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
	z-index: 2; color: var(--foreground); box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: background .2s, color .2s, border-color .2s;
}
.slider-nav-btn:hover { background: var(--amber); color: var(--primary-foreground); border-color: var(--amber); }
.slider-prev { inset-inline-end: -8px; }
.slider-next { inset-inline-start: -8px; }
@media (max-width: 720px) { .slider-nav-btn { display: none; } }

.feature-box { border: 1px solid var(--border); background: var(--background); border-radius: var(--radius-2xl); padding: 20px; transition: transform .3s, border-color .3s; }
.feature-box:hover { transform: translateY(-3px); border-color: rgba(224,181,99,.4); }
.feature-box h4 { color: var(--amber); margin: 0 0 6px; }
.feature-box p { margin: 0; font-size: 14px; color: var(--muted-foreground); }

/* ---------- گرید ویژگی‌های محصول در بخش «درباره ما» (۱۰۰٪ طبیعی / خاکستر کم / ...) ---------- */
/* از فلکس به‌جای گرید استفاده شده (به‌همراه justify-content: center) چون در
   برخی مرورگرها/پلاگین‌ها/قالب‌های قدیمی CSS Grid به‌درستی اعمال نمی‌شود و
   باعث می‌شد کارت‌ها به‌جای وسط صفحه، به‌صورت یک ستون باریک و چسبیده به لبه
   دیده شوند. فلکس پشتیبانی گسترده‌تری دارد و با justify-content: center
   کارت‌ها همیشه وسط‌چین می‌مانند، حتی اگر تعدادشان کامل یک ردیف را پر نکند. */
.wp-block-group.about-feature-grid,
.about-feature-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 1152px !important;
	float: none !important;
	position: static !important;
	gap: 24px;
	margin: 30px auto !important;
}
.about-feature-grid > .feature-box {
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.about-feature-grid > .feature-box {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}
@media (min-width: 900px) {
	.about-feature-grid > .feature-box {
		flex: 1 1 calc(25% - 18px);
		max-width: calc(25% - 18px);
	}
}

.step-row { display: flex; gap: 16px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); padding: 16px; margin-bottom: 14px; transition: transform .25s ease, border-color .25s ease; }
.step-row:hover { transform: translateX(-2px); border-color: rgba(224,181,99,.3); }
.step-num { flex-shrink: 0; font-size: 20px; font-weight: 700; color: var(--amber); }
.step-row h4 { margin: 0 0 4px; }
.step-row p { margin: 0; font-size: 14px; color: var(--muted-foreground); }

/* ---------- نوار آماری فشرده در بخش «درباره ما» (کارت‌های مجزا) ---------- */
/* از فلکس به‌جای گرید استفاده شده (به‌همراه justify-content: center) تا
   کارت‌های آماری همیشه دقیقاً وسط صفحه بمانند، حتی اگر مرورگر/افزونه‌ای
   با CSS Grid تداخل داشته باشد. width/float/position هم عمداً صریح
   نوشته شده تا در برابر هر استایل تداخل‌گر دیگری مقاوم باشد. */
.wp-block-group.about-stats-row,
.about-stats-row {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 768px !important;
	float: none !important;
	position: static !important;
	gap: 14px;
	margin: 30px auto !important;
}
.about-stats-row > .about-stat-card {
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
}
@media (min-width: 561px) {
	.about-stats-row > .about-stat-card {
		flex: 1 1 calc((100% - 28px) / 3);
		max-width: calc((100% - 28px) / 3);
	}
}
.about-stat-card {
	text-align: center;
	padding: 22px 12px;
	border: 1px solid var(--border);
	background: var(--card);
	border-radius: var(--radius-2xl);
	transition: transform .25s ease, border-color .25s ease;
}
.about-stat-card { position: relative; overflow: hidden; }
.about-stat-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(135deg, rgba(224,181,99,0), rgba(224,181,99,.55), rgba(224,181,99,0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s ease;
	pointer-events: none;
}
.about-stat-card:hover { transform: translateY(-4px); border-color: rgba(224,181,99,.4); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.about-stat-card:hover::before { opacity: 1; }
.about-stat-card .num { display: block; font-size: 28px; font-weight: 800; color: var(--amber); line-height: 1; }
.about-stats-row.is-visible .about-stat-card .num { animation: fardad-stat-glow 1.6s ease .5s 1; }
.about-stat-card .label { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
@keyframes fardad-stat-glow {
	0%   { text-shadow: 0 0 0 rgba(224,181,99,0); }
	35%  { text-shadow: 0 0 18px rgba(224,181,99,.85); }
	100% { text-shadow: 0 0 0 rgba(224,181,99,0); }
}
@media (max-width: 560px) {
	.about-stats-row { gap: 10px; }
	.about-stat-card { padding: 16px; }
}

/* ---------- گالری عکس واقعی کارخانه در صفحه‌ی «درباره ما» ---------- */
.about-gallery-wrap { margin: 40px auto 8px; }
.js-ready .about-gallery-wrap { transform: scale(.97); transition: transform .7s ease, opacity .7s ease; }
.js-ready .about-gallery-wrap.is-visible { transform: scale(1); }

/* ---------- ویدیوی فرآیند تولید در صفحه‌ی «درباره ما» ---------- */
.about-video-card { border-radius: var(--radius-2xl); overflow: hidden; transition: transform .4s ease, box-shadow .4s ease; }
.about-video-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.32); }
.about-video-card .wp-block-video,
.about-video-card figure { margin: 0; line-height: 0; }
.about-video-card video { width: 100%; height: 100%; max-height: 480px; object-fit: cover; display: block; border-radius: var(--radius-2xl); background: #000; }

/* ---------- انیمیشن ورود پلکانی کارت‌های ویژگی، مراحل و آمار ---------- */
.reveal.is-visible .feature-box,
.reveal.is-visible .step-row,
.reveal.is-visible .about-stat-card {
	animation: fardad-badge-in .6s ease both;
}
.about-feature-grid.is-visible .feature-box:nth-child(1) { animation-delay: .08s; }
.about-feature-grid.is-visible .feature-box:nth-child(2) { animation-delay: .18s; }
.about-feature-grid.is-visible .feature-box:nth-child(3) { animation-delay: .28s; }
.about-feature-grid.is-visible .feature-box:nth-child(4) { animation-delay: .38s; }
.reveal.is-visible .step-row:nth-child(1) { animation-delay: .06s; }
.reveal.is-visible .step-row:nth-child(2) { animation-delay: .16s; }
.reveal.is-visible .step-row:nth-child(3) { animation-delay: .26s; }
.reveal.is-visible .step-row:nth-child(4) { animation-delay: .36s; }
.about-stats-row.is-visible .about-stat-card:nth-child(1) { animation-delay: .05s; }
.about-stats-row.is-visible .about-stat-card:nth-child(2) { animation-delay: .15s; }
.about-stats-row.is-visible .about-stat-card:nth-child(3) { animation-delay: .25s; }
@keyframes fardad-badge-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.reveal.is-visible .feature-box,
	.reveal.is-visible .step-row,
	.reveal.is-visible .about-stat-card { animation: none; }
}

.gallery-item { position: relative; display: block; aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--card); transition: transform .3s, box-shadow .3s; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.3); }
.gallery-item img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-cap { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); padding: 14px 16px; font-size: 14px; font-weight: 600; color: #fff; }

.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 32px; cursor: zoom-out; }
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 88vh; max-width: 92vw; border-radius: 12px; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; inset-inline-end: 24px; display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #404040; background: rgba(23,23,23,.8); color: #fff; font-size: 20px; }

table.specs { width: 100%; border-collapse: collapse; }
table.specs thead th { background: var(--background); padding: 14px 20px; text-align: start; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--amber); }
table.specs td { border-top: 1px solid var(--border); padding: 14px 20px; font-size: 14px; color: #d4d4d4; }
table.specs td:last-child { font-weight: 700; }
table.specs tbody tr:nth-child(even) { background: rgba(23,23,23,.5); }
.specs-wrap { overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--border); }

.testimonial { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); padding: 24px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.testimonial:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.3); border-color: rgba(224,181,99,.4); }
.stars { color: var(--amber); letter-spacing: 2px; }
.testimonial blockquote { margin: 0; flex: 1; color: #e5e5e5; }
.testimonial .name { font-weight: 700; }
.testimonial .role { font-size: 14px; color: var(--muted-foreground); }

.trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--background); border-radius: var(--radius-2xl); padding: 22px 20px 28px; text-align: center; transition: transform .3s, border-color .3s, box-shadow .3s; overflow: hidden; }
.trust-item:hover { transform: translateY(-4px); border-color: rgba(224,181,99,.4); box-shadow: 0 18px 36px rgba(0,0,0,.28); }
.trust-item h4 { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; color: var(--foreground); }
.trust-item p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted-foreground); }
.trust-icon { display: flex; height: 68px; width: 68px; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 45%, var(--amber-dark) 100%); color: #1a1206; font-size: 22px; margin-bottom: 6px; box-shadow: 0 10px 22px rgba(224,181,99,.35), inset 0 1px 1px rgba(255,255,255,.4); flex-shrink: 0; }
.trust-icon svg { display: block; width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.trust-item:hover .trust-icon { transform: scale(1.06); box-shadow: 0 14px 28px rgba(224,181,99,.45), inset 0 1px 1px rgba(255,255,255,.4); }
.trust-icon { transition: transform .3s, box-shadow .3s; }

/* بخش تصویری/انیمیشنی مرتبط با هر کارت «چرا فرداد زغال»؛ کاملاً جدا از دایره‌ی
   طلایی آیکن — دایره‌ی طلایی فقط آیکن ساده دارد و هیچ عکس/انیمیشنی داخلش نیست. */
.trust-visual { position: relative; width: 100%; height: 92px; margin-bottom: 8px; border-radius: var(--radius-xl); overflow: hidden; background: radial-gradient(120% 120% at 50% 20%, rgba(224,181,99,.14) 0%, rgba(224,181,99,.03) 55%, transparent 100%); }
.trust-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ۱) ضمانت کیفیت — مهر تأیید با حلقه‌ی تپنده و تیک رسم‌شونده */
.tv-quality-ring { transform-origin: 60px 46px; animation: tv-ring-pulse 2.6s ease-in-out infinite; }
.tv-quality-check { stroke-dasharray: 20; stroke-dashoffset: 20; animation: tv-check-draw 2.6s ease-in-out infinite; }
@keyframes tv-ring-pulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: .15; } }
@keyframes tv-check-draw { 0%, 30% { stroke-dashoffset: 20; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }

/* ۲) ارسال سریع — کامیون در حرکت با خطوط سرعت */
.tv-shipping-truck { animation: tv-truck-move 3.2s ease-in-out infinite; }
.tv-shipping-wheel { transform-origin: center; animation: tv-wheel-spin 1s linear infinite; }
.tv-shipping-speedline { animation: tv-speedline 1.4s ease-in-out infinite; }
.tv-shipping-speedline:nth-child(2) { animation-delay: .18s; }
.tv-shipping-speedline:nth-child(3) { animation-delay: .36s; }
@keyframes tv-truck-move { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes tv-wheel-spin { to { transform: rotate(360deg); } }
@keyframes tv-speedline { 0% { opacity: 0; transform: translateX(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-14px); } }

/* ۳) پرداخت امن — قفل با اسکن نور امنیتی روی کارت */
.tv-payment-shackle { transform-origin: 60px 34px; animation: tv-shackle-lock 3s ease-in-out infinite; }
.tv-payment-scan { animation: tv-scan-move 2.6s ease-in-out infinite; }
@keyframes tv-shackle-lock { 0%, 15% { transform: translateY(-3px) rotate(-6deg); } 40%, 100% { transform: translateY(0) rotate(0); } }
@keyframes tv-scan-move { 0% { transform: translateX(-22px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }

/* ۴) پشتیبانی مستقیم — هدست با حلقه‌های صوتی تپنده */
.tv-support-wave { transform-origin: center; animation: tv-wave-out 2.2s ease-out infinite; }
.tv-support-wave:nth-child(2) { animation-delay: .55s; }
.tv-support-wave:nth-child(3) { animation-delay: 1.1s; }
@keyframes tv-wave-out { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .trust-visual * { animation: none !important; }
}

/* Accordion (FAQ) */
.accordion-item { overflow: hidden; border: 1px solid var(--border); background: rgba(31,31,31,.5); border-radius: var(--radius-2xl); margin-bottom: 12px; }
.accordion-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; text-align: start; font-weight: 600; color: #f5f5f5; background: none; border: none; }
.accordion-icon { flex-shrink: 0; display: flex; height: 24px; width: 24px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(224,181,99,.4); color: var(--amber); transition: transform .3s; }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.accordion-panel p { padding: 0 20px 20px; margin: 0; font-size: 14px; color: var(--muted-foreground); }

/* Blog preview cards on homepage */
.blog-card { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); border-color: rgba(224,181,99,.4); }
.blog-card .thumb { aspect-ratio: 16/10; background: var(--secondary); overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card .date { font-size: 12px; color: var(--muted-foreground); }
.blog-card h3 { margin: 0; font-size: 17px; }
.blog-card h3 a:hover { color: var(--amber); }
.blog-card p { margin: 0; font-size: 14px; color: var(--muted-foreground); flex: 1; }
.blog-card .more { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--amber); }

/* Contact form */
.contact-form { margin-top: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.field { width: 100%; border-radius: 12px; border: 1px solid var(--input); background: var(--background); padding: 12px 16px; color: var(--foreground); outline: none; font-family: inherit; font-size: 14px; }
.field:focus { border-color: var(--amber); }
.field-error { display: block; margin-top: 4px; font-size: 12px; color: var(--destructive); }
.form-success { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; border-radius: var(--radius-3xl); border: 1px solid rgba(224,181,99,.4); background: rgba(224,181,99,.1); padding: 40px; text-align: center; }
.form-success .check { display: flex; height: 48px; width: 48px; align-items: center; justify-content: center; border-radius: 999px; background: var(--amber); color: var(--primary-foreground); font-size: 22px; }
.honeypot {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 0 !important;
}

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding-block: 64px; }
.footer-top { display: flex; flex-direction: column; gap: 40px; margin-bottom: 28px; }
.footer-about { max-width: 560px; }
.footer-about h2 { font-size: 24px; margin: 4px 0; }
.footer-about p { color: var(--muted-foreground); }

/* Footer contact grid — unified, professional card-style contact chips
   (namespaced as footer-contact-* so it never collides with the
   homepage's own .contact-grid / .contact-info inquiry section) */
.footer-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) { .footer-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-contact-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  transition: border-color .2s, transform .2s, background .2s;
  min-width: 0;
}
.footer-contact-chip:hover { border-color: var(--amber); transform: translateY(-2px); background: rgba(224,181,99,.06); }

.footer-contact-chip-icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(250,250,250,.06);
  color: var(--foreground);
}
.footer-contact-chip-icon-phone { color: var(--amber); }
.footer-contact-chip-icon-email { color: var(--amber); }
.footer-contact-chip-whatsapp .footer-contact-chip-icon { color: #25d366; }
.footer-contact-chip-telegram .footer-contact-chip-icon { color: #29a9eb; }
.footer-contact-chip-rubika .footer-contact-chip-icon { color: #17a892; }

.footer-contact-chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-contact-chip-label { font-size: 12.5px; color: var(--muted-foreground); }
.footer-contact-chip-value {
  font-size: 15px; font-weight: 700; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}

.footer-links-row { padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--border); }
.footer-links-row .footer-col-label { display: block; margin-bottom: 10px; }
.footer-col-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.footer-links li { list-style: none; }
.footer-links a:hover { color: var(--amber); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding-top: 24px; margin-top: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 36px; width: 36px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(224,181,99,.4); background: rgba(224,181,99,.1); }
.footer-rights { font-size: 14px; color: var(--muted-foreground); }

/* Floating buttons */
.floating-whatsapp {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  border-radius: 999px; background: var(--amber); color: var(--primary-foreground);
  padding: 14px 20px; font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 25px rgba(224,181,99,.3);
  transition: transform .2s;
}
.floating-whatsapp:hover { transform: scale(1.05); }
.back-to-top {
  position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 50;
  display: flex; height: 44px; width: 44px; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); background: rgba(23,23,23,.85);
  color: var(--foreground); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Active nav link (scroll-spy) */
.js-nav-link { position: relative; transition: color .2s; }
.js-nav-link.is-active { color: var(--amber); }
.js-nav-link.is-active::after {
  content: ''; position: absolute; right: 0; left: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--amber);
}

/* Copyable phone numbers */
.js-copy-phone { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .2s, color .2s; }
.js-copy-phone:hover { border-color: var(--amber); color: var(--amber); }

/* Toast notifications */
.toast-stack {
  position: fixed; bottom: 88px; inset-inline-end: 24px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid rgba(224,181,99,.4);
  color: var(--foreground); border-radius: 999px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Contact form submit button loading state */
.btn[disabled] { opacity: .7; cursor: progress; pointer-events: none; }

/* WordPress core alignment helpers */
.alignleft { float: inline-start; margin-inline-end: 16px; }
.alignright { float: inline-end; margin-inline-start: 16px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: 13px; color: var(--muted-foreground); }

/* ==========================================================================
   Homepage sections — About / Products / Export / Contact
   (added for the direct-export B2B rebuild of page-home.php)
   ========================================================================== */

/* Thin metallic divider — used to separate the fiery-amber brand accent
   from an industrial "steel" note between sections. */
.metal-divider { height: 2px; width: 64px; margin: 0 auto 20px; background: var(--silver-metal); border-radius: 2px; opacity: .85; }
.metal-divider.align-start { margin-inline: 0; }

/* ---------- About Us / Direct Manufacturer ---------- */
.about-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.about-copy h2 { margin: 0 0 18px; }
.about-copy p { color: var(--muted-foreground); margin: 0 0 16px; font-size: 15.5px; }
.about-copy p:last-of-type { margin-bottom: 0; }
.trust-badges { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .trust-badges { grid-template-columns: 1fr 1fr; } }
.trust-badge {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.trust-badge .icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,205,212,.08); border: 1px solid rgba(200,205,212,.25); color: var(--silver);
}
.trust-badge strong { display: block; font-size: 14px; margin-bottom: 2px; }
.trust-badge span { display: block; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }

.about-figure { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.about-figure-poster { position: absolute; inset: 0; z-index: 1; }
.about-figure-video { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; background: transparent; }
.about-figure-stat {
  position: absolute; inset-inline-start: 20px; bottom: 20px;
  background: rgba(18,18,18,.85); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.about-figure-stat .num { color: var(--amber); font-size: 24px; font-weight: 800; line-height: 1; }
.about-figure-stat .label { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }

/* ---------- Products — technical spec cards ---------- */
.products-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 640px) { .products-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
.product-spec-card {
  border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.product-spec-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(224,181,99,0); transition: box-shadow .35s ease;
}
.product-spec-card:hover { border-color: rgba(224,181,99,.55); transform: translateY(-4px); }
.product-spec-card:hover::after { box-shadow: 0 0 26px 4px rgba(224,181,99,.28), 0 0 0 1px rgba(224,181,99,.35); }
.product-spec-card .thumb { aspect-ratio: 4/3; background: #0d0d0d; position: relative; overflow: hidden; }
.product-spec-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-spec-card:hover .thumb img { transform: scale(1.05); }
.product-spec-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.product-spec-card h3 { margin: 0 0 6px; font-size: 18px; }
.product-spec-card .subtitle { font-size: 12.5px; color: var(--amber); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; }
/* ---- کارت ویژه: بزرگ‌تر و برجسته‌تر از بقیه‌ی کارت‌های محصول ---- */
.product-spec-card.is-featured { border-color: rgba(224,181,99,.5); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
@media (min-width: 640px) {
  .products-grid { grid-auto-flow: dense; }
  .product-spec-card.is-featured { grid-column: span 2; }
  .product-spec-card.is-featured .thumb { aspect-ratio: 21/9; }
}
@media (min-width: 1100px) {
  .product-spec-card.is-featured { grid-column: span 2; grid-row: span 1; }
  .product-spec-card.is-featured .thumb { aspect-ratio: 16/8; }
}
.spec-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spec-table li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding-block: 7px; border-top: 1px dashed var(--border);
}
.spec-table li:first-child { border-top: 0; }
.spec-table .k { color: var(--muted-foreground); }
.spec-table .v { font-weight: 700; color: var(--foreground); text-align: left; }

/* ---------- Export / Logistics ---------- */
.export-section { position: relative; }
.export-grid { display: grid; gap: 20px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .export-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .export-grid { grid-template-columns: repeat(4, 1fr); } }
.export-feature {
  border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-xl);
  padding: 22px 20px;
}
.export-feature .icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,181,99,.1); border: 1px solid rgba(224,181,99,.3); color: var(--amber);
}
.export-feature h3 { margin: 0 0 8px; font-size: 15.5px; }
.export-feature p { margin: 0; font-size: 13.5px; color: var(--muted-foreground); line-height: 1.6; }

.export-capacity {
  margin-top: 28px; display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .export-capacity { grid-template-columns: repeat(4, 1fr); } }
.export-capacity .cell { background: var(--card); padding: 22px 16px; text-align: center; }
.export-capacity .cell .num { color: var(--silver); font-size: 22px; font-weight: 800; }
.export-capacity .cell .label { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }

.export-note {
  margin-top: 28px; border: 1px dashed rgba(200,205,212,.35); border-radius: var(--radius-lg);
  padding: 16px 20px; font-size: 13px; color: var(--muted-foreground); text-align: center;
}
.export-note b { color: var(--silver); }

/* ---------- Contact / Inquiry ---------- */
.contact-grid { display: grid; gap: 40px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-info-item {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.contact-info-item .icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,181,99,.1); border: 1px solid rgba(224,181,99,.3); color: var(--amber);
}
.contact-info-item .icon-whatsapp { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.3); color: #25d366; }
.contact-info-item .icon-telegram { background: rgba(41,169,235,.1); border-color: rgba(41,169,235,.3); color: #29a9eb; }
.contact-info-item .icon-rubika { background: rgba(23,168,146,.1); border-color: rgba(23,168,146,.3); color: #17a892; }
.contact-info-item strong { display: block; font-size: 13.5px; }
.contact-info-item a, .contact-info-item span.value { font-size: 13px; color: var(--muted-foreground); }
.contact-info-item a:hover { color: var(--amber); }

.contact-form { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); padding: 28px; }
.form-row { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 560px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label { font-size: 12.5px; font-weight: 700; color: var(--muted-foreground); }
.field-group input, .field-group select, .field-group textarea {
  background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  transition: border-color .2s, box-shadow .2s;
}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224,181,99,.15);
}
.field-group textarea { resize: vertical; min-height: 110px; }
.form-consent { font-size: 12px; color: var(--muted-foreground); margin: 4px 0 18px; }

/* Inline field errors + success handoff panel for the export inquiry form */
.field-error { display: block; min-height: 16px; font-size: 11.5px; color: var(--destructive); margin-top: 2px; }
.contact-success {
  border: 1px solid rgba(224,181,99,.35); background: var(--card); border-radius: var(--radius-2xl);
  padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.contact-success h3 { margin: 0; font-size: 18px; }
.contact-success p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; }
.contact-success-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.btn-link-reset { margin-top: 6px; background: none; border: 0; color: var(--muted-foreground); font-size: 12.5px; text-decoration: underline; }
.btn-link-reset:hover { color: var(--amber); }

/* ==========================================================================
   بهبودهای ساختار بصری — افزوده شده بدون تغییر در بخش هیرو
   (کنتراست تایپوگرافی بخش‌ها، تمایز پس‌زمینه‌ی بخش‌ها، بج/آیکون محصولات،
   سوییچر زبان در هدر چسبان، ردیف بازارهای صادراتی در فوتر، ریتم reveal)
   ========================================================================== */

/* ---------- ۱) کنتراست بیشتر برای تیتر بخش‌ها (خارج از هیرو) ---------- */
.section-title { letter-spacing: -0.01em; font-weight: 800; }
@media (min-width: 768px) { .section-title { font-size: 40px; } }

/* ---------- ۲) تمایز بصری بین بخش‌ها با بافت ظریف صنعتی ---------- */
.section-tinted {
  position: relative;
  background:
    radial-gradient(1100px 380px at 12% -8%, rgba(224,181,99,.05), transparent 60%),
    var(--background);
  overflow: hidden;
}
.section-tinted::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(224,181,99,.035) 0px,
    rgba(224,181,99,.035) 1px,
    transparent 1px,
    transparent 15px
  );
  opacity: .5;
  pointer-events: none;
}
.section-tinted > .wrap { position: relative; z-index: 1; }
.export-section.section-tinted { background:
    radial-gradient(1100px 380px at 88% -8%, rgba(224,181,99,.05), transparent 60%),
    var(--background); }

/* دیوایدر فلزی بین بخش‌ها — استفاده‌ی یکدست‌تر در کل صفحه */
.metal-divider { margin-bottom: 18px; }

/* ---------- ۳) بج و آیکون‌های ریز روی کارت محصول ---------- */
.product-spec-card { position: relative; }
.product-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  background: var(--amber);
  color: var(--primary-foreground);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(224,181,99,.35);
}
.spec-table .k { display: inline-flex; align-items: center; gap: 6px; }
.spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--amber);
  background: rgba(224,181,99,.1);
}
.spec-icon svg { width: 12px; height: 12px; }

/* ---------- ۴) ردیف بازارهای صادراتی در فوتر ---------- */
.footer-markets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.footer-markets-label { font-size: 12.5px; color: var(--muted-foreground); }
.footer-markets-list { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.market-badge {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--silver);
  background: rgba(255,255,255,.02);
}
@media (max-width: 480px) {
  .footer-markets { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- ۵) ریتم یکدست‌تر انیمیشن reveal روی بخش‌های تازه ---------- */
.about-grid > .reveal:nth-child(2),
.contact-grid > .reveal:nth-child(2) { transition-delay: .1s; }
.footer-contact-grid.reveal { transition-delay: .06s; }

/* ==========================================================================
   دور دوم بهبودهای بصری — عمق سایه، شیشه‌ای‌سازی، شماره‌گذاری بخش‌ها،
   تفکیک بصری اطلاعات تماس، اسکرول‌بار/فوکوس سفارشی، انیمیشن ورود دکمه‌های
   شناور، قاب صنعتی تصویر «درباره»، هماهنگی کارت‌های صادرات
   (باز هم بدون تغییر در هیرو)
   ========================================================================== */

/* ---------- ۱) عمق و سایه‌ی بیشتر روی کارت محصول ---------- */
.product-spec-card { box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.product-spec-card:hover { box-shadow: 0 20px 44px rgba(0,0,0,.4); }

/* ---------- ۲) کارت آماری شیشه‌ای روی تصویر «درباره» ---------- */
.about-figure-stat {
  border-color: rgba(224,181,99,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.about-figure-stat::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.about-figure-stat { position: relative; }

/* ---------- ۳) شماره‌گذاری بصری بخش‌ها ---------- */
.section-kicker { position: relative; display: inline-block; }
.section-num {
  position: absolute;
  top: -30px; left: 50%; transform: translateX(-50%);
  font-size: 76px; font-weight: 800; line-height: 1;
  color: var(--amber); opacity: .07;
  pointer-events: none; z-index: 0; white-space: nowrap;
}
.section-kicker .eyebrow { position: relative; z-index: 1; }
.section-kicker.align-start .section-num { left: 0; transform: none; top: -26px; font-size: 64px; }
@media (max-width: 640px) {
  .section-num { font-size: 56px; top: -22px; }
  .section-kicker.align-start .section-num { font-size: 46px; top: -18px; }
}

/* ---------- ۴) تفکیک بصری ستون اطلاعات تماس از فرم ---------- */
.contact-info {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,.015);
}
.contact-info-item { transition: border-color .2s, transform .2s; }
.contact-info-item:hover { border-color: rgba(224,181,99,.35); transform: translateY(-2px); }

/* ---------- ۵) اسکرول‌بار سفارشی هماهنگ با برند ---------- */
html { scrollbar-color: var(--amber-dark) var(--secondary); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--secondary); }
::-webkit-scrollbar-thumb { background: var(--amber-dark); border-radius: 999px; border: 2px solid var(--secondary); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* ---------- ۶) انیمیشن ورود ملایم دکمه‌های شناور ---------- */
.floating-whatsapp { animation: fardad-float-in .6s ease .5s both; }
@keyframes fardad-float-in {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp { animation: none; }
}

/* ---------- ۷) قاب صنعتی برای تصویر «درباره» ---------- */
.about-figure {
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}

/* ---------- ۸) هماهنگی کارت‌های ویژگی صادرات با بقیه‌ی کارت‌ها ---------- */
.export-feature { transition: transform .2s ease, border-color .2s ease; }
.export-feature:hover { transform: translateY(-3px); border-color: rgba(224,181,99,.35); }

/* ---------- ۹) اسلایدشوی خودکار (یک قاب) عکس‌های اضافی هر نوع زغال ---------- */
.photo-slider {
  max-width: 560px;
  margin: 0 auto;
}
.photo-slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(224,181,99,.18);
  background: var(--card);
}
.photo-slider-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
}
.photo-slider-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.photo-slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: fardadKenBurns 10s ease-in-out infinite;
  will-change: transform;
}
/* شروع هرکدام از فاز متفاوتی از انیمیشن تا زوم همه‌ی عکس‌ها هم‌زمان نباشد و طبیعی‌تر دیده شود */
.photo-slider-slide:nth-child(2) img { animation-delay: -3.3s; }
.photo-slider-slide:nth-child(3) img { animation-delay: -6.6s; }
.photo-slider-slide:nth-child(4) img { animation-delay: -1.6s; }
.photo-slider-slide:nth-child(5) img { animation-delay: -5s; }
.photo-slider-slide:nth-child(6) img { animation-delay: -8.3s; }
.photo-slider-slide:nth-child(7) img { animation-delay: -2.5s; }

@keyframes fardadKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.6%, 1.2%); }
  100% { transform: scale(1) translate(0, 0); }
}
.photo-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.photo-slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--amber-dark);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, width .2s ease, border-color .2s ease;
}
.photo-slider-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--amber);
  border-color: var(--amber);
}
@media (max-width: 640px) {
  .photo-slider { max-width: 100%; }
}

/* ---------- ۹.۱) همون اسلایدشو، وقتی داخل کارت کوچک محصول (صفحه‌ی اول) باشد ---------- */
.thumb .photo-slider {
  max-width: none;
  width: 100%;
  height: 100%;
}
.thumb .photo-slider-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  background: transparent;
}
.thumb .photo-slider-dots { display: none; }

/* ---------- یادداشت هشدار برای مدیر سایت (مثلاً جایگزینی تصویر موقت
   محصول)؛ فقط داخل پیشخوان/محتوای مدیریتی دیده می‌شود، برای مشتری
   بصری/آموزنده نیست. ---------- */
.todo-note {
  background: #fff7e6;
  border: 1px solid #f0c36d;
  color: #7a5b00;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 24px;
}