﻿/* banner */

.home-banner-section {
    position: relative;
    min-height: 22.875rem;
    overflow: hidden;
    background: var(--sourcing-gradient);
    border-radius: .5rem;
}

.s4d-mobile .home-banner-section {
    display: flex;
}

.home-banner-section .banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 3.75rem;
    padding-bottom: 1.5rem;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

.s4d-mobile .home-banner-section .banner-content {
    padding: 1.5rem;
    justify-content: flex-end;
    min-height: 100%;
    height: auto;
}

.home-banner-section .banner-content> :not(img) {
    z-index: 1;
}

.home-banner-section .banner-content .home-banner-text-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: .5rem;
}

.s4d-mobile .home-banner-section .banner-content .home-banner-text-section {
    align-items: flex-start;
}

.home-banner-section .banner-title {
    margin: 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.075rem;
    color: var(--primary-color);
    z-index: 1;
}

.s4d-mobile .home-banner-section .banner-title {
    font-size: 2rem;
    text-align: start;
}

.home-banner-section .banner-title .banner-tab-shade-wrapper {
    display: inline-flex;
    font-weight: 600;
    overflow: hidden;
    height: 1.1em;
}

.home-banner-section .banner-title .banner-tab-shade-wrapper .banner-tab-shade-list.animation {
    transition: transform .3s ease-in;
    display: grid;
}

.home-banner-section .banner-title .banner-tab-shade-wrapper .banner-tab-shade-list .banner-tab-shade-item {
    height: 1.2em;
    line-height: 1.2em;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.home-banner-section .banner-subtext {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.67;
    color: var(--primary-color);
    max-width: 59.375rem;
}

.s4d-mobile .home-banner-section .banner-subtext {
    text-align: start;
}

.home-banner-section .banner-subtext b {
    font-weight: 500;
}

.home-banner-section .banner-key-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 3rem;
}

.s4d-mobile .home-banner-section .banner-key-info {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(2, 1fr);
}

.home-banner-section .banner-content .search-item {
    width: 100%;
}

.home-banner-section .banner-content #small-search-box-form .validation-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.s4d-mobile .home-banner-section .banner-content #small-search-box-form .validation-wrapper {
    justify-content: flex-start;
}

.home-banner-section .banner-content .searchBox .input-group {
    width: 100%;
    max-width: 30rem;
}

.home-banner-section .banner-key-info .key-info-section {
    padding-left: 0.75rem;
    border-left: solid 0.0625rem var(--primary-color);
}

.home-banner-section .banner-key-info .key-info-section h6 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary-color);
    letter-spacing: -0.0375rem;
}

.home-banner-section .banner-key-info .key-info-section p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--primary-color);
}

.home-banner-section .banner-logo {
    position: absolute;
    z-index: 0;
    opacity: .2;
    top: 0;
    right: -2.5rem;
    width: 50rem;
    transform: translateY(-25%);
}

.s4d-mobile .home-banner-section .banner-logo {
    display: none;
}

/* promo home */
.home-promo {
    padding: 0.9375rem;
    margin-top: 0.9375rem;
    border: 0.0625rem solid var(--t-black);
    border-radius: 0.25rem;
}

.home-promo .top-promo {
    position: relative;
    border-radius: 100%;
    width: 8.125rem;
    height: 8.125rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #0087c9;
    color: #fff;
}

.home-promo .top-promo:after {
    content: "";
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 100%;
    background: #fff;
    top: 0.625rem;
}

.home-promo .top-promo .top,
.home-promo .top-promo .bottom,
.home-promo .promo-bottom {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
}

.home-promo .top-promo .top {
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 0.0563rem;
}

.home-promo .top-promo .bottom {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
}

