/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(180deg,#f8f0ff,#f1e5ff,#ede2ff);
    color:#222;
}

/* ==========================
   MAIN CONTAINER
========================== */

.app{
    width:100%;
    max-width:1400px;
    min-height:100vh;
    margin:auto;
    background:linear-gradient(180deg,#f8f0ff,#f1e5ff,#ede2ff);
    display:flex;
    flex-direction:column;
}

/* ==========================
   HEADER
========================== */


.header{

position:sticky;

top:0;
left: 0;
right: 0;

z-index:1000;


margin:0 ;


padding:15px 22px;


background:

rgba(255,255,255,.35);


backdrop-filter:

blur(15px);





display:flex;

justify-content:space-between;

align-items:center;


box-shadow:

0 10px 30px rgba(0,0,0,.08);


transition:.3s;

}




/* LOGO */


.logo-area{

display:flex;

align-items:center;

gap:12px;

}



.logo-icon{


width:45px;

height:45px;


border-radius:15px;


background:

linear-gradient(
135deg,
#8b2df6,
#ca26ff
);


color:white;


display:flex;

align-items:center;

justify-content:center;


font-size:22px;


box-shadow:

0 8px 20px rgba(139,45,246,.4);

}



.logo-area h1{


font-size:28px;

line-height:25px;


color:#24114d;


font-weight:900;


}



.logo-sub{

font-size:11px;

color:#777;

font-weight:bold;

}



.badge{


background:

linear-gradient(
90deg,
#8b2df6,
#ca26ff
);


color:white;


padding:6px 14px;


border-radius:30px;


font-size:11px;


font-weight:bold;

}





/* RIGHT SIDE */


.header-right{


display:flex;

align-items:center;

gap:12px;


}




.header-btn{


width:45px;

height:45px;


border:none;


border-radius:50%;


background:white;


font-size:18px;


cursor:pointer;


box-shadow:

0 5px 15px rgba(0,0,0,.12);


position:relative;


transition:.3s;


}



.header-btn:hover{


transform:translateY(-3px);


color:#7b2ff7;


}




/* CART NUMBER */


#cart-count{


position:absolute;


right:-3px;

top:-3px;


background:#ff3366;


color:white;


width:20px;

height:20px;


border-radius:50%;


font-size:11px;


display:flex;

align-items:center;

justify-content:center;


font-weight:bold;

}





/* PROFILE */


.profile-box{


display:flex;

align-items:center;


gap:10px;


background:white;


padding:5px 12px 5px 5px;


border-radius:30px;


box-shadow:

0 5px 15px rgba(0,0,0,.1);


}



.avatar{


width:40px;

height:40px;


border-radius:50%;


object-fit:cover;


}



.profile-text{


display:flex;

flex-direction:column;


}



.profile-text strong{


font-size:13px;

color:#24114d;


}



.profile-text small{


font-size:11px;

color:#777;


}
/* ==========================
   HERO
========================== */

.hero-slider{
    display:flex;
    gap:20px;
    overflow:auto;
    padding:20px;
    scrollbar-width:none;
}

.hero-slider::-webkit-scrollbar{
    display:none;
}

