/**
 * about.css
 *
 * Dandiran WooCommerce Theme — صفحه «درباره ما»
 *
 * ساده و سبک، بر پایه‌ی --dnd-* توکن‌ها (dnd-tokens.css) و گرید بوت‌استرپ
 * (که سراسر سایت لود شده). فقط شامل استایل کامپوننت‌های همین صفحه است.
 * وابسته: dnd-tokens.css (enqueue شده به‌عنوان دیپندنسی در inc/enqueue.php).
 */

.dnd-about-page {
  padding: 56px 0 72px;
}

/* ------------------------------------------------------------------ */
/* معرفی فروشگاه + لوگو                                                 */
/* ------------------------------------------------------------------ */

.dnd-about-intro {
  padding-bottom: 56px;
}

.dnd-about-intro__text p {
  color: var(--dnd-text);
  font-size: 15px;
  line-height: 2.1;
  margin-bottom: 18px;
}

.dnd-about-intro__text p:last-child {
  margin-bottom: 0;
}

.dnd-about-intro__text b {
  color: var(--dnd-primary);
  font-weight: 700;
}

.dnd-about-intro__brand {
  display: flex;
  justify-content: center;
}

.dnd-about-intro__logo {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* چرا از ما خرید کنیم + نماد اعتماد                                     */
/* ------------------------------------------------------------------ */

.dnd-about-why {
  padding-top: 40px;
  border-top: 1px solid var(--dnd-border);
}

.dnd-about-why__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--dnd-primary);
  margin-bottom: 16px;
}

.dnd-about-why__text {
  color: var(--dnd-muted);
  font-size: 14px;
  line-height: 2.1;
  margin: 0;
}

.dnd-about-why__enamad img {
  width: 100%;
  max-width: 110px;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* واکنش‌گرا — تبلت و موبایل                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .dnd-about-intro__logo {
    max-width: 180px;
  }

  .dnd-about-why__enamad {
    margin-top: 24px;
  }
}

@media (max-width: 767.98px) {
  .dnd-about-page {
    padding: 36px 0 48px;
  }

  .dnd-about-intro {
    padding-bottom: 36px;
  }

  .dnd-about-why {
    padding-top: 28px;
  }
}