/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.related-products {
  display: block;
  width: 100%; }
  .related-products .tns-outer {
    position: relative; }
    .related-products .tns-outer .tns-controls {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      pointer-events: none;
      z-index: 1; }
      .related-products .tns-outer .tns-controls:focus {
        outline: 0; }
      .related-products .tns-outer .tns-controls:focus-visible, .related-products .tns-outer .tns-controls.focus-visible {
        outline: 2px solid var(--wp--preset--color--primary);
        outline-offset: 3px;
        border-radius: 1px; }
      .related-products .tns-outer .tns-controls button {
        position: relative;
        width: 45px;
        height: 45px;
        font-size: 12px;
        color: var(--wp--preset--color--text-color);
        background-color: var(--wp--preset--color--white);
        border: 1px solid var(--wp--preset--color--primary);
        border-radius: 100%;
        pointer-events: auto;
        transition: all .2s ease-in-out;
        z-index: 9;
        line-height: 1;
        padding: 0; }
        .related-products .tns-outer .tns-controls button [class^="icon-"], .related-products .tns-outer .tns-controls button [class*=" icon-"],
        .related-products .tns-outer .tns-controls button [class^="icon-"]:before, .related-products .tns-outer .tns-controls button [class*=" icon-"]:before {
          width: auto; }
        .related-products .tns-outer .tns-controls button:disabled {
          opacity: 0; }
      .related-products .tns-outer .tns-controls [data-controls="next"] {
        margin-right: 0; }
      .related-products .tns-outer .tns-controls [data-controls="prev"] {
        margin-left: -20px; }
  .related-products .arrows {
    display: flex;
    align-items: center;
    gap: 20px; }
    .related-products .arrows .arrow {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--wp--preset--color--text-color);
      background-color: var(--wp--preset--color--white);
      border: 1px solid var(--wp--preset--color--border-color);
      border-radius: 100%;
      pointer-events: auto;
      cursor: pointer;
      transition: all .2s ease-in-out;
      padding: 0; }
      .related-products .arrows .arrow [class^="icon-"], .related-products .arrows .arrow [class*=" icon-"],
      .related-products .arrows .arrow [class^="icon-"]:before, .related-products .arrows .arrow [class*=" icon-"]:before {
        width: auto; }
      .related-products .arrows .arrow:hover {
        background-color: var(--wp--preset--color--primary);
        border-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--white); }
      .related-products .arrows .arrow:disabled {
        opacity: 0; }
  @media (max-width: 767px) {
    .related-products .tns-controls {
      display: none !important; } }
  .related-products .tns-outer {
    position: relative; }
    @media (min-width: 981px) {
      .related-products .tns-outer:after {
        content: '';
        top: 0;
        right: 0;
        position: absolute;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 34.32%, #FFFFFF 88.17%);
        height: 100%;
        width: 200px;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s, visibility 0.5s; } }
    .related-products .tns-outer.fade-in:after {
      opacity: 1;
      visibility: visible; }
    .related-products .tns-outer.fade-out:after {
      opacity: 0;
      visibility: hidden; }
  .related-products .products {
    display: flex;
    flex-wrap: wrap; }

/*# sourceMappingURL=related.css.map */