#ss-similar-products {
  --ss-max-width: 1200px;
  --ss-item-w: 200px;
}

#ss-similar-products .ss-similar {
  max-width: var(--ss-max-width) !important;
  margin: 48px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  clear: both !important;
  float: none !important;
  width: 100% !important;
}

#ss-similar-products .ss-similar__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

#ss-similar-products .ss-similar__heading {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  color: #111827 !important;
  background: none !important;
  border: none !important;
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Track area: relatively positioned so the prev/next arrows can be
   pinned to its left/right edges, floating over the row of images. */
#ss-similar-products .ss-similar__track-wrap {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Arrows reuse the theme's own .dfd-carousel-arrow component (same markup
   the theme's native carousels use). We place it: pinned to the left/right
   edge of the track, vertically centered on the product image. We also
   force a neutral icon color and mirror the left arrow ourselves, since
   outside the theme's own carousel wrapper it doesn't reliably pick up
   the accent color / left-facing icon on its own. */
#ss-similar-products .dfd-carousel-arrow {
  position: absolute !important;
  top: calc(var(--ss-item-w) / 2) !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  cursor: pointer;
}

#ss-similar-products [dfd-carousel-btn-left] {
  left: -6px !important;
}

#ss-similar-products [dfd-carousel-btn-right] {
  right: -6px !important;
}

#ss-similar-products .dfd-carousel-arrow svg path:last-child {
  fill: #374151 !important;
}

#ss-similar-products [dfd-carousel-btn-left] svg {
  transform: scaleX(-1);
}

#ss-similar-products .ss-similar__track {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  gap: 24px !important;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 0 !important;
  /* Touch/swipe support on mobile: momentum scrolling on older iOS,
     and tell the browser this element owns horizontal gestures so a
     swipe doesn't get hijacked by page-level vertical scroll. */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

#ss-similar-products .ss-similar__track::-webkit-scrollbar {
  display: none;
}

/* No "card" chrome — plain image, title, price, matching a bare product
   grid rather than a bordered/boxed tile. */
#ss-similar-products .ss-similar__item {
  flex: 0 0 var(--ss-item-w) !important;
  scroll-snap-align: start;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: opacity 0.15s ease !important;
}

#ss-similar-products .ss-similar__item:hover {
  opacity: 0.85 !important;
}

#ss-similar-products .ss-similar__item img {
  width: 100% !important;
  aspect-ratio: 1;
  object-fit: contain !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

#ss-similar-products .ss-similar__no-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f3f4f6;
}

#ss-similar-products .ss-similar__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 0 0 !important;
}

#ss-similar-products .ss-similar__name {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #111827 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  margin: 0 !important;
  background: none !important;
}

#ss-similar-products .ss-similar__price {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

#ss-similar-products .ss-similar__price del {
  color: #9ca3af !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

#ss-similar-products .ss-similar__price ins {
  text-decoration: none !important;
  color: #990033 !important;
}

/* Tablet / narrow storefront columns */
@media (max-width: 782px) {
  #ss-similar-products {
    --ss-item-w: 170px;
  }

  #ss-similar-products .ss-similar {
    margin: 32px auto !important;
    padding: 0 16px !important;
  }

  #ss-similar-products .ss-similar__header {
    margin-bottom: 14px !important;
  }

  #ss-similar-products .ss-similar__track {
    gap: 16px !important;
  }
}

/* Phones */
@media (max-width: 480px) {
  #ss-similar-products {
    --ss-item-w: 150px;
  }

  #ss-similar-products .ss-similar__heading {
    font-size: 1.1rem !important;
  }

  #ss-similar-products .ss-similar__track {
    gap: 12px !important;
  }

  #ss-similar-products [dfd-carousel-btn-left] {
    left: -4px !important;
  }

  #ss-similar-products [dfd-carousel-btn-right] {
    right: -4px !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  #ss-similar-products {
    --ss-item-w: 135px;
  }

  #ss-similar-products .ss-similar__name,
  #ss-similar-products .ss-similar__price {
    font-size: 0.78rem !important;
  }
}