/* hero section */
@media only screen and (max-width: 768px) {
			.head-grid {
				grid-template-columns: repeat(1, minmax(0, 1fr));
		}
		
		.head-grid .head-hero-img {
			order: 2;
		}
	}

.head-hero-img, .head-hero-cta {
  box-shadow: rgba(87, 79, 75, 0.25) 0px 0px 4px 4px;
  border-radius: 0.5rem;
}

.slider-cta a {
  border: 1px solid #fff !important;
	transition: 0.5s;
}

.slider-cta a:hover {
  background-color: #036 !important;
  color: #f1c040 !important;
  border-color: #f1c040 !important;
}

/* product-section */
.product-section {
  max-width: 1600px !important;
  margin: 0 auto;
  border-radius: 0.5rem;
  aspect-ratio: 2.5 / 1;
}

.wp-block-group.carousel-home-product-continer .wc-block-grid__product-onsale {
width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  background-color: rgba(241, 191, 64, 0.65);
  color: #039 !important;
  white-space: nowrap;
  transform: rotate(20deg);
  position: absolute;
  border-radius: 50%;
  right: 1rem;
  top: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.wp-block-group.carousel-home-product-continer .wc-block-components-product-sale-badge span {
  background-color: transparent;
}


.carousel-home-product-continer .swiper-slide h3 {
  width: 80%;
  padding: 1rem 0;
  bottom: -2.5rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  background-color: rgba(53, 53, 53, 0.4);
  font-weight: 600;
  transition: 0.5s;
  font-size: 1.25rem;
  text-align: center;
  color: #f1c040;
}

.carousel-home-product-continer .swiper-slide h3:hover {
  color: #fff;
}

.carousel-home-product-continer .swiper-slide h3:focus {
  color: #036;
  border-radius: 1.3rem;
}

/* Stili per il carousel prodotti */
.wp-block-group.carousel-home-product-continer {
    position: relative;
}

.wp-block-group.carousel-home-product-wrapper {
    height: fit-content;
    margin: 0 auto !important;
    padding-bottom: 0.5rem;
    overflow: hidden;
}
.carousel-home-product-wrapper .swiper-container {
    width: 100%;
    height: 100%;
}

.carousel-home-product-wrapper .swiper-wrapper {
    display: flex;
    margin: 0 10px 0 0 !important;
    z-index: 0;
}

.carousel-home-product-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	max-width: 18rem;
}

.carousel-home-product-wrapper .product-page-link {
  height: 100%;
  display: block;
}

.carousel-home-product-wrapper .product-page-link:focus {
  outline-color: #f1c040 !important;
  border-radius: 1.3rem !important;
}

.carousel-home-product-wrapper .swiper-slide img {
  border-radius: inherit;
  height: auto;
  vertical-align: middle;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1.5856;
  border-radius: 1.3rem;
}

.carousel-home-product-wrapper .swiper-button-next.car-cat-product, .carousel-home-product-wrapper .swiper-button-prev.car-cat-product {
    top: 40%;
    padding: 10px;
    background-color: #f1c040;
    color: #ebebeb;
    border-radius: 0.25rem;
    transition: 0.5s;
}
.carousel-home-product-wrapper .swiper-button-next.car-cat-product:hover, .carousel-home-product-wrapper .swiper-button-prev.car-cat-product:hover {
    background-color: transparent;
    color: #036;
}

.carousel-home-product-wrapper .car-cat-product.swiper-pagination {
    position: relative;
    margin-top: 3rem;
}

.carousel-home-product-wrapper .car-cat-product .swiper-pagination-bullet {
    margin: 0 0.5rem !important;
    padding: 0.25rem;
    background: #036;
}

#home-product-wrapper {
    max-width: 78rem;
}
@media (max-width: 1400px) {
    #home-product-wrapper {
        max-width: 58rem;
    }
}
@media (max-width: 1100px) {
    #home-product-wrapper {
        max-width: 37rem;
    }
}
@media (max-width: 770px) {
    #home-product-wrapper {
        max-width: 18rem;
    }
}


/* Nascondi i pulsanti di navigazione su schermi piccoli */
@media (max-width: 600px) {
	.wp-block-group.carousel-home-product-wrapper {
		width: calc(100% - 2rem);
	}
	.carousel-home-product-wrapper .swiper-button-next.car-cat-product, .carousel-home-product-wrapper .swiper-button-prev.car-cat-product {
		display: none;
	}
}

/* category-section */
.category-section {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem !important;
  align-items: stretch !important;
}

.category-item {
  box-sizing: border-box;
}

.category-item:hover {
  box-shadow: rgba(87, 79, 75, 0.25) 0px 0px 4px 4px;
	transition-duration: 0.3s !important;
}

.cat-cell-01 {
  grid-column: span 2;
}

.cat-cell-01 ul {
  column-count: 2;
  display: block;
}

.cat-cell-02, .cat-cell-03, .cat-cell-04, .cat-cell-05 {
  grid-column: span 1;
}
	
.category-item-menu {
  backdrop-filter: blur(10px);
  background-color: rgba(235, 235, 235, 0.75);
  border-radius: 5px;
}
	
.category-item-menu h2 a {
  text-decoration-color: #f1c040;
  transition-duration: 0.3s !important;
}

.category-item-menu li {
  padding-right: 1.5rem !important;
  border-left: 2px solid #f1c040;
  padding-left: 0.5rem !important;
}

@media (max-width: 1100px) {
.category-section {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 576px) {
  .category-section {
    display: unset !important;
  }
.category-item {
  margin-bottom: 2rem !important;
  min-height: 20rem;
}
}

@media (max-width: 480px) {
.cat-cell-01 ul {
  column-count: 1;
}
}

.lazyload-bg {
        background-image: url('https://www.vsarredocasa.it/wp-content/uploads/2024/11/placeholder_gray.webp')!important;
    }

    .fade-in-bg {
        animation: fadeIn 3.5s ease-in-out;
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

	
/*-- Cataloghi section --*/
@media (max-width: 781px) {
	.cataloghi-img {
		width: 100% !important;
		aspect-ratio: 16 / 9  !important;
	}
}

.catalogSection-cta a {
  border: 1px solid #f1c040 !important;
}

.catalogSection-cta a:hover {
  background-color: #fff !important;
  color: #000 !important;
}

@media (max-width: 1024px) {
	.hero-product .wp-block-columns {
		flex-direction: column;
	}
}

.hero-product {
  max-width: 95vw;
  margin: 0 auto !important;
  border-radius: 2rem;
  display: flex;
  background-color: #fff;
}
	
.hero-product img {
  border-radius: 2rem 0 0 2rem;
}

/* brand-sectio  */
.brand-sectio {
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 0.5rem;
}

/* Stili per il carousel marchi */
.brand-carousel-continer {
  position: relative;
}

.brand-carousel-wrapper {
  width: calc(30% + 300px);
  height: fit-content;
  margin: 0 auto;
  overflow: hidden;
}

.brand-carousel.swiper-container {
  width: 100%;
  height: 100%;
}

.brand-carousel .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-carousel img {
  width: 80%;
  background-color: #fff;
  padding: 10px;
 border-radius: 1rem;
}
	
@media (max-width: 600px) {
	.brand-carousel-wrapper {
		width: 75%;
	}
}