/* ============================================================
   صفحه اصلی — استایل
   ------------------------------------------------------------
   بعد از hz-tokens.css و hz-components.css لود می‌شود.
   هیچ رنگ خامی اینجا نیست؛ همه از var(--hz-*).

   ⚠ چهار دسته‌ی دستگاه، و تنها عددهای مجاز در @media این پروژه:
       min-width: 640 · 768 · 1024 · 1280
       max-width: 639 · 767 · 1023 · 1279
     از ۱۰۲۴ واقعی به بالا zoom:.8 فعال است (بخش ۶.۱ توکن‌ها) و zoom
     روی مدیا‌کوئری اثر ندارد — پس هیچ عدد دیگری ننویس، وگرنه روی
     لپ‌تاپ یک پله جابه‌جا مچ می‌شود.
   ============================================================ */

.hz-i { width: 1.25em; height: 1.25em; flex: none; }

/* ============================================================
   نوار اعلان
   ============================================================ */
.hz-promo {
    background: var(--hz-surface-dark);
    color: var(--hz-ink-inverse);
    font-size: var(--hz-text-sm);
}
.hz-promo__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hz-2);
    min-height: 2.5rem;
    text-align: center;
}
.hz-promo a, .hz-promo span { display: inline-flex; align-items: center; gap: var(--hz-2); }
.hz-promo a:hover { color: var(--hz-accent); }

/* ============================================================
   هدر
   ============================================================ */
.hz-header {
    position: sticky;
    top: 0;
    z-index: var(--hz-z-header);
    background: var(--hz-surface);
    border-bottom: 1px solid var(--hz-line);
}
.hz-header__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "burger logo actions"
        "search search search";
    align-items: center;
    gap: var(--hz-3);
    padding-block: var(--hz-3);
}
.hz-header__burger { grid-area: burger; }
.hz-logo { grid-area: logo; display: flex; align-items: center; justify-content: center; }
.hz-logo__img { max-height: 2.75rem; width: auto; object-fit: contain; }
.hz-logo__ph { min-height: 2.75rem; max-width: 11rem; }
.hz-header__actions { grid-area: actions; display: flex; align-items: center; gap: var(--hz-1); }

.hz-search {
    grid-area: search;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hz-2);
    background: var(--hz-surface-soft);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-full);
    padding-inline-start: var(--hz-4);
    min-width: 0;
}
.hz-search__icon { color: var(--hz-muted); }
.hz-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding-block: var(--hz-3);
    font-size: 16px;   /* زیر ۱۶ سافاری موبایل هنگام فوکوس زوم می‌کند */
}
.hz-search__input:focus { outline: none; }
.hz-search__btn { border-radius: var(--hz-radius-full); min-height: 40px; }

.hz-header__phone { display: none; align-items: center; gap: var(--hz-2); }
.hz-header__phone-text { display: grid; line-height: 1.3; }
.hz-header__phone-text small { color: var(--hz-muted); font-size: var(--hz-text-xs); }

.hz-header__cart { position: relative; }
.hz-header__cart-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-width: 1.25rem;
    padding-inline: 2px;
    border-radius: var(--hz-radius-full);
    background: var(--hz-accent);
    color: var(--hz-on-accent);
    font-size: var(--hz-text-xs);
    text-align: center;
    line-height: 1.25rem;
}

/* موبایل بزرگ: جست‌وجو کنار لوگو جا می‌شود */
@media (min-width: 768px) {
    .hz-header__row {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: "burger logo search actions";
        gap: var(--hz-4);
    }
    .hz-logo { justify-content: flex-start; }
}

/* لپ‌تاپ به بالا: منوی افقی به‌جای کشو */
@media (min-width: 1024px) {
    .hz-header__burger { display: none; }
    .hz-header__row { grid-template-columns: auto 1fr auto; grid-template-areas: "logo search actions"; }
    .hz-header__phone { display: inline-flex; }
    .hz-logo__img { max-height: 3.25rem; }
}

/* ============================================================
   منوی افقی — فقط از ۱۰۲۴ واقعی به بالا
   ============================================================ */
.hz-nav { display: none; border-top: 1px solid var(--hz-line-subtle); background: var(--hz-surface); }
@media (min-width: 1024px) { .hz-nav { display: block; } }

