/* Style for images being lazy-loaded by the JS */
/* Apply a transition for opacity */
img.sell-lazy,
img[loading="lazy"].sell-lazy { /* Target both native and JS candidates */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* Optional: Add a subtle scale effect */
  /* transform: scale(0.98); */
  /* transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; */
}

/* Style for images once they are loaded (by JS or natively) */
img.sell-lazy-loaded,
img.sell-lazy:not([src='']):not([src^='data:image/']) { /* Style images once JS adds class OR native loading completes */
  opacity: 1;
  /* Optional: Reset scale effect */
  /* transform: scale(1); */
}

/* Fallback for when JS adds the class directly after loading failed */
img.sell-lazy-loaded {
    opacity: 1;
}

/* You might want to ensure placeholders don't collapse layout */
/* This requires width/height attributes on your images or additional CSS */
img.sell-lazy[width][height] {
    display: inline-block; /* Or block if appropriate */
    vertical-align: middle; /* Adjust as needed */
}

/* Add a specific rule to make sure fully loaded images (even if missed by JS somehow) are visible */
img[loading="lazy"].sell-lazy:not([opacity="0"]) {
    opacity: 1;
}