/*
 Theme Name:     Divi Child
 Template:       Divi
 Description:    Custom Woo Layout for Divi
 Version:        1.0
*/


/* 1. The Card Container */
.woocommerce ul.products li.product {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    padding: 20px !important;
    background: #fff;
    transition: transform 0.2s ease;
}

/* 2. Brand Name Styling */
.brand-label {
    display: block;
    font-size: 12px;
    color: #000;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Container spacing */
.product-card-buttons {
    display: flex !important;
    width: 100% !important;        /* Force container to fill the card */
    box-sizing: border-box !important;
    gap: 10px;
    padding: 15px !important;     /* Adjust padding to match your card edges */
}

/* Base button styles */
.product-card-buttons .button {
    flex: 1 !important;           /* Force buttons to grow and fill the space equally */
    display: flex !important;     /* Changed from inline-flex to flex */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    position: relative;           /* Required for the absolute arrow */
    text-decoration: none !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
}

/* Button 1: Outlined (Προσθήκη) */
.btn-outline {
    background-color: transparent !important;
    color: #b89512 !important;
    border-color: #b89512 !important;
}

.btn-outline:hover {
    background-color: #b89512 !important;
    color: #fff !important;
}

/* Button 2: Solid (Αγορά) */
.btn-solid {
    background-color: #b89512 !important;
    color: #fff !important;
    border-color: #b89512 !important;
}

.btn-solid:hover {
    background-color: #9a7d0e !important;
    border-color: #9a7d0e !important;
}

/* 1. Hide the arrow and take it out of the text alignment flow */
.product-card-buttons .button:after {
    content: "\35" !important; 
    font-family: 'ETmodules' !important;
    font-size: 16px;
    display: inline-block;
    
    /* Change to absolute so it doesn't push the text */
    position: absolute !important;
    right: 15px; /* Position it near the right edge */
    top: 50%;
    transform: translateY(-50%) translateX(10px) !important; /* Centered vertically, shifted right */
    
    /* Animation Properties */
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* 2. Show the arrow on hover and slide it into view */
.product-card-buttons .button:hover:after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important; /* Slides into its 'right: 15px' position */
}

/* 3. Ensure the text has room so it doesn't overlap the arrow on hover */
.product-card-buttons .button {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.woocommerce ul.products li.product h2 {
    min-height: 50px; /* Adjust based on your title lengths */
    display: flex;
    align-items: center;
}

/* Mobile Styles (Tablets and Phones) */
@media all and (max-width: 1280px) {
    .product-card-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Forces children (buttons) to fill the full width */
        width: 100% !important;
        gap: 12px !important;
        padding: 10px 0 !important; /* Vertical spacing only */
        box-sizing: border-box !important;
    }

    .product-card-buttons .button {
        width: 100% !important; /* Forces buttons to take full width of the card */
        flex: none;             /* Disables the equal-width flex logic */
    }
    
    /* Optional: Center the text more clearly on mobile */
    .product-card-buttons .button {
        justify-content: center;
        padding: 12px 5px !important; /* Slightly taller buttons for easier tapping */
    }
}

/* Force 1 Column on Mobile for Divi Woo Products */
@media all and (max-width: 767px) {
    /* Target the product list item */
    .woocommerce ul.products li.product, 
    .et_pb_module.et_pb_shop ul.products li.product, .et_pb_wc_related_products ul.products.columns-4 li.product {
        width: 100% !important;    /* Forces full width */
        margin-right: 0 !important; /* Clears Divi's right margin */
        margin-bottom: 30px !important; /* Adds space between stacked cards */
        float: none !important;     /* Prevents side-by-side floating */
        clear: both;
    }

    /* Optional: Ensure the product image doesn't get too massive/blurry */
    .woocommerce ul.products li.product img {
        width: 100% !important;
        height: auto !important;
    }
}



/* 1. Hide the stray Compare text at the bottom */
.woocommerce ul.products li.product > .compare,
.woocommerce ul.products li.product > .yith-woocomp-add-to-list,
.woocommerce ul.products li.product > a.compare {
    display: none !important;
}

/* 1. Reset container to align horizontally next to price */
.product-utility-icons {
    display: flex !important;
    flex-direction: row !important; /* Horizontal alignment */
    justify-content: flex-end !important; /* Pushes icons to the right */
    align-items: center !important;
    gap: 12px !important;
    margin-top: -30px !important; /* Pulls icons up to align with the price line */
    position: relative !important;
    z-index: 9;
    width: auto !important;
    float: right; /* Helps alignment next to the price */
}

/* 2. Force the Wishlist Button to show */
.product-utility-icons .yith-wcwl-add-to-wishlist,
.product-utility-icons .yith-wcwl-add-button,
.product-utility-icons .yith-wcwl-add-to-wishlist-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Global Icon Reset for all 3 buttons */
.product-utility-icons .yith-wcwl-add-to-wishlist-button,
.product-utility-icons a.compare,
.product-utility-icons .woosq-btn {
    background: transparent !important;
    border: none !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    position: relative !important;
}

/* 4. Hide all plugin junk (SVG, Text, Labels) */
.product-utility-icons svg, 
.product-utility-icons span,
.product-utility-icons .ajax-loading {
    display: none !important;
}

/* 5. Inject the Font Icons */
.product-utility-icons .yith-wcwl-add-to-wishlist-button::before,
.product-utility-icons a.compare::before,
.product-utility-icons .woosq-btn::before {
    font-family: 'ETmodules' !important;
    font-size: 22px !important;
    color: #000 !important;
    content: "" !important;
    display: block !important;
    visibility: visible !important;
}

/* Specific Codes */
.product-utility-icons .yith-wcwl-add-to-wishlist-button::before { content: "\e030" !important; } /* Heart */
.product-utility-icons a.compare::before { content: "\2b" !important; } /* Compare */
.product-utility-icons .woosq-btn::before { content: "\55" !important; } /* Search */

/* Hover */
.product-utility-icons a:hover::before,
.product-utility-icons button:hover::before {
    color: #b89512 !important;
}