/**
 * Homepage Styles - Based on figma/pages/home/Home.png
 *
 * @package Vanilly
 */

section {
    margin: 15px 0;
}

/* ========================================
   Hero Section - EXACT FIGMA DESIGN
   ======================================== */
.hero-section {
    background: transparent;
    margin-bottom: var(--spacing-xl);
}

.hero-main-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: var(--spacing-xl);
    align-items: stretch;
}

/* Hero Banner Base Styles */
.hero-banner {
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    transition: transform 0.3s ease;
}

.hero-banner:hover {
    transform: translateY(-4px);
}

/* Top Row: Banner 1 and Banner 2 */
.hero-banner-top {
    grid-row: 1;
    min-height: 300px;
}

.hero-banner-1 {
    grid-column: 1 / span 2;
}

.hero-banner-2 {
    grid-column: 3 / span 2;
}

/* Bottom Row: Banners 3, 4, 5, 6 */
.hero-banner-bottom {
    grid-row: 2;
    min-height: 200px;
}

.hero-banner-3 {
    grid-column: 1;
}

.hero-banner-4 {
    grid-column: 2;
}

.hero-banner-5 {
    grid-column: 3;
}

.hero-banner-6 {
    grid-column: 4;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
    max-height: none;
}

/* Desktop/Mobile image switching */
.hero-banner .banner-image-mobile {
    display: none !important;
}

.hero-banner .banner-image-desktop {
    display: block !important;
}

/* Show mobile banner on mobile devices, hide desktop */
@media (max-width: 768px) {
    .hero-banner .banner-image-desktop {
        display: none !important;
    }

    .hero-banner .banner-image-mobile {
        display: block !important;
    }
}

.banner-content {
    z-index: 1;
    flex: 1;
}

.banner-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin: 0;
    color: #FFFFFF;
}

.banner-discount {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.banner-image {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    opacity: 0.8;
}

/* ========================================
   Promo Banners Section
   ======================================== */
.promo-banners-section {
    margin-bottom: var(--spacing-2xl);
}

.promo-banners-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
}

.promo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    border-radius: 16px;
    padding: var(--spacing-lg);
    text-decoration: none;
    color: #FFFFFF;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    flex-direction: row-reverse; /* RTL */
}

.promo-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(101, 85, 211, 0.3);
}

.promo-banner-large {
    min-height: 200px;
    grid-column: span 1;
}

.promo-banner-small {
    min-height: 160px;
}

.promo-content {
    text-align: right;
    z-index: 1;
}

.promo-label {
    display: block;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.promo-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0;
}

.promo-discount {
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    opacity: 0.8;
}

.promo-image {
    max-width: 100px;
    height: auto;
    object-fit: contain;
}

/* ========================================
   Section Headers
   ======================================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.section-title {
	font-size: var(--font-size-section-title);
	font-weight: var(--font-weight-section-title);
	color: var(--color-text);
	margin: 0;
}

.view-all-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.3s ease;
}

.view-all-link:hover {
    color: var(--color-primary-dark);
}

.tabs {
    display: flex;
    gap: var(--spacing-sm);
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ========================================
   Products Grid - EXACT FIGMA DESIGN
   ======================================== */
.sale-section,
.bestsellers-section {

}

/* Hide horizontal scrollbar on sale-section */
.sale-section .products-grid {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.sale-section .products-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-md);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

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

.products-carousel {
    display: flex;
    gap: var(--spacing-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    position: relative;
    padding: 10px 0 var(--spacing-md) 0;
}

.products-carousel .product-card {
    min-width: 250px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.carousel-nav {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.carousel-btn {
    width: 40px;
    height: 40px;
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* Product Card */
.product-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: var(--color-primary-light);
}

.product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-image-wrapper {
    position: relative;
    padding: var(--spacing-md);
    background: #F9FAFB;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.05);
}

.sale-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm); /* RTL */
    background: var(--color-accent);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.product-info {
    padding: var(--spacing-md);
    text-align: right;
}

.product-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
    line-height: 1.4;
}

.product-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm);
}

