SHOPP horizontal list – problem with classes .product and .product list

Hi

I’m using the ecommerce plugin Shopp for my website. All is being easily customised up to now, except for this:

I’m trying to create an horizontal list of products using display:inline as usual. However, there seem to be two class for product: “.product” and “.product first”. I can inline these two classes but not the every product (it creates a vertical list for .product, and a vertical list for .product first)!
Anyone knows how to work with this?

Here’s the code (apologies for the long list!):

<div class=“category”>

<ul class=”products”>
:: before
<li class=”product first” itemscope itemtype=”https://schema.org/Product”&gt;

<div class=”frame”>
</div>

<li class=”product” itemscope itemtype=”https://schema.org/Product”&gt;

<div class=”frame”>
</div>

<li class=”product first” itemscope itemtype=”https://schema.org/Product”&gt;

<div class=”frame”>
</div>

<li class=”product” itemscope itemtype=”https://schema.org/Product”&gt;

<div class=”frame”>
</div>

::after

</div>

and the css (unless there is other css code to restyle for this):

.shopp_page .products { text-align:left; padding:0; margin:0; zoom:1; display: inline; width: 100%;}
.shopp_page .products:before,
.shopp_page .products:after {content:””; display: inline;}
.shopp_page .products:after {clear:both;}
.shopp_page .products .product { background:#F00; padding:0; margin-right: 100px; display: inline; width: 1180px;}
.shopp_page .frame { border: none; }
.shopp_page .products, .shopp_page .products ul { width: 100%; margin: 0; padding: 0; display: inline;}
.shopp_page .products > .product { z-index: 3; float: left; width: 1180px; display: inline;}
.shopp_page .products > .product.first { z-index: 3; float: left; width: 1180px; display: inline; }
.shopp-product ul,
.shopp-product ol { display: inline; }