/*==========================================================
    SEAN B SHOP MARKETPLACE HOMEPAGE
    PROFESSIONAL JUMIA STYLE
    PART 1
    GLOBAL + HERO SYSTEM
==========================================================*/



/*==========================================================
    GLOBAL RESET
==========================================================*/


.homepage{

    background:#f6f7fb;

    overflow:hidden;

    padding-top:82px; /* closer to fixed header */

}



.homepage *,
.homepage *::before,
.homepage *::after{

    box-sizing:border-box;

}



.homepage a{

    text-decoration:none;

}



.homepage img{

    max-width:100%;

    display:block;

}



.homepage .container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 20px;

}






/*==========================================================
    SECTION DEFAULTS
==========================================================*/


.section{

    padding:40px 0;

}



.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:22px;

}



.section-header h2{

    margin:5px 0;

    color:#0b1f3a;

    font-size:1.45rem;

    font-weight:800;

}



.section-header p{

    margin:0;

    color:#64748b;

    font-size:.85rem;

}



.section-tag{

    color:#e60000;

    font-size:.7rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.view-all{

    color:#e60000;

    font-size:.85rem;

    font-weight:700;

}






/*==========================================================
    MARKETPLACE HERO
==========================================================*/


.marketplace-hero{

    padding:18px 0 25px;

}





.hero-layout{

    display:grid;

    grid-template-columns:

    230px

    minmax(0,1fr)

    210px;

    gap:18px;

    align-items:stretch;

}








/*==========================================================
    CATEGORY SIDEBAR
==========================================================*/


.hero-sidebar{

    background:#ffffff;

    border-radius:16px;

    border:1px solid #e5e7eb;

    overflow:hidden;

}



.sidebar-title{

    background:#0b1f3a;

    color:#ffffff;

    height:50px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 18px;

    font-size:.9rem;

    font-weight:800;

}



.hero-sidebar ul{

    list-style:none;

    margin:0;

    padding:8px 0;

}



.hero-sidebar li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 15px;

    font-size:.82rem;

    transition:.25s ease;

}



.hero-sidebar li:hover{

    background:#f1f5f9;

}



.hero-sidebar li i{

    width:20px;

    color:#e60000;

}



.hero-sidebar a{

    color:#334155;

}



.hero-sidebar a:hover{

    color:#e60000;

}






/*==========================================================
    HERO SLIDER
==========================================================*/


.market-slider{

    position:relative;

    height:360px;

    border-radius:18px;

    overflow:hidden;

    background:#0b1f3a;

    box-shadow:

    0 12px 30px rgba(0,0,0,.12);

}



.slider-track{

    height:100%;

    width:300%;

    display:flex;

    animation:marketSlide 18s infinite;

}



.market-slide{

    width:33.333%;

    height:100%;

    position:relative;

    flex-shrink:0;

}



.market-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}






/*==========================================================
    SLIDE OVERLAY
==========================================================*/


.slide-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(11,31,58,.88),

        rgba(11,31,58,.45),

        rgba(11,31,58,.12)

    );

}





/*==========================================================
    SLIDE CONTENT
==========================================================*/


.slide-content{

    position:absolute;

    z-index:3;

    left:40px;

    top:50%;

    transform:translateY(-50%);

    max-width:430px;

}



.slide-content span{

    display:inline-flex;

    background:#e60000;

    color:#ffffff;

    padding:6px 14px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:800;

}



.slide-content h1{

    margin:15px 0;

    color:#ffffff;

    font-size:clamp(1.8rem,3vw,2.6rem);

    line-height:1.15;

    font-weight:900;

}



.slide-content p{

    color:#f8fafc;

    font-size:.95rem;

    line-height:1.6;

    margin-bottom:20px;

}



.slide-content a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#e60000;

    color:#ffffff;

    padding:12px 28px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:800;

    transition:.3s;

}



.slide-content a:hover{

    background:#b80000;

    transform:translateY(-2px);

}







/*==========================================================
    SLIDER ANIMATION
==========================================================*/


@keyframes marketSlide{


0%,
30%{

transform:translateX(0);

}



33%,
63%{

transform:translateX(-33.333%);

}



66%,
96%{

transform:translateX(-66.666%);

}



100%{

transform:translateX(0);

}


}







/*==========================================================
    HERO PROMO CARDS
==========================================================*/


.hero-promos{

    display:flex;

    flex-direction:column;

    gap:18px;

}





.promo-card{

    background:#ffffff;

    border-radius:16px;

    min-height:170px;

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:12px;

    border:1px solid #e5e7eb;

    box-shadow:

    0 8px 20px rgba(0,0,0,.06);

    transition:.3s ease;

}



.promo-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 30px rgba(0,0,0,.12);

}




.promo-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef3ff;

}



