/* banner */
.home-banner-wrapper {
    position: relative;
    padding-top: calc(2px + (8 - 2) * ((100vw - 300px) / (1920 - 300)));
}

.banner-home-slide {
    visibility: hidden;
}

.banner-wrapper,
.banner-wrapper.slick-slider {
    border-radius: var(--pr-radius-x-small);
    overflow: hidden;
    margin: var(--pr-spacing-03) auto;
    max-width: 1460px;
    padding-left: var(--pr-spacing-03);
    padding-right: var(--pr-spacing-03);
}

.banner-wrapper,
.banner-wrapper.slick-slider,
.banner-link {
    height: 420px;
}

.home-banner-wrapper .slick-next {
    right: 16px;
}

.home-banner-wrapper .slick-prev {
    left: 16px;
}

.banner-wrapper:not(.slick-slider) .banner-item:nth-child(n + 2) {
    display: none;
}

.base-banner-layer {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.banner-link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--pr-radius-x-small);
}
.banner-link picture {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
}

.banner-link[href="#"] {
    pointer-events: none;
    cursor: default;
}

.banner-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pr-radius-x-small);
    margin: 0 auto;
    color: transparent
}

.banner-link .banner-item-content .image-styles {
    height: 180px;
    width: auto;
    object-fit: contain;
}

.banner-item-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--pr-color-white);
    font-size: var(--pr-font-size-display2);
    line-height: var(--pr-spacing-09);
    font-weight: var(--pr-font-weight-heading);
}

.banner-item-text {
    max-width: 480px;
    padding: 0 var(--pr-spacing-09);
    text-align: center;
}

.content-ful-search-header {
    font-weight: var(--pr-font-weight-display2);
    font-size: calc(17px + (27 - 17) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1.2;
    text-align: center;
    background-color: #ffeaf4;
    padding: 18px calc(6px + (18 - 6) * ((100vw - 300px) / (1920 - 300)));
}

.appears-ready-content {
    text-align: center;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.main-content {
    border-top: 2px solid #ffeaf4;
}

.appears-ready-wrapper {
    position: relative;
    padding-top: 24px;
}

.appears-ready-wrapper::before {
    content: "";
    width: 100vw;
    height: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffeaf4;
}

.appears-ready-item:not(.swiper-slide) {
    width: 120px;
    margin: 0 20px;
}
.appears-ready-item {
    position: relative;
    z-index: 2;
}

.appears-ready-item .appears-ready-item-image {
    display: block;
    position: relative;
    border-radius: var(--pr-radius-cycle);
    margin-bottom: var(--pr-spacing-04);
    transition: var(--pr-trans-standard);
    background: #fff;
}
#js-explore-products .featured-product,
#js-shop-popular-product .featured-product {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
}
.featured-product-link {
    width: 100%;
}
.featured-product-link::before {
    content: "";
    padding-top: 100%;
    display: block;
}
.appears-ready-item:hover .appears-ready-item-image {
    transform: scale(1.1);
    box-shadow: var(--pr-shadow-500)
}

.appears-ready-item .appears-ready-item-image::before {
    content: "";
    padding-top: 100%;
    display: block;
}

.appears-ready-item .appears-ready-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fff;
}

.appears-ready-item-txt {
    color: var(--pr-color-dark-x);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: var(--pr-font-family);
    font-weight: 500;
    line-height: 20px;
    position: relative;
    text-transform: capitalize;
}

.appears-ready-item-txt::before {
    content: "";
    width: 0%;
    display: block;
    height: 2px;
    background-color: var(--pr-color-dark-x);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width 300ms cubic-bezier(0.54, 0, 0.54, 1);
}

.fresh-blog {
    margin-top: 24px;
    margin-bottom: 24px;
}
.fresh-blog .component-heading {
    margin-bottom: 0
}

.fresh-blog-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--pr-spacing-07);
}

.fresh-blog-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px calc(100% - 132px);
    grid-gap: 12px;
    grid-template-areas: 'bImage bContent';
}

.fresh-blog-item-image {
    position: relative;
    background-color: #f1f1f1;
    border-radius: 5px;
    grid-area: bImage;
    height: 120px;
    overflow: hidden;
}

.fresh-blog-item-image::after {
    content: "";
    padding-top: 100%;
    display: block;
}

.fresh-blog-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--pr-trans-standard);
}

.fresh-blog-item-link {
    grid-area: bContent;
    font-size: var(--pr-font-family);
    display: block;
    margin: 0;
    color: var(--pr-color-text);
    padding: 5px;    
}

.fresh-blog-item-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
    font-weight: var(--pr-font-weight-heading);
    margin-bottom: 4px;
    background: var(--color);
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    min-width: 50px;
    justify-content: center;
    font-size: 13px;
}

.fresh-blog-item-title {
    font-size: var(--pr-font-size-display5);
    line-height: 1.3;
    font-weight: var(--pr-font-weight-heading);
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--pr-color-primary);
}

.fresh-blog-item:hover .fresh-blog-item-title {
    color: var(--pr-color-secondary);
}

.fresh-blog-item:hover img {
    transform: scale(1.45);
}

.fresh-blog-item-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
}

.about-us-wrapper {
    margin-top: var(--pr-spacing-09);
}

.wt-bg-beeswax-tint {
    background-color: #ffeaf4 !important;
}


.about-us-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--pr-spacing-05);
}

.about-us-item {
    position: relative;
}

.wt-popover--top {
    position: relative;
}

.wt-fill-white {
    fill: var(--pr-color-white) !important;
}

.community-impact-popover {
    text-decoration: underline;
    text-decoration-style: dashed;
    cursor: help;
}

.about-us-title {
    font-size: var(--pr-font-size-display2);
    line-height: var(--pr-line-height-display2);
    font-family: var(--pr-font-family);
    font-weight: var(--pr-font-weight-heading);
    margin-bottom: var(--pr-spacing-05);
}

