/**
 * @file
 * Related Product styles
 *
 */

.related-product {
  position: relative;
}
.related-product__header {
  text-align: center;
  color: var(--color-neutral);
  font-family: "Depot New";
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 3rem;
}
.related-product_content,
.related-product__empty {
  margin: 3rem;
}
.related-product .tns-controls {
  display: none;
}
.related-product .tns-controls:focus {
  outline: none;
}
.related-product__empty {
  text-align: center;
}
.related-product__content {
  margin: 2rem 0;
}
.related-product__content.tns-horizontal.tns-subpixel > .tns-item {
  vertical-align: baseline;
}
@media all and (min-width: 700px) {
  .related-product__content,
  .related-product__empty {
    margin-top: 0rem;
    margin-bottom: 5rem;
  }
}
@media all and (min-width: 800px) {
  .related-product .tns-controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: -30px;
    right: -30px;
    transform: translateY(-50%);
    z-index: 10;
  }
  .related-product .tns-controls button{
    width: 46px;
    height: 46px;
    background-color: var(--color-primary--5);
    border-radius: 100%;
    color: var(--color-primary--1);
    border: none;
    text-indent: -999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 18px;
    padding: 0;
  }
  .related-product .tns-controls button[data-controls="prev"]{
    background-image: url('../../images/icons/arrow-slider-left.svg');
  }
  .related-product .tns-controls button[data-controls="next"]{
    background-image: url('../../images/icons/arrow-slider-right.svg');
  }
}
@media all and (min-width: 1000px) {
  .related-product .tns-controls {
    left: -50px;
    right: -50px;
  }
}
@media all and (min-width: 1500px) {
  .related-product .tns-controls {
    left: -62px;
    right: -62px;
  }
}


/* Fix TNS Overflow */
.related-product {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.related-product__content {
  overflow: hidden !important;
}
.tns-outer {
  margin: 0 auto;
}