@charset "UTF-8";

.section-main-product-custom {
  padding-bottom: 16px;

  .product__tax{
    display: none;
  }

  .product__media-inner {
    padding: 0;
    overflow: hidden;
  }

  .product__media-wrapper{
    width: 100%;
  }

  .product__media-list {
    margin-bottom: 20px;

    .slider__slide {
      padding: 0;
      width: 100%;
      max-width: 100vw;
    }
  }
  

  .thumbnail-slider {
    .thumbnail-list.slider {
      padding: 0 0 0 16px;
      gap: 9px;
      margin-bottom: 20px;
    }

    .thumbnail-list__item.slider__slide {
      width: calc((100% - 54px)/7);
    }

    .thumbnail[aria-current] {
      border: none;
      box-shadow: none;
    }

    .slider-button {
      display: none;
    }
  }

  .product__info-wrapper{
    padding: 0;
    width: 100%;
  }

  .product__info-container{
    width: 100%;
    max-width: 100%;
  }

  .product__info-container>*+* {
    margin: 0 0 16px;
  }

  .c-tags {
    margin-bottom: 16px;
  }

  .product__title {
    margin-top: 0;
    margin-bottom: 8px;

    h1 {
      font-size: 2.4rem;
      font-weight: 500;
    }
  }

  .weight-text {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
  }

  .product__info-container .product__description {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .price {
    font-size: 1.8rem;
  }

  .quantity__button:not(:focus-visible):not(.focused),
  .quantity__input:not(:focus-visible):not(.focused) {
    background-color: var(--primary-color);
  }

  .button {
    background-color: var(--primary-color);
    font-size: 1.6rem;
    padding: 0;
    color: #333;

    span {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      position: relative;
    }

    span::before {
      content: "";
      background: url(./arrow-white-hoverd.svg) center / contain no-repeat;
      width: 9px;
      height: 6px;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }

  .shopify-payment-button__button--unbranded {
    background-color: var(--accent-color);
    font-size: 1.6rem;
    position: relative;
  }

  .shopify-payment-button__button--unbranded::before {
    content: "";
    background: url(./arrow-white.svg) center / contain no-repeat;
    width: 9px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 10px;
    left: auto;
    transform: translateY(-50%);
    z-index: 1;
  }

  .product__info-container .product-form {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .product__accordion.accordion {
    margin-bottom: 0;

    .icon.icon-caret path {
      fill: var(--accent-color) !important;
    }
  }

  .product__accordion .accordion__content {
    padding: 0 16px;
  }

  .accordion__title{
    color: #333;
  }
}

@media screen and (min-width: 990px) {
  .section-main-product-custom {
    padding: 60px 0;

    .product__media-inner {
      padding: 0;
      width: 100%;
      max-width: 450px;
      margin: 0;
    }

    .product__info-inner {
      padding: 0;
      width: 100%;
      max-width: calc(100% - 590px);
      margin: 0;
    }

    .product.grid {
      flex-wrap: nowrap;
      max-width: 1080px;
      padding: 0 20px;
      margin-inline: auto;
      justify-content: space-between;
      gap: 140px;
    }

    .product--medium:not(.product--no-media) .product__media-wrapper,
    .product--small:not(.product--no-media) .product__info-wrapper {
      width: 100%;
      max-width: unset;
    }

    .thumbnail-slider {
      .thumbnail-list.slider {
        padding: 0;
        gap: 10px;
      }

      .thumbnail-list__item.slider__slide{
        width: 55px;
      }
    }

    .product__media-list{
      margin-bottom: 24px;
    }

    .product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper{
      width: 100%;
      max-width: unset;
      padding: 0;
    }
  }
}