/* ═══════════════════════════════════════════════════════════════════════
   ZamaniAuto — Layout System v1  (single source of truth)
   عرض صفحه و حاشیه کناری (gutter) همه صفحات فقط از این‌جا تعیین می‌شود.

   قرارداد (outer-box):  max-width شامل gutter است؛
   پس لبه محتوا در همه صفحات = --za-content  (در دسکتاپ 1092px).

   --za-container         صفحات محتوایی: خانه، بلاگ، پست، پورتفولیو، درباره، تماس،
                          گواهینامه‌ها، خدمات، فوتر، breadcrumb
   --za-container-narrow  عرض خوانش: سیاست‌ها، بخش‌های narrow
   --za-container-wide    سطوح کاتالوگ: هر .shop-container (هدر + محتوای فروشگاه)
   --za-gutter            24px  |  ≤640px: 16px   (شبکه 4px)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --za-container:1140px;
  --za-container-narrow:860px;
  --za-container-wide:1280px;
  --za-gutter:24px;
  --za-content:calc(var(--za-container) - (2 * var(--za-gutter)));
}
@media (max-width:640px){
  :root{--za-gutter:16px}
}

/* کانتینر فروشگاه: هدر فروشگاه (shopbar) و محتوای همه صفحات فروشگاه از همین قاعده
   استفاده می‌کنند تا لبه‌ها دقیقاً هم‌تراز باشند. این فایل عمداً بعد از همه CSSهای
   فروشگاه لود می‌شود؛ پس هیچ فایل دیگری نباید عرض/gutter این کلاس را بازنویسی کند. */
.shop-container{
  box-sizing:border-box;
  width:100%;
  max-width:var(--za-container-wide);
  margin-inline:auto;
  padding-inline:var(--za-gutter);
}

/* AUDIT-2026-10-12 (shared: public + shop) */
/* iOS Safari zooms on focus when form text is under 16px. */
@media (max-width: 767px) {
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]), select, textarea) { font-size: 16px !important; }
  /* Footer legal links overflowed sideways on phones: let the row wrap. */
  .za-footer-legal-row, .footer-legal-links { flex-wrap: wrap !important; justify-content: center; row-gap: 6px; max-width: 100%; }
  .lang-switcher .lang-btn { min-height: 32px; }
}

/* TOUCH-2026-10: enforce WCAG 2.2 AA minimum target size on compact controls. */
@media (max-width: 1024px) {
  html body :is(button, [role="button"], select, input[type="submit"], input[type="button"]) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  html body :is(.form-group input:not([type="hidden"]), .form-group select, .qc-input, .qc-select, .za-form-control) {
    min-block-size: 44px !important;
  }
  html body a:is([class*="btn"], [class*="chip"], [class*="pill"], [class*="tab"], [class*="cta"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  html body :is(.zc-orbit__chip[href], .nav-mobile-tabs a, .nav-links.active a, .cat-btn, .pf-filter-tab, .pf-filter-tabs a) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  html body :is(.cat-btn, .pf-filter-tab) {
    padding-block: 8px !important;
    line-height: 1.25 !important;
  }
}