.hz-nav__list { display: flex; align-items: center; gap: var(--hz-1); }
.hz-nav__item { position: relative; }
.hz-nav__link {
    display: flex;
    align-items: center;
    gap: var(--hz-2);
    padding: var(--hz-3) var(--hz-4);
    font-size: var(--hz-text-sm);
    font-weight: var(--hz-weight-medium);
    border-radius: var(--hz-radius);
}
.hz-nav__link:hover { background: var(--hz-primary-soft); color: var(--hz-primary); }
.hz-nav__caret { width: 1em; height: 1em; opacity: .5; transform: rotate(90deg); }

.hz-nav__sub {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 14rem;
    padding: var(--hz-2);
    background: var(--hz-surface);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--hz-fast) var(--hz-ease), transform var(--hz-fast) var(--hz-ease), visibility var(--hz-fast);
    z-index: var(--hz-z-sticky);
}
.hz-nav__item:hover .hz-nav__sub,
.hz-nav__item:focus-within .hz-nav__sub { opacity: 1; visibility: visible; transform: none; }
.hz-nav__sub a {
    display: block;
    padding: var(--hz-2) var(--hz-3);
    border-radius: var(--hz-radius-sm);
    font-size: var(--hz-text-sm);
}
.hz-nav__sub a:hover { background: var(--hz-surface-hover); }

/* ============================================================
   هیرو
   ============================================================ */
.hz-hero { position: relative; }
.hz-hero__slider { position: relative; overflow: hidden; }
.hz-hero__track { position: relative; }

.hz-hero__slide {
    display: none;
    position: relative;
    min-height: clamp(20rem, 52vw, 30rem);
}
.hz-hero__slide.is-active { display: block; animation: hz-fade var(--hz-slow) var(--hz-ease); }
@keyframes hz-fade { from { opacity: 0 } to { opacity: 1 } }

.hz-hero__media { position: absolute; inset: 0; background: var(--hz-surface-sunken); }
.hz-hero__media .hz-ph-box { border: 0; border-radius: 0; }
.hz-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* لایه‌ی خوانایی: بدونش متن سفید روی تصویر روشن ناخواناست */
.hz-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(2, 12, 20, .78), rgba(2, 12, 20, .35) 55%, rgba(2, 12, 20, .1));
}
.hz-hero__slide--b .hz-hero__media::after { background: linear-gradient(to left, rgba(20, 10, 2, .78), rgba(20, 10, 2, .3)); }
.hz-hero__slide--c .hz-hero__media::after { background: linear-gradient(to left, rgba(4, 20, 24, .8), rgba(4, 20, 24, .3)); }

.hz-hero__body {
    position: relative;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding-block: var(--hz-10);
    color: var(--hz-ink-inverse);
}
.hz-hero__body > .hz-container { display: grid; gap: var(--hz-3); max-width: min(var(--hz-container), 100%); }
.hz-hero__eyebrow { font-size: var(--hz-text-sm); opacity: .85; }
.hz-hero__title { font-size: var(--hz-text-4xl); font-weight: var(--hz-weight-black); max-width: 22ch; }
.hz-hero__sub { font-size: var(--hz-text-lg); max-width: 42ch; opacity: .92; }
.hz-hero__body .hz-btn { justify-self: start; margin-top: var(--hz-2); }
.hz-hero__body .hz-ph { color: var(--hz-accent); background: rgba(255, 255, 255, .1); border-color: var(--hz-accent); }

