.product-details product-variant-picker-linked-products .variant-grid .linked-product {
  a.img-container::after {
    display: block;
    content: "";
    box-shadow: rgb(175 175 175 / 20%) 0 0 100px 0 inset;
    position: absolute;
    inset: 0;
  }

  border: 0.125rem solid var(--color-white);

  &.current, &:hover {
    border: 0.125rem solid var(--color-neutral-900) !important;
  }
}

.variant-option-caption {
  font-size: var(--font-size-base);
}

.product-details product-variant-picker-linked-products {
  .variant-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

product-variant-picker-linked-products {
  display: block;
  user-select: none;

  .product-details & {
    margin-top: 2.5rem;
  }

  .product-details &:first-of-type {
    margin-top: 1.75rem;
  }

  .product-details &:last-of-type {
    margin-bottom: 1.75rem;
  }

  .variant-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style-type: none;

    /* one item */

    .linked-product {
      display: inline-block;
      position: relative;
      background: none;

      &[style*="#ffff"], &[style*="#f5f5f5"], &[style*="#fdf5"], &[style*="#faebd"], &[style*="#dcdcdc"], &[style*="#ffe4e"], &[style*="#f5fffa"], &[style*="#f0fff0"], &[style*="#fff0f5"] {
        border: 0.0625rem solid var(--color-base-border);
      }

      /* current product */

      &:hover {
        border: 0.0625rem solid var(--color-neutral-900);
      }

      /* sold out */

      &.sold-out {
        img {
          opacity: 0.5;
          mix-blend-mode: multiply;
        }

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 2;
          background-image: linear-gradient(
            to bottom right,
            transparent 49%,
            var(--color-base-border) 1%,
            var(--color-base-border) 1%,
            transparent 51%
          );
          pointer-events: none;
        }
      }

      a {
        display: block;
        color: inherit;
        text-decoration: none;
      }

      /* product image */

      img {
        display: block;
        width: 100%;
        aspect-ratio: 5 / 6;
        height: auto;

        &.linked-product-media-image {
          display: none;
        }
      }
    }
  }

  &[data-link-field="linked_sizes"] .linked-product {
    border-color: var(--color-base-border) !important;

    a {
      padding: 10px 20px;
    }
  }

  .variant-grid.size-grid {
    display: block;
    margin-bottom: -6px;
    gap: 0;
  }

  .variant-grid.size-grid li {
    margin-right: 4px;
    margin-bottom: 6px;
    display: inline-block;
  }
}

.product-details product-variant-picker-linked-products[data-link-field="linked_sizes"] .linked-product {
  border-color: var(--color-base-border);
}

.product-details product-variant-picker-linked-products {
  .variant-grid {
    .linked-product {
      &[style*="#ffff"], &[style*="#f5f5f5"], &[style*="#fdf5"], &[style*="#faebd"], &[style*="#dcdcdc"], &[style*="#ffe4e"], &[style*="#f5fffa"], &[style*="#f0fff0"], &[style*="#fff0f5"] {
        border: 0.125rem solid var(--color-white);
      }
    }
  }
}

[product-grid-view], .product-recommendations, .resource-list__carousel {
  product-variant-picker-linked-products {
    .variant-grid {
      .linked-product {
        &.current, &:nth-of-type(7) ~ &.current, &:nth-of-type(7).current {
          display: block;
          grid-column: 1;
          grid-row: 1;
        }
      }

      &:has(.linked-product:nth-of-type(6) ~ .linked-product.current:not(:nth-of-type(7))) .linked-product:nth-of-type(6) {
        display: none;
      }
    }
  }

  @media screen and (min-width: 768px) {
    product-card:hover product-variant-picker-linked-products {
      .variant-grid {
        .linked-product {
          border: 0.0625rem solid var(--color-white);

          &.current, &:nth-of-type(7) ~ &.current {
            border: 0.0625rem solid var(--color-neutral-900);
          }
        }
      }
    }
  }
}