.elementor-4052 .elementor-element.elementor-element-355e74c{--display:flex;--gap:1rem 1rem;--row-gap:1rem;--column-gap:1rem;}.elementor-4052 .elementor-element.elementor-element-965ede0.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4052 .elementor-element.elementor-element-965ede0.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-4052 .elementor-element.elementor-element-7b5d6b0 .elementor-button{background-color:#FFFFFF;fill:#000000;color:#000000;border-style:solid;border-width:1px 1px 1px 1px;padding:10px 025px 10px 25px;}.elementor-4052 .elementor-element.elementor-element-7b5d6b0{z-index:5555;}.elementor-4052 .elementor-element.elementor-element-2b4cbfd .elementor-button{background-color:#FFFFFF;fill:#000000;color:#000000;border-style:solid;border-width:1px 1px 1px 1px;padding:10px 025px 10px 25px;}.elementor-4052 .elementor-element.elementor-element-2b4cbfd{z-index:5555;}@media(min-width:768px){.elementor-4052 .elementor-element.elementor-element-355e74c{--content-width:100%;}}@media(max-width:1024px){.elementor-4052 .elementor-element.elementor-element-965ede0.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-4052 .elementor-element.elementor-element-965ede0.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-archive-products, class: .elementor-element-965ede0 *//* 1. Make the product grid clean and spacious */
.woocommerce ul.products li.product {
    text-align: center !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /*padding: 0 10px 40px 10px !important;*/
    transition: all 0.3s ease;
}

/* 2. Style the Product Title (Like Dior) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Jost', 'Montserrat', sans-serif !important; /* Clean font */
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    text-transform: none !important;
}

/* 3. Style the Price (Small and Grey) */
.woocommerce ul.products li.product .price {
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #777777 !important;
}

/* 4. Hide the ugly default Add to Cart button (until hover) */
.woocommerce ul.products li.product .button {
    opacity: 0;
    visibility: hidden;
    background-color: #000 !important;
    color: #fff !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 0 !important;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: 10px;
}

/* Show Add to Cart on hover */
.woocommerce ul.products li.product:hover .button {
    opacity: 1;
    visibility: visible;
}

/* 5. Make images full width without borders */
.woocommerce ul.products li.product img {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    background-color: #f4f4f4; /* Light grey background for cutout images */
}

/* 6. Style the 'Sale' or 'New' Badge */
.woocommerce span.onsale {
    background-color: transparent !important;
    color: #777 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    top: 10px !important;
    left: 10px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7b5d6b0 */.elementor-4052 .elementor-element.elementor-element-7b5d6b0 {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2b4cbfd */.elementor-4052 .elementor-element.elementor-element-2b4cbfd {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
}/* End custom CSS */