.woocommerce-notices-wrapper:not(:empty) {
    padding: 50px;
}

.woocommerce {
    .products {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
        }

        .product {
            overflow: hidden;
            background-color: #fff;
            transition: transform 0.3s;
            list-style-type: none;
            position: relative;


            &:hover .product-add-to-cart:before {
                transform: rotate(90deg);
            }

            .image {
                position: relative;
                padding: 60px 0px 0px 0px;
                background-color: #F5F0F0;

                img {
                    display: block;
                    max-height: 475px;
                    box-sizing: content-box;
                    width: 100%;
                }   

                .product-category {
                    font-size: 13px;
                    position: absolute;
                    top: 30px;
                    left: 30px;
                    text-transform: uppercase;
                    font-size: 12px;
                }

                .product-add-to-cart {
                  width: 40px;
                  height: 39px;
                  background-color: var(--site-primary);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 16px;
                  color: #fff;
                  transition: all 0.2s;
                  position: absolute;
                  bottom: 20px;
                    right: 20px;

                  &:hover {
                    background-color: #000;
                  }

                  &:before {
                    transition: all 0.2s;
                  }
                }   

                .product-rating {
                    display: flex;
                    gap: 2px;
                    margin-bottom: 5px;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    background-color: #fff;
                    border-radius: 150px;
                    padding: 9px 12px; 


                  span {
                    color: var(--site-primary);
                    font-size: 13px;
                  }
                }

            }
            
            .product-info {
                padding: 1.5rem;
            }

            .product-title {
              color: #000;
              font-size: 24px;
              font-weight: var(--site-weight-heading);
              font-family: var(--font-heading);
              line-height: 1;
            }


            .product-price {
              color: var(--site-primary);
              margin-top: 7px;
            }           

            &:hover {
                transform: translateY(-5px);
            }
        }
    }

    .add_to_cart_button {
        display: block;
        background-color: var(--site-primary);
        color: #fff;

        cursor: pointer;
        transition: background-color 0.3s;
        padding: 0.8rem 2rem;
        font-size: 1rem;
        text-decoration: none;
        border-radius: 0px;
        text-transform: uppercase;
        text-align: center;

        &:hover {
            background-color: #000;
        }
    }

    .price {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--site-priamry);
    }

    .woocommerce-loop-product__title {
        font-size: 1.2rem;
        color: #000;
    }

    .product-category {
        color: var(--site-text);
        font-size: 0.9rem;
        text-transform: uppercase;
    }   
}   

.site-shop-banner {
    /*
    background-color: var(--site-primary);
    background-size: cover;
    background-position: center;
    background-blend-mode: color-burn;
    background-blend-mode: lighten;
    animation: backgroundColor 5s linear infinite;

    text-align: center;
    padding: 130px 0px 100px 0px;
    */
    
    background-color: #c10119;
    background-size: cover;
    background-position: center;
    background-blend-mode: hard-light;
    text-align: center;
    padding: 130px 0px 100px 0px;


    h1 {
        color: #fff;
    }
}


.site-shop-categories {
    .list {
        display: flex;
        gap: 60px;
        justify-content: center;

        @media only screen and (max-width: 980px) {
            display: none;
        }

        .item {
            font-size: 26px;
            font-weight: var(--site-weight-heading);
            color: var(--site-black);
            cursor: pointer;
            transition: all 0.2s;

            &:hover,
            &.active {
                color: var(--site-primary);
            }
        }
    }
}


@keyframes backgroundColor {
  0% {
    background-color: var(--site-primary);
  }
  
  50% {
    background-color: #333;
  }

  100% {
    background-color: var(--site-primary);
  }  
}