/* 
 * New Home Page Styles
 * Custom CSS for tmp-homeNew.php template
 */

/* Benefits Stripe Section */
.benefits-stripe {
    background: #ffffff;
    padding: 0; /* No padding on section - background should be full */
}

/* Benefits Image Container - Enable layering */
.benefits-image {
    position: relative;
    width: 100%;
    display: inline-block;
}

/* Background Image */
.benefits-background {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Overlay Image - Positioned on top with padding */
.benefits-overlay {
    position: absolute;
    top: 30px; /* 30px top padding */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 90px) !important; /* 45px padding on each side */
    max-width: calc(1060px - 90px) !important;
    height: calc(100% - 60px) !important; /* 30px padding top and bottom */
    object-fit: contain;
    z-index: 2;
    pointer-events: none; /* Allow clicks to pass through if needed */
}
.swiper-slide {
    overflow: hidden;
}
/* Benefits Images Responsive Display */
.benefits-desktop {
    display: block; /* Show desktop images by default */
}

.benefits-mobile {
    display: none !important; /* Hide mobile images by default */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .benefits-overlay {
        top: 20px; /* Smaller top padding on mobile */
        width: calc(80% - 40px) !important; /* 20px padding on each side for mobile */
        max-width: calc(1060px - 40px) !important;
        height: calc(100% - 40px) !important; /* 20px padding top and bottom for mobile */
        object-fit: contain; /* Ensure text scales properly on mobile */
    }
    
    /* Hide desktop images on mobile */
    .benefits-desktop {
        display: none !important;
    }
    
    /* Show mobile images on mobile */
    .benefits-mobile {
        display: block !important;
    }
}


/* Override section-inner max-width for slider sections */
.best-sellers .section-inner {
    max-width: 1600px !important; /* Allow enough space for sliders */
}

/* Best Sellers Section - New Slider Layout */
.best-sellers .products-slider-container {
    position: relative;
    margin: 45px 0 0 auto; /* Right align instead of center */
    overflow: visible; /* Allow arrows to show outside */
    padding: 0 100px; /* Space for external arrows */
    max-width: 1537px; /* 1337px content (320×4 + 19×3) + 200px padding */
    width: 100%;
}

.best-sellers .products-slider {
    overflow: hidden;
    padding: 0; /* Remove internal padding since arrows are external */
    position: relative;
    margin: 0; /* Remove negative margin */
}

.best-sellers .products-slider .swiper-container {
    overflow: hidden;
    margin: 0; /* Remove internal margin */
    position: relative;
}

.best-sellers .products-slider .swiper-wrapper {
    display: flex;
}

.best-sellers .products-slider .swiper-slide {
    flex-shrink: 0;
    width: 320px !important; /* Exact width */
    max-width: 320px !important;
    min-width: 320px !important;
}

/* Force equal height for all product cards in sliders */
.best-sellers .swiper-slide .box-product {
    height: 100% !important;
    min-height: 50px !important; /* Increased minimum height */
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

.best-sellers .swiper-slide .box-product .inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center;
    position: relative;
    border: 1px solid #f1f1f6;
    background: #f6f7f9;
}

.best-sellers .swiper-slide .box-product .part-top {
    flex: 0 0 auto;
    width: 100%;
}

.best-sellers .swiper-slide .box-product .part-top .image {
    height: 447px !important;
    max-height: 447px !important;
    width: 320px !important; /* Full card width */
    max-width: 320px !important;
    overflow: hidden;
    margin: 0; /* No centering needed since it's full width */
}

.best-sellers .swiper-slide .box-product .part-top .image img {
    width: 320px !important;
    height: 447px !important;
    max-width: 320px !important;
    max-height: 447px !important;
    object-fit: contain;
}

.best-sellers .swiper-slide .box-product .part-bottom {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 15px;
    min-height: 157px; /* Ensure minimum bottom section height */
}