.product-stock {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.product-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-direction: row-reverse; /* RTL */
    justify-content: flex-end;
}

.regular-price {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: line-through;
}

.sale-price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.add-to-cart-btn {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-md); /* RTL */
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.product-card:hover .add-to-cart-btn {
    opacity: 1;
    transform: translateY(0);
}

.add-to-cart-btn:hover {
    background: var(--color-primary-dark);
}

/* ========================================
   Daily Deal Section - EXACT FIGMA DESIGN
   ======================================== */
.daily-deal-section {
    background: #FFFFFF;
    padding: var(--spacing-2xl) 0;
    margin: var(--spacing-2xl) 0;
}

.daily-deal-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
}

.daily-deal-products-area {
    flex: 1;
}

.daily-deal-products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.daily-deal-nav {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.nav-btn {
    width: 40px;
    height: 40px;
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

.daily-deal-sidebar {
    position: sticky;
    top: 100px;
}

.daily-deal-banner {
    background: var(--color-primary);
    border-radius: 16px;
    padding: var(--spacing-xl);
    text-align: center;
    color: #FFFFFF;
}

.daily-deal-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm);
    color: #FFFFFF;
}

.daily-deal-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.daily-deal-clock {
    margin-bottom: var(--spacing-lg);
}

.clock-icon {
    max-width: 120px;
    height: auto;
    margin: 0 auto;
}

.countdown-timer {
    margin-top: var(--spacing-lg);
}

.countdown-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-md);
    border-radius: 8px;
}

.countdown-item {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
    min-width: 40px;
    text-align: center;
}

.countdown-separator {
    font-size: var(--font-size-2xl);
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);
}

/* ========================================
   Categories Section - EXACT FIGMA DESIGN
   ======================================== */
.categories-section {
    padding: 0 0 var(--spacing-2xl) 0 !important;
}

.categories-section .section-title {
	text-align: center;
	margin-bottom: var(--spacing-xl) !important;
	font-size: var(--font-size-section-title);
	font-weight: var(--font-weight-section-title);
}

.categories-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.3s ease;
    /*max-width: 120px;*/
}

.category-item:hover {
    transform: translateY(-4px);
}

.category-icon {
    width: 100px;
    height: 100px;
    background: var(--color-background-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.category-item:hover .category-icon {
    background: var(--color-primary-light);
    transform: scale(1.05);
}

.category-icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.category-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    line-height: 1.4;
}

/* ========================================
   Collections Section - EXACT FIGMA DESIGN
   ======================================== */
.collections-section {
    padding: var(--spacing-2xl) 0;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.collection-card {
    background: var(--color-primary);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    padding: var(--spacing-lg);
    transition: transform 0.3s ease;
}

.collection-card:hover {
    transform: translateY(-4px);
}

.collection-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.collection-products-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    aspect-ratio: 1;
    object-fit: cover;
}

.collection-content {
    text-align: right;
    color: #FFFFFF;
}

.collection-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 8px 0;
    color: #FFFFFF;
    line-height: 1.4;
}

.collection-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin: 0 0 var(--spacing-md) 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.collection-view-all {
    color: #FFFFFF;
    text-decoration: none;
    font-size: var(--font-size-sm);
    opacity: 0.9;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.collection-view-all-icon {
    font-size: 18px;
    line-height: 1;
}

.collection-view-all:hover {
    opacity: 1;
    text-decoration: none;
}

/* ========================================
   Promo Large Section - EXACT FIGMA DESIGN
   ======================================== */

.promo-large-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.promo-large-banner {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    min-height: 250px;
    flex-direction: row-reverse; /* RTL */
    transition: transform 0.3s ease;
}

.promo-large-banner:hover {
    transform: translateY(-4px);
}

.promo-large-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-large-image-desktop {
    display: block;
}

.promo-large-image-mobile {
    display: none;
}

/* Hide entire section on desktop if no desktop images are enabled */
.promo-large-section[data-desktop-enabled="0"] {
    display: none;
}

/* Hide entire section on mobile if no mobile images are enabled */
@media (max-width: 767px) {
    .promo-large-image-desktop {
        display: none;
    }

    .promo-large-image-mobile {
        display: block;
    }

    .promo-large-section[data-mobile-enabled="0"] {
        display: none !important;
    }
}

/* Show section on desktop if desktop is enabled */
@media (min-width: 768px) {
    .promo-large-section[data-desktop-enabled="1"] {
        display: block;
    }
}

.promo-large-content {
    display: none; /* SVG contains all content */
}

.promo-large-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm);
    color: #FFFFFF;
    line-height: 1.2;
}