.hero{
    min-width:280px;
    height:170px;
    border-radius:25px;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    color:white;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.hero h2{
    margin-bottom:8px;
}

.hero i{
    font-size:48px;
}

.orange{
    background:linear-gradient(135deg,#ff8a00,#ff3d54);
}

.purple{
    background:linear-gradient(135deg,#9733ee,#5d2de0);
}

.blue{
    background:linear-gradient(135deg,#1cb5e0,#355cfd);
}

/* ==========================
   CATEGORY
========================== */

.categories{
    display:flex;
    overflow:auto;
    gap:20px;
    padding:20px;
    scrollbar-width:none;
}

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

.categories a{
    white-space:nowrap;
    cursor:pointer;
    color:#555;
    font-weight:bold;
}

.categories .active{
    color:#6f2cff;
    border-bottom:3px solid #6f2cff;
    padding-bottom:5px;
}

/* ==========================
   FLASH
========================== */

.flash-sale{
    margin:20px;
    background:linear-gradient(90deg,#8b2df6,#5822d8);
    color:white;
    border-radius:20px;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.timer{
    background:rgba(255,255,255,.25);
    padding:10px 18px;
    border-radius:30px;
    font-weight:bold;
}

/* ==========================
   PRODUCTS
========================== */

.products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    padding:20px;
    padding-bottom:120px;
    align-items: start;
    grid-auto-rows: max-content;
}

.product{
    background:white;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
    height: fit-content;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.product:hover{
    transform:translateY(-6px);
}

.product-image{
    height:240px;
    background-size:cover;
    background-position:center;
    position:relative;
}

.rating{
    position:absolute;
    right:12px;
    top:12px;
    background:#0008;
    color:white;
    padding:6px 10px;
    border-radius:30px;
}

.product-info{
    padding:18px;
    display: block;
     height: auto;
    flex: none;
}






.product-info h4{
    margin-bottom:10px;
}

.price{
    color:#6f2cff;
    font-size:1.3rem;
    font-weight:bold;
    margin-bottom:15px;
}

.product button{
    width:100%;
    border:none;
    background:#efe5ff;
    color:#6f2cff;
    padding:14px;
    border-radius:15px;
    cursor:pointer;
    font-weight:bold;
    transition:.3s;
}

.product button:hover{
    background:#6f2cff;
    color:white;
}


/* ==========================
   TOAST
========================== */

#toast{
    position:fixed;
    bottom:100px;
    left:50%;
    transform:translateX(-50%);
    background:#222;
    color:white;
    padding:15px 30px;
    border-radius:40px;
    opacity:0;
    transition:.35s;
    pointer-events:none;
}

#toast.show{
    opacity:1;
}

/* ==========================
   RESPONSIVE
========================== */

/* Tablets */

@media(max-width:992px){

.logo-area h1{
    font-size:1.6rem;
}

.hero{
    min-width:240px;
}

.products{
    grid-template-columns:repeat(2,1fr);
}

}

/* Phones */

@media(max-width:768px){

.products{

grid-template-columns:
repeat(2,1fr);

gap:12px;

padding:12px;

}


.product-image{

height:150px;

}


.product-info{

padding:10px;

}


.product-info h4{

font-size:13px;

}


.price{

font-size:15px;

}


.product button{

font-size:11px;

padding:10px;

}

}

@media(max-width:768px){


.header{

margin:0;

padding:12px 15px;

}


.logo-area h1{

font-size:22px;

}


.logo-sub,
.profile-text,
.badge{

display:none;

}


.logo-icon{

width:40px;

height:40px;

}


.header-btn{

width:40px;

height:40px;

}


.profile-box{

background:none;

padding:0;

box-shadow:none;

}


.avatar{

width:38px;

height:38px;

}

}

/* Small phones */

@media(max-width:480px){

.header{
    padding:0;
}

.logo-area h1{
    font-size:1.4rem;
}

.badge{
    display:none;
}

.hero{
    min-width:200px;
    height:140px;
}

.hero h2{
    font-size:1.1rem;
}

.hero p{
    font-size:.85rem;
}

.categories{
    gap:14px;
}

.product-image{
    height:200px;
}

.product-info{
    padding:15px;
}

.bottom-nav{
    height:70px;
}

.bottom-nav .center{
    width:55px;
    height:55px;
}

}


/* SEARCH */

.search-container{

display:none;

padding:10px 20px;

gap:10px;

}


.search-container input{

flex:1;

padding:14px 18px;

border:none;

border-radius:20px;

font-size:15px;

outline:none;

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

}


.search-container button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#6f2cff;

color:white;

font-size:18px;

}


.search-container.show{

display:flex;

}

/* =========================
   DESKTOP SHOP LAYOUT
========================= */


.shop-layout{

display:flex;

gap:25px;

padding:20px;

}



/* SIDEBAR */

.sidebar{

width:260px;

background:white;

border-radius:25px;

padding:25px;

height:max-content;

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

position:sticky;

top:20px;

}



.sidebar h3{

font-size:20px;

margin-bottom:20px;

color:#24114d;

display:flex;

gap:10px;

align-items:center;

}



.sidebar ul{

list-style:none;

}



.sidebar li{

padding:14px;

border-radius:15px;

display:flex;

gap:12px;

align-items:center;

color:#666;

cursor:pointer;

font-weight:600;

transition:.3s;

}



.sidebar li:hover,
.sidebar li.active{

background:#efe5ff;

color:#6f2cff;

}



.sidebar li i{

width:22px;

}





/* SIDEBAR IMAGES */


.side-banner{

margin-top:20px;

height:150px;

border-radius:20px;

overflow:hidden;

position:relative;

}



.side-banner img{

width:100%;

height:100%;

object-fit:cover;

}



.side-banner div{

position:absolute;

bottom:0;

left:0;

right:0;

padding:15px;

color:white;


background:

linear-gradient(
transparent,
rgba(0,0,0,.7)
);

}



.side-banner h4{

font-size:16px;

}


.side-banner p{

font-size:12px;

}



/* PRODUCTS AREA */

.shop-layout .products{

flex:1;

padding:0;

}




/* TABLET AND MOBILE */

@media(max-width:992px){


.shop-layout{

display:block;

}


.sidebar{

display:none;

}


.shop-layout .products{

padding:0;

}

}



/* DETAIL */
/* =====================================
   PRODUCT DETAIL PAGE
===================================== */

.product-detail-page{

    width:100%;
    max-width:1400px;
    margin:auto;
    padding:20px;

    background:#f6f0ff;

}



/* =====================================
   BREADCRUMB
===================================== */


.breadcrumb{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:25px;

    font-size:14px;

    color:#666;

}


.breadcrumb a{

    text-decoration:none;

    color:#742cff;

}


.breadcrumb strong{

    color:#222;

}



/* =====================================
   MAIN PRODUCT CONTAINER
===================================== */


.product-container{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:35px;

    align-items:start;

}






/* =====================================
   IMAGE GALLERY
===================================== */


.gallery{

    background:white;

    padding:20px;

    border-radius:25px;

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

}



.main-image-box{

    width:100%;

    height:520px;

    overflow:hidden;

    border-radius:20px;

    background:#fafafa;

}



.main-image-box img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.4s;

}





.thumbnail-list{

    display:flex;

    gap:12px;

    margin-top:20px;

    overflow-x:auto;

}



.thumbnail-list::-webkit-scrollbar{

    height:5px;

}



.thumbnail{

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    border:3px solid transparent;

    transition:.3s;

}



.thumbnail:hover,
.thumbnail.active{

    border-color:#742cff;

    transform:translateY(-3px);

}





/* =====================================
 PRODUCT DETAILS
===================================== */


.product-details{

    background:white;

    padding:30px;

    border-radius:25px;

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

}



.product-title-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}



.product-title-row h1{

    font-size:34px;

    color:#21133f;

    line-height:1.2;

}



.rating{

    background:#21133f;

    color:white;

    padding:8px 15px;

    border-radius:30px;

    font-weight:bold;

    white-space:nowrap;

}



.brand{

    margin-top:15px;

    color:#777;

}



/* =====================================
 PRICE
===================================== */


.price-box{

    display:flex;

    align-items:center;

    gap:15px;

    margin:25px 0;

}



.old-price{

    font-size:20px;

    color:#999;

    text-decoration:line-through;

}



.new-price{

    font-size:35px;

    font-weight:900;

    color:#742cff;

}



/* =====================================
 STOCK
===================================== */


.stock{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:30px;

    font-weight:bold;

}



.available{

    background:#ddffe8;

    color:#078d35;

}



.out{

    background:#ffe0e0;

    color:#e00000;

}





.short-description{

    margin:25px 0;

    color:#555;

    font-size:17px;

    line-height:1.7;

}



/* =====================================
 QUANTITY
===================================== */


.quantity-box{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}



.quantity-box button{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#efe5ff;

    color:#742cff;

    font-size:22px;

    cursor:pointer;

}



.quantity-box input{

    width:60px;

    height:40px;

    text-align:center;

    border:none;

    background:#f5f5f5;

    border-radius:10px;

    font-size:18px;

}






/* =====================================
 ADD CART BUTTON
===================================== */


.add-cart{

    width:100%;

    padding:17px;

    border:none;

    border-radius:20px;

    background:

    linear-gradient(
    135deg,
    #8b2cff,
    #5b18df
    );


    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



.add-cart:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(116,44,255,.4);

}



.add-cart:disabled{

    background:#aaa;

    cursor:not-allowed;

}







/* =====================================
 INFORMATION CARDS
===================================== */


.information-card{

    margin-top:30px;

    background:white;

    padding:30px;

    border-radius:25px;

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

}



.information-card h2{

    color:#21133f;

    margin-bottom:20px;

}



.information-card p{

    color:#555;

    line-height:1.8;

}






/* =====================================
 PRODUCT INFORMATION GRID
===================================== */


.info-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

}



