.product-image-container {
  overflow-x: hidden;

  .swiper-wrapper {
    min-height: 21px;
    padding: 0;
    margin: 0;
  }
}

.product-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.product-image-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -21px;

  @media screen and (max-width: 768px) {
    margin-top: calc((28px / 2) * -1);
    justify-content: flex-end;
  }

  .swiper-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    background: black;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 1;
    cursor: pointer;

    &::before, &::after {
      content: '';
      display: none;
    }

    @media screen and (max-width: 768px) {
      width: 28px !important;
      height: 28px !important;
    }
  }
}

.product-detail-container {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
  gap: 40px;

  @media screen and (max-width: 768px) {
    flex-direction: column-reverse;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .product-detail-left {
    flex: 1;

    .product-detail-left__accordion {
      width: 100%;

      @media screen and (max-width: 768px) {
        margin-bottom: 20px;
      }

      summary {
        border-bottom: 1px solid #707070;

        .product-detail-left__accordion--title {
          display: flex;
          align-items: center;
          gap: 10px;

          .product-detail-left__accordion--head {
            font-family: var(--font-body-family);
            font-size: 24px;

            @media screen and (max-width: 768px) {
              font-size: 16px;
            }
          }
        }

        .icon-caret {
          width: 14px;
          height: 14px;
          display: block;
        }
      }

      .product-detail-left__accordion--content {
        padding: 40px 0;
        font-size: 14px;

        a {
          color: var(--mymoods-blue);
        }

        @media screen and (max-width: 768px) {
          padding: 18px 0;
        }
      }

      .product-detail-left__status-image {
        padding-top: 24px;
        width: 100%;
        height: 100%;
      }
    }
  }

  .product-detail-right {
    width: 680px;
    color: #222222;

    @media screen and (max-width: 1200px) {
      width: 500px;
    }

    @media screen and (max-width: 768px) {
      width: 100%;
    }

    .product-detail__checkout--wrapper {
      width: 100%;
      position: sticky;
      top: 160px;
      box-shadow: 0 3px 6px #00000029;
      border-radius: 10px;
      overflow: hidden;
      padding: 50px;
      background-color: white;

      @media screen and (max-width: 768px) {
        position: unset;
        top: unset;
        box-shadow: unset;
        padding: 0;
        background-color: unset;
        border-radius: 0;
        overflow: unset;
      }
    }

    .product-detail__badges {
      width: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;

      .product-detail__badge {
        width: fit-content;
        height: 20px;
        display: block;
        border-radius: 2px;
        overflow: hidden;

        img {
          display: block;
          object-fit: contain;
          height: 100%;
        }
      }
    }

    .product-detail__brand {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-bold);
      font-size: 18px;

      @media screen and (max-width: 768px) {
        font-size: 12px;
        color: var(--mymoods-blue);
      }
    }

    .product-detail__puffs {
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-bold);
      font-size: 14px;
    }

    .product-detail__title {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 10px;

      @media screen and (max-width: 768px) {
        margin-bottom: 6px;
      }
    }

    .product-detail__price {
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-semibold);
      margin-bottom: 10px;

      .price-item {
        font-size: 24px;

        @media screen and (max-width: 768px) {
          font-size: 18px;
        }
      }
    }

    .product-detail__variant-picker {
      .product-form__input--pill input[type='radio']:checked + label {
        background-color: var(--mymoods-blue);
        border-color: var(--mymoods-blue);
      }
    }

    .product-detail__subtitle {
      font-size: 12px;
      margin-bottom: 10px;
    }

    .product-detail__rating {
      margin-bottom: 24px;

      .product-detail__rating--summary {
        cursor: pointer !important;
        display: list-item;
        counter-increment: list-item 0;
        list-style: none;
        padding-left: 24px;
        position: relative;

        &::before {
          content: '\25B6'; /* 右向きの三角形 */
          position: absolute;
          left: 0;
          top: 0;
          transition: transform 0.3s ease;
        }
      }

      &[open] .product-detail__rating--summary::before {
        transform: rotate(90deg);
      }
    }

    .product-detail__quantity {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 30px;

      .text {
        font-size: 12px;
      }

      .product-form__quantity {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 0;
      }

      .quantity__label {
        margin: 0;
      }

      .product-detail__quantity--form {
        margin: 0;
        border: 1px solid #DDDFE1;
        border-radius: 9999px;
        height: 40px;
        display: flex;
        align-items: center;
        font-weight: bold;

        @media screen and (max-width: 768px) {
          background-color: white;
        }

        .quantity::before {
          background-color: transparent;

        }
      }
    }

    .product-detail__action-buttons {
      margin-bottom: 30px;

      @media screen and (max-width: 768px) {
        margin-bottom: 16px;
      }
    }

    .product-detail__line-add {
      margin-bottom: 30px;
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-medium);
      font-size: 12px;

      @media screen and (max-width: 768px) {
        margin-bottom: 16px;
      }

      .product-detail__line-add--icon > svg {
        display: inline-flex;
        width: 16px;
        height: 16px;
        transform: translateY(3px);
        color: var(--line-color);
      }

      .product-detail__line-add--add {
        color: unset;
      }

      .product-detail__line-add--off {
        color: red;
      }
    }

    .product-detail__second-buttons {
      display: flex;
      align-items: center;
      gap: 20px;

      .product-detail__second-button {
        border-radius: 9999px;
        display: flex;
        align-items: center;
        background-color: #F2F3F6;
        gap: 18px;
        width: 180px;
        height: 40px;
        padding: 0 16px;
        color: #222222;
        font-size: 12px;
        font-weight: bold;
        border: none;
        cursor: pointer;

        @media screen and (max-width: 768px) {
          box-shadow: 0 0 6px #00000019;
        }
      }
    }

    .product-detail__share-link {
      padding-top: 20px;
      display: none;

      &.open {
        display: block;
      }

      .product-detail__share-link--input {
        width: 100%;
        height: 40px;
        font-family: var(--mymoods-font-poppins), sans-serif;
        font-weight: var(--mymoods-font-weight-semibold);
        font-size: 12px;
        color: #222222;
        border-radius: 10px;
        background-color: #fff;
        padding: 0 15px;
      }
    }
  }
}