/* =====================================================
PEPTEA SCIENCES — PREMIUM WHITE LUXURY SHOP
CLEAN + FUTURISTIC + PREMIUM
PASTE INTO ADDITIONAL CSS
===================================================== */


/* =====================================================
SHOP BACKGROUND
===================================================== */

body.woocommerce-shop,
body.post-type-archive-product{

    background:#FAF7F6 !important;

}


/* =====================================================
MAIN CONTAINER
===================================================== */

.woocommerce .content-area{

    max-width:1600px !important;

    margin:auto !important;

    padding:60px 50px 120px !important;

}


/* =====================================================
SHOP TITLE
===================================================== */

.woocommerce-products-header h1{

    font-family:"Cormorant Garamond", serif !important;

    font-size:72px !important;

    color:#7A5A55 !important;

    font-weight:600 !important;

    margin-bottom:18px !important;

    letter-spacing:-1px !important;

}


/* =====================================================
RESULT COUNT + SORT
===================================================== */

.woocommerce-result-count{

    color:#8B716C !important;

    font-size:14px !important;

}

.woocommerce-ordering select{

    height:56px !important;

    padding:0 22px !important;

    border:none !important;

    border-radius:18px !important;

    background:white !important;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05) !important;

    color:#7A5A55 !important;

}


/* =====================================================
PRODUCT GRID
===================================================== */

.woocommerce ul.products{

    display:grid !important;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr)) !important;

    gap:40px !important;

}


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

.woocommerce ul.products li.product{

    position:relative !important;

    overflow:hidden !important;

    padding:34px 28px 30px !important;

    border-radius:36px !important;

    background:white !important;

    border:
    1px solid rgba(215,170,163,0.16) !important;

    box-shadow:
    0 18px 45px rgba(0,0,0,0.04) !important;

    transition:0.45s ease !important;

}


/* =====================================================
TOP GLOW
===================================================== */

.woocommerce ul.products li.product::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(215,170,163,0.16),
    transparent 70%
    );

}


/* =====================================================
BOTTOM LINE DESIGN
===================================================== */

.woocommerce ul.products li.product::after{

    content:"";

    position:absolute;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

    width:70%;
    height:1px;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(215,170,163,0.45),
    transparent
    );

}


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

.woocommerce ul.products li.product:hover{

    transform:
    translateY(-10px) !important;

    box-shadow:
    0 28px 70px rgba(0,0,0,0.10) !important;

}


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

.woocommerce ul.products li.product img{

    width:78% !important;

    margin:auto !important;

    margin-bottom:26px !important;

    transition:0.45s ease !important;

    filter:
    drop-shadow(0 22px 35px rgba(0,0,0,0.14));

}


/* IMAGE HOVER */

.woocommerce ul.products li.product:hover img{

    transform:
    scale(1.05)
    translateY(-4px);

}


/* =====================================================
PRODUCT TITLE
===================================================== */

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{

    font-size:19px !important;

    color:#684D48 !important;

    font-weight:700 !important;

    text-align:center !important;

    margin-bottom:14px !important;

    letter-spacing:0.4px !important;

}


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

.woocommerce ul.products li.product .price{

    color:#C08A82 !important;

    font-size:20px !important;

    font-weight:700 !important;

    text-align:center !important;

    margin-bottom:22px !important;

}


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

.woocommerce ul.products li.product .button,
.woocommerce a.button{

    width:100% !important;

    height:58px !important;

    border:none !important;

    border-radius:18px !important;

    background:
    linear-gradient(
    135deg,
    #D7AAA3,
    #C28E86
    ) !important;

    color:white !important;

    font-size:14px !important;

    font-weight:600 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-shadow:
    0 14px 30px rgba(215,170,163,0.30) !important;

    transition:0.4s ease !important;

    position:relative !important;

    overflow:hidden !important;

}


/* BUTTON SHINE */

.woocommerce ul.products li.product .button::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.30),
    transparent
    );

    transition:0.7s ease;

}

.woocommerce ul.products li.product .button:hover::before{

    left:120%;

}


/* BUTTON HOVER */

.woocommerce ul.products li.product .button:hover{

    transform:
    translateY(-2px) !important;

    box-shadow:
    0 18px 40px rgba(215,170,163,0.40) !important;

}


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

.woocommerce span.onsale{

    background:
    linear-gradient(
    135deg,
    #D7AAA3,
    #B9857D
    ) !important;

    border:none !important;

    border-radius:50px !important;

    padding:10px 16px !important;

    font-size:11px !important;

    font-weight:700 !important;

    top:18px !important;

    left:18px !important;

}


/* =====================================================
PAGINATION
===================================================== */