.about-us-bottom,
.about-us-top {
    padding: var(--pr-spacing-09) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-us-bottom {
    padding-bottom: 60px;
}

.about-us-top-header {
    text-align: center;
    font-size: 44px;
    line-height: 48px;
    margin: 0 auto;
}

.about-us-top-text-link {
    text-decoration: underline;
    transition: opacity 200ms ease-out;
    margin: 0;
    text-align: center;
    width: fit-content;
    width: -moz-fit-content;
}

.wt-btn--outline {
    color: #222;
    text-decoration: none;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    outline: none;
    text-decoration: none;
    border-radius: var(--pr-radius-x-large);
    display: inline-block;
    font-size: var(--pr-font-size-body);
    font-weight: var(--pr-font-weight-display5);
    line-height: var(--pr-line-height-body);
    min-height: 48px;
    min-width: 48px;
    padding: var(--pr-spacing-04) var(--pr-spacing-07);
    position: relative;
    text-align: center;
    vertical-align: middle;
    z-index: 10;
}

.wt-btn--outline::before {
    content: "";
    background: unset;
    border: var(--pr-size-border-width-small) solid var(--pr-color-dark-x);
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scaleX(1) scaleY(1) perspective(1px);
}

.wt-text-title-02 {
    font-size: var(--pr-font-size-display3);
    line-height: var(--pr-line-height-display3);
    font-family: var(--pr-font-family);
}


#homepage .component-heading,
.md-product-viewed-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: 5px solid var(--secondary);
    padding-left: var(--pr-spacing-04);
}

#homepage .component-heading > svg {
    margin-left: var(--pr-spacing-02);
}

.popular-area-wrapper .home-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 6px;
    border-left: 5px solid var(--secondary);
    font-weight: var(--pr-font-weight-heading);
    padding-left: var(--pr-spacing-04);
    margin-bottom: var(--pr-spacing-04);
    color: var(--pr-color-primary);
    line-height: var(--pr-line-height-display2);
    font-size: calc(var(--pr-font-size-display3) + (24 - 20) * ((100vw - 300px) / (1920 - 300)));
}

.popular-area-wrapper .home-heading svg {
    display: none;
}

/* shop product */
body .md-product-viewed-content,
.home-module-wrapper,
.home-container,
#product-viewed-content {
    max-width: 1290px;
    padding: 0 var(--pr-spacing-03) !important;
    margin: 36px auto 0 !important;
    width: 100%;
}

#homepage #home-page-title {
    margin: 0 auto;
}

.shop-product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--pr-spacing-04);
}

.shop-product-item {
    transition: box-shadow 300ms ease-in-out;
}

.icon-image {
    width: var(--pr-spacing-09);
    margin-right: var(--pr-spacing-09);
}

.icon-head {
    font-weight: var(--pr-font-weight-heading);
    font-size: var(--pr-font-size-display4);
}

.shop-product-link {
    overflow: hidden;
    display: block;
    position: relative;
    border-radius: 5px;
    background-color: var(--pr-color-light);
    width: 100%;
}

.shop-product-link::after {
    content: "";
    padding-top: 75%;
    display: block;
}

.shop-product-link img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.shop-product-text {
    padding: var(--pr-spacing-05) var(--pr-spacing-03);
}

.sale-off-box {
    background-color: var(--pr-color-secondary);
    border-radius: var(--pr-radius-cycle);
    font-size: var(--pr-font-size-display8);
    line-height: var(--pr-line-height-display8);
    width: 42px;
    height: 42px;
    padding: var(--pr-spacing-02);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--pr-color-white);
    font-weight: var(--pr-font-weight-heading);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    box-shadow: var(--pr-shadow-500);
    pointer-events: none;
}

.sale-off-box small {
    text-transform: uppercase;
}

.trend-topics-list-mobile {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 var(--pr-spacing-02);
}

.trend-topics-list:not(.slick-slider)  {
    display: flex;
    width: 100%;
    white-space: nowrap;
}

.trend-topics-item {
    padding: 0 var(--pr-spacing-02);
}

.trend-topics-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--pr-spacing-04) var(--pr-spacing-05);
    border-radius: var(--pr-radius-x-small);
    font-size: var(--pr-font-size-display6);
    background-color: var(--pr-color-light);
    font-weight: var(--pr-font-weight-display3);
    text-transform: capitalize;
    width: fit-content;
    width: -moz-fit-content;
}


#js-explore-products:not(.swiper-initialized) .explore-picked-you,
#js-shop-popular-product:not(.swiper-initialized) .explore-picked-you {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(140px + (230 - 140) * ((100vw - 300px) / (1920 - 300))), 1fr));
    grid-gap: calc(4px + (8 - 4) * ((100vw - 300px) / (1920 - 300)))
}

.fandom-slider.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: row;
}

#js-explore-products,
#js-shop-popular-product {
    position: relative;
    overflow: hidden;
}

.event-area-wrapper {
    background-color: var(--pr-color-white);;
}


.text-center {
    text-align: center;
}

.home-page-title {
    font-size: var(--pr-font-size-display5);
    margin: 30px auto 0;
}

/* top sales */
.tabs-container {
    font-weight: var(--pr-font-weight-heading);
    margin-bottom: var(--pr-spacing-04);
}

.top-sales-content-wrapper {
    position: relative;
}

.tab-item {
    position: relative;
    z-index: 1;
    padding: var(--pr-spacing-03) var(--pr-spacing-05);
    border-bottom: 3px solid var(--pr-color-light);
    display: block;
    cursor: pointer;
    user-select: none;
    transition: var(--pr-trans-standard);
}

.tab-item.tab-selected {
    border-color: var(--pr-color-secondary);
    pointer-events: none;
}

.more-shop-link {
    font-weight: var(--pr-font-weight-heading);
    color: var(--pr-color-secondary);
}

.top-sale-list:not(.slick-slider) {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.top-sale-list:not(.active) {
    display: flex;
    height: 0;
    overflow-y: hidden;
    margin-bottom: 0 !important;
}


.site-skew-banner {
    max-width: 1600px;
    margin: 0 auto;
}
.skew-banner-wrapper {
    border-radius: var(--pr-radius-x-small);
    overflow: hidden;
    display: block;
    margin: var(--pr-spacing-04) auto 0;
    max-width: 1440px;
}
.skew-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
}

