/* Grid */

.woocommerce ul.products{

display:grid;

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

gap:30px;

margin:40px 0;

padding:0;

}

.woocommerce ul.products li.product{

width:100%!important;

margin:0!important;

list-style:none;

}

/* Card */

.animationdev-card{

background:#fff;

border-radius:14px;

overflow:hidden;

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

transition:.3s;

height:100%;

}

.animationdev-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

/* Image */

.animationdev-thumb{

display:block;

position:relative;

aspect-ratio:16/10;

overflow:hidden;

}

.animationdev-thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.animationdev-card:hover img{

transform:scale(1.08);

}

/* Overlay */

.animationdev-overlay{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.3s;

}

.animationdev-card:hover .animationdev-overlay{

opacity:1;

}

.animationdev-overlay span{

background:#ff6b00;

color:#fff;

padding:12px 24px;

border-radius:30px;

font-weight:600;

}

/* Content */

.animationdev-content{

padding:18px;

}

.animationdev-content h3{

font-size:18px;

margin:0 0 10px;

}

.animationdev-content h3 a{

text-decoration:none;

color:#222;

}

.animationdev-price{

font-size:18px;

font-weight:700;

color:#ff6b00;

}

.animationdev-free-tag{

display:inline-block;

background:#16a34a;

color:#fff;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}

/* Product Badge */

.animationdev-badge{

position:absolute;

top:15px;

left:15px;

padding:8px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#fff;

z-index:20;

letter-spacing:.5px;

text-transform:uppercase;

}

.animationdev-badge.free{

background:#16a34a;

}

.animationdev-badge.premium{

background:#ff6b00;

}
/* Overlay */

.animationdev-overlay{

position:absolute;

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

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.35s;

}

.animationdev-card:hover .animationdev-overlay{

opacity:1;

}

/* Buttons */

.animationdev-buttons{

display:flex;

flex-direction:column;

gap:15px;

width:80%;

}

.animationdev-buttons a{

text-decoration:none;

text-align:center;

padding:14px;

border-radius:8px;

font-weight:600;

transition:.25s;

}

/* Preview */

.animationdev-preview-btn{

background:#ff6b00;

color:#fff;

}

/* View */

.animationdev-view-btn{

background:#fff;

color:#222;

}

.animationdev-buttons a:hover{

transform:translateY(-2px);

}