body{
    font-family:Arial;
    background:#f5f5f5;
    margin:0;
    }
    
    
    header{
    background:#111;
    color:white;
    text-align:center;
    padding:30px;
    }
    
    
    #products{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:25px;
    padding:30px;
    }
    
    
    .card{
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 5px 15px #ccc;
    }
    
    
    .card img{
    width:100%;
    height:250px;
    object-fit:contain;
    }
    
    
    .price{
    font-size:22px;
    font-weight:bold;
    }
    
    
    button{
    background:#111;
    color:white;
    border:0;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
    margin:5px;
    }
    
    
    @media(max-width:700px){
    
    #products{
    grid-template-columns:1fr;
    }
    
    }

    .image-container{
        position:relative;
        background:#fff;
        border-radius:12px;
        overflow:hidden;
    }
    
    .image-container img{
        width:100%;
        height:250px;
        object-fit:contain;
        display:block;
    }
    
    .rating-badge{
        position:absolute;
        top:10px;
        left:10px;
    
        background:#FFD700;
        color:#111;
    
        padding:6px 10px;
    
        border-radius:25px;
    
        font-size:14px;
        font-weight:bold;
    
        box-shadow:0 2px 8px rgba(0,0,0,.25);
    
        z-index:5;
    }

    button{
        background:#111;
        color:white;
        border:none;
        padding:12px 18px;
        margin:5px;
        border-radius:8px;
        cursor:pointer;
        transition:.25s;
    }
    
    button:hover{
        background:#333;
        transform:translateY(-2px);
    }

      /* ===== FOOTER ===== */
  footer {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 0.9rem;
    color: #94a3b8;
  }
  
  footer a {
    color: #cbd5e1;
    text-decoration: none;
  }
  .footer p {
            text-align: center;
            margin: 80px 0 40px;
            font-size: 0.9rem;
            color: var(--text-muted);
        }
  
  footer a:hover {
    color: #ffffff;
  }