/*
Theme Name: Marketplace Sticky Theme
Version: 10.0
*/

body{font-family:Arial;background:#f5f5f5;margin:0}

.header{background:#ee4d2d;padding:10px}
.menu{display:flex;gap:8px;overflow:auto}
.menu a{color:#fff;text-decoration:none;padding:6px 10px;background:#ff6a4d;border-radius:20px;font-size:12px}

.search input{width:100%;padding:10px;border:none;border-radius:20px}

.products{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px}
.card{background:#fff;padding:8px;border-radius:8px}

.product-page{display:flex;gap:20px;padding:20px;background:#fff}
.left{width:40%}
.right{width:60%}

.gallery-thumb{display:flex;gap:5px;margin-top:10px}
.gallery-thumb img{width:60px;cursor:pointer;border-radius:4px}

.price{color:#ee4d2d;font-weight:bold}
.btn{background:#ee4d2d;color:#fff;padding:12px;text-decoration:none;border-radius:5px}

.layout{display:flex;gap:20px}
.content{width:75%}
.sidebar{width:25%}

/* ===== MOBILE ===== */
@media (max-width:768px){

.layout{flex-direction:column}
.content,.sidebar{width:100%}

.product-page{flex-direction:column}
.left,.right{width:100%}

.products{grid-template-columns:repeat(2,1fr);gap:8px}

.sidebar .card{display:flex;gap:10px;align-items:center}
.sidebar .card img{width:70px;height:70px;object-fit:cover}

.mobile-buy{display:block;background:#ee4d2d;color:#fff;text-align:center;padding:12px;border-radius:6px;margin:10px 0;font-weight:bold}

/* STICKY BUTTON */
.sticky-buy{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#fff;
padding:10px;
box-shadow:0 -2px 10px rgba(0,0,0,0.1);
}

.sticky-buy a{
display:block;
background:#ee4d2d;
color:#fff;
text-align:center;
padding:14px;
border-radius:6px;
font-size:16px;
font-weight:bold;
}

body{padding-bottom:80px;}

}

/* ===== DESKTOP CONTAINER FIX ===== */
body{
    max-width:1200px;
    margin:auto;
    background:#f5f5f5;
}

/* ===== HEADER STICKY FIX ===== */
.header{
    position:sticky;
    top:0;
    z-index:9999;
}

/* ===== DESKTOP LAYOUT FIX ===== */
.product-page{
    align-items:flex-start;
}

.left{
    max-width:500px;
}

.right{
    flex:1;
}

.sidebar{
    max-width:300px;
}

/* GRID DESKTOP */
.products{
    grid-template-columns: repeat(4,1fr);
}

/* spacing */
.layout{
    padding:10px;
}

/* MOBILE SAFE */
@media (max-width:768px){
    body{
        max-width:100%;
    }
}