.skew-banner-content::before {
    content: "";
    width: 10px;
    transform: skewX(-10deg);
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 5px);
    background-color: var(--white);
    z-index: 2;
}
.skew-banner-item {
    width: 50%;
    transform: skewX(-10deg);
    position: relative;
}
.skew-banner-left::before {
    content: "";
    background: #e5ded8;
    pointer-events: none;
    width: 200%;
    height: 200%;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.skew-banner-right::before {
    pointer-events: none;
    content: "";
    background: #dee1e8;
    width: 200%;
    height: 200%;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.skew-banner-item-box {
    transform: skewX(10deg);
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    height: calc(210px + (420 - 210) * ((100vw - 300px) / (1920 - 300)));
}
.skew-banner {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 var(--pr-spacing-07);
    position: static;
    user-select: none;
    width: calc(100% - 290px);
}
.skew-image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-width: 290px;
    width: 290px;
    pointer-events: none;
}
.skew-banner-item-box img {
    object-fit: contain;
    max-height: 100%;
}
.skew-banner-header {
    color: var(--pr-color-primary);
    font-size: calc(31px + (31 - 21) * ((100vw - 300px) / (1920 - 300)));
    text-transform: uppercase;
    font-weight: var(--pr-font-weight-display4);
}
.skew-banner-description {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--pr-font-size-display6);
    padding: var(--middle) 0;
    font-weight: var(--pr-font-weight-body);
    max-width: 90%;
}
.skew-banner-button {
    padding: 10px 30px;
    background-color: var(--pr-color-primary);
    color: var(--white);
    border-radius: 3px;
    display: block;
    margin-top: 20px;
    font-weight: var(--pr-font-weight-heading);
    text-transform: uppercase;
}

.skew-banner-button:hover {
    background-color: var(--pr-color-secondary);
    color: var(--pr-color-white);
}

.skew-banner-button::after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--pr-color-black);
    cursor: pointer;
}

.skew-banner-left .skew-banner {
    transform: translateX(-30px);
}
.skew-banner-right .skew-banner {
    transform: translateX(30px);
}

.trending-product-box {
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.featured-product-item:hover img.trending-product-icon {
    transform: scale(1);
}

.home-module-wrapper.introduction-wrapper {
    --s: calc(280px + (400 - 280) * ((100vw - 300px) / (1920 - 300)));
    --p: calc(32px + (64 - 32) * ((100vw - 300px) / (1920 - 300)));
    padding: calc(var(--p) / 2) 0
}
.introduction-content .introduction-heading {
    display: inline-block;
    color: var(--pr-color-primary-300);
    font-size: 1.75rem;
    font-weight: var(--pr-font-weight-heading);
    line-height: 1.2;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) and
((text-fill-color: transparent) or (-webkit-text-fill-color: transparent)) {
    .introduction-content .introduction-heading {
        margin-bottom: var(--middle-padding);
        width: 100%;
        background: linear-gradient(90deg, #f79533 0%, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}



.introduction-image {
    width: var(--s);
    position: relative;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
}

.introduction-image::after {
    content: "";
    display: block;
    padding-bottom: 100%;
    pointer-events: none;
}

.introduction-image::before {
    pointer-events: none;
    content: "";
    display: block;
    padding-bottom: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-size: cover;
    z-index: 2;
}

.introduction-image video {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
}

.introduction-content {
    width: calc(100% - var(--s));
    padding-left: var(--p);
    font-size: calc(16px + (18px - 16) * ((100vw - 300px) / (1920 - 300)));
}

.fandom-wrapper .fandom-heading {
    font-size: calc(25px + (31 - 25) * ((100vw - 300px) / (1920 - 300)));;
    font-weight: var(--pr-font-weight-heading);
}

.fandom-slider {
    position: relative;
    overflow: hidden;
}

.fandom-slider.swiper-initialized .fandom-item {
    padding: var(--pr-spacing-04);
}

.fandom-slider .fandom-link {
    display: block;
    position: relative;
    cursor: pointer;
}

.fandom-link::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.fandom-link img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    border-radius: var(--pr-radius-x-small);
    z-index: 1;
    pointer-events: none;
}

.fandom-button-txt {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0 0 0 / 40%) 0%, rgba(0 0 0 / 80%) 100%);
    opacity: 0;
    transition: var(--pr-trans-standard);
    pointer-events: none;
}

.fandom-link:hover .fandom-button-txt {
    opacity: 1;
}

.fandom-button-txt span {
    display: block;
    padding: var(--pr-spacing-03) var(--pr-spacing-05);
    background-color: var(--pr-color-white);
    border-radius: 3px;
    font-weight: var(--pr-font-weight-body);
    font-size: var(--pr-font-size-display6);
    box-shadow: var(--pr-shadow-500);
}

.create-wrapper {
    margin: 42px auto;
}

.create-list {
    display: grid;
    grid-gap: calc(16px + (32 - 16) * ((100vw - 300px) / (1920 - 300)));
    grid-template-columns: repeat(auto-fill, minmax(calc(250px + (500 - 250) * ((100vw - 300px) / (1920 - 300))), 1fr));
    margin: 0 auto;
    line-height: 1.3;
    font-weight: var(--pr-font-weight-body);
    font-size: 15px;
}

.create-item-link {
    position: relative;
    border-radius: 5px;
    display: block;
}

.create-item-link::after {
    content: "";
    padding-top: 75%;
    display: block;
}

.create-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--pr-radius-x-small);
}

.create-item-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: var(--pr-spacing-04);
}

.create-item-title {
    font-size: var(--pr-font-size-body);
    font-weight: var(--pr-font-weight-heading);
}

