.mymoods-card-wrapper {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  width: 100%;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  transition: .5s;
  position: relative;
  gap: 0;
  /*container-type: inline-size;*/ /* subgridとcontainer queryの併用ができなかった */
  /*resize: both;*/ /* This is for debug */
  /*overflow: auto;*/

  &:hover {
    cursor: pointer;
    box-shadow: 0 3px 18px #00000050;
  }

  .image-wrapper {
    width: 100%;
    display: grid;

    .mymoods-card-badges {
      position: absolute;
      width: 100%;
      padding: 12px 15px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      box-sizing: border-box;
      flex-wrap: wrap;

      /*@container (max-width: 280px) {*/
      @media screen and (max-width: 768px) {
        padding: 6px 8px;
        gap: 6px;
      }

      .mymoods-card-badge {
        border-radius: 2px;
        overflow: hidden;

        .mymoods-card-badge__image {
          display: block;
          aspect-ratio: unset;
          object-fit: contain;
          height: 20px;

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

    .mymoods-card-product-image, svg {
      aspect-ratio: 1 / 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .product-info {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 12px;

    @media screen and (max-width: 768px) {
      padding: 10px 15px;
      column-gap: 2px;
    }

    .product-info__left {
      flex: 1;

      .product-info__details {
        display: flex;
        align-items: baseline;
        column-gap: 10px;
        margin-bottom: 6px;
        flex-wrap: wrap;

        @media screen and (max-width: 768px) {
          flex-wrap: wrap;
          row-gap: 2px;
          margin-bottom: 4px;
        }

        .product-info__brand {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 6px;
          font-family: var(--mymoods-font-poppins), sans-serif;
          font-weight: var(--mymoods-font-weight-bold);
          font-size: 13px;
          color: black;
          line-height: 1;

          @media screen and (max-width: 768px) {
            letter-spacing: 0;
            font-weight: var(--mymoods-font-weight-extrabold);
            font-size: 10px;
          }
        }

        .product-info__puffs {
          font-family: var(--mymoods-font-poppins), sans-serif;
          font-weight: var(--mymoods-font-weight-semibold);
          font-size: 13px;
          color: black;

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

      .product-info__title {
        word-break: break-word;
        text-decoration: none;
        color: black;
        font-family: var(--mymoods-font-poppins), sans-serif;
        font-weight: var(--mymoods-font-weight-regular);
        font-size: 18px;
        line-height: 1;
        display: block;
        letter-spacing: 0;
        margin-bottom: 6px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* ブラウザがサポートしていない場合のフェールセーフ */
        max-height: 54px;

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

      .overlay-link {

        &::after {
          content: '';
          background-color: transparent;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          transition: .5s;
        }
      }

      .product-info__price {
        font-family: var(--mymoods-font-poppins), sans-serif;
        font-weight: var(--mymoods-font-weight-semibold);

        .price {
          font-size: 13px;
        }

        @media screen and (max-width: 768px) {
          font-weight: var(--mymoods-font-weight-extrabold);
          font-size: 12px;
          letter-spacing: 0;
          .price__regular {
            font-size: 12px;
          }

          .price__sale {
            font-size: 12px;
          }
        }
      }

      .product-info__rating {
        .jdgm-prev-badge__stars {
          @media screen and (max-width: 768px) {
            transform-origin: left;
            transform: scale(0.8);
            display: block;
          }
        }
      }

      .product-info__cart-buttons {
        margin-top: 12px;

        .product-info__cart-buttons--button {
          position: relative;
          z-index: 1;
          width: 100%;
          height: 40px;
          border-radius: 9999px;
          border: 1px solid var(--mymoods-blue);
          display: flex;
          gap: 12px;
          justify-content: center;
          align-items: center;
          background-color: var(--mymoods-blue);
          color: white;
          font-size: 1.4rem;
          font-family: var(--mymoods-font-poppins), sans-serif;
          font-weight: var(--mymoods-font-weight-semibold);
          cursor: pointer;
          text-decoration: none;

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

          @media screen and (max-width: 480px) {
            width: 125%;
            gap: 6px;
            padding-inline: 0;
          }

          svg {
            display: block;
            width: 18px;

            @media screen and (max-width: 480px) {
              width: 14px;
            }
          }

          &:disabled {
            cursor: not-allowed;
            opacity: .3;
          }
        }
      }
    }

    .product-info__right {
      width: 40px;

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

      .product-info__buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .product-info__buttons--button {
          position: relative;
          z-index: 1;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          cursor: pointer;
          appearance: none;
          border: none;
          background-color: #F2F3F6;
          color: black;
          padding: 12px;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;

          @media screen and (max-width: 768px) {
            width: 32px;
            height: 32px;
            padding: 8px;
          }

          svg {
            display: block;
            width: 100%;
          }

          &:disabled {
            cursor: not-allowed;
            opacity: .3;
          }
        }
      }
    }
  }
}