/*
* Pineapple Solutions di Buglione Giovanni - https://pineapplesolutions.it - (VAT: IT06220270653)
*
* NOTICE OF LICENSE
*
* This file is not open source! Each license that you purchased is only available for 1 website only.
* If you want to use this file on more websites (or projects), you need to purchase additional licenses.
* You are not allowed to redistribute, resell, lease, license, sub-license or offer our resources to any third party.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future.
*
*  @author Pineapple Solutions di Buglione Giovanni - https://pineapplesolutions.it - (VAT: IT06220270653) <info@pineapplesolutions.it>
*  @copyright  Pineapple Solutions di Buglione Giovanni - https://pineapplesolutions.it - (VAT: IT06220270653)
*  @license    Valid for 1 website (or project) for each purchase of license
*  International Registered Trademark & Property of PrestaShop SA
*/

#pineapplefeaturedproducts .wrapper {
    width: calc(100% - 8px);
    position: relative;
}

#pineapplefeaturedproducts .wrapper i.fas {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 50px;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 50%;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    transition: 0.3s ease;
}

#pineapplefeaturedproducts .wrapper i.fas:hover, #pineapplefeaturedproducts .wrapper i.fas:active, #pineapplefeaturedproducts .wrapper i.fas:focus {
    color: #24b9d7;
    transition: 0.2s;
}

#pineapplefeaturedproducts .wrapper i.fas:first-child, #pineapplefeaturedproducts .wrapper i.fas:last-child {
    z-index: 2;
}

#pineapplefeaturedproducts .wrapper i.fas:first-child {
    left: 0;
}

#pineapplefeaturedproducts .wrapper i.fas:last-child {
    right: 0;
}

#pineapplefeaturedproducts .wrapper i.fas:active {
    transform: translateY(-50%) scale(0.85);
}

#pineapplefeaturedproducts .wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 4) - 12px);
    gap: 16px;
    border-radius: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

#pineapplefeaturedproducts .wrapper .carousel.no-transition {
    scroll-behavior: auto;
}

#pineapplefeaturedproducts .wrapper .carousel::-webkit-scrollbar {
    display: none;
}

#pineapplefeaturedproducts .wrapper .carousel.dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

#pineapplefeaturedproducts .card .js-product.product {
    width: 100%;
}

#pineapplefeaturedproducts .wrapper .carousel .card {
    scroll-snap-align: start;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#pineapplefeaturedproducts .wrapper .carousel.dragging .card {
    user-select: none;
    cursor: grab;
}

#pineapplefeaturedproducts .wrapper .carousel .card .img {
    height: 148px;
    width: 148px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pineapplefeaturedproducts .wrapper .carousel .card .img img {
    height: 140px;
    width: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
}

#pineapplefeaturedproducts .wrapper .carousel .card h2 {
    font-size: 1.52rem;
    font-weight: 500;
    margin: 30px 0 5px;
}

#pineapplefeaturedproducts .card {
    background: none;
}

#pineapplefeaturedproducts button.wishlist-button-add {
    position: absolute;
    top: 15px;
    right: 15px;
}

#pineapplefeaturedproducts span.material-symbols-outlined {
    font-size: 30px;
    line-height: 50px;
}

@media (max-width: 1200px) {
    #pineapplefeaturedproducts .wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 9px);
    }
}

@media (max-width: 768px) {

    #pineapplefeaturedproducts .fas {
        display: none;
    }

    #pineapplefeaturedproducts .wrapper .carousel {
        grid-auto-columns: 100%;
    }
}