.home-promo .promo-middle {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.home-promo .promo-middle .left {
    display: flex;
    align-items: center;
    font-size: 4.6875rem;
    font-weight: 700;
}

.home-promo .promo-middle .right {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.home-promo .promo-middle .right .top {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 500;
}

.home-promo .promo-middle .right .bottom {
    font-size: 1.5625rem;
    line-height: 1;
    font-weight: 900;
}

/* brands */

.brands-container {
    padding: 0 10%;
    margin: 0 -0.9375rem;
    background-color: #fff;
}

.brands-container .swiper-wrapper {
    align-items: center;
    padding: 0 15%;
}

.brands-container .swiper-slide {
    padding: 1.875rem;
    text-align: center;
}

.brands-container .swiper-slide a img {
    max-width: 100%;
    width: auto;
    height: auto;
    backface-visibility: hidden;
    filter: opacity(0.5);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.brands-container .swiper-slide a:hover img {
    filter: opacity(1);
}

/* promo swiper */

.promo-swiper {
    width: 100%;
}

.promo-swiper .swiper-slide {
    padding: 0 0.0625rem;
}

/* swiper standard */

.swiper-standard.swiper-container {
    padding: 0 0 3.75rem 0;
}

/* products tabs */

.products-tabs .products-nav {
    position: relative;
    justify-content: flex-start;
    border: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: var(--background);
    gap: 0.125rem;
    justify-self: flex-start;
    width: 100%;
}

.products-tabs .products-nav::-webkit-scrollbar {
    display: none;
}

.products-tabs .products-nav .product-link-item {
    height: 2rem;
    padding: 0rem 1rem;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tertiary-color);
    border-radius: 0.375rem;
    border: none;
    white-space: nowrap;
}

.products-tabs .nav-tabs .nav-link.active {
    color: var(--white);
    background-color: var(--tertiary-color);
}

.products-tabs .nav-tabs .nav-link:hover {
    color: var(--tertiary-color);
    background-color: var(--tertiary-hover);
}

.products-tabs-content {
    margin: 0.9375rem 0;
}

.products-tabs-content .products-category-link {
    background-color: var(--tertiary);
    color: var(--tertiary-color);
    height: 3rem;
    padding: 0rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 1.5rem;
}

.products-tabs-content .products-category-link:hover {
    background-color: var(--tertiary-hover);
}

.products-tabs-content .section {
    padding: 0;
}

.home-page-section {
    margin-top: 1.5rem;
}

/* slide product */

.main-slider {
    position: relative;
    height: 100vh;
    background-color: #d0f6e8;
}

.main-slider .swiper-container {
    width: 100%;
}

.slider-background {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.05;
}

.product-box-slide {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    min-height: 29.0625rem;
    background-color: #f8f9fb;
    padding: 0 5%;
    overflow: hidden;
}

.product-box-slide .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    position: relative;
}

.product-box-slide .sale-label,
.product-box-slide .flag-label {
    position: absolute;
    top: 0;
    right: 0.9375rem;
    width: 2.125rem;
    writing-mode: vertical-lr;
    z-index: 3;
}

.product-box-slide .sale-label+.flag-label {
    right: 3.4375rem;
}

.product-box-slide .sale-label span,
.product-box-slide .flag-label span {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.9375rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 200;
    border-radius: 0;
}

.product-box-slide .sale-label span {
    background: var(--purple);
}

.product-box-slide .sale-label span::after,
.product-box-slide .flag-label span::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    border-top: 0;
    border-left: 1.0625rem solid var(--purple);
    border-right: 1.0625rem solid var(--purple);
    border-bottom: 0.5rem solid transparent;
}

.product-box .flag-label span.brown::after,
.product-box-slide .flag-label span.brown::after,
.product-box-slide .flag-label span.bg-brown::after,
.product-box .flag-label span.bg-brown::after,
.product-details-page .product-label span.brown::after {
    border-left-color: #795548;
    border-right-color: #795548;
}

.product-box .flag-label span.orange::after,
.product-box-slide .flag-label span.orange::after,
.product-box-slide .flag-label span.bg-orange::after,
.product-box .flag-label span.bg-orange::after,
.product-details-page .product-label span.orange::after {
    border-left-color: #ff5722;
    border-right-color: #ff5722;
}

.product-box .flag-label span.lime::after,
.product-box-slide .flag-label span.lime::after,
.product-box .flag-label span.bg-lime::after,
.product-box-slide .flag-label span.bg-lime::after,
.product-details-page .product-label span.lime::after {
    border-left-color: #cddc39;
    border-right-color: #cddc39;
}