.promo-large-discount {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* ========================================
   Blog Section - EXACT FIGMA DESIGN
   ======================================== */
.blog-section {
    padding: var(--spacing-2xl) 0;
    background: #FFFFFF;
}

.blog-carousel {
    display: flex;
    gap: var(--spacing-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-md);
}

.blog-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    min-width: 300px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: 1px solid var(--color-border);
}

.blog-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-background-light);
    border-radius: 12px 12px 0 0;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-content {
    padding: var(--spacing-md);
    text-align: right;
}

.blog-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.4;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    flex-direction: row; /* RTL */
}

/* ========================================
   Brands Section - EXACT FIGMA DESIGN
   ======================================== */
.brands-section {

}

.brands-section .section-title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: var(--font-size-section-title);
	font-weight: var(--font-weight-section-title);
}

.brands-slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brand-item {
    padding: var(--spacing-sm);
}


.brand-item img {
    height: 80px;
    width: auto;
    max-width: 190px;
    object-fit: cover;
}

/* ========================================
   Responsive Styles
   ======================================== */
@media (max-width: 1200px) {
    .products-grid,
    .products-grid-6,
    .collections-grid,
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .promo-banners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .hero-main-banner {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
    }

    .hero-title {
        font-size: 48px;
    }

    .products-grid,
    .products-grid-6,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .collections-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-large-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding: var(--spacing-lg) 0;
    }

    .hero-title {
        font-size: 36px;
    }

    .promo-banners-grid {
        grid-template-columns: 1fr;
    }

    .promo-banner {
        min-height: 120px;
    }

    .products-grid,
    .products-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .categories-grid {
        gap: var(--spacing-lg);
    }

    .category-icon {
        width: 60px;
        height: 60px;
    }

    .category-icon img {
        width: 36px;
        height: 36px;
    }

    .collections-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .daily-deal-header {
        flex-direction: column;
        text-align: center;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
    }

    .tabs {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .products-grid,
    .products-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .product-info {
        padding: var(--spacing-sm);
    }

    .product-title {
        font-size: var(--font-size-sm);
    }

    .sale-price {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   Hero Section - Pixel Perfect
   EXACT FIGMA DESIGN: Large banner RIGHT (2/3), Tall banner LEFT (1/3), 4 small banners bottom
   Overrides homepage.css conflicting styles
   ======================================== */

.hero-section {
    background: transparent !important;
    margin-bottom: 32px !important;
}

.hero-main-banner {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important; /* 12 columns for flexible layout */
    grid-template-rows: 265px 265px 260px !important; /* 3 rows: row 1 (265px), row 2 (265px), row 3 (260px for small banners) */
    gap: 16px !important;
    align-items: stretch !important;
    flex-direction: unset !important; /* Override homepage.css flex-direction */
    text-align: unset !important; /* Override homepage.css text-align */
    /* Direction inherits from body[dir="rtl"] - Column 1 is on RIGHT, Column 12 is on LEFT */
}

/* Hero Banner Base Styles */
.hero-banner {
    /*background: #6555D3 !important; !* Deep purple background matching Figma design *!*/
    border-radius: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important; /* Center images vertically */
    justify-content: center !important; /* Center images horizontally */
    transition: transform 150ms ease !important;
    min-height: unset !important; /* Override homepage.css min-height */
    max-width: none !important;
    max-height: none !important;
}

.hero-banner:hover {
    transform: translateY(-2px) !important;
}

/* Remove hero-banner-top class - not needed with new structure */
.hero-banner-top {
    /* Removed - using direct grid positioning */
}

/* RTL Layout Correction:
   In RTL Grid (direction: rtl):
   - Column 1 starts at the RIGHT.
   - Column 12 ends at the LEFT.
   
   User Request: Big Banner at LEFT, Stacked Banners at RIGHT.
   - Big Banner (Left): Columns 5-12
   - Stacked Banners (Right): Columns 1-4
*/

.hero-banner-1 {
    grid-column: 5 / span 8 !important; /* Spans 5-12 (Left side in RTL) */
    grid-row: 1 / span 2 !important;
    height: 100% !important;
    min-height: 546px !important;
    max-height: 546px !important;
}

.hero-banner-2 {
    grid-column: 1 / span 4 !important; /* Spans 1-4 (Right side in RTL) */
    grid-row: 1 !important;
    height: 546px !important;
    min-height: 546px !important;
    max-height: 546px !important;
}

/* Bottom Row: Banners 4, 5, 6, 7 - Small banners below hero section */
.hero-banner-bottom {
    grid-row: 3 !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
}

.hero-banner-3 {
    grid-column: 1 / span 3 !important; /* Spans 1-4 (Right side in RTL) */
}


.hero-banner-4 {
    grid-column: 4 / span 3 !important; /* Spans columns 1-3 (first small banner) */
}

.hero-banner-5 {
    grid-column: 7 / span 3 !important; /* Spans columns 4-6 (second small banner) */
}

.hero-banner-6 {
    grid-column: 10 / span 3 !important; /* Spans columns 7-9 (third small banner) */
}


.banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cover to ensure full width/height fill */
    object-position: center !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    opacity: 1 !important;
    border-radius: 20px;
}

/* Desktop/Mobile image switching - Hide mobile on desktop, hide desktop on mobile */
.hero-banner .banner-image-mobile {
    display: none !important;
}

.hero-banner .banner-image-desktop {
    display: block !important;
}

/* Show mobile banner on mobile devices, hide desktop */
@media (max-width: 768px) {
    .hero-banner .banner-image-desktop {
        display: none !important;
    }

    .hero-banner .banner-image-mobile {
        display: block !important;
    }
}

/* RTL Support - Grid automatically reverses columns when direction is RTL */
/* In RTL: Column 1 = RIGHT side, Column 12 = LEFT side */
/* Banner 1 (large) on RIGHT = columns 1-8 */
/* Banner 2 (tall) on LEFT = columns 9-12 */
[dir="rtl"] .hero-main-banner {
    direction: rtl !important;
}

/* LTR Support - Normal column order */
[dir="ltr"] .hero-main-banner {
    direction: ltr !important;
}

/* Override responsive styles from homepage.css */
@media (max-width: 991px) {
    .hero-main-banner {
        flex-direction: unset !important;
        text-align: unset !important;
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        grid-template-rows: auto auto !important;
    }

    .hero-banner-1,
    .hero-banner-2,
    .hero-banner-3,
    .hero-banner-4,
    .hero-banner-5,
    .hero-banner-6 {
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Mobile Layout: 1 banner top, 2 banners row 2, 2 banners row 3 */
    .hero-main-banner {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 16px !important;
    }

    /* Row 1: Banner 1 (full width) */
    .hero-banner-1 {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
    }

    /* Row 2: Banner 2 and Banner 3 (side by side) */
    .hero-banner-2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
    }

    .hero-banner-3, .hero-banner-6 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
    }

    /* Row 3: Banner 4 and Banner 5 (side by side) */
    .hero-banner-4 {
        grid-column: 1 !important;
        grid-row: 3 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
    }

    .hero-banner-5 {
        grid-column: 2 !important;
        grid-row: 3 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
    }

	/* Hide banners 6 on mobile */
	.hero-banner-6 {
		display: none !important;
	}

	/* Hide daily-deal-section on mobile */
	.daily-deal-section {
		display: none !important;
	}

	/* Show mobile promo cards section only on mobile */
	.mobile-promo-cards-section {
		display: block !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin: 0 !important;
	}

	.mobile-promo-cards-section .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* All sections should have 14px padding from right and left on mobile */
	section,
	.hero-section,
	.sale-section,
	.bestsellers-section,
	.custom-products-section,
	.daily-deal-section,
	.categories-section,
	.collections-section,
	.promo-banners-section,
	.promo-large-section,
	.blog-section,
	.brands-section,
	.blog-preview-section,
	.featured-products-section,
	.mobile-promo-cards-section {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin: 0 !important;
	}

	/* Remove container padding inside sections on mobile to avoid double padding */
	section .container,
	.hero-section .container,
	.sale-section .container,
	.bestsellers-section .container,
	.custom-products-section .container,
	.daily-deal-section .container,
	.categories-section .container,
	.collections-section .container,
	.promo-banners-section .container,
	.promo-large-section .container,
	.blog-section .container,
	.brands-section .container,
	.blog-preview-section .container,
	.featured-products-section .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Product Cards - Horizontal Scroll on Mobile */
	.sale-section .products-grid {
		display: flex !important;
		flex-direction: row !important;
		gap: 16px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		padding-bottom: 4px !important;
	}

	.sale-section .products-grid::-webkit-scrollbar {
		display: none !important;
	}

	.bestsellers-section .products-carousel,
	.custom-products-section .products-carousel {
		display: flex !important;
		flex-direction: row !important;
		gap: 16px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		padding-bottom: 4px !important;
	}

	.bestsellers-section .products-carousel::-webkit-scrollbar,
	.custom-products-section .products-carousel::-webkit-scrollbar {
		display: none !important;
	}

	.sale-section .products-grid .product-card,
	.bestsellers-section .products-carousel .product-card,
	.custom-products-section .products-carousel .product-card {
		width: auto !important;
		min-width: 215px !important;
		max-width: 215px !important;
		flex-shrink: 0 !important;
        max-height: 290px !important;
        min-height: 290px !important;
        height: 290px !important;
	}

	.product-card {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
	}

	.product-title {
		font-size: 14px !important;
		line-height: 1.4 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price-wrapper {
		flex-wrap: wrap;
		gap: 8px;
	}

	.regular-price {
		font-size: 12px !important;
		white-space: nowrap;
		overflow: visible;
	}

	.product-price {
		font-size: 16px !important;
		white-space: nowrap;
	}

	.sale-price {
		font-size: 16px !important;
	}

	.sale-badge-footer {
		font-size: 12px !important;
	}

	.product-stock {
		font-size: 12px !important;
		white-space: nowrap;
	}
}

/* ========================================
   Product Sections - Pixel Perfect
   ======================================== */

.section-title {
	font-size: var(--font-size-section-title);
	font-weight: var(--font-weight-section-title);
	color: var(--color-text);
	margin: 0;
	text-align: right;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* RTL: Flex direction determines order. 
   If dir="rtl", Start is Right.
   Title (1st) -> Right. Nav (2nd) -> Left.
   This matches the design.
*/

.section-right {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: row-reverse;
}

.section-nav-carousel {
    display: flex;
    gap: 12px;
}

.nav-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2E303B;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: #F8F9FA;
    border-color: #D4D4D4;
}

.nav-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    display: block;
}


