<product-recommendations class="section">

<div class="container">
  <h2 class="h4 section__heading text-start">
    Trending Now
  </h2>
</div>

<carousel-slider class="carousel block">
  <div class="container relative">
    <div class="slider is-grabbable" id="most-recent">
      <div class="container products-grid-container">
        <ul class="slider__grid grid grid-flow-col auto-cols-2 small-cards-mobile md:auto-cols-3 lg:auto-cols-4 xl:auto-cols-5 small-cards-desktop gap-x-theme gap-y-8" role="list">
        {% for product in mostViewedProducts %}
          <li class="slider__item">   
          <product card class="card card--product h-full card--no-lines relative flex">
            <div class="card__media has-hover-image relative">
              <a href="{{ product.url }}" class="media block relative js-prod-link">
                
                {% comment %}<img src="{{ product.featured_image | img_url: '251x334' | img_tag }}">{% endcomment %}
                <img src="{{ product.featured_image | img_url: '300x400', crop: 'center' }}">

              </a>
            </div>
            <div class="card__info-container flex flex-col flex-auto relative">
              <div class="card__info w-full">
                <div class="card__info-inner inline-block w-full">
                    <p class="card__title font-bold mt-1 mb-0">
                        <a href="{{ product_url }}" class="card-link text-current js-prod-link">
                            {{- product.title | escape -}}
                        </a>
                    </p>
                <div class="price price--on-sale price--sold-out price--top">

{% if product.compare_at_price_max > 0 %}
    <p class="price__default">{{ product.price | money }} <s class="price__was">{{ product.compare_at_price_max | money }}</s></p>
    
    {% else %}
    <p class="price__default">{{ product.price | money }}</p>
    {% endif %}

                </div>

                </div>
                
              </div>
              
            </div>
          </product>
            
            

          </li>
        {%- endfor -%}
        </ul>
      </div>
    </div>
          <div class="slider-nav absolute top-middle end {% if settings.slider_show_arrows == 'hover' %}slider-nav--show-on-hover no-hover-hidden {% endif %}hidden md:block no-js-hidden">
            <button type="button" class="slider-nav__btn tap-target btn {{ settings.slider_button_style }} has-ltr-icon" name="next" aria-controls="slider-{{ section.id }}">
              <span class="visually-hidden">Next</span>
              <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="presentation" class="icon"><path d="m9.693 4.5 7.5 7.5-7.5 7.5" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
            </button>
            <button type="button" class="slider-nav__btn tap-target btn {{ settings.slider_button_style }} has-ltr-icon" name="prev" aria-controls="slider-{{ section.id }}">
              <span class="visually-hidden">Previous</span>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" role="presentation" class="icon"><path d="m6.797 11.625 8.03-8.03 1.06 1.06-6.97 6.97 6.97 6.97-1.06 1.06z"/></svg>

            </button>
          </div>
  </div>
</carousel-slider>
 
</product-recommendations>