*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;

}

body{

background:#f5f7fb;

padding:20px;

padding-bottom:110px;

}

header{

margin-bottom:20px;

}

.logo{

display:block;

width:170px;

margin:auto;

margin-bottom:20px;

}

.search-box{

display:flex;

align-items:center;

background:#fff;

border-radius:18px;

padding:0 15px;

height:55px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

margin-bottom:18px;

}

.search-box input{

flex:1;

border:none;

outline:none;

font-size:16px;

background:none;

padding-left:10px;

}

.search-box span{

color:#2d6cdf;

font-size:24px;

}

.policy-buttons{

display:flex;

gap:12px;

margin-bottom:25px;

}

.policy-buttons button{

flex:1;

height:50px;

border:none;

border-radius:16px;

background:#fff;

font-weight:bold;

font-size:15px;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.policy-buttons button:hover{

transform:translateY(-2px);

}

.product-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(180px,1fr));

gap:18px;

}

.product-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.product-card:hover{

transform:translateY(-5px);

}

.product-card img{

width:100%;

height:180px;

object-fit:cover;

}

.product-info{

padding:15px;

}

.product-info h3{

font-size:17px;

margin-bottom:8px;

color:#111;

}

.price{

font-size:20px;

font-weight:bold;

color:#2d6cdf;

margin:12px 0;

}

.add-btn{

width:100%;

height:45px;

border:none;

border-radius:14px;

background:#2d6cdf;

color:#fff;

font-weight:bold;

cursor:pointer;

}

.bottom-nav{

position:fixed;

bottom:15px;

left:50%;

transform:translateX(-50%);

width:95%;

max-width:700px;

height:72px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

display:flex;

justify-content:space-around;

align-items:center;

border-radius:30px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

text-decoration:none;

color:#555;

font-size:13px;

gap:3px;

}

.bottom-nav a.active{

color:#2d6cdf;

font-weight:bold;

}

.bottom-nav .material-symbols-outlined{

font-size:26px;

}

.logo{

width:140px;

height:140px;

border-radius:50%;

object-fit:cover;

display:block;

margin:20px auto 15px;

border:5px solid #f5f7fb;

box-shadow:
0 10px 25px rgba(0,0,0,.12);

transition:.3s;

}

/* ========================================
   PRODUCT MODAL
======================================== */

.product-modal{

display:none;

position:fixed;

inset:0;

z-index:9999;

background:rgba(0,0,0,.55);

backdrop-filter:blur(8px);

align-items:center;

justify-content:center;

padding:20px;

animation:fadeIn .25s ease;

}


/* MODAL CONTENT */

.product-modal .modal-content{

width:100%;

max-width:450px;

max-height:90vh;

overflow-y:auto;

background:#fff;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.25);

overflow:hidden;

animation:modalPop .3s ease;

}


/* IMAGE SLIDER */

.modal-image-slider{

position:relative;

width:100%;

height:320px;

background:#f5f7fb;

display:flex;

align-items:center;

justify-content:center;

}


/* PRODUCT IMAGE */

.modal-image-slider #modal-image{

width:100%;

height:100%;

object-fit:cover;

display:block;

}


/* IMAGE BUTTONS */

#prevImage,
#nextImage{

position:absolute;

top:50%;

transform:translateY(-50%);

width:48px;

height:48px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.9);

color:#2d6cdf;

font-size:36px;

font-weight:bold;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

z-index:5;

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

transition:.25s;

}


/* LEFT BUTTON */

#prevImage{

left:15px;

}


/* RIGHT BUTTON */

#nextImage{

right:15px;

}


/* BUTTON HOVER */

#prevImage:hover,
#nextImage:hover{

background:#2d6cdf;

color:#fff;

transform:translateY(-50%) scale(1.1);

}


/* PRODUCT DETAILS */

.product-modal .modal-body{

padding:25px;

}


.product-modal .modal-body h2{

font-size:24px;

color:#111;

margin-bottom:8px;

}


.product-modal .modal-body h3{

font-size:22px;

color:#2d6cdf;

margin-bottom:15px;

}


.product-modal .modal-body p{

color:#666;

line-height:1.6;

margin-bottom:15px;

}


/* COLOUR SELECT */

#modal-color{

width:100%;

height:50px;

border:1px solid #ddd;

border-radius:14px;

padding:0 15px;

font-size:16px;

background:#fff;

outline:none;

margin-top:8px;

}


/* QUANTITY */

.qty-box{

display:flex;

align-items:center;

justify-content:center;

gap:15px;

margin-top:10px;

}


.qty-box button{

width:45px;

height:45px;

border:none;

border-radius:14px;

background:#2d6cdf;

color:#fff;

font-size:24px;

font-weight:bold;

cursor:pointer;

transition:.25s;

}


.qty-box button:hover{

transform:scale(1.08);

}


.qty-box input{

width:70px;

height:45px;

border:1px solid #ddd;

border-radius:14px;

text-align:center;

font-size:18px;

font-weight:bold;

outline:none;

}


/* ADD TO CART */

#addToCartBtn{

width:100%;

height:55px;

border:none;

border-radius:17px;

background:#2d6cdf;

color:#fff;

font-size:17px;

font-weight:bold;

cursor:pointer;

box-shadow:0 8px 20px rgba(45,108,223,.3);

transition:.25s;

}


#addToCartBtn:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(45,108,223,.4);

}


/* FADE ANIMATION */

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}


/* POPUP ANIMATION */

@keyframes modalPop{

from{

opacity:0;

transform:scale(.9) translateY(20px);

}

to{

opacity:1;

transform:scale(1) translateY(0);

}

}


/* MOBILE */

@media(max-width:500px){

.product-modal{

padding:15px;

}

.product-modal .modal-content{

max-height:92vh;

border-radius:24px;

}

.modal-image-slider{

height:280px;

}

#prevImage,
#nextImage{

width:42px;

height:42px;

font-size:30px;

}

.product-modal .modal-body{

padding:20px;

}

}

.product-card img{

width:100%;
height:200px;
object-fit:contain;
display:block;

}