/* wrapper (tu puoi tenere max-width 1440) */
.saquella-related {
  width: 100%;
}

/* reset lista (spesso rompe layout) */
.saquella-related-splide .splide__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* card non deve espandere oltre lo slide */
.saquella-related-splide .splide__slide .saquella-product-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
/* PROGRESS WRAPPER */
.saquella-splide-progress {
  width: 100%;
  height: 3px;
  background: #6F5546;
  border-radius: 3px;
  margin-top: 16px;
  cursor: pointer;
  position: relative;
}

/* PROGRESS BAR */
.saquella-splide-progress__bar {
  width: 0%;
  height: 100%;
  background: #C4B29C; /* colore Saquella */
  transition: width 0.3s linear;
}
.splide__arrows {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.splide:hover .splide__arrows {
  opacity: 1;
  pointer-events: auto;
}

.splide__arrow {
    background: #FAF9ED !important;          /* crema chiaro */
    border: 1px solid #896D5C !important;    /* bordo marrone */
    transition: all 0.3s ease;
}

/* Icona freccia (SVG interno) */
.splide__arrow svg {
    fill: #896D5C;
    width: 16px;
    height: 16px;
    transition: fill 0.3s ease;
}

/* Hover */
.splide__arrow:hover {
    background: #896D5C !important;
}

.splide__arrow:hover svg {
    fill: #FAF9ED;
}

/* ==========================================================
   MOBILE – DEFAULT
   0px → 424px
   ========================================================== */
/* niente media query */
  .saquella-related-splide {
    max-width: 280px;
    width: 100%;
  }
/* ==========================================================
   TABLET (portrait)
   ≥ 425px
   ========================================================== */
@media (min-width: 425px) {
  .saquella-related-splide {
    max-width: 385px;
    width: 100%;
  }
}
/* ==========================================================
   TABLET (portrait)
   ≥ 768px
   ========================================================== */
@media (min-width: 768px) {
  .saquella-related-splide {
    max-width: 728px;
    width: 100%;
  }
}


/* ==========================================================
   TABLET LARGE / LAPTOP SMALL
   ≥ 1024px
   ========================================================== */
@media (min-width: 1024px) {
  .saquella-related-splide {
    max-width: 984px;
    width: 100%;
  }
}


/* ==========================================================
   LAPTOP / DESKTOP STANDARD
   ≥ 1280px
   ========================================================== */
@media (min-width: 1280px) {
  .saquella-related-splide {
    max-width: 1240px;
    width: 100%;
  }
}


/* ==========================================================
   DESKTOP LARGE
   ≥ 1440px
   ========================================================== */
@media (min-width: 1440px) {
  .saquella-related-splide {
    max-width: 1400px;
    width: 100%;
  }
}