/* 
 * Merchandising Page Custom Styles
 * Stili aggiuntivi per la pagina merchandising
 */

/* Info prodotto merchandising */
.woocommerce-products-header {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 30px;
}
.shop-product-type {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 12px;
  color: #000000;
  text-transform: uppercase;
}

.shop-product-color {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #5f5f5f;
}

.shop-product-title {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  color: #000000;
}

/* Container prezzo merchandising */
.price-merch-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.price-merch-wrap .price {
  flex: auto;
  margin-bottom: 2px;
}

.price-merch-wrap button.favorite-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 5px;
  transition: transform 0.2s;
}

.price-merch-wrap button.favorite-btn:hover {
  transform: scale(1.1);
}

.price-merch-wrap button.favorite-btn i {
  color: #aaa;
  transition: color 0.3s;
}

.price-merch-wrap button.favorite-btn.favorited i,
.price-merch-wrap button.favorite-btn:hover i {
  color: #000000;
}

/* Filtri merchandising - stesso stile della pagina shop */
#ajax-merchandising-filter {
  flex: 0 0 250px;
  max-width: 250px;
  background: #f8f8f8;
  padding: 20px;
  border-radius: 6px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
  position: static;
  top: 80px;
}
/*
#ajax-merchandising-filter .filter-group {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

#ajax-merchandising-filter legend {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
}
*/
#ajax-merchandising-results {
  flex: 1;
}


/* Responsive: 4 prodotti per riga su tablet 
@media (max-width: 1200px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        flex: 0 0 calc((100% / 4) - 20px);
        max-width: calc((100% / 4) - 20px);
    }
}*/

/* Responsive: 2 prodotti per riga su mobile 
@media (max-width: 768px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        flex: 0 0 calc((100% / 2) - 15px);
        max-width: calc((100% / 2) - 15px);
    }
}*/

/* Responsive: 1 prodotto per riga su schermi molto piccoli 
@media (max-width: 480px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        flex: 0 0 100%;
        max-width: 100%;
    }
}*/

/* Forza layout responsive su mobile */
@media (max-width: 1200px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        width: calc((100% / 4) - 40px) !important;
        margin-right: 20px !important;
        margin-left: 20px !important;
    }
}

@media (max-width: 768px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        width: calc((100% / 2) - 30px) !important;
        margin-right: 15px !important;
        margin-left: 15px !important;
    }
}

@media (max-width: 360px) {
    #ajax-merchandising-results ul.products.columns-6 li.product {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Titolo pagina merchandising */
.merchandising-page .page-title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 32px;
  margin-bottom: 20px;
}

/*Copiato da template generale*/
.merchandising-page .products ul,.merchandising-page ul.products {
    margin: 0 0 1em;
    padding: 0;
    list-style: none outside;
    clear: both
}

.merchandising-page .products ul::after,.merchandising-page .products ul::before,.merchandising-page ul.products::after,.woocommerce ul.products::before {
    content: " ";
    display: table
}

.merchandising-page .products ul::after,.merchandising-page ul.products::after {
    clear: both
}

.merchandising-page .products ul li,.merchandising-page ul.products li {
    list-style: none outside
}

.merchandising-page ul.products li.product .onsale {
    top: 0;
    right: 0;
    left: auto;
    margin: -.5em -.5em 0 0
}

.merchandising-page ul.products li.product .woocommerce-loop-category__title,.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product h3 {
    padding: .5em 0;
    margin: 0;
    font-size: 1em
}

.merchandising-page ul.products li.product a {
    text-decoration: none
}

.merchandising-page ul.products li.product a.woocommerce-loop-product__link {
    display: block
}

.merchandising-page ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 1em;
    box-shadow: none
}

.merchandising-page ul.products li.product strong {
    display: block
}

.merchandising-page ul.products li.product .woocommerce-placeholder {
    border: 1px solid #f2f2f2
}

.merchandising-page ul.products li.product .star-rating {
    font-size: .857em
}

.merchandising-page ul.products li.product .button {
    display: inline-block;
    margin-top: 1em
}

.merchandising-page ul.products li.product .price {
    display: block;
    font-weight: 400;
    margin-bottom: .5em;
    font-size: .857em
}

.merchandising-page ul.products li.product .price del {
    color: inherit;
    opacity: .7;
    display: inline-block
}

.merchandising-page ul.products li.product .price ins {
    background: 0 0;
    font-weight: 700;
    display: inline-block
}

.merchandising-page ul.products li.product .price .from {
    font-size: .67em;
    margin: -2px 0 0 0;
    text-transform: uppercase;
    color: rgba(90,89,68,.5)
}

.merchandising-page ul.products,.merchandising-page ul.products {
    clear: both
}

.merchandising-page ul.products::after,.woocommerce ul.products::before,.merchandising-page ul.products::after,.merchandising-page ul.products::before {
    content: " ";
    display: table
}

.merchandising-page ul.products::after,.merchandising-page ul.products::after {
    clear: both
}

.merchandising-page ul.products li.product,.merchandising-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%;
    margin-left: 0
}

.merchandising-page ul.products li.first,.merchandising-page ul.products li.first {
    clear: both
}

.merchandising-page ul.products li.last,.merchandising-page ul.products li.last {
    margin-right: 0
}

.merchandising-page ul.products.columns-1 li.product,.merchandising-page ul.products.columns-1 li.product {
    width: 100%;
    margin-right: 0
}

.merchandising-page ul.products.columns-2 li.product,.merchandising-page ul.products.columns-2 li.product {
    width: 48%
}

.merchandising-page ul.products.columns-3 li.product,.merchandising-page ul.products.columns-3 li.product {
    width: 30.75%
}

.merchandising-page ul.products.columns-5 li.product,.merchandising-page ul.products.columns-5 li.product {
    width: 16.95%
}

.merchandising-page ul.products.columns-6 li.product,.merchandising-page ul.products.columns-6 li.product {
    width: 13.5%
}