/* Title at top for slider cards */
.best-sellers .swiper-slide .box-product .part-bottom .title {
    flex: 0 0 auto;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

/* Price pushed to bottom for slider cards */
.best-sellers .swiper-slide .box-product .part-bottom .price {
    margin-top: auto; /* Push to bottom */
    text-align: center;
    margin-bottom: 15px;
}

.best-sellers .swiper-slide .box-product .part-bottom .price .woocommerce-Price-amount {
    font-weight: normal !important;
}

/* Buttons at bottom for slider cards */
.best-sellers .swiper-slide .box-product .part-bottom .buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.best-sellers .swiper-slide .box-product .part-bottom .button.add-to-cart {
    border-radius: 50px;
    width: 100%;
    max-width: 264px;
}

.best-sellers .swiper-slide .box-product .part-top .image img {
    width: 100%;
}

.best-sellers .swiper-slide .box-product .part-top {
    width: 100%;
}

/* Section Styles */
section.best-sellers {
    background-image: none;
    background-color: #fff;
    padding: 75px 0
}

.section-title {
    color: #23408D;
}

span.redMe {
    color: #ED1B23;
}
.best-sellers.outlet .section-title {
    font-size: 34px;
}
.best-sellers.outlet .section-subtitle {
    font-size: 59px;
    font-weight: bold;
}
.onsale.wccs-onsale-badge, .onsale {
    right: auto;
    left: 10px;
    top: 16px;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 30px;
    width: auto;
    height: auto;
}

/* Collections Section */
section.best-sellers.outlet,
section.best-sellers.collection {
    background-image: url(../images/bg-collection.png);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
}

section.best-sellers.outlet .box-product .inner,
section.best-sellers.collection .box-product .inner {
    background-color: #fff;
}

section.best-sellers.collection .box-product .part-bottom,
section.best-sellers.outlet .box-product .part-bottom {
    background-color: #fff;
}

/* Collections Slider */
.best-sellers.collection .products-slider-container {
    position: relative;
    margin: 45px 0 0 auto; /* Right align instead of center */
    overflow: visible; /* Allow arrows to show outside */
    padding: 0 100px; /* Space for external arrows */
    max-width: 1537px; /* 1337px content (320×4 + 19×3) + 200px padding */
    width: 100%;
}

.best-sellers.collection .products-slider-collection {
    overflow: hidden;
    padding: 0; /* Remove internal padding since arrows are external */
    position: relative;
    margin: 0; /* Remove negative margin */
}

.best-sellers.collection .products-slider-collection .swiper-container {
    overflow: hidden;
    margin: 0; /* Remove internal margin */
    position: relative;
}

.best-sellers.collection .products-slider-collection .swiper-wrapper {
    display: flex;
}

.best-sellers.collection .products-slider-collection .swiper-slide {
    flex-shrink: 0;
    width: 320px !important; /* Exact width */
    max-width: 320px !important;
    min-width: 320px !important;
}

/* Force equal height for Collections slider cards */
.best-sellers.collection .swiper-slide .box-product {
    height: 100% !important;
    min-height: 50px !important; /* Same as Best Sellers */
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

.best-sellers.collection .swiper-slide .box-product .inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center;
    position: relative;
    border: 1px solid #f1f1f6;
    background: #f6f7f9;
}

.best-sellers.collection .swiper-slide .box-product .part-top {
    flex: 0 0 auto;
    width: 100%;
}

.best-sellers.collection .swiper-slide .box-product .part-top .image {
    height: 447px !important; /* Fixed image height */
    max-height: 447px !important;
    width: 320px !important; /* Full card width */
    max-width: 320px !important;
    overflow: hidden;
    margin: 0; /* No centering needed since it's full width */
}

.best-sellers.collection .swiper-slide .box-product .part-top .image img {
    width: 320px !important;
    height: 447px !important;
    max-width: 320px !important;
    max-height: 447px !important;
    object-fit: contain;
}

.best-sellers.collection .swiper-slide .box-product .part-bottom {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top, not space-between */
    width: 100%;
    padding: 15px;
    min-height: 157px; /* Ensure minimum bottom section height */
}

/* Collections Navigation Arrows - External positioning */
.best-sellers.collection .swiper-button-next,
.best-sellers.collection .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    background-size: 24px 26px;
    background-repeat: no-repeat;
    background-position: center;
}

.best-sellers.collection .swiper-button-next:hover,
.best-sellers.collection .swiper-button-prev:hover {
    background-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

.best-sellers.collection .swiper-button-next {
    right: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowRight.png');
}

.best-sellers.collection .swiper-button-prev {
    left: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowLeft.png');
}

.best-sellers.collection .swiper-button-next::after,
.best-sellers.collection .swiper-button-prev::after {
    content: none; /* Remove default Swiper arrows */
}

.best-sellers.collection .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* TOP CATEGORIES Grid Layout */
.categories.layout-grid {
    background: #ffffff;
    padding: 75px 0;
}

.categories.layout-grid .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.categories.layout-grid .section-title .red-text {
    color: #ED1B23;
}

.categories.layout-grid .section-title .blue-text {
    color: #23408D;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 338px);
    gap: 16px;
    grid-template-areas: 
        "item3 item1 item2"
        "item3 item4 item4"
        "item6 item6 item5";
    margin-top: 45px;
}

.category-item {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: scale(1.02);
}

.category-item:nth-child(1) { grid-area: item1; }
.category-item:nth-child(2) { grid-area: item2; }
.category-item:nth-child(3) { grid-area: item3; }
.category-item:nth-child(4) { grid-area: item4; }
.category-item:nth-child(5) { grid-area: item5; }
.category-item:nth-child(6) { grid-area: item6; }

.category-item .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rectangle overlay on category images */
.category-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url('https://www.buycarpet.co.il/wp-content/uploads/2025/06/Rectangle-51.png');
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto;
    z-index: 1; /* Above the image, below the text */
    pointer-events: none;
}

