/**
 * Theme Name:     Infinity Web Experts Child Theme
 * Author:         Infinity Web Experts Team
 * Template:       hello-elementor
 * Text Domain:	   infinity-web-experts-child-theme
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

/* Container for the product items (if not already defined) */
.woocommerce ul.products {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.custom-product-item {
    border: 1px solid #1b3a57 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 10px !important;
    text-align: center !important;
    background-color: #ffffff !important;
    transition: transform 0.3s !important;
    flex: 1 0 30%; /* Adjusts to have three items in a row; modify as needed */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    min-height: 400px; /* Set a minimum height for uniformity */
}

.custom-product-item:hover {
    transform: scale(1.05) !important;
}

.custom-product-image {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f8f8 !important;
}

.custom-product-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.product-brand-category {
    font-size: 12px;
    text-align: left !important;
    font-weight: bold !important;
    color: #d7041f !important;
    margin-bottom: 0px !important;
    margin-top: 15px !important;
}

.custom-product-title, .custom-product-title a, td>a {
    text-align: left !important;
    font-size: 16px !important; /* Changed size to 16px */
    color: #1b3a57 !important;
    margin: 10px 0 !important;
}

.custom-product-brand {
    font-size: 0.9em !important;
    color: #1b3a57 !important;
    margin-bottom: 5px !important;
}

.woocommerce ul.products li.product .price del { font-size: 12px !important; color: #ff0000 !important;}

.custom-product-price, .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, .woocommerce ul.products li.product .price {
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 0px !important;
}

.custom-product-stock {
    font-size: 0.9em !important;
    margin-bottom: 0px !important;
}

/* Flexbox for price and stock display */
.price-stock-container {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 0px !important;
}

.woocommerce ul.products li.product .button {
    margin-top: 0em !important;
}

/* Flexbox for buttons */
.button-container {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 0px !important;
    gap: 10px !important;
    border: solid #ffcb05;
    border-width: 2px 0 0 0 !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
}

.button-container .button, .button-container .contact-us-button {
    flex: 1; /* This ensures each button takes 50% width */
    max-width: 100%;
    text-align: center; /* Center-aligns the text */
}


/* Aligning buttons side by side */
.button-container a {
    flex: 1; /* Ensures buttons take equal space */
    margin: 0 5px; /* Space between buttons */
}

.in-stock {
    color: #28a745 !important;
}

.out-of-stock {
    color: #dc3545 !important;
}

.button {
    width: 100% !important;
    font-size: 12px !important;
    background-color: #1b3a57 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 5px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s !important;
}

a.contact-us-button {
    width: 100% !important;
    border-radius: 3px !important;
    margin: 0 !important;
    padding: 10px 8.4px !important;
    font-size: 12px !important;
    background-color: #1b3a57 !important;
    color: #ffffff !important;
    border: none !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s !important;
}

.button:hover, a.contact-us-button:hover {
    background-color: #ffcb05 !important;
    color: #1b3a57 !important;
}


.woocommerce span.onsale { background-color: #1b3a57 !important;}

@media (min-width: 1025px) {
    .elementor-widget-wc-archive-products .woocommerce.columns-4 ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
}
    }
}

@media (max-width: 768px) {
    .custom-product-item {
        flex: 1 0 45%; /* 2 items per row */
        min-height: 300px; /* Adjust height for smaller screens */
    }
}


@media (max-width: 767px) {
    .elementor-widget-wc-archive-products .woocommerce.columns-4 ul.products {
        grid-column-gap: 0px !important;
        grid-row-gap: 0px !important;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .custom-product-item {
        flex: 1 0 100%; /* 1 item per row */
        min-height: 250px; /* Adjust height for smaller screens */
    }
    
   .button, a.contact-us-button {
       padding: 10px 28px !important;
   }
    }











/* Cart Page Title */
.cart-title {
    text-align: center;
    font-size: 2.5rem;
    color: #295f2d; /* Change to your preferred color */
    margin-bottom: 20px;
}

a.button.checkout-button {
    margin-top: 10px !important;
}

button.button.apply-coupon-button {
    margin-top: 10px !important;
}

/* Cart Columns */
.custom-cart-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Flex Container for Cart Columns */
.cart-columns {
    display: flex;
    justify-content: space-between;
}

/* Left Column - Cart Items */
.cart-items-column {
    flex: 2;
    margin-right: 20px;
}

/* Cart Items Table */
.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.shop_table th,
.shop_table td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.product-image {
    width: 100px; /* Fixed width for images */
}

.product-name a {
    color: #295f2d; /* Link color */
    text-decoration: none;
}

.product-name a:hover {
    text-decoration: underline;
}

/* Update Cart Button Styles */
.update-cart {
    text-align: center;
    margin: 20px 0;
}

.update-cart-button {
    background-color: #ffcb05; /* Button background */
    color: #1b3a57; /* Button text color */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.update-cart-button:hover {
    background-color: #e6b600; /* Darker on hover */
}

/* Continue Shopping Button */
.continue-shopping-button {
    background-color: #295f2d; /* Button background */
    color: white; /* Button text color */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.continue-shopping-button:hover {
    background-color: #234b20; /* Darker on hover */
}

/* Right Column - Cart Totals */
.cart-totals-column {
    flex: 1;
    background: #f1f1f1;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Cart Totals */
.cart-totals {
    margin-top: 20px;
}

.cart-totals h3 {
    color: #295f2d;
}

.cart-totals .subtotal,
.cart-totals .fee,
.cart-totals .tax,
.cart-totals .total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.cart-totals .total {
    font-weight: bold;
}

/* Checkout Button */
.checkout-button {
    background-color: #295f2d; /* Button background */
    color: white; /* Button text color */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.checkout-button:hover {
    background-color: #234b20; /* Darker on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .cart-columns {
        flex-direction: column;
    }
    
    .cart-items-column {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .cart-totals-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .custom-cart-page {
        display: flex !important;
        flex-direction: column !important;
    }

    .cart-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    .cart-items-column,
    .cart-totals-column {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .cart-items {
        overflow-x: auto !important;
    }

    .shop_table {
        width: 100% !important;
        min-width: 100% !important;
    }

    .shop_table th,
    .shop_table td {
        padding: 10px !important;
    }

    .product-name,
    .product-price,
    .product-quantity,
    .product-subtotal,
    .product-remove {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }

    .product-image {
        display: none !important;
    }

    .continue-shopping {
        text-align: center !important;
    }

    .update-cart {
        text-align: center !important;
    }

    .apply-coupon {
        margin-top: 20px !important;
    }

    .apply-coupon input {
        width: 100% !important;
        margin-right: 10px !important;
    }

    .total,
    .subtotal {
        display: flex !important;
        justify-content: space-between !important;
    }

    .checkout-button {
        width: 100% !important;
    }
}