/* مهار کردن محدودیت‌های احتمالی ظرف بیرونی خود ویجت المنتور */
.elementor-widget-horizontal_scroll_5855518e,
.elementor-widget-horizontal_scroll_5855518e .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

.hz-scroll-wrapper {
    position: relative;
    width: 100%;
    /*
     * FIX: از overflow:hidden به جای overflow:clip استفاده می‌کنیم.
     * overflow:clip روی برخی مرورگرها scrollWidth را به اشتباه محاسبه می‌کند.
     * overflow:hidden این مشکل را ندارد و رفتار بصری یکسانی دارد.
     * (در روش جدید JS از getBoundingClientRect روی هر item استفاده می‌شود،
     * بنابراین تغییر overflow دیگر روی محاسبات تأثیری نخواهد داشت.)
     */
    overflow: hidden !important;
    box-sizing: border-box;
}

.hz-scroll-sticky {
    position: relative;
    width: 100%;
    will-change: transform;
    box-sizing: border-box;
}

.hz-scroll-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    /*
     * FIX: width را از max-content به fit-content(100%) تغییر می‌دهیم.
     * این کار از مشکل overflow پنهان شدن track در Elementor جلوگیری می‌کند.
     * JS از getBoundingClientRect هر item جداگانه عرض را محاسبه می‌کند.
     */
    width: max-content !important;
    height: 100vh;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    box-sizing: border-box;
}

.hz-scroll-item {
    position: relative;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /*
     * FIX: جلوگیری از subpixel layout shift روی DPI بالا و zoom out
     * backface-visibility باعث می‌شود GPU رندرینگ item را در یک layer مجزا انجام دهد.
     */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hz-scroll-item-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}