.product-box .flag-label span.cyan::after,
.product-box-slide .flag-label span.cyan::after,
.product-box-slide .flag-label span.bg-cyan::after,
.product-box .flag-label span.bg-cyan::after,
.product-details-page .product-label span.cyan::after {
    border-left-color: #00bcd4;
    border-right-color: #00bcd4;
}

.product-box .flag-label span.blue::after,
.product-box-slide .flag-label span.blue::after,
.product-box-slide .flag-label span.bg-blue::after,
.product-box .flag-label span.bg-blue::after,
.product-details-page .product-label span.blue::after {
    border-left-color: #2196f3;
    border-right-color: #2196f3;
}

.product-box .flag-label span.indigo::after,
.product-box-slide .flag-label span.indigo::after,
.product-box-slide .flag-label span.bg-indigo::after,
.product-box .flag-label span.bg-indigo::after,
.product-details-page .product-label span.indigo::after {
    border-left-color: #3f51b5;
    border-right-color: #3f51b5;
}

.product-box .flag-label span.danger::after,
.product-box-slide .flag-label span.danger::after,
.product-box-slide .flag-label span.bg-danger::after,
.product-box .flag-label span.bg-danger::after,
.product-details-page .product-label span.danger::after {
    border-left-color: #dc3545;
    border-right-color: #dc3545;
}

.product-box .flag-label span.purple::after,
.product-box-slide .flag-label span.purple::after,
.product-box-slide .flag-label span.bg-purple::after,
.product-box .flag-label span.bg-purple::after,
.product-details-page .product-label span.purple::after {
    border-left-color: #673ab7;
    border-right-color: #673ab7;
}

.product-box .flag-label span.green::after,
.product-box-slide .flag-label span.green::after,
.product-box-slide .flag-label span.bg-green::after,
.product-box .flag-label span.bg-green::after,
.product-details-page .product-label span.green::after {
    border-left-color: #4caf50;
    border-right-color: #4caf50;
}

.product-box .flag-label span.warning::after,
.product-box-slide .flag-label span.warning::after,
.product-box-slide .flag-label span.bg-warning::after,
.product-box .flag-label span.bg-warning::after,
.product-details-page .product-label span.warning::after {
    border-left-color: #ffc107;
    border-right-color: #ffc107;
}

.product-box .flag-label span.success::after,
.product-box-slide .flag-label span.success::after,
.product-box-slide .flag-label span.bg-success::after,
.product-box .flag-label span.bg-success::after,
.product-details-page .product-label span.success::after {
    border-left-color: rgb(169, 204, 0);
    border-right-color: rgb(169, 204, 0);
}

.product-box .flag-label span.red::after,
.product-box-slide .flag-label span.red::after,
.product-box-slide .flag-label span.bg-red::after,
.product-box .flag-label span.bg-red::after,
.product-details-page .product-label span.red::after {
    border-left-color: #f44336;
    border-right-color: #f44336;
}

.product-box .flag-label span.dark::after,
.product-box-slide .flag-label span.dark::after,
.product-box-slide .flag-label span.bg-dark::after,
.product-box .flag-label span.bg-dark::after,
.product-details-page .product-label span.dark::after {
    border-left-color: #212529;
    border-right-color: #212529;
}

.product-box-slide .flag-label span.danger {
    background: #dc3545;
}

.product-box-slide .flag-label span.danger::after {
    border-left-color: #dc3545;
    border-right-color: #dc3545;
}

.product-box-slide .content .title {
    z-index: 3;
}

.product-box-slide .content .title a {
    color: #000;
    font-size: 2.375rem;
    font-weight: 900;
    line-height: 1;
}

.product-box-slide .content .desc {
    color: #888;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.0625rem;
    margin: 0.9375rem 0;
    max-height: 2.8125rem;
    overflow: hidden;
}

.product-box-slide .attr-container tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.product-box-slide .attr-container tr td .attr-name {
    color: #333;
    font-size: 1rem;
    font-weight: 400;
}

.product-box-slide .attr-container tr td:first-child {
    width: 100%;
    margin: 0 0 0.3125rem 0;
}

