.woocommerce.list-style-list ul.products.elementor-grid.columns-4 {
    display: grid;
    grid-template-columns: 1fr !important;
}


.woocommerce.list-style-list ul.products.elementor-grid.columns-4 li.product {
    display: grid;
    column-gap: 2rem;
    grid-template-columns: 200px 3fr 1fr !important;
    grid-template-rows: 2.75em auto 1fr !important; 
    grid-auto-flow: condense;
    grid-template-areas:
        'IMAGE RATING PRICE'
        'IMAGE TITLE DELIVERY'
        'IMAGE DESCRIPTION BUTTON';
    align-items: start;
    
}

@media (max-width: 767px) {
.woocommerce.list-style-list ul.products.elementor-grid.columns-4 li.product {
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: 1.5em 2.75em auto auto auto 100px !important; 
    grid-template-areas:
        'IMAGE RATING'
        'IMAGE PRICE'
        'IMAGE TITLE'
        'IMAGE DESCRIPTION'
        'IMAGE DELIVERY'
        'IMAGE BUTTON';
    }
}

.woocommerce.list-style-list  ul.products.elementor-grid .add_to_cart_button {
    grid-area: BUTTON;
    width: max-content;
    
}

.woocommerce.list-style-list  ul.products.elementor-grid .woocommerce-LoopProduct-link {
    grid-area: TITLE;
}
.woocommerce.list-style-list  ul.products.elementor-grid .woocommerce-LoopProduct-link:first-of-type {
    grid-area: IMAGE;
}

.woocommerce.list-style-list  ul.products.elementor-grid .loop-star-rating {
    grid-area: RATING;
    align-self: end;
}

.woocommerce.list-style-list  ul.products.elementor-grid .price,
.woocommerce.list-style-list  ul.products.elementor-grid .wc-gzd-additional-info {
    grid-area: PRICE;
}

.woocommerce.list-style-list  ul.products.elementor-grid .price.wc-gzd-additional-info {
    margin-top: 2em !important; 
}

.woocommerce.list-style-list  ul.products.elementor-grid .delivery-time-info {
    grid-area: DELIVERY;
}
.woocommerce.list-style-list  ul.products.elementor-grid .offner-product-loop-attributes {
    grid-area: DESCRIPTION;
}



.offner-list-style-wrapper {
    float: right;
    margin: 0 0 0 10px;
    display: flex;
    overflow: hidden;
}

.offner-list-style-wrapper button {
    vertical-align: center;
    align-items: center;
    display: flex;
    border-radius: 0;
    background: var(--e-global-color-weiss);
    border: 1px solid  var(--e-global-color-text);
    border-radius: 10px 0 0 10px;
    fill: var(--e-global-color-text);
}
.offner-list-style-wrapper button + button {
    border-radius: 0 10px 10px 0; 
}

button.list-style-grid {
    background: var(--e-global-color-text);
    fill: var(--e-global-color-weiss);
}
button.list-style-list {
    background: var(--e-global-color-weiss);
    fill: var(--e-global-color-text);
}

body.list-style-list button.list-style-list {
    background: var(--e-global-color-text);
    fill: var(--e-global-color-weiss);
}
body.list-style-list button.list-style-grid {
    background: var(--e-global-color-weiss);
    fill: var(--e-global-color-text);
}

.offner-list-style-wrapper svg {
    width: 1.3em;
    height: 1.3em;
    fill: inherit;
    margin: 0px;
    vertical-align: center;
}