/* banner */

.home-banner-section {
  position: relative;
  height: 26.625rem;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: var(--banner-gradient);
}

.s4d-mobile .home-banner-section {
  min-height: 45.875rem;
}

.home-banner-section .banner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 3rem;

  max-width: 71.25rem;
  margin: 0 auto;
  height: 100%;
  position: relative;
}

.s4d-mobile .home-banner-section .banner-content {
  padding: 1rem;
  justify-content: flex-end;
}

.home-banner-section .banner-title {
  margin: 2.3125rem 0 0 0;
  text-align: start;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.0675rem;
  color: var(--dark-black);
  z-index: 1;
}

.home-banner-section .banner-title span {
  color: var(--dark-purple);
  display: block;
}

.home-banner-section .banner-title .banner-title-rest {
  color: var(--color-white);
}

.home-banner-section .banner-subtext {
  margin: 0;
  text-align: start;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.67;
  color: var(--dark-black);
  max-width: 43.75rem;
}

.home-banner-section .banner-subtext b {
  color: var(--dark-purple);
}

.home-banner-section .banner-logo {
  position: absolute;
  right: -7.875rem;
  top: 50%;
  transform: translateY(calc(-50% - 2.3125rem));
  height: 32.875rem;
}

.s4d-mobile .home-banner-section .banner-logo {
  transform: none;
  top: -7.875rem;
}

/* 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: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem;
}

.sourcing-flow-wrapper .sourcing-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-icon {
  height: 6.25rem;
}

.s4d-mobile .sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-icon {
  height: 3.125rem;
}

.sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-black);
  text-align: center;
  line-height: 175%;
}

.sourcing-flow-wrapper .sourcing-flow-step .sourcing-flow-title {
  font-size: 0.625rem;
}

.sourcing-flow-wrapper .sourcing-flow-separator {
  width: 2rem;
  margin-top: 3.125rem;
  transform: translateY(-50%);
}

.s4d-mobile .sourcing-flow-wrapper .sourcing-flow-separator {
  width: 1rem;
  margin-top: 1.5625rem;
}

.sourcing-features-wrapper {
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

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

.sourcing-features-wrapper .sourcing-feature-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  max-width: 31.25rem;
  border-radius: 0.5rem;
  padding: 2rem;
}

.s4d-mobile .sourcing-feature-container {
  padding: 1rem;
}

.sourcing-features-wrapper .sourcing-feature-container h5 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--dark-black);
  line-height: 135%;
}

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

.sourcing-features-wrapper .sourcing-feature-container .sourcing-feature-list .sourcing-feature-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--home-sourcing-features-color);
  font-size: 0.875rem;
}

.sourcing-features-wrapper .sourcing-feature-container .sourcing-feature-list .sourcing-feature-row .sourcing-feature-icon {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 1.25rem;
}

.sourcing-features-wrapper .sourcing-feature-container.traditional-sourcing {
  border: 0.0625rem solid var(--sourcing-border-color);
  background: rgba(248, 212, 200, 0.28);
}

.sourcing-features-wrapper .sourcing-feature-container.traditional-sourcing .sourcing-feature-list .sourcing-feature-row .sourcing-feature-icon {
  border-radius: 0.1875rem;
  background: var(--dark-black);
  color: var(--white);
  font-size: 0.625rem;
}

.sourcing-features-wrapper .sourcing-feature-container.ship4wd-sourcing {
  border: 0.0625rem solid var(--sourcing-border-color);
  background: linear-gradient(135deg, rgba(110, 61, 247, 0.10) 9.98%, rgba(255, 64, 0, 0.10) 83.47%), #FFF;
}

.sourcing-features-wrapper .sourcing-feature-container.ship4wd-sourcing .sourcing-feature-list .sourcing-feature-row .sourcing-feature-icon {
  border-radius: 50%;
  background: var(--sourcing-gradient);
  color: var(--white);
  font-size: 0.625rem;
}

.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-page #gnsslider {
  margin-top: 3.5rem;
}