.create-item-text {
    padding: 0 var(--pr-spacing-04);
    margin: var(--pr-spacing-03) auto;
    max-width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.create-item-button {
    font-weight: var(--pr-font-weight-heading);
    text-align: center;
    padding: var(--pr-spacing-03) var(--pr-spacing-05);
    border-radius: 24px;
    background-color: var(--pr-color-white);
    transition:  var(--pr-trans-standard);
    position: absolute;
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--pr-spacing-09);
}

.refer-a-friend-box {
    margin: var(--pr-spacing-07) auto;
    justify-content: center;
}

.refer-a-friend-info {
    padding:  calc(24px + (48 - 24) * ((100vw - 300px) / (1920 - 300)));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border-radius: var(--pr-radius-x-small) 0 0 var(--pr-radius-x-small);
    grid-gap: 8px;
}
.refer-a-friend-title {
    font-size: calc(var(--pr-font-size-display3) + (24 - 20) * ((100vw - 300px) / (1920 - 300)));
    font-weight: var(--pr-font-weight-heading);
    line-height: var(--pr-line-height-display2);
    color: var(--pr-color-primary);
}

.refer-a-friend-info .text-list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.refer-a-friend-info .text-item {
    display: flex;
    position: relative;
    align-items: center;
    color: var(--pr-color-darkness);
}
.refer-a-friend-info .text-item + .text-item {
    margin-top: 6px;
}