.custom-products-section .section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-direction: row;
}

.custom-products-section .products-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.custom-products-section .products-carousel::-webkit-scrollbar {
    display: none;
}

.custom-products-section .products-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bestsellers-section .products-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 4px 24px 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.bestsellers-section .products-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.products-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 4px 24px 4px; /* Space for shadow and scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.products-grid::-webkit-scrollbar {
    height: 6px;
}

.products-grid::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 3px;
}

.product-card {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid #EBEBEB; /* Matches design border color */
    width: 280px; /* Slightly wider to match spacing */
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0 !important;
    padding: 8px; /* Increased padding */
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 345px !important;
    height: 345px !important;
    min-height: 345px !important;
}

.bestsellers-section .products-carousel .product-card,
.custom-products-section .products-carousel .product-card {
    flex-shrink: 0;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image-wrapper {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0 !important;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.05);
}

.product-info {
    text-align: right; /* RTL Alignment */
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    font-size: 18px; /* Increased to match design */
    font-weight: 700;
    color: #2E303B;
    margin: 0 0 4px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-description {
    font-size: 16px; /* Increased size */
    color: #58595B; /* Darker grey */
    margin: 0 0 12px 0;
    font-weight: 500;
}

.product-stock {
    font-size: 14px;
    color: #D42E53;
    margin-bottom: 8px; /* Increased spacing */
    font-weight: 500;
    display: block;
}

.product-price {
    margin-top: auto;
    display: flex;
    align-items: flex-end; /* Align badge to bottom with prices */
    justify-content: flex-end; /* Default: align to left (when no badge) */
    flex-direction: row;
}

/* When badge is present, use space-between to separate badge and price */
.product-price:has(.sale-badge-footer) {
    justify-content: space-between;
}

.price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Left in RTL */
    gap: 4px;
}

