/*========================================
AB MODIFICATION SHOP
========================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#111;
color:#fff;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

/*========================================
NAVBAR
========================================*/

nav{
background:#111;
padding:15px;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:12px;
border-bottom:1px solid #222;
}

nav a{
color:white;
padding:10px 16px;
border-radius:8px;
transition:.3s;
font-weight:600;
}

nav a:hover{
background:#FFD700;
color:#111;
}

/*========================================
HEADER
========================================*/

header{
background:#1b1b1b;
padding:30px 20px;
text-align:center;
border-bottom:2px solid #FFD700;
}

header img{
height:80px;
margin:auto;
margin-bottom:15px;
}

header h1{
font-size:42px;
color:#FFD700;
}

/*========================================
SEARCH
========================================*/

.search-box{
width:95%;
max-width:550px;
height:55px;
margin:25px auto;
display:block;
border:none;
border-radius:14px;
padding:0 18px;
background:#1f1f1f;
color:white;
font-size:16px;
outline:none;
border:1px solid #333;
transition:.3s;
}

.search-box:focus{
border-color:#FFD700;
box-shadow:0 0 20px rgba(255,215,0,.2);
}

/*========================================
CATEGORY BUTTONS
========================================*/

.category-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:16px;
padding:15px 20px 35px;
}

.category-btn{
background:#222;
color:white;
border:none;
border-radius:14px;
padding:14px 22px;
cursor:pointer;
font-weight:700;
transition:.3s;
min-width:140px;
}

.category-btn:hover,
.category-btn.active{
background:#FFD700;
color:#111;
transform:translateY(-3px);
box-shadow:0 0 20px rgba(255,215,0,.25);
}

.category-btn img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
margin:auto;
margin-bottom:8px;
border:2px solid #FFD700;
}

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

.products-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:28px;
padding:35px;
max-width:1500px;
margin:auto;
}

/*========================================
PRODUCT CARD
========================================*/

.product-card{
background:#1b1b1b;
border-radius:20px;
overflow:hidden;
display:flex;
flex-direction:column;
border:1px solid rgba(255,215,0,.12);
transition:.35s;
}

.product-card:hover{
transform:translateY(-8px);
border-color:#FFD700;
box-shadow:0 20px 40px rgba(255,215,0,.18);
}

/*========================================
PRODUCT IMAGE
========================================*/

.product-image-container{
position:relative;
background:#0d0d0d;
height:220px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.product-image{
width:100%;
height:240px;
object-fit:contain;
padding:18px;
cursor:pointer;
transition:.35s;
}

.product-card:hover .product-image{
transform:scale(1.08);
}

/*========================================
STOCK BADGE
========================================*/

.stock-badge{
position:absolute;
top:15px;
left:15px;
padding:8px 14px;
border-radius:50px;
font-size:13px;
font-weight:700;
color:#fff;
}

.stock-badge.in{
background:#00C853;
}

.stock-badge.out{
background:#E53935;
}

/*========================================
PRODUCT INFO
========================================*/

.product-info{
padding:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
flex:1;
gap:14px;
}

.product-info h2{

font-size:28px;

font-weight:700;

color:#FFD700;

min-height:64px;

line-height:1.25;

}

.category-chip{
display:inline-block;
width:max-content;
padding:6px 14px;
background:#FFD700;
color:#111;
font-weight:700;
border-radius:30px;
font-size:13px;
}

.price{
font-size:36px;
font-weight:800;
letter-spacing:.5px;
}

/*========================================
PRODUCT BUTTONS
========================================*/

.cart-btn{

width:100%;

height:52px;

background:#FFD700;

color:#111;

border:none;

border-radius:12px;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

margin-top:18px;

}

.cart-btn:hover{

background:#ffca00;

transform:translateY(-2px);

}

.cart-btn:hover{

background:#ffca00;

transform:translateY(-2px);

}

.disabled-btn{

background:#666;

color:#ddd;

cursor:not-allowed;

}

.product-actions{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-top:12px;

}

.action-btn{

height:48px;

border:none;

border-radius:12px;

background:#2b2b2b;

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.action-btn:hover{

background:#3b3b3b;

}

.wishlist-btn{

background:#ff4d6d;

}

.wishlist-btn:hover{

background:#ff2d55;

}