/* ==============================
   GENERAL
================================= */

*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#FFF9D9;          /* Light Yellow */
    color:#444;
    padding:20px;
}

h1{
    text-align:center;
    color:#ff4081;
    margin:30px 0 15px;
    font-size:40px;
}

.product-container{
    width:95%;
    max-width:1450px;
    margin:30px auto;
    background:#EAF6FF;     /* Light Blue */
    border:5px solid #4A90E2;
    border-radius:25px;
    padding:30px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.section-title{

    text-align:center;

    color:#C2185B;

    font-size:34px;

    font-weight:bold;

    margin:20px 0 30px;

}

.product-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}


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

.card{

    display:flex;

    align-items:center;

    background:#EAF6FF;          /* Light Blue */

    border:2px solid #90CAF9;    /* Blue Border */

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    min-height:220px;

    box-shadow:0 5px 15px rgba(0,0,0,.10);

}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.image-frame{
    width:220px;
    min-width:220px;
    background:#ffe8f1;
    text-align:center;
    padding:20px;
}

.image-frame img{
    width:170px;
    height:170px;
    object-fit:cover;
    border-radius:12px;
    transition:.3s;
}

.card:hover .image-frame img{transform:scale(1.05);}

.card-body{
    flex:1;
    padding:25px;
    text-align:left;
}

.card-body h3{
    color:#444;
    font-size:24px;
    margin-bottom:15px;
}

.price{
    color:#ff4081;
    font-size:28px;
    font-weight:bold;
    margin-bottom:20px;
}

.cart-btn,.close-btn{
    background:#ff4081;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.cart-btn{
    width:180px;
    padding:12px;
    font-size:16px;
}

.close-btn{
    margin-top:20px;
    padding:12px 20px;
}

.cart-btn:hover,.close-btn:hover,.cart-item button:hover,.nav-btn:hover{
    background:#e91e63;
}

.cart{
    width:95%;
    max-width:900px;
    margin:30px auto;
    background:#fff;
    border-radius:15px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.cart h2{color:#ff4081;margin-bottom:20px;}

.cart-item{
    display:flex;
    align-items:center;
    padding:10px;
    margin-bottom:15px;
    border-bottom:1px solid #eee;
}

.cart-item img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    margin-right:15px;
}

.cart-item .info{flex:1;text-align:left;}

.cart-item button{
    margin-left:5px;
    padding:6px 10px;
    border:none;
    border-radius:5px;
    background:#ff4081;
    color:#fff;
    cursor:pointer;
}

.modal{
    display:none;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.65);
    z-index:999;
}

.modal-content{
    width:650px;
    max-width:95%;
    margin:60px auto;
    background:#fff;
    border-radius:20px;
    padding:25px;
    text-align:center;
}

.slider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
}

.slider img{
    width:320px;
    height:320px;
    object-fit:cover;
    border-radius:15px;
}

.nav-btn{
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#ff4081;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    margin:0 10px;
}

#dots{margin:15px 0;}

.dot{
    width:12px;
    height:12px;
    display:inline-block;
    margin:4px;
    background:#ccc;
    border-radius:50%;
    cursor:pointer;
}

.dot.active{background:#ff4081;}

@media(max-width:992px){
    .product-grid{grid-template-columns:1fr;}
}

@media(max-width:768px){
    .card{flex-direction:column;text-align:center;}
    .image-frame{width:100%;min-width:100%;}
    .card-body{text-align:center;}
    .cart-btn{width:100%;}
    .slider img{width:250px;height:250px;}
}


.offer-banner{

    width:100%;

    overflow:hidden;

    background:linear-gradient(90deg,#ff4081,#ff9800,#ff4081);

    border-radius:12px;

    margin-bottom:25px;

    padding:12px 0;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.offer-text{

    display:inline-block;

    white-space:nowrap;

    color:white;

    font-size:22px;

    font-weight:bold;

    letter-spacing:1px;

    padding-left:100%;

    animation:offerMove 12s linear infinite;

}

@keyframes offerMove{
    0%{
        transform:translateX(0);
    }

    100%{

        transform:translateX(-220%);

    }

}
/* ===================================
   CHECKOUT ICON
=================================== */

.product-container{

    position:relative;

}

.checkout-icon{

    position:absolute;

    top:20px;

    right:25px;

    z-index:100;

}

.checkout-icon a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;

    height:65px;

    font-size:34px;

    text-decoration:none;

    background:white;

    border:3px solid #FF4081;

    border-radius:50%;

    box-shadow:0 5px 15px rgba(0,0,0,.20);

    transition:.3s;

    position:relative;

}

.checkout-icon a:hover{

    transform:scale(1.1);

    background:#FFF3C4;

}

#cart-count{

    position:absolute;

    top:-8px;

    right:-8px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:red;

    color:white;

    font-size:14px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}