body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.cart {
        color: white;
        font-size: 20px;
        text-decoration:solid white; 
}
.top-bar {
    background-color: rgb(0, 0, 0);
    color: white;
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 2px;
    gap: 2px;
}
.logo a {
    color: white;
    font-size: 1px;
    text-decoration: none;
padding: 10px;
}

.search-bar input {
    width: 400px;
    padding: 1px;
}
.search-bar button {
    padding: 4px 4px;
    cursor: pointer;
}


.secondary-nav {
    background-color: #232f3e;
    color: white;
    padding: 8px 10px;
}
.container {
    padding: 20px;
    background-color:grey
}
.nav-links a {
    color: white;
    margin-right: 15px;
    text-decoration: none;
}
.nav-links a:hover {
    text-decoration: underline;
}
.nav-links {
    display: flex;
    gap: 25px;
}
.nav-item {
    position: relative;
}
.nav-item > a {
    color: white;
    text-decoration: none;
    padding: 8px 0;
    display: block;
}

.dropdown {
    display: none;
    position: static;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    min-width: 220px;
    white-space: nowrap;
    z-index: 999;
    padding: 10px 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.dropdown a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
}
.dropdown a:hover {
    background: #f2f2f2;
}
.dropdown .nav-item {
    position: relative;
}
.dropdown .dropdown {
    top: 0;
    left: 100%;
}
.nav-item:hover .dropdown {
    display: block;
}
.secondary-nav {
    background-color: #232f3e;
    color: white;
    padding: 8px 10px;
    position: relative;   /* add this */
}

/* PRODUCT GRID */
/* PRODUCT CARD */
.product-card{
border:1px solid #ddd;
background:#fff;
text-align:center;
transition:all 0.25s ease;
cursor:pointer;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:stretch;
width:100%;
box-sizing:border-box;
}
.product-card:hover{
transform:translateY(-6px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}
.product-card a {
display:block;
width:100%;
}
.product-card h3{
font-size:15px;
height:40px;
overflow:hidden;
margin:10px 12px;
}
.product-card .price{
margin: 4px 12px;
}
.product-card button{
margin: 8px 12px 12px;
padding: 6px 10px;
cursor: pointer;
}
/* PRODUCT IMAGE */
.product-image{
width:100%;
height:220px;
object-fit:contain;
object-position:center center;
background:#fff;
border-bottom:1px solid #eee;
padding:8px;
box-sizing:border-box;
display:block;
}
.product-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin-top:20px;
align-items:start;
}

.pagination {
    margin-top: 20px;
}
.pagination a {
    margin-right: 5px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    text-decoration: none;
}
.pagination a.active {
    background-color: #232f3e;
    color: white;
}

.category-layout {
    display: flex;
    gap: 20px;
}
.sidebar {
    width: 250px;
    border-right: 1px solid #ddd;
    padding-right: 15px;
}

