body {
    overflow-x: hidden;
}


html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
}

main {
    animation: pageFadeIn .18s ease-out both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



#mobileHeaderContent.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
}

#mobileHeaderContent {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
}



.bg-primary {
    background-color: #eb1668;
}

.text-primary {
    color: #eb1668;
}

.border-primary {
    border-color: #eb1668;
}


.home-brand-swiper .swiper-pagination-bullet-active {
    background: #ea1666;
}




/* ============================app-blade============================= */

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Desktop Mega Menu (click) */
.desktop-mega-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s ease;
    pointer-events: none;
}

.desktop-mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Mobile Safe Area */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Min Height Fix */
body {
    min-height: max(884px, 100dvh);
}

/* RTL Specific */
.rtl-flip {
    transform: scaleX(-1);
}


/* ==============================product-list============================ */

@media (max-width: 767px) {

    #mobileCategoryMenu,
    #mobileSearch {
        display: none;
    }
}


.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scroll-behavior: smooth;
}

.custom-scrollbar:hover {
    scrollbar-color: #cbd5e1 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}



/* embla carousel styles */


/* Embla Base */
.embla {
    overflow: hidden;
    direction: ltr;
    /* اسلایدر همیشه LTR باشد */
}

.embla__container {
    display: flex;
    align-items: stretch;
    /* هم‌ارتفاع کردن کارت‌ها */
}

.embla__slide {
    flex: 0 0 auto;
    padding-left: 8px;
    /* فاصله بین اسلایدها */
    padding-right: 4px;
}

/* ریسپانسیو: اندازه اسلایدها */
@media (min-width: 640px) {
    .embla__slide {
        flex: 0 0 50%;
        /* تبلت: ۲ ستون */
    }
}

@media (min-width: 1024px) {
    .embla__slide {
        flex: 0 0 25%;
        /* دسکتاپ: ۴ ستون */
    }
}

/* استایل‌های کمکی */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }
}

/* Swiper Navigation Custom Styles */
.swiper-button-next,
.swiper-button-prev {
    width: 32px !important;
    height: 32px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    color: #374151 !important;
    transition: all 0.2s ease-in-out !important;
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.8;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    opacity: 1;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 12px !important;
    font-weight: 900 !important;
}

.swiper-button-next {
    right: 8px !important;
}

.swiper-button-prev {
    left: 8px !important;
}

[dir="rtl"] .swiper-button-next {
    right: auto !important;
    left: 8px !important;
}

[dir="rtl"] .swiper-button-prev {
    left: auto !important;
    right: 8px !important;
}


.swiper-button-next,
.swiper-button-prev {
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 18px rgb(15 23 42 / 0.12) !important;
    color: #334155 !important;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.group:hover .swiper-button-next,
.group:hover .swiper-button-prev {
    opacity: 1;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 11px !important;
    font-weight: 900 !important;
}


@media (max-width: 767px) {

    .swiper-button-next,
    .swiper-button-prev {
        opacity: 1;
    }
}



.js-lazy-product-image {
    opacity: 0;
    transition: opacity .25s ease, transform .5s ease;
}

.js-lazy-product-image.is-loaded {
    opacity: 1;
}