.product-box-slide .attr-container tr td .btn-light.btn:not(.color-container) {
    background-color: rgba(255, 255, 255, 0.3);
    border: 0.0625rem solid var(--t-black);
    margin: 0 0.3125rem 0.3125rem 0;
    color: #000;
    font-weight: 700;
}

.product-box-slide .attr-container tr td .btn-light.btn:hover {
    border-color: var(--purple);
}

.product-box-slide .spec-container table {
    min-width: 13.75rem;
    border: 0.0625rem solid #bebebe;
}

.product-box-slide .spec-container table tr td {
    padding: 0.625rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.3);
}

.product-box-slide .spec-container table tr:first-child td:first-child {
    border-top-left-radius: 0.625rem;
}

.product-box-slide .spec-container table tr:first-child td:last-child {
    border-top-right-radius: 0.625rem;
}

.product-box-slide .spec-container table tr:last-child td:first-child {
    border-bottom-left-radius: 0.625rem;
}

.product-box-slide .spec-container table tr:last-child td:last-child {
    border-bottom-right-radius: 0.625rem;
}

.product-box-slide .spec-container table tr td .spec-name {
    color: #aaa;
    font-size: 1rem;
    font-weight: 300;
}

.product-box-slide .spec-container table tr td .spec-value {
    color: #777;
    font-size: 1rem;
    font-weight: 500;
}

.product-box-slide .color-container .color {
    width: 2rem;
    height: 2rem;
    border: 0;
}

.product-box-slide .prices {
    display: inline-flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 1.875rem 0;
}

.product-box-slide .prices .actual-price {
    color: var(--purple);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}

.product-box-slide .prices .old-price {
    margin: 0 0 0 0.3125rem;
    color: #999;
    font-size: 1.375rem;
    font-weight: 300;
    text-decoration: line-through;
}

.product-box-slide .button {
    display: inline-flex;
    align-items: center;
}

.product-box-slide .button .catalog-quantity {
    max-width: 3.75rem;
    height: 100%;
}

.product-box-slide .button .add-to-cart-button.btn.btn-outline-secondary {
    padding: 0.9375rem 2.1875rem;
    border: 0.0625rem solid var(--purple);
    background-color: var(--purple);
    color: #fff;
    text-transform: uppercase;
}

.product-box-slide .button .add-to-cart-button.btn.btn-outline-secondary:hover {
    background-color: #1c1b1b;
    border: 0.0625rem solid #1c1b1b;
}

.product-box-slide .picture-outer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-box-slide .picture-outer a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.product-box-slide .picture-outer img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-height: 29.0625rem;
    max-width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.product-box-slide .picture-outer .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    background-color: #f8f9fb;
}

.product-box-slide .picture-outer:hover .hover-img {
    opacity: 1;
    visibility: visible;
}

.product-box-slide .picture-outer:hover .hover-img+.main-product-img {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 47.9375rem) {
    .product-box-slide {
        padding: 5%;
    }

    .product-box-slide .picture-outer img {
        position: static;
    }

    .products-tabs .nav-tabs .nav-item {
        width: 100%;
    }

    .products-tabs .nav-tabs .nav-link {
        text-align: center;
    }
}

@media (max-width: 74.5rem) {
    .home-banner-steps {
        position: static;
        width: auto;
        margin: 2rem auto 0;
    }
}

@media (max-width: 35.9375rem) {

    .product-box-slide .content .title a,
    .product-box-slide .prices {
        font-size: 2rem;
    }

    .home-page-section {
        min-height: unset;
    }

    .home-page-section .product-grid {
        min-height: 22.5rem;
    }
}

