.customizable-slider {
  // max-width: 470px;
  margin: auto;
  margin-bottom: 42px;

  ul {
    // margin: 0px 16px !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));

    padding-left: 0;
    gap: 15px;
    width: 100%;
    margin: auto;

    // @media screen and (max-width: 1250px) {
    //   grid-template-columns: repeat(4, 1fr);
    // }

    // @media screen and (max-width: 1040px) {
    //   grid-template-columns: repeat(3, 1fr);
    // }

    // @media screen and (max-width: 990px) {
    //   grid-template-columns: repeat(5, 1fr);
    // }

    // @media screen and (max-width: 365px) {
    //   grid-template-columns: repeat(4, 1fr);
    // }
  }
  .product__slide {
    .product__slide-icon {
      position: relative;
      cursor: pointer;
      width: 52px;
      height: 50px;

      svg {
        width: 52px;
        height: 50px;
        aspect-ratio: 26/25;
      }

      .icon-smile {
        position: absolute;
        left: calc(50% - 12.5px);
        top: calc(50% - 8px);
        display: none;
      }
    }

    .product__slide-title {
      color: #000;
      text-align: center;
      font-family: "ABC Diatype Rounded";
      font-size: 14.4px;
      font-style: normal;
      font-weight: 800;
      line-height: 120%; /* 17.28px */
      text-transform: lowercase;
      word-spacing: 9rem;
    }

    .product__slide-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
      width: min-content;
    }

    &.selected {
      .icon-smile {
        display: block;
      }
    }

    &.unvailable {
      cursor: default;

      .product__slide-icon:after {
        content: "";
        width: 100%;
        height: 2.5px;
        background-color: #000;
        display: block;
        position: absolute;
        transform: rotate(40deg);
        top: 51%;
        left: 5%;
      }
      .product__slide-icon {
        cursor: default;
      }
    }

    position: relative;
    flex: 0;
  }
}

.customizable-slider {
  .splide__arrow {
    width: 32px;
    height: 32px;
    top: calc(40% - 12px);
    background-color: transparent;
    border-radius: 50%;
    padding: 3px;
    background: #9e9e9e;

    svg {
      width: 100%;
      height: 100%;
      fill: transparent;
    }
  }

  .splide__arrow--prev {
    left: -24px;
  }

  .splide__arrow--next {
    right: -24px;
  }

  .product__slide-icon {
    position: relative;

    .icon-smile {
      position: absolute;
      left: calc(50% - 15px);
      top: calc(50% - 10px);
      display: none;
      width: 26px;
      height: 17px;
    }
  }

  .product__slide {
    display: flex;
    justify-content: center;
    &.selected {
      svg path {
        // stroke: black;
      }
    }
  }
}

.splide__arrow:disabled {
  opacity: 0.5;
  background: #9e9e9e;
}

.lower-block,
.mid-block,
.upper-block {
  display: none;
  &.selected {
    display: block;
  }
}

.product-informations {
  display: none;
  &.selected {
    display: block;
  }
}

.reviews-iframe-container {
  border-radius: var(--media-radius);
  overflow: hidden;
}

.sticky-add-to-cart {
  display: none !important;
  width: 100%;
  grid-template-columns: 1fr !important;
  &.selected {
    display: grid !important;
  }
  .product-form__submit {
    width: auto !important;
    margin: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .customizable-slider {
    margin-bottom: 23px;
    max-width: unset;
    & .product__slide {
      .product__slide-icon {
        display: flex;
        justify-content: center;
      }

      .product__slide-container {
        gap: 7px !important;
      }
    }

    .splide__arrow {
      width: 26px;
      height: 26px;
      top: 30%;
    }

    &.customizable-slider-mobile {
      display: block;
    }

    &.customizable-slider-desktop {
      display: none;
    }
  }
}

.product__price {
  margin-bottom: 0px !important;
  gap: 1rem !important;
}

#sticky-add-to-cart {
  width: 100%;
  display: flex !important;
  flex-direction: column;
}

.custom-mobile {
  display: none;
}

@media screen and (max-width: 750px) {
  .custom-mobile {
    display: block;
    border-radius: 20px;
    border: 1px solid #000;
    overflow: hidden;
    background-color: #fff;
  }
  .custom-desktop {
    display: none;
  }
  .product__info-container {
    padding-bottom: 1rem !important;
  }

  .product__price {
    padding-top: 2rem;
  }
}