.product-media-modal {
  .product-media-modal__dialog {
    .product-media-modal__content {
      img {
        max-height: 80vh;
        object-fit: contain;

        &:not(.active) {
          display: none;
        }
      }
    }
  }
}

body .page-width {
  .product {
    display: flex;
    flex-wrap: wrap;
    gap: 0 60px;

    .product__media-wrapper {
      width: calc(45% - 60px / 2);
      padding-right: 40px;
      padding-top: 60px;
      position: relative;

      &:before {
        /*content: '';*/
        position: absolute;
        right: 0;
        top: 0;
        width: calc(100% - (100% - var(--page-width)) / 2);
        height: 100%;
        min-width: calc(100% + 24px);
        background: #F9FAFB;
      }

      .product-media-container {
        --aspect-ratio: unset;
        border-radius: 10px;
        padding: 12px;

        .media {
          padding: 0;
          aspect-ratio: 1;
          width: 100%;
          object-fit: cover;

          img {
            object-fit: contain;
          }
        }
      }

      .swiper-main {
        margin-bottom: 14px;

        .swiper-wrapper {
          padding: 0;
        }

        .product__media-item {
          display: block;
        }
      }

      .swiper-thumbs {
        opacity: 0;

        .swiper-wrapper {
          padding: 0;
        }

        &.swiper-initialized {
          opacity: 1;
        }

        .swiper-slide {
          img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: contain;
            border: 2px solid transparent;
            border-radius: 10px;
            /*background: #f2f4f7;*/
          }

          &.swiper-slide-thumb-active {
            img {
              border-color: rgba(var(--color-theme), 0.7);
            }
          }
        }
      }
    }

    .product__info-wrapper {
      width: calc(55% - 60px / 2);
      padding: 0;
      padding-top: 60px;

      .product__info-container {
        .product__title {
          margin-bottom: 16px;

          h1 {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.26;
          }
        }

        .product__sku {
          color: rgba(var(--color-foreground));
          font-size: 14px;
          font-weight: 400;
          line-height: 1.42;
          letter-spacing: -0.14px;
          margin: 0;
          margin-bottom: 16px;

          span:first-child {
            font-weight: 600;
            min-width: 100px;
            display: inline-block;
          }
        }

        [id*="variant-selects"] {
          margin: 0;
          margin-bottom: 16px;

          .form__label {
            color: rgba(var(--color-foreground));
            font-size: 14px;
            font-weight: 600;
            line-height: 1.42;
            padding: 0;
            margin: 0;
            margin-bottom: 10px;
          }

          .swatch-input__label {
            margin: 0;
            margin-right: 8px;
            border: 2px solid transparent;
            outline: none;
            position: relative;
          }

          .swatch-input__input:checked + .swatch-input__label {
            border-color: rgba(var(--color-theme), 0.8);

            &:before {
              content: '';
              display: block;
              width: 16px;
              height: 16px;
              background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuODYzMzkgMTAuNTgzM0wzLjA4MzM5IDcuODAzMzNMMi4xMzY3MiA4Ljc0MzMzTDUuODYzMzkgMTIuNDdMMTMuODYzNCA0LjQ3TDEyLjkyMzQgMy41M0w1Ljg2MzM5IDEwLjU4MzNaIiBmaWxsPSIjRDBENUREIi8+Cjwvc3ZnPgo=);
              background-size: 16px 16px;
              background-repeat: no-repeat;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;
            }
          }
        }

        div:has(.price) {
          margin: 0;
          margin-bottom: 16px;

          .price {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px 6px;

            &:not(.price--on-sale) {
              .price__container {
                .price__regular {
                  display: none;
                }

                .price__sale {
                  .price-item--regular {
                    display: none;
                  }
                }
              }

              .badge.price__badge-in-stock {
                display: block;
              }
            }

            .title {
              display: block;
              color: rgba(var(--color-foreground));
              font-size: 14px;
              font-weight: 600;
              line-height: 1.42;
              margin: 0;
              text-transform: uppercase;
              min-width: 100px;
            }

            .badge {
              border-radius: 24px;
              background: #e8f8eb;
              padding: 4px 8px 4px 18px;
              margin: 0;
              color: #007124;
              font-size: 12px;
              font-weight: 400;
              line-height: 1.5;
              position: relative;

              &:before {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 100%;
                background: #007124;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 8px;
              }

              &.price__badge-in-stock {
                display: none;
              }

              &.price__badge-sold-out {
                background: #DE6D6F;
                color: #fff;

                &:before {
                  background: #fff;
                }
              }
            }

            .product__stock {
              color: #007124;
              font-size: 14px;
              font-weight: 500;
              text-transform: capitalize;
            }

            &.price--sold-out {
              .badge.price__badge-in-stock {
                display: none;
              }
            }

            .price__container {
              margin: 0;
              width: 100%;

              .price__sale {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;

                .price-item--sale {
                  color: rgb(var(--color-theme));
                  text-overflow: ellipsis;
                  font-size: 30px;
                  font-weight: 700;
                  line-height: 1.22;
                  margin: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 4px;

                  .inc_tax {
                    color: rgba(var(--color-foreground));
                  }
                }

                .original-price {
                  color: rgba(var(--color-foreground));
                  white-space: nowrap;
                  font-size: 20px;
                  font-weight: 500;
                  line-height: 1.5;
                  margin: 0;
                  opacity: 0.4;

                  &:has(.exc_tax) {
                    display: none;
                  }
                }
              }
            }
          }
        }

        div:has(.product-form__submit) {
          margin: 0;
          margin-bottom: 40px;

          .product-form {
            margin: 0;

            .product-form__submit {
              display: flex;
              padding: 12px 16px;
              justify-content: center;
              align-items: center;
              gap: 8px;
              border-radius: 24px;
              background: rgba(var(--color-button), var(--alpha-button-background));
              width: fit-content;
              color: #fff;
              font-size: 16px;
              font-weight: 500;
              line-height: 1.5;
              margin: 0;

              &:hover {
                background: rgba(var(--color-button-hover), var(--alpha-button-background));
              }
            }
          }
        }

        .normal_content {
          margin-bottom: 24px;
        }

        .toggle_content {
          margin: 0;
          margin-bottom: 24px;
          border-radius: 12px;
          border: 1px solid #eaecf0;
          background: #f9fafb;

          &:last-of-type {
            margin-bottom: 0;
          }

          .title_toggle {
            border-bottom: 1px solid #eaecf0;
            padding: 12px 16px;
            color: rgba(var(--color-theme));
            font-size: 18px;
            font-weight: 600;
            line-height: 1.55;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            margin: 0;

            &:after {
              content: '';
              background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 6.91248L5 11.9125L6.175 13.0875L10 9.27081L13.825 13.0875L15 11.9125L10 6.91248Z" fill="%23344054"/></svg>');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 20px;
              height: 20px;
              display: inline-block;
              transition-duration: 0.5s;
            }
          }

          .content_toggle {
            color: rgba(var(--color-foreground));
            font-size: 14px;
            font-weight: 400;
            line-height: 1.43;
            letter-spacing: -0.14px;
            padding: 16px;
            overflow: hidden;
            max-height: calc(var(--data-height) + 100px);
            transition-duration: 0.5s;
            --font-heading-scale: 0.6;

            *:not(li) {
              margin: 16px 0;
            }

            *:first-child {
              margin-top: 0;
            }

            *:last-child {
              margin-bottom: 0;
            }

            ul {
              list-style: none;
              display: flex;
              flex-direction: column;
              gap: 8px;
              padding: 0;

              &:not(:has(li:nth-child(2))) {
                margin-bottom: 2px;

                li {
                  strong {
                    font-weight: 600;
                    font-size: 16px;
                  }
                }

                + p {
                  margin-top: 0;
                }
              }

              li {
                padding-left: 16px;
                position: relative;

                &:before {
                  content: '';
                  width: 6px;
                  height: 6px;
                  background: rgb(var(--color-theme));
                  border-radius: 100%;
                  position: absolute;
                  left: 0;
                  top: 8px;
                }
              }
            }

            &:has(table) {
              padding: 0;
            }
          }

          &.show {
            .content_toggle {
              padding-top: 0;
              padding-bottom: 0;
              max-height: 0;
            }

            .title_toggle {
              border-color: transparent;

              &:after {
                transform: rotate(180deg);
              }
            }
          }
        }

        .product__description {
          font-size: 14px;

          table {
            width: 100%;
            border-collapse: collapse;

            th {
              background: rgba(var(--color-theme), 0.1);
              padding: 4px 16px;
              margin: 0;
              color: rgba(var(--color-foreground));
              font-size: 14px;
              font-weight: 600;
              line-height: 1.43;
              text-align: left;
            }

            tr {
              td {
                width: 50%;
                padding: 4px 16px;
                border-bottom: 1px solid #eaecf0;

                &:nth-child(1) {
                  padding-right: 10px;
                  border-right: 1px solid #eaecf0;
                }
              }
            }
          }
        }

        .specifications {
          .content_toogle {
            padding: 0;

            .spec-group {
              margin: 0;

              * {
                margin: 0;
              }

              .spec-group__title {
                background: #efe6fd;
                padding: 4px 16px;
                margin: 0;
                color: rgba(var(--color-foreground));
                font-size: 14px;
                font-weight: 600;
                line-height: 1.43;
              }

              .spec-table {
                width: 100%;

                tbody {
                  tr {
                    &:last-child {
                      td {
                        border-bottom: none;
                      }
                    }

                    td {
                      width: 50%;
                      padding: 4px 16px;
                      border-bottom: 1px solid #eaecf0;

                      &:nth-child(2n - 1) {
                        padding-right: 10px;
                        border-right: 1px solid #eaecf0;
                      }

                      &:nth-child(2n) {
                        padding-left: 10px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  body .page-width .product .product__media-wrapper {
    width: 100%;
    padding: 24px 0;
  }

  body .page-width .product .product__info-wrapper {
    width: 100%;
    padding-top: 24px;
    padding-bottom: 40px;
  }

  body .page-width .product .product__media-wrapper:before {
    right: 50%;
    transform: translateX(50%);
    width: 100vw;
  }

  body .page-width .product .product__media-wrapper .swiper-main {
    margin-bottom: 12px;
  }

  body .page-width .product .product__media-wrapper .swiper-thumbs {
    width: calc(100% + 24px);
  }

  body .page-width .product .product__info-wrapper .product__info-container .product__title h1 {
    font-size: 24px;
  }

  body .page-width .product .product__info-wrapper .product__info-container div:has(.price) .price .price__container .price__sale .price-item--sale {
    font-size: 24px;
  }

}