.container-icones-text {
  grid-template-columns: repeat(5, 1fr) !important;
}

variant-selector fieldset.product-option {
  position: relative;
  max-width: 468px;

  @media (max-width: 547px) {
    max-width: 100%;
  }
}

variants-swiper {
  max-width: 468px;
  position: unset !important;

  @media (max-width: 547px) {
    max-width: 79vw;
    margin-inline: auto;
  }

  .swiper-button-next,
  .swiper-button-prev {
    background: #000;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 547px) {
      width: 25px;
      height: 25px;
    }

    &::after {
      font-size: 15px;
    }
  }
}

.swiper-button-prev {
  left: -27px;

  @media (max-width: 547px) {
    left: -5px;
  }
}

.swiper-button-next {
  right: -24px;

  @media (max-width: 547px) {
    right: -2px;
  }
}

.variants-swiper-container {
  overflow: hidden;
  position: relative;

  .swiper-button-prev,
  .swiper-button-next {
    top: 58%;
    transform: translateY(-50%);
  }
}

.option-value {
  label {
    padding: 0.35rem;
  }

  .option-value__variant-image {
    display: block;
    width: 100%;
    max-width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;

    @media (max-width: 547px) {
      max-width: 42px !important;
      min-width: 42px !important;
      height: 42px !important;
    }
  }
}

.option-value:has(.option-value__variant-wrap.disabled) {
  cursor: not-allowed !important;


      label {
        pointer-events: none;
      opacity: .45;
      .option-value__variant-wrap {
          position: relative;
      overflow: hidden;

      &::before {
        content: "";
      width: calc(100% + 40px);
      height: 1px;
      background: #cecece;
      position: absolute;
      left: -20px;
      rotate: 136deg;
      top: 43px;
      }

      }
      }
}

.option-value:has(input:checked) .option-value__variant-wrap:has(.variant_image_default) {
  outline: 2px solid #000 !important;
}

.option-value__variant-wrap:has(.variant_image_default) {
  outline: 2px solid #cecece !important;

  &:hover {
    outline-offset: 4px;
  }
}

.option-value:has(.option-value__variant-wrap) {
  label {
    padding: 0.35rem;
  }

  @media (max-width: 547px) {
    .option-value__variant-image-text {
      font-size: 10px !important;
    }
  }

  .option-value__variant-wrap {
    transition: all 0.25s ease;
    padding: 10px;
    margin: 2px;
    border-radius: 8px;

    @media (max-width: 547px) {
      padding: 5px;
    }

    .option-value__variant-image {
      display: block;
      width: 100%;
      max-width: 68px !important;
      min-width: 68px !important;
      height: 68px !important;

      @media (max-width: 547px) {
        max-width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
      }
    }
  }

  .option-value__variant-image-text {
    margin-top: 0.25rem;
  }

  &:has(input:checked) .option-value__variant-wrap {
    outline: 2px solid var(--variant-bg-color);
    outline-offset: 4px;
  }

  &:hover .option-value__variant-wrap {
    outline: 2px solid var(--variant-bg-color);
    outline-offset: 4px;

    img {
      transition: transform 0.3s ease;
      transform: rotate(15deg);
      border: none !important;
    }
  }

  &:has(input:checked) img {
    border: none !important;
  }
}

.button-no-stock {
    border:none;
    height:40px;
    border-radius:40px;
    background: #cecece;
    box-sizing: border-box;
    cursor:not-allowed;
    font-size: 18px;
}