.hz-hero__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--hz-radius-full);
    background: rgba(255, 255, 255, .85);
    color: var(--hz-ink);
    box-shadow: var(--hz-shadow);
}
.hz-hero__nav:hover { background: #fff; }
.hz-hero__nav--prev { inset-inline-start: var(--hz-4); }
.hz-hero__nav--next { inset-inline-end: var(--hz-4); }
@media (min-width: 768px) { .hz-hero__nav { display: flex; } }

.hz-hero__dots {
    position: absolute;
    inset-block-end: var(--hz-4);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: var(--hz-4);
}
.hz-hero__dot {
    position: relative;
    width: .75rem; height: .75rem;
    border-radius: var(--hz-radius-full);
    background: rgba(255, 255, 255, .5);
    transition: width var(--hz-fast) var(--hz-ease), background var(--hz-fast) var(--hz-ease);
}
/* هدف لمسی بزرگ‌تر از نقطه‌ی دیده‌شده — نقطه‌ی ۱۲ پیکسلی با انگشت
   قابل زدن نیست. سطح لمسی ۲۶×۳۰ می‌شود بدون اینکه نقطه بزرگ شود. */
.hz-hero__dot::after {
    content: "";
    position: absolute;
    inset-block: -10px;
    inset-inline: -7px;
}
.hz-hero__dot.is-active { width: 1.6rem; background: var(--hz-accent); }

/* ============================================================
   نوار اعتماد
   ============================================================ */
.hz-trust { border-bottom: 1px solid var(--hz-line); background: var(--hz-surface); }
.hz-trust__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hz-3);
    padding-block: var(--hz-5);
}
.hz-trust__item { display: flex; align-items: flex-start; gap: var(--hz-3); min-width: 0; }
.hz-trust__icon {
    display: grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    flex: none;
    border-radius: var(--hz-radius);
    background: var(--hz-primary-soft);
    color: var(--hz-primary);
}
.hz-trust__text { display: grid; gap: 2px; min-width: 0; }
.hz-trust__text strong { font-size: var(--hz-text-sm); }
.hz-trust__text small { color: var(--hz-muted); font-size: var(--hz-text-xs); }

@media (min-width: 768px) {
    .hz-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hz-5); }
}

/* ============================================================
   دسته‌ها
   ============================================================ */
.hz-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--hz-3);
}
.hz-cat {
    display: grid;
    justify-items: center;
    gap: var(--hz-2);
    padding: var(--hz-5) var(--hz-3);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface);
    text-align: center;
    transition: border-color var(--hz-fast) var(--hz-ease), transform var(--hz-fast) var(--hz-ease), box-shadow var(--hz-fast) var(--hz-ease);
}
.hz-cat:hover { border-color: var(--hz-primary-border); box-shadow: var(--hz-shadow-sm); transform: translateY(-2px); }
.hz-cat__icon {
    display: grid;
    place-items: center;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--hz-radius-full);
    background: var(--hz-primary-soft);
    color: var(--hz-primary);
}
.hz-cat__icon .hz-i { width: 1.6em; height: 1.6em; }
.hz-cat__name { font-size: var(--hz-text-sm); font-weight: var(--hz-weight-medium); }

/* ============================================================
   خدمات
   ============================================================ */
.hz-service {
    display: grid;
    gap: var(--hz-2);
    align-content: start;
    padding: var(--hz-5);
    background: var(--hz-surface);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
}
.hz-service__icon {
    display: grid;
    place-items: center;
    width: 3rem; height: 3rem;
    border-radius: var(--hz-radius);
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
}
.hz-service__icon .hz-i { width: 1.5em; height: 1.5em; }
.hz-service__title { font-size: var(--hz-text-lg); }
.hz-service__text { color: var(--hz-muted); font-size: var(--hz-text-sm); }
.hz-service__link { display: inline-flex; align-items: center; gap: var(--hz-1); color: var(--hz-primary); font-size: var(--hz-text-sm); }

/* ============================================================
   فرم صورت
   ============================================================ */
.hz-faces {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 6.5rem;
    gap: var(--hz-4);
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: var(--hz-2);
    scroll-snap-type: x mandatory;
}
.hz-faces > * { scroll-snap-align: start; }
@media (min-width: 768px) {
    .hz-faces {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
        overflow-x: visible;
    }
}
.hz-face { display: grid; justify-items: center; gap: var(--hz-2); }
.hz-face__shape {
    width: 4.5rem; height: 5.5rem;
    border: 2px solid var(--hz-line-strong);
    background: var(--hz-surface-soft);
    transition: border-color var(--hz-fast) var(--hz-ease), background var(--hz-fast) var(--hz-ease);
}
.hz-face:hover .hz-face__shape { border-color: var(--hz-primary); background: var(--hz-primary-soft); }
.hz-face__name { font-size: var(--hz-text-sm); }

/* ============================================================
   کارت محصول
   ============================================================ */
.hz-pcard { display: flex; flex-direction: column; }
.hz-pcard .hz-card__body { flex: 1; }
.hz-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--hz-2); margin-top: auto; }
.hz-pcard__price { font-weight: var(--hz-weight-black); font-size: var(--hz-text-lg); }
.hz-pcard__price small { font-weight: var(--hz-weight-normal); font-size: var(--hz-text-xs); color: var(--hz-muted); }
.hz-pcard__add { min-height: 38px; padding-inline: var(--hz-3); font-size: var(--hz-text-xs); }
.hz-pcard--empty { opacity: .85; }

