/* =============================================================
   Homepage Modern Layer
   روی قالب فعلی سوار می‌شود؛ فقط صفحه اصلی این فایل را لود می‌کند.
   ============================================================= */

:root {
    --hm-primary: var(--az-primary, #3D5826);
    --hm-primary-2: var(--az-primary-2, #436226);
    --hm-accent: #42B36F;
    --hm-ink: var(--az-ink, #171E11);
    --hm-muted: var(--az-muted, #5A6353);
    --hm-surface: #ffffff;
    --hm-bg: var(--az-bg, #FAF9F6);
    --hm-border: var(--az-border, #F1EDE5);
    --hm-radius: 22px;
    --hm-shadow: 0 18px 45px -28px rgb(var(--az-primary-rgb, 6 44 120) / .45);
    --hm-shadow-lg: 0 30px 70px -40px rgb(var(--az-primary-rgb, 6 44 120) / .55);
}

.hm-section { padding: 64px 0; position: relative; }
.hm-section--soft { background: linear-gradient(180deg, #ffffff 0%, var(--hm-bg) 100%); }
.hm-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ---------- سربرگ بخش‌ها ---------- */
.hm-head { text-align: center; margin-bottom: 42px; }
.hm-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgb(var(--az-primary-rgb, 6 44 120) / .08); color: var(--hm-primary);
    padding: 9px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 800;
}
.hm-title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900; color: var(--hm-ink);
    margin: 16px 0 10px; line-height: 1.7;
    position: relative; display: inline-block; padding-bottom: 14px;
}
.hm-title::after {
    content: ""; position: absolute; bottom: 0; right: 50%; transform: translateX(50%);
    width: 96px; height: 5px; border-radius: 4px;
    background: linear-gradient(135deg, var(--hm-primary), var(--hm-primary-2));
}
.hm-sub { font-size: 16px; color: var(--hm-muted); max-width: 640px; margin: 0 auto; line-height: 2.2; }

/* ---------- نوار اعتماد ---------- */
.hm-trust {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hm-trust__item {
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius); padding: 22px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--hm-shadow);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.hm-trust__item:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-lg); }
.hm-trust__icon {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; background: rgb(var(--az-primary-rgb, 6 44 120) / .09); color: var(--hm-primary);
}
.hm-trust__title { font-weight: 800; color: var(--hm-ink); font-size: 15px; margin: 0 0 2px; }
.hm-trust__text { font-size: 13px; color: var(--hm-muted); margin: 0; line-height: 1.9; }

/* ---------- آمار ---------- */
.hm-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    background: linear-gradient(135deg, var(--hm-primary) 0%, #3A5223 100%);
    border-radius: 28px; padding: 38px 28px; color: #fff;
    box-shadow: var(--hm-shadow-lg);
    position: relative; overflow: hidden;
}
.hm-stats::before {
    content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255, 255, 255, .07); top: -140px; left: -80px;
}
.hm-stat { text-align: center; position: relative; }
.hm-stat__value { font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; letter-spacing: .5px; }
.hm-stat__label { font-size: 13.5px; opacity: .85; margin-top: 4px; }

/* ---------- دسته‌بندی سریع ---------- */
.hm-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hm-cat {
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: 18px; padding: 18px 10px; text-align: center;
    display: block; text-decoration: none; color: var(--hm-ink);
    transition: .25s cubic-bezier(.4,0,.2,1);
}
.hm-cat:hover { transform: translateY(-4px); border-color: var(--hm-primary); color: var(--hm-primary); box-shadow: var(--hm-shadow); }
.hm-cat img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; }
.hm-cat span { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.8; }

/* ---------- فراخوان پایانی ---------- */
.hm-cta {
    background: linear-gradient(135deg, var(--az-primary, #3D5826) 0%, var(--az-primary-2, #436226) 100%);
    border-radius: 28px; color: #fff; padding: 44px 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; box-shadow: var(--hm-shadow-lg);
}
.hm-cta h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; margin: 0 0 8px; }
.hm-cta p { margin: 0; opacity: .9; font-size: 15px; line-height: 2; }
.hm-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hm-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 14px; font-weight: 800; font-size: 15px;
    text-decoration: none; transition: .2s; border: 2px solid transparent;
}
.hm-btn--light { background: #fff; color: var(--hm-primary); }
.hm-btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); color: var(--hm-primary); }
.hm-btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.hm-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- انیمیشن ورود ---------- */
.hm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.hm-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- بازگشت به بالا ---------- */
.hm-to-top {
    position: fixed; bottom: 100px; inset-inline-start: 18px;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: var(--hm-primary); color: #fff; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 16px 30px -16px rgb(var(--az-primary-rgb, 6 44 120) / .9); z-index: 1000;
}
.hm-to-top.show { display: inline-flex; }

/* ---------- بهبود کارت‌های موجود قالب ---------- */
main .card { border-radius: 18px; }
main img { max-width: 100%; }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 991.98px) {
    .hm-trust { grid-template-columns: repeat(2, 1fr); }
    .hm-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .hm-cats { grid-template-columns: repeat(3, 1fr); }
    .hm-section { padding: 46px 0; }
}
@media (max-width: 575.98px) {
    .hm-trust { grid-template-columns: 1fr; }
    .hm-cats { grid-template-columns: repeat(2, 1fr); }
    .hm-cta { padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================ نسخه ۲ ویترین ============================ */

/* پس‌زمینه‌های نرم */
.hm-section--blob { position: relative; overflow: hidden; }
.hm-section--blob::before,
.hm-section--blob::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none;
}
.hm-section--blob::before { width: 420px; height: 420px; background: #ECE4D1; top: -180px; right: -140px; }
.hm-section--blob::after  { width: 360px; height: 360px; background: #ccfbf1; bottom: -160px; left: -120px; }
.hm-section--blob > * { position: relative; z-index: 1; }

/* جستجوی قهرمان */
.hm-search {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    border: 1px solid var(--hm-border);
    border-radius: 26px;
    padding: 26px;
    box-shadow: var(--hm-shadow-lg);
    max-width: 920px;
    margin: 0 auto;
}
.hm-search__title { text-align: center; font-weight: 900; font-size: clamp(19px, 2.4vw, 26px); color: var(--hm-ink); margin: 0 0 16px; }
.hm-search__form { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-search__input {
    flex: 1 1 320px; height: 56px; border-radius: 16px;
    border: 1px solid var(--hm-border); background: #fff; color: var(--hm-ink);
    padding: 0 18px; font-size: 15.5px; outline: none; transition: .2s;
    font-family: inherit;
}
.hm-search__input:focus { border-color: var(--hm-primary); box-shadow: 0 0 0 4px rgb(var(--az-primary-rgb, 6 44 120) / .12); }
.hm-search__btn {
    height: 56px; padding: 0 30px; border: 0; border-radius: 16px; cursor: pointer;
    background: linear-gradient(135deg, var(--hm-primary), var(--hm-primary-2));
    color: #fff; font-weight: 800; font-size: 15.5px; font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px; transition: .2s;
}
.hm-search__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -18px var(--hm-primary); }
.hm-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.hm-chip {
    padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: rgb(var(--az-primary-rgb, 6 44 120) / .07); color: var(--hm-primary); text-decoration: none; transition: .2s;
}
.hm-chip:hover { background: var(--hm-primary); color: #fff; }

/* مراحل خرید */
.hm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: hmstep; }
.hm-step {
    background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius);
    padding: 26px 20px; text-align: center; position: relative; transition: .25s;
}
.hm-step:hover { transform: translateY(-5px); box-shadow: var(--hm-shadow); }
.hm-step::before {
    counter-increment: hmstep; content: counter(hmstep);
    position: absolute; top: -16px; right: 50%; transform: translateX(50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hm-primary), var(--hm-primary-2));
    color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 18px -10px var(--hm-primary);
}
.hm-step h4 { font-size: 16px; font-weight: 800; margin: 14px 0 6px; color: var(--hm-ink); }
.hm-step p { font-size: 13.5px; color: var(--hm-muted); line-height: 2; margin: 0; }

/* پرسش‌های متداول */
.hm-faq { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hm-faq details {
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: 18px; padding: 4px 20px; transition: .2s;
}
.hm-faq details[open] { box-shadow: var(--hm-shadow); border-color: var(--az-primary-200, #E9E0CA); }
.hm-faq summary {
    cursor: pointer; list-style: none; padding: 16px 0;
    font-weight: 800; font-size: 15.5px; color: var(--hm-ink);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
    content: "+"; font-size: 22px; color: var(--hm-primary); font-weight: 700; transition: transform .25s;
}
.hm-faq details[open] summary::after { content: "−"; }
.hm-faq p { margin: 0; padding: 0 0 18px; color: var(--hm-muted); font-size: 14.5px; line-height: 2.2; }

/* مزیت‌ها */
.hm-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hm-why__item {
    background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius);
    padding: 26px 22px; transition: .25s;
}
.hm-why__item:hover { transform: translateY(-5px); box-shadow: var(--hm-shadow); border-color: var(--az-primary-200, #E9E0CA); }
.hm-why__icon {
    width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; background: linear-gradient(135deg, rgb(var(--az-primary-rgb, 6 44 120) / .12), rgba(66,179,111,.14)); color: var(--hm-primary);
    margin-bottom: 14px;
}
.hm-why__item h4 { font-size: 16px; font-weight: 800; color: var(--hm-ink); margin: 0 0 6px; }
.hm-why__item p { font-size: 13.5px; color: var(--hm-muted); line-height: 2.1; margin: 0; }

@media (max-width: 991.98px) {
    .hm-steps { grid-template-columns: repeat(2, 1fr); }
    .hm-why { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .hm-steps { grid-template-columns: 1fr; }
    .hm-search { padding: 18px; }
}

/* ======================= کارت محصول و شبکه‌ها (ویترین جدید) ======================= */
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.hm-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius); text-decoration: none; color: inherit;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.hm-card:hover { transform: translateY(-6px); box-shadow: var(--hm-shadow-lg); border-color: var(--az-primary-200, #E9E0CA); color: inherit; }
.hm-card__media { position: relative; aspect-ratio: 1 / 1; background: #FCFBF8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hm-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .35s; }
.hm-card:hover .hm-card__media img { transform: scale(1.06); }
.hm-card__badge {
    position: absolute; top: 12px; inset-inline-start: 12px;
    padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff;
}
.hm-card__badge--off { background: var(--az-grad-accent, linear-gradient(135deg, #B46D22, #D98C39)); }
.hm-card__badge--out { background: var(--az-muted, #5A6353); }
.hm-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hm-card__title { font-size: 14.5px; font-weight: 700; line-height: 2; color: var(--hm-ink); margin: 0; flex: 1; }
.hm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hm-card__price { font-size: 16px; font-weight: 900; color: var(--hm-primary); }
.hm-card__price small { font-size: 12px; font-weight: 600; color: var(--hm-muted); }
.hm-card__contact { font-size: 14px; font-weight: 800; color: var(--az-accent, #B46D22); }
.hm-card__stock { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.hm-card__stock.is-in { background: var(--az-success-soft, #e7f8ee); color: var(--az-success, #12a150); }
.hm-card__stock.is-out { background: var(--az-danger-soft, #F8EBDC); color: var(--az-danger, #B87B39); }

.hm-btn--outline { border-color: var(--hm-primary); color: var(--hm-primary); background: #fff; }
.hm-btn--outline:hover { background: var(--hm-primary); color: #fff; }

/* برندها */
.hm-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hm-brand {
    background: #fff; border: 1px solid var(--hm-border); border-radius: 18px;
    height: 110px; display: flex; align-items: center; justify-content: center; padding: 14px;
    transition: .25s; filter: grayscale(1); opacity: .8;
}
.hm-brand:hover { filter: none; opacity: 1; transform: translateY(-4px); box-shadow: var(--hm-shadow); }
.hm-brand img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* مطالب وبلاگ */
.hm-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hm-post {
    display: flex; flex-direction: column; background: var(--hm-surface);
    border: 1px solid var(--hm-border); border-radius: var(--hm-radius);
    overflow: hidden; text-decoration: none; color: inherit; transition: .25s;
}
.hm-post:hover { transform: translateY(-6px); box-shadow: var(--hm-shadow-lg); color: inherit; }
.hm-post img { width: 100%; height: 190px; object-fit: cover; }
.hm-post__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.hm-post__body h4 { font-size: 16px; font-weight: 800; color: var(--hm-ink); margin: 0; line-height: 2; }
.hm-post__body p { font-size: 13.5px; color: var(--hm-muted); line-height: 2.1; margin: 0; }
.hm-post__more { font-size: 13px; font-weight: 800; color: var(--hm-primary); }

@media (max-width: 1199.98px) { .hm-grid { grid-template-columns: repeat(3, 1fr); } .hm-brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991.98px)  { .hm-posts { grid-template-columns: 1fr; } }
@media (max-width: 767.98px)  { .hm-grid { grid-template-columns: repeat(2, 1fr); } .hm-brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)     { .hm-brands { grid-template-columns: repeat(2, 1fr); } }

/* ======================================================================
   اسلایدر مدرن ویترین (تخفیف‌های ویژه / پیشنهاد ما)
   - در موبایل و دسکتاپ هر دو اسلایدر است
   - مبتنی بر scroll-snap (سبک، بدون کتابخانه) + کشیدن با ماوس/لمس
   ====================================================================== */
.hm-slider { position: relative; }

.hm-slider__viewport {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    margin: 0 -2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    cursor: grab;
}
.hm-slider__viewport::-webkit-scrollbar { display: none; }
.hm-slider__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.hm-slider__viewport.is-dragging * { pointer-events: none; }

.hm-slider__slide {
    flex: 0 0 calc((100% - 54px) / 4);
    scroll-snap-align: start;
    min-width: 0;
}

/* پیکان‌ها */
.hm-slider__nav {
    position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--hm-border); background: rgba(255, 255, 255, .96);
    color: var(--hm-ink); display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; z-index: 5;
    box-shadow: 0 12px 28px -14px rgba(28, 35, 22, .45);
    transition: transform .2s, background .2s, color .2s, opacity .2s, visibility .2s;
}
.hm-slider__nav:hover { background: var(--hm-primary); color: #fff; transform: translateY(-50%) scale(1.08); border-color: var(--hm-primary); }
.hm-slider__nav[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
/* در RTL: «قبلی» سمت راست، «بعدی» سمت چپ (مثل سایت‌های فارسی) */
.hm-slider__nav--prev { inset-inline-start: -10px; }
.hm-slider__nav--next { inset-inline-end: -10px; }

/* نقطه‌ها */
.hm-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.hm-slider__dot {
    width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
    background: #DFDACD; cursor: pointer; transition: width .25s, background .25s;
}
.hm-slider__dot.is-active { width: 28px; background: var(--hm-primary); }

/* نوار پیشرفت (اختیاری، برای حالت پخش خودکار) */
.hm-slider__progress { height: 3px; border-radius: 999px; background: #EFEBE3; overflow: hidden; margin-top: 12px; }
.hm-slider__progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--hm-primary), #7BB241); transition: width .25s linear; }

/* سرتیتر بخش با کنترل‌های کنار آن */
.hm-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hm-head-row .hm-slider-ctrl { display: flex; gap: 8px; }
.hm-head-row .hm-slider-ctrl button {
    width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--hm-border);
    background: #fff; color: var(--hm-ink); cursor: pointer; transition: .2s;
}
.hm-head-row .hm-slider-ctrl button:hover { background: var(--hm-primary); color: #fff; border-color: var(--hm-primary); }

/* شمارش معکوس تخفیف */
.hm-countdown { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
.hm-countdown b {
    min-width: 42px; padding: 6px 8px; border-radius: 12px; text-align: center;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 16px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.hm-countdown i { color: rgba(255, 255, 255, .7); font-style: normal; }

@media (max-width: 1199.98px) { .hm-slider__slide { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 991.98px)  { .hm-slider__slide { flex-basis: calc((100% - 18px) / 2); } .hm-slider__nav { display: none; } }
@media (max-width: 575.98px)  { .hm-slider__viewport { gap: 12px; } .hm-slider__slide { flex-basis: 74%; } }

/* ======================================================================
   جستجوی زنده صفحه اصلی (کامپوننت ری‌اکت LiveSearch)
   ====================================================================== */
.ls { position: relative; max-width: 820px; margin: 0 auto; width: 100%; }

.ls__bar {
    position: relative; display: flex; align-items: center;
    background: #fff; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 24px 50px -26px rgba(28, 35, 22, .5);
    padding: 6px;
}
.ls__icon { position: absolute; inset-inline-start: 20px; color: #B4AC98; font-size: 20px; pointer-events: none; }
.ls__input {
    width: 100%; border: 0; outline: 0; background: transparent;
    padding: 16px 54px 16px 56px; font-size: 16px; font-family: inherit; color: var(--hm-ink);
    border-radius: 16px;
}
.ls__input::placeholder { color: #B4AC98; }
.ls__input::-webkit-search-cancel-button { display: none; }
.ls__clear {
    position: absolute; inset-inline-end: 18px; width: 28px; height: 28px; border: 0;
    border-radius: 50%; background: #F6F4EF; color: #464D40; font-size: 18px; line-height: 1; cursor: pointer;
}
.ls__spinner {
    position: absolute; inset-inline-end: 54px; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #F4F0E5; border-top-color: var(--hm-primary); animation: ls-spin .7s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }

.ls__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ls__chip {
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14);
    color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-family: inherit;
    cursor: pointer; transition: .2s;
}
.ls__chip:hover { background: #fff; color: var(--hm-primary); border-color: #fff; }
.ls__chip--recent { background: rgba(255, 255, 255, .28); }
.ls__chip i { font-size: 12px; margin-inline-end: 4px; }

.ls__panel {
    position: absolute; top: calc(100% + 12px); inset-inline: 0; z-index: 60;
    background: #fff; border-radius: 22px; border: 1px solid var(--hm-border);
    box-shadow: 0 34px 70px -30px rgba(28, 35, 22, .55);
    max-height: 70vh; overflow-y: auto; text-align: start;
    animation: ls-in .18s ease-out;
}
@keyframes ls-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.ls__group + .ls__group { border-top: 1px solid #F8F6F2; }
.ls__group-title {
    padding: 12px 18px 6px; font-size: 12px; font-weight: 800; color: #B4AC98;
}
.ls__row {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    text-decoration: none; color: inherit; transition: background .15s;
}
.ls__row:hover, .ls__row.is-active { background: #FCFAF7; color: inherit; }
.ls__thumb {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: #FCFBF8;
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: #DFDACD; font-size: 20px;
}
.ls__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.ls__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ls__title { font-size: 14px; font-weight: 700; color: var(--hm-ink); line-height: 1.9; }
.ls__meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.ls__sku { color: #B4AC98; font-style: normal; }
.ls__stock { font-style: normal; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ls__stock.is-in { background: var(--az-success-soft, #e7f8ee); color: var(--az-success, #12a150); }
.ls__stock.is-out { background: var(--az-danger-soft, #F8EBDC); color: var(--az-danger, #B87B39); }
.ls__price { text-align: end; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.ls__price del { font-size: 11.5px; color: #B4AC98; }
.ls__price b { font-size: 14.5px; font-weight: 900; color: var(--hm-primary); }
.ls__price small { font-size: 11px; font-weight: 600; color: var(--hm-muted); }
.ls__contact { color: var(--az-accent, #B46D22) !important; font-size: 13.5px !important; }

.ls__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }
.ls__tag {
    background: #F8F6F2; color: #363D30; border-radius: 999px;
    padding: 7px 14px; font-size: 12.5px; text-decoration: none; transition: .2s;
}
.ls__tag:hover { background: var(--hm-primary); color: #fff; }

.ls__row--blog .ls__thumb { border-radius: 12px; }
.ls__row--blog .ls__title { font-size: 13.5px; }

.ls__msg { padding: 26px 18px; text-align: center; color: var(--hm-muted); font-size: 14px; }
.ls__msg--error { color: var(--az-danger, #B87B39); }
.ls__msg-link { display: block; margin-top: 10px; color: var(--hm-primary); font-weight: 800; text-decoration: none; }

.ls__all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border-top: 1px solid #F8F6F2; background: #FCFBF8;
    font-size: 13.5px; font-weight: 800; color: var(--hm-primary); text-decoration: none;
    position: sticky; bottom: 0;
}
.ls__all:hover { background: var(--az-primary-50, #F6F3EA); color: var(--hm-primary); }

@media (max-width: 575.98px) {
    .ls__input { padding: 14px 46px 14px 48px; font-size: 15px; }
    .ls__icon { inset-inline-start: 16px; font-size: 18px; }
    .ls__price b { font-size: 13px; }
    .ls__panel { max-height: 64vh; }
}

/* ======================================================================
   بخش «از کجا شروع کنیم؟» — نسخه کامل با تصویر (بازنویسی .hm-cat)
   ====================================================================== */
.hm-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.hm-cat {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 14px; text-align: start; overflow: hidden;
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: 20px; text-decoration: none; color: var(--hm-ink);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.hm-cat::after {
    content: ''; position: absolute; inset-inline-start: -30%; top: -60%;
    width: 60%; height: 220%; transform: rotate(18deg);
    background: linear-gradient(90deg, rgb(var(--az-primary-rgb, 6 44 120) / 0), rgb(var(--az-primary-rgb, 6 44 120) / .07));
    opacity: 0; transition: opacity .3s;
}
.hm-cat:hover { transform: translateY(-5px); border-color: var(--az-primary-200, #E9E0CA); box-shadow: var(--hm-shadow-lg); color: var(--hm-ink); }
.hm-cat:hover::after { opacity: 1; }

.hm-cat__media {
    flex: 0 0 72px; width: 72px; height: 72px; border-radius: 18px;
    background: linear-gradient(145deg, #FBF9F5, #F7F4ED);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: var(--hm-primary); font-size: 26px;
}
.hm-cat__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .35s; margin: 0; }
.hm-cat:hover .hm-cat__media img { transform: scale(1.09); }

.hm-cat__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hm-cat__body strong { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.9; color: var(--hm-ink); }
.hm-cat__body em {
    font-style: normal; font-size: 12px; font-weight: 700; color: var(--hm-primary);
    background: var(--az-primary-50, #F6F3EA); border-radius: 999px; padding: 2px 10px; align-self: flex-start;
}
.hm-cat__go {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    background: #F8F6F2; color: var(--az-muted, #5A6353); display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: .25s;
}
.hm-cat:hover .hm-cat__go { background: var(--hm-primary); color: #fff; }

/* حالت فشرده (style = compact) */
.hm-cats--compact { grid-template-columns: repeat(6, 1fr); }
.hm-cats--compact .hm-cat { flex-direction: column; text-align: center; padding: 18px 10px; }
.hm-cats--compact .hm-cat__media { flex-basis: auto; width: 64px; height: 64px; }
.hm-cats--compact .hm-cat__body { align-items: center; }
.hm-cats--compact .hm-cat__body em { align-self: center; }
.hm-cats--compact .hm-cat__go { display: none; }

.hm-head__action { text-align: center; margin-top: 26px; }

/* ======================================================================
   نظرات مشتریان
   ====================================================================== */
.hm-slider__slide--wide { flex-basis: calc((100% - 36px) / 3); }
.hm-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.hm-quote {
    position: relative; height: 100%; margin: 0; padding: 26px 24px 22px;
    background: var(--hm-surface); border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius); box-shadow: var(--hm-shadow);
    display: flex; flex-direction: column; gap: 16px;
}
.hm-quote__mark {
    position: absolute; top: 12px; inset-inline-end: 22px;
    font-size: 54px; line-height: 1; color: #F5F1E7; font-style: normal; font-weight: 900;
}
.hm-quote blockquote { margin: 0; font-size: 14px; line-height: 2.2; color: #464D40; flex: 1; }
.hm-quote figcaption { display: flex; align-items: center; gap: 12px; }
.hm-quote__avatar {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--hm-primary), #7BB241); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px;
}
.hm-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hm-quote figcaption strong { display: block; font-size: 14px; font-weight: 800; color: var(--hm-ink); }
.hm-quote figcaption em { font-style: normal; font-size: 12.5px; color: var(--hm-muted); }

/* ======================================================================
   جزئیات کوچک
   ====================================================================== */
.hm-container--narrow { max-width: 900px; }
.hm-search__sub { font-size: 14px; color: rgba(255, 255, 255, .82); margin: 0 0 18px; }

@media (max-width: 1199.98px) {
    .hm-cats { grid-template-columns: repeat(3, 1fr); }
    .hm-cats--compact { grid-template-columns: repeat(4, 1fr); }
    .hm-slider__slide--wide { flex-basis: calc((100% - 18px) / 2); }
    .hm-quotes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .hm-cats { grid-template-columns: repeat(2, 1fr); }
    .hm-cats--compact { grid-template-columns: repeat(3, 1fr); }
    .hm-cat { padding: 12px; gap: 10px; }
    .hm-cat__media { flex-basis: 58px; width: 58px; height: 58px; border-radius: 15px; }
    .hm-cat__body strong { font-size: 13px; }
    .hm-cat__go { display: none; }
    .hm-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .hm-slider__slide--wide { flex-basis: 88%; }
    .hm-cats--compact { grid-template-columns: repeat(2, 1fr); }
}

/* برند بدون لوگو — کارت متنی */
.hm-brand--text { filter: none; opacity: 1; }
.hm-brand--text span {
    font-size: 14.5px; font-weight: 800; color: #464D40; text-align: center; line-height: 1.9;
}
.hm-brand--text:hover span { color: var(--hm-primary); }

/* ======================================================================
   کارت جستجوی صفحه اصلی — نسخه شرکتی (پس‌زمینه گرادیانی)
   بعد از تعریف‌های قبلی می‌آید تا جایگزین آن‌ها شود.
   ====================================================================== */
.hm-search {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--az-primary-900, #17220E) 0%, var(--az-primary, #3D5826) 45%, var(--az-primary-2, #436226) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    padding: 40px 32px 34px;
    box-shadow: 0 34px 70px -34px rgba(54, 76, 33, .75);
    max-width: 980px;
    backdrop-filter: none;
}
.hm-search::before,
.hm-search::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
}
.hm-search::before { width: 380px; height: 380px; top: -190px; inset-inline-end: -120px; }
.hm-search::after  { width: 300px; height: 300px; bottom: -180px; inset-inline-start: -90px; }

.hm-search__title {
    position: relative; text-align: center; color: #fff;
    font-weight: 900; font-size: clamp(20px, 2.6vw, 30px); margin: 0 0 8px;
}
.hm-search__sub {
    position: relative; text-align: center;
    font-size: 14px; color: rgba(255, 255, 255, .8); margin: 0 0 22px; line-height: 2;
}
.hm-search .ls,
.hm-search .hm-search__form,
.hm-search noscript { position: relative; z-index: 2; }

.hm-search .hm-search__input { background: #fff; border-color: transparent; }
.hm-search .ls__chips { margin-top: 18px; }

@media (max-width: 575.98px) {
    .hm-search { padding: 28px 18px 24px; border-radius: 24px; }
}

/* پاسخ پرسش‌های متداول (مارک‌آپ جدید با div) */
.hm-faq summary { list-style: none; }
.hm-faq summary::marker { content: ''; }
.hm-faq__answer { padding: 0 0 18px; color: var(--hm-muted); font-size: 14.5px; line-height: 2.2; }

/* ======================================================================
   بخش جستجو — بدون overflow:hidden تا پنل نتایج زیر بخش بعدی نرود
   ====================================================================== */
.hm-section--search {
    position: relative;
    z-index: 40;                 /* بالاتر از نوار اعتماد و بخش‌های بعدی */
    overflow: visible;           /* مهم: پنل نتایج نباید بریده شود */
    padding-top: 38px;
    padding-bottom: 14px;
    /* لکه‌های تزئینی به جای ::before/::after، تا نیازی به overflow:hidden نباشد */
    background:
        radial-gradient(420px 420px at calc(100% + 140px) -180px, rgba(236, 228, 209, .55), transparent 70%),
        radial-gradient(360px 360px at -120px calc(100% + 160px), rgba(204, 251, 241, .55), transparent 70%);
}
.hm-section--search > * { position: relative; z-index: 1; }

/* خود کارت هم نباید نتایج را ببرد */
.hm-search { overflow: visible; }
.hm-search::before,
.hm-search::after { display: none; }

/* درخشش داخل کارت، به شکل background تا کلیپ لازم نباشد */
.hm-search {
    background:
        radial-gradient(380px 380px at calc(100% + 120px) -190px, rgba(255, 255, 255, .16), transparent 68%),
        radial-gradient(300px 300px at -90px calc(100% + 180px), rgba(255, 255, 255, .16), transparent 68%),
        linear-gradient(135deg, var(--az-primary-900, #17220E) 0%, var(--az-primary, #3D5826) 45%, var(--az-primary-2, #436226) 100%);
}

/* پنل نتایج بالاتر از هر چیز دیگری در صفحه */
.ls { z-index: 50; }
.ls__panel { z-index: 60; }

/* ======================================================================
   پنل ویترینی محصولات (ظاهر «showcase»)
   ستون عنوان کنار ریل محصولات — در موبایل عنوان بالا می‌رود
   ====================================================================== */
.hm-section--flush { padding-top: 34px; padding-bottom: 34px; }

.hm-showcase {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 60px -34px rgba(28, 35, 22, .5);
}

/* رنگ‌بندی‌های قابل انتخاب از پنل */
.hm-showcase--blue .hm-showcase__side { background: linear-gradient(160deg, var(--az-primary, #3D5826) 0%, var(--az-primary-2, #436226) 55%, var(--az-primary-400, #6C8952) 100%); }
.hm-showcase--dark .hm-showcase__side { background: linear-gradient(160deg, var(--az-ink, #171E11) 0%, #2C3425 55%, #363D30 100%); }
.hm-showcase--red  .hm-showcase__side { background: linear-gradient(160deg, var(--az-danger, #B87B39) 0%, #B77D3E 55%, #f97316 100%); }
.hm-showcase--brand .hm-showcase__side { background: linear-gradient(160deg, #17220E 0%, #3D5826 46%, #B46D22 100%); }

.hm-showcase--blue { background: #F9F7F2; }
.hm-showcase--dark { background: #F5F3EF; }
.hm-showcase--red  { background: #F7EBDF; }
.hm-showcase--brand { background: #FAF9F5; }

/* ---------- ستون عنوان ---------- */
.hm-showcase__side {
    position: relative;
    flex: 0 0 248px;
    padding: 30px 26px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hm-showcase__side::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(240px 240px at 110% -10%, rgba(255, 255, 255, .18), transparent 70%),
        radial-gradient(200px 200px at -20% 110%, rgba(255, 255, 255, .14), transparent 70%);
}
.hm-showcase__side > * { position: relative; z-index: 1; }

.hm-showcase__badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff; border-radius: 999px;
    padding: 5px 14px; font-size: 12px; font-weight: 800;
    backdrop-filter: blur(4px);
}
.hm-showcase__title { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.8; color: #fff; }
.hm-showcase__sub { margin: 0; font-size: 13px; line-height: 2.1; color: rgba(255, 255, 255, .8); }
.hm-showcase__meta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 6px 12px;
    align-self: flex-start;
}

.hm-showcase__all {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; color: var(--az-ink, #171E11); border-radius: 14px;
    padding: 11px 18px; font-size: 13.5px; font-weight: 800; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.hm-showcase__all:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5); color: var(--az-ink, #171E11); }

.hm-showcase__ctrl { display: flex; gap: 8px; }
.hm-showcase__ctrl .hm-slider__nav {
    position: static; transform: none; width: 40px; height: 40px;
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff;
    box-shadow: none;
}
.hm-showcase__ctrl .hm-slider__nav:hover { background: #fff; color: var(--az-ink, #171E11); transform: none; }
.hm-showcase__ctrl .hm-slider__nav[disabled] { opacity: .3; visibility: visible; }

/* ---------- ریل محصولات ---------- */
.hm-showcase__rail { flex: 1; min-width: 0; padding: 22px 20px 14px; position: relative; }
.hm-showcase__rail .hm-slider__viewport { padding-bottom: 10px; }
.hm-showcase__rail .hm-slider__slide { flex: 0 0 calc((100% - 36px) / 3); }
.hm-showcase__rail .hm-slider__dots { margin-top: 2px; }
.hm-showcase__rail .hm-slider__progress { margin-top: 10px; background: rgba(28, 35, 22, .08); }

/* ---------- کارت داخل ویترین ---------- */
.hm-card--showcase { background: #fff; border-color: transparent; border-radius: 20px; box-shadow: 0 10px 26px -20px rgba(28, 35, 22, .5); }
.hm-card--showcase:hover { border-color: transparent; box-shadow: 0 22px 44px -24px rgba(28, 35, 22, .55); }
.hm-card--showcase .hm-card__media { aspect-ratio: 4 / 3; }

/* کارت پایان ریل */
.hm-slider__slide--end { display: flex; }
.hm-showcase__more {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(255, 255, 255, .7); border: 1px dashed rgba(28, 35, 22, .2);
    border-radius: 20px; text-decoration: none; color: var(--az-ink, #171E11); padding: 20px; text-align: center;
    transition: .25s;
}
.hm-showcase__more:hover { background: #fff; border-style: solid; transform: translateY(-4px); color: var(--az-ink, #171E11); }
.hm-showcase__more-icon {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(28, 35, 22, .06);
    display: flex; align-items: center; justify-content: center; font-size: 20px; transition: .25s;
}
.hm-showcase__more:hover .hm-showcase__more-icon { background: var(--hm-primary); color: #fff; }
.hm-showcase__more strong { font-size: 14.5px; font-weight: 800; }
.hm-showcase__more em { font-style: normal; font-size: 12.5px; color: var(--hm-muted); }

/* ======================================================================
   بهبود کارت محصول (هر دو ظاهر)
   ====================================================================== */
.hm-card__placeholder { font-size: 34px; color: #DFDACD; }

/* نشان درصد تخفیف */
.hm-card__off {
    position: absolute; top: 12px; inset-inline-start: 12px;
    min-width: 42px; height: 42px; padding: 0 8px; border-radius: 999px;
    background: var(--az-grad-accent, linear-gradient(135deg, #B46D22, #D98C39));
    color: #fff; font-size: 13px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -10px rgba(183, 125, 62, .8);
    direction: ltr;
}

/* «مشاهده» روی تصویر هنگام هاور */
.hm-card__quick {
    position: absolute; inset-inline: 12px; bottom: 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(28, 35, 22, .86); color: #fff;
    border-radius: 12px; padding: 8px 12px; font-size: 12.5px; font-weight: 700;
    opacity: 0; transform: translateY(8px); transition: .25s; pointer-events: none;
    backdrop-filter: blur(4px);
}
.hm-card:hover .hm-card__quick { opacity: 1; transform: none; }
.hm-card.is-out .hm-card__media img { filter: grayscale(.85); opacity: .7; }

/* قیمت با خط‌خورده */
.hm-card__prices { display: flex; flex-direction: column; gap: 1px; }
.hm-card__prices del { font-size: 12px; color: #B4AC98; }

@media (max-width: 1199.98px) {
    .hm-showcase__side { flex-basis: 220px; padding: 26px 20px; }
    .hm-showcase__title { font-size: 20px; }
    .hm-showcase__rail .hm-slider__slide { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 991.98px) {
    /* در تبلت و موبایل: عنوان بالا، محصولات پایین */
    .hm-showcase { flex-direction: column; border-radius: 24px; }
    .hm-showcase__side {
        flex: none; width: 100%; padding: 22px 20px;
        flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    }
    .hm-showcase__title { font-size: 19px; flex: 1 1 auto; }
    .hm-showcase__sub { flex: 1 1 100%; }
    .hm-showcase__meta { order: 4; }
    .hm-showcase__all { margin: 0; order: 5; margin-inline-start: auto; padding: 9px 16px; font-size: 12.5px; }
    .hm-showcase__ctrl { display: none; }
    .hm-showcase__rail { padding: 18px 16px 12px; }
    .hm-showcase__rail .hm-slider__slide { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 575.98px) {
    .hm-section--flush { padding-top: 22px; padding-bottom: 22px; }
    .hm-showcase__rail .hm-slider__slide { flex-basis: 76%; }
    .hm-showcase__badge { font-size: 11px; padding: 4px 11px; }
    .hm-showcase__title { font-size: 17px; }
    .hm-showcase__sub { font-size: 12.5px; }
}

/* ======================================================================
   سربرگ و بدنه صفحه فروشگاه (/shop)
   ====================================================================== */
.shop-hero {
    position: relative;
    background:
        radial-gradient(520px 520px at 88% -40%, rgba(255, 255, 255, .16), transparent 66%),
        radial-gradient(420px 420px at 6% 130%, rgba(255, 255, 255, .12), transparent 66%),
        linear-gradient(135deg, var(--az-primary-900, #17220E) 0%, var(--az-primary, #3D5826) 50%, var(--az-primary-2, #436226) 100%);
    color: #fff;
    padding: 34px 0 30px;
}
.shop-hero__inner { position: relative; z-index: 1; }

.shop-hero__crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    list-style: none; margin: 0 0 14px; padding: 0;
    font-size: 12.5px; color: rgba(255, 255, 255, .72);
}
.shop-hero__crumbs li + li::before { content: '/'; margin-inline-end: 8px; opacity: .5; }
.shop-hero__crumbs a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.shop-hero__crumbs a:hover { color: #fff; }

.shop-hero__title { margin: 0 0 8px; font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: #fff; }
.shop-hero__sub { margin: 0; max-width: 720px; font-size: 14px; line-height: 2.2; color: rgba(255, 255, 255, .82); }

.shop-hero__facts {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.shop-hero__facts li {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
    backdrop-filter: blur(4px);
}
.shop-hero__facts i { font-size: 15px; opacity: .9; }

.shop-body { padding: 22px 0 56px; }

.shop-noscript {
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    border-radius: 16px; padding: 18px; font-size: 14px; line-height: 2.1; text-align: center;
}
.shop-noscript a { color: #9a3412; font-weight: 800; }

@media (max-width: 575.98px) {
    .shop-hero { padding: 24px 0 22px; }
    .shop-hero__facts { gap: 7px; }
    .shop-hero__facts li { font-size: 11.5px; padding: 6px 11px; }
    .shop-body { padding: 16px 0 40px; }
}

/* ======================================================================
   پنل ویترینی تمام‌عرض
   ====================================================================== */
.hm-section--full { padding-top: 0; padding-bottom: 0; margin-block: 26px; }
.hm-full { width: 100%; }

.hm-showcase--full { border-radius: 0; box-shadow: 0 18px 40px -34px rgba(28, 35, 22, .55); }
.hm-showcase--full .hm-showcase__side { flex-basis: 300px; padding: 34px 30px; }
.hm-showcase--full .hm-showcase__rail { padding: 26px 26px 16px; }
.hm-showcase--full .hm-showcase__rail .hm-slider__slide { flex: 0 0 calc((100% - 72px) / 5); }

/* پیکان‌ها در حالت تمام‌عرض هم داخل ستون رنگی می‌مانند */
@media (max-width: 1599.98px) {
    .hm-showcase--full .hm-showcase__rail .hm-slider__slide { flex-basis: calc((100% - 54px) / 4); }
}
@media (max-width: 1199.98px) {
    .hm-showcase--full .hm-showcase__side { flex-basis: 250px; padding: 28px 22px; }
    .hm-showcase--full .hm-showcase__rail .hm-slider__slide { flex-basis: calc((100% - 36px) / 3); }
}
@media (max-width: 991.98px) {
    .hm-section--full { margin-block: 18px; }
    .hm-showcase--full { border-radius: 0; }
    .hm-showcase--full .hm-showcase__side { padding: 20px 18px; }
    .hm-showcase--full .hm-showcase__rail { padding: 18px 16px 12px; }
    .hm-showcase--full .hm-showcase__rail .hm-slider__slide { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 575.98px) {
    .hm-showcase--full .hm-showcase__rail .hm-slider__slide { flex-basis: 76%; }
}

/* ======================================================================
   استوری‌ها (هایلایت‌های صفحه اصلی)
   ====================================================================== */
.hm-stories-section { padding-top: 26px; padding-bottom: 10px; }

.hm-stories__head { margin-bottom: 16px; }
.hm-stories__title { margin: 8px 0 4px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 900; color: var(--hm-ink); }
.hm-stories__sub { margin: 0; font-size: 13.5px; color: var(--hm-muted); line-height: 2.1; }

.hm-stories { position: relative; }

.hm-stories__rail {
    display: flex; gap: 20px; overflow-x: auto; padding: 6px 2px 10px;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.hm-stories__rail::-webkit-scrollbar { display: none; }

.hm-story {
    flex: 0 0 auto; width: 92px; scroll-snap-align: start;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: inherit;
}

.hm-story__ring {
    position: relative; width: 84px; height: 84px; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 210deg, var(--az-primary, #3D5826), var(--az-primary-2, #436226), #7BB241, #22c55e, var(--az-primary, #3D5826));
    display: block; transition: transform .25s;
}
.hm-story:hover .hm-story__ring { transform: scale(1.06); }
.hm-story:focus-visible .hm-story__ring { outline: 3px solid var(--hm-primary); outline-offset: 3px; }

/* هایلایت دیده‌شده: حلقه خاکستری */
.hm-story.is-seen .hm-story__ring { background: #EAE6DD; }
.hm-story.is-seen .hm-story__name { color: var(--hm-muted); font-weight: 600; }

.hm-story__cover {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: #F8F6F2; border: 3px solid #fff; color: #B4AC98; font-size: 22px;
}
.hm-story__cover img { width: 100%; height: 100%; object-fit: cover; }

.hm-story__count {
    position: absolute; bottom: 2px; inset-inline-end: 2px;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--hm-primary); color: #fff; border: 2px solid #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.hm-story.is-seen .hm-story__count { background: #B4AC98; }

.hm-story__name {
    font-size: 12px; font-weight: 700; color: var(--hm-ink); line-height: 1.7;
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hm-stories__nav {
    position: absolute; top: 40px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--hm-border); background: rgba(255, 255, 255, .96); color: var(--hm-ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
    box-shadow: 0 10px 22px -14px rgba(28, 35, 22, .5); transition: .2s;
}
.hm-stories__nav:hover { background: var(--hm-primary); color: #fff; border-color: var(--hm-primary); }
.hm-stories__nav[disabled] { opacity: 0; visibility: hidden; }
.hm-stories__nav--prev { inset-inline-start: -8px; }
.hm-stories__nav--next { inset-inline-end: -8px; }

/* ---------------- نمایشگر استوری ---------------- */
.hm-sv { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.hm-sv[hidden] { display: none; }
.hm-sv__backdrop { position: absolute; inset: 0; background: rgba(12, 17, 8, .94); }

.hm-sv__stage {
    position: relative; width: min(460px, 100vw); height: min(92vh, 860px);
    background: #000; border-radius: 22px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
    display: flex; align-items: center; justify-content: center;
}

.hm-sv__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hm-sv__content img,
.hm-sv__content video { width: 100%; height: 100%; object-fit: contain; }
.hm-sv__content.is-loading::after {
    content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
    animation: hm-sv-spin .8s linear infinite;
}
@keyframes hm-sv-spin { to { transform: rotate(360deg); } }

/* نوارهای پیشرفت */
.hm-sv__bars { position: absolute; top: 12px; inset-inline: 14px; display: flex; gap: 4px; z-index: 6; }
.hm-sv__bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.hm-sv__bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }

/* نوار بالا */
.hm-sv__top {
    position: absolute; top: 26px; inset-inline: 14px; z-index: 6;
    display: flex; align-items: center; gap: 10px; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
    padding: 10px 4px 22px; margin: 0 -4px;
}
.hm-sv__avatar {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
    border: 2px solid #fff; background: #2C3425; display: block;
}
.hm-sv__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hm-sv__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hm-sv__who b { font-size: 14px; font-weight: 800; }
.hm-sv__who em { font-style: normal; font-size: 11.5px; opacity: .75; }

.hm-sv__tools { display: flex; align-items: center; gap: 6px; }
.hm-sv__tool {
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
    font-size: 14px; line-height: 1; transition: .2s; backdrop-filter: blur(4px);
}
.hm-sv__tool:hover { background: rgba(255, 255, 255, .3); }

/* ناحیه‌های لمسی */
.hm-sv__zone { position: absolute; top: 74px; bottom: 120px; width: 34%; border: 0; background: transparent; cursor: pointer; z-index: 4; }
.hm-sv__zone--prev { inset-inline-start: 0; }
.hm-sv__zone--next { inset-inline-end: 0; }

/* کارت محصول پایین */
.hm-sv__product { position: absolute; inset-inline: 14px; bottom: 18px; z-index: 6; }
.hm-sv__card {
    display: flex; align-items: center; gap: 11px; padding: 10px;
    background: rgba(255, 255, 255, .97); border-radius: 18px; text-decoration: none; color: var(--az-ink, #171E11);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); transition: transform .2s;
}
.hm-sv__card:hover { transform: translateY(-3px); color: var(--az-ink, #171E11); }
.hm-sv__card-img { flex: none; width: 58px; height: 58px; border-radius: 13px; overflow: hidden; background: #F8F6F2; }
.hm-sv__card-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-sv__card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-sv__card-text b { font-size: 13.5px; font-weight: 800; line-height: 1.8; }
.hm-sv__card-text em { font-style: normal; font-size: 12px; color: var(--az-muted, #5A6353); }
.hm-sv__card-btn {
    flex: none; background: linear-gradient(135deg, var(--hm-primary), var(--az-primary-2, #436226)); color: #fff;
    border-radius: 11px; padding: 8px 14px; font-size: 12.5px; font-weight: 800;
}

/* پیکان‌های کنار صحنه (دسکتاپ) */
.hm-sv__side {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 7;
    width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center; transition: .2s; backdrop-filter: blur(4px);
}
.hm-sv__side:hover { background: rgba(255, 255, 255, .3); }
.hm-sv__side--prev { inset-inline-start: calc(50% + min(230px, 50vw) + 18px); }
.hm-sv__side--next { inset-inline-end: calc(50% + min(230px, 50vw) + 18px); }

@media (max-width: 991.98px) {
    .hm-sv__side { display: none; }
    .hm-sv__stage { width: 100vw; height: 100vh; border-radius: 0; }
}

@media (max-width: 575.98px) {
    .hm-stories__rail { gap: 14px; }
    .hm-story { width: 76px; }
    .hm-story__ring { width: 72px; height: 72px; }
    .hm-story__name { max-width: 76px; font-size: 11.5px; }
    .hm-stories__nav { display: none; }
}

/* ======================================================================
   اسلایدر اصلی بالای صفحه
   ====================================================================== */
.hero { position: relative; background: #FAF8F3; }

.hero__slider { position: relative; overflow: hidden; }

.hero__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    cursor: grab; outline: none;
}
.hero__viewport::-webkit-scrollbar { display: none; }
.hero__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.hero__viewport.is-dragging * { pointer-events: none; }

.hero__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; position: relative; }

.hero__link { display: block; position: relative; overflow: hidden; }
.hero__link img {
    display: block; width: 100%; height: auto;
    transform: scale(1.02); transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.hero__slide.is-current .hero__link img { transform: scale(1); }

/* کپشن روی اسلاید */
.hero__caption {
    position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 46px 30px 22px;
    background: linear-gradient(0deg, rgba(12, 17, 8, .72), rgba(12, 17, 8, .28) 55%, transparent);
    color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .5s .15s, transform .5s .15s;
}
.hero__slide.is-current .hero__caption { opacity: 1; transform: none; }
.hero__caption b { font-size: clamp(15px, 2vw, 23px); font-weight: 900; line-height: 1.9; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.hero__cta {
    font-style: normal; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: var(--az-ink, #171E11); border-radius: 13px;
    padding: 9px 18px; font-size: 13.5px; font-weight: 800; white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
}
.hero__link:hover .hero__cta { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .7); }

/* پیکان‌ها — در RTL قبلی راست، بعدی چپ */
.hero__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 50px; height: 50px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .88); color: var(--az-ink, #171E11);
    display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer;
    box-shadow: 0 14px 30px -16px rgba(28, 35, 22, .7);
    opacity: 0; transition: opacity .25s, transform .25s, background .2s, color .2s;
    backdrop-filter: blur(6px);
}
.hero__slider:hover .hero__nav { opacity: 1; }
.hero__nav:hover { background: var(--hm-primary); color: #fff; transform: translateY(-50%) scale(1.08); }
.hero__nav--prev { inset-inline-start: 22px; }
.hero__nav--next { inset-inline-end: 22px; }

/* نقطه‌ها */
.hero__dots {
    position: absolute; inset-inline: 0; bottom: 16px; z-index: 4;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero__dot {
    width: 9px; height: 9px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .55); box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: width .28s, background .28s;
}
.hero__dot.is-active { width: 30px; background: #fff; }

/* نوار پیشرفت پخش خودکار */
.hero__progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); z-index: 4; }
.hero__progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--hm-primary), #7BB241);
    transition: width .1s linear;
}

@media (max-width: 991.98px) {
    .hero__nav { display: none; }
    .hero__caption { padding: 34px 18px 20px; }
}
@media (max-width: 575.98px) {
    .hero__caption { padding: 28px 14px 18px; gap: 8px; }
    .hero__cta { padding: 7px 14px; font-size: 12.5px; }
    .hero__dots { bottom: 11px; }
    .hero__dot { width: 7px; height: 7px; }
    .hero__dot.is-active { width: 22px; }
}

/* ######################################################################
   صفحه اصلی — نسخه ۳
   سیستم سرتیتر جدید، بنتو، تایم‌لاین، مارکی برندها، مجله وبلاگ و ...
   همه رنگ‌ها از theme-tokens.css
   ###################################################################### */

.hm-home { background: var(--az-bg, #FAF9F6); }
.hm-section { padding: 56px 0; }
.hm-section--tight { padding: 30px 0; }
.hm-section--soft { background: linear-gradient(180deg, var(--az-surface, #fff) 0%, var(--az-bg, #FAF9F6) 100%); }
.hm-container { max-width: 1320px; }

/* ---------------- سرتیتر یکپارچه ---------------- */
.hm-head3 {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.hm-head3--center { justify-content: center; text-align: center; }
.hm-head3--center .hm-head3__text { align-items: center; }
.hm-head3__text { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }

.hm-eyebrow {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
    color: var(--az-primary, #3D5826); background: var(--az-primary-50, #F6F3EA);
    border: 1px solid var(--az-primary-100, #E9E0CA); border-radius: 999px; padding: 5px 13px;
}
.hm-eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--az-primary, #3D5826); box-shadow: 0 0 0 3px rgb(var(--az-primary-rgb, 6 44 120) / .18);
}
.hm-head3--center .hm-eyebrow { align-self: center; }
.hm-eyebrow--light { color: #fff; background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .22); }
.hm-eyebrow--light::before { background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .2); }

.hm-head3__title {
    margin: 0; font-size: clamp(21px, 2.5vw, 30px); font-weight: 900; line-height: 1.6;
    color: var(--az-ink, #171E11); letter-spacing: -.2px;
}
.hm-head3__sub { margin: 0; font-size: 14px; line-height: 2.1; color: var(--az-muted, #5A6353); }
.hm-head3--light .hm-head3__title { color: #fff; }
.hm-head3--light .hm-head3__sub { color: rgb(255 255 255 / .78); }

.hm-more {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    font-size: 13.5px; font-weight: 800; color: var(--az-ink, #171E11); text-decoration: none;
    padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--az-border, #F1EDE5); background: #fff;
    transition: border-color .2s, box-shadow .2s, color .2s;
}
.hm-more:hover { color: var(--az-primary, #3D5826); border-color: var(--az-primary-200, #E9E0CA); box-shadow: var(--az-shadow-sm); }
.hm-more__icon {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--az-primary, #3D5826); color: #fff; font-size: 12px; transition: transform .25s;
}
.hm-more:hover .hm-more__icon { transform: translateX(-3px); }

/* سرتیتر قدیمی بخش‌هایی که هنوز از hm-head استفاده می‌کنند هم هماهنگ شود */
.hm-title::after { background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226)); }

/* ---------------- جستجو روی لبه اسلایدر ---------------- */
.hm-section--lift { margin-top: -56px; padding-top: 0; }
.hm-section--lift .hm-search { box-shadow: 0 40px 80px -36px rgb(var(--az-primary-rgb, 6 44 120) / .7); }
.hm-search { background:
        radial-gradient(420px 420px at calc(100% + 120px) -190px, rgb(255 255 255 / .16), transparent 68%),
        radial-gradient(300px 300px at -90px calc(100% + 180px), rgb(255 255 255 / .14), transparent 68%),
        var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226)); }

/* ---------------- استوری‌ها — نوار فشرده ---------------- */
.hm-stories__bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-stories__title {
    display: inline-flex; align-items: center; gap: 9px; margin: 0;
    font-size: 17px; font-weight: 900; color: var(--az-ink, #171E11);
}
.hm-stories__live {
    width: 9px; height: 9px; border-radius: 50%; background: var(--az-accent, #B46D22);
    box-shadow: 0 0 0 0 rgb(var(--az-accent-rgb, 225 6 0) / .6); animation: hm-live 1.8s infinite;
}
@keyframes hm-live { 70% { box-shadow: 0 0 0 9px rgb(var(--az-accent-rgb, 225 6 0) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--az-accent-rgb, 225 6 0) / 0); } }
.hm-stories__sub { margin: 0; font-size: 13px; color: var(--az-muted, #5A6353); }
.hm-story__ring { background: conic-gradient(from 200deg, var(--az-accent, #B46D22), var(--az-accent-2, #D98C39), var(--az-primary-2, #436226), var(--az-primary, #3D5826), var(--az-accent, #B46D22)); }

/* ---------------- نوار اعتماد یکپارچه ---------------- */
.hm-trust3 {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--az-border, #F1EDE5); border-radius: var(--az-radius-lg, 24px);
    box-shadow: var(--az-shadow-sm); overflow: hidden;
}
.hm-trust3__item { display: flex; align-items: center; gap: 13px; padding: 20px 22px; position: relative; }
.hm-trust3__item + .hm-trust3__item::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 1px; background: var(--az-line, #F7F5EF);
}
.hm-trust3__icon {
    flex: none; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
    background: var(--az-grad-soft, linear-gradient(135deg, #F6F3EA, #E9E0CA)); color: var(--az-primary, #3D5826); font-size: 21px;
    transition: transform .3s;
}
.hm-trust3__item:hover .hm-trust3__icon { transform: rotate(-8deg) scale(1.06); }
.hm-trust3__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-trust3__text strong { font-size: 14px; font-weight: 800; color: var(--az-ink, #171E11); }
.hm-trust3__text em { font-style: normal; font-size: 12.5px; color: var(--az-muted, #5A6353); line-height: 1.9; }

/* ---------------- دسته‌بندی بنتو ---------------- */
.hm-bento {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 14px;
}
.hm-tile {
    position: relative; grid-column: span 1; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 16px; border-radius: var(--az-radius-lg, 24px); text-decoration: none;
    background: linear-gradient(160deg, #fff 0%, var(--az-soft, #F9F6F0) 100%);
    border: 1px solid var(--az-border, #F1EDE5);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}
.hm-tile:hover { transform: translateY(-5px); box-shadow: var(--az-shadow-lg); border-color: var(--az-primary-200, #E9E0CA); }
.hm-tile--wide { grid-column: span 2; }
.hm-tile--xl { grid-column: span 2; grid-row: span 2; background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226)); border: 0; }
.hm-tile--xl .hm-tile__text strong { color: #fff; font-size: 22px; }
.hm-tile--xl .hm-tile__text em { color: #fff; background: rgb(255 255 255 / .16); }
.hm-tile--xl .hm-tile__media { inset-inline-end: 8%; bottom: 6%; width: 70%; height: 70%; }
.hm-tile--xl .hm-tile__media img { filter: drop-shadow(0 24px 28px rgb(0 0 0 / .35)); }
.hm-tile--xl .hm-tile__go { background: #fff; color: var(--az-primary, #3D5826); }

.hm-tile__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hm-tile__text strong { font-size: 15px; font-weight: 900; color: var(--az-ink, #171E11); line-height: 1.7; }
.hm-tile__text em {
    font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--az-primary, #3D5826);
    background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: var(--az-shadow-sm);
}
.hm-tile__media {
    position: absolute; z-index: 1; inset-inline-end: 6%; bottom: 8%; width: 56%; height: 62%;
    display: flex; align-items: center; justify-content: center; color: var(--az-primary-300, #8DAB72); font-size: 42px;
}
.hm-tile--wide .hm-tile__media { width: 42%; height: 80%; bottom: 10%; }
.hm-tile__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.hm-tile:hover .hm-tile__media img { transform: scale(1.08) rotate(-2deg); }
.hm-tile__go {
    position: relative; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    background: var(--az-ink, #171E11); color: #fff; transition: transform .25s, background .25s;
}
.hm-tile:hover .hm-tile__go { transform: translateX(-4px); background: var(--az-primary, #3D5826); }
.hm-tile--xl:hover .hm-tile__go { background: #fff; }

/* ---------------- مزیت‌ها (بنتوی شاخص) ---------------- */
.hm-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.hm-feature__lead {
    position: relative; overflow: hidden; border-radius: var(--az-radius-xl, 32px); padding: 34px;
    background: var(--az-grad-dark, linear-gradient(135deg, #10150C, #171E11 50%, #323E27)); color: #fff;
    display: flex; flex-direction: column; gap: 12px; min-height: 280px;
}
.hm-feature__lead h3 { margin: 12px 0 0; font-size: 23px; font-weight: 900; line-height: 1.7; color: #fff; }
.hm-feature__lead p { margin: 0; font-size: 14.5px; line-height: 2.2; color: rgb(255 255 255 / .78); max-width: 440px; }
.hm-feature__glow {
    position: absolute; width: 360px; height: 360px; border-radius: 50%; inset-inline-start: -120px; bottom: -160px;
    background: radial-gradient(circle, rgb(var(--az-primary-rgb, 6 44 120) / .75), transparent 65%); pointer-events: none;
}
.hm-feature__icon {
    width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); color: #fff; font-size: 24px; flex: none;
}
.hm-feature__icon--soft { width: 48px; height: 48px; border-radius: 15px; background: var(--az-primary-50, #F6F3EA); border-color: var(--az-primary-100, #E9E0CA); color: var(--az-primary, #3D5826); font-size: 20px; }
.hm-feature__rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hm-feature__card {
    display: flex; gap: 14px; padding: 22px; border-radius: var(--az-radius-lg, 24px);
    background: #fff; border: 1px solid var(--az-border, #F1EDE5); transition: transform .25s, box-shadow .25s;
}
.hm-feature__card:hover { transform: translateY(-4px); box-shadow: var(--az-shadow); }
.hm-feature__card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 900; color: var(--az-ink, #171E11); line-height: 1.8; }
.hm-feature__card p { margin: 0; font-size: 13.5px; color: var(--az-muted, #5A6353); line-height: 2.1; }
.hm-feature__rest > :only-child { grid-column: 1 / -1; }
.hm-feature__link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--az-primary-300, #8DAB72); text-decoration: none; }
.hm-feature__card .hm-feature__link { color: var(--az-primary, #3D5826); margin-top: 8px; }

/* ---------------- مراحل خرید (تایم‌لاین) ---------------- */
.hm-timeline {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(var(--hm-steps, 4), minmax(0, 1fr)); gap: 18px;
}
.hm-timeline::before {
    content: ''; position: absolute; top: 34px; inset-inline: 12%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--az-primary-200, #E9E0CA) 0 10px, transparent 10px 18px);
}
.hm-timeline__step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; }
.hm-timeline__dot {
    position: relative; width: 68px; height: 68px; border-radius: 22px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 25px;
    background: #fff; color: var(--az-primary, #3D5826); border: 1px solid var(--az-border, #F1EDE5);
    box-shadow: var(--az-shadow); transition: transform .3s, background .3s, color .3s;
}
.hm-timeline__step:hover .hm-timeline__dot { transform: translateY(-4px) rotate(-6deg); background: var(--az-primary, #3D5826); color: #fff; }
.hm-timeline__dot b {
    position: absolute; top: -8px; inset-inline-end: -8px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--az-grad-accent, linear-gradient(135deg, #B46D22, #D98C39)); color: #fff; border: 3px solid var(--az-bg, #FAF9F6);
    font-size: 11.5px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.hm-timeline__step strong { font-size: 15px; font-weight: 900; color: var(--az-ink, #171E11); }
.hm-timeline__step p { margin: 0; font-size: 13px; color: var(--az-muted, #5A6353); line-height: 2.1; max-width: 240px; }

/* ---------------- برندها (مارکی) ---------------- */
.hm-marquee {
    position: relative; overflow: hidden; padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hm-marquee__track { display: flex; width: max-content; animation: hm-marquee calc(var(--hm-marquee-items, 10) * 3.2s) linear infinite; }
.hm-marquee:hover .hm-marquee__track { animation-play-state: paused; }
.hm-marquee__group { display: flex; gap: 14px; padding-inline-end: 14px; }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="ltr"] .hm-marquee__track { animation-name: hm-marquee-ltr; }
@keyframes hm-marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hm-logo {
    flex: none; width: 176px; height: 88px; border-radius: 20px; background: #fff;
    border: 1px solid var(--az-border, #F1EDE5); display: flex; align-items: center; justify-content: center;
    padding: 14px 20px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hm-logo:hover { border-color: var(--az-primary-200, #E9E0CA); box-shadow: var(--az-shadow); transform: translateY(-3px); }
.hm-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.hm-logo:hover img { filter: none; opacity: 1; }
.hm-logo--text span { font-size: 17px; font-weight: 900; color: var(--az-text, #313B28); letter-spacing: .3px; transition: color .2s; }
.hm-logo--text:hover span { color: var(--az-primary, #3D5826); }

/* ---------------- آمار (نوار برند) ---------------- */
.hm-band {
    position: relative; overflow: hidden; border-radius: var(--az-radius-xl, 32px); padding: 38px 40px;
    background:
        radial-gradient(500px 300px at 12% 120%, rgb(var(--az-accent-rgb, 225 6 0) / .35), transparent 60%),
        radial-gradient(600px 360px at 95% -30%, rgb(255 255 255 / .16), transparent 60%),
        var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226));
    color: #fff; display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.hm-band::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: radial-gradient(rgb(255 255 255 / .7) 1px, transparent 1px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.hm-band__head { position: relative; z-index: 1; flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.hm-band__head h2 { margin: 0; font-size: clamp(20px, 2.4vw, 27px); font-weight: 900; color: #fff; line-height: 1.7; }
.hm-band__head p { margin: 0; font-size: 14px; color: rgb(255 255 255 / .8); line-height: 2.1; }
.hm-band__stats { position: relative; z-index: 1; flex: 3 1 560px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-band__stat {
    display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px;
    background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(6px);
}
.hm-band__stat strong { font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hm-band__stat strong small { font-size: .6em; margin-inline-start: 2px; opacity: .8; }
.hm-band__label { font-size: 13px; color: rgb(255 255 255 / .8); }

/* ---------------- وبلاگ (مجله) ---------------- */
.hm-mag { display: grid; gap: 16px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.hm-mag--1 { grid-template-columns: 1fr; grid-template-rows: auto; }
.hm-mag--2 { grid-template-rows: auto; }
.hm-mag__item {
    position: relative; display: flex; gap: 14px; overflow: hidden; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--az-border, #F1EDE5); border-radius: var(--az-radius-lg, 24px);
    padding: 12px; transition: transform .25s, box-shadow .25s;
}
.hm-mag__item:hover { transform: translateY(-4px); box-shadow: var(--az-shadow-lg); color: inherit; }
.hm-mag__item--lead { grid-row: span 2; flex-direction: column; padding: 0; }
.hm-mag--2 .hm-mag__item--lead { grid-row: auto; }
.hm-mag__media { position: relative; flex: none; width: 170px; border-radius: 16px; overflow: hidden; background: var(--az-soft, #F9F6F0); aspect-ratio: 4 / 3; }
.hm-mag__item--lead .hm-mag__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.hm-mag__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hm-mag__item:hover .hm-mag__media img { transform: scale(1.06); }
.hm-mag__date {
    position: absolute; top: 10px; inset-inline-start: 10px; font-size: 11px; font-weight: 800;
    background: rgb(255 255 255 / .92); color: var(--az-ink, #171E11); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.hm-mag__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 4px; }
.hm-mag__item--lead .hm-mag__body { padding: 18px 22px 22px; gap: 10px; }
.hm-mag__body strong { font-size: 15px; font-weight: 900; color: var(--az-ink, #171E11); line-height: 1.9; }
.hm-mag__item--lead .hm-mag__body strong { font-size: 19px; }
.hm-mag__body em {
    font-style: normal; font-size: 13px; color: var(--az-muted, #5A6353); line-height: 2.1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-mag__more { margin-top: auto; font-size: 12.5px; font-weight: 800; color: var(--az-primary, #3D5826); display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- FAQ دو ستونه ---------------- */
.hm-faq3 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.hm-faq3 .hm-faq { max-width: none; }
.hm-faq3__side {
    position: sticky; top: calc(var(--sh-h, 150px) * .5 + 20px);
    border-radius: var(--az-radius-xl, 32px); padding: 30px 26px; overflow: hidden;
    background: var(--az-grad-dark, linear-gradient(135deg, #10150C, #171E11 50%, #323E27)); color: #fff;
    display: flex; flex-direction: column; gap: 12px;
}
.hm-faq3__icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--az-grad-accent, linear-gradient(135deg, #B46D22, #D98C39)); }
.hm-faq3__side h3 { margin: 6px 0 0; font-size: 19px; font-weight: 900; color: #fff; line-height: 1.8; }
.hm-faq3__side p { margin: 0; font-size: 13.5px; color: rgb(255 255 255 / .75); line-height: 2.1; }
.hm-faq3__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 15px; margin-top: 4px;
    background: #fff; color: var(--az-ink, #171E11); font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s;
}
.hm-faq3__btn:hover { transform: translateY(-2px); color: var(--az-ink, #171E11); }
.hm-faq3__btn--ghost { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .2); }
.hm-faq3__btn--ghost:hover { color: #fff; background: rgb(255 255 255 / .16); }

.hm-faq details { background: #fff; border: 1px solid var(--az-border, #F1EDE5); border-radius: 18px; padding: 0 20px; transition: box-shadow .2s, border-color .2s; }
.hm-faq summary { padding: 18px 0; font-weight: 800; font-size: 15px; color: var(--az-ink, #171E11); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-faq summary::after {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--az-primary-50, #F6F3EA); color: var(--az-primary, #3D5826); font-size: 18px; font-weight: 700;
}
.hm-faq details[open] summary::after { background: var(--az-primary, #3D5826); color: #fff; }

/* ---------------- فراخوان پایانی ---------------- */
.hm-cta {
    background:
        radial-gradient(520px 320px at 8% 130%, rgb(var(--az-accent-rgb, 225 6 0) / .4), transparent 60%),
        radial-gradient(420px 300px at 100% -20%, rgb(255 255 255 / .18), transparent 60%),
        var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226));
    border-radius: var(--az-radius-xl, 32px); padding: 46px 42px;
}
.hm-btn--light { background: #fff; color: var(--az-ink, #171E11); }
.hm-btn--light:hover { color: var(--az-primary, #3D5826); }

/* کارت محصول — هماهنگی با رنگ‌های جدید */
.hm-card__price { color: var(--az-ink, #171E11); }
.hm-card { border-radius: var(--az-radius-lg, 24px); }
.hm-card:hover { border-color: var(--az-primary-200, #E9E0CA); }
.hm-showcase--blue .hm-showcase__side { background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226)); }
.hm-showcase--dark .hm-showcase__side { background: var(--az-grad-dark, linear-gradient(135deg, #10150C, #171E11 50%, #323E27)); }
.hm-showcase--red  .hm-showcase__side { background: linear-gradient(160deg, #c2410c 0%, var(--az-accent, #B46D22) 55%, var(--az-accent-2, #D98C39) 100%); }
.hm-showcase--blue { background: var(--az-primary-50, #F6F3EA); }
.hm-showcase--dark { background: #F5F3EF; }
.hm-showcase--red  { background: var(--az-accent-soft, #F7E7D6); }

/* ---------------- واکنش‌گرا ---------------- */
@media (max-width: 1199.98px) {
    .hm-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 156px; }
    .hm-feature { grid-template-columns: minmax(0, 1fr); }
    .hm-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-faq3 { grid-template-columns: minmax(0, 1fr); }
    .hm-faq3__side { position: static; }
}
@media (max-width: 991.98px) {
    .hm-section { padding: 42px 0; }
    .hm-section--tight { padding: 22px 0; }
    .hm-section--lift { margin-top: -34px; }
    .hm-trust3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-trust3__item:nth-child(3)::before { display: none; }
    .hm-trust3__item:nth-child(n+3) { border-top: 1px solid var(--az-line, #F7F5EF); }
    .hm-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .hm-timeline::before { display: none; }
    .hm-mag { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .hm-mag__item--lead { grid-row: auto; }
}
@media (max-width: 767.98px) {
    .hm-head3 { margin-bottom: 18px; align-items: flex-start; }
    .hm-more { padding: 4px 4px 4px 10px; font-size: 12.5px; }
    .hm-more__icon { width: 26px; height: 26px; }
    .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 142px; gap: 10px; }
    .hm-tile { padding: 12px; border-radius: 20px; }
    .hm-tile--wide { grid-column: span 2; }
    .hm-tile--xl { grid-column: span 2; grid-row: span 2; }
    .hm-tile__text strong { font-size: 13.5px; }
    .hm-tile__go { width: 28px; height: 28px; }
    .hm-feature__rest { grid-template-columns: minmax(0, 1fr); }
    .hm-feature__lead { padding: 26px; min-height: 0; }
    .hm-band { padding: 26px 20px; border-radius: 26px; }
    .hm-band__stats { flex-basis: 100%; }
    .hm-logo { width: 140px; height: 72px; border-radius: 16px; }
    .hm-mag__media { width: 120px; }
    .hm-cta { padding: 32px 22px; border-radius: 26px; }
}
@media (max-width: 480px) {
    .hm-trust3 { grid-template-columns: minmax(0, 1fr); }
    .hm-trust3__item::before { display: none; }
    .hm-trust3__item + .hm-trust3__item { border-top: 1px solid var(--az-line, #F7F5EF); }
    .hm-trust3__item { padding: 15px 18px; }
    .hm-timeline { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .hm-marquee__track { animation: none; }
    .hm-marquee { overflow-x: auto; }
}

/* پر کردن ردیف آخر بنتو در تبلت و موبایل */
@media (max-width: 1199.98px) { .hm-tile--last { grid-column: span var(--span-t, 1); } }
@media (max-width: 767.98px)  { .hm-tile--last { grid-column: span var(--span-m, 1); } }

/* وقتی کارت جستجو روی لبه اسلایدر می‌نشیند، نقطه‌ها و نوار پیشرفت بالاتر بیایند تا زیر کارت نروند */
.hero:has(~ .hm-section--lift) .hero__dots { bottom: 74px; }
@media (max-width: 991.98px) { .hero:has(~ .hm-section--lift) .hero__dots { bottom: 50px; } }

/* رنگ عنوان‌های روی پس‌زمینه تیره (قالب به h1..h6 رنگ تیره می‌دهد) */
.hm-cta h3, .hm-cta p, .hm-band h2, .hm-feature__lead h3, .hm-faq3__side h3,
.hm-showcase__title, .hm-tile--xl strong { color: #fff !important; }
.hm-cta p { color: rgb(255 255 255 / .85) !important; }

/* وبلاگ: تصویر کارت‌های کوچک کشیده نشود */
.hm-mag__item:not(.hm-mag__item--lead) .hm-mag__media { align-self: flex-start; height: auto; }

/* ---- کارت‌های محصول هم‌ارتفاع در همه اسلایدرها و شبکه‌ها ---- */
.hm-slider__slide { display: flex; align-items: stretch; }
.hm-slider__slide > .hm-card { flex: 1 1 auto; width: 100%; min-width: 0; }
.hm-grid > .hm-card { height: 100%; }
.hm-card__title {
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 2em);   /* همیشه جای دو خط */
}
.hm-card__foot { margin-top: auto; align-items: flex-end; min-height: 46px; }
.hm-card__prices { display: flex; flex-direction: column; justify-content: flex-end; min-height: 44px; }
.hm-card__prices del { line-height: 1.4; }

/* ---------- سرتیتر اصلی صفحه اصلی (H1) ---------- */
.hm-h1 { padding: 26px 0 4px; text-align: center; }
.hm-h1__title {
    margin: 0; font-size: clamp(1.15rem, .95rem + .9vw, 1.7rem); font-weight: 900; line-height: 1.7;
    color: var(--hm-ink, #171E11); letter-spacing: -.01em;
}
.hm-h1__sub { margin: 8px auto 0; max-width: 760px; font-size: .9rem; line-height: 2; color: var(--hm-muted, #5A6353); }
@media (max-width: 767.98px) { .hm-h1 { padding: 18px 0 2px; } .hm-h1__sub { font-size: .82rem; } }

/* ======================================================================
   نسخه ۵.۴ — «قهرمان» بالای صفحه اصلی
   سرتیتر و جعبه جستجو روی یک بلوک گرادیانی یکپارچه می‌نشینند تا بالای
   صفحه یک تصویر واحد و چشم‌گیر باشد، نه چند کارت پراکنده روی سفید.
   ====================================================================== */
.hm-hero { position: relative; }
.hm-hero--search {
    background:
        radial-gradient(900px 520px at 88% -10%, rgba(116, 181, 60, .20), transparent 62%),
        radial-gradient(760px 480px at 6% 108%, rgba(18, 161, 80, .14), transparent 64%),
        linear-gradient(180deg, #FCFBF9 0%, #F9F7F2 58%, var(--hm-bg, #FAF9F6) 100%);
    padding-bottom: 8px;
    overflow: visible;
}
.hm-hero--search::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 64px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--hm-bg, #FAF9F6));
}
.hm-hero--search > * { position: relative; z-index: 1; }

.hm-hero--search .hm-h1 { padding: 44px 0 6px; }
.hm-hero--search .hm-h1__title {
    font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; line-height: 1.75;
    letter-spacing: -.4px; color: var(--hm-ink, #171E11);
}
.hm-hero--search .hm-h1__sub { font-size: clamp(13.5px, 1.3vw, 16px); max-width: 720px; }

/* کارت جستجو داخل قهرمان: سفید و شناور، نه یک بلوک آبی جدا */
.hm-hero--search .hm-section--search {
    margin-top: 0;                 /* داخل قهرمان دیگر لازم نیست روی اسلایدر بنشیند */
    padding-top: 22px; padding-bottom: 30px; background: none;
}
.hm-hero--search .hm-search {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 70px -38px rgba(51, 74, 32, .55), 0 2px 0 rgba(255, 255, 255, .7) inset;
    backdrop-filter: blur(14px) saturate(1.2);
    padding: 26px 26px 22px;
    border-radius: 26px;
}
.hm-hero--search .hm-search__title { color: var(--hm-ink, #171E11); font-size: clamp(17px, 1.8vw, 21px); margin-bottom: 6px; }
.hm-hero--search .hm-search__sub { color: var(--hm-muted, #5A6353); margin-bottom: 16px; }
.hm-hero--search .hm-search .hm-search__input { background: #fff; border: 1px solid var(--az-border, #F1EDE5); }
.hm-hero--search .hm-search .ls__chip {
    background: #fff; border: 1px solid var(--az-border, #F1EDE5); color: var(--hm-ink, #171E11);
}
.hm-hero--search .hm-search .ls__chip:hover { border-color: var(--az-primary-200, #E9E0CA); color: var(--az-primary, #3D5826); }

@media (max-width: 575.98px) {
    .hm-hero--search .hm-h1 { padding: 28px 0 2px; }
    .hm-hero--search .hm-search { padding: 20px 16px 18px; border-radius: 20px; }
}

/* ======================================================================
   نسخه ۵.۵ — کارت محصول اسلایدرهای صفحه اصلی
   قاب مدرن‌تر، هاله رنگی هنگام هاور، نوار برند و امتیاز، و دکمه‌ای که
   از پایین کارت بالا می‌آید.
   ====================================================================== */
.hm-card {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 22px; background: #fff; border: 1px solid var(--az-border, #F1EDE5);
    box-shadow: 0 6px 20px -16px rgba(23, 30, 17, .5);
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
/* هاله‌ای که فقط هنگام هاور پیدا می‌شود */
.hm-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
    background: linear-gradient(150deg, rgba(91, 132, 55, .10), rgba(116, 181, 60, 0) 45%, rgba(220, 149, 73, .10));
    transition: opacity .3s;
}
.hm-card:hover { transform: translateY(-8px); box-shadow: 0 30px 55px -30px rgba(23, 30, 17, .55); border-color: transparent; }
.hm-card:hover::before { opacity: 1; }

/* تصویر */
.hm-card__media {
    border-radius: 18px; margin: 10px 10px 0; aspect-ratio: 1 / 1;
    background: linear-gradient(170deg, #FEFDFC 0%, #FAF8F3 100%);
    border: 1px solid rgba(180, 172, 152, .16);
}
.hm-card__media img { padding: 16px; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.hm-card:hover .hm-card__media img { transform: scale(1.08) rotate(-.6deg); }

/* نشان تخفیف */
.hm-card__off {
    box-shadow: 0 8px 18px -10px rgba(220, 149, 73, .9);
    letter-spacing: .2px;
}
.hm-card__badge { box-shadow: 0 8px 18px -12px rgba(23, 30, 17, .8); }

/* نوار برند و امتیاز */
.hm-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.hm-card__brand {
    font-size: 11px; font-weight: 800; color: var(--az-primary, #3D5826);
    background: var(--az-primary-50, #F6F3EA); border-radius: 999px; padding: 2px 9px;
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-card__rate {
    --hm-pct: calc(var(--hm-rate, 0) / 5 * 100%);
    font-size: 12px; line-height: 1; letter-spacing: 1.5px; direction: ltr; flex: none;
    background: linear-gradient(90deg, #f59e0b var(--hm-pct), #ECE9E0 var(--hm-pct));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-card__rate::before { content: '★★★★★'; }

.hm-card__body { gap: 8px; padding: 12px 15px 14px; }
.hm-card__title {
    font-size: 13.5px; line-height: 2; font-weight: 800;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.hm-card__foot { padding-top: 8px; border-top: 1px dashed var(--az-line, #F7F5EF); }
.hm-card__price { font-size: 16.5px; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.hm-card__prices del { text-decoration-color: rgba(180, 172, 152, .8); }

/* دکمه‌ای که هنگام هاور از پایین می‌آید */
.hm-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 0; opacity: 0; overflow: hidden; border-radius: 13px;
    font-size: 12.5px; font-weight: 900; color: #fff;
    background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226));
    transition: height .28s cubic-bezier(.2,.8,.3,1), opacity .22s, margin-top .28s;
    margin-top: 0;
}
.hm-card__cta i { font-size: 11px; transition: transform .25s; }
.hm-card:hover .hm-card__cta { height: 38px; opacity: 1; margin-top: 4px; }
.hm-card:hover .hm-card__cta i { transform: translateX(-3px); }
.hm-card.is-out .hm-card__cta { background: linear-gradient(135deg, #5F6758, #B4AC98); }

/* حالت ناموجود */
.hm-card.is-out .hm-card__media { filter: saturate(.45); }

/* کارت‌های داخل اسلایدر هم‌قد باشند */
.hm-slider__slide { display: flex; }
.hm-slider__slide > .hm-card { width: 100%; }

/* روی لمسی، دکمه همیشه پیداست (hover وجود ندارد) */
@media (hover: none) {
    .hm-card__cta { height: 36px; opacity: 1; margin-top: 4px; }
}
@media (max-width: 575.98px) {
    .hm-card__media { margin: 8px 8px 0; border-radius: 15px; }
    .hm-card__title { font-size: 13px; }
}

/* حالا که دکمه پایین کارت آمده، لایه «مشاهده» روی تصویر لازم نیست */
.hm-card .hm-card__quick { display: none; }
/* هاله ملایم‌تر */
.hm-card::before {
    background: linear-gradient(150deg, rgba(91, 132, 55, .09), rgba(116, 181, 60, 0) 55%, rgba(220, 149, 73, .05));
}

/* ======================================================================
   نسخه ۵.۶ — اسلایدرهای ویترینی صفحه اصلی، از نو
   پنل کناری با گرادیان زنده و هالهٔ متحرک، آمار کوتاه، و ریلی که
   کارت‌ها روی یک سطح شیشه‌ای می‌نشینند.
   ====================================================================== */
.hm-showcase {
    border-radius: 30px; overflow: hidden; position: relative;
    box-shadow: 0 34px 70px -44px rgba(23, 30, 17, .6);
}
/* پس‌زمینه ریل: طرح نقطه‌ای ظریف */
.hm-showcase::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(23, 30, 17, .05) 1px, transparent 1px);
    background-size: 18px 18px; opacity: .7;
}
.hm-showcase > * { position: relative; z-index: 1; }

.hm-showcase--blue { background: linear-gradient(180deg, #FCFAF7 0%, #F8F5EF 100%); }
.hm-showcase--dark { background: linear-gradient(180deg, #FAF9F6 0%, #F4F2ED 100%); }
.hm-showcase--red  { background: linear-gradient(180deg, #F9EDE1 0%, #fdeeea 100%); }

/* ---------- پنل کناری ---------- */
.hm-showcase__side { position: relative; overflow: hidden; gap: 14px; padding: 34px 26px; }
.hm-showcase__side::after { display: none; }

/* هالهٔ نرمی که آرام نفس می‌کشد */
.hm-showcase__glow {
    position: absolute; inset: -30% -40% auto -40%; height: 120%; pointer-events: none;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .28), transparent 55%),
        radial-gradient(circle at 80% 75%, rgba(255, 255, 255, .18), transparent 52%);
    animation: hm-breathe 9s ease-in-out infinite alternate;
}
@keyframes hm-breathe { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -4%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hm-showcase__glow { animation: none; } }

.hm-showcase__badge {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34);
    color: #fff; font-size: 12px; font-weight: 900; padding: 5px 13px; border-radius: 999px;
    backdrop-filter: blur(6px);
}
.hm-showcase__title {
    font-size: clamp(21px, 2.3vw, 30px); line-height: 1.75; letter-spacing: -.4px;
    text-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.hm-showcase__sub { font-size: 13.5px; color: rgba(255, 255, 255, .86); }

/* آمار کوتاه */
.hm-showcase__stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hm-showcase__stats span {
    display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 66px;
    padding: 8px 10px; border-radius: 14px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}
.hm-showcase__stats b { font-size: 16px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.hm-showcase__stats em { font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .78); }

.hm-showcase__all {
    margin-top: auto; align-self: flex-start;
    background: #fff; color: var(--az-ink, #171E11); border-radius: 14px;
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6);
}
.hm-showcase__ctrl .hm-slider__nav {
    width: 42px; height: 42px; border-radius: 14px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; backdrop-filter: blur(6px);
}

/* ---------- ریل محصولات ---------- */
.hm-showcase__rail { padding: 24px 22px 16px; }
.hm-showcase__rail::before {
    content: ''; position: absolute; inset-inline-start: 0; inset-block: 24px 16px; width: 56px; z-index: 2;
    pointer-events: none; background: linear-gradient(to right, transparent, rgba(255, 255, 255, .0));
}
.hm-showcase__rail .hm-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(2px);
    box-shadow: 0 12px 28px -22px rgba(23, 30, 17, .7);
}

/* کارت پایانی «مشاهده همه» */
.hm-showcase__more {
    border-radius: 22px; border: 1.5px dashed rgba(23, 30, 17, .18);
    background: rgba(255, 255, 255, .55); backdrop-filter: blur(3px);
}
.hm-showcase__more:hover { border-color: var(--hm-primary); }

/* نقطه‌های اسلایدر و نوار پیشرفت */
.hm-showcase__rail .hm-slider__dots { margin-top: 6px; }
.hm-showcase__rail .hm-slider__progress { height: 4px; border-radius: 999px; overflow: hidden; }

@media (max-width: 991.98px) {
    .hm-showcase { border-radius: 24px; }
    .hm-showcase__side { padding: 20px 18px; gap: 10px; }
    .hm-showcase__stats { order: 6; width: 100%; }
    .hm-showcase__stats span { flex: 1; min-width: 0; }
    .hm-showcase__glow { inset: -40% -20% auto -20%; }
}

/* ======================================================================
   نسخه ۵.۶ — جعبه جستجوی بالای صفحه اصلی، شکیل‌تر
   ====================================================================== */
.hm-hero--search .hm-search {
    max-width: 900px;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)),
        radial-gradient(520px 200px at 80% -20%, rgba(116, 181, 60, .16), transparent 70%);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow:
        0 36px 80px -40px rgba(51, 74, 32, .55),
        0 2px 0 rgba(255, 255, 255, .85) inset,
        0 0 0 1px rgba(91, 132, 55, .06);
    padding: 28px 28px 24px;
    border-radius: 28px;
}
/* خط نور بالای کارت */
.hm-hero--search .hm-search::after {
    content: ''; position: absolute; inset-inline: 22%; top: 0; height: 2px; border-radius: 999px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(116, 181, 60, .55), transparent);
}

.hm-hero--search .hm-search__title { font-weight: 900; letter-spacing: -.3px; }
.hm-hero--search .hm-search__title::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 999px; margin: 0 auto 12px;
    background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226));
}

/* کادر ورودی: بزرگ‌تر، گردتر، با حلقهٔ رنگی هنگام فوکوس */
.hm-hero--search .ls__input,
.hm-hero--search .hm-search__input {
    height: 60px; border-radius: 18px; font-size: 15.5px; font-weight: 700;
    background: #fff; border: 1.5px solid var(--az-border, #F1EDE5);
    box-shadow: 0 10px 26px -20px rgba(23, 30, 17, .6);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hm-hero--search .ls__input:focus,
.hm-hero--search .hm-search__input:focus {
    border-color: var(--az-primary, #3D5826); transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(91, 132, 55, .14), 0 16px 34px -22px rgba(91, 132, 55, .9);
}
.hm-hero--search .hm-search__form { gap: 12px; }
.hm-hero--search .hm-search__form .hm-search__input { flex: 1 1 260px; }
.hm-hero--search .hm-search__btn {
    height: 60px; min-width: 132px; border-radius: 18px; font-size: 15px; font-weight: 900;
    background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226)); color: #fff; border: 0;
    box-shadow: 0 20px 36px -20px rgba(91, 132, 55, .95);
}
.hm-hero--search .hm-search__btn:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* چیپ‌های پیشنهاد */
.hm-hero--search .ls__chips { gap: 8px; justify-content: center; margin-top: 16px; }
.hm-hero--search .hm-search .ls__chip {
    padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
    background: #fff; border: 1px solid var(--az-border, #F1EDE5); color: var(--hm-ink, #171E11);
    box-shadow: 0 6px 16px -14px rgba(23, 30, 17, .8); transition: .2s;
}
.hm-hero--search .hm-search .ls__chip:hover {
    transform: translateY(-2px); border-color: transparent; color: #fff;
    background: var(--az-grad, linear-gradient(135deg, #17220E, #3D5826 55%, #436226));
}

@media (max-width: 575.98px) {
    .hm-hero--search .hm-search { padding: 20px 15px 18px; border-radius: 22px; }
    .hm-hero--search .ls__input,
    .hm-hero--search .hm-search__input,
    .hm-hero--search .hm-search__btn { height: 52px; border-radius: 15px; font-size: 14px; }
    .hm-hero--search .hm-search__btn { width: 100%; }
}

/* ======================================================================
   نسخه ۵.۶ — بخش‌های تازه صفحه اصلی
   ====================================================================== */

/* ---------- راهنمای انتخاب دستگاه ---------- */
.hm-finder {
    position: relative; overflow: hidden; border-radius: 28px; padding: 30px 26px 26px;
    background:
        radial-gradient(700px 320px at 85% -20%, rgba(116, 181, 60, .18), transparent 65%),
        radial-gradient(600px 300px at 5% 115%, rgba(18, 161, 80, .14), transparent 65%),
        linear-gradient(160deg, #171E11 0%, #26321D 55%, #3A4C29 100%);
    box-shadow: 0 40px 80px -46px rgba(32, 44, 21, .9);
    transition: min-height .3s cubic-bezier(.2,.8,.3,1);
}
.hm-finder__glow {
    position: absolute; inset: -40% -20% auto -20%; height: 130%; pointer-events: none;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .10), transparent 55%);
    animation: hm-breathe 10s ease-in-out infinite alternate;
}
.hm-finder > *:not(.hm-finder__glow) { position: relative; z-index: 1; }

.hm-finder__steps { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 22px; padding: 0; }
.hm-finder__steps li {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 900; color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); transition: .25s;
}
.hm-finder__steps li + li::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18);
    position: absolute; transform: translateX(28px);
}
.hm-finder__steps li { position: relative; }
.hm-finder__steps li.is-on { background: #fff; color: #171E11; transform: scale(1.12); box-shadow: 0 8px 20px -10px rgba(255, 255, 255, .8); }
.hm-finder__steps li.is-done { background: var(--az-success, #12a150); color: #fff; border-color: transparent; }

.hm-finder__panel { display: none; animation: hm-fin .3s ease both; }
.hm-finder__panel.is-on { display: block; }
@keyframes hm-fin { from { opacity: 0; transform: translateY(10px); } }

.hm-finder__q { text-align: center; margin: 0 0 18px; font-size: clamp(16px, 1.8vw, 21px); font-weight: 900; color: #fff; }

.hm-finder__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hm-finder__opt {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 20px 14px; border-radius: 18px; cursor: pointer; font-family: inherit;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; transition: transform .22s, background .22s, border-color .22s;
}
.hm-finder__opt i { font-size: 26px; color: #C5E3AB; transition: transform .25s, color .25s; }
.hm-finder__opt b { font-size: 14px; font-weight: 900; }
.hm-finder__opt em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .62); line-height: 1.9; }
.hm-finder__opt:hover {
    transform: translateY(-5px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4);
}
.hm-finder__opt:hover i { transform: scale(1.14); color: #fff; }

.hm-finder__back {
    margin: 16px auto 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, .6);
}
.hm-finder__back:hover { color: #fff; }

.hm-finder__result { text-align: center; }
.hm-finder__tick {
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px;
    background: var(--az-success, #12a150); color: #fff; font-size: 24px;
    box-shadow: 0 0 0 8px rgba(18, 161, 80, .18);
}
.hm-finder__chosen { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 0 0 20px; }
.hm-finder__chosen span {
    font-size: 12px; font-weight: 800; color: #fff; padding: 5px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
}
.hm-finder__go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.hm-finder__go .hm-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.hm-finder__again {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, .6);
}
.hm-finder__again:hover { color: #fff; }

@media (max-width: 575.98px) {
    .hm-finder { padding: 22px 14px 20px; border-radius: 22px; }
    .hm-finder__opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
    .hm-finder__opt { padding: 15px 10px; }
    .hm-finder__opt i { font-size: 22px; }
}

/* ---------- اخیراً دیده‌اید ---------- */
.hm-recentrail { position: relative; }
.hm-recentrail__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 12px; scrollbar-width: none;
}
.hm-recentrail__track::-webkit-scrollbar { display: none; }
.hm-recentrail__nav {
    position: absolute; top: 50%; transform: translateY(-60%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--az-border, #F1EDE5);
    background: #fff; color: var(--hm-ink, #171E11); cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 10px 24px -14px rgba(23, 30, 17, .7);
}
.hm-recentrail__nav--prev { inset-inline-end: -8px; }
.hm-recentrail__nav--next { inset-inline-start: -8px; }
.hm-recentrail__nav:hover { background: var(--hm-primary, #3D5826); color: #fff; border-color: transparent; }

.hm-rcard {
    flex: 0 0 276px; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 18px; background: #fff; border: 1px solid var(--az-border, #F1EDE5);
    text-decoration: none; color: inherit; transition: transform .22s, box-shadow .22s, border-color .22s;
}
.hm-rcard:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 38px -26px rgba(23, 30, 17, .7); color: inherit; }
.hm-rcard__img {
    flex: none; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(170deg, #FEFDFC, #F9F6F0); color: #DAD4C6; font-size: 22px;
}
.hm-rcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.hm-rcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hm-rcard__body b {
    font-size: 12.5px; font-weight: 800; line-height: 1.9; color: var(--hm-ink, #171E11);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-rcard__body em { font-style: normal; font-size: 12.5px; font-weight: 900; color: var(--hm-primary, #3D5826); }
.hm-rcard__body em.is-call { color: var(--az-accent, #B46D22); font-size: 12px; }
.hm-rcard__go { flex: none; color: var(--az-subtle, #B4AC98); font-size: 12px; transition: transform .2s, color .2s; }
.hm-rcard:hover .hm-rcard__go { color: var(--hm-primary, #3D5826); transform: translateX(-3px); }

.hm-recent__clear {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hm-muted, #5A6353);
}
.hm-recent__clear:hover { color: var(--az-danger, #B87B39); }

/* دکمه‌های نتیجهٔ راهنمای انتخاب */
.hm-finder__go .hm-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px;
    border-radius: 14px; font-size: 14px; font-weight: 900; text-decoration: none; transition: .22s;
}
.hm-finder__go .hm-btn--primary {
    background: #fff; color: #171E11;
    box-shadow: 0 18px 34px -18px rgba(255, 255, 255, .55);
}
.hm-finder__go .hm-btn--primary:hover { transform: translateY(-2px); color: var(--az-primary, #3D5826); }
.hm-finder__go .hm-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.hm-finder__again { padding: 0 10px; height: 48px; }

/* ---------- صفحه‌بندی دسته‌بندی و برند ---------- */
.pg-pager { display: flex; justify-content: center; margin-top: 22px; }
.pg-pager nav[role="navigation"] > div:first-child { display: none; }   /* نسخه موبایلِ لاراول */
.pg-pager .pagination,
.pg-pager ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pg-pager li > span,
.pg-pager li > a,
.pg-pager .page-link {
    display: inline-grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(28, 35, 22, .1);
    background: #fff; color: #1C2316;
    font-size: 13.5px; font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.pg-pager li > a:hover { border-color: #70A54B; color: #70A54B; }
.pg-pager .active > span,
.pg-pager li[aria-current="page"] > span { background: #70A54B; border-color: #70A54B; color: #fff; font-weight: 700; }
.pg-pager .disabled > span { opacity: .45; }
.pg-pager__note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #5F6758; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pg-pager li > span,
    html:not([data-theme="light"]) .pg-pager li > a { background: #2C3425; border-color: rgba(180,172,152,.2); color: #EFEBE3; }
}

/* ---------- رأی «این دیدگاه مفید بود؟» ---------- */
.cv { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.cv__label { font-size: 12px; color: #5F6758; }
.cv__btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 11px;
    border: 1px solid rgba(28, 35, 22, .12);
    border-radius: 999px;
    background: #fff; color: #464D40;
    font: inherit; font-size: 12.5px; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cv__btn:hover { border-color: #70A54B; color: #70A54B; }
.cv__btn.is-on { background: #FAF8F3; border-color: #70A54B; color: #628549; font-weight: 700; }
.cv__btn--down.is-on { background: #F7ECE0; border-color: #D09453; color: #986732; }
.cv__btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- انتخاب تعداد در جعبه خرید ---------- */
.ap-qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ap-qty__label { font-size: 13px; color: #5F6758; }
.ap-qty__btn {
    width: 36px; height: 36px;
    border: 1px solid rgba(28, 35, 22, .14);
    border-radius: 10px; background: #fff;
    font-size: 19px; line-height: 1; color: #1C2316; cursor: pointer;
}
.ap-qty__btn:hover:not([disabled]) { border-color: #70A54B; color: #70A54B; }
.ap-qty__btn[disabled] { opacity: .4; cursor: not-allowed; }
.ap-qty__input {
    width: 68px; height: 36px;
    border: 1px solid rgba(28, 35, 22, .14);
    border-radius: 10px; text-align: center; font-size: 14px;
    background: #fff; color: #1C2316;
}
.ap-qty__input::-webkit-outer-spin-button,
.ap-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ap-qty__input { -moz-appearance: textfield; }
.ap-qty__max { font-size: 11.5px; color: #B4AC98; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ap-qty__btn,
    html:not([data-theme="light"]) .ap-qty__input { background: #2C3425; border-color: rgba(180,172,152,.22); color: #EFEBE3; }
}

/* ---------- «موجود شد خبرم کن» ---------- */
.ap-notify { margin-top: 12px; padding: 14px; border: 1px dashed rgba(28,35,22,.18); border-radius: 14px; background: rgba(112,165,75,.04); }
.ap-notify > label { display: block; font-size: 13.5px; font-weight: 700; color: #1C2316; margin-bottom: 8px; }
.ap-notify > label i { color: #70A54B; margin-inline-end: 4px; }
.ap-notify__row { display: flex; gap: 8px; }
.ap-notify__input {
    flex: 1 1 auto; min-width: 0; height: 40px;
    border: 1px solid rgba(28,35,22,.14); border-radius: 10px;
    padding: 0 12px; font-size: 14px; background: #fff; color: #1C2316; text-align: center;
}
.ap-notify__input:focus { outline: 0; border-color: #70A54B; box-shadow: 0 0 0 3px rgba(112,165,75,.12); }
.ap-notify__btn { flex: 0 0 auto; height: 40px; padding: 0 18px; }
.ap-notify__hint { display: block; margin-top: 7px; font-size: 11.5px; color: #5F6758; }
.ap-notify__err { display: block; margin-top: 6px; font-size: 12px; color: #B77D3E; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ap-notify { background: rgba(129,186,86,.08); border-color: rgba(180,172,152,.25); }
    html:not([data-theme="light"]) .ap-notify > label { color: #EFEBE3; }
    html:not([data-theme="light"]) .ap-notify__input { background: #2C3425; border-color: rgba(180,172,152,.22); color: #EFEBE3; }
}


/* ============================ نسخه ۵ ویترین ============================ */
.hm-section { scroll-margin-top: 88px; }
.hm-section + .hm-section { border-top: 1px solid transparent; }
.hm-head3 { margin-bottom: 28px; }
.hm-head3__title { letter-spacing: -.02em; }
.hm-more { border-radius: 999px; padding: 8px 14px; background: rgb(var(--az-primary-rgb, 6 44 120) / .08); }
.hm-more:hover { background: rgb(var(--az-primary-rgb, 6 44 120) / .14); }

.hm-h1__title {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 900; letter-spacing: -.03em; line-height: 1.45;
}
.hm-h1__sub { max-width: 46rem; color: var(--hm-muted); line-height: 2; }

.hm-story__ring {
    box-shadow: 0 10px 24px -16px rgb(61 88 38 / .7);
}
.hm-tile {
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.hm-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(23 30 17 / .55); }
.hm-showcase { border-radius: 28px; }
.hm-cta { position: relative; overflow: hidden; }
.hm-cta::after {
    content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
    background: rgb(255 255 255 / .08); left: -80px; bottom: -90px; pointer-events: none;
}

@media (min-width: 992px) {
    .hm-section { padding-block: clamp(52px, 6vw, 80px); }
}


/* ============================ نسخه ۶ — جمع‌وجور کردن صفحه اصلی ============================ */
.hm-section--tight, .hs-section--tight { padding-top: clamp(18px, 2.4vw, 28px); padding-bottom: clamp(18px, 2.4vw, 28px); }
.hm-stories-section { padding-top: 12px; padding-bottom: 8px; }
.hm-stories--few { justify-content: flex-start; }
.hm-stories--few .hm-stories__rail { justify-content: flex-start; gap: 18px; }
.hm-stories__bar { margin-bottom: 10px; }
.hm-stories__sub { max-width: 36rem; font-size: 13px; opacity: .75; }

.hm-card__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.7; min-height: 0; font-size: 13.5px;
}
.hm-card--showcase .hm-card__stock { display: none; }
.hm-card.is-out { opacity: .78; }
.hm-card.is-out .hm-card__media img { filter: grayscale(.2); }
.hm-showcase { min-height: 0; }
.hm-showcase .hm-card { min-height: 0; }

.hm-section--search { padding-top: clamp(12px, 2vw, 22px); padding-bottom: clamp(20px, 3vw, 36px); }
.fdr { padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 28px); }

.hs-banners--2 { gap: 18px; }
.hs-banners--2 .hs-banner img { aspect-ratio: 16 / 9; }
.hs-section--tight + .hs-section--tight { padding-top: 8px; }

@media (min-width: 1100px) {
    .hm-showcase--full .hm-card { min-width: 210px; }
}


/* ============================ نسخه ۷ — خوانایی و تصویر کامل بنر ============================ */
.hs-banner,
.hs-hero-banner,
.hero__link {
    background: #F6F3EA;
}
.hs-banner img,
.hs-hero-banner img,
.hs-banners img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    background: #F6F3EA;
}
.hs-banners--2 .hs-banner img,
.hs-banners--3 .hs-banner img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.hero__link img {
    width: 100%;
    height: min(420px, 46vw);
    object-fit: contain;
    object-position: center;
    background: #F7F4EE;
}

/* متن روی پنل تیره همیشه سفید بماند حتی اگر قالب سراسری رنگ را عوض کند */
.hm-finder,
.hm-finder h2, .hm-finder h3, .hm-finder p, .hm-finder b, .hm-finder em, .hm-finder span,
.hm-showcase__side,
.hm-showcase__side h2, .hm-showcase__side p, .hm-showcase__side span, .hm-showcase__side b, .hm-showcase__side em,
.hm-cta, .hm-cta h3, .hm-cta p,
.hs-promo, .hs-promo h3, .hs-promo p {
    color: #fff !important;
}
.hm-finder__opt em,
.hm-showcase__sub,
.hm-cta p,
.hs-promo p {
    color: rgba(255,255,255,.82) !important;
}
.hm-showcase__all,
.hs-promo__btn,
.hm-btn--light {
    color: #171E11 !important;
}

.hm-finder__opt {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}