/*==============================================================
BODY PORTAL
PRODUCT CARD
PART 1
==============================================================*/



/*==============================================================
CARD
==============================================================*/

.bp-product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    background:#fff;

    border:1px solid #ECE6DB;

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.bp-product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(0,0,0,.10);

}



/*==============================================================
IMAGE
==============================================================*/

.bp-product-image{

    position:relative;

    display:block;

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    background:#F8F6F3;

}

.bp-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.bp-product-card:hover .bp-product-image img{

    transform:scale(1.05);

}



/*==============================================================
SALE BADGE
==============================================================*/

.bp-sale-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    background:#111;

    color:#fff;

    min-width:58px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.02em;

}



/*==============================================================
OUT OF STOCK
==============================================================*/

.bp-stock-badge{

    position:absolute;

    right:18px;

    top:18px;

    z-index:5;

    background:#C62828;

    color:#fff;

    padding:8px 14px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}



/*==============================================================
CONTENT
==============================================================*/
.bp-card-content{

    display:flex;

    flex-direction:column;

    padding:24px;

    height:auto;

}


/*==============================================================
INSPIRED BY
==============================================================*/

.bp-card-inspired{

    width:100%;

    color:#C59A43;

    font-size:14px;

    line-height:1.6;

    margin-bottom:12px;
    text-align: center ;

}

.bp-card-inspired strong{

    color:#222;

    font-weight:700;

}



/*==============================================================
FRAGRANCE NOTE
(for Cart Page)
==============================================================*/

.bp-card-fragrance{

    margin-top:8px;

    color:#777;

    font-size:13px;

    line-height:1.7;

    min-height:34px;

}



/*==============================================================
TITLE
==============================================================*/

.bp-card-title{

    width:100%;

    margin:0;
    
    text-align:center ;

}

.bp-card-title a{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-decoration:none;

    color:#111;

    font-size:24px;

    font-weight:700;

    line-height:1.35;

    transition:.3s;

}

.bp-product-card:hover .bp-card-title a{

    color:#C59A43;

}

/*==============================================================
BODY PORTAL
PRODUCT CARD
PART 2
Content • Rating • Price
==============================================================*/


/*==============================================================
TITLE
==============================================================*/

.bp-card-title{

    width:100%;

    margin:0 0 14px;

}

.bp-card-title a{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    color:#111;

    text-decoration:none;

    font-size:24px;

    font-weight:700;

    line-height:1.35;


    transition:.3s ease;

}

.bp-product-card:hover .bp-card-title a{

    color:#C59A43;

}



/*==============================================================
RATING
==============================================================*/

.bp-card-rating{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-bottom:20px;

}

.bp-card-rating .star-rating{

    margin:0;

    float:none;

    font-size:14px;

}

.bp-empty-stars{

    color:#D5A84A;

    letter-spacing:2px;

    font-size:15px;

}

.bp-review-count{

    color:#888;

    font-size:14px;

}



/*==============================================================
PRICE
==============================================================*/

.bp-card-price{

    width:100%;


}

.bp-card-price .price{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:0;

}

.bp-card-price del{

    opacity:1;

}

.bp-card-price del .woocommerce-Price-amount{

    color:#9B9B9B;

    font-size:18px;

    font-weight:500;

    text-decoration:line-through;

}

.bp-card-price ins{

    background:none;

    text-decoration:none;

}

.bp-card-price ins .woocommerce-Price-amount{

    color:#111;

    font-size:24px;

    font-weight:700;

}

.bp-card-price>.price>.woocommerce-Price-amount{

    color:#111;

    font-size:34px;

    font-weight:700;

}



/*==============================================================
REMOVE DEFAULT WOOCOMMERCE STYLES
==============================================================*/

.bp-card-price ins,

.bp-card-price del{

    background:transparent;

}

.bp-card-price bdi{

    font-weight:inherit;

}



/*==============================================================
CARD EQUAL HEIGHT
==============================================================*/



/*==============================================================
TABLET
==============================================================*/

@media(max-width:991px){

.bp-card-content{

    padding:22px;

}

.bp-card-title a{

    font-size:24px;

    min-height:auto;

}

.bp-card-price ins .woocommerce-Price-amount,

.bp-card-price>.price>.woocommerce-Price-amount{

    font-size:26px;

}

}



/*==============================================================
MOBILE
==============================================================*/

@media(max-width:767px){

.bp-card-content{

    padding:18px;

}

.bp-card-inspired{

    font-size:13px;

}

.bp-card-title a{

    font-size:22px;

    min-height:64px;

}

.bp-card-rating{

    margin-bottom:16px;

}

.bp-card-price{

    margin-bottom:20px;

}

.bp-card-price ins .woocommerce-Price-amount,

.bp-card-price>.price>.woocommerce-Price-amount{

    font-size:28px;

}

.bp-card-price del .woocommerce-Price-amount{

    font-size:16px;

}

}

/*==============================================================
BODY PORTAL
PRODUCT CARD
PART 3
Buttons • Equal Height • WooCommerce Fix
==============================================================*/


/*==============================================================
BUTTON WRAPPER
==============================================================*/

.bp-card-button{

    width:fit-content;


    padding-top:6px;

}

.bp-card-button>*{

    width:100%;

}



/*==============================================================
WOOCOMMERCE BUTTON
==============================================================*/

.bp-card-button .button,
.bp-card-button a.button,
.bp-card-button .add_to_cart_button,
.bp-card-button .product_type_simple,
.bp-card-button .product_type_variable,
.bp-card-button .product_type_external,
.bp-card-button .product_type_grouped{

    display:flex !important;

    align-items:center;

    justify-content:center;

    width:100% !important;

    min-height:58px;

    padding:0 28px !important;

    margin:0 !important;

    border:none !important;

    border-radius:999px;

    background:#111 !important;

    color:#fff !important;

    font-size:14px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    text-decoration:none;

    box-shadow:none !important;

    transition:all .35s ease;

}



