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

.header{
    background:#131921;
    color:white;
    padding:12px 15px;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
}

.header_top{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.site_logo{
    width:52px;
    height:52px;
    border-radius:10px;
}

.logo_text{
    display:flex;
    flex-direction:column;
}

.brand{
    color:#fff;
    font-size:24px;
    font-weight:700;
    line-height:1;
}

.tagline{
    color:#ffb84d;
    font-size:12px;
    letter-spacing:1px;
    margin-top:3px;
    font-weight:600;
}



.search{
    margin-top:6px;
    display:flex;
    justify-content:center;
}

.search input{
    width:140%;
    height:30px;
    padding:0 6px;
    border:none;
    border-radius:4px;
    font-size:11px;
    box-sizing:border-box;
}

.cart{
    font-size:20px;
}

.cart a{
    color:white;
    text-decoration:none;
}

.products{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
    padding:15px;
}

@media(max-width:768px){

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

.card{
    padding:6px;
    border-radius:10px;
}

.card img{
    height:90px;
}

.card h3{
    font-size:13px;
    line-height:16px;
    height:32px;
    margin:6px 0;
}

.card p{
    font-size:16px;
    margin:4px 0;
}

.card button{
    padding:8px;
    font-size:13px;
    margin-top:8px;
}
.product_page{
    display:flex;
    flex-direction:column;
    padding:10px;
    gap:15px;
}

.left,
.right{
    width:100%;
}

.main_product_image{
    width:100%;
    max-width:250px;
    height:auto;
    display:block;
    margin:auto;
    padding:10px;
}

.thumb_image{
    width:45px !important;
    height:45px !important;
    object-fit:cover;
    border:1px solid #ddd;
    border-radius:6px;
    margin:2px;
    cursor:pointer;
    padding:0 !important;
}

.right h1{
    font-size:20px;
    line-height:26px;
    margin-bottom:8px;
}

.right p{
    font-size:14px;
    margin:4px 0;
}

.right h2{
    font-size:26px;
    margin:8px 0;
}

.qty{
    justify-content:center;
    margin:15px 0;
}

.qty button{
    width:36px;
    height:36px;
}

.qty input{
    width:50px;
}

.cart_btn,
.buy_btn{
    font-size:16px;
    padding:12px;
}

}

.card button{
    margin-top:8px;
}
.card{
    display:flex;
    flex-direction:column;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:.3s;
    padding:10px;
}
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.card h3{
    font-size:13px;
    line-height:16px;
    height:32px;
    overflow:hidden;
    margin:4px 0 2px 0;
}

.card p{
    color:#e53935;
    font-size:16px;
    font-weight:bold;
    margin:0;
}

.card img{
    width:100%;
    height:220px;
    object-fit:contain;
    background:white;
    transition:transform .3s ease;
}
.card:hover img{
    transform:scale(1.05);
}

button{
    width:100%;
    padding:12px;
    font-size:16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}



.product_page{
    display:flex;
    gap:25px;
    padding:20px;
}

.left{
    flex:1;
    text-align:center;
}

.right{
    flex:1;
}

.main_product_image{
    width:100%;
    max-width:350px;
    border-radius:10px;
    object-fit:contain;
}



.product_link{
    text-decoration:none;
    color:black;
}

.qty{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.qty button{
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:20px;
    background:#f0f0f0;
}

.qty button:hover{
    background:#ff9900;
    color:white;
}
.qty input{
    width:60px;
    text-align:center;
    padding:8px;
}

.cart_btn,
.buy_btn{
    width:100%;
    padding:14px;
    font-size:18px;
    border:none;
    border-radius:8px;
    margin-top:10px;
    cursor:pointer;
}

.cart_btn{
    background:#ff9900;
    color:white;
}

.buy_btn{
    background:#28a745;
    color:white;
}



@media(max-width:768px){

.header{

padding:10px;

}

.header_top{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:20px;

}

.menu_icon{

font-size:28px;

cursor:pointer;

}

.search{

margin-top:10px;

padding:0;

}

.search input{
    width:100%;
    display:block;
    margin:0 auto;
    box-sizing:border-box;
}

.cart{

font-size:18px;

}

}

.cart_item{
    display:flex;
    gap:20px;
    padding:20px;
    background:white;
    border-radius:15px;
    margin:15px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.cart_item img{

width:100px;

height:100px;

object-fit:cover;

border-radius:8px;

}

.cart_item a{

color:red;

text-decoration:none;

font-weight:bold;

}

.search input:focus{
    outline:none;
    box-shadow:0 0 8px orange;
}

button:hover{
    opacity:.9;
    transform:scale(1.03);
}


form.form_box{
    max-width:500px;
    margin:auto;
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

input,
textarea,
select{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
    box-sizing:border-box;
}

textarea{
    min-height:120px;
    resize:vertical;
}

.empty_cart{
    text-align:center;
    padding:60px;
    font-size:25px;
    color:#888;
}

.category_bar{

display:flex;

gap:10px;

padding:15px;

overflow-x:auto;

background:white;
position:sticky;
top:72px;
z-index:99;

}

.category_bar a{

text-decoration:none;

padding:8px 18px;

background:#f0f0f0;

border-radius:25px;

color:#333;

white-space:nowrap;

font-weight:bold;

transition:.3s;

}

.category_bar a:hover{

background:#ff9900;

color:white;

}

/* ---------- Admin Tables ---------- */

table{
    width:100%;
    border-collapse:collapse;
    background:white;
    margin:20px 0;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

table th{
    background:#131921;
    color:white;
    padding:12px;
    text-align:left;
}

table td{
    padding:12px;
    border-bottom:1px solid #eee;
}

table tr:nth-child(even){
    background:#fafafa;
}

table tr:hover{
    background:#f3f8ff;
}


/* ---------- Status ---------- */

.status_pending{
    color:#ff9800;
    font-weight:bold;
}

.status_packed{
    color:#2196f3;
    font-weight:bold;
}

.status_shipped{
    color:#9c27b0;
    font-weight:bold;
}

.status_delivered{
    color:#28a745;
    font-weight:bold;
}


/* ---------- Dashboard Cards ---------- */

.dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    padding:20px;
}

.dashboard .box{
    background:white;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.dashboard .box h3{
    margin:0;
    color:#666;
}

.dashboard .box h1{
    margin-top:10px;
    color:#ff6b00;
}


/* ---------- Admin Links ---------- */

.action_btn{
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
    color:white;
    font-size:14px;
    margin:2px;
}

.view_btn{
    background:#2196f3;
}

.edit_btn{
    background:#28a745;
}

.delete_btn{
    background:#e53935;
}


/* ---------- Product Images ---------- */

.product_thumb{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #ddd;
}


/* ---------- Forms ---------- */

input:focus,
textarea:focus,
select:focus{
    border-color:#ff9900;
    box-shadow:0 0 6px rgba(255,153,0,.4);
}


/* ---------- Mobile Table ---------- */

@media(max-width:768px){

table{
    font-size:13px;
}

table th,
table td{
    padding:8px;
}

.topbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

}



.side_menu{

height:100%;

width:0;

position:fixed;

z-index:9999;

top:0;

left:0;

background:#131921;

overflow-x:hidden;

transition:.3s;

padding-top:60px;

}

.side_menu a{

display:block;

padding:15px 25px;

color:white;

text-decoration:none;

font-size:18px;

}

.side_menu a:hover{

background:#ff9900;

}

.closebtn{

position:absolute;

top:10px;

right:20px;

font-size:35px;

color:white;

cursor:pointer;

}

.main_product_image{

width:100% !important;

max-width:220px !important;

display:block;

margin:auto;

border-radius:10px;

padding:5px;

}