/*==================================
 RELATED PRODUCTS
==================================*/


.related.products
{
    margin-top:80px;
}


.related.products h2
{
    text-align:center;

    font-size:34px;

    color:#7d2a18;

    margin-bottom:35px;
}



/*==================================
 GRID FIX
==================================*/


.related.products ul.products
{
    display:grid !important;

    grid-template-columns:repeat(4,1fr) !important;

    gap:25px !important;

    margin:0 !important;

    padding:0 !important;
}



.related.products ul.products li.product
{
    width:100% !important;

    margin:0 !important;

    float:none !important;

    clear:none !important;


    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #eee;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    position:relative;

    padding-bottom:22px;

    transition:.3s;
}



.related.products ul.products li.product:hover
{
    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);
}



/*==================================
 IMAGE
==================================*/


.related.products li.product img
{
    width:100% !important;

    height:auto !important;

    aspect-ratio:1/1;

    object-fit:cover;

    margin:0 !important;
}



/*==================================
 TITLE
==================================*/


.related.products li.product h2,
.related.products li.product .woocommerce-loop-product__title
{
    color:#7d2a18 !important;

    font-size:19px !important;

    line-height:1.5;

    text-align:center;

    padding:15px 12px 0;

    margin:0;

    min-height:60px;
}



/*==================================
 PRICE
==================================*/


.related.products li.product .price
{
    display:block;

    text-align:center;

    color:#c62828 !important;

    font-size:25px !important;

    font-weight:700;

    margin:15px 0 !important;
}



/*==================================
 BUTTON
==================================*/


.related.products li.product a.button
{
    display:block;

    width:calc(100% - 40px);

    margin:0 auto !important;

    padding:13px !important;

    background:#8b2c1f !important;

    color:#fff !important;

    border-radius:50px;

    text-align:center;

    font-size:14px;

    font-weight:700;

    text-decoration:none !important;

    text-transform:uppercase;
}



.related.products li.product a.button:hover
{
    background:#6b1d13 !important;
}



/*==================================
 PACKAGE BADGE
==================================*/


.package-badge
{
    position:absolute;

    top:12px;

    left:12px;


    z-index:30;


    display:flex;

    align-items:center;

    gap:5px;


    color:#fff;


    padding:5px 10px;


    border-radius:20px;


    font-size:12px;

    line-height:1;


    font-weight:700;


    white-space:nowrap;


    box-shadow:0 5px 15px rgba(0,0,0,.2);
}



/* emoji FIX */

.package-badge img.emoji
{
    width:13px !important;

    height:13px !important;

    max-width:13px !important;

    max-height:13px !important;

    display:inline-block !important;

}



/* COLORS */


.package-badge.badge-trial
{
    background:#43a047 !important;
}



.package-badge.badge-best
{
    background:#fb8c00 !important;
}



.package-badge.badge-gift
{
    background:#8e24aa !important;
}



.package-badge.badge-saving
{
    background:#d32f2f !important;
}



/*==================================
 MOBILE
==================================*/


@media(max-width:768px)
{


.related.products
{
    margin-top:50px;
}



.related.products h2
{
    font-size:26px;
}



.related.products ul.products
{
    grid-template-columns:repeat(2,1fr) !important;

    gap:15px !important;
}



.related.products li.product
{
    border-radius:18px;
}



.related.products li.product h2,
.related.products li.product .woocommerce-loop-product__title
{
    font-size:15px !important;

    padding:10px 8px 0;

    min-height:auto;
}



.related.products li.product .price
{
    font-size:19px !important;
}



.related.products li.product a.button
{
    width:calc(100% - 24px);

    padding:11px !important;

    font-size:12px;
}



.package-badge
{
    top:8px;

    left:8px;

    padding:4px 8px;

    font-size:10px;

    border-radius:15px;
}



.package-badge img.emoji
{
    width:11px !important;

    height:11px !important;
}

}

/*==================================
 PACKAGE MESSAGE
==================================*/


.package-message
{
    text-align:center;

    font-size:14px;

    line-height:1.5;

    color:#666;

    padding:0 15px;

    min-height:42px;

    margin-top:5px;

}



/* desktop */

.related.products .package-message
{
    margin-bottom:5px;
}



/* mobile */

@media(max-width:768px)
{


.package-message
{
    font-size:12px;

    padding:0 8px;

    min-height:auto;

    margin-bottom:8px;

}


}

/*==================================
 PACKAGE MESSAGE EMOJI FIX
==================================*/


.package-message img.emoji
{
    width:16px !important;

    height:16px !important;

    max-width:16px !important;

    max-height:16px !important;

    display:inline-block !important;

    vertical-align:middle;

    margin:0 3px 0 0 !important;
}

@media(max-width:768px)
{

.package-message img.emoji
{
    width:13px !important;

    height:13px !important;

    max-width:13px !important;

    max-height:13px !important;
}

}

.related.products a.button
{
    display:block;

    width:calc(100% - 30px);

    margin:15px auto 0;

    padding:15px;

    border-radius:50px;

    background:#b71c1c;

    color:#fff!important;

    text-align:center;

    font-size:16px;

    font-weight:800;

    text-decoration:none!important;

    text-transform:uppercase;
}

.related.products a.button:hover
{
    background:#8d1616;

    transform:translateY(-3px);
}