/* اسکلت — جای داده‌ای که هنوز از ERP نیامده */
.hz-skel {
    display: block;
    height: .9rem;
    border-radius: var(--hz-radius-full);
    background: linear-gradient(90deg, var(--hz-surface-sunken), var(--hz-surface-soft), var(--hz-surface-sunken));
    background-size: 200% 100%;
    animation: hz-shimmer 1.6s infinite;
}
.hz-skel--short { width: 45%; }
@keyframes hz-shimmer { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .hz-skel { animation: none } }

/* ============================================================
   بنر فصلی
   ============================================================ */
.hz-sunban { padding-block: var(--hz-section-y); }
.hz-sunban__box {
    display: grid;
    gap: var(--hz-6);
    align-items: center;
    padding: var(--hz-6);
    border-radius: var(--hz-radius-xl);
    background: linear-gradient(135deg, var(--hz-accent-soft), var(--hz-primary-soft));
    border: 1px solid var(--hz-accent-border);
}
.hz-sunban__text { display: grid; gap: var(--hz-3); justify-items: start; }
.hz-sunban__text h2 { font-size: var(--hz-text-3xl); }
.hz-sunban__text p { color: var(--hz-muted); }
.hz-sunban__media { min-height: 12rem; border-radius: var(--hz-radius-lg); overflow: hidden; }
.hz-sunban__img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
    .hz-sunban__box { grid-template-columns: 1.1fr .9fr; padding: var(--hz-10); }
}

/* ============================================================
   رزرو نوبت
   ============================================================ */
.hz-appt__box {
    display: grid;
    gap: var(--hz-6);
    padding: var(--hz-6);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-xl);
    background: var(--hz-surface);
    box-shadow: var(--hz-shadow-sm);
}
.hz-appt__intro { display: grid; gap: var(--hz-3); align-content: start; justify-items: start; }
.hz-appt__intro h2 { font-size: var(--hz-text-3xl); }
.hz-appt__meta { display: grid; gap: var(--hz-2); font-size: var(--hz-text-sm); }
.hz-appt__meta li { display: flex; align-items: center; gap: var(--hz-2); color: var(--hz-muted); }
.hz-appt__form { display: grid; gap: var(--hz-4); }

@media (min-width: 1024px) {
    .hz-appt__box { grid-template-columns: 1fr 1fr; gap: var(--hz-10); padding: var(--hz-10); }
}

/* ============================================================
   برندها
   ============================================================ */
.hz-brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--hz-3);
}
.hz-brand {
    display: grid;
    place-items: center;
    min-height: 5rem;
    padding: var(--hz-3);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    color: var(--hz-muted);
    font-size: var(--hz-text-sm);
    transition: border-color var(--hz-fast) var(--hz-ease);
}
.hz-brand:hover { border-color: var(--hz-primary-border); }
.hz-brand img { max-height: 2.75rem; object-fit: contain; }
.hz-brand--empty { padding: var(--hz-2); }

/* ============================================================
   نظرها
   ============================================================ */
.hz-review__stars { display: flex; gap: 2px; color: var(--hz-accent); }
.hz-review__stars .hz-i { fill: currentColor; }
.hz-review__text { font-size: var(--hz-text-sm); line-height: var(--hz-leading); }
.hz-review--empty .hz-card__body { min-height: 8rem; }

/* ============================================================
   خواندنی‌ها
   ============================================================ */
.hz-post .hz-thumb { aspect-ratio: 16 / 9; }

/* ============================================================
   درباره
   ============================================================ */
.hz-about__grid { display: grid; gap: var(--hz-8); align-items: center; }
.hz-about__text { display: grid; gap: var(--hz-3); justify-items: start; }
.hz-about__text h2 { font-size: var(--hz-text-3xl); }
.hz-about__lead { font-size: var(--hz-text-lg); }
.hz-about__body { color: var(--hz-muted); }

.hz-about__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hz-3);
}
.hz-stat {
    display: grid;
    gap: var(--hz-1);
    padding: var(--hz-5);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface-soft);
    border: 1px solid var(--hz-line);
    text-align: center;
}
.hz-stat strong { font-size: var(--hz-text-2xl); font-weight: var(--hz-weight-black); color: var(--hz-primary); }
.hz-stat span { font-size: var(--hz-text-sm); color: var(--hz-muted); }