.refer-a-friend-info .text-item .check {
    content: '✔';
    display: inline-block;
    border-radius: 50%;
    background-color: #ffeaf4;
    color: var(--pr-color-secondary);
    font-size: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    min-width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.refer-a-friend-button {
    display: block;
    font-weight: var(--pr-font-weight-heading);
    text-align: center;
    padding: var(--pr-spacing-03) var(--pr-spacing-05);
    border-radius: var(--pr-radius-x-small);
    background-color: var(--pr-color-secondary);
    color: var(--pr-color-white);
    border: var(--pr-size-border-width-small) solid var(--pr-color-secondary);
    transition: var(--pr-trans-standard);
    width: fit-content;
    width: -moz-fit-content;
    margin-top: var(--pr-spacing-05);
}
.refer-a-friend-button:hover,
.refer-a-friend-button:focus {
    background-color: var(--pr-color-primary);
    color: #fff;
    border-color: var(--pr-color-primary)
}

.refer-a-friend-images {
    position: relative;
    width: 50%;
}

.perfect-fit-guarantee-wrapper {
    margin: var(--pr-spacing-07) 0;
    background-color: #ffeaf4
}
.perfect-fit-guarantee-wrapper .perfect-fit-img {
    object-fit: cover;
}

.fit-guarantee-heading {
    font-size: calc(var(--pr-font-size-display2) + (33 - 24) * ((100vw - 300px) / (1920 - 300)));
    font-weight: var(--pr-font-weight-heading);
    color: var(--pr-color-secondary);
    line-height: var(--pr-line-height-display2);
    position: relative;
    margin-bottom: var(--pr-spacing-03);
    width: fit-content;
    width: -moz-fit-content;
    margin-left: auto;
    margin-right: auto;
}

.fit-guarantee-heading::after {
    content: "";
    width: 0;
    height: 2px;
    display: block;
    background-color: var(--pr-color-primary);
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    transition: var(--pr-trans-standard);
}

.fit-guarantee-heading:hover {
    color: var(--pr-color-primary);
}

.fit-guarantee-heading:hover::after {
    width: 180px
}

.fit-guarantee-sub-heading {
    font-size: calc(17px + (21 - 17) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1.3;
    font-weight: var(--pr-font-weight-body);
    margin-top: 2px;
    margin-bottom: calc(17px + (50 - 17) * ((100vw - 300px) / (1920 - 300)));
}

.fit-guarantee-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: var(--pr-spacing-05) auto;
}

.fit-guarantee-item {
    width: 31%;
    padding: 0 2%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #313131
}

.fit-guarantee-title {
    font-size: calc(18px + (21 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1.1;
    font-weight: var(--pr-font-weight-heading);
    padding: var(--pr-spacing-04);
}

.fit-guarantee-text {
    font-size: calc(16px + (18px - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: var(--pr-font-weight-body);
}

.fit-guarantee-text a {
    color: var(--secondary);
}
.fit-guarantee-text a:hover {
    text-decoration: underline;
}

.inline-art img {
    display: block;
    pointer-events: none;
}

.rotate {
    transform: rotate(180deg);
}

.your-art-content {
    background-color: #ffeaf4;
    padding: 1rem 0;
    position: relative;
    margin: 0;
}

#introduction {
    position: relative;
    background-color: #D6EAF8
}
#introduction::before {
    content: "";
    width: 100%;
    padding-top: 30px;
    background-image: url(/images/intro-line.svg?v=1.0.2);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

#introduction::after {
    content: "";
    width: 100%;
    padding-top: 24px;
    display: block;
    background-image: url(/images/intro-line-180deg.svg?v=1.0.1);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.stationery-button {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: var(--pr-spacing-03);;
    left: 0;
    padding: calc(10px + (32 - 10) * ((100vw - 300px) / (1920 - 300)));
}

.stationery-button .button {
    border-radius: var(--pr-spacing-09);
    box-shadow: var(--pr-shadow-500);
    color: var(--pr-color-black);
    display: flex;
    justify-content: center;
    align-items: center;
}
.stationery-button .button svg {
    transition: var(--pr-transition-standard);
    margin-left: var(--pr-spacing-02);
}

.shop-product-item:hover svg {
    transform: translateX(4px);
    animation: link-goall 650ms linear infinite;
}

.home-recommendation-product-placeholder .grid-loading,
.shop-popular-product-loading .grid-loading {
    /* position: absolute; */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(140px + (230 - 140) * ((100vw - 300px)/(1920 - 300))),1fr));
    grid-gap: calc(4px + (8 - 4) * ((100vw - 300px)/(1920 - 300)));
}

.home-main-product-loading {
    padding-top: 100%;
}

.home-recommend-product-loading {
    border-radius: 5px;
    display: block;
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    -webkit-animation: 1.5s shine linear infinite;
    animation: 1.5s shine linear infinite;
    margin-bottom:4px;
}

@-webkit-keyframes shine {
    to {
        background-position-x: -200%;
    }
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

.component-heading small {
    font-weight: 400;
    display: block;
    width: 100%;
    font-size: 14px;
}

.our-happy {
    font-size: 16px;
    font-weight: 500;
}

.our-happy a {
    color: var(--pr-color-secondary);
}

.our-happy:hover a {
    text-decoration: underline;
}

@media (min-width: 760px) {

    .shop-product-list .shop-product-item,
    .shop-product-item:nth-of-type(1),
    .shop-product-item:nth-of-type(2),
    .shop-product-item:nth-child(n + 7) {
        width: 100%;
        margin-bottom: 0;
        position: relative;
        border-radius: var(--pr-radius-large);
        overflow: hidden;
    }

    .shop-product-item:hover .button {
        color: var(--pr-color-secondary)
    }
}

@media (min-width: 992px) {

    .appears-ready-item:hover .appears-ready-item-txt::before {
        width: 70px;
    }

    .fresh-blog-item-link:hover {
        color: var(--pr-color-dark-x);
    }

    .about-us-top-text-link:hover {
        color: var(--pr-color-darkness)
    }
    .wt-btn--outline:hover {
        color: var(--pr-color-dark-x);
    }

    .wt-btn--outline:hover::before {
        transform: scaleX(1.015) scaleY(1.035) perspective(1px)
    }

    .shop-product-item:hover {
        box-shadow: var(--pr-shadow-500);
    }

    .tab-item:hover {
        border-color: var(--pr-color-flash);
        color: var(--pr-color-secondary);
    }

    .more-shop-link-mobile {
        display: none;
    }

    .trend-topics-list .slick-arrow {
        opacity: 0;
        transition: var(--pr-trans-standard)
    }
    .trend-topics-list:hover .slick-arrow {
        opacity: 1;
    }

    .list-home-category {
        margin-top: 40px;
    }

    .featured-product-list:not(.slick-slide)  .featured-product-item-box {
        width: 20%;
        min-width: 20%;
    }
    .featured-product-list:not(.slick-slide)  .featured-product-item-box {
        width: 20%;
        min-width: 20%;
    }

    .featured-product-list:not(.slick-slide)  .featured-product-item-box:nth-child(n + 6) {
        display: none;
    }
    .fandom-slider:not(.swiper-initialized) {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--pr-spacing-04);
    }

    .fandom-slider:not(.swiper-initialized) .fandom-item:nth-child(n + 5) {
        display: none;
    }

    #introduction {
        margin-top: var(--pr-spacing-09);
    }

}

@media (max-width: 992px) {

    .home-main-product-loading {
        height: 155px;
    }

    body .md-product-viewed-content  {
        overflow-x: hidden;
    }
    .banner-role {
        padding: 0;
    }

    .base-banner-layer {
        top: 8px;
    }

    .main-content .banner-wrapper {
        margin-top: 0;
        /*background-color: var(--light);*/
    }

    .banner-item-content img {
        height: 46%;
    }

    .banner-item-text {
        font-size: var(--pr-font-size-display4);
        line-height: var(--pr-line-height-display4);
    }

    .component-heading .component-seemore {
        display: none;
    }

    .seemore-box {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--pr-spacing-05);
    }

    .component-seemore {
        background-color: var(--pr-color-light);
        border-radius: var(--pr-radius-x-large);
        padding: var(--pr-spacing-03) var(--pr-spacing-05);
        display: inline-block;
        justify-content: center;
        align-items: center;
        font-weight: var(--pr-font-weight-heading);
        line-height: 1
    }

    .component-seemore:hover {
        background-color: var(--pr-color-flash);
    }

    .banner-wrapper .slick-list {
        padding-right: 0;
    }

    .banner-link .banner-item-content .image-styles {
        height: 80px;
    }

    .top-sale-list .featured-product-title-box,
    .top-sale-list .featured-product-price {
        margin-left: 0;
        padding-left: 0;
    }

    #js-explore-products:not(.swiper-initialized) .explore-picked-you,
    #js-shop-popular-product:not(.swiper-initialized) .explore-picked-you {
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto !important;
        grid-gap: var(--pr-spacing-04);
        padding-right: var(--pr-spacing-04);
        padding: 6px 0 6px 6px;
    }

    #js-explore-products:not(.swiper-initialized) .featured-product,
    #js-shop-popular-product:not(.swiper-initialized) .featured-product {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
    }

    .appears-ready-item-txt {
        -webkit-line-clamp: 1
    }

    .skew-banner-description,
    .skew-banner-header  {
        display: none;
    }
    .skew-banner {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(0) !important;;
        padding: 0;
    }
    .skew-banner-button {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--pr-font-size-display6);
        letter-spacing: 0;
        padding: 10px;
        text-align: center;
        min-width: 140px;
    }

    .skew-image {
        min-width: 1px;
        width: auto;
    }

    .fandom-slider:not(.swiper-initialized) .swiper-wrapper {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto;
        grid-gap: var(--pr-spacing-04);
    }

    .fandom-wrapper.home-module-wrapper {
        padding-right: 0
    }
    .fandom-wrapper.home-module-wrapper .slick-dots {
        position: relative;
        padding: 6px
    }

    .fandom-slider.swiper-initialized .fandom-item {
        padding: 6px
    }

    .fandom-wrapper .component-heading,
    .introduction-content .component-heading {
        padding: 0 0 var(--pr-spacing-04);
        margin: 0;
    }

    .introduction-content .component-heading {
        text-align: center;
        justify-content: center;
    }

    .introduction-content {
        margin-top: var(--pr-spacing-07);
    }

    .introduction-detail > *:first-child {
        margin-top: 0;
    }
    .introduction-detail > *:last-child {
        margin-bottom: 0;
    }

    .introduction-detail {
        text-align: justify;
        font-weight: var(--pr-font-weight-body);
    }

    .perfect-fit-guarantee-wrapper {
        margin: 0 0 var(--pr-spacing-07);
    }

    .refer-a-friend-box {
        flex-wrap: wrap;
        margin: 0
    }

    .refer-a-friend-images,
    .refer-a-friend-info {
        width: 100%;
        padding: 0 16px;
        margin-bottom: var(--pr-spacing-05);
    }
    .refer-a-friend-images img {
        margin: 0 auto;
    }

    .refer-a-friend-info {
        align-items: center;
        text-align: center;
    }

    .refer-a-friend-info .text-list {
        text-align: left;
    }
    .fit-guarantee-list {
        flex-wrap: wrap;
    }

    .fit-guarantee-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        color: var(--pr-color-black)
    }

    .fit-guarantee-item:hover .fit-guarantee-text {
        color: var(--pr-color-black)
    }
    .fit-guarantee-item:hover .fit-guarantee-title {
        color: var(--pr-color-secondary)
    }

    .fit-guarantee-image {
        width: 165px;
        min-width: 165px;
        margin-right: var(--pr-spacing-04);
    }

    .fit-guarantee-item:nth-of-type(2) {
        flex-direction: row-reverse;
        margin: var(--pr-spacing-05) 0;
    }

    .fit-guarantee-item:nth-of-type(2) .fit-guarantee-image {
        margin-left: var(--pr-spacing-04);
        margin-right: 0;
    }

}

