@nuskin/product-components 3.18.0 → 4.0.0-cx15-11969.2

package/components/NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue

@@ -1,1100 +0,0 @@
-<template>
-  <section class="popular-section">
-    <div class="popular-section-inner">
-      <div class="tab-content popular-product-tab">
-        <div class="tab-pane popular-tab1">
-          <!-- {{ tab }} -->
-          <div class="crsl-container">
-            <div class="slider">
-              <Loader v-if="loading" />
-              <div v-if="!loading" class="carousel__container">
-                <Carousel
-                  v-if="products.length > 0"
-                  :options="options"
-                  class="popular-slider-wrap"
-                  @click="handleClick"
-                >
-                  <div class="nav-wrapper d-none d-sm-flex mb-4 pl-2">
-                    <div class="carousel-title-text">
-                      {{ title }}
-                    </div>
-                  </div>
-                  <div
-                    class="nav-wrapper d-none d-md-flex justify-content-between align-items-center mb-4"
-                  >
-                    <div class="carousel-title-text">
-                      {{ title }}
-                    </div>
-                    <CarouselChevron />
-                  </div>
-                  <div data-carousel="wrapper">
-                    <div
-                      v-for="(product, productIndex) in products"
-                      :key="productIndex"
-                      class="single-popular-product"
-                      data-carousel="item"
-                    >
-                      <div
-                        class="image"
-                        @click="
-                          openLink(product.slug, product.firstVariant.sku)
-                        "
-                      >
-                        <img
-                          :title="product.fullTitle"
-                          :src="optimizeImage(product.carouselImage.url, 280)"
-                          :alt="product.fullTitle"
-                          loading="lazy"
-                        />
-                      </div>
-                      <div class="crsl-content">
-                        <a
-                          class="text-decoration-none"
-                          href
-                          tabindex="-1"
-                          data-disabletab
-                          @click="
-                            openLink(product.slug, product.firstVariant.sku)
-                          "
-                        >
-                          <h6 class="subhead-s">
-                            {{ product.primaryBrand }} &nbsp;
-                          </h6>
-                          <h2 class="paragraph-l product-title">
-                            {{ product.fullTitle }}
-                          </h2>
-                        </a>
-                        <h3 class="heading-3 price-heading">
-                          <Price
-                            :product="product"
-                            :user="user"
-                            :sales-events="salesEvents"
-                          />
-                        </h3>
-                      </div>
-                      <a
-                        class="button pop-add-btn effect-black"
-                        :data-sku="product.firstVariant.sku"
-                        data-carousel="cta"
-                      >
-                        <span class="icon">
-                          <NsIcon
-                            icon-name="icon-addtocart"
-                            color="#F5F5F5"
-                            size="icon-md"
-                          />
-                        </span>
-                        <span class="text cta">{{ addToCartText }}</span>
-                      </a>
-                    </div>
-                  </div>
-                  <div data-carousel="dots"></div>
-                </Carousel>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-/*
-This is a visual clone of the Popular Products Carousel found in the Nu Home project and used (at time of writing) on the AEM-hosted homepage.
-The popular-products business logic has been stripped out, in favor of a prop for injecting product SKU IDs or UIDs.
-The debug logic from the original has also been stripped out.
- */
-
-import { NsIcon } from "@nuskin/ns-icon";
-import { AccountManager } from "@nuskin/ns-account";
-import { CartService, SalesEventService } from "@nuskin/ns-shop";
-import { events } from "@nuskin/ns-util";
-import Carousel from "./Carousel.vue";
-import CarouselChevron from "./CarouselChevron.vue";
-import Loader from "./Loader.vue";
-import globalHelper from "../../mixins/globalHelper";
-import Product from "../../models/product";
-import Price from "./Price.vue";
-import get from "lodash/get";
-import {
-  findProductsById,
-  getProductTranslations
-} from "../../services/NsProductContentService";
-
-const OPTIONS = {
-  pagination: {
-    el: ".swiper-pagination",
-    type: "bullets",
-    clickable: true
-  },
-  watchSlidesProgress: true,
-  loop: true,
-  centeredSlides: true,
-  navigation: {
-    nextEl: ".swiper-button-next",
-    prevEl: ".swiper-button-prev"
-  },
-  slidesPerView: 1.5,
-  spaceBetween: 20,
-  breakpoints: {
-    500: {
-      slidesPerView: 2
-    },
-    600: {
-      spaceBetween: 30,
-      slidesPerView: 2.3,
-      centeredSlides: false
-    },
-    768: {
-      slidesPerView: 1
-    },
-    850: {
-      slidesPerView: 1.3,
-      centeredSlides: false
-    },
-    1024: {
-      slidesPerView: 2,
-      spaceBetween: 30,
-      centeredSlides: false
-    }
-  }
-};
-
-/**
- * Compares two lists of strings and determines if their contents are the same.
- * @param {string[]} listA
- * @param {string[]} listB
- * @return {boolean}
- */
-function compareStringLists(listA, listB) {
-  if (listA.length !== listB.length) return false;
-
-  const freqCountsA = {};
-  const freqCountsB = {};
-
-  for (const v of listA) freqCountsA[v] = (freqCountsA[v] || 0) + 1;
-  for (const v of listB) freqCountsB[v] = (freqCountsB[v] || 0) + 1;
-
-  for (const key in freqCountsA) {
-    if (!(key in freqCountsB)) return false;
-
-    if (freqCountsA[key] !== freqCountsB[key]) return false;
-  }
-
-  return true;
-}
-
-export default {
-  name: "NuHomeCloneProductCarousel",
-  components: {
-    Carousel,
-    CarouselChevron,
-    Loader,
-    NsIcon,
-    Price
-  },
-  mixins: [globalHelper],
-  props: {
-    /**
-     * Carousel title
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * List of product SKU IDs (e.g. "01234567") or UIDs (e.g. "blt0123456789abcdef")
-     */
-    productIds: {
-      type: Array,
-      required: true
-    },
-    country: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    forceLoading: {
-      type: Boolean,
-      default: false
-    },
-    referrer: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      options: OPTIONS,
-      internalLoading: false,
-      carouselKey: 1,
-      rotate: false,
-      productTabs: {},
-      translations: [],
-      products: [],
-      productSlugs: [],
-      currentTabIndex: 0,
-      currentTab: {},
-      windowWidth: window.innerWidth,
-      salesEvents: [],
-      user: null
-    };
-  },
-  computed: {
-    addToCartText() {
-      if (this.translations) {
-        return this.translations.addToCartButton
-          ? this.translations.addToCartButton
-          : "Add to Cart";
-      }
-      return "Add to Cart";
-    },
-    desktopAndUp() {
-      return (
-        this.$mq === "tablet" ||
-        this.$mq === "desktop" ||
-        this.$mq === "desktopHD"
-      );
-    },
-    loading() {
-      return this.internalLoading || this.forceLoading;
-    },
-    phabletAndDown() {
-      return this.$mq === "mobile" || this.$mq === "phablet";
-    },
-    headingClass() {
-      return this.windowWidth > 1023 ? "heading-2" : "heading-1";
-    }
-  },
-  watch: {
-    /**
-     * @param {string[] | null | undefined} ids
-     * @param {string[] | null | undefined} oldIds
-     */
-    productIds(ids, oldIds) {
-      // Case 0: new list is empty; clear out product data
-      if (!ids || !ids.length) {
-        this.products = [];
-
-        // Force a rerender of the Swiper carousel
-        requestAnimationFrame(() => {
-          this.internalLoading = true;
-          requestAnimationFrame(() => (this.internalLoading = false));
-        });
-        return;
-      }
-
-      // Case 1: old list is empty; retrieve fresh product data for new list
-      if (!oldIds || !oldIds.length) {
-        this.getSliderProducts(ids);
-        return;
-      }
-
-      // Case 2: new and old list are the same; do nothing
-      if (compareStringLists(ids, oldIds)) {
-        return;
-      }
-
-      // Case 3: new list is subset of old list
-      if (ids.every(id => oldIds.includes(id))) {
-        // Product data is therefore also a subset of the previous data
-        this.products = this.products.filter(p => ids.includes(p._id));
-
-        // Force a rerender of the Swiper carousel
-        requestAnimationFrame(() => {
-          this.internalLoading = true;
-          requestAnimationFrame(() => (this.internalLoading = false));
-        });
-        return;
-      }
-
-      // Default case: retrieve fresh product data
-      this.getSliderProducts(ids);
-    }
-  },
-  mounted() {
-    this.initProductTranslations();
-    this.initCtaClickHandler();
-
-    window.addEventListener("resize", () => {
-      this.windowWidth = window.innerWidth;
-    });
-
-    this.user = {
-      isDistributor: AccountManager.isDistributor(),
-      isPreferredCustomer: AccountManager.isPreferredCustomer()
-    };
-  },
-  updated() {
-    this.initCtaClickHandler();
-  },
-  async created() {
-    this.rotate = window.location;
-
-    SalesEventService.init(true);
-    events.getValue(
-      events.salesevent.ACTIVE_EVENTS,
-      se => this.handleGotSalesEvents(se),
-      true
-    );
-  },
-  methods: {
-    handleGotSalesEvents(salesEvents) {
-      this.salesEvents = salesEvents;
-    },
-
-    handleGotUser(user) {
-      this.user = user;
-    },
-
-    initCtaClickHandler() {
-      const $ctaElements = this.$el.querySelectorAll('[data-carousel="cta"]');
-
-      $ctaElements.forEach(cta => {
-        cta.addEventListener("keypress", this.handleKeyPress);
-      });
-    },
-
-    handleKeyPress(e) {
-      if (e.key == "Enter") {
-        this.handleClick({ nativeEvent: e });
-      }
-    },
-
-    handleClick(event) {
-      // event refers to custom event that contains the swiper instance and the nativeEvent of the clicked slide (not button).
-      const { nativeEvent } = event;
-      const target = nativeEvent.target;
-      let sku = get(target, "dataset.sku");
-      if (!sku) {
-        // we assume the button will only have spans inside
-        sku = get(target, "parentElement.dataset.sku");
-      }
-      // null check, if null, means the clicked element was not part of the atc button
-      return sku ? this.addToCart(sku) : undefined;
-    },
-
-    openLink(slug, sku) {
-      this.$emit("click-pdp", { slug, sku });
-      setTimeout(() => {
-        // Go to PDP after sufficient delay to log the user event
-        window.location.href = this.buildProductLink(slug, sku);
-      }, 1);
-    },
-
-    async addToCart(sku) {
-      const options = {
-        sku: sku && sku.toString(),
-        qty: 1,
-        userId: "",
-        cntryCd: "",
-        isAdr: false,
-        referrer: this.referrer,
-        domain: window.location.hostname
-      };
-      try {
-        this.$emit("click-atc", options);
-        await CartService.addSkuToCart(options);
-      } catch (error) {
-        console.error("Failed to add to cart.", error);
-      }
-    },
-
-    async getSliderProducts(sliderProductIds) {
-      this.internalLoading = true;
-
-      try {
-        const products = await findProductsById(
-          sliderProductIds,
-          this.country,
-          this.language
-        );
-
-        this.products = sliderProductIds
-          .map(id => {
-            return [
-              id,
-              products.find(p => {
-                return p.id === id || p.variants.find(v => v.sku === id);
-              })
-            ];
-          })
-          .filter(arr => !!arr[1])
-          .map(([id, data]) => new Product(id, data))
-          .filter(product => {
-            return (
-              product.hasVariants() &&
-              !product.isExclusive() &&
-              !product.isNotReleasedForSale() &&
-              !product.isOutOfStock()
-            );
-          });
-      } catch (e) {
-        console.error(e);
-      }
-
-      this.internalLoading = false;
-    },
-
-    optimizeImage(imgUrl, width, forceWidth = false) {
-      const url = new URL(imgUrl);
-      const maxWidth = window.innerWidth;
-
-      if (width) {
-        const resolvedWidth = forceWidth ? width : Math.min(maxWidth, width);
-        url.searchParams.append("width", resolvedWidth.toString());
-      }
-
-      return url.toString();
-    },
-
-    initProductTranslations() {
-      getProductTranslations(["addToCartButton"], this.country, this.language)
-        .then(translations => {
-          this.translations = translations;
-        })
-        .catch(console.error);
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-:root {
-  --theme__color1: #f56767;
-  --text__color: #0a0a0a;
-}
-
-.popular-section {
-  position: relative;
-  padding-top: 32px;
-
-  .arrow-right {
-    position: relative;
-  }
-
-  .crsl-container.nav {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    gap: 30px;
-    max-width: 100%;
-    padding: 0 49px 30px 47px;
-    position: relative;
-    min-height: 70px;
-  }
-
-  .button-wrap {
-    display: flex;
-  }
-
-  .price-heading {
-    margin-top: 0.75rem;
-    margin-bottom: 21px;
-  }
-}
-
-.popular-nav {
-  display: flex;
-  justify-content: center;
-
-  ul {
-    max-width: 750px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    li {
-      display: flex;
-      align-items: end;
-      justify-content: center;
-      width: 50%;
-
-      a {
-        display: block;
-        padding: 0 0 14px;
-        border-bottom: 3px solid transparent;
-        width: 100%;
-        text-align: center;
-        text-decoration: none;
-        color: var(--primary-black);
-
-        &.active {
-          border-color: var(--primary-black);
-        }
-      }
-    }
-  }
-}
-
-.popular-tab1 {
-  position: relative;
-
-  .shape1 {
-    position: absolute;
-    bottom: 5px;
-    right: 0;
-    // @media screen and (max-width: 991px) {
-    //   display: none;
-    // }
-  }
-
-  .crsl-container {
-    padding: 0;
-    position: relative;
-
-    .shape2 {
-      position: absolute;
-      top: 50px;
-      left: -66px;
-    }
-  }
-}
-
-.popular-product-tab {
-  // height: 1099px;
-  // @media screen and (min-width: 1024px) {
-  //   height: 634px;
-  // }
-  .hooper-cust-nav-wrapper {
-    position: absolute;
-
-    right: 0px;
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 20px;
-
-    button {
-      background: none;
-      height: 45px;
-      width: 45px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 2px solid var(--text__color) !important;
-    }
-  }
-
-  .tab-pane {
-    .crsl-container {
-      display: flex;
-      position: relative;
-      padding: 0;
-    }
-
-    .view-all-button {
-      top: 13px;
-      display: block;
-      align-items: center;
-      padding-bottom: 3px;
-
-      &::after {
-        content: "";
-        display: block;
-        height: 1px;
-        width: 100%;
-        background: var(--text__color);
-      }
-    }
-  }
-}
-
-.popular-text-wrap {
-  width: 39%;
-
-  .underline-text > span {
-    margin-right: 10px;
-    height: 100%;
-  }
-}
-
-.popular-text {
-  padding: 60px 40px;
-  width: 100%;
-  height: 528px;
-  background-size: cover !important;
-  background-position: center !important;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  flex-shrink: 0;
-  filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.2));
-  margin-bottom: -46px;
-  background-color: #fafafa;
-  position: relative;
-
-  h3 {
-    max-width: 230px;
-    margin-bottom: 0;
-  }
-
-  a {
-    margin-top: 23px;
-    max-width: 185px;
-
-    @media (min-width: 1025px) {
-      max-width: 200px;
-    }
-
-    display: flex;
-    align-items: center;
-
-    &.effect-black:active {
-      .arrow-right {
-        &:after {
-          content: "";
-          position: absolute;
-          left: 1px;
-          bottom: 1px;
-          height: 22px;
-          width: 22px;
-          border-radius: 100%;
-          z-index: -1;
-        }
-      }
-    }
-  }
-}
-
-.white-text {
-  // TODO: we shouldn't be setting colors on sized/typographies
-  .heading-1,
-  .heading-2,
-  a.paragraph-m {
-    color: inherit !important;
-  }
-
-  .arrow-right {
-    svg {
-      path {
-        fill: #ffffff;
-      }
-    }
-  }
-}
-
-.popular-product-wrap {
-  padding-left: 30px;
-  width: 61%;
-}
-
-.single-popular-product {
-  display: flex;
-  position: relative;
-  height: auto;
-  width: 100%;
-  background: transparent;
-  cursor: pointer;
-
-  @media screen and (min-width: 1024px) {
-    width: 100%;
-    flex-direction: column;
-  }
-
-  .image {
-    width: 100%;
-    background: transparent;
-
-    img {
-      background: #ffffff;
-      min-height: 250px;
-      max-height: 250px;
-      object-fit: scale-down;
-      width: 100%;
-    }
-  }
-
-  .button {
-    position: absolute;
-
-    &.pop-add-btn {
-      font-size: 16px;
-      width: 100%;
-      height: 45px;
-      gap: 12px;
-      padding: 0 20px;
-      bottom: 8px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      top: 0;
-      background: #252525;
-      color: var(--text__color);
-      align-self: flex-start;
-
-      &.effect-red:active {
-        background: var(--primary-red);
-      }
-    }
-
-    .text {
-      color: #f5f5f5;
-    }
-  }
-
-  .crsl-content {
-    display: flex;
-    top: 255px;
-    flex-direction: column;
-
-    h6 {
-      margin-top: 20px;
-      margin-bottom: 4px;
-      text-transform: uppercase;
-    }
-
-    h2 {
-      font-family: inter;
-      margin: 0;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      /* autoprefixer: off */
-      -webkit-box-orient: vertical;
-      /* autoprefixer: on */
-      overflow: hidden;
-      text-overflow: ellipsis;
-      // height: 70px;
-      font-size: 20px;
-      font-weight: 300;
-    }
-
-    h3 {
-      top: 0;
-      position: relative;
-      width: 297px;
-      height: 24px;
-      left: 0px;
-
-      /* heading-3 */
-
-      font-style: normal;
-
-      /* Archive/Archived Color */
-
-      color: #252525;
-
-      /* Inside auto layout */
-
-      flex: none;
-      order: 1;
-      flex-grow: 0;
-      font-size: 16px;
-      font-weight: 600;
-    }
-  }
-
-  .sku {
-    position: absolute;
-    width: 105px;
-    height: 16px;
-    left: 0px;
-    top: 112px;
-
-    /* heading-s */
-
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 18px;
-    /* or 150% */
-
-    /* Neutral/N70 */
-
-    color: #5f5f5f;
-
-    /* Inside auto layout */
-
-    flex: none;
-    order: 1;
-    flex-grow: 0;
-    margin: 5px 0px;
-  }
-}
-
-.product-badge {
-  background: #94d6e9;
-  font-size: 12px;
-  padding: 5px 10px;
-  top: 25px;
-  left: 0;
-  display: block;
-  position: absolute;
-}
-
-.popular-slider-wrap {
-  .slider-outer {
-    padding: var(--shadow-area);
-    overflow: hidden;
-  }
-
-  position: relative;
-  width: 100%;
-  justify-content: center;
-
-  @media screen and (min-width: 1024px) {
-    width: 621px;
-    flex-shrink: 0;
-    position: relative;
-    left: 0;
-
-    z-index: 3;
-  }
-}
-
-.chevron {
-  width: 100%;
-  flex-shrink: 0;
-  position: relative;
-  height: 50px;
-  left: 0;
-  z-index: 3;
-  display: none;
-
-  @media screen and (min-width: 768px) {
-    display: block;
-  }
-}
-
-.slider {
-  width: 100%;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 3;
-
-  .preloader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-
-    .loader {
-      left: 50%;
-      top: 50%;
-      margin: -4.7rem 0 0 -4.7rem;
-    }
-  }
-}
-
-.button-white {
-  position: relative;
-  text-align: center;
-
-  &.pop-viewall-btn {
-    width: 100%;
-    height: 44px;
-    text-align: center;
-    padding: 0 20px;
-    display: none;
-    font-weight: bold;
-
-    @media screen and (max-width: 767px) {
-      display: inline-flex;
-    }
-
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--text__color);
-    margin: 8%;
-    color: var(--text__color);
-    align-self: flex-start;
-    text-transform: uppercase;
-  }
-}
-
-.tab-pane {
-  @media (max-width: 576px) {
-    height: 100%;
-
-    .crsl-container {
-      height: 100%;
-      flex-direction: column;
-      flex-wrap: nowrap !important;
-
-      .slider {
-        flex: 1;
-      }
-    }
-  }
-}
-
-.justify-content-between {
-  justify-content: space-between;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.subhead-s {
-  font-size: 14px;
-  line-height: 1.29;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #252525;
-}
-
-.paragraph-l {
-  font-size: 18px;
-  line-height: 1.33;
-  font-weight: 400;
-  color: #252525;
-}
-
-.carousel-title-text {
-  font-weight: 400;
-  font-size: 28px;
-  line-height: 34px;
-}
-
-.text-decoration-none:link,
-.text-decoration-none:visited,
-.text-decoration-none:hover,
-.text-decoration-none:active {
-  text-decoration: none;
-}
-
-// mobile
-@media screen and (max-width: 767px) {
-  .popular-section {
-    margin-bottom: 25px;
-
-    .popular-product-tab {
-      .crsl-container.nav {
-        display: none;
-      }
-    }
-
-    .popular-text-wrap {
-      width: 100%;
-    }
-  }
-
-  // mobile font and spacing guidelines
-  .popular-section.aos-init .popular-section-inner {
-    margin-top: 55px;
-  }
-
-  .tab-content .tab-pane .crsl-container .popular-text {
-    padding: 50px 40px 59px 40px;
-    margin-bottom: 35px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .single-popular-product .crsl-content h6 {
-    margin-top: 20px;
-    margin-bottom: 12px;
-  }
-
-  .button-white.pop-viewall-btn {
-    margin: 25px 30px 40px 30px;
-  }
-
-  // .popular-product-tab {
-  //   height: 995px;
-  // }
-}
-
-@media (min-width: 768px) {
-  .d-md-flex {
-    display: flex !important;
-  }
-}
-
-//small pc
-@media screen and (min-width: 1024px) and (max-width: 1136px) {
-  .popular-section {
-    .popular-text-wrap {
-      width: 32%;
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.anchor-div {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-// mobile
-@media screen and (max-width: 767px) {
-  // from responsive.css
-  .popular-product-tab .tab-pane .crsl-container {
-    flex-wrap: wrap;
-  }
-
-  .popular-text {
-    box-sizing: border-box;
-    padding: 50px 40px;
-    width: 100%;
-    height: 296px;
-    margin-bottom: 20px;
-  }
-
-  .popular-product-wrap {
-    padding-left: 0;
-    width: 100%;
-  }
-
-  .single-popular-product {
-    flex-direction: column;
-  }
-
-  .d-sm-flex {
-    display: flex !important;
-  }
-}
-
-// tablet only
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .crsl-container {
-    justify-content: space-evenly;
-    margin: 0;
-    max-width: 1023px;
-  }
-
-  .single-popular-product {
-    flex-direction: column;
-    margin-top: 4px;
-  }
-
-  .slider {
-    width: 50%;
-  }
-
-  .chevron {
-    margin-bottom: 20px;
-  }
-
-  .popular-product-tab {
-    max-height: 650px;
-  }
-
-  .popular-product-tab {
-    .tab-pane {
-      .crsl-container {
-        padding: 0 46px;
-        max-width: 100%;
-        gap: 30px;
-
-        .popular-text-wrap {
-          width: 50.3%;
-        }
-      }
-    }
-  }
-}
-
-.product-title {
-  height: 54px;
-}
-</style>