/*
// -------------------------------------------------------------------
// OVERRIDE Woo Listview
// -------------------------------------------------------------------
// ul.products
// -------------------------------------------------------------------
// - Remove clear
// -------------------------------------------------------------------
// RELATED
// - OVERRIDE Woo Result count and Sorting
// -------------------------------------------------------------------
// Workaround:  
// Use clear:both on
// .woocommerce .products ul, 
// .woocommerce ul.products 
// -------------------------------------------------------------------
// So result count and ordering and listview can 
// live happily together and woo css takes care for
// mobile adjustments
// -------------------------------------------------------------------
*/
/*
.woocommerce .products ul, 
.woocommerce ul.products 
{
    clear: none !important;
}
*/


/*
// -------------------------------------------------------------------
// OVERRIDE Woo Listview
// -------------------------------------------------------------------
// ul.products
// -------------------------------------------------------------------
// - ul:before
// - ul:after
// -------------------------------------------------------------------
// Why?
// - This is a clear fix trick for float
// - We do not need it anymore
// -------------------------------------------------------------------
// Hint
// - This clear fix creates a first/last empty column in the grid
// -------------------------------------------------------------------
*/
.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before {
    content: none !important;
    display: none !important;
}



/*
// -------------------------------------------------------------------
// OVERRIDE Woo Listview
// -------------------------------------------------------------------
// ul.li.product
// -------------------------------------------------------------------
// - Remove float 
// - Remove clear
// -------------------------------------------------------------------
*/

/* Remove float from WooCommerce product images and summary */
.woocommerce div.product div.images,
.woocommerce div.product div.summary 
{
    float: none !important;
    clear: none !important;

    width: 100% !important;
    display: block !important;

	/* outline: 5px dashed rgba(107, 142, 35, 0.5); */
}

/* Remove float from shop/product grid items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product:nth-child(n) 
{
    float: none !important;
    clear: none !important;

    display: block !important;
    width: 100% !important;
    margin: 0!important;

	/* outline: 5px dashed rgba(0, 255, 0, 0.5); */
}


/*
// -------------------------------------------------------------------
// Divi Responsive Helper 
// -------------------------------------------------------------------
// Zusaetzliches, automatisch erzeugtes CSS neutralisieren
// -------------------------------------------------------------------
// Unerwuenschte width, margin, float, clear
// -------------------------------------------------------------------
// "body" vor .woocommerce-page ist noetig fuer hoehere Spezifitaet
// -------------------------------------------------------------------
*/
body.woocommerce-page ul.products li.product:nth-child(n),
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, 
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, 
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, 
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product, 
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product, 
body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product 
{
    float: none !important;
    clear: none !important;

    display: block !important;
    width: 100% !important;
    margin: 0!important;

}




/*
// -------------------------------------------------------------------
// OVERRIDE Woo Product Columns
// -------------------------------------------------------------------
// - Remove CSS width
// - Remove margin-right
// - Remove margin-bottom
// -------------------------------------------------------------------
*/
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product 
{
    width: 100% !important;
    margin: 0 !important;

	/* outline: 5px dashed rgba(119, 136, 153, 0.5); */
}


/*
// -------------------------------------------------------------------
// GRID LAYOUT Woo Product Columns
// -------------------------------------------------------------------
// Das Products Module von Divi unterstuetzt 1-6 cols
// und "default" = 3 cols
// -------------------------------------------------------------------
// Wir gehen den anderen Weg: 
// - Es ist egal, welche Anzahl von Spalten ausgewaehlt ist
// - Eine Spalte ist immer 250px breit. 
// - Es gibt soviele Spalten, wie Platz da ist
// -------------------------------------------------------------------
*/

/* Grid container */
.woocommerce ul.products,
.woocommerce-page ul.products 
{
    /* Grid layout properties */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    
    /* Ensure proper spacing and alignment */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Responsive behavior */
    width: 100% !important;
}

.woocommerce ul.products li.product 
{
    /* Grid item properties */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;

    /* Add some padding to the box */
    padding: 20px !important;
    /* padding-top: 0 !important */
}






/*
// -------------------------------------------------------------------
// Produktkachel Styling siehe ./product.css
// -------------------------------------------------------------------
*/

/* Product image outline and centering */
/*
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img 
{
    outline: 5px dashed hotpink !important;
}
*/

/* Center Divi shop images */
.woocommerce ul.products li.product .et_shop_image,
.woocommerce-page ul.products li.product .et_shop_image 
{
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/*
// -------------------------------------------------------------------
// OVERRIDE Divi Overlay Background
// -------------------------------------------------------------------
// Make et_overlay background fully transparent
// -------------------------------------------------------------------
*/
.et_overlay {
    background: transparent !important;
}




/*
// -------------------------------------------------------------------
// OVERRIDE Woo Result count and Sorting
// -------------------------------------------------------------------
// - Remove float
// -------------------------------------------------------------------
// No, it's too complicated to do it in the woo float bloat
// -------------------------------------------------------------------
// Workaround:  
// Use clear:both on
// .woocommerce .products ul, 
// .woocommerce ul.products 
// -------------------------------------------------------------------
// So result count and ordering and listview can 
// live happily together and woo css takes care for
// mobile adjustments
// -------------------------------------------------------------------
*/
/*
.woocommerce-result-count 
{
    float: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.woocommerce-ordering {
    float: none !important;
    display: inline-block !important;
    width: 100%;
}
*/