[Divi] Aplica estilo al shortcode de WooCommerce para mostrar productos en 4 columnas

woocommerce-product-shortcode-divi-style.css

.et-db #et-boc ul.products.columns-4 li.product {
    list-style: none;
    text-align: center;
    position: relative;
}

.et-db #et-boc ul.products li.product img {
    display: block;
    margin: 0 auto 1.618em;
}

.et-db #et-boc ul.products li.product h2{
  	margin-bottom: 8px;
  	line-height:25px;
}

.et-db #et-boc ul.products li.product .price {
    display: block;
    margin-bottom: 1rem;
  	color: #6D6D6D;
}

.et-db #et-boc ul.products li.product a.button{
  	padding: .6180469716em 1.41575em;
  	background-color: #c2c530;
  	color: #fff;
  	font-weight:600;
  	display: inline;
}

@media (min-width: 768px){
.et-db #et-boc ul.products.columns-4 li.product {
    width: 22.05%;
    margin-right: 3.8%;
}
}

@media (max-width: 479px){
  .et-db #et-boc .et_pb_column.column-background-content{
  margin-bottom: 35px !important;
	}
  .et-db #et-boc ul.products{
    margin-left: 0px !important;
  }
  
  .et-db #et-boc ul.products.columns-4 li.product {
    margin: 0 0 11.5% 0!important;
    width: 100%!important;
	}
}