.products-area {
    flex: 1;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.cart-table th,
.cart-table td {
    border: 1px solid #f3f3f3;
    padding: 10px;
    text-align: left;
}
.cart-table th {
    background-color: #f3f3f3;
}

.remove-btn {
    color: red;
    text-decoration: none;
    font-weight: bold;
}
.remove-btn:hover {
    text-decoration: underline;
}
.checkout-layout {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}
.checkout-form {
    flex: 1;
}
.checkout-summary {
    width: 300px;
    border: 1px solid #ddd;
    padding: 15px;
    background: #f9f9f9;
}

.account-box {
    border: 1px solid #ddd;
    padding: 20px;
    width: 200px;
    background: #f9f9f9;
}


/* PRICE */
.price{
font-size:18px;
font-weight:bold;
color:#B12704;
margin:8px 0;
}

/* ADD CART BUTTON */
.add-cart{
background:#f0c14b;
border:1px solid #a88734;
padding:8px 14px;
cursor:pointer;
border-radius:3px;
}
.add-cart:hover{
background:#e2b33c;
}
.cart-notification{
position:fixed;
top:20px;
right:20px;
background:#4CAF50;
color:white;
padding:12px 18px;
border-radius:4px;
display:none;
z-index:999;
font-weight:bold;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.product-detail{
display:flex;
gap:20px;
margin-top:30px;
}
.product-detail-image img{
width:400px;
object-fit:contain;
border:1px solid #ddd;
padding:20px;
background:#fff;
}
.product-detail-info{
max-width:400px;
}
.product-detail-info .price{
font-size:24px;
font-weight:bold;
color:#B12704;
margin:10px 0;
}

h2{
margin-top:12px;
}

.search-results{
position:absolute;
background:white;
width:400px;
border:1px solid #ddd;
z-index:300;
}
.search-item{
padding:8px;
border-bottom:1px solid #eee;
}
.search-item:hover{
background:#f5f5f5;
cursor:pointer;
}

/* Product image Zoom  */
.zoom-container{
width:400px;
height:400px;
overflow:hidden;
border:1px solid #ddd;
background:#fff;
}
.zoom-container img{
width:90%;
height:90%;
object-fit:contain;
transition:transform 0.2s ease;
}
.zoom-container:hover img{
transform:scale(1.8);
cursor:zoom-in;
}

/* //// trending products carousel */
.carousel-wrapper{
position:relative;
margin:20px 0;
}

.carousel{
display:flex;
overflow-x:auto;
scroll-behavior:smooth;
gap:5px;
padding:7px;
}

.carousel::-webkit-scrollbar{
display:none;
}

.carousel-item{
min-width:200px;
border:1px solid #ddd;
padding:10px;
background:white;
text-align:center;
}

.carousel-item img{
width:100%;
height:150px;
object-fit:contain;
}

.carousel-btn{
position:absolute;
top:40%;
background:#fff;
border:1px solid #ddd;
cursor:pointer;
padding:10px;
}

.carousel-btn.left{
left:-10px;
}

.carousel-btn.right{
right:-10px;
}


/* ///// Category page layout */
.category-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:10px;
margin-bottom:20px;
}
.category-card{
border:1px solid #ddd;
padding:10px;
text-align:center;
background:white;
transition:0.2s;
}
.category-card:hover{
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.category-card img{
width:100%;
height:150px;
object-fit:cover;
margin-bottom:10px;
}
.category-carousel-wrapper{
position:relative;
margin-bottom:10px;
}
.category-carousel{
display:flex;
overflow:hidden;
scroll-behavior:smooth;
}
.category-slide{
flex:0 0 20%;
padding:4px;
box-sizing:border-box;
position:relative;
}
.category-slide img{
width:80%;
height:800;
object-fit:cover;
border-radius:8px;
}
.category-title{
position:absolute;
bottom:20px;
left:20px;
color:white;
font-size:18px;
font-weight:bold;
background:rgba(0,0,0,0.5);
padding:5px 10px;
border-radius:5px;
}

.category-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:white;
border:1px solid #ddd;
padding:10px;
cursor:pointer;
z-index:10;
}
.category-btn.left{
left:-10px;
}
.category-btn.right{
right:-10px;
}


/* ///// Footer styles */
.footer{
background:#000;
color:#ddd;
font-family:Arial;
}
/* TOP AREA */
.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px;
background:#2a2a2a;
}
.footer-top p{
margin:3px 0;
font-size:14px;
}
.footer-social a{
margin:0 8px;
font-size:20px;
text-decoration:none;
}
.footer-links{
padding:12px;
/* border-top:1px solid #222; */
background-color: #232f3e;
    color: white;
margin: center;
}
.footer-links p{
text-align: center;
font-size:14px;
}
.footer-links a{
color:#bbb;
text-decoration:none;
margin-right:15px;
}
.footer-links a:hover{
color:#fff;
}
/* PAYMENTS */
.footer-payments{
text-align: center;
padding:12px;
/* border-top:1px solid #222; */
background-color: #232f3e;
    color: white;
}
/* BOTTOM */
.footer-bottom{
background:#1a1a1a;
text-align:center;
padding:12px;
font-size:13px;
color:#aaa;
}
.payment-icons{
    display: flex;
    justify-content: center;   /* centers horizontally */
    align-items:normal;
    gap: 15px;
    margin-top: 5px;
}
.payment-icons img{
display:flex;
align-items: center;
height:25px;
margin-right:12px;
background:white;
padding:4px;
border-radius:4px;
}

.live-text{
    font-family: "Brush Script MT", cursive;
    font-size: 22px;
    color: #ffcc00;
    font-style: italic;
}
.live-text-head{
    font-family: "Brush Script MT", cursive;
    font-size: 32px;
    color: #e474da;
    font-style: italic;
}
.live-text-head2{
    display: flex;
    font-family: "Brush Script MT", cursive;
    font-size: 25px;
    color: #090809;
    font-style: italic;
    text-align: center;
    justify-content: center;
}