.featured-recommend-products {
  background-color: rgb(var(--color-background));
}

@media (min-width: 960px) {
  .featured-recommend-products__group {
    overflow: hidden;
  }
}

.featured-recommend-products .button--link {
  transition: color 0.15s ease-out;
}

.featured-recommend-products .button--link:hover {
  color: #6b6560;
}

.featured-recommend-products__list {
  width: 100%;
}

.featured-recommend-products__image-wrapper {
  position: relative;
  overflow: hidden;
}

.featured-recommend-products__image-wrapper--show-line::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: block;
  width: 90%;
  height: 95%;
  content: "";
  border-block-end: 1px solid #fff;
  border-inline-start: 1px solid #fff;
}

.featured-recommend-products__image,
.featured-recommend-products__image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--image-object-fit);
}

.featured-recommend-products__image-placeholder {
  background-color: rgb(var(--color-image-background));
}

/* Design: name, swatch row, then "$24  $68  65% off" on one line. */
.featured-recommend-products .product-price {
  gap: 6px;
  align-items: baseline;
}

.featured-recommend-products .product-price__save--text-style {
  text-transform: lowercase;
}

/* Swatches are bare colour dots here: no padding, no ring, no shadow. */
.featured-recommend-products .block-product-variant-picker .variant-picker__options {
  gap: 7px;
  padding: 0;
}

.featured-recommend-products .block-product-variant-picker .variant-picker__option--swatch {
  padding: 0;
  margin: 0;
}

.featured-recommend-products .block-product-variant-picker .variant-picker__button--swatch {
  padding: 0;
  border: 0;
}

.featured-recommend-products .block-product-variant-picker .variant-picker__button--swatch::before {
  display: none;
}

/* ::after is the theme's ring layer and sits above the colour fill, so the inner
   shadow goes there — it keeps the dot readable when the colour is near-white. */
.featured-recommend-products .block-product-variant-picker .variant-picker__button--swatch::after {
  display: block;
  box-shadow: inset 0 0 0 1px #e3ddd3;
}

.featured-recommend-products .block-product-variant-picker .variant-picker__swatch-rest-count {
  color: rgb(var(--color-light-text));
}

.featured-recommend-products .block-product-card-info {
  align-items: flex-start;
}

/* Square media: the theme rounds the card frame with .product-card-border-shadow
   (--product-card-border-radius), which the design does not use here. */
.featured-recommend-products .block-product-image__layer-image-wrapper,
.featured-recommend-products .block-product-image__image-wrapper,
.featured-recommend-products .block-product-image__image {
  border-radius: 0;
}