/*==================================================*
* 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
*==================================================*/

.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 / DEAL BADGE
*
* BADGES ARE ALWAYS VISIBLE.
*
* DEAL:
* Yellow background + dark blue text.
*
* SALE:
* Red background + white text.
*
* Badge visibility does NOT depend on hover.
*==================================================*/

.product-card__badge{

    position:absolute;

    top:14px;

    left:14px;

    z-index:20;

    display:flex !important;

    align-items:center;

    justify-content:center;

    min-width:52px;

    height:28px;

    padding:0 10px;

    border-radius:4px;

    font-size:11px;

    font-weight:700;

    line-height:1;

    letter-spacing:.4px;

    text-transform:uppercase;

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:none;

}


/*==================================================*
* SALE BADGE
*
* Discount price is lower than selling price.
*==================================================*/

.product-card__badge--sale{

    background:#E53935;

    color:#FFFFFF;

}


/*==================================================*
* DEAL BADGE
*
* is_deal = Yes.
*
* DEAL takes priority over SALE in PHP.
*==================================================*/

.product-card__badge--deal{

    background:#F5B51D;

    color:#082C6C;

}


/*==================================================*
* WISHLIST
*
* Hidden until the product card is hovered.
*==================================================*/

.product-card__wishlist{

    position:absolute;

    top:14px;

    right:14px;

    z-index:25;

    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);

    opacity:0;

    visibility:hidden;

    transform:translateY(-5px);

    pointer-events:none;

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

}


/*==================================================*
* SHOW WISHLIST ON CARD HOVER
*==================================================*/

.product-card:hover .product-card__wishlist{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}


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

.product-card__wishlist:hover{

    color:#E53935;

    border-color:#E53935;

    transform:scale(1.05);

}


/*==================================================*
* QUICK VIEW
*
* Hidden until the product card is hovered.
*==================================================*/

.product-card__quickview{

    position:absolute;

    top:58px;

    right:14px;

    z-index:25;

    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);

    opacity:0;

    visibility:hidden;

    transform:translateY(-5px);

    pointer-events:none;

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

}


/*==================================================*
* SHOW QUICK VIEW ON CARD HOVER
*==================================================*/

.product-card:hover .product-card__quickview{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}


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

.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
*==================================================*/

.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 — MAX 576px
*==================================================*/

@media (max-width:576px){


    /* IMAGE */

    .product-card__image{

        padding:12px;

    }


    /* BADGE */

    .product-card__badge{

        top:8px;

        left:8px;

        min-width:46px;

        height:25px;

        padding:0 8px;

        font-size:10px;

    }


    /* CONTENT */

    .product-card__content{

        padding:12px 12px 10px;

    }


    /* WISHLIST */

    .product-card__wishlist{

        top:8px;

        right:8px;

        width:32px;

        height:32px;

        font-size:13px;

    }


    /* QUICK VIEW */

    .product-card__quickview{

        top:48px;

        right:8px;

        width:32px;

        height:32px;

        font-size:12px;

    }


    /* TITLE */

    .product-card__title{

        margin-bottom:9px;

        font-size:14px;

        line-height:1.35;

    }


    /* RATING */

    .product-card__rating{

        gap:2px;

        margin-bottom:9px;

        font-size:11px;

    }


    /* PRICE */

    .product-card__price{

        gap:6px;

        margin-bottom:8px;

    }


    .product-card__price .new-price{

        font-size:17px;

    }


    .product-card__price .old-price{

        font-size:11px;

    }


    /* ADD TO CART */

    .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 — MAX 400px
*==================================================*/

@media (max-width:400px){


    /* IMAGE */

    .product-card__image{

        padding:10px;

    }


    /* CONTENT */

    .product-card__content{

        padding:10px;

    }


    /* TITLE */

    .product-card__title{

        font-size:13px;

    }


    /* RATING */

    .product-card__rating{

        font-size:10px;

    }


    /* PRICE */

    .product-card__price .new-price{

        font-size:16px;

    }


    /* ADD TO CART */

    .product-card__button{

        width:calc(100% - 20px);

        height:40px;

        margin:0 10px 10px;

        font-size:11px;

    }

}