.promo-icon i{

    color:#0b1f3a;

    font-size:22px;

}



.promo-card span{

    color:#e60000;

    font-size:.7rem;

    font-weight:800;

    text-transform:uppercase;

}



.promo-card h3{

    margin:5px 0;

    color:#0b1f3a;

    font-size:1rem;

    font-weight:900;

}



.promo-card p{

    margin:0;

    color:#64748b;

    font-size:.82rem;

}






/*==========================================================
    RED PROMO CARD
==========================================================*/


.promo-danger{

    background:

    linear-gradient(

    135deg,

    #e60000,

    #a90000

    );



    border:none;

}



.promo-danger span,
.promo-danger h3,
.promo-danger p{

    color:#ffffff;

}



.promo-danger .promo-icon{

    background:rgba(255,255,255,.18);

}



.promo-danger .promo-icon i{

    color:#ffffff;

}






/*==========================================================
    TABLET
==========================================================*/


@media(max-width:1200px){


.hero-layout{

    grid-template-columns:220px 1fr;

}



.hero-promos{

    display:none;

}



.market-slider{

    height:340px;

}


}






/*==========================================================
    MOBILE
==========================================================*/


@media(max-width:992px){


.homepage{

    padding-top:70px;

}



.hero-layout{

    grid-template-columns:1fr;

}



.hero-sidebar{

    display:none;

}



.market-slider{

    height:280px;

}



.slide-content{

    left:25px;

    max-width:300px;

}



.slide-content h1{

    font-size:1.7rem;

}


}



@media(max-width:600px){


.marketplace-hero{

    padding-top:10px;

}



.market-slider{

    height:240px;

    border-radius:14px;

}



.slide-content{

    left:18px;

}



.slide-content h1{

    font-size:1.35rem;

}



.slide-content p{

    font-size:.78rem;

}



.slide-content a{

    padding:10px 20px;

}


}
/*==========================================================
    PART 2
    TRUST BAR + CATEGORIES + DEALS + PRODUCTS
==========================================================*/






/*==========================================================
    MARKETPLACE TRUST BAR
==========================================================*/


.trust-bar{

    background:#ffffff;

    padding:25px 0;

    border-top:1px solid #e5e7eb;

    border-bottom:1px solid #e5e7eb;

}



.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}



.trust-item{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:15px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:14px;

    transition:.3s ease;

}



.trust-item:hover{

    transform:translateY(-5px);

    box-shadow:

    0 12px 25px rgba(0,0,0,.08);

}



.trust-icon{

    width:50px;

    height:50px;

    flex-shrink:0;

    border-radius:50%;

    background:#eef3ff;

    display:flex;

    align-items:center;

    justify-content:center;

}



.trust-icon i{

    color:#0b1f3a;

    font-size:21px;

}



.trust-content h4{

    margin:0 0 4px;

    color:#0b1f3a;

    font-size:.9rem;

    font-weight:800;

}



.trust-content p{

    margin:0;

    color:#64748b;

    font-size:.75rem;

}







/*==========================================================
    CATEGORIES SECTION
==========================================================*/


.categories-section{

    padding:35px 0;

}



.category-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:15px;

}





.category-card{

    background:#ffffff;

    border-radius:16px;

    padding:15px 10px;

    border:1px solid #e5e7eb;

    text-align:center;

    transition:.3s ease;

}



.category-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 12px 28px rgba(0,0,0,.10);

    border-color:#0b1f3a;

}



.category-image{

    height:90px;

    border-radius:14px;

    background:#f8fafc;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;

}



.category-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.category-image i{

    font-size:32px;

    color:#0b1f3a;

}



.category-card h3{

    margin:0;

    color:#111827;

    font-size:.85rem;

    font-weight:700;

}



.category-card span{

    display:block;

    margin-top:8px;

    color:#e60000;

    font-size:.72rem;

    font-weight:700;

}









/*==========================================================
    FLASH DEALS
==========================================================*/


.deals-section{

    background:#ffffff;

    padding:35px 0;

}





.deal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}





.deal-header h2{

    margin:5px 0 0;

    color:#0b1f3a;

    font-size:1.45rem;

    font-weight:900;

}






.timer{

    display:flex;

    gap:8px;

}





.timer div{

    min-width:55px;

    padding:8px 10px;

    border-radius:10px;

    background:#0b1f3a;

    color:#ffffff;

    text-align:center;

    font-size:.9rem;

    font-weight:800;

}





.timer small{

    display:block;

    font-size:.55rem;

    font-weight:500;

    margin-top:2px;

}








/*==========================================================
    PRODUCT GRID
==========================================================*/


.product-grid,
.horizontal-products{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:15px;

}







.product-card{

    background:#ffffff;

    border-radius:15px;

    border:1px solid #e5e7eb;

    overflow:hidden;

    transition:.3s ease;

    position:relative;

}