/*==============================================================
BUTTON HOVER
==============================================================*/

.bp-card-button .button:hover,
.bp-card-button a.button:hover,
.bp-card-button .add_to_cart_button:hover{

    background:#C59A43 !important;

    color:#111 !important;

    transform:translateY(-2px);

}



/*==============================================================
BUTTON ACTIVE
==============================================================*/

.bp-card-button .button:active{

    transform:scale(.98);

}



/*==============================================================
LOADING
==============================================================*/

.bp-card-button .loading{

    opacity:.8;

    pointer-events:none;

}

.bp-card-button .button.loading::after{

    margin-left:10px;

}



/*==============================================================
ADDED TO CART
==============================================================*/

.bp-card-button .added_to_cart{

    display:flex !important;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:58px;

    margin-top:12px;

    border-radius:999px;

    background:#2E7D32;

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

}

.bp-card-button .added_to_cart:hover{

    background:#1B5E20;

    color:#fff;

}



/*==============================================================
REMOVE ASTRA DEFAULTS
==============================================================*/

.woocommerce .bp-card-button .button,
.woocommerce-page .bp-card-button .button{

    float:none;

    display:flex !important;

    width:100% !important;

    margin:0 !important;

}



/*==============================================================
PRODUCT CARD LAYOUT
==============================================================*/

.bp-product-card{

    display:flex;

    flex-direction:column;

}


.bp-card-price{

    margin-top:auto;

}

.bp-card-button{

    margin-top:20px;

}



/*==============================================================
CARD FOOTER SPACING
==============================================================*/

.bp-card-content>*:last-child{

    margin-bottom:0;

}



/*==============================================================
SWIPER SUPPORT
==============================================================*/

.bp-related-slider .swiper-slide{

    display:flex;

    height:auto;

}

.bp-related-slider .bp-product-card{

    width:100%;

}



/*==============================================================
MOBILE
==============================================================*/

@media(max-width:767px){

.bp-card-button .button,
.bp-card-button a.button,
.bp-card-button .add_to_cart_button{

    min-height:52px;

    font-size:13px;

    letter-spacing:.08em;

}

.bp-card-button{

    margin-top:16px;

}

}



/*==============================================================
BODY PORTAL
PRODUCT CARD
PART 4
Swiper • Hover • Responsive
==============================================================*/


/*==============================================================
SLIDER
==============================================================*/

.bp-related{

    position:relative;

    padding:30px 0;

}

.bp-related-slider{

    position:relative;

    overflow:hidden;

    padding:10px 4px 30px;

}

.bp-related-slider .swiper-wrapper{

    align-items:stretch;

}

.bp-related-slider .swiper-slide{

    display:flex;

    height:auto;

}

.bp-related-slider .bp-product-card{

    width:100%;

}



/*==============================================================
ARROWS
==============================================================*/

.bp-related-prev,
.bp-related-next{

    position:absolute;

    top:45%;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    border:1px solid #ECE6DB;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

    z-index:10;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.bp-related-prev{

    left:0px;

}

.bp-related-next{

    right:0px;

}

.bp-related-prev:hover,
.bp-related-next:hover{

    background:#111;

    color:#fff;

}



/*==============================================================
IMAGE OVERLAY
==============================================================*/

.bp-product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.04),
    rgba(0,0,0,0));

    opacity:0;

    transition:.4s;

}

.bp-product-card:hover .bp-product-image::after{

    opacity:1;

}



/*==============================================================
CARD HOVER
==============================================================*/

.bp-product-card:hover{

    border-color:#D7B06D;

}

.bp-product-card:hover .bp-card-inspired{

    color:#A77B2A;

}

.bp-product-card:hover .bp-card-price{

    transform:translateY(-2px);

}

.bp-card-price{

    transition:.3s;

}



/*==============================================================
SECTION HEADING
==============================================================*/

.bp-section-heading{

    text-align:center;

    margin-bottom:55px;

}

.bp-section-heading span{

    display:inline-block;

    color:#C59A43;

    font-size:15px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:14px;

}

.bp-section-heading h2{

    margin:0;

    font-size:42px;

    font-weight:700;

    color:#111;

}

.bp-section-heading p{

    max-width:640px;

    margin:20px auto 0;

    color:#777;

    font-size:17px;

    line-height:1.8;

}



/*==============================================================
DESKTOP
==============================================================*/

@media(max-width:1200px){

.bp-related{

    padding:70px 0;

}

.bp-related-prev{

    left:-12px;

}

.bp-related-next{

    right:-12px;

}

}



/*==============================================================
TABLET
==============================================================*/

@media(max-width:991px){

.bp-section-heading h2{

    font-size:34px;

}

.bp-section-heading p{

    font-size:16px;

}

.bp-related{

    padding:60px 0;

}

}



/*==============================================================
MOBILE
==============================================================*/

@media(max-width:767px){

.bp-related{

    padding:50px 0;

}

.bp-section-heading{

    margin-bottom:35px;

}

.bp-section-heading h2{

    font-size:28px;

}

.bp-section-heading p{

    font-size:15px;

    line-height:1.7;

}

.bp-related-prev,
.bp-related-next{

    display:none;

}

}



/*==============================================================
SMALL MOBILE
==============================================================*/

@media(max-width:480px){

.bp-section-heading span{

    font-size:13px;

}

.bp-section-heading h2{

    font-size:24px;

}

.bp-section-heading p{

    font-size:14px;

}

}