.info-grid div{

    background:#f7f1ff;

    padding:18px;

    border-radius:18px;

}



.info-grid span{

    display:block;

    color:#777;

    font-size:13px;

    margin-bottom:5px;

}



.info-grid strong{

    color:#222;

}






/* =====================================
 RELATED PRODUCTS
===================================== */


.related{

    margin-top:30px;

    background:white;

    padding:30px;

    border-radius:25px;

}



.related h2{

    color:#21133f;

    margin-bottom:25px;

}



.related-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.related-card{

    background:#fafafa;

    border-radius:20px;

    overflow:hidden;

    padding-bottom:15px;

    transition:.3s;

}



.related-card:hover{

    transform:translateY(-6px);

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

}



.related-card a{

    text-decoration:none;

    color:inherit;

}



.related-image{

    height:220px;

    background:white;

}



.related-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.related-card h4{

    padding:15px 15px 5px;

}



.related-card p{

    padding:0 15px;

    color:#742cff;

    font-weight:bold;

}



/* RELATED ADD BUTTON */


.related-card form{

    padding:0 15px;

}



.related-card button{

    width:100%;

    border:none;

    padding:12px;

    border-radius:15px;

    background:#efe5ff;

    color:#742cff;

    cursor:pointer;

    font-weight:bold;

}



