.g-banner-product {
  .banner-card {
    padding: 35px 0;
    display: flex;
    flex-direction: column;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .banner-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      padding: 0 20px;
      gap: 26px;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .banner-content-text {
        width: 45%;
        display: flex;
        flex-flow: column;
        gap: 20px;

        @media (max-width: 768px) {
          width: 100%;
          align-items: center;
          text-align: center;
        }

        .banner-text {
          font-weight: 700;
          font-size: 38px;

          @media (max-width: 768px) {
            font-size: 22px;
          }
        }

        .content-btn {
          width: fit-content;

          .banner-btn {
            border-radius: 11px;
            font-size: 16px;
            font-weight: 700;
            font-size: 21px;
            transition: all 0.3s ease-in-out;
            height: 78px;
            width: 234px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background-color: var(--white-color) !important;
              color: var(--primary-color) !important;
              cursor: pointer;
            }

            @media (max-width: 768px) {
              width: 193px;
              height: 50px;
              font-size: 17px;
            }
          }
        }
      }

      .banner-products {
        width: 45%;

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

        .product-item {
          width: 100%;
          height: 100%;
          max-width: 90%;
          max-height: 450px;
          border-radius: 8px;
          overflow: hidden;
          aspect-ratio: 1 / 2;
          position: relative;
          display: flex;
          align-items: start;
          justify-content: flex-start;
          flex-direction: column;
          background: var(--white-color);

          @media (max-width: 600px) {
            aspect-ratio: 3/ 4;
            width: 100%;
            max-height: 415px;
          }

          .product-card-border-svg {
            display: none;
          }

          .product-main-link {
            flex-direction: column;

            width: 100%;
          }

          /* ===========================
      Image Wrapper
    =========================== */
          .content_img {
            position: relative;
            width: 100%;
            height: 60%;
            border-radius: 8px 8px 2px 2px;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            flex: 1;

            img {
              width: 100%;
              height: 100%;
              transition: 0.3s ease-in-out;
              backface-visibility: hidden;
              position: absolute;
              z-index: 1;
              object-fit: cover;
            }

            /* Overlay */
            .product-overlay {
              position: absolute;
              inset: 0;
              opacity: 0;
              display: flex;
              justify-content: flex-end;
              align-items: end;
              flex-direction: column;
              gap: 10px;
              padding: 10px 0;
              transition: opacity 0.3s ease;
              color: var(--white-color);
              font-size: 1.2rem;
              backdrop-filter: blur(2px);
              z-index: 2;
              border-radius: 8px;

              .eye_toggle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                .eye_cont {
                  background-color: var(--white-color);
                  border-radius: 50%;
                  width: 30px;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }

            &.has-hover-badge:hover {
              .badge-name,
              .product-badge-hover {
                transform: translateX(0);
              }
            }

            &:hover {
              .product-overlay {
                opacity: 0;
              }
            }
          }

          /* ===========================
      Badges
    =========================== */
          .badge-name,
          .product-badge-hover {
            position: absolute;
            right: 5px;
            padding: 0 8px;
            border-radius: 20px;
            color: var(--white-color);
            background-color: var(--primary-color);
            font-weight: 600;
            z-index: 5;
            transition: all 0.4s ease;
            margin: 0 !important;
            transform: translateX(120%);

            [dir="ltr"] & {
              left: 10px;
              right: auto;
              transform: translateX(-120%);
            }
          }

          .badge-name {
            top: 10px;
          }

          .product-badge-hover {
            top: 38px;
          }

          /* ===========================
    Content Details
    =========================== */
          .product_details {
            display: flex;
            justify-content: center;
            flex-flow: column;

            padding: 16px;
            width: 100%;

            .product-title,
            .product-title span {
              color: var(--primary-color);
              font-size: 14px;
              font-weight: 400;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              display: -webkit-box !important;
              overflow: hidden;
              min-height: unset;
              height: fit-content;
            }

            .discription-card > p,
            .discription-card > span {
              color: var(--black-color);
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              display: -webkit-box !important;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 0;
              font-size: 16px;
              font-weight: 400;
            }

            .section-product-price {
              margin: 0;
              color: var(--primary-color);
              display: flex;
              align-items: center;
              gap: 10px;
            }
          }

          .add_button_out {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 5px;
            left: 0;
            transition: all 0.3s ease-in-out;
            z-index: 3;

            .add_btn_card_ver {
              width: 100%;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: var(--primary-color);
              color: var(--white-color);
              border: none;
              font-size: 16px;
              font-weight: 700;
              gap: 10px;
              transition: all 0.3s ease-in-out;

              img {
                width: 18px !important;
                height: 18px !important;
                filter: grayscale(1);
              }

              svg path {
                fill: var(--white-color);
              }

              &:hover {
                background-color: var(--white-color);
                color: var(--primary-color);

                svg path {
                  fill: var(--primary-color);
                }
              }
            }
          }

          /* ===========================
            Wishlist Button
            =========================== */
          .wishlist_container_v {
            position: absolute;
            inset-inline-end: 10px;
            top: 5px;
            left: 5px !important;
            right: auto !important;
            z-index: 4;

            [dir="ltr"] & {
              right: 5px !important;
              left: auto !important;
            }

            .add-to-wishlist_ver {
              margin: 0;
              padding: 0;
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}