.category-item .category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 30px;
    color: white;
    z-index: 3; /* Above the rectangle overlay */
}

.category-item .category-title {
    font-size: 25px;
    font-weight: 600;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border-bottom: 4px solid #EC1A23;
    width: max-content;
    padding-bottom: 4px;
    line-height: 29px;
}

/* Categories Mobile Responsive */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 150px);
        gap: 10px;
        grid-template-areas: 
            "item3 item3"
            "item1 item2"
            "item4 item4"
            "item5 item6";
    }
    
    .categories.layout-grid .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .category-item .category-title {
        font-size: 16px;
    }
    .best-sellers.outlet .section-subtitle {
        font-size: 44px;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 120px);
        gap: 10px;
        grid-template-areas: 
            "item1 item2"
            "item3 item4"
            "item5 item6";
    }
    
    .categories.layout-grid {
        padding: 50px 0;
    }
    
    .category-item .category-overlay {
        padding: 15px;
    }
    
    .category-item .category-title {
        font-size: 14px;
    }
}

/* Outlet Slider */
.best-sellers.outlet .products-slider-container {
    position: relative;
    margin: 45px 0 0 auto; /* Right align instead of center */
    overflow: visible; /* Allow arrows to show outside */
    padding: 0 100px; /* Space for external arrows */
    max-width: 1537px; /* 1337px content (320×4 + 19×3) + 200px padding */
    width: 100%;
}

.best-sellers.outlet .products-slider-outlet {
    overflow: hidden;
    padding: 0; /* Remove internal padding since arrows are external */
    position: relative;
    margin: 0; /* Remove negative margin */
}

.best-sellers.outlet .products-slider-outlet .swiper-container {
    overflow: hidden;
    margin: 0; /* Remove internal margin */
    position: relative;
}

.best-sellers.outlet .products-slider-outlet .swiper-wrapper {
    display: flex;
}

.best-sellers.outlet .products-slider-outlet .swiper-slide {
    flex-shrink: 0;
    width: 320px !important; /* Exact width */
    max-width: 320px !important;
    min-width: 320px !important;
}

/* Force equal height for Outlet slider cards */
.best-sellers.outlet .swiper-slide .box-product {
    height: 100% !important;
    min-height: 50px !important; /* Same as Best Sellers */
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

.best-sellers.outlet .swiper-slide .box-product .inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center;
    position: relative;
    border: 1px solid #f1f1f6;
    background: #f6f7f9;
}

.best-sellers.outlet .swiper-slide .box-product .part-top {
    flex: 0 0 auto;
    width: 100%;
}

.best-sellers.outlet .swiper-slide .box-product .part-top .image {
    height: 447px !important; /* Fixed image height */
    max-height: 447px !important;
    width: 320px !important; /* Full card width */
    max-width: 320px !important;
    overflow: hidden;
    margin: 0; /* No centering needed since it's full width */
}

.best-sellers.outlet .swiper-slide .box-product .part-top .image img {
    width: 320px !important;
    height: 447px !important;
    max-width: 320px !important;
    max-height: 447px !important;
    object-fit: contain;
}

.best-sellers.outlet .swiper-slide .box-product .part-bottom {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top, not space-between */
    width: 100%;
    padding: 15px;
    min-height: 157px; /* Ensure minimum bottom section height */
}

/* Title at top for Outlet slider cards */
.best-sellers.outlet .swiper-slide .box-product .part-bottom .title {
    flex: 0 0 auto;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

/* Price pushed to bottom for Outlet slider cards */
.best-sellers.outlet .swiper-slide .box-product .part-bottom .price {
    margin-top: auto; /* Push to bottom */
    text-align: center;
    margin-bottom: 15px;
}

.best-sellers.outlet .swiper-slide .box-product .part-bottom .price .woocommerce-Price-amount {
    font-weight: normal !important;
}

/* Buttons at bottom for Outlet slider cards */
.best-sellers.outlet .swiper-slide .box-product .part-bottom .buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.best-sellers.outlet .swiper-slide .box-product .part-bottom .button.add-to-cart {
    border-radius: 50px;
    width: 100%;
    max-width: 264px;
}

.best-sellers.outlet .swiper-slide .box-product .part-top .image img {
    width: 100%;
}

.best-sellers.outlet .swiper-slide .box-product .part-top {
    width: 100%;
}

.best-sellers.outlet .swiper-slide .box-product .part-top .image {
    height: 447px;
}

/* Outlet Navigation Arrows - External positioning */
.best-sellers.outlet .swiper-button-next,
.best-sellers.outlet .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    background-size: 24px 26px; /* Smaller arrow images for mobile */
    background-repeat: no-repeat;
    background-position: center;
}

