@import "variables";
@import "mixins";

.product-card {
  &.content-product-wrap.product.b2b-product-card {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.6rem;
    background-color: $white;
    border-radius: 0.8rem;
    padding: 2.4rem;
    row-gap: 2.4rem;
    &.simple {
      .content-product {
        .info-wrp {
          flex-basis: 15%;
          min-width: 15%;
          @include bp(xl) {
            flex-basis: 100%;
            min-width: 100%;
          }
        }
      }
    }
    .items-end {
      display: flex;
      justify-content: flex-end;
      margin-top: 2.4rem;
      position: sticky;
      top: 0;
      left: 0;
      .button {
        margin-right: 0.8rem;
      }
    }
    .screen-reader-text {
      display: none !important;
    }
    .quantity {
      border: 1px solid $gray300;
      padding: 0.35rem 0.2rem;
      border-radius: 4px;
      flex: unset;
      max-width: fit-content;
      white-space: nowrap;
      font-size: $fs-h5;
      font-weight: $fw-bold;
      input[type="number"].qty,
      input.minus,
      input.plus {
        border: none;
        border-radius: 0;
        padding: 0 0.3rem;
        background-color: transparent;
      }
      input.minus,
      input.plus {
        cursor: pointer;
      }
      input[type="number"].qty {
        border-left: 1px solid $gray300;
        border-right: 1px solid $gray300;
        text-align: center;
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        padding: 0 0.4rem;
        max-width: 2.7rem;
        width: 2.7rem;
      }
    }
    table.summary {
      margin-top: 2.4rem;
      position: sticky;
      left: 0;
      top: 0;
      tr {
        position: relative;
        isolation: isolate;
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background-color: hsla(146, 73%, 48%, 0.1);
          border-radius: 8px;
          z-index: -1;
        }
        td {
          padding: 0.4rem 0.8rem;
          font-size: $fs-h5;
          font-weight: $fw-bold;
          color: $black !important;
          text-transform: uppercase;
          position: relative;
          &.summary-normalPrice,
          &.summary-b2bPrice {
            text-align: right;
            width: 15%;
          }
          &.summary-b2bPrice {
            &::before {
              content: "";
              display: block;
              width: 1px;
              position: absolute;
              height: calc(100% - 1.6rem);
              left: 10%;
              background-color: $gray300;
              border-radius: 10px;
              top: 0.8rem;
              @include bp(lg) {
                content: none;
              }
            }
          }
        }
      }
    }
    .variable-details {
      flex-basis: 100%;
      width: 100%;
      border-top: 1px solid #e5ebfd;
      padding-top: 2.4rem;
      display: none;
      overflow: hidden;
      position: relative;
      @include bp(lg) {
        &::after {
          content: "";
          background: linear-gradient(to left, #ffffff, #ffffff00);
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 20px;
        }
      }
      .add-to-cart-variations-button {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        background-color: transparent;
        border: 1px solid $col-success;
        color: $col-success;
        border-radius: 4px;
        padding: 0.8rem;
        svg {
          path {
            transition: 0.3s;
            fill: $col-success;
          }
        }
        &:hover {
          background-color: $col-success;
          color: $white;
          svg {
            path {
              fill: $white;
            }
          }
        }
      }
      form {
        overflow: auto;
        @include bp(lg) {
          padding-bottom: 1rem;
        }
        &::-webkit-scrollbar {
          width: 1px;
        }
        table {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0.8rem;
          td {
            font-size: $fs-mini;
            color: $gray500;
            height: 3.8rem;
            padding: 0.3rem 0;
            white-space: nowrap;
            &:first-of-type {
              padding-left: 0.8rem;
            }
            &.quantity-col {
              width: 85px;
            }
          }
          .variation {
            position: relative;
            isolation: isolate;
            &::after {
              content: "";
              position: absolute;
              inset: 0;
              background-color: $col-bg;
              border-radius: 8px;
              z-index: -1;
            }
            &:nth-of-type(even) {
              &::after {
                background-color: #f4f6ff;
              }
            }
          }
          td.label {
            padding: 0;
            &:last-of-type,
            &:nth-last-of-type(2) {
              text-align: right;
            }
            &:last-of-type {
              position: relative;
              &::before {
                content: "";
                display: block;
                width: 1px;
                position: absolute;
                height: calc(100% - 1.6rem);
                left: 13%;
                background-color: #e5ebfd;
                border-radius: 10px;
                top: 0.8rem;
                @include bp(xl) {
                  content: none;
                }
              }
            }
          }
          td.attribute {
            color: $black;
          }
          td.normalPrice,
          td.b2bPrice {
            text-align: right;
            del {
              display: none;
            }
            ins {
              text-decoration: none;
            }
          }
          td.b2bPrice {
            position: relative;
            width: 20%;
            @include bp(xxl) {
              width: unset;
            }
            &::before {
              content: "";
              display: block;
              width: 1px;
              position: absolute;
              height: calc(100% - 1.6rem);
              left: 13%;
              background-color: #e5ebfd;
              border-radius: 10px;
              top: 0.8rem;
              @include bp(xl) {
                content: none;
              }
            }
          }
          td.availability_html {
            * {
              margin: 0;
              font-size: $fs-mini;
            }
            .outofstock {
              color: $col-danger;
            }
            .instock {
              color: $col-success;
            }
            .onbackorder {
              color: $col-warn;
            }
          }
        }
      }
    }
    .content-product {
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-basis: calc(90% - 0.4rem);
      gap: 2.4rem;
      @include bp(xxl) {
        flex-basis: calc(85% - 0.4rem);
        max-width: calc(85% - 0.4rem);
      }
      @include bp(xl) {
        flex-basis: 100%;
        min-width: 100%;
        flex-wrap: wrap;
      }
      .info-wrp {
        flex-basis: 35%;
        min-width: 35%;
        @include bp(xl) {
          flex-basis: 100%;
          min-width: 100%;
        }
      }
      .content-product-title {
        h2 {
          font-size: $fs-h5;
          font-weight: $fw-bold;
          margin-bottom: 0.4rem;
        }
      }
      .content-product-excerpt,
      .content-product-excerpt p {
        margin: 0;
        font-size: $fs-mini;
        color: $gray500;
      }
      .content-product-excerpt {
        margin-bottom: 1rem;
      }
      .content-product-footer {
        width: 100%;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: nowrap;
        @include bp(xl) {
          gap: 0.8rem;
        }
        .content-product-quick-form {
          width: 100%;
          .quick-cart {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 2.4rem;
            @include bp(xl) {
              flex-wrap: wrap;
            }
            .quantity-wrp {
              display: flex;
              flex-direction: column;
              gap: 0.4rem;
              > p {
                margin: 0;
                font-size: $fs-mini;
                color: $gray500;
              }
            }
          }
        }
        .add-to-cart-wrapper {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          gap: 1.6rem;
          @include bp(xl) {
            align-items: flex-start;
          }
          .content-product-price {
            display: flex;
            gap: 1.6rem;
            @include bp(xl) {
              flex-wrap: wrap;
            }
            .line {
              border-right: 1px solid #e5ebfd;
              height: 42px;
              width: 1px;
              margin: 0;
            }
            .normal-price,
            .b2b-price,
            .normal-price-per-product,
            .b2b-price-per-product {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              justify-content: flex-start;
              @include bp(xl) {
                align-items: flex-start;
              }
              * {
                text-align: right;
              }
              > p {
                font-size: $fs-mini;
                margin: 0;
                color: $gray500;
              }
              .price,
              .price-range {
                ins {
                  background-color: transparent;
                  padding: 0;
                  color: $black;
                }
                del {
                  display: none;
                }
                * {
                  font-size: $fs-small;
                  color: $black;
                }
              }
            }
            .normal-price-per-product,
            .b2b-price-per-product {
              .price,
              .price-range {
                *,
                ins {
                  color: $gray500;
                  font-size: $fs-mini;
                }
              }
            }
          }
          .button {
            background: none;
            background-color: transparent;
            border-color: $col-success;
            color: $col-success;
            border-radius: 4px;
            padding: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            svg {
              transition: 0.3s;
              path {
                fill: $col-success;
              }
            }
            &:hover {
              background-color: $col-success;
              color: $white;
              svg {
                path {
                  fill: $white;
                }
              }
            }
          }
          .content-product-button {
            .link {
              color: $col-prm;
              display: flex;
              align-items: center;
              gap: 0.2rem;
              text-transform: uppercase;
              font-size: $fs-h5;
              font-weight: $fw-bold;
              svg {
                margin-top: -3px;
                transition: 0.3s;
                path {
                  fill: $col-prm;
                }
              }
            }
            &.active {
              .link {
                svg {
                  transform: rotate(180deg);
                }
              }
            }
          }
        }
      }
      .content-product-sku {
        margin: 0;
        font-size: $fs-mini;
        color: $gray500;
      }
      .content-product-variations {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.8rem;
        > a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: fit-content;
          color: $gray500;
          border: 1px solid $gray300;
          padding: 0.6rem 1rem;
          text-decoration: none;
          border-radius: 4px;
          white-space: nowrap;
          &:hover {
            border-color: $black;
            background-color: $black;
            color: $white;
            text-decoration: none;
          }
          &.outofstock {
            text-decoration: line-through;
            border-color: $gray200;
            color: $gray200;
            pointer-events: none;
            cursor: not-allowed;
          }
        }
      }
    }
    > .woocommerce-loop-product__link {
      flex-basis: calc(10% - 1.2rem);
      max-width: calc(10% - 1.2rem);
      height: auto !important;
      @include bp(xxl) {
        flex-basis: calc(15% - 1.2rem);
        max-width: calc(15% - 1.2rem);
      }

      @include bp(xl) {
        flex-basis: 100%;
        min-width: 100%;
      }
      .content-product-thumbnail {
        width: 80px;
        min-width: 80px;
        height: 80px !important;
        min-height: 80px !important;
        position: relative;
        border-radius: 2px !important;
        border: 1px solid $gray200;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 0;
        }
      }
    }
  }
}
