/**
 * فایل اصلاح مشکلات Responsive
 * این فایل باید بعد از style.css لود شود
 */

/* ============================================
   رفع مشکل overflow افقی
   ============================================ */


/* ============================================
   اصلاح استایل‌های backmeshki برای responsive
   ============================================ */

/* موبایل - حذف !important های غیرضروری */
@media (max-width: 768px) {
    .header {
        left: var(--spacing-md);
        right: var(--spacing-md);
    }
    
    .footer {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
    }
    
    .backmeshki-offer-wrapper {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        padding: 0 var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .backmeshki-offer-wrapper.classic-fit-section,
    .backmeshki-offer-wrapper.sport-fit-section,
    .backmeshki-offer-wrapper.group3-products-section {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 100%;
        padding: 0 var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .backmeshki-offer-wrapper .offer-toggle-buttons {
        width: 100%;
        max-width: 100%;
        padding: 0 var(--spacing-sm);
        margin: 0;
        justify-content: flex-start;
    }
    
    .backmeshki-offer-wrapper .offer-content-box {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md) var(--spacing-sm);
        margin: 0;
    }
    
    .backmeshki-offer-wrapper .offer-section-title {
        width: 100%;
        max-width: 100%;
        padding: 0 var(--spacing-sm);
        margin: var(--spacing-sm) 0;
    }
}

/* تبلت */
@media (min-width: 769px) and (max-width: 1023px) {
    .backmeshki-offer-wrapper {
        width: 85%;
        max-width: 85%;
        padding: 0 var(--spacing-md);
    }
    
    .backmeshki-offer-wrapper .offer-content-box {
        width: 100%;
        max-width: 100%;
    }
}

/* دسکتاپ */
@media (min-width: 1024px) {
    .backmeshki-offer-wrapper {
        width: 80%;
        max-width: 80%;
        padding: 0 var(--spacing-xl);
    }
    
    .new-black-section .backmeshki-offer-wrapper.classic-fit-section {
        width: 125% !important;
        max-width: 125% !important;
    }
    
    .backmeshki-offer-wrapper .offer-content-box {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   اصلاح products-grid برای responsive
   ============================================ */

.products-grid {
    display: grid;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* موبایل */
@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .products-section .products-grid {
        padding: 0;
    }
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* دسکتاپ */
@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   اصلاح product-card برای responsive
   ============================================ */

.product-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================
   اصلاح container برای جلوگیری از overflow
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    padding: 0 var(--container-padding);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* موبایل */
@media (max-width: 767px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

/* ============================================
   اصلاح section ها برای جلوگیری از overflow
   ============================================ */

section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ============================================
   اصلاح offer-content-box برای responsive
   ============================================ */

.offer-content-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

.offer-content-box .products-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.offer-content-box .products-grid::-webkit-scrollbar {
    display: none;
}

/* موبایل */
@media (max-width: 767px) {
    .offer-content-box {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .offer-content-box .products-grid {
        gap: var(--spacing-xs);
    }
}

/* ============================================
   اصلاح hero-slider برای responsive
   ============================================ */

.hero-slider-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.slider-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   اصلاح categories-slider برای responsive
   ============================================ */

.categories-slider {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.categories-slider::-webkit-scrollbar {
    display: none;
}

/* ============================================
   اصلاح stories-section برای responsive
   ============================================ */

.stories-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.stories-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.stories-wrapper::-webkit-scrollbar {
    display: none;
}

/* ============================================
   اصلاح products-slider برای responsive
   ============================================ */

.products-slider {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.products-slider-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.products-slider-wrapper::-webkit-scrollbar {
    display: none;
}

/* ============================================
   اصلاح backmeshki-content برای responsive
   ============================================ */

.backmeshki-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* موبایل */
@media (max-width: 767px) {
    .backmeshki-content {
        padding: 0 var(--spacing-sm);
    }
}


/* ============================================
   اصلاح body و html برای جلوگیری از overflow
   ============================================ */

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

/* ============================================
   اصلاح main-content برای responsive
   ============================================ */

.main-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}