.regular-price {
    font-size: 16px; /* Larger old price */
    color: #9EA6B9;
    text-decoration: line-through;
    font-weight: 500;
    line-height: 1;
    /*margin-left: 20px; !* Offset to align visually with number below *!*/
}

.sale-price {
    font-size: 20px; /* Matches large bold price */
    font-weight: 800;
    color: #2E303B;
    display: flex;
    align-items: center;
    gap: 0px;
    line-height: 1;
    flex-direction: row-reverse; /* Put Symbol (first in DOM) on Left visually */
}

.currency-symbol {
    width: auto;
    height: 22px; /* Match the height of the price text */
    object-fit: contain;
    display: none !important;
}

/* Badge Style - Pink Pill */
.sale-badge-footer {
    background: #D42E53 !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: fit-content !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

/* Hide original elements if they persist */
.sale-badge {
    display: none;
}

.add-to-cart-btn {
    display: none;
}

/* Hidden as per design image, or maybe show on hover? keeping hidden for now to match clean look */


/* ========================================
   Daily Deal - Pixel Perfect
   ======================================== */

.daily-deal-section {
    padding: 40px 0;
    background: #8B7DDB; /* Purple background for whole section */
}

.daily-deal-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr; /* Swapped: Clock first (right in RTL), Products second (left in RTL) */
    gap: 32px;
    align-items: start;
    flex-direction: row-reverse; /* RTL mirroring */
}

