/* 1. CENTER THE GRID & RESET CONTAINER */
.custom-cat-grid ul.products,
.custom-cat-grid .woocommerce ul.products {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2. BOX SIZE & LAYOUT */
.custom-cat-grid li.product-category {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    
    /* Force the square shape */
    width: 220px !important;
    height: 220px !important;
    margin-bottom: 20px !important;
}

/* 3. THE LINK (COLORS & STYLE) */
.custom-cat-grid li.product-category a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;

    /* --- COLOR SETTINGS (NORMAL) --- */
    border: 2px solid #B08D57 !important;  /* Dark Brown Border */
    background-color: #F8F0E3 !important;  /* Light Brown Background */
    border-radius: 8px !important;
    
    /* The White Gap */
    box-shadow: inset 0 0 0 6px #ffffff !important; 
    padding: 20px !important; 
}

/* 4. TEXT COLOR (NORMAL) */
.custom-cat-grid li.product-category .woocommerce-loop-category__title {
    color: #B08D57 !important; /* Dark Brown Text */
    font-size: 22px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    white-space: normal !important;
}

/* 5. HOVER EFFECTS (SWAP COLORS) */
.custom-cat-grid li.product-category a:hover {
    background-color: #B08D57 !important; /* Dark Brown Background */
    border-color: #B08D57 !important;
    box-shadow: none !important; /* Remove white gap */
    transform: translateY(-5px); 
}

.custom-cat-grid li.product-category a:hover .woocommerce-loop-category__title {
    color: #FFFFFF !important; /* Text turns White */
}

/* 6. CLEANUP (Hide images & counts) */
.custom-cat-grid li.product-category img, 
.custom-cat-grid li.product-category .woocommerce-loop-category__image,
.custom-cat-grid .count {
    display: none !important;
}
/* --- MOBILE LAYOUT: AGGRESSIVE GRID FIX --- */
@media screen and (max-width: 768px) {
    
    /* 1. Force the Main Container into a 2-Column Grid */
    .custom-cat-grid ul.products,
    .custom-cat-grid .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Forces 2 equal columns */
        grid-auto-flow: row !important; /* Fills row by row */
        gap: 15px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Neutralize the List Items */
    .custom-cat-grid li.product-category {
        width: auto !important; /* Let Grid control width */
        margin: 0 !important;   /* Kill all margins */
        float: none !important; /* Kill floats */
        clear: none !important; /* Kill clears (The culprit!) */
        
        /* Box Shape */
        height: auto !important;
        aspect-ratio: 1 / 1 !important; 
        min-height: 140px !important;
    }

    /* 3. VITAL: Kill the "Clear" elements WooCommerce adds */
    /* This removes the invisible walls causing the 1-2-1 layout */
    .custom-cat-grid .woocommerce ul.products::before,
    .custom-cat-grid .woocommerce ul.products::after,
    .custom-cat-grid ul.products::before,
    .custom-cat-grid ul.products::after {
        content: none !important;
        display: none !important;
    }

    /* 4. Kill the <br> tags sometimes injected between items */
    .custom-cat-grid br {
        display: none !important;
    }

    /* 5. Styling Adjustments */
    .custom-cat-grid li.product-category .woocommerce-loop-category__title {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .custom-cat-grid li.product-category a {
        box-shadow: inset 0 0 0 4px #ffffff !important; 
        padding: 10px !important;
    }
}











/* 1. Turn the Text Container into a Split Grid */
.product-content-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 2. TITLE: Left Side (Order 1) */
.product-content-inner h3.product_title {
    width: 62% !important; 
    order: 1 !important;
    text-align: left !important;
    
    color: #005F60 !important; /* Teal */
}

/* 3. BUTTON: Right Side (Order 2) */
.product-content-inner .add_to_cart_button {
    width: 35% !important; 
    order: 2 !important;
    
    background-color: #E87C06 !important; /* Orange */
    color: #fff !important;
    border-radius: 50px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

/* 4. RATING: Left Side (Order 3 - Under Title) */
.product-content-inner .star-rating {
    width: 50% !important; 
    order: 3 !important;
    float: none !important;
    text-align: left !important;
    margin: 5px 0 !important;
    
    /* FORCE YELLOW COLOR */
    color: #FFCC00 !important; 
}

/* Fix for empty stars or inner spans to ensure they are ALL yellow */


/* 5. WISHLIST: Right Side (Order 4 - Under Button) */
.product-content-inner .product-share-wrap {
    width: 35% !important;
    order: 4 !important;
    text-align: center !important;
}

/* Wishlist Heart Color (Teal) */
.product-content-inner .wishlist-wrap a {
    color: #005F60 !important;
}

/* 6. PRICE: Left Side (Order 5 - Under Rating) */
.product-content-inner .price {
    width: 50% !important; 
    order: 5 !important;
    
    text-align: left !important;
    display: block !important;
     color: #005F60 !important; /* Teal */
}

/* 7. Hide Extra Icons */
.product-content-inner .quick-look, 
.product-content-inner .share-wrap {
    display: none !important;
}

/* 8. Ensure Image stays at top */
figure.post-image {
    margin-bottom: 15px !important;
}