/*==================================================*
* TIPA MART
* REUSABLE PRODUCT CARD
*==================================================*/


/*==================================================*
* PRODUCT CARD
*==================================================*/

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    min-width:0;

    background:#FFFFFF;

    border:1px solid #E8E8E8;

    border-radius:10px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


/*==================================================*
* CARD HOVER
*==================================================*/

.product-card:hover{

    transform:translateY(-4px);

    border-color:#E5E5E5;

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

}


/*==================================================*
* IMAGE
*
* Image area maintains a 1:1 ratio.
*==================================================*/

.product-card__image{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;

    padding:18px;

    overflow:hidden;

}


.product-card__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    transition:transform .3s ease;

}


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

    transform:scale(1.04);

}


/*==================================================*
* SALE BADGE
*==================================================*/

.product-card__badge{

    display:none;

}


/*==================================================*
* WISHLIST
*==================================================*/

.product-card__wishlist{

    position:absolute;

    top:14px;

    right:14px;

    z-index:5;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #E5E5E5;

    border-radius:50%;

    background:#FFFFFF;

    color:#555555;

    font-size:15px;

    cursor:pointer;

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

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.product-card__wishlist:hover{

    color:#E53935;

    border-color:#E53935;

    transform:scale(1.05);

}


/*==================================================*
* QUICK VIEW
*==================================================*/

.product-card__quickview{

    position:absolute;

    top:58px;

    right:14px;

    z-index:5;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #E5E5E5;

    border-radius:50%;

    background:#FFFFFF;

    color:#555555;

    font-size:14px;

    cursor:pointer;

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

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.product-card__quickview:hover{

    color:#082C6C;

    border-color:#082C6C;

    transform:scale(1.05);

}


/*==================================================*
* PRODUCT CONTENT
*==================================================*/

.product-card__content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    padding:10px 18px 12px;

}


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

.product-card__category{

    width:100%;

    margin:0 0 7px;

    color:#888888;

    font-size:12px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.5px;

    text-align:left;

}


/*==================================================*
* PRODUCT TITLE
*==================================================*/

.product-card__title{

    width:100%;

    margin:0 0 12px;

    color:#222222;

    font-size:17px;

    font-weight:600;

    line-height:1.4;

    text-align:left;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


.product-card__title a{

    color:inherit;

    text-decoration:none;

}


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

.product-card__rating{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:3px;

    width:100%;

    margin:0 0 12px;

    color:#FDBA12;

    font-size:13px;

}


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

.product-card__price{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex-wrap:wrap;

    gap:9px;

    width:100%;

    margin:0 0 8px;

    text-align:left;

}


.product-card__price .new-price{

    color:#082C6C;

    font-size:21px;

    font-weight:700;

}


.product-card__price .old-price{

    color:#999999;

    font-size:13px;

    text-decoration:line-through;

}


/*==================================================*
* ADD TO CART
*
* Same width as the image/card.
*==================================================*/

.product-card__button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:calc(100% - 36px);

    height:46px;

    margin:0 18px 18px;

    border:none;

    border-radius:6px;

    background:#082C6C;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        background-color .25s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

.product-card__button:hover{

    background:#061F4D;

    transform:translateY(-1px);

    box-shadow:0 6px 15px rgba(8,44,108,.18);

}


.product-card__button:active{

    transform:translateY(0);

    box-shadow:none;

}


.product-card__button i{

    font-size:13px;

}


.product-card__button:disabled{

    background:#CCCCCC;

    color:#FFFFFF;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*==================================================*
* GENERAL POLISH
*==================================================*/

.product-card img{

    user-select:none;

    -webkit-user-drag:none;

}


.product-card button{

    font-family:inherit;

}


.product-card button:focus{

    outline:none;

}


.product-card button:focus-visible{

    box-shadow:0 0 0 3px rgba(8,44,108,.18);

}


.product-card ::selection{

    background:#F5B51D;

    color:#082C6C;

}

/*==================================================*
* MOBILE
*==================================================*/

@media (max-width:576px){

    .product-card__image{

        padding:12px;

    }

    .product-card__content{

        padding:12px 12px 10px;

    }

    .product-card__wishlist{

        top:8px;

        right:8px;

        width:32px;

        height:32px;

        font-size:13px;

    }

    .product-card__quickview{

        top:48px;

        right:8px;

        width:32px;

        height:32px;

        font-size:12px;

    }

    .product-card__title{

        margin-bottom:9px;

        font-size:14px;

        line-height:1.35;

    }

    .product-card__rating{

        gap:2px;

        margin-bottom:9px;

        font-size:11px;

    }

    .product-card__price{

        gap:6px;

        margin-bottom:8px;

    }

    .product-card__price .new-price{

        font-size:17px;

    }

    .product-card__price .old-price{

        font-size:11px;

    }

    .product-card__button{

        width:calc(100% - 24px);

        height:42px;

        margin:0 12px 12px;

        gap:6px;

        font-size:12px;

    }

    .product-card__button i{

        font-size:11px;

    }

}

/*==================================================*
* SMALL MOBILE
*==================================================*/

@media (max-width:400px){

    .product-card__image{

        padding:10px;

    }

    .product-card__content{

        padding:10px;

    }

    .product-card__title{

        font-size:13px;

    }

    .product-card__rating{

        font-size:10px;

    }

    .product-card__price .new-price{

        font-size:16px;

    }

    .product-card__button{

        width:calc(100% - 20px);

        height:40px;

        margin:0 10px 10px;

        font-size:11px;

    }

}