.daily-deal-products-area {
    position: relative; /* For absolute positioning of arrows */
    margin-left: 140px !important; /* Left margin for carousel */
}

.daily-deal-products {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 4px 0 4px;
    margin-bottom: 0 !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.daily-deal-products .product-card {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
}

.daily-deal-empty-message {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-2xl) 0 var(--spacing-2xl);
    text-align: center;
    min-height: 200px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}

.daily-deal-products:has(.daily-deal-empty-message) {
    justify-content: center;
    align-items: center;
}

.daily-deal-empty-message p {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-lighter);
    margin: 0;
}

.daily-deal-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 45% !important; /* Center vertically at 50% from top of product section */
    transform: translateY(-45%) !important; /* Perfect vertical centering */
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allow clicks to pass through container */
    z-index: 10;
    padding: 0 20px; /* Padding to allow overlap */
    gap: 15px !important; /* Gap between arrows */
}

.daily-deal-nav .nav-btn {
    width: 50px !important;
    height: 50px !important;
    background: #FFFFFF;
    border: 1px solid #EBEBEB !important;
    border-radius: 60px !important; /* Circular */
    border-width: 1px !important;
    padding: 8px !important;
    color: #2E303B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* Re-enable clicks on buttons */
    opacity: 1;
    transform: none !important; /* Remove transform to allow parent centering */
}