.woocommerce nav.woocommerce-pagination{

    margin-top:80px !important;

}

.woocommerce nav.woocommerce-pagination ul{

    border:none !important;

    display:flex !important;

    justify-content:center !important;

    gap:14px !important;

}

.woocommerce nav.woocommerce-pagination ul li{

    border:none !important;

}

.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a{

    width:54px !important;
    height:54px !important;

    border-radius:18px !important;

    background:white !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    color:#7A5A55 !important;

    font-weight:600 !important;

    border:
    1px solid rgba(215,170,163,0.20) !important;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.04);

    transition:0.35s ease !important;

}

.woocommerce nav.woocommerce-pagination ul li span.current{

    background:
    linear-gradient(
    135deg,
    #D7AAA3,
    #B9857D
    ) !important;

    color:white !important;

}


/* =====================================================
BREADCRUMB
===================================================== */

.woocommerce-breadcrumb{

    margin-bottom:30px !important;

    color:#9C7D78 !important;

}

.woocommerce-breadcrumb a{

    color:#B9857D !important;

    text-decoration:none !important;

}


/* =====================================================
PRODUCT CARD GLASS HOVER
===================================================== */

.woocommerce ul.products li.product:hover{

    background:
    linear-gradient(
    180deg,
    #FFFFFF,
    #FFF8F6
    ) !important;

}


/* =====================================================
SEARCH BAR STYLE
===================================================== */

.peptea-shop-search input{

    width:100%;

    height:72px;

    border:none;

    border-radius:24px;

    padding:0 28px;

    background:white;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.06);

}


/* =====================================================
FILTER SIDEBAR
===================================================== */

.widget-area .widget{

    padding:28px !important;

    border-radius:28px !important;

    background:white !important;

    border:
    1px solid rgba(215,170,163,0.16) !important;

    box-shadow:
    0 14px 35px rgba(0,0,0,0.04) !important;

}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:991px){

    .woocommerce .content-area{

        padding:
        40px 22px 90px !important;

    }

    .woocommerce-products-header h1{

        font-size:52px !important;

    }

}


@media(max-width:600px){

    .woocommerce-products-header h1{

        font-size:42px !important;

    }

    .woocommerce ul.products{

        grid-template-columns:1fr !important;

        gap:24px !important;

    }

    .woocommerce ul.products li.product{

        padding:28px 22px 26px !important;

        border-radius:28px !important;

    }

    .woocommerce ul.products li.product img{

        width:72% !important;

    }

}
/* MAKE PRODUCT CARD BACKGROUND FULLY WHITE */

.woocommerce ul.products li.product{
    background:#ffffff !important;
}

/* REMOVE GREY IMAGE BACKGROUND */

.woocommerce ul.products li.product img{
    background:transparent !important;
}

/* REMOVE ANY INNER PRODUCT IMAGE WRAPPER COLOR */

.woocommerce ul.products li.product a img{
    background:#ffffff !important;
    border-radius:20px !important;
}
/* Proceed To Checkout Button */
.wc-block-cart__submit-button,
.wc-block-components-button,
.wc-block-components-button__text,
.wp-element-button{
    background:#b87a74 !important;
    border-color:#b87a74 !important;
    color:#fff !important;
}

/* Hover */
.wc-block-cart__submit-button:hover,
.wc-block-components-button:hover,
.wp-element-button:hover{
    background:#a96e68 !important;
    border-color:#a96e68 !important;
}

/* Links */
.wc-block-cart a,
.wc-block-components-totals-item__label a{
    color:#b87a74 !important;
}
/* Center Product Buttons */
.woocommerce ul.products li.product,
.wc-block-grid__product{
    text-align:center !important;
}

/* Premium Glass Add To Cart Button */
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.add_to_cart_button{
    
    background:rgba(184,122,116,.85) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.25) !important;
    
    color:#fff !important;
    
    border-radius:14px !important;
    
    padding:14px 28px !important;
    
    font-weight:600 !important;
    
    box-shadow:
        0 8px 25px rgba(184,122,116,.25),
        inset 0 1px 1px rgba(255,255,255,.25);
        
    transition:all .3s ease !important;
}

/* Product Name */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.wc-block-grid__product-title{
    color:#7d5b54 !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:0.5px;
    text-align:center !important;
}

/* Product Price */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price{
    color:#c18b84 !important;
    font-weight:700 !important;
    font-size:18px !important;
    text-align:center !important;
}

/* Product Links */
.woocommerce ul.products li.product a{
    text-decoration:none !important;
}

/* Center Everything */
.woocommerce ul.products li.product{
    text-align:center !important;
}