.simple-category-filter {
    display: flex;
    flex-wrap: wrap; /* Allow child elements to wrap */
}

.category-list {
    width: 20%;
    padding-right: 20px;
    background-color: #f9f9f9; /* Set background color */
    border-radius: 5px; /* Add rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow */
}

.category-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list ul li {
    position: relative;
}

.category-list ul li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease; /* Add transition effect */
}

.category-list ul li a:hover {
    background-color: #eaeaea; /* Change background color on hover */
}

.category-list ul ul {
    padding-left: 20px;
    display: none; /* Hide submenu by default */
}

.category-list ul ul ul {
    padding-left: 20px; /* Add padding for the third-level menu */
}

.product-list {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Assume the current number of products per row is 4, can be modified according to actual situation */
.product-list .product {
    width: calc(100% / 4);
    box-sizing: border-box;
    padding: 10px;
}

.load-more-button {
    text-align: center;
    margin-top: 20px;
    width: 100%; /* Button width spans the entire row */
    order: 1; /* Ensure the button is after the product list */
}

.woocommerce-loop-product__title {
    font-size: 15px; /* Set font size to 18px */
    word-wrap: break-word; /* Allow words to wrap */
    white-space: normal; /* Normal line breaks */
    max-width: 100%; /* Maximum width does not exceed the parent element (product item) width, usually the same as the image width */
}

.add_to_cart_button {
    border: 1px solid #ccc; /* Add a 1px wide gray border */
    padding: 5px 10px; /* Increase padding to create spacing between button content and border */
    border-radius: 3px; /* Add rounded corners to the border */
    text-align: center; /* Center the text */
    display: inline-block; /* Display the button as a block-level element but does not take up an entire line */
    transition: background-color 0.3s ease;
}

.add_to_cart_button:hover {
    background-color: #eaeaea; /* Change background color on hover */
}