.sourcing-flow-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    margin: 1.5rem 0;
    border: .0625rem solid transparent;
    border-radius: .5rem;
    background-image: linear-gradient(var(--white), var(--white)), var(--sourcing-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.s4d-mobile .sourcing-flow-wrapper {
    overflow-x: auto;
    background-size: 100% .125rem;
    justify-content: flex-start;
    padding: 1.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.sourcing-flow-wrapper h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: #000;
}

.s4d-mobile .sourcing-flow-wrapper h4 {
    flex: 1;
}

.sourcing-flow-wrapper h4 span {
    background: var(--sourcing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sourcing-flow-wrapper .sourcing-flow-features-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}

.sourcing-flow-wrapper .sourcing-flow-step {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--dark-black);
}

.s4d-mobile .sourcing-flow-wrapper .sourcing-flow-step {
    flex-shrink: 0;
    min-width: 6.25rem;
    align-items: center;
}

.sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-title {
    max-width: 11.25rem;
}

.s4d-mobile .sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-title {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.3;
}

.sourcing-flow-wrapper .sourcing-flow-separator {
    width: .0938rem;
    background: var(--sourcing-gradient);
    border-radius: .5rem;
    align-self: stretch;
}

.sourcing-features-wrapper {
    padding: 1.5rem 2.9375rem;
    display: flex;
    align-items: flex-start;
    gap: 1.9375rem;
    background: linear-gradient(135deg, rgba(110, 61, 247, 0.1) 9.98%, rgba(255, 64, 0, 0.1) 83.47%), var(--white);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.s4d-mobile .sourcing-features-wrapper {
    padding: 1.5rem 0.75rem;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    margin-top: 1.5625rem;
}

.sourcing-features-wrapper .sourcing-features-heading {
    flex: 1;
}

.sourcing-features-wrapper .sourcing-features-heading h2 {
    margin: 0;
    font-size: 2.5rem;
    line-height: 135%;
}

.sourcing-features-wrapper .sourcing-features-heading .heading-regular {
    font-weight: 400;
    color: var(--dark-black);
}

.sourcing-features-wrapper .sourcing-features-heading .heading-gradient {
    font-weight: 600;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--red-fill) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

.s4d-mobile .sourcing-features-wrapper .sourcing-features-heading {
    width: 100%;
}

.s4d-mobile .sourcing-features-wrapper .sourcing-features-heading h2 {
    font-size: 1.25rem;
    text-align: center;
}

.sourcing-features-wrapper .sourcing-feature-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.s4d-mobile .sourcing-features-wrapper .sourcing-feature-list {
    width: 100%;
}

.s4d-mobile .sourcing-features-wrapper .sourcing-feature-list .sourcing-feature-row {
    align-items: flex-start;
}

.sourcing-features-wrapper .sourcing-feature-list .sourcing-feature-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--dark-black);
    font-size: 0.875rem;
    line-height: 140%;
}

.sourcing-features-wrapper .sourcing-feature-list .sourcing-feature-row .sourcing-feature-icon {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    justify-content: center;
    align-items: center;
    flex: 0 0 1.25rem;
    border-radius: 50%;
    background: var(--sourcing-gradient);
    color: var(--white);
    font-size: 0.625rem;
}