@media (min-width: 1024px) {
    .hz-about__grid { grid-template-columns: 1.15fr .85fr; }
}

/* ============================================================
   شعبه و نقشه
   ============================================================ */
.hz-branch { display: grid; gap: var(--hz-6); }
.hz-branch__list { display: grid; gap: var(--hz-4); }
.hz-branch__list li { display: flex; gap: var(--hz-3); align-items: flex-start; min-width: 0; }
.hz-branch__icon {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; flex: none;
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    border: 1px solid var(--hz-line);
    color: var(--hz-primary);
}
.hz-branch__pair { display: grid; gap: 2px; min-width: 0; }
.hz-branch__pair small { color: var(--hz-muted); font-size: var(--hz-text-xs); }
.hz-branch__value { font-size: var(--hz-text-sm); overflow-wrap: anywhere; }
.hz-branch__note { margin-top: var(--hz-4); color: var(--hz-muted); font-size: var(--hz-text-sm); }

.hz-branch__map {
    display: grid;
    place-items: center;
    gap: var(--hz-3);
    min-height: 14rem;
    padding: var(--hz-5);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface);
    border: 1px solid var(--hz-line);
}
.hz-branch__pinbox { display: grid; justify-items: center; gap: var(--hz-2); color: var(--hz-primary); }
.hz-branch__pinbox .hz-i { width: 2.5em; height: 2.5em; }

@media (min-width: 1024px) {
    .hz-branch { grid-template-columns: 1fr 1fr; gap: var(--hz-10); align-items: start; }
}

/* ============================================================
   خبرنامه
   ============================================================ */
.hz-news__box {
    display: grid;
    gap: var(--hz-5);
    align-items: center;
    padding: var(--hz-6);
    border-radius: var(--hz-radius-xl);
    background: var(--hz-surface-dark);
    color: var(--hz-ink-inverse);
}
.hz-news__box h2 { color: var(--hz-ink-inverse); font-size: var(--hz-text-2xl); }
.hz-news__box .hz-muted { color: rgba(255, 255, 255, .72); }
.hz-news__form { display: grid; grid-template-columns: 1fr auto; gap: var(--hz-2); min-width: 0; }
.hz-news__form .hz-input { border-color: transparent; }

@media (min-width: 768px) {
    .hz-news__box { grid-template-columns: 1.2fr .8fr; padding: var(--hz-8); }
}

/* ============================================================
   فوتر
   ============================================================ */
.hz-footer { margin-top: var(--hz-section-y); background: var(--hz-surface-soft); border-top: 1px solid var(--hz-line); }
.hz-footer__grid {
    display: grid;
    gap: var(--hz-8);
    padding-block: var(--hz-10);
}
.hz-footer__brand { display: grid; gap: var(--hz-4); align-content: start; }
.hz-logo--footer { justify-content: flex-start; }
.hz-footer__about { color: var(--hz-muted); font-size: var(--hz-text-sm); }
.hz-footer__contact { display: grid; gap: var(--hz-3); font-size: var(--hz-text-sm); }
.hz-footer__contact li { display: flex; gap: var(--hz-2); align-items: flex-start; color: var(--hz-muted); }
.hz-footer__contact .hz-i { color: var(--hz-primary); margin-top: .2em; }

.hz-footer__col h3 { font-size: var(--hz-text-base); margin-bottom: var(--hz-3); }
.hz-footer__col ul { display: grid; gap: var(--hz-1); font-size: var(--hz-text-sm); }
/* لینک متنی ۲۲ پیکسلی روی گوشی هدف لمسیِ کوچکی است؛ با padding عمودی
   به ۳۲ می‌رسد بدون اینکه ستون شلوغ شود. */
.hz-footer__col a { display: inline-block; padding-block: var(--hz-1); color: var(--hz-muted); }
.hz-footer__col a:hover { color: var(--hz-primary); }

