body {
	font-family: sans-serif;
}

.btn.btn-gray {
	background-color: #eee;
  border-color: #eee;
  color: #333;
}

#head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 15px 0px;
	background-color: #fff;

  -moz-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 0px rgba(0, 0, 0, 0.3) !important;
  -webkit-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 0px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 0px rgba(0, 0, 0, 0.3) !important;
	z-index: 10;
}

#menu {
	padding: 65px 0;
}

#foot {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px 30px;
	background-color: #fff;

  -moz-box-shadow: 0 6px 0 rgba(0, 0, 0, 0.05) inset, 0 -2px 0px rgba(0, 0, 0, 0.3) !important;
  -webkit-box-shadow: 0 6px 0 rgba(0, 0, 0, 0.05) inset, 0 -2px 0px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.05) inset, 0 -2px 0px rgba(0, 0, 0, 0.3) !important;
	z-index: 10;
}

.swiper-slide {
	width: auto;
	//margin-left: 20px;
}
.swiper .nav-link {
	border-radius: 1.5rem;
  color: #000 !important;
  padding: 0 20px;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.swiper .nav-link.active {
  background-color: #000;
  color: #fff !important;
}
.swiper .nav-link:not(.active):hover {
	background-color: #eee;
}
.swiper .fixed-end-element {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%; /* Occupa tutta l'altezza */
  
  /* Centratura del contenuto interno */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;

  /* IMPORTANTE: Assicura che stia sopra gli slide */
  z-index: 10; 
}
.swiper .fixed-end-element a {
	background-color: #eee;
  color: #000;
  border-radius: 1.5rem;
  font-size: .75rem;
  padding: 0 10px;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.swiper.category-swiper{
	min-height: 35px;
	/*margin-left: 20px;
	margin-right: -20px;*/
}
.category-swiper::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 150px; /* Larghezza della sfumatura */

  /* Posizionalo a destra, ma prima del pulsante fisso */
  right: 0px; /* Deve essere uguale alla larghezza di .fixed-end-element */

  /* Il gradiente va da trasparente al colore di sfondo */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);
  
  /* Fondamentale: impedisce all'overlay di bloccare i click o lo swipe del mouse */
  pointer-events: none;

  /* Assicurati che sia sopra le slide ma sotto il pulsante */
  z-index: 5; 
}

.swiper-button-next,
.swiper-button-prev {
  background-color: #000;
  opacity: 1 !important;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  top: 37px;
}
.swiper-button-next {
	top: 22px;
  margin-right: 30px;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.img-menu {
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 150px;

  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0.3rem !important;
  border-top-right-radius: 0.3rem !important;
}
.img-menu-inverse {
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 150px;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0.3rem !important;
  border-bottom-right-radius: 0.3rem !important;
}

.img-cover {
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 200px;

  border-bottom-left-radius: 0.3rem !important;
  border-bottom-right-radius: 0.3rem !important;
  border-top-left-radius: 0.3rem !important;
  border-top-right-radius: 0.3rem !important;
}
.img-cover h4,
.img-cover p {
	color: #fff;
	text-shadow: 0 0 0 black, 3px 3px 2px black, 2px 1px 3px rgba(193, 94, 221, 0.43);
}

.img-logo {
	width: auto;
	max-height: 120px;
	max-width: 350px;
	margin: auto;
}

#offcanvasFilters .form-check.form-check-inline {
		overflow: hidden;
		text-wrap-mode: nowrap;
		width: 140px;
	}

@media (min-width: 768px) {
  .img-menu {
    height: 100%;

    border-bottom-left-radius: 0.3rem !important;
  	border-top-left-radius: 0.3rem !important;
  	border-top-right-radius: 0 !important;
  }
  .img-menu-inverse {
    height: 100%;

    border-bottom-right-radius: 0.3rem !important;
  	border-top-right-radius: 0.3rem !important;
  	border-top-left-radius: 0 !important;
  	border-bottom-left-radius: 0 !important;
  }

  #offcanvasFilters .form-check.form-check-inline {
		width: 200px;
	}
}