Server : Apache/2.4.52 (Ubuntu) System : Linux webserver 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov 6 17:42:15 UTC 2 x86_64 User : www-data ( 33) PHP Version : 8.1.2-1ubuntu2.21 Disable Function : NONE Directory :  /var/www/theprintave/wp-content/themes/pricom/assets/scss/woocommerce/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// PRODUCT BASE STYLE
.product-wrap {
  > .yith-wcwl-add-to-wishlist {
    display: none;
  }
}

.product-top {
  position: relative;
  // overflow: hidden;
}

.product-thumbnail {
  position: relative;

  > a {
    display: flex;
    align-items: flex-start;
  }

  img {
    width: 100%;
    // border: 1px solid rgba($cl-border, .5);
    border-radius: $border-radius;
  }
}

.product-label {
  position: absolute;
  left: 10px;
  top: 10px;

  &__item {
    display: block;
    border-radius: $border-radius-small;
    color: $cl-white;
    font-size: 14px;
    font-weight: $fw-semi-bold;
    padding: 0 6px;
    margin-bottom: 3px;
    line-height: 1.6;
    // text-transform: uppercase;
    text-align: center;

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

    &--onhot {
      background-color: #fb935a;
    }

    &--onnew {
      background-color: #11b196;
    }

    &--onsale {
      background-color: #d3122a;
    }

    &--onsold {
      background-color: $cl-black;
    }
  }
}

.woocommerce-loop-product {
  &__title {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 5px;
    transition: all .3s;

    @media screen and (max-width: $screen-lg-max) {
      font-size: 17px;
    }

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

    @media screen and (max-width: $screen-xs-max) {
      
    }

    &:hover {
      color: $cl-primary;
      transition: all .3s;
    }
  }
}

.product-info {
  text-align: center;

  .product-button {
    &--add-to-cart {
      display: none;
    }
  }

  .button {
    &.product_type_customizable {
      display: none;
    }
  }
  
}

.product-short-description {
  display: none;
}

$action-size: 40px;