.daily-deal-nav .nav-btn[style*="opacity: 0"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.daily-deal-nav .nav-btn:hover {
    background: #F8F9FA;
    border-color: #D4D4D4;
}

.daily-deal-nav .nav-btn svg {
    width: 24px;
    height: 24px;
}

/* Position left arrow to overlap the last product on the right side */
.daily-deal-nav .nav-prev {
    position: absolute;
    right: -25px; /* Overlap the rightmost product */
}

/* Position right arrow to overlap the last product on the left side */
.daily-deal-nav .nav-next {
    position: absolute;
    left: -25px; /* Overlap the leftmost product */
}

.daily-deal-banner {
    background: transparent; /* Transparent since section background is purple */
    border-radius: 16px;
    padding: 12px 32px 0 32px;
    text-align: center;
    color: #FFFFFF;
    position: sticky;
    top: 100px;
}

.daily-deal-title {
    font-family: 'Javan', sans-serif;
    font-weight: 400; /* Regular weight */
    font-style: normal; /* Regular style */
    font-size: 40px !important;
    line-height: 100% !important; /* 100% line height */
    letter-spacing: 0 !important;
    text-align: center;
    margin: 0 0 8px;
    color: #FFFFFF;
}

.daily-deal-subtitle {
    font-size: 20px !important;
    margin-bottom: 24px;
    opacity: 0.9;
}

.clock-icon {
    width: 144px !important;
    height: 143px !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1.7) !important;
    margin: 0 auto 24px;
    display: block;
}

.countdown-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Gap between cards */
    background: transparent; /* No background container */
    padding: 0;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* Small gap between number and label */
}

.countdown-value {
    font-size: 20px !important;
    font-weight: 700;
    color: #2E303B; /* Black numbers */
    text-align: center;
    line-height: 1;
    font-family: 'IRANYekanX', sans-serif;
    background: #FFFFFF; /* White background box */
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.3); /* White border */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    opacity: 1 !important;
    transform: rotate(0deg) !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-label {
    display: block !important; /* Show labels */
    font-size: 10px !important; /* Very small text */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8); /* Light white text */
    text-align: center;
    line-height: 1;
    font-family: 'IRANYekanX', sans-serif;
    margin-top: 2px;
}

.countdown-separator {
    font-size: 32px !important;
    color: #FFFFFF; /* White colon dots */
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   Categories - Pixel Perfect
   ======================================== */

.categories-section {
    width: 100%;
    padding: 48px 140px; /* 140px padding from left and right */
    box-sizing: border-box;
}

.categories-title {
    font-family: 'IRANYekanX', sans-serif; /* IRANYekanXVF */
    font-weight: 700 !important;
    font-style: normal;
    font-size: 24px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    margin-bottom: 32px;
}

.categories-grid {
    display: flex;
    justify-content: space-between; /* Space items evenly */
    gap: 0;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2E303B;
    flex: 1; /* Allow items to grow equally */
}

/* Separator element between category items */
.category-separator {
    width: 1px;
    height: 60px;
    background: #DEE1E8;
    border: 1px solid #DEE1E8;
    flex-shrink: 0;
    align-self: center;
}

.category-icon {
    width: 84px !important;
    height: 84px !important;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
    overflow: visible;
    opacity: 1 !important;
    transform: rotate(0deg) !important;
    flex-shrink: 0;
}

.category-item:hover .category-icon {
    transform: scale(1.05) !important;
    background: transparent !important; /* Keep background transparent on hover */
}

.category-icon img {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px;
    max-height: 84px;
    object-fit: contain;
    display: block;
}

.category-name {
    font-family: 'IRANYekanX', sans-serif; /* IRANYekanXVF */
    font-weight: 500 !important;
    font-style: normal;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #2E303B;
    white-space: nowrap;
    margin-top: 16px;
}

/* ========================================
   Collections - Pixel Perfect
   ======================================== */

.collections-section {
    padding: 48px 0;
}

.collections-section .section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}

.collections-section .section-nav-carousel {
    display: flex;
    gap: 12px;
    margin-left: 0;
}

.collections-section .view-all-link {
    color: #2E303B;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 150ms ease;
    width: 131px;
    height: 41px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #DEE1E8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
}

.collections-section .view-all-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

