.editorial-slider {
  max-width: 900px;
  margin: 0 auto 2em;
  /* Added padding for mobile so it doesn't touch screen edges */
  padding: 0 15px; 
}

.editorial-slides {
  position: relative;
  width: 100%;
  /* Fix: Removed fixed 480px height */
  aspect-ratio: 4 / 3; 
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}

.editorial-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Contain ensures the WHOLE product is visible. 
     Use 'cover' only if you are okay with edges being cropped. */
  object-fit: cover; 
  opacity: 0;
  transition: opacity 0.5s ease;
}

.editorial-slides img.active {
  opacity: 1;
}

.editorial-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  /* Allows thumbnails to wrap on small mobile screens */
  flex-wrap: wrap; 
}

.editorial-thumbs img {
  width: 80px;
  /* Fix: Keep thumbnails 4:3 as well for consistency */
  aspect-ratio: 4 / 3; 
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border-radius: 4px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.editorial-thumbs img.active {
  opacity: 1;
  border-color: #d4af37;
}