/**
 * Snap Scroll (Instagram-like feed) — پایهٔ CSS
 * فقط وقتی فعال است اعمال می‌شود: body[data-snap-feed="active"]
 * مقادیر scroll-padding و ارتفاع کارت یک‌بار توسط JS روی --snap-* تنظیم می‌شوند (بدون resize مداوم).
 */

/* تخمین اولیه قبل از JS — JS فقط --snap-header-h و --snap-footer-h را روی html به‌روز می‌کند
   تا body از آن‌ها ارث ببرد (اگر روی body تعریف شوند، مقدار JS روی html دیده نمی‌شود). */
html {
    --snap-edge-gap: 5px;
    --snap-header-h: 72px;
    --snap-footer-h: 45px;
}
body[data-snap-feed] {
    --snap-padding-top: calc(var(--snap-header-h) + var(--snap-edge-gap) + env(safe-area-inset-top, 0px));
    --snap-padding-bottom: calc(var(--snap-footer-h) + var(--snap-edge-gap) + env(safe-area-inset-bottom, 0px));
    --snap-card-height: calc(
        100dvh
        - var(--snap-header-h)
        - var(--snap-footer-h)
        - (var(--snap-edge-gap) * 2)
        - env(safe-area-inset-top, 0px)
        - env(safe-area-inset-bottom, 0px)
    );
}

/* جلوگیری از double scroll و chaining ناخواسته */
html {
    scroll-behavior: auto;
}

/* فعال‌سازی فقط با فلگ */
body[data-snap-feed="active"] {
    overflow-x: hidden;
}

/* اسنپ فقط با کلاس snap-feed-snap-mandatory روی html اعمال می‌شود */

/* محفظهٔ اسکرول اصلی = viewport؛ padding برای header/footer توسط JS ست می‌شود */
body[data-snap-feed="active"] {
    scroll-padding-top: var(--snap-padding-top, 0);
    scroll-padding-bottom: var(--snap-padding-bottom, 0);
}

/* اسنپ با CSS فقط در مود single (تک‌کارت)؛ در grid اسنپ توسط JS انجام می‌شود */
@supports (scroll-snap-type: y mandatory) {
    html.snap-feed-scroll-container.snap-feed-snap-mandatory {
        scroll-snap-type: y mandatory;
        scroll-padding-top: var(--snap-padding-top, 0);
        scroll-padding-bottom: var(--snap-padding-bottom, 0);
    }
}

/* حالت تک‌ستون (موبایل full-card): هر کارت یک نقطهٔ اسنپ */
body[data-snap-feed="active"][data-snap-mode="single"] #products .product-card {
    scroll-snap-align: center;
    scroll-margin-top: var(--snap-padding-top, 0);
    scroll-margin-bottom: var(--snap-padding-bottom, 0);
}

/* حالت چندستونه: اسنپ بر اساس ردیف توسط JS انجام می‌شود؛ از align روی کارت استفاده نمی‌کنیم */
body[data-snap-feed="active"][data-snap-mode="grid"] #products .product-card {
    scroll-snap-align: none;
}

/* overscroll برای موبایل — حفظ momentum بدون کشیدن بیش از حد */
body[data-snap-feed="active"] {
    overscroll-behavior-y: contain;
}

/* فاصلهٔ ۵px بین کارت‌ها در موبایل (گرید ۲ ستونه و تک‌ستونه) */
@media (max-width: 991px) {
    body[data-snap-feed] #products:not(.products--list) {
        gap: 5px !important;
        row-gap: 20px !important;
        column-gap: 5px !important;
    }

    body[data-snap-feed] #products.products--grid:not(.products--list) .product-card,
    body[data-snap-feed] #products.view-large:not(.products--list) .product-card {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    body[data-snap-feed="active"] {
        -webkit-overflow-scrolling: touch;
    }

    /* هم‌تراز با ارتفاع واقعی هدر/فوتر — padding ثابت ۷۲px باعث جابه‌جایی بالا/پایین می‌شد */
    body[data-snap-feed] main.content {
        padding-top: var(--snap-padding-top) !important;
        padding-bottom: var(--snap-padding-bottom) !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-snap-feed] .products-toolbar:empty {
        display: none;
        margin: 0;
    }

    body[data-snap-feed] .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* فید snap: نام محصول با CSS (بدون اسکیل JS و reflow) */
body[data-snap-feed] .product-card .title-row .name {
    font-size: clamp(11px, 3.5cqi, 15px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0;
    flex: 1 1 auto;
}

body[data-snap-feed] .product-card .title-row .name.name-autofit {
    text-overflow: ellipsis !important;
}

/* ارتفاع کارت: یک‌بار از JS (--snap-card-height) — بدون حلقهٔ reflow روی هر کارت */
body[data-snap-feed] #products:not(.products--list) .product-card {
    height: var(--snap-card-height);
    max-height: var(--snap-card-height);
    box-sizing: border-box;
    overflow: hidden;
}

body[data-snap-feed] #products:not(.products--list) .product-card.is-more-open {
    overflow: visible;
}

/* کارت‌های خارج از viewport رندر سبک‌تر (بدون virtual list) */
body[data-snap-feed] #products .product-card {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--snap-card-height, 480px);
}

body[data-snap-feed] #products.products--list .product-card {
    /* IO + lazy-load: کارت list نباید content-visibility داشته باشد */
    height: auto;
    max-height: none;
    overflow: visible;
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

body[data-snap-feed] #products.view-large:not(.products--list) .product-card {
    contain-intrinsic-size: auto var(--snap-card-height, 560px);
}

/* تصویر داخل کارت content-visibility نداشته باشد — IO و لود در list/view-large/grid */
body[data-snap-feed] #products.products--list .product__media img.product__media-img,
body[data-snap-feed] #products.view-large:not(.products--list) .product__media img.product__media-img,
body[data-snap-feed] #products:not(.products--list) .product__media img.product__media-img {
    content-visibility: visible;
    contain: none;
}

@supports (-webkit-touch-callout: none) {
    body[data-snap-feed] #products .product-card {
        content-visibility: visible;
    }
}