.sourcing-how-it-works-wrapper {
    padding: 3.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s4d-mobile .sourcing-how-it-works-wrapper {
    padding: 1.5rem 1rem;
}

.sourcing-how-it-works-wrapper h3 {
    margin: 0 0 2.25rem 0;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: -0.075rem;
    text-align: center;
    color: var(--dark-black);
}

.sourcing-how-it-works-wrapper .gradient-text {
    background: linear-gradient(135deg, var(--dark-purple) 50.96%, var(--red-fill) 83.47%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sourcing-how-it-works-steps {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    width: 100%;
    max-width: 40rem;
    position: relative;
    margin-bottom: 2.25rem;
}

.s4d-mobile .sourcing-how-it-works-steps {
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.sourcing-how-it-works-steps::before {
    content: '';
    position: absolute;
    top: 0.625rem;
    left: 0.5625rem;
    height: calc(100% - 7.2rem);
    width: 0.125rem;
    background: radial-gradient(ellipse 0.0625rem 0.09375rem, var(--dark-purple) 100%, transparent 100%);
    background-size: 0.125rem 0.375rem;
    background-repeat: repeat-y;
    z-index: 0;
}

.sourcing-how-it-works-step {
    display: flex;
    gap: 2.25rem;
    align-items: flex-start;
}

.s4d-mobile .sourcing-how-it-works-step {
    gap: 1rem;
}

.sourcing-how-it-works-step .step-icon {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    justify-content: center;
    align-items: center;
    flex: 0 0 1.25rem;
    border-radius: 50%;
    background: var(--sourcing-gradient);
    color: var(--white);
    font-size: 0.625rem;
    position: relative;
    z-index: 1;
}

.sourcing-how-it-works-step .step-content {
    flex: 1;
}

.sourcing-how-it-works-step h4 {
    margin: 0;
    color: var(--dark-black);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 135%;
}

.sourcing-how-it-works-step p {
    margin: 0.4375rem 0 0 0;
    color: var(--sourcing-grey-text);
    font-size: 0.75rem;
    line-height: 175%;
}

.sourcing-how-it-works-wrapper .faq-button {
    display: flex;
    padding: 0.1875rem 3.375rem;
    align-items: center;
    gap: 0.375rem;
    border-radius: 1.375rem;
    background: var(--dark-black);
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 175%;
    text-decoration: none;
    border: none;
}

.sourcing-how-it-works-wrapper .faq-button:hover {
    background: var(--footer-background);
    color: var(--white);
    text-decoration: none;
}


.sourcing-faq-wrapper {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.s4d-mobile .sourcing-faq-wrapper {
    padding: 2.5rem 1rem;
}

.sourcing-faq-wrapper h3 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--dark-black);
    line-height: 1.15;
    text-align: center;
    letter-spacing: -0.075rem;
}

.sourcing-faq-wrapper p {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--home-sourcing-features-color);
    line-height: 1.75;
    text-align: center;
}

.sourcing-faq-wrapper .sourcing-faq-topic-wrapper {
    max-width: 46.875rem;
    width: 100%;
}

.sourcing-faq-wrapper .sourcing-faq-topic {
    margin: 0 0 0.75rem 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--dark-black);
    line-height: 1.75;
    padding-left: 1.875rem;
}

.sourcing-faq-wrapper .sourcing-faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    align-items: center;
}

.sourcing-faq-wrapper .sourcing-faq-container .sourcing-faq-row {
    padding: 1.25rem 1rem 1.25rem 1.75rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--sourcing-border-color);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sourcing-faq-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-black);
    line-height: 1.75;
}

.sourcing-faq-wrapper .sourcing-faq-container .sourcing-faq-row .sourcing-faq-row-header .s4d-icon {
    color: var(--purple);
    font-weight: 600;
}

.sourcing-faq-wrapper .sourcing-faq-container .sourcing-faq-row .sourcing-faq-row-header.collapsed .s4d-minus,
.sourcing-faq-wrapper .sourcing-faq-container .sourcing-faq-row .sourcing-faq-row-header.not-collapsed .s4d-plus {
    display: none;
}

.sourcing-faq-answer {
    font-size: 1rem;
    font-weight: 400;
    color: var(--home-sourcing-features-color);
    line-height: 1.75;
}

.sourcing-faq-wrapper .sourcing-faq-container .sourcing-faq-row:has(.collapse.show) {
    background: var(--sourcing-background);
}

.home-comments-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2rem;
}

.s4d-mobile .home-comments-container {
    margin-top: 0;
}

.home-comments-container .home-comments-wrapper h2 {
    margin: 0 0 2rem 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.075rem;
    color: var(--dark-black);
}

.s4d-mobile .home-comments-container .home-comments-wrapper h2 {
    font-size: 1.5rem;
}

.home-comments-container .home-comments-wrapper h2 span {
    color: var(--light-green);
}

.home-comments-container .home-comments-wrapper .home-comments-list {
    padding: 0 .5rem 3rem .5rem;
}

.home-comments-container .home-comments-wrapper .comment-card {
    padding: 1rem;
    position: relative;
    min-height: 8.75rem;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
}

.home-comments-container .home-comments-wrapper .swiper-container {
    overflow: visible;
}

.home-comments-container .home-comments-wrapper .home-comments-list {
    padding-bottom: 3rem;
}

.home-comments-container .home-comments-wrapper .home-comments-list .swiper-pagination-bullet {
    width: .6875rem;
    height: .5rem;
    border-radius: 1.0625rem;
    background: #D3DAF3;
    opacity: 1;
}

