/**
 * File: woo-product-carousel.css
 * Purpose: Styles for WooCommerce product carousels using Divi Woo Extensions
 * Usage: Applies to `.dwe_single_woo_product` carousel layouts and hover interactions
 * Dependencies: DWE (Divi WooCommerce Extended) carousel module structure
 *
 * Notes:
 * - Adds border and overlay hover effects to product images
 * - Enhances title and price emphasis on hover
 * - Uses ETmodules icon font for hover overlay icon (`\54`)
 * - Controlled via CSS variables for easy theming
 *
 * Key Selectors:
 * - `.dwe_single_woo_product img` — product images
 * - `.dwe_single_woo_product_thumbnail a:after` — hover overlay icon
 * - `.dwe_single_woo_product_title a`, `.dwe_single_woo_product_price` — text styling
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.dwe_single_woo_product {
    /* ------ Not in use in the current site as far as I can see. Monitor & possibly remove --------- */
    --dwe-product-image-border-color: var(--brand-yellow-trans-full);
    --dwe-product-image-border-hover-color: var(--brand-yellow-trans-none); 
    --dwe-product-price: var(--brown-medium);
    --dwe-product-overlay-bg-color: var(--tan-lightest-trans-mid);
    --dwe-product-link-color: var(--brand-accent-color-dark);
}

/* -------------------------- */




.dwe_single_woo_product img {
    border: 2px solid var(--dwe-product-image-border-color);
    transition: all 300ms ease;
    border-radius: 20px;
}

.dwe_single_woo_product:hover img{
    border: 2px solid var(--dwe-product-image-border-hover-color);
    transition: all 300ms ease;
}

.dwe_single_woo_product .dwe_single_woo_product_thumbnail a:after{
    transition: all 500ms ease!important;
    color: var(--dwe-product-link-color);
    font-family: ETmodules !important;
    font-size: 32px;
    display:flex;
    justify-content:center;
    align-items: center!important;
}

.dwe_single_woo_product:hover .dwe_single_woo_product_thumbnail a:after {
    background: var(--dwe-product-overlay-bg-color);
    content: '\54';
    color: var(--dwe-product-link-color);
    font-weight: normal;
}

.dwe_single_woo_product .dwe_single_woo_product_title a, 
.dwe_single_woo_product .dwe_single_woo_product_price  {
    font-weight: normal!important;
    color: var(--dwe-product-price);
    transition: all 300ms ease;
}

.dwe_single_woo_product:hover .dwe_single_woo_product_title a, 
.dwe_single_woo_product:hover .dwe_single_woo_product_price  {
    font-weight: 700!important;

}