/* =========================
FILTER BAR (MAIN)
========================= */
.annam-filter{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:25px;
flex-wrap:wrap;
}

/* LEFT SIDE */
.filter-left{
display:flex;
gap:20px;
flex-wrap:wrap;
}

/* GROUP */
.group{
display:flex;
flex-direction:column;
gap:6px;
}

.group label{
font-size:11px;
font-weight:600;
letter-spacing:0.5px;
color:#777;
text-transform:uppercase;
}

/* SELECT BOX */
.group select,
.filter-right select{min-width:180px;padding:12px 14px;border-radius:10px;border: 1px solid #eaeaea;background: #fff;font-size:14px;font-weight:500;color: #000;cursor:pointer;transition:all .25s ease;}


.group select:hover,
.filter-right select:hover{
border-color:#4f7f6a;
}

/* RIGHT SIDE */
.filter-right{
display:flex;
align-items:center;
}

/* =========================
GRID / LIST TOGGLE
========================= */
.view-toggle{
display:flex;
/*background:#f3f3f3;*/
/*border-radius:12px;*/
/*padding:4px;*/
gap:6px;
}

/* BUTTON */
.view-btn{
border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
     
}

/* ACTIVE */
.view-btn.active{
background:#4f7f6a;
color:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* HOVER */
.view-btn:hover{
color:#000;
}

.annam-filter > div{
display:flex;
align-items:flex-end;
gap:15px;
}

.annam-category-wrap{padding: 28px 16px !important;}

/* TOGGLE BUTTON */
/*.view-toggle{*/
/*display:flex;*/
/*gap:10px;*/
/*}*/

.view-btn{
/*border:none;*/
/*background:#eee;*/
/*padding:8px 12px;*/
/*border-radius:6px;*/
cursor:pointer;
}

.view-btn.active{
background:#669888;
color:#fff;
}

/* GRID DEFAULT */
.annam-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.card{
transition:all .3s ease;
}
#annamProducts.loading{
opacity:0.6;
pointer-events:none;
}

/* =========================
AJAX LOADER
========================= */

#annamProducts{
position:relative;
transition:0.3s;
}
/* GRID/LIST LOADER */
#annamProducts.view-loading::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.6);
z-index:5;
}

#annamProducts.view-loading::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:35px;
height:35px;
border:4px solid #ddd;
border-top:4px solid #4f7f6a;
border-radius:50%;
transform:translate(-50%,-50%);
animation:spin 0.7s linear infinite;
z-index:10;
}

@keyframes spin{
0%{transform:translate(-50%,-50%) rotate(0);}
100%{transform:translate(-50%,-50%) rotate(360deg);}
}
/* Overlay */
#annamProducts.loading::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.7);
z-index:5;
}

/* Spinner */
#annamProducts.loading::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
border:4px solid #ddd;
border-top:4px solid #4f7f6a;
border-radius:50%;
transform:translate(-50%,-50%);
animation:spin 0.8s linear infinite;
z-index:10;
}

/* Animation */
@keyframes spin{
0%{transform:translate(-50%,-50%) rotate(0deg);}
100%{transform:translate(-50%,-50%) rotate(360deg);}
}


/* LIST VIEW */
.annam-grid.list{
display:block;
}

/* LIST CARD STYLE */
.annam-grid.list .card{
display:flex;
gap:20px;
align-items:center;
padding:15px;
}

.annam-grid.list .thumb{
width:200px;
flex-shrink:0;
}

.annam-grid.list .thumb img{
height:150px;
object-fit:contain;
}
/* PRODUCT IMAGE WRAPPER */
.global-product-img,
.annam-thumb{
position:relative;
overflow:hidden;
border-radius:12px;
}

/* SALE BADGE (TOP RIGHT CIRCLE) */
.annam-sale-badge{
position:absolute;
top:12px;
right:12px;
width:55px;
height:55px;
background:#3aa0d8; /* blue color */
color:#fff;
font-size:13px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
z-index:5;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* OPTIONAL: SMOOTH LOOK */
.annam-sale-badge{
text-transform:capitalize;
letter-spacing:0.3px;
}
.annam-grid.list .info{
flex:1;
}
.annam-category-wrap .list .global-product-addTocarT a {
    width: 100%;
}
/* MOBILE */
@media(max-width:768px){
.annam-grid{
grid-template-columns:repeat(2,1fr);
}
}

.annam-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:35px;
}

/* CARD */
.card{
background:#fff;
border-radius:12px;
overflow:hidden;
}

.thumb{
position:relative;
padding:15px;
background:#f7f7f7;
display:block;
}

.thumb img{
width:100%;
height:220px;
object-fit:contain;
}

.annam-category-wrap .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* BADGES */
.badges{
position:absolute;
top:10px;
right:10px;
display:flex;
flex-direction:column;
gap:8px;
}

.badge{
padding:6px 10px;
border-radius:20px;
font-size:12px;
color:#fff;
}

.new-arrival-img{
position:relative;
overflow:hidden;
}

/* BOTH IMAGES */
.new-arrival-img img{
width:100%;
height:100%;
object-fit:contain;
transition:all .4s ease;
}

/* HOVER IMAGE DEFAULT HIDDEN */
.img-hover{
position:absolute;
top:0;
left:0;
opacity:0;
}

/* ON HOVER → SHOW SWAP IMAGE */
.new-arrival-img:hover .img-hover{
opacity:1;
}

/* OPTIONAL: FADE OUT MAIN IMAGE */
.new-arrival-img:hover .img-main{
opacity:0;
}
.new-arrival-img:hover .img-hover{
opacity:1;
transform:scale(1);
}

.new-arrival-img:hover .img-main{
opacity:0;
transform:scale(1.05);
}

.sold{background:#333;}

/* WISHLIST */
.wishlist{
position:absolute;
top:10px;
left:10px;
background:#fff;
padding:5px 8px;
border-radius:50%;
}

/* INFO */
.info{
padding:15px;
}

.cat{
color:#d58b00;
font-size:13px;
}

h3{
font-size:16px;
margin:5px 0;
}

.rating{
color:#f4b400;
}

.price{
font-weight:bold;
}

.offer{
font-size:12px;
color:#888;
}

/* BUTTON */
.btn{
display:block;
background:#4f7f6a;
color:#fff;
text-align:center;
padding:10px;
border-radius:6px;
text-decoration:none;
margin-top:10px;
}

/* FILTER */
.annam-filter{
display:flex;
justify-content:space-between;
margin-bottom:0px;
flex-wrap:wrap;
gap:15px;
}

.group label{
display:block;
font-size:12px;
margin-bottom:5px;
}

select{
padding:10px;
border-radius:8px;
border:1px solid #ddd;
}

/* MOBILE */
@media(max-width:768px){
.annam-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){

.annam-filter{
flex-direction:column;
align-items:stretch;
}

.filter-left{
width:100%;
justify-content:space-between;
}

.group select,
.filter-right select{
width:100%;
}

.view-toggle{
width:100%;
justify-content:center;
}

.annam-category-wrap .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

}

@media(max-width:567px){
.annam-category-wrap .list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
    }
}