.product-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 15px 30px rgba(0,0,0,.12);

}








/* PRODUCT IMAGE */


.product-image{

    height:170px;

    position:relative;

    background:#f8fafc;

    overflow:hidden;

}



.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:10px;

}







.discount{

    position:absolute;

    top:10px;

    left:10px;

    background:#e60000;

    color:#ffffff;

    padding:5px 9px;

    border-radius:20px;

    font-size:.7rem;

    font-weight:800;

}







.wishlist{

    position:absolute;

    top:10px;

    right:10px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}



.wishlist i{

    color:#e60000;

}







/* PRODUCT BODY */


.product-body{

    padding:14px;

}



.product-body h3{

    color:#111827;

    font-size:.85rem;

    font-weight:700;

    line-height:1.4;

    height:40px;

    overflow:hidden;

    margin:0 0 8px;

}





.rating{

    color:#f59e0b;

    font-size:.75rem;

    margin-bottom:8px;

}



.product-body strong{

    display:block;

    color:#e60000;

    font-size:1rem;

    font-weight:900;

}







.cart-btn{

    width:100%;

    margin-top:12px;

    padding:10px;

    border:none;

    border-radius:8px;

    background:#0b1f3a;

    color:#ffffff;

    font-size:.8rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}



.cart-btn:hover{

    background:#e60000;

}









/*==========================================================
    RESPONSIVE
==========================================================*/


@media(max-width:1200px){


.category-grid{

    grid-template-columns:repeat(4,1fr);

}



.product-grid,
.horizontal-products{

    grid-template-columns:repeat(4,1fr);

}



}






@media(max-width:992px){


.trust-grid{

    grid-template-columns:repeat(2,1fr);

}



.product-grid,
.horizontal-products{

    grid-template-columns:repeat(3,1fr);

}



}







@media(max-width:600px){


.trust-grid{

    grid-template-columns:1fr;

}



.category-grid{

    grid-template-columns:repeat(3,1fr);

}



.product-grid,
.horizontal-products{

    grid-template-columns:repeat(2,1fr);

}



.deal-header{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



.product-image{

    height:140px;

}



}







@media(max-width:400px){


.category-grid{

    grid-template-columns:repeat(2,1fr);

}



.product-grid,
.horizontal-products{

    grid-template-columns:1fr;

}



}
/*==========================================================
    POPULAR BRANDS SECTION
==========================================================*/


.brands-section{

    background:#f6f7fb;

    padding:60px 0 90px;

}



.brands-section .section-header{

    margin-bottom:30px;

}




.brand-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}





.brand-card{

    background:#ffffff;

    min-height:150px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.3s ease;

    padding:20px;

}



.brand-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.10);

    border-color:#0b1f3a;

}




.brand-logo{

    width:75px;

    height:75px;

    background:#f8fafc;

    border-radius:50%;

    padding:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

}





.brand-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

}




.brand-card h3{

    margin:0;

    color:#0b1f3a;

    font-size:.95rem;

    font-weight:800;

}





/*==========================================================
    FOOTER SPACING FIX
==========================================================*/


.homepage + footer,
footer{

    margin-top:0;

}



footer{

    position:relative;

}



.footer-container{

    padding-top:50px;

    padding-bottom:40px;

}




/* prevent sections touching footer */

.brands-section{

    margin-bottom:0;

}





/*==========================================================
    GENERAL HOMEPAGE SPACING POLISH
==========================================================*/


.section{

    padding:35px 0;

}



.featured-products{

    background:#fff;

}



.featured-products .product-grid{

    margin-top:10px;

}





/* improve section separation */

.categories-section{

    background:#f6f7fb;

}



.deals-section{

    background:#fff;

}





/*==========================================================
    TABLET RESPONSIVE
==========================================================*/


@media(max-width:1200px){


.brand-grid{

    grid-template-columns:repeat(3,1fr);

}



}



@media(max-width:992px){



.brands-section{

    padding:50px 0 70px;

}



.brand-grid{

    grid-template-columns:repeat(2,1fr);

}




}



@media(max-width:768px){



.brands-section{

    padding:40px 0 60px;

}



.brand-grid{

    gap:15px;

}



.brand-card{

    min-height:130px;

    padding:15px;

}



.brand-logo{

    width:60px;

    height:60px;

}



.brand-card h3{

    font-size:.85rem;

}



}




@media(max-width:576px){



.section{

    padding:25px 0;

}



.section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}



.brands-section .section-header{

    margin-bottom:20px;

}



.brand-grid{

    grid-template-columns:repeat(2,1fr);

}



.brand-card{

    border-radius:14px;

}



}




@media(max-width:400px){



.brand-grid{

    grid-template-columns:1fr;

}



.brand-card{

    min-height:120px;

}



}