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

.bph-card{

    position:relative;

    background:#fff;
     border:1px solid transparent;

    border-radius:22px;

    overflow:hidden;

    transition:.45s ease;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    height:100%;

    display:flex;

    flex-direction:column;

}

.bph-card:hover{
      border-color:#d4b07a;

    transform:translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.12),
        0 0 30px rgba(199,154,99,.12);

}

/* ==========================================================
IMAGE WRAPPER
========================================================== */

.bph-image-wrap{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        radial-gradient(circle at center 20%,
        #ffffff 0%,
        #f8f5f0 45%,
        #f1ebe3 100%);

}
.bph-image-wrap a{

    display:block;

    width:100%;

    height:100%;

    position:relative;

}
/* ==========================================================
PRODUCT IMAGES
========================================================== */

.bph-main-image,
.bph-gallery-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center center;

    /*padding:35px;*/

    opacity:0;

    transition:opacity .5s ease, transform .6s ease;

    transform:scale(.98);

}

.bph-main-image.active,
.bph-gallery-image.active{

    opacity:1;

    transform:scale(1);

}

.bph-card:hover .bph-main-image.active{

    transform:scale(1.05);

}





.bph-main-image.active{

    animation:bphFloat 6s ease-in-out infinite;

}

@keyframes bphFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}





.bph-image-wrap::after{

    content:"";

    position:absolute;

    bottom:22px;

    left:50%;

    transform:translateX(-50%);

    width:140px;

    height:18px;

    border-radius:50%;

    background:rgba(0,0,0,.10);

    filter:blur(12px);

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

.bph-sale{

    position:absolute;

    top:18px;

    left:18px;

    background:#111;

    color:#fff;

    padding:7px 16px;

    border-radius:50px;

    font-family:var(--cqa-sans);

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    z-index:20;

}

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

.bph-wishlist{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(8px);

    cursor:pointer;

    font-size:20px;

    transition:.35s;

    z-index:20;

}

.bph-wishlist:hover{

    background:#111;

    color:#fff;

    transform:rotate(15deg) scale(1.08);

}

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

.bph-content{

    display:flex;

    flex-direction:column;

    padding:22px;

    gap:10px;

    flex:1;

}

/* Inspired */

.bph-inspired{

    font-family:var(--cqa-sans);

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#C79A63;

    margin-bottom:8px;

    font-weight:500;

}

/* Product Title */

.bph-product-title{

    margin:0 0 10px;

    font-family:var(--cqa-serif);

    font-size:18px;

    font-weight:600;

    line-height:1.2;
    
  


    letter-spacing:.3px;

}

.bph-product-title a{

    color:#111;

    text-decoration:none;

}
.bph-rating{

    display:flex;

    align-items:center;

    gap:10px;
    
    min-height:24px;

    margin:5px 0;

}

.bph-stars{

    display:flex;

    gap:2px;

    font-size:15px;

    line-height:1;

}

.bph-stars .filled{

    color:#C79A63;

}

.bph-stars span{

    color:#D9D9D9;

}

.bph-review-count{

    font-family:var(--cqa-sans);

    font-size:14px;

    color:#777;

}

.bph-rating .star-rating::before{

    color:#E8C58A;

}

.bph-rating span{

    font-family:var(--cqa-sans);

    font-size:14px;

    color:#777;

}

/* Notes */

.bph-notes{

    font-family:var(--cqa-sans);

    color:#777;

   
     
    font-size:15px;

    line-height:1.8;

    margin-bottom:8px;

}

/* Price */

.bph-price{

    font-family:var(--cqa-sans);

    font-size:20px;

    font-weight:600;

    color:#111;

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:2px;

    margin-bottom:2px;

}

.bph-price del{

    color:#999;

    margin-right:10px;

    font-weight:400;

}

.bph-price ins{

    text-decoration:none;

    color:#C79A63;

}

/* Quantity */

.bph-quantity{

    font-family:var(--cqa-sans);

    color:#999;

    font-size:14px;

    margin-bottom:8px;
    
    min-height:20px;

}

/* ==========================================================
BUTTON
========================================================== */

.bph-card .button{

    display:flex !important;
    background:#111 !important;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 !important;

    width:100%;

    height:56px;

    line-height:56px;

    border-radius:14px;

    font-family:var(--cqa-sans);

    font-size:16px;

    font-weight:600;

}



.bph-card .button:hover{

    background:#C79A63 !important;

    color:#fff !important;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(199,154,99,.35);

}

.bph-products{

    display:grid;

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

    gap:32px;

    align-items:stretch;

}

.bph-card{

    height:100%;

}



.bph-card .button{

    margin-top:auto;

}

.bph-no-review{

    font-family:var(--cqa-sans);

    font-size:14px;

    color:#888;

    font-style:italic;

}





@media screen and (max-width: 767px) {
  /* Your mobile-only CSS rules go here */
  
  .bph-main-image,
.bph-gallery-image{

    

    object-fit:cover;
    

    height: 420px !important;

    
}
}