/* ─── Stone List Page — Grid Skeleton ───
   Scoped to template_one/rb-stone-list.php only. Not part of ringbuilder.css
   so it never loads on any other page.

   These placeholder cards are rendered server-side inside #vdbrb_stone_grid_view_row
   (see rb-stone-list.php) so the grid has its normal height on first paint
   instead of empty space that suddenly grows once the AJAX diamond data arrives.
   rb-stone-list.js's tab-load functions (call_natural_list(), call_labgrown_list(),
   call_gemstone_list(), call_radiance_list()) replace this container's innerHTML
   directly on success, so the skeleton disappears on its own — no extra JS needed
   here to remove it. */

.vdbrb-skeleton-item {
  pointer-events: none;
}

/* Reuses the real card's own sizing rules (.vdb-rb-product-img-wrapper already has
   width/height/border-radius per breakpoint in ringbuilder.css) and just layers a
   shimmer background on top, so the skeleton box is pixel-identical to the real
   image box at every screen size without duplicating those breakpoints here. */
.vdb-rb-product-img-wrapper.vdbrb-skeleton-box,
.vdbrb-skeleton-line {
  background: linear-gradient(100deg, #ececec 30%, #f5f5f5 50%, #ececec 70%);
  background-size: 200% 100%;
  animation: vdbrb-skeleton-shimmer 1.4s ease-in-out infinite;
}

.vdbrb-skeleton-line {
  display: block;
  height: 18px;
  border-radius: 4px;
  margin: 8px 0;
  color: transparent;
}

.vdb-rb-price-block .vdbrb-skeleton-line {
  height: 22px;
  margin: 0;
}

@keyframes vdbrb-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced-motion preferences — keep the placeholder shape but drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .vdb-rb-product-img-wrapper.vdbrb-skeleton-box,
  .vdbrb-skeleton-line {
    animation: none;
    background: #eee;
  }
}