.item-container{padding-left: 1rem; padding-right: 1rem}
h1{font-weight: 500; font-size: 1.4em}
.breadcrumb-custom{font-size: 0.9em; padding-bottom: 1rem}
.breadcrumb-custom a{color:var(--colorblack); text-decoration: underline}
.image-grid, .h1-desktop{ display: none;}
.image-carousel{margin-bottom: 1.5rem}
.opzioni select{border-radius: 0}
.prezzocontainer{margin-top: 1rem; margin-bottom: 1rem}
.prezzo{display: inline; }
.prezzo_barrato, .prezzo_percent{font-size: 1em; font-weight: 500; padding-left: 0.5rem}
.prezzo_barrato{text-decoration: line-through;}
.prezzo_offerta{font-size: 1.8em; font-weight: 500}

.btn-add-cart{margin-top:1.25rem; margin-bottom:1.25rem; border: var(--colorblack) 1px solid; border-radius: 0; background: var(--colorblack); color:#fff; font-size: 1.2em; font-weight: 500; width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem}
.btn-add-cart svg{fill: #fff; width: 24px; height: auto}

.infoprod-title{margin-top:2rem;font-weight: 500}
.infoprod{font-size: 1.2em}

.credit-card{display: flex; justify-content: center; gap: 0.25rem 1rem}
.credit-card img{width: 50px; height: auto}

.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% */
.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{
  color: var(--colorblack);
  opacity:.75;
}
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover{
  opacity:1;
}

.mySwiper .swiper-pagination-bullet {
  background: var(--colorblack);
  opacity: 0.5;
}
.mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.info-contatti .btn{border:var(--colorblack) 1px solid; background: #fff; border-radius: 0; text-align: center; color: var(--colorblack); font-weight: 500; min-width: 120px}
.btn-x{border:var(--colorblack) 1px solid; background: #fff; border-radius: 0; text-align: center; color: var(--colorblack); font-weight: 500; min-width: 120px}
.btn-go-checkout{border:var(--colorblack) 1px solid; background: #fff; border-radius: 0; text-align: center; color: var(--colorblack); font-weight: 500; min-width: 120px; text-decoration: none !important}
.modal-footer{border:0 !important}

@media (min-width: 992px){
.h1-desktop{ display: block;}
.image-carousel, .h1-mobile{display: none}
.image-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}

.image-grid img{
    display: block;
    width: 100%;
    height: auto;
  }

.shop-product-row{

    align-items: flex-start !important;

  }

  .shop-product-row > .col-lg-6{

    align-self: flex-start !important;

  }

  .shop-product-row .info-sticky{

    position: sticky;

    top: 90px;

    z-index: 10;

    background: #fff;

  }

  .shop-product-row > .col-lg-6:last-child{

  align-self: flex-start;

}



 .info-sticky{
    position: -webkit-sticky;
    position: sticky !important;
    top: 90px;                 /* come vuoi tu */
    align-self: flex-start;
    z-index: 10;
    background: #fff;       /* evita trasparenze mentre si incolla */

  }
  .info-contatti button:hover{background: var(--colorblack); color: #fff;}

  .thumb-item {
  border: 2px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
  }

  .thumb-item.is-active {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(0,0,0,.08);
  }

}

@media (min-width: 768px){
h1{font-size: 2em}
}


.shop-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    margin-top: 14px;
    padding: 13px 18px;

    background: var(--colorbeige);
    border: 1px solid var(--colorblack);

    font-size: 14px;
    color: #222;
}

.shop-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-benefit i {
    font-size: 19px;
    font-weight: 400;
}

.shop-benefit strong {
    font-weight: 600;
}

.shop-benefits-divider {
    width: 1px;
    height: 22px;
    background: #d2d2cf;
}

@media (max-width: 575.98px) {

    .shop-benefits {
        gap: 12px;
        padding: 12px 10px;
        font-size: 12px;
    }

    .shop-benefits-divider {
        height: 28px;
    }
}