@media (max-width: 992px) and (orientation: landscape) and (max-height: 500px) {
    .banner-wrapper {
        display: none !important;
    }
}
@media (max-width: 992px) and (orientation: landscape) {
    .shop-product-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        grid-gap: var(--pr-spacing-05);
    }

    .shop-product-item:nth-of-type(1), .shop-product-item:nth-of-type(2), .shop-product-item:nth-child(n + 7) {
        width: 100%
    }

    .shop-product-item .shop-product-link {
        height: 240px;
    }

    .shop-product-link img {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .top-sale-list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (max-width: 768px), (max-width: 992px) and (orientation: landscape) {
    #our-happy .component-heading.component-heading-link {
        flex-wrap: wrap;
        margin-right: 0;
        margin-left: 4px;
    }

    #our-happy .component-heading.component-heading-link small {
        font-size: 16px;
        font-weight: 500;
        color: var(--secondary);
    }

    .appears-ready-wrapper {
        padding: 0
    }

    .appears-slider {
        padding: 0 16px;
    }

    .base-banner-layer {
        top: 2px!important;
    }

    .tabs-container {
        white-space: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .more-shop-link {
        display: none;
    }

    .tabs-container {
        position: relative;
    }

    .tabs-container::after {
        content: "";
        height: 3px;
        width: 100%;
        display: block;
        background-color: var(--pr-color-light);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    .top-sales-menu-wrapper,
    .top-sales-content-wrapper {
        margin-left: -8px;
        margin-right: -8px;
    }

    .top-sales-content-wrapper::before,
    .top-sales-content-wrapper::after {
        content: '';
        height: 100%;
        width: 30px;
        background: linear-gradient(0deg,rgba(255,255,255,0) 0%,#FFF 175.52%);
        background: -webkit-linear-gradient(0deg,rgba(255,255,255,0) 0%,#FFF 175.52%);
        position: absolute;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 1;
    }

    .top-sales-content-wrapper::before {
        left: 0;
        right: auto;
        background: linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFF 175.52%);
        background: -webkit-linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFF 175.52%);
    }

    .featured-product-item-box.topsale-product:first-child {
        margin-right: 0
    }

    .home-module-list-top-sale-wrapper {
        margin-top: var(--pr-spacing-05);
    }

    .refer-a-friend-wrapper {
        margin-top: var(--pr-spacing-07);
    }

    .about-us-content {
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
    }
    .appears-ready-content::before {
        height: calc(100% - 64px);
    }

    .shop-product-list {
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto !important;
        grid-gap: var(--pr-spacing-05);
        padding-right: var(--pr-spacing-05);
        padding-left: var(--pr-spacing-03);
    }

    .home-module-wrapper .fresh-blog-content {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
    }

    .shop-product-item {
        width: 275px;
        min-width: 275px;
        max-width: 275px;
        position: relative;
    }


    .home-module-wrapper.list-home-category {
        padding-right: 0;
    }

    #homepage #home-page-title {
        margin: 32px auto 0;
        font-weight: 500;
    }

    #homepage .content-ful-search-bubbles #home-page-title {
        margin-top: 0;
    }

    
    #homepage .md-product-viewed-content + #home-page-title {
        margin: 0px auto;
    }
}

@media (max-width: 1460px) {
    .banner-wrapper,
    .banner-wrapper.slick-slider,
    .banner-link {
        height: calc(210px + (390 - 210) * ((100vw - 300px) / (1920 - 300)));
        max-height: 400px;
    }

}

@media (min-width: 990px) and (max-width: 1400px) {
    #js-explore-products:not(.swiper-initialized) .explore-picked-you,
    #js-shop-popular-product:not(.swiper-initialized) .explore-picked-you {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(calc(140px + (240 - 140) * ((100vw - 300px) / (1920 - 300))), 1fr));
        grid-gap: calc(4px + (8 - 4) * ((100vw - 300px) / (1920 - 300)))
    }
}

