.backgroundtoset{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  text-align: center;
}

.backgroundtosethalf{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  text-align: center;
}

.bg-base{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* fallback */
  --bg-current: none;

  background-image:
    linear-gradient(0deg,
      rgba(0,0,0,var(--alphagradient_start)) var(--percentgradient_start),
      rgba(0,0,0,var(--alphagradient_stop))  var(--percentgradient_stop)
    ),
    var(--bg-current);
}

.bg-base-shop{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* fallback */
  --bg-current: none;

  background-image:
    linear-gradient(0deg,
      rgba(0,0,0,var(--alphagradient_start)) var(--percentgradient_start),
      rgba(0,0,0,var(--alphagradient_stop))  var(--percentgradient_stop)
    ),
    var(--bg-url);
}

.box-title-shop{font-size:1.2em; font-weight: 500; padding-bottom:0.5rem}
.box-btn-shop{width:90px; border:#fff 1px solid; border-radius: 0;  font-size: 0.9em; color: #fff; background-color: none; display: block; margin: 0 auto 6rem auto}

@media (max-width: 575.98px){ .bg-base{ --bg-current: var(--bg-fit-480); } }
@media (min-width: 576px) and (max-width: 767.98px){ .bg-base{ --bg-current: var(--bg-fit-768); } }
@media (min-width: 768px) and (max-width: 991.98px){ .bg-base{ --bg-current: var(--bg-land-1200); } }
@media (min-width: 992px) and (max-width: 1399.98px){ .bg-base{ --bg-current: var(--bg-land-1920); } }
@media (min-width: 1400px){ .bg-base{ --bg-current: var(--bg-land-2400); } }

/* se vuoi gestire retina per le versioni “fit” */
@media (max-width: 767.98px) and (min-resolution: 2dppx){
  .bg-base{ --bg-current: var(--bg-fit-1080); }
}
@media (max-width: 767.98px) and (min-resolution: 3dppx){
  .bg-base{ --bg-current: var(--bg-fit-1320); }
}


.text-dsc{font-size: 1em}
.text-dsc a{color: var(--colorblack); text-decoration: underline;}
h4{font-size: 1.4em; font-weight: 500}

@media (min-width: 768px){
  .text-dsc{font-size: 1.1em}
  h4{font-size: 1.6em}
}

@media (min-width: 1200px){
  .text-dsc{font-size: 1.2em}
  h4{font-size: 1.8em}
}

.mySwiper{ --swiper-theme-color: #000; padding: 16px 8px 36px 8px; }

.mySwiper .cardx{
  display:block;
  text-decoration:none;
  color: inherit;
  border:0;
  border-radius: 0;
  overflow:hidden;
  height:100%;
}

.carousel .mySwiper .cardx-img{
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}

.carousel .mySwiper .cardx-body{
  padding: 10px 12px 12px 12px;
}

.carousel .mySwiper .cardx-title{
  line-height: 1.2;
  margin-bottom: 6px;
  font-size: 1em;
  text-align: center;
}

.mySwiper .cardx-text{
  font-size: .92em;
  opacity: .85;
  line-height: 1.2;
  margin-bottom: 10px;
  min-height: 2.4em; /* rende più uniformi le card */
}

.mySwiper .cardx-price{
  font-weight: 500;
  margin-bottom: 10px;
  text-align: center;
}

.mySwiper .cardx-price small{font-size: 0.8em; text-decoration: line-through;}

.mySwiper .cardx-cta{
  display:inline-block;
  padding: 6px 10px;
  border:1px solid #000;
  border-radius: 0;
  font-size: .9em;
}

.carousel .mySwiper .swiper-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:12px;
}

/* qui forziamo davvero la pagination a NON occupare 100% */
.carousel .mySwiper .swiper-pagination{
  position: static !important;
  width: auto !important;
  flex: 0 0 auto !important;
  inset: auto !important;     /* reset di top/left/right/bottom */
  transform: none !important;
  margin: 0 !important;
}

/* frecce NON più assolute */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next{
  position: static;        /* IMPORTANTISSIMO */
  margin:0;
  width:28px;
  height:28px;
  border:1px solid #000;
  border-radius:0;
}

/* icona freccia più piccola */
.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after{
  font-size:12px;
  font-weight:700;
}

/* se vuoi anche un filo trasparenti */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next{
  opacity:.75;
}
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover{
  opacity:1;
}