.home-comments-container .home-comments-wrapper .home-comments-list .swiper-pagination-bullet:hover {
    background: var(--purple);
}

.home-comments-container .home-comments-wrapper .home-comments-list .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 2.5rem;
    background: var(--purple);
}

.home-comments-container .home-comments-wrapper .comment-card .comment-card-border {
    position: absolute;
    user-select: none;
}

.home-comments-container .home-comments-wrapper .comment-card .comment-card-border.--left {
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
}

.home-comments-container .home-comments-wrapper .comment-card .comment-card-border.--right {
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.home-comments-container .home-comments-wrapper .comment-card .comment-card-border.--top {
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
}

.home-comments-container .home-comments-wrapper .comment-card p.comment-content {
    font-size: 1rem;
    font-weight: 400;
    line-height: 165%;
    text-align: center;
    color: var(--gray);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-comments-container .home-comments-wrapper .comment-card .comment-author {
    text-align: center;
    font-size: .875rem;
    font-weight: 300;
    line-height: 135%;
    color: var(--dark-black);
}

.home-page__section__wrapper {
    display: flex;
    gap: 1rem;
    padding-top: 2rem;
}

.home-page__section__wrapper .home-page__menu {
    flex: 0 1 17rem;
    min-width: 0;
    padding-bottom: 1.5rem;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container {
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    border: .0625rem solid var(--border-light-grey);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container:has(.dropdown-menu-wrapper.show) {
    border: none;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container .dropdown-menu-wrapper:not(.show) {
    display: block !important;
    position: absolute;
    top: 0.0625rem;
    left: 0.0625rem;
    right: 0.0625rem;
    bottom: 0.0625rem;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container .dropdown-menu-wrapper:not(.show)>li {
    overflow: hidden;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container .dropdown-menu-wrapper {
    margin: 10.375rem 0 0;
    border-radius: .5rem;
}

.home-page__section__wrapper .home-page__menu .home-menu-widget__container .dropdown-menu-wrapper.--header {
    margin: 8.375rem 0 0;
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    transition: margin .3s ease-in-out;
}

body.scroll-down:not(.onTop) .home-page__section__wrapper .home-page__menu .home-menu-widget__container .dropdown-menu-wrapper.--header {
    margin-top: 5.8125rem;
}

.home-page__section__wrapper .home-page__banners {
    flex: 1;
}

.home-featured-categories__wrapper {
    margin-top: 3.5rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 64rem) {
    .home-featured-categories__wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 48rem) {
    .home-featured-categories__wrapper {
        grid-template-columns: 1fr;
    }
}

.home-featured-categories__wrapper .home-featured-categories__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    gap: 1rem;
}

.home-featured-categories__wrapper .see-all-link {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tertiary-color);
}

.download-app__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--purple);
    position: relative;
}

.download-app__card .download-app__background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 3rem;
    overflow: hidden;
}

.download-app__card .download-app__background-wrapper .download-app__background-image {
    width: 100%;
}

.download-app__card .download-app__background-wrapper .download-app__background-overlay {
    position: absolute;
    left: -0.25rem;
    right: -0.25rem;
    bottom: -0.25rem;
    z-index: 1;
    width: calc(100% + .5rem);
}

.download-app__card .download-app__icon-wrapper {
    border-radius: .75rem;
    background: var(--sourcing-gradient);
    box-shadow: inset 0 0 0 .0625rem var(--white);
    font-size: 2rem;
    color: var(--white);
    z-index: 1;
    display: flex;
}

.download-app__card .download-app__card-content {
    color: var(--white);
    text-align: center;
}

.download-app__card .download-app__card-content h2 {
    font-size: .875rem;
    font-weight: 500;
    margin: 0;
}

.download-app__card .download-app__card-content p {
    font-size: .75rem;
    font-weight: 400;
    margin-top: .5rem;
    opacity: .8;
}

.download-app__card .download-app__card-action {
    margin-top: .5rem;
}

.download-app__card .download-app__card-action button {
    background: var(--white);
}