.hz-footer__socials { display: flex; flex-wrap: wrap; gap: var(--hz-2); margin-bottom: var(--hz-4); }
.hz-footer__social { border: 1px solid var(--hz-line); background: var(--hz-surface); }
.hz-footer__social-ph { min-height: 3rem; }
.hz-footer__trust { display: grid; gap: var(--hz-3); }
.hz-footer__trust-item {
    display: flex; align-items: center; gap: var(--hz-2);
    padding: var(--hz-3);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    font-size: var(--hz-text-xs);
    color: var(--hz-muted);
}
.hz-footer__trust-ph { min-height: 4.5rem; }

.hz-footer__bar { border-top: 1px solid var(--hz-line); }
.hz-footer__bar-row {
    display: grid;
    gap: var(--hz-2);
    padding-block: var(--hz-4);
    font-size: var(--hz-text-xs);
    color: var(--hz-muted);
    text-align: center;
}

@media (min-width: 640px) {
    .hz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .hz-footer__grid { grid-template-columns: 1.4fr .8fr .8fr .8fr 1fr; }
    .hz-footer__bar-row { grid-template-columns: 1fr auto; text-align: start; }
}

/* ============================================================
   کشوی موبایل
   ⚠ عنصر بسته باید display:none باشد نه فقط visibility:hidden —
     وگرنه محتوایش در چیدمان می‌ماند و صفحه را پهن می‌کند.
   ============================================================ */
.hz-drawer[hidden] { display: none; }
.hz-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--hz-z-drawer);
}
.hz-drawer__backdrop { position: absolute; inset: 0; background: rgba(2, 8, 16, .5); }
.hz-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(20rem, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--hz-surface);
    box-shadow: var(--hz-shadow-lg);
    overflow-y: auto;
    /* ⚠ RTL: translate برعکس نمی‌شود، پس جهت را صریح می‌نویسیم */
    animation: hz-slide-in var(--hz-normal) var(--hz-ease);
}
@keyframes hz-slide-in { from { transform: translateX(-100%) } to { transform: none } }

.hz-drawer__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--hz-4);
    border-bottom: 1px solid var(--hz-line);
}
.hz-drawer__title { font-weight: var(--hz-weight-bold); }
.hz-drawer__list { padding: var(--hz-2); }
.hz-drawer__group { border-bottom: 1px solid var(--hz-line-subtle); }
.hz-drawer__head {
    display: flex; align-items: center; gap: var(--hz-2);
    padding: var(--hz-3);
    font-weight: var(--hz-weight-medium);
}
.hz-drawer__sub { padding: 0 var(--hz-3) var(--hz-3) var(--hz-8); display: grid; gap: var(--hz-2); }
.hz-drawer__sub a { font-size: var(--hz-text-sm); color: var(--hz-muted); }
.hz-drawer__foot { margin-top: auto; display: grid; gap: var(--hz-3); padding: var(--hz-4); border-top: 1px solid var(--hz-line); }

@media (min-width: 1024px) { .hz-drawer { display: none; } }

/* وقتی کشو باز است، صفحه‌ی پشت اسکرول نخورد */
body.hz-locked { overflow: hidden; }

/* ============================================================
   پنل راه‌اندازی (?setup=1)
   ============================================================ */
.hz-setup {
    position: fixed;
    inset-block-end: var(--hz-4);
    inset-inline-end: var(--hz-4);
    z-index: var(--hz-z-toast);
    width: min(22rem, calc(100vw - 2rem));
    max-height: 60vh;
    overflow: auto;
    padding: var(--hz-4);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface);
    border: 1px solid var(--hz-accent-border);
    box-shadow: var(--hz-shadow-lg);
    font-size: var(--hz-text-sm);
}
.hz-setup summary {
    display: grid;
    gap: 2px;
    cursor: pointer;
    list-style: none;
}
.hz-setup summary::-webkit-details-marker { display: none; }
.hz-setup[open] summary { margin-bottom: var(--hz-3); }
.hz-setup summary span { color: var(--hz-muted); font-size: var(--hz-text-xs); }
.hz-setup ul { display: grid; gap: var(--hz-1); }
.hz-setup code { background: var(--hz-surface-sunken); padding: 2px 6px; border-radius: var(--hz-radius-sm); font-size: var(--hz-text-xs); }
.hz-setup footer { margin-top: var(--hz-3); color: var(--hz-muted); font-size: var(--hz-text-xs); }
.hz-setup--ok { border-color: var(--hz-success); }

/* هدر بعد از اسکرول — سایه تا از محتوا جدا شود */
.hz-header.is-scrolled { box-shadow: var(--hz-shadow); }