.collections-section .section-nav-carousel .nav-btn {
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.collections-section .section-nav-carousel .nav-btn[style*="opacity: 0"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.sale-section .section-nav-carousel .nav-btn,
.bestsellers-section .section-nav-carousel .nav-btn,
.custom-products-section .section-nav-carousel .nav-btn {
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.sale-section .section-nav-carousel .nav-btn[style*="opacity: 0"],
.bestsellers-section .section-nav-carousel .nav-btn[style*="opacity: 0"],
.custom-products-section .section-nav-carousel .nav-btn[style*="opacity: 0"] {
    opacity: 0 !important;
    pointer-events: none !important;
}


.collections-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

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

.collections-grid {
    -webkit-overflow-scrolling: touch;
}

.collection-card {
    background: #FFFFFF !important;
    border-radius: 20px;
    padding: 24px 20px 0px 20px;
    transition: transform 150ms ease, box-shadow 150ms ease;
    border: 1px solid #EBEBEB;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    width: fit-content;
    max-width: 350px;
    flex-shrink: 0;
    justify-content: space-between;
    max-height: 470px;
    min-height: 470px;
}

.collection-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.collection-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 142px) !important;
    grid-template-rows: repeat(2, 142px) !important;
    gap: 1px !important;
    /*margin: 16px 0 0 0;*/
    border-radius: 8px;
    overflow: hidden;
    order: 2;
    justify-content: start;
    width: fit-content;
    height: fit-content;
    margin: auto;
}

.collection-products-grid img {
    width: 142px !important;
    height: 142px !important;
    object-fit: cover;
    background: #FFFFFF;
    display: block;
    border-radius: 0 !important;
    opacity: 1 !important;
}

.collection-products-grid img:nth-child(2),
.collection-products-grid img:nth-child(4) {
    border-right: 1px solid #DEE1E8;
}

.collection-products-grid img:nth-child(3),
.collection-products-grid img:nth-child(4) {
    border-top: 1px solid #DEE1E8;
}

.collection-content {
    text-align: right !important;
    display: flex;
    flex-direction: column;
    color: inherit !important;
    margin-bottom: 0;
    order: 1;
}

.collection-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    margin: 0 0 8px 0 !important;
    color: #2E303B !important;
    line-height: 1.4;
}

.collection-subtitle {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 0 0 16px 0 !important;
    color: #646970 !important;
    line-height: 1.4;
}

.collection-view-all {
    color: #2E303B !important;
    text-decoration: none;
    font-size: 16px !important;
    opacity: 0.9;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    padding: 20px;
    transition: opacity 150ms ease;
    font-weight: 500;
    text-align: center;
    width: 100%;
    order: 3;
}

.collection-view-all-icon {
    font-size: 16px;
    line-height: 1;
}

.collection-view-all:hover {
    opacity: 1;
    text-decoration: none;
}

/* ========================================
   Blog Section (خواندنی‌ها) - Pixel Perfect
   ======================================== */

.blog-section {
    padding: 48px 0;
}

.blog-section .section-header {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}

.blog-section .section-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.blog-section .view-all-link {
    color: #2E303B;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 150ms ease;
    width: 131px;
    height: 41px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #DEE1E8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
}

.blog-section .view-all-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

.blog-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

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

.blog-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    border: 1px solid #EBEBEB;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.blog-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-image {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1;
    overflow: hidden;
    background: #F5F5F5;
    border-radius: 12px 12px 0 0;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-content {
    padding: 16px;
    text-align: right;
}

.blog-title {
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #2E303B;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: #646970;
    flex-direction: row; /* RTL */
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
}

.blog-meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.blog-date,
.blog-comments {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   Mobile Promo Cards Section (2x2 Grid)
   ======================================== */

.mobile-promo-cards-section {
    display: none; /* Hidden on desktop */
    padding: 12px 0;
}

.mobile-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
}

.mobile-promo-card {
    background: #6555D3;
    border-radius: 16px;
    padding: 0;
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease;
    height: 100px;
}

.mobile-promo-card:hover {
    transform: translateY(-2px);
}

.mobile-promo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Mobile responsive styles moved to @media (max-width: 767px) block above */

	/* Footer styles moved to footer.css - removed duplicate */