@media (max-width: 760px) {
    .introduction-content {
        width: 100%;
        padding: 10px var(--p) 0;
    }
    .home-module-wrapper.introduction-wrapper .flex-b {
        flex-direction: column;
        text-align: center;
    }

    .home-recommendation-product-placeholder .explore-picked-you > div,
    .shop-popular-product-loading .explore-picked-you > div{
        max-width: 156px !important;
        width: 156px !important;
        min-width: 0 !important;
    }
    .home-recommendation-product-placeholder .explore-picked-you,
    .shop-popular-product-loading .explore-picked-you{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .home-recommendation-product-placeholder .explore-picked-you > div:nth-child(n + 5),
    .shop-popular-product-loading .explore-picked-you > div:nth-child(n + 5){
        display: none !important;
    }
}

@media (min-width: 760px) and (max-width: 1200px) {
    .home-module-wrapper.introduction-wrapper {
        padding: calc(var(--p) / 2) var(--p);
    }

    .introduction-content {
        text-align: justify;
        margin: 0;
    }

    .shop-product-link picture {
        position: relative;
        display: block;
        height: auto;
    }

    .shop-product-link picture::after {
        content: "";
        display: block;
        padding-top: 80%;
    }

    .shop-product-wrapper .shop-product-link {
        height: auto!important;
    }

    .shop-product-wrapper .shop-product-link picture img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: center;
    }
}

@media (min-width: 760px) and (max-width: 900px) {
    .appears-ready-content {
        grid-template-columns: repeat(6, 1fr)
    }
}

.popular-list-wrapper .swiper-button-next,
.popular-list-wrapper .swiper-button-prev {
    display: none;
}

.perfect-fit-guarantee-wrapper {
    margin-top: 95px;
    position: relative;
    margin-bottom: 60px;
    padding-bottom: 36px;
}

.haru-divider {
    position: absolute;
    top: -95px;
    left: 0;
    width: 100%;
    z-index: 9;
}

.haru-divider-content {
    height: 0vh;
    min-height: 95px;
}

.haru-waves {
    height: 0vh;
    min-height: 95px;
    width: 100%;
    height: 15vh;
    margin-bottom: -9px;
    min-height: 100px;
    max-height: 150px;
}

.haru-divider-style-1 .haru-waves-parallax > use {
    -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.haru-divider-style-1 .haru-waves-parallax > use:nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}
.haru-divider-style-1 .haru-waves-parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

@-webkit-keyframes move-forever {
    0% {
      -webkit-transform: translate3d(-90px, 0, 0);
              transform: translate3d(-90px, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(85px, 0, 0);
              transform: translate3d(85px, 0, 0);
    }
}
  
@keyframes move-forever {
    0% {
      -webkit-transform: translate3d(-90px, 0, 0);
              transform: translate3d(-90px, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(85px, 0, 0);
              transform: translate3d(85px, 0, 0);
    }
}

.home-about-sell.home-about-us .product-highlight .h1-title span {
    display: block;
}
.home-about-sell.home-about-us .product-highlight .h1-title {
    position: relative;
}
.home-about-sell.home-about-us .product-highlight .h1-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 15px;
    background-color: rgba(221, 29, 38, 0.3);
    background: linear-gradient(101.31deg, #b1f1b3 2.11%, #f3eec2 105.05%);
    z-index: -1;
}

.home-about-sell.home-about-us .text-list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: 32px;
}
.home-about-sell.home-about-us .text-item {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--pr-color-darkness);
    
}

.home-about-sell.home-about-us .text-item .check {
    content: '✔';
    display: inline-block;
    border-radius: 50%;
    background-color: #e2f5f2;
    color: #11b196;
    font-size: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    min-width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
/* .home-about-sell.home-about-us .text-item .text-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--pr-color-darkness);
    margin-left: 15px;
} */
.home-about-sell.home-about-us .product-highlight .p-description {
    line-height: 1.8;
    font-size: 16px;
    color: #7e7e7e;
}

.home-about-sell.home-about-us {
    margin-top: 3vh;
    overflow: visible;
}
.home-about-sell.home-about-us .image-bg {
    position: absolute;
    top: -10vh;
    left: -20vw;
    z-index: -1;
}


.home-about-sell.home-about-us .product-highlight .content:before {
    left: 10%;
}

#homepage {
    overflow: hidden;
}

@media (max-width: 1024px) {
    
    .haru-divider {
        top: -50px;
    }
    .haru-divider-content {
        min-height: 55px;
    }
    .haru-waves {
        height: 5vh;
        min-height: 50px;
    }
    .haru-divider-style-1 .haru-waves-parallax > use:nth-child(1) {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
    }
    .haru-divider-style-1 .haru-waves-parallax > use:nth-child(2) {
        -webkit-animation-delay: -3s;
        animation-delay: -3s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
    }
    .home-about-sell.home-about-us .product-highlight .h1-title:after {
        height: 8px;
    }

    #product-viewed-content > * {
        padding: 0 12px !important;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .fresh-blog-item-link {
        min-width: 200px;
    }
    .fresh-blog-content {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto;
    }
}

/*content footer*/

.banner-pre-footer-wrapp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    position: relative;
    margin: 0 auto;
    z-index: 2;
    width: 85%;
}
.content-pre-footer {
    background: #fff;
    position: relative;
    display: block;
    padding-bottom: 20px;
}

.content-pre-footer:before {
    content:'';
    position: absolute;
    width: 100%;
    height: calc(100% - 80px);
    bottom: 0;
    left: 0;
    background: #f0efff;
    z-index: 1;
}
   
.content-pre-footer .home-module-wrapper {
    position: relative;
    z-index: 2;
}

.content-pre-footer .home-module-wrapper .banner-item {
    border-radius: 5px;
    position: relative;
    overflow: hidden; 
    display: block;
}
.content-pre-footer .home-module-wrapper .banner-item:before {
    content: "";
    padding-top: 36.25%;
    display: block;
    pointer-events: none;
    width: 100%;
}

.content-pre-footer .home-module-wrapper .banner-item img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}

span.btn-see-more,
span.btn-see-less {
    height: 46px;
    line-height: 42px;
    border: 2px solid var(--pr-color-information-600);
    padding: 0 30px;
    border-radius: 46px;
    color: var(--pr-color-information-600);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--pr-trans-standard);
}
span.btn-see-more:hover,
span.btn-see-less:hover {
    background-color: var(--pr-color-information-600);
    color: #fff;
}
.action-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;
}

span.btn-see-less {
    display: none;
}

.action-more.more span.btn-see-more {
    display: none;
}

.action-more.more span.btn-see-less {
    display: block;
}