.product-item {
  // Variations
  .product-varations {

    .haru-variations-list {
      // General
      .variation {
        margin: 0 3px;
        cursor: pointer;
        position: relative;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          .button-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%,-10px);
            transition: all .3s ease-in-out 0s;
          }
        }

        &.selected {
          border-color: $cl-primary;
        }

        .button-tooltip {
          padding: 1px 3px;
          position: absolute;
          text-transform: none;
          display: inline-block;
          min-width: 50px;
          opacity: 0;
          text-align: center;
          visibility: hidden;
          bottom: 100%;
          left: 50%;
          background: #555!important;
          color: $cl-white!important;
          font-size: 12px!important;
          line-height: 20px!important;
          font-weight: normal;
          border-radius: $border-radius-small;
          transform: translate(-50%,0);

          &:after {
            width: 0;
            height: 0;
            position: absolute;
            bottom: -6px;
            left: 50%;
            content: "";
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid #555;
            transform: translate(-50%,0);
          }
        }
      }

      .variation-color {
        border: 1px solid $cl-border;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;

        .color-variation {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      }

      .variation-label {
        border: 1px solid $cl-border;
        padding: 0 5px;
        background-color: $cl-white;
        color: $cl-black;
      }

      .variation-image {
        border: 1px solid $cl-border;
        display: inline-flex;

        img {
          max-width: 30px;
        }
      }
    }
  }

  // Quickview + Wishlist + compare + Add to cart
  .product-actions {
    
    // Tooltip button
    a {
      height: $action-size!important;
      line-height: $action-size!important;
      width: $action-size!important;
      padding: 0!important;
      border-radius: 50%;
      color: $cl-black!important;

      &:before {
        font-size: 20px;
        font-weight: $fw-normal;
        font-family: 'phosphor';
      }
    }

    // General button (not use)
    > div {
      &:after {
        background-color: $cl-border;
        content: "";
        width: 1px;
        height: 20px;
        right: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: none;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }
    }

    // Add to wishlist
    .yith-wcwl-add-to-wishlist {
      margin-top: 0;

      a {
        display: block;
        font-size: 0;

        &:hover {
          transition: all .3s;
        }

        &:before {
          content: '\e901';
        }
      }

      i,
      .yith-wcwl-icon-svg {
        display: none;
      }

      .ajax-loading {
        display: none;
      }

      .yith-wcwl-add-button,
      .yith-wcwl-wishlistaddedbrowse,
      .yith-wcwl-wishlistexistsbrowse {
        
      }

      .yith-wcwl-wishlistaddedbrowse,
      .yith-wcwl-wishlistexistsbrowse {
        .feedback {
          display: none;
        }

        a {
          color: $cl-primary;
          transition: all .3s;

          &:before {
            // content: '\e91c';
            color: $cl-primary;
          }
        }

        &:hover {
          a {
            &:before {
              color: $cl-white;
            }
          }
        }
      }
    }

    // Add to compare
    .product-button--compare {
      font-size: 0;

      // @media screen and (max-width: $screen-xs-max) {
      //     display: none;
      // }

      a {
        background: transparent!important;
        color: $cl-text;
        width: $e-height-base;
        height: $e-height-base;
        padding: 0;
        border-radius: 50%;

        &:before {
          content: '\e926';
        }

        &:hover {
          // color: $cl-primary!important;
          transition: all .3s;

          &:before {
            // color: $cl-primary!important;
          }
        }

        &.compare-loading {
          overflow: hidden;
        }

        &.added {
          // color: $cl-primary!important;
        }
      }
    }

    // Add to cart
    .product-button--add-to-cart {
      a,
      .add_to_cart_button,
      .added_to_cart {
        background: transparent!important;
        color: $cl-text;
        font-weight: $fw-normal;

        &:before {
          display: block;
          content: '\e905';
          font-family: 'phosphor';
          font-size: 20px;
        }

        &.product_type_soldout {
          &:before {
            content: '\e90a';
          }
        }

        &.product_type_simple {
          &:before {
            content: '\e905';
          }
        }

        &.product_type_variable {
          &:before {
            content: '\e906';
          }
        }

        &.product_type_grouped {
          &:before {
            content: '\e906';
          }
        }

        &.product_type_external {
          &:before {
            content: '\e906';
          }
        }

        &.added {
          display: none; // New 3.1
        }

        &.loading {
          opacity: 1;

          &:before {
            content: '\e95f';
            animation: iconSpin 2s linear infinite;
          }
        }

        &:hover {
          color: $cl-primary;
        }
      }

      .added_to_cart {
        font-size: 0;

        &:before {
          color: $cl-primary;
        }
      }

      &:hover {
        .added_to_cart {
          &:before {
            color: $cl-white;
          }
        }
      }
    }

    // Quickview button
    .product-button--quickview {
      a {
        display: block;
        position: relative;

        &:before {
          content: '\e92f';
        }
      }
    }
  }

  // Buy Now
  &.haru-buy-now-hide-atc {
    .product-button--add-to-cart {
      display: none!important;
    }
  }

  .button.haru-btn-buy-now {
    display: block;
    width: fit-content;
    margin: 0 auto;
    min-width: 60%;
    text-align: center;

    @media screen and (max-width: $screen-xs-max) {
      min-width: 80%;
    }

    &.position-after_price {
      margin-top: 10px;
    }
  }

  /* Style 1 */
  &.style-1 {
    // Variations
    .product-varations {
      position: absolute;
      left: 10px;
      bottom: 0;
      opacity: 0;
      z-index: 3;
      transition: all .5s;
    }

    // Quickview + Wishlist + compare + Add to cart
    .product-actions {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 10px;
      top: 10px;
      opacity: 0;
      visibility: hidden;
      text-align: center;
      z-index: 3;
      transition: all .5s;
      transform: translateX(10px);

      .product-button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: $cl-white;
        margin-bottom: 10px;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba($cl-black, .08);
        transition: all .3s;

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

        &:hover {
          background-color: $cl-primary;
          transition: all .3s;

          a {
            color: $cl-white!important;
            transition: all .3s;
          }
        }
      }

      a {
        &:hover {
          background-color: transparent;

          .button-tooltip {
            opacity: 1;
            visibility: visible;
            // transform: translate(-50%, -6px);
            transition: all 300ms ease-in-out 0s;
          }
        }

        .button-tooltip {
          padding: 2px 6px;
          position: absolute;
          text-transform: none;
          display: inline-block;
          min-width: 82px;
          opacity: 0;
          text-align: center;
          visibility: hidden;
          right: calc(100% + 6px);
          top: 50%;
          background: $cl-black;
          color: $cl-white;
          border-radius: $border-radius-small;
          font-size: 14px;
          line-height: 20px;
          font-weight: normal;
          transform: translateY(-50%);

          @media screen and (max-width: $screen-lg-max) {
            font-size: 13px;
            padding: 2px 5px;
            min-width: 80px;
          }

          @media screen and (max-width: $screen-sm-max) {
            font-size: 12px;
          }

          &:after {
            width: 0;
            height: 0;
            position: absolute;
            right: -6px;
            top: 50%;
            content: "";
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 7px solid $cl-black;
            transform: translateY(-50%);
          }
        }
      }
    }

    .product-design {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translate(-50%, 15px);
      opacity: 0;
      visibility: hidden;
      transition: all .3s;

      .button {
        height: 40px;
        line-height: 40px;
        background-color: $cl-white;
        box-shadow: 0 4px 9px rgba($cl-black, .05);
        color: $cl-black;
        border-radius: $border-radius-small;
        display: inline-flex;
        align-items: center;
        font-size: 16px;

        @media screen and (max-width: $screen-lg-max) {
          font-size: 15px;
        }

        @media screen and (max-width: $screen-md-max) {
          font-size: 14px;
        }

        &:before {
          content: '\e91f';
          font-family: 'phosphor';
          font-size: 16px;
          font-weight: $fw-semi-bold;
          margin-right: 3px;
        }

        &:hover {
          background-color: $cl-primary;
          color: $cl-white;
        }
      }
    }

    .product-info {
      position: relative;
    }

    .star-rating {
      font-size: 18px;
      position: absolute;
      top: 1px;
      left: 50%;
      line-height: 1;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 10px);
      transition: all .3s;

      @media screen and (max-width: $screen-lg-max) {
        font-size: 17px;
      }

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

      @media screen and (max-width: $screen-sm-max) {
        font-size: 15px;
      }
    }

    .price {
      color: $cl-text-2;
      font-size: 16px;

      @media screen and (max-width: $screen-lg-max) {
        font-size: 15px;
      }

      @media screen and (max-width: $screen-md-max) {
        font-size: 14px;
      }

      .amount {
        color: $cl-primary;
        font-weight: $fw-semi-bold;
      }

      ins {
        text-decoration: none;
      }

      del {
        margin-left: 6px;

        .amount {
          color: $cl-text-2;
          font-weight: $fw-semi-bold;
        }
      }
    }

    &.has-rating {
      &:hover {
        .woocommerce-loop-product__title {
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
        }

        .star-rating {
          opacity: 1;
          visibility: visible;
          transform: translate(-50%, 0);
          transition: all .3s;
        }
      }
    }

    &:hover {
      .product-varations {
        opacity: 1;
        visibility: visible;
        transition: all .3s;
      }

      .product-actions {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: all .3s;
      }

      .product-design {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: all .3s;
      }

      .star-rating {
        opacity: 1;
        transition: all .3s;
      }
    }
  }

  /* Style 2 */
  &.style-2 {
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% + 20px);
      background: $cl-white;
      box-shadow: 0 7px 30px rgba($cl-black, .13);
      border-radius: $border-radius;
      opacity: 0;
      visibility: hidden;
      transform: scale(.96) translateY(0);
      transition: all .3s;
    }

    .product-wrap {
      transition: all .3s;
    }

    // Variations
    .product-varations {
      text-align: right;
      width: 100%;
      padding-right: 10px;
      position: absolute;
      top: 10px;
      opacity: 0;
      visibility: hidden;
      z-index: 3;
      transition: all .3s;
    }

    // Quickview + Wishlist + compare + Add to cart
    .product-actions {
      display: flex;
      flex-direction: row;
      position: absolute;
      bottom: 20px;
      left: 50%;
      opacity: 0;
      visibility: hidden;
      text-align: center;
      z-index: 3;
      transition: all .3s;
      transform: translate(-50%, 15px);

      .product-button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: $cl-white;
        margin: 0 5px;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba($cl-black, .08);
        transition: all .3s;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          background-color: $cl-primary;
          transition: all .3s;

          a {
            color: $cl-white!important;
            transition: all .3s;
          }
        }
      }

      // Tooltip button
      a {
        &:hover {
          background-color: transparent;

          .button-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -6px);
            transition: all 300ms ease-in-out 0s;
          }
        }

        .button-tooltip {
          padding: 2px 6px;
          position: absolute;
          text-transform: none;
          display: inline-block;
          min-width: 82px;
          opacity: 0;
          text-align: center;
          visibility: hidden;
          background: $cl-black;
          color: $cl-white;
          border-radius: $border-radius-small;
          font-size: 14px;
          line-height: 20px;
          font-weight: normal;
          bottom: 100%;
          left: 50%;
          transform: translate(-50%,0);

          @media screen and (max-width: $screen-lg-max) {
            font-size: 13px;
            padding: 2px 5px;
            min-width: 80px;
          }

          @media screen and (max-width: $screen-sm-max) {
            font-size: 12px;
          }

          &:after {
            width: 0;
            height: 0;
            position: absolute;
            right: auto;
            top: auto;
            bottom: -6px;
            left: 50%;
            content: "";
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid $cl-black;
            transform: translate(-50%,0);
          }
        }
      }
    }

    .product-design {
      position: absolute;
      top: calc(100% + 15px);
      bottom: auto;
      right: 0;
      left: 0;
      transform: none;
      opacity: 0;
      visibility: hidden;
      text-align: center;
      transition: all .3s;

      .button {
        height: 40px;
        line-height: 40px;
        background-color: $cl-white;
        border: 2px solid $cl-border;
        border-radius: $border-radius;
        color: $cl-black;
        border: none!important;
        border-radius: $border-radius;
        display: inline-flex;
        align-items: center;
        font-size: 16px;

        @media screen and (max-width: $screen-lg-max) {
          font-size: 15px;
        }

        @media screen and (max-width: $screen-md-max) {
          font-size: 14px;
        }

        &:before {
          content: '\e91f';
          font-family: 'phosphor';
          font-size: 16px;
          font-weight: $fw-semi-bold;
          margin-right: 3px;
        }

        &:hover {
          border: 2px solid $cl-primary;
          background-color: $cl-primary;
          color: $cl-white;
        }
      }
    }

    .product-info {
      position: relative;
    }

    .star-rating {
      font-size: 18px;
      position: absolute;
      top: 1px;
      left: 50%;
      line-height: 1;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 10px);
      transition: all .3s;

      @media screen and (max-width: $screen-lg-max) {
        font-size: 17px;
      }

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

      @media screen and (max-width: $screen-sm-max) {
        font-size: 15px;
      }
    }

    .price {
      color: $cl-text-2;
      font-size: 16px;

      @media screen and (max-width: $screen-lg-max) {
        font-size: 15px;
      }

      @media screen and (max-width: $screen-md-max) {
        font-size: 14px;
      }

      .amount {
        color: $cl-primary;
        font-weight: $fw-semi-bold;
      }

      ins {
        text-decoration: none;
      }

      del {
        margin-left: 6px;

        .amount {
          color: $cl-text-2;
          font-weight: $fw-semi-bold;
        }
      }
    }

    // Customize product
    &.product-customize {
      &:before {
        height: calc(100% + 75px);
        transition: all .3s;
      }
    }

    &.has-rating {
      &:hover {
        .woocommerce-loop-product__title {
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
        }

        .star-rating {
          opacity: 1;
          visibility: visible;
          transform: translate(-50%, 0);
          transition: all .3s;
        }
      }
    }

    &:hover {
      z-index: 3;

      &:before {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(-10px);
        transition: all .3s;
      }

      .product-wrap {
        transform: translateY(-10px);
        transition: all .3s;
      }

      // Variations
      .product-varations {
        opacity: 1;
        visibility: visible;
        transition: all .3s;
      }

      .product-actions {
        transform: translate(-50%, 0);
        opacity: 1;
        visibility: visible;
        transition: all .3s;
      }

      .product-design {
        opacity: 1;
        visibility: visible;
        transition: all .3s;
      }

      .star-rating {
        opacity: 1;
        transition: all .3s;
      }
    }

  }

  /* Category */
  &.product-category {
    img {
      border: 1px solid rgba($cl-border, .5);
      border-radius: $border-radius;
    }

    .count {
      background-color: transparent;
      color: $cl-primary;
      display: none;
    }
  }
}

