/*--------------------------------------------------------------
## Product Card Styling
--------------------------------------------------------------*/

.product--card {
  .hover-image {
    opacity: 0;
  }
  &:hover {
    .hover-image {
      opacity: 1;
    }
    .color-swatches {
      opacity: 1;
    }
  }
}

.product--card {
  .additional-info {
    display: none;
  }
  &.info-hover&:hover {
    .product-info {
      display: none;
    }
    .additional-info {
      display: inherit;
    }
  }
}

.color-swatches {
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  opacity: 0;
}

.color-swatch {
  flex: 1;
  height: 15px;
  min-width: 0;
  border:1px solid #eee;
}