*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,Arial;background:#f6f7fb;color:#222}

.header{
    position:sticky;top:0;z-index:10;
    display:flex;justify-content:space-between;
    padding:16px 24px;background:#fff;
    border-bottom:1px solid #e5e7eb
}
.logo{font-size:22px;font-weight:700}
.cart{font-size:22px;color:#111;text-decoration:none;position:relative}
#cart-count{
    position:absolute;top:-6px;right:-10px;
    background:#ff3b3b;color:#fff;
    font-size:12px;padding:3px 7px;border-radius:999px
}

.products,#productResults{
    max-width:1200px;margin:30px auto;padding:0 20px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px
}

.product{
    background:#fff;border-radius:14px;padding:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    display:flex;flex-direction:column;
    transition:.2s
}
.product:hover{transform:translateY(-4px)}
.product img{
    width:100%;height:180px;object-fit:cover;
    border-radius:10px;margin-bottom:12px
}
.product h3{font-size:16px}
.product p{font-size:14px;color:#555;flex-grow:1}
.product b{margin:8px 0;font-size:17px}
button{
    border:none;padding:12px;border-radius:10px;
    cursor:pointer;font-weight:600
}
.product button{background:#2563eb;color:#fff}
.product button:hover{background:#1d4ed8}

.cart-page{max-width:900px;margin:30px auto;padding:0 20px}
table{
    width:100%;border-collapse:collapse;
    background:#fff;border-radius:12px;overflow:hidden
}
th,td{padding:14px;border-bottom:1px solid #eee}
th{background:#f3f4f6}
.qty{display:flex;gap:8px;align-items:center}
.qty button{padding:4px 10px}
.remove{background:#ef4444;color:#fff}
.checkout{
    margin-top:20px;width:100%;
    background:#16a34a;color:#fff;padding:14px
}

@media(max-width:1024px){
    .products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .products{grid-template-columns:1fr}
    .qty{flex-direction:column}
}
/* -------- TOAST NOTIFICATIONS -------- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    min-width: 260px;
    max-width: 320px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    animation: slideIn 0.4s ease, fadeOut 0.4s ease 3s forwards;
}

/* Types */
.toast.success { background: #22c55e; }
.toast.error   { background: #ef4444; }
.toast.warning { background: #f59e0b; }
.toast.info    { background: #3b82f6; }

@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(120%); }
}

/* Mobile */
@media (max-width: 600px) {
    .toast-container {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 15px;
    }
}
.product-search-container {
    position: relative;
    max-width: 400px;
    margin: 20px auto;
   
}

.product-search-container input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

.product-search-container input:focus {
    border-color: #28a745;
    box-shadow: 0 0 5px rgba(40,167,69,0.3);
}

.search-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: #777;
    font-size: 18px;
}

/* Responsive */
@media (max-width: 600px) {
    .product-search-container {
        max-width: 80%;
    }
}