#yith-wcwl-popup-message {

}


/* Safari */
@-webkit-keyframes iconSpin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes iconSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#{$dark-mode} {
  .product-label {
    &__item {
      color: $cl-white;

      &--onhot {
        background-color: $cl-bg-dark;
      }

      &--onnew {
        background-color: $cl-bg-dark;
      }

      &--onsale {
        background-color: $cl-bg-dark;
      }

      &--onsold {
        background-color: $cl-bg-dark;
      }
    }
  }

  .product-item {
    // Quickview + Wishlist + compare + Add to cart
    .product-actions {
      background-color: $cl-bg-dark-2;

      // Tooltip button

      // General button
      > div {
        &:after {
          background-color: $cl-border-dark;
        }
      }

      // Add to wishlist

      // Add to compare
      .product-button--compare {

        a {
          color: $cl-text-dark;

          &.added {

          }
        }
      }

      // Add to cart
      .product-button--add-to-cart {
        a,
        .add_to_cart_button,
        .added_to_cart {
          color: $cl-text-dark;

          &:hover {
            color: $cl-primary;
          }
        }

        .added_to_cart {

        }
      }

      // Quickview button
      .product-button--quickview {
        
      }
    }

    .price {
      color: $cl-text-2;

      .amount {
        color: $cl-primary;
        font-weight: $fw-bold;
      }



      del {
        .amount {
          color: $cl-text-2;
        }
      }
    }

    &:hover {
      .product-actions {

      }

      .star-rating {

      }
    }
  }
}


/* Elementor fix on Elementor Editor Mode */
.elementor-editor-active {
  .product-item {
    .product-wrap {
      > .product-button {
        display: none;
      }

      >.product_type_customizable {
        display: none;
      }
    }
  }
}