/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* 3. IL CONTAINER DELLE FRECCE (Il segreto) */
.custom-nav-container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%); /* Centra verticalmente */
  justify-content: space-between;
  padding: 0 40px; /* Distanza dai bordi laterali */
  z-index: 10; /* Fondamentale: deve stare sopra lo swiper */
  pointer-events: none; /* Permette di cliccare lo slider sotto se necessario */
  display: none;
}
@media (min-width: 768px) {
	.custom-nav-container {
	  display: flex;
	}

}

/* 4. I BOTTONI GLASS */
.btn-glass {
  pointer-events: auto; /* Riattiva i click sui bottoni */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15); /* Sfondo semi-trasparente */
  backdrop-filter: blur(15px) saturate(180%); /* Effetto Glassmorphism */
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  outline: none;
}

.btn-glass svg {
  width: 24px;
  height: 24px;
}

/* Effetto Hover "Liquid" */
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-glass:active {
  transform: scale(0.95);
}

/* Stato disabilitato (quando arrivi a fine slider) */
.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.scroll-menu-container{
	position: fixed;
	bottom: 1rem;
	width: 100%;
	padding: 0 2rem;
	transition: opacity 0.3s;
	z-index: 999;
	/*opacity: 0;*/
}

.scroll-menu-container ul > li + li{
	border: none;
}

.scroll-menu-container ul{
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 5rem;
}
.scroll-menu-container ul li{
	display: inline-block;
	list-style: none;
}
.scroll-menu-container ul li a{
	display: block;
		color: #fff;

}

.header-bottom.wide-nav{
	transition: opacity 0.3s;
}
.scroll-menu-container.scrolling-down,
.header-bottom.wide-nav.scrolling-down {
  opacity: 0;
  touch-action: none;
}
.scroll-menu-container.scrolling-up,
.header-bottom.wide-nav.scrolling-up {
  opacity: 1;
}

.logo-left .logo, .logo-left #logo{
		background-color: rgba(0, 0, 0, 0.6);
		padding: 0.5rem 1rem;
		border-radius: 6rem;
		display: flex;
		flex-grow:1;
}

.logo-left .logo a{
	display: flex;
}

.header-nav .button.icon.circle, .button.icon.round{
	font-size: 1.4rem;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: 16px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.custom-nav{
	position: absolute;
	width: 100%;
}
.custom-nav
.swiper.swipe-home {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.6s ease;
  padding: 2rem;
}
.swipe-home .swiper-slide {
  color: white;
  border-radius: calc( 1.5rem + 0.8vw );
  min-width: 200px;
  max-width: 600px;
  height: auto;
  width: 90%;
  background: rgba(255, 255, 255, 0.2);
  /*padding: 1rem;*/
}

.swiper.swipe-home::after{
	display: block;
	content: "";
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.slide-thumb{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	position: relative;
	padding: calc( 0.5rem + 0.5vw );
}

.slide-thumb-vert{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 2;
	position: relative;
	padding: calc( 0.5rem + 0.5vw );
}
.slide-thumb-img{
	/*aspect-ratio: 1 / 1.3;*/
	width: 100%;
	height: auto;
	position: relative;
	/*padding: calc( 0.5rem + 0.5vw );*/
}

.slide-thumb img,
.slide-thumb-vert img,
.slide-thumb-img img,
.slide-thumb .slide-thumb-overlay{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc( 1rem + 0.8vw );
}

.swipe-home .prod-label{
	position: absolute;
  left: 0;
  bottom: 3rem;
  padding: 0.2rem 1rem;
  background-color: #C67C44;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  font-size: 80%;
}

.recently-viewed-products .slide-thumb{
	width: 25% !important;
	position: relative;
}
.slide-thumb-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 5rem);

}
.slide-thumb-overlay span.amount{
	color: #fff;
}
.slide-thumb-overlay .product-price{
	padding: 0.5rem 1rem;
}

.header-bottom .header-bottom-nav.nav-pills .nav-top-link{
	background: rgba(0, 0, 0, 0.6);
	padding: 0.5rem 1rem;
	margin-right: 1em;
}

.header-bottom .nav li.has-icon-left > a > i, .nav li.has-icon-left > a > img, .header-bottom .nav li.has-icon-left > a > svg{
	margin: 0;
}

.slide-thumb-img video.wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fa sì che il video copra l'area senza deformarsi */
    border-radius: calc( 1rem + 0.8vw );
}

.swipe-home .slide-title{
	color: #fff;
	padding: 1rem;
	margin: 0;
}
.position-relative{
	position: relative !important;
}
.d-flex{
	display: flex;
}
.flex-column{
	flex-direction: column;
}
.mt-auto{
	margin-top: auto;
}
.ms-auto{
	margin-left: auto;
}
.h-100{
	height: 100%;
}
    #header { /* Replace .header-container with your actual selector */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensures the header stays on top */
    }

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}