.related-card button:hover{

    background:#742cff;

    color:white;

}





/* =====================================
 RESPONSIVE
===================================== */


@media(max-width:1000px){


.product-container{

    grid-template-columns:1fr;

}



.related-grid{

    grid-template-columns:
    repeat(3,1fr);

}



.main-image-box{

    height:450px;

}


}





@media(max-width:700px){


.product-detail-page{

    padding:12px;

}



.product-details{

    padding:20px;

}



.product-title-row{

    flex-direction:column;

    align-items:flex-start;

}



.product-title-row h1{

    font-size:24px;

}



.new-price{

    font-size:28px;

}



.main-image-box{

    height:350px;

}



.thumbnail{

    width:65px;

    height:65px;

}



.info-grid{

    grid-template-columns:1fr;

}



.related-grid{

    grid-template-columns:
    repeat(2,1fr);

}



.related-image{

    height:150px;

}


}





@media(max-width:420px){


.related-grid{

    grid-template-columns:1fr;

}


}

.quantity-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin:30px 0;

}

.quantity-box button{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #8b2cff,
        #5b18df
    );

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

.quantity-box button:hover{

    transform:scale(1.08);

    box-shadow:0 8px 20px rgba(116,44,255,.35);

}

.quantity-box input{

    width:70px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#f4f2ff;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#21133f;

}


/*CART STYLE*/

.cart-page{

max-width:1200px;

margin:auto;

padding:30px;

}

.cart-list{

display:flex;

flex-direction:column;

gap:20px;

}

.cart-item{

display:grid;

grid-template-columns:120px 1fr auto auto auto;

gap:20px;

align-items:center;

padding:20px;

background:#fff;

border-radius:20px;

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

}

.cart-image img{

width:100px;

height:100px;

object-fit:cover;

border-radius:15px;

}

.cart-info h3{

margin-bottom:10px;

}

.cart-quantity{

display:flex;

align-items:center;

gap:12px;

}

.cart-quantity button{

width:40px;

height:40px;

border:none;

border-radius:10px;

background:#6f2cff;

color:white;

cursor:pointer;

font-size:18px;

}

.cart-total{

font-size:20px;

font-weight:bold;

color:#6f2cff;

}

.remove-btn{

border:none;

background:#ff4d4d;

color:white;

width:42px;

height:42px;

border-radius:50%;

cursor:pointer;

}

.cart-summary{

margin-top:35px;

background:white;

padding:30px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:20px;

}

.cart-summary h2{

display:flex;

justify-content:space-between;

}

.checkout-btn{

display:block;

padding:18px;

text-align:center;

background:#6f2cff;

color:white;

text-decoration:none;

border-radius:15px;

font-weight:bold;

}

.empty-cart{

text-align:center;

padding:100px 20px;

}

.empty-cart i{

font-size:70px;

color:#6f2cff;

margin-bottom:20px;

}

@media(max-width:768px){

.cart-item{

grid-template-columns:80px 1fr;

}

.cart-total,

.remove-btn,

.cart-quantity{

grid-column:2;

}

}

/* CHECKOUT*/

.checkout-page{

max-width:1200px;
margin:auto;
padding:30px;

}


.checkout-layout{

display:grid;

grid-template-columns:1fr 400px;

gap:30px;

}


.checkout-left,
.checkout-right{

background:white;

padding:25px;

border-radius:25px;

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

}



.address-card{

display:block;

padding:15px;

border-radius:15px;

background:#f6f1ff;

margin-bottom:15px;

cursor:pointer;

}



.address-card input{

margin-right:10px;

}



.checkout-item{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}



.checkout-item img{

width:70px;

height:70px;

border-radius:12px;

object-fit:cover;

}



.checkout-item strong{

margin-left:auto;

}



.checkout-total h2{

display:flex;

justify-content:space-between;

}



.place-order{

width:100%;

padding:16px;

border:none;

border-radius:18px;

background:#6f2cff;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

}



@media(max-width:800px){

.checkout-layout{

grid-template-columns:1fr;

}

}



/* ADD ADDRESS */
.address-page{

max-width:600px;

margin:40px auto;

padding:25px;

background:white;

border-radius:25px;

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

}


.address-form p{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:15px;

}


.form-input{

padding:15px;

border-radius:15px;

border:1px solid #ddd;

font-size:16px;

outline:none;

}


.form-input:focus{

border-color:#6f2cff;

}



.save-address,
.add-address-btn{

display:block;

width:100%;

padding:15px;

border:none;

border-radius:15px;

background:#6f2cff;

color:white;

font-weight:bold;

text-align:center;

text-decoration:none;

cursor:pointer;

}