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

.product{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

    display:flex;
    flex-direction:column;

    position:relative;

}

.product:hover{

    transform:translateY(-4px);

}

.product:active{

    transform:scale(.98);

}


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

.productImage{

    width:100%;

    aspect-ratio:1;

    overflow:hidden;

    background:#efefef;

}

body.dark .productImage{

    background:#2a2a2a;

}

.productImage img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.product:hover img{

    transform:scale(1.05);

}


/*==================================================
OUT OF STOCK BADGE
==================================================*/

.badge{

    position:absolute;

    top:12px;

    left:12px;

    padding:6px 10px;

    border-radius:999px;

    background:#d32f2f;

    color:white;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}


/*==================================================
PRODUCT INFO
==================================================*/

.productBody{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:14px;

    flex:1;

}

.productName{

    font-size:17px;

    font-weight:700;

    line-height:1.3;

}

.vendor{

    font-size:13px;

    color:var(--text-light);

}


/*==================================================
CHIPS
==================================================*/

.meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.meta span{

    background:rgba(20,125,69,.08);

    color:var(--primary);

    border-radius:999px;

    padding:

        5px
        10px;

    font-size:12px;

    font-weight:600;

}

body.dark .meta span{

    background:rgba(20,125,69,.22);

}


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

.price{

    font-size:22px;

    font-weight:800;

    color:var(--primary);

    margin-top:auto;

}


/*==================================================
QUANTITY
==================================================*/

.qty{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:14px;

    gap:10px;

}

.qty button{

    width:38px;

    height:38px;

    border-radius:12px;

    background:var(--primary);

    color:white;

    font-size:22px;

    transition:.2s;

}

.qty button:hover{

    background:var(--primary-dark);

}

.qty button:active{

    transform:scale(.92);

}

.qtyValue{

    flex:1;

    text-align:center;

    font-size:20px;

    font-weight:700;

}


/*==================================================
LIST VIEW
==================================================*/

#products.list .product{

    flex-direction:row;

    align-items:stretch;

}

#products.list .productImage{

    width:135px;

    min-width:135px;

    aspect-ratio:auto;

}

#products.list .productBody{

    flex:1;

}

#products.list .qty{

    margin-top:10px;

}


/*==================================================
UNAVAILABLE
==================================================*/

.product.disabled{

    opacity:.55;

}

.product.disabled img{

    filter:grayscale(100%);

}

.product.disabled .qty{

    pointer-events:none;

    opacity:.45;

}


/*==================================================
EMPTY RESULT
==================================================*/

.empty{

    text-align:center;

    padding:70px 25px;

    color:var(--text-light);

}

.empty h2{

    margin-bottom:12px;

}

.empty p{

    line-height:1.6;

}


/*==================================================
FADE ANIMATION
==================================================*/

.product{

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
SMALL TABLETS
==================================================*/

@media (min-width:700px){

    #products.grid{

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

    }

}


/*==================================================
DESKTOP
==================================================*/

@media (min-width:1100px){

    #products.grid{

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

    }

}