.best-sellers.outlet .swiper-button-next:hover,
.best-sellers.outlet .swiper-button-prev:hover {
    background-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

.best-sellers.outlet .swiper-button-next {
    right: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowRight.png');
}

.best-sellers.outlet .swiper-button-prev {
    left: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowLeft.png');
}

.best-sellers.outlet .swiper-button-next::after,
.best-sellers.outlet .swiper-button-prev::after {
    content: none; /* Remove default Swiper arrows */
}

.best-sellers.outlet .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* External Navigation Arrows - positioned 50px outside slider */
.products-slider-container .swiper-button-next,
.products-slider-container .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    background-size: 24px 26px;
    background-repeat: no-repeat;
    background-position: center;
}

.products-slider-container .swiper-button-next:hover,
.products-slider-container .swiper-button-prev:hover {
    background-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

/* Position arrows relative to the slider content, not container */
.products-slider-container .swiper-button-next {
    right: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowRight.png');
}

.products-slider-container .swiper-button-prev {
    left: 20px; /* Closer to slider edge */
    background-image: url('../images/arrowLeft.png');
}

.products-slider-container .swiper-button-next::after,
.products-slider-container .swiper-button-prev::after {
    content: none; /* Remove default Swiper arrows */
}

/* Hide arrows when not needed */
.products-slider-container .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.best-sellers .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount,
.best-sellers.collection .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount ,
.best-sellers.outlet .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount  {
    font-weight: bold !important;
}
.best-sellers .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi,
.best-sellers.collection .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi,
.best-sellers.outlet .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi {
    font-weight: normal !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* MOBILE SECTION-INNER - REMOVE ALL PADDING */
    .best-sellers .section-inner,
    .best-sellers.collection .section-inner,
    .best-sellers.outlet .section-inner {
        padding: 0 !important;
    }
    
    /* MOBILE TITLE ARROWS - POSITIONED AROUND SECTION TITLES */
    .best-sellers .section-inner,
    .best-sellers.collection .section-inner,
    .best-sellers.outlet .section-inner {
        position: relative;
    }
    
    .title-with-arrows {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }
    
    /* Keep original section-title styling intact */
    .title-with-arrows .section-title {
        margin-bottom: 0 !important; /* Remove bottom margin since wrapper handles it */
    }
    
    /* Mobile Title Arrow Elements */
    .mobile-title-arrow {
        width: 24px;
        height: 26px;
        background-size: 24px 26px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        border: none;
        background-color: transparent;
        padding: 0;
        display: none; /* Hidden by default, shown via JavaScript */
    }
    
    .mobile-title-arrow.left {
        background-image: url('../images/arrowLeft.png');
        order: 3; /* Move left arrow to right side */
    }
    
    .mobile-title-arrow.right {
        background-image: url('../images/arrowRight.png');
        order: 1; /* Move right arrow to left side */
    }
    
    /* Title should stay in the middle */
    .title-with-arrows .section-title {
        order: 2; /* Keep title in the center */
    }
    
    .mobile-title-arrow:hover {
        transform: scale(1.1);
    }
    
    /* Ensure arrows are properly visible when shown */
    .mobile-title-arrow[style*="display: block"],
    .mobile-title-arrow[style*="display: inline-block"] {
        display: inline-block !important;
    }
    
    /* MOBILE SLIDER CONTAINERS - LEFT ALIGNED WITH DYNAMIC PADDING */
    .best-sellers .products-slider-container,
    .best-sellers.collection .products-slider-container,
    .best-sellers.outlet .products-slider-container {
        padding: 0 0 0 20px !important; /* 20px left, 0px right for initial peek effect */
        overflow: hidden !important;
        margin: 45px 0 0 0 !important; /* LEFT ALIGNED: 0 instead of auto */
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* MOBILE SLIDERS - LEFT ALIGNED WITH FORCED LTR DIRECTION */
    .best-sellers .products-slider,
    .best-sellers.collection .products-slider-collection,
    .best-sellers.outlet .products-slider-outlet {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        direction: ltr !important; /* Force left-to-right direction */
    }
    
    /* MOBILE SWIPER CONTAINERS - FORCE LTR */
    .best-sellers .products-slider .swiper-container,
    .best-sellers.collection .products-slider-collection .swiper-container,
    .best-sellers.outlet .products-slider-outlet .swiper-container {
        overflow: visible !important;
        margin: 0 !important;
        position: relative !important;
        width: 100% !important;
        direction: ltr !important; /* Force left-to-right direction */
    }

    /* MOBILE SWIPER WRAPPERS - LEFT ALIGNED WITH GAP AND END PADDING */
    .best-sellers .products-slider .swiper-wrapper,
    .best-sellers.collection .products-slider-collection .swiper-wrapper,
    .best-sellers.outlet .products-slider-outlet .swiper-wrapper {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 9px !important; /* 9px gap between cards */
        padding-left: 0 !important;
        padding-right: 20px !important; /* 20px right padding for last card spacing */
        direction: ltr !important; /* Force left-to-right direction */
        flex-direction: row !important; /* Ensure left-to-right flow */
    }
    
    /* MOBILE SLIDES - FIXED 156px WIDTH FOR EXACT DESIGN */
    .best-sellers .products-slider .swiper-slide,
    .best-sellers.collection .products-slider-collection .swiper-slide,
    .best-sellers.outlet .products-slider-outlet .swiper-slide {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
        flex: 0 0 156px !important;
        flex-shrink: 0 !important;
        margin-right: 0 !important; /* Gap handled by wrapper */
    }
    
    /* MOBILE PRODUCT CARDS - MATCH SLIDE WIDTH */
    .best-sellers .swiper-slide .box-product,
    .best-sellers.collection .swiper-slide .box-product,
    .best-sellers.outlet .swiper-slide .box-product {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* MOBILE PRODUCT IMAGES - 100% WIDTH, 224px HEIGHT */
    .best-sellers .swiper-slide .box-product .part-top .image,
    .best-sellers.collection .swiper-slide .box-product .part-top .image,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 224px !important;
        min-height: 224px !important;
        max-height: 224px !important;
        overflow: hidden !important;
    }
    
    /* MOBILE PRODUCT IMAGES - IMG TAG 100% WIDTH, 224px HEIGHT */
    .best-sellers .swiper-slide .box-product .part-top .image img,
    .best-sellers.collection .swiper-slide .box-product .part-top .image img,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image img {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 224px !important;
        min-height: 224px !important;
        max-height: 224px !important;
        object-fit: cover !important;
    }
    
    /* Mobile layout for part-bottom elements */
    .best-sellers .swiper-slide .box-product .part-bottom .title,
    .best-sellers.collection .swiper-slide .box-product .part-bottom .title,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom .title {
        flex: 0 0 auto;
        margin-bottom: 8px;
        text-align: center;
        width: 100%;
        font-size: 12px; /* Smaller text for narrow cards */
        line-height: 1.2;
    }
    
    .best-sellers .swiper-slide .box-product .part-bottom .price,
    .best-sellers.collection .swiper-slide .box-product .part-bottom .price,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom .price {
        margin-top: auto;
        text-align: center;
        margin-bottom: 16px;
        font-size: 14px; /* Appropriate size for mobile cards */
    }
    
    .best-sellers .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount,
    .best-sellers.collection .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount ,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom .price ins .woocommerce-Price-amount  {
        font-weight: bold !important;
    }
    .best-sellers .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi,
    .best-sellers.collection .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom .price del .woocommerce-Price-amount bdi {
        font-weight: normal !important;
    }
    
    /* Adjust button for mobile cards */
    .best-sellers .swiper-slide .box-product .part-bottom .button.add-to-cart,
    .best-sellers.collection .swiper-slide .box-product .part-bottom .button.add-to-cart,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom .button.add-to-cart {
        font-size: 11px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        max-width: 140px !important;
    }
    
    /* HIDE ALL ORIGINAL ARROWS ON MOBILE */
    .products-slider-container .swiper-button-next,
    .products-slider-container .swiper-button-prev,
    .best-sellers.collection .swiper-button-next,
    .best-sellers.collection .swiper-button-prev,
    .best-sellers.outlet .swiper-button-next,
    .best-sellers.outlet .swiper-button-prev {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* VERY SMALL MOBILE - SAME AS 768px */
    .best-sellers .section-inner,
    .best-sellers.collection .section-inner,
    .best-sellers.outlet .section-inner {
        padding: 0 !important;
    }
    
    /* MOBILE TITLE ARROWS - POSITIONED AROUND SECTION TITLES FOR SMALL SCREENS */
    .title-with-arrows {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important; /* Smaller gap for small screens */
        margin-bottom: 25px !important;
    }
    
    /* Keep original section-title styling intact for small screens */
    .title-with-arrows .section-title {
        margin-bottom: 0 !important; /* Remove bottom margin since wrapper handles it */
    }
    
    /* Smaller arrows for very small screens */
    .mobile-title-arrow {
        width: 20px !important;
        height: 22px !important;
        background-size: 20px 22px !important;
    }
    
    .best-sellers .products-slider-container,
    .best-sellers.collection .products-slider-container,
    .best-sellers.outlet .products-slider-container {
        padding: 0 0 0 20px !important; /* 20px left, 0px right for initial peek effect */
        overflow: hidden !important;
        margin: 45px 0 0 0 !important; /* LEFT ALIGNED: 0 instead of auto */
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* VERY SMALL MOBILE SLIDERS - FORCE LTR */
    .best-sellers .products-slider,
    .best-sellers.collection .products-slider-collection,
    .best-sellers.outlet .products-slider-outlet {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        direction: ltr !important; /* Force left-to-right direction */
    }
    
    /* VERY SMALL MOBILE SWIPER CONTAINERS - FORCE LTR */
    .best-sellers .products-slider .swiper-container,
    .best-sellers.collection .products-slider-collection .swiper-container,
    .best-sellers.outlet .products-slider-outlet .swiper-container {
        overflow: visible !important;
        margin: 0 !important;
        position: relative !important;
        width: 100% !important;
        direction: ltr !important; /* Force left-to-right direction */
    }
    
    /* VERY SMALL MOBILE SLIDES - MAINTAIN 156px WIDTH */
    .best-sellers .products-slider .swiper-slide,
    .best-sellers.collection .products-slider-collection .swiper-slide,
    .best-sellers.outlet .products-slider-outlet .swiper-slide {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
        flex: 0 0 156px !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    
    /* VERY SMALL MOBILE - MATCH SLIDE WIDTH */
    .best-sellers .swiper-slide .box-product,
    .best-sellers.collection .swiper-slide .box-product,
    .best-sellers.outlet .swiper-slide .box-product {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* HIDE ALL ORIGINAL ARROWS ON VERY SMALL MOBILE */
    .products-slider-container .swiper-button-next,
    .products-slider-container .swiper-button-prev,
    .best-sellers.collection .swiper-button-next,
    .best-sellers.collection .swiper-button-prev,
    .best-sellers.outlet .swiper-button-next,
    .best-sellers.outlet .swiper-button-prev {
        display: none !important;
    }
}

/* Product Box General Styles - Desktop only */
@media (min-width: 769px) {
    .box-product {
        max-width: 320px;
        width: 320px; /* Fixed width for consistency */
        position: relative;
        border: 1px solid #f1f1f6;
        background: #f6f7f9;
    }
}

/* Mobile Product Box - Auto sizing */
@media (max-width: 768px) {
    .box-product {
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        position: relative;
        border: 1px solid #f1f1f6;
        background: #f6f7f9;
    }
}

.box-product .inner {
    position: relative;
    border: 1px solid #f1f1f6;
    background: #f6f7f9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* FIXED PART-BOTTOM LAYOUT - Consistent spacing regardless of title length */
.box-product .part-bottom {
    padding: 15px;
    padding-bottom: 15px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top */
    align-items: center;
    flex: 1;
    width: 100%;
    min-height: 200px; /* Desktop minimum height */
}

/* Title at the top - no flex grow */
.box-product .part-bottom .title {
    flex: 0 0 auto; /* Don't grow, don't shrink */
    margin-bottom: 15px; /* Fixed spacing after title */
    text-align: center;
    width: 100%;
}

/* Price pushed to bottom area - normal font weight */
.box-product .part-bottom .price {
    margin-top: auto; /* This pushes price to bottom */
    text-align: center;
    margin-bottom: 15px; /* Fixed space between price and buttons */
}

.box-product .part-bottom .price .woocommerce-Price-amount {
    font-weight: normal !important;
}

/* Buttons always at bottom with no extra spacing */
.box-product .part-bottom .buttons {
    position: relative; /* Remove absolute positioning */
    padding-top: 0; /* Remove top padding */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0; /* No margin since price handles spacing */
}

.box-product .part-bottom .button.add-to-cart {
    border-radius: 50px;
    width: 100%;
    max-width: 264px;
}

.box-product .part-top .image img {
    width: 100%;
}

.box-product .part-top {
    width: 100%;
}

/* Desktop only - fixed dimensions */
@media (min-width: 769px) {
    .box-product .part-top .image {
        height: 447px;
        max-height: 447px;
        width: 320px; /* Full card width */
        max-width: 320px;
        overflow: hidden;
        margin: 0; /* No centering needed since it's full width */
    }

    .box-product .part-top .image img {
        width: 320px;
        height: 447px;
        max-width: 320px;
        max-height: 447px;
        object-fit: cover;
    }
}

/* Title at top for Collections slider cards */
.best-sellers.collection .swiper-slide .box-product .part-bottom .title {
    flex: 0 0 auto;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

/* Price pushed to bottom for Collections slider cards */
.best-sellers.collection .swiper-slide .box-product .part-bottom .price {
    margin-top: auto; /* Push to bottom */
    text-align: center;
    margin-bottom: 15px;
}


/* Buttons at bottom for Collections slider cards */
.best-sellers.collection .swiper-slide .box-product .part-bottom .buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.best-sellers.collection .swiper-slide .box-product .part-bottom .button.add-to-cart {
    border-radius: 50px;
    width: 100%;
    max-width: 264px;
}

/* BADGE SYSTEM - Best Sellers, Collections, and Outlet */

/* Best Sellers: "Best Seller" badge on left + onsale on right */
.best-sellers .box-product .part-top::before {
    content: "Best\ASeller";
    position: absolute;
    top: 16px;
    left: 10px;
    background: #283582;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 30px;
    z-index: 10;
    white-space: pre;
    text-align: center;
    line-height: 1.2;
}

/* Collections: "New" badge on left + onsale on right */
.best-sellers.collection .box-product .part-top::before {
    content: "New";
    position: absolute;
    top: 16px;
    left: 10px;
    background: #283582;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 30px;
    z-index: 10;
}

/* Outlet: "Outlet" badge on left + onsale on right */
.best-sellers.outlet .box-product .part-top::before {
    content: "Outlet";
    position: absolute;
    top: 16px;
    left: 10px;
    background: #283582;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 30px;
    z-index: 10;
}

/* Onsale badges positioned on the right for Best Sellers and Collections */
.best-sellers .onsale.wccs-onsale-badge, 
.best-sellers .onsale,
.best-sellers.collection .onsale.wccs-onsale-badge, 
.best-sellers.collection .onsale {
    right: 10px !important;
    left: auto !important;
    top: 16px;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 30px;
    width: auto;
    height: auto;
    z-index: 10;
}

/* Outlet moves onsale to the right (since outlet badge is now on left) */
.best-sellers.outlet .onsale.wccs-onsale-badge, 
.best-sellers.outlet .onsale {
    right: 10px !important;
    left: auto !important;
    top: 16px;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 30px;
    width: auto;
    height: auto;
    z-index: 10;
}

/* Mobile image sizing - FIXED SIZING FOR 2.5 PRODUCTS */
@media (max-width: 768px) {
    /* Fixed sizing for tablet - consistent 40% width cards */
    .best-sellers .swiper-slide .box-product,
    .best-sellers.collection .swiper-slide .box-product,
    .best-sellers.outlet .swiper-slide .box-product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .best-sellers .swiper-slide .box-product .part-top .image,
    .best-sellers.collection .swiper-slide .box-product .part-top .image,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        margin: 0;
    }
    
    .best-sellers .swiper-slide .box-product .part-top .image img,
    .best-sellers.collection .swiper-slide .box-product .part-top .image img,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 190px !important;
        object-fit: cover !important;
    }
    
    /* Mobile .part-bottom padding - 12px instead of 15px */
    .best-sellers .swiper-slide .box-product .part-bottom,
    .best-sellers.collection .swiper-slide .box-product .part-bottom,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom {
        padding: 12px !important;
    }
    
    /* Mobile badge padding - 6px 8px */
    .best-sellers .box-product .part-top::before,
    .best-sellers.collection .box-product .part-top::before,
    .best-sellers.outlet .box-product .part-top::before {
        padding: 6px 8px !important;
    }
    
    .best-sellers .onsale.wccs-onsale-badge, 
    .best-sellers .onsale,
    .best-sellers.collection .onsale.wccs-onsale-badge, 
    .best-sellers.collection .onsale,
    .best-sellers.outlet .onsale.wccs-onsale-badge, 
    .best-sellers.outlet .onsale {
        padding: 6px 8px !important;
    }
}

@media (max-width: 480px) {
    /* Fixed sizing for small mobile - consistent 40% width cards */
    .best-sellers .swiper-slide .box-product,
    .best-sellers.collection .swiper-slide .box-product,
    .best-sellers.outlet .swiper-slide .box-product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .best-sellers .swiper-slide .box-product .part-top .image,
    .best-sellers.collection .swiper-slide .box-product .part-top .image,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        margin: 0;
    }
    
    .best-sellers .swiper-slide .box-product .part-top .image img,
    .best-sellers.collection .swiper-slide .box-product .part-top .image img,
    .best-sellers.outlet .swiper-slide .box-product .part-top .image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 190px !important;
        object-fit: contain !important;
    }
    
    /* Mobile .part-bottom padding - 12px instead of 15px */
    .best-sellers .swiper-slide .box-product .part-bottom,
    .best-sellers.collection .swiper-slide .box-product .part-bottom,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom {
        padding: 9px 14px 13px !important;
    }
    
    /* Mobile badge padding - 6px 8px */
    .best-sellers .box-product .part-top::before,
    .best-sellers.collection .box-product .part-top::before,
    .best-sellers.outlet .box-product .part-top::before {
        padding: 6px 8px !important;
    }
    
    .best-sellers .onsale.wccs-onsale-badge, 
    .best-sellers .onsale,
    .best-sellers.collection .onsale.wccs-onsale-badge, 
    .best-sellers.collection .onsale,
    .best-sellers.outlet .onsale.wccs-onsale-badge, 
    .best-sellers.outlet .onsale {
        padding: 6px 8px !important;
    }
}

/* =====================================================
   BANNER SECTION - Video Background with Overlay Text
   ===================================================== */

.banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 600px; /* Fixed height for desktop */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video Background */
.banner video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
}

/* Banner Content Overlay */
.banner .banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 800px;
}

/* Banner Title */
.banner .banner-title {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 39px;
    line-height: 1;
    margin-bottom: 0;
    color: #fff;
}

/* Banner Subtitle */
.banner .banner-subtitle {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 49px;
    line-height: 1;
    margin-bottom: 34px;
    color: #fff;
}

/* Banner Button */
.banner .banner-button {
    display: inline-block;
    background: linear-gradient(135deg, #ED1B23 0%, #e20714 100%);
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-size: 18px;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(237, 27, 35, 0.3);
}

.banner .banner-button:hover {
    background: linear-gradient(135deg, #d91621 0%, #c70613 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 27, 35, 0.4);
    color: #fff;
}

/* Optional overlay for better text readability */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    z-index: 2;
}

/* Footer Part-Top Override */
footer .part-top {
    padding-bottom: 40px !important;
}

/* Footer Payment Images */
footer .part-top .payment-methods {
    text-align: center;
    margin-top: 30px;
}

footer .part-top .payment-methods img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Desktop payment image - shown by default */
footer .part-top .payment-methods .payment-desktop {
    display: block;
}

/* Mobile payment image - hidden by default */
footer .part-top .payment-methods .payment-mobile {
    display: none;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .banner {
        height: 500px; /* Smaller height for mobile */
    }
    
    /* Center crop video on mobile */
    .banner video {
        object-position: center center;
        /* You might want to adjust these values based on your video content */
        transform: translate(-50%, -50%) scale(1.2);
    }
    
    .banner .banner-content {
        width: 95%;
        padding: 0 20px;
    }
    
    .banner .banner-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .banner .banner-subtitle {
        font-size: 36px;
        margin-bottom: 25px;
    }
    
    .banner .banner-button {
        font-size: 16px;
        padding: 12px 30px;
    }
    
    /* Mobile footer payment images */
    footer .part-top .payment-methods {
        margin-top: 20px;
    }
    
    /* Hide desktop payment image on mobile */
    footer .part-top .payment-methods .payment-desktop {
        display: none !important;
    }
    
    /* Show mobile payment image on mobile */
    footer .part-top .payment-methods .payment-mobile {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .banner {
        height: 400px; /* Even smaller for very small screens */
    }
    
    .banner .banner-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .banner .banner-subtitle {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .banner .banner-button {
        font-size: 14px;
        padding: 10px 25px;
    }
    
    /* Small mobile footer payment images */
    footer .part-top .payment-methods {
        margin-top: 15px;
    }
    
    /* Hide desktop payment image on small mobile */
    footer .part-top .payment-methods .payment-desktop {
        display: none !important;
    }
    
    /* Show mobile payment image on small mobile */
    footer .part-top .payment-methods .payment-mobile {
        display: block !important;
        max-width: 272px;
    }
}

/* Ensure video is accessible and properly loaded */
.banner video {
    background: #000; /* Fallback color while video loads */
}

/* If you want to add a play/pause button (optional) */
.banner .video-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 4;
}

.banner .video-controls button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.banner .video-controls button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* MIN-HEIGHT FOR ALL SLIDERS - Desktop */
.best-sellers .swiper-slide .box-product .part-bottom,
.best-sellers.collection .swiper-slide .box-product .part-bottom,
.best-sellers.outlet .swiper-slide .box-product .part-bottom {
    min-height: 200px; /* Desktop minimum height */
}

/* MIN-HEIGHT FOR ALL SLIDERS - Mobile */
@media (max-width: 768px) {
    .box-product .part-bottom,
    .best-sellers .swiper-slide .box-product .part-bottom,
    .best-sellers.collection .swiper-slide .box-product .part-bottom,
    .best-sellers.outlet .swiper-slide .box-product .part-bottom {
        min-height: 157px; /* Mobile minimum height */
    }
}