.content-wrapp {
    height: 200px;
    overflow: hidden;
    position: relative;
    transition: var(--pr-trans-standard);
}
.content-wrapp:after {
    opacity: 1;
    content: "";
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%;
    z-index: 1;
    background-image: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(#f0efff));
    background-image: linear-gradient(180deg,hsla(0,0%,100%,0),#f0efff);
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}
.content-wrapp.active {
    height: auto;
    transition: var(--pr-trans-standard);
}
.content-wrapp.active:after,
.content-wrapp.hide-after:after {
    opacity: 0;
    pointer-events: none;
}

.content-wrapp.hide-after {
    height: auto;
}

.content-wrapp .feature-content a {
    color: var(--pr-color-secondary);
}

.content-wrapp .feature-content a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .content-pre-footer {
        margin-top: 0px;
        padding-bottom: 0px;
    }
    .content-pre-footer .home-module-wrapper {
        padding-top: 40px !important;
    }
    .banner-pre-footer-wrapp {
        display: block;
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        transform: none;
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto;
        grid-gap: 8px 16px;
    }
    .content-pre-footer .home-module-wrapper .banner-item {
        margin-bottom: 16px;
        display: block;
        width: 250px;
    }
    
}
/* End content footer*/
.appears-slider {
    position: relative;
    overflow: hidden;
}
.appears-slider .appears-prev,
.appears-slider .appears-next {
    top: 65px;
}


@media (max-width: 760px) {
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }

    .appears-slider:not(.swiper-initialized) .appears-ready-content .appears-ready-item {
        width: 22.5vw;
        min-width: 22.5vw;
    }
}

@media (min-width: 760px)  {
    .appears-slider {
        padding: 12px;
    } 
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
    }
}

@media (min-width: 760px) and (max-width: 960px) {
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
    }

    .appears-slider:not(.swiper-initialized) .appears-ready-content .appears-ready-item:nth-child(n + 7) {
        display: none;
    }
}

@media (min-width: 960px) and (max-width: 1200px) {
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        grid-template-columns: repeat(8, 1fr);
    }

    .appears-slider:not(.swiper-initialized) .appears-ready-content .appears-ready-item:nth-child(n + 9) {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1340px) {
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        grid-template-columns: repeat(9, 1fr);
    }

    .appears-slider:not(.swiper-initialized) .appears-ready-content .appears-ready-item:nth-child(n + 10) {
        display: none;
    }
}

@media (min-width: 1340px) {
    .appears-slider:not(.swiper-initialized) .appears-ready-content {
        grid-template-columns: repeat(10, 1fr);
    }

    .appears-slider:not(.swiper-initialized) .appears-ready-content .appears-ready-item:nth-child(n + 11) {
        display: none;
    }
}

#our-happy .component-heading {
    border-left: 5px solid var(--secondary);
    padding-left: var(--pr-spacing-04);
    color: var(--pr-color-primary)
}
.customers-review-content-wrapp {
    position: relative;
}
#our-happy .product-more {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    font-size: 13px;
    font-weight: bold;
}
#our-happy .customers-review-content-wrapp:before{
    content: '';
    width: 50%;
    height: 16px;
    background: linear-gradient(45deg, rgba(247, 247, 247, 0) 0%, var(--pr-color-white) 60%);
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.component-heading-small {
    display: flex;
    align-items: center;
    gap: 6px
}
.component-heading-small svg {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
}

/*Event product*/
.event-product-tab {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 24px;
}
.event-product-wrapper .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-product-wrapper .button-container a {
    border-radius: 6px;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    line-height: 1;
    background-color: var(--pr-color-secondary);
    min-width: 180px;
    text-align: center;
    margin: 16px auto;
    display: inline-block;
}
.event-product-wrapper .button-container a:hover,
.event-product-wrapper .button-container a:focus {
    background: var(--pr-color-primary);
}
.banner-event-product .banner-event-link {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
    display: block;
}
.banner-event-product .banner-event-link:before {
    content:'';
    display: block;
    padding-top: 20%;
}
.banner-event-product img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    transition: transform 250ms ease-in-out;
}
.tab-event-menu {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 15px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    margin-bottom: 16px;
}
.event-tab-menu.eventtab-active {
    background: linear-gradient(92deg, var(--pr-color-secondary) -.97%, var(--pr-color-secondary-500) 116.04%) !important;
    box-shadow: 2px 2px 8px 0 rgba(255, 255, 255, .4) inset, -4px -4px 4px 0 rgba(149, 84, 57, .05) inset !important;
    color: #fff !important;
    background-size: cover !important;
}
.event-tab-menu {
    flex: 1 1 0%;
    background: #f2f2f2;
    border-radius: 12px;
    border-image: initial;
    padding: 13px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    flex: 1 1 0%;
    margin: 0;
    cursor: pointer;
    color: var(--pr-color-secondary);
    white-space: nowrap;
}
.event-tab-menu:hover { 
    text-decoration: underline;

}
.event-product-tabcontent {
    display: none;
}

.event-product-tab .featured-product {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .tab-event-menu {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto;
        padding-bottom: 4px;
    }
    .tab-event-menu::-webkit-scrollbar {
        height: 6px;
    }
    .event-product-tab {
        display: grid;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        overflow-x: auto;
        grid-template-columns: auto;
        grid-gap: 0;
        justify-content: flex-start;
    }
    .event-product-tab::-webkit-scrollbar {
        height: 6px;
    }
    .event-product-tab .featured-product {
        width: 227px;
        padding: 6px;
    }
    
}
@media (max-width: 767px) {
    .banner-event-product {
        padding: 0 var(--pr-spacing-03);
     }
    .banner-event-product .banner-event-link:before {
        padding-top: 33.33%;
    }
    .event-product-tab {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px;
        padding: 0 var(--pr-spacing-03);
    }
    .tab-event-menu {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow-x: scroll;
        grid-template-columns: auto;
        grid-gap: 8px 16px;
        padding: 0 var(--pr-spacing-03);
    }
    
}
/*End event product*/