/*==================================================
PRODUCT CARD PREMIUM
Tecnología Israel v0.5.1
==================================================*/

.product-card{

    position:relative;

    background:#FFF;

    border:1px solid #EEF2F8;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 28px rgba(0,0,0,.06);

    transition:.35s ease;

    isolation:isolate;

}

.product-card:hover{

    transform:translateY(-8px);

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

}

.product-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:2px solid transparent;

    pointer-events:none;

    transition:.35s;

}

.product-card:hover::after{

    border-color:rgba(31,94,255,.12);

}

/*=========================================
TOP
=========================================*/

.product-top{

    position:absolute;

    top:18px;

    left:18px;

    right:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:10;

}

.badge-product{

    padding:8px 16px;

    border-radius:40px;

    background:#FF3B30;

    color:#FFF;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:0 10px 20px rgba(255,59,48,.25);

}

.favorite-btn{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:#FFF;

    color:#8A93A4;

    cursor:pointer;

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

    transition:.35s;

}

.favorite-btn i{

    font-size:18px;

}

.favorite-btn:hover{

    background:#FF4D4F;

    color:#FFF;

    transform:scale(1.08);

}

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

.product-image{

    position:relative;

    height:285px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    overflow:hidden;

    background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%);

}

.product-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(31,94,255,.05);

    transition:.45s;

}

.product-image img{

    position:relative;

    z-index:2;

    width:88%;

    max-height:220px;

    object-fit:contain;

    transition:.45s;

}

.product-card:hover .product-image::before{

    transform:scale(1.15);

}

.product-card:hover .product-image img{

    transform:scale(1.08) rotate(-2deg);

}

/*=========================================
BODY
=========================================*/

.product-body{

    padding:24px;

}

.product-brand{

    display:inline-block;

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:6px;

}

.product-body h3{

    font-size:21px;

    line-height:1.35;

    font-weight:700;

    color:#1E293B;

    margin-bottom:14px;

    min-height:58px;

}

/*=========================================
RATING
=========================================*/

.product-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:16px;

}

.product-rating i{

    color:#FFC107;

}

.product-rating span{

    font-weight:600;

    color:#222;

}

.product-rating small{

    color:#8B97A8;

}

/*=========================================
SPECIFICATIONS
=========================================*/

.product-spec{

    color:#667085;

    font-size:14px;

    line-height:1.6;

    min-height:48px;

    margin-bottom:20px;

}

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

.product-price{

    margin-bottom:24px;

}

.product-price small{

    display:block;

    font-size:14px;

    color:#9AA3AF;

    text-decoration:line-through;

    margin-bottom:5px;

}

.product-price strong{

    display:block;

    font-size:32px;

    font-weight:700;

    color:var(--primary);

}

/*=========================================
BUTTON
=========================================*/

.btn-cart{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#FFF;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.btn-cart i{

    margin-right:10px;

}

.btn-cart:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(31,94,255,.30);

}

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

@media(max-width:991px){

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

.product-image{

    position:relative;

    height:285px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    overflow:hidden;

    background:linear-gradient(180deg,#FFFFFF,#F7F9FD);

}

.product-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(31,94,255,.05);

    transition:.45s;

}

.product-image img{

    position:absolute;

    max-width:82%;

    max-height:220px;

    object-fit:contain;

    transition:.45s;

}

/* Primera imagen */

.img-front{

    opacity:1;

    transform:scale(1);

    z-index:2;

}

/* Segunda imagen */

.img-back{

    opacity:0;

    transform:scale(.92);

    z-index:3;

}

/* Hover */

.product-card:hover .img-front{

    opacity:0;

    transform:scale(1.08);

}

.product-card:hover .img-back{

    opacity:1;

    transform:scale(1.05);

}

.product-card:hover .product-image::before{

    transform:scale(1.15);

}

    .product-body{

        padding:20px;

    }

    .product-body h3{

        font-size:19px;

        min-height:auto;

    }

}

@media(max-width:576px){

    .product-image{

        height:220px;

    }

    .product-price strong{

        font-size:28px;

    }

}

.catalog-grid{
    display:grid !important;
    grid-template-columns:repeat(4,260px) !important;
    justify-content:center !important;
    gap:24px !important;
}

.catalog-grid .product-card{
    width:260px !important;
    max-width:260px !important;
}

.product-card-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.product-card-link:hover {
    color: inherit;
    text-decoration: none;
}

.product-card-link .product-card {
    width: 100%;
}