/* GhabMob v5.6 — transparent, context-sized loading overlay.
   Never invent the size of photos, prices or buttons: retain the rendered layout. */

/* Use natural sizes already established by the theme, Owl and the HTML markup. */
#product-img-carousel-container,
#gm-product-purchase,
.related-carousel .gm-product-thumb {
  position: relative;
}

/* Retain the old content in place while AJAX loads the next model.
   The purchase button is also disabled by the existing JS during loading. */
#product-img-carousel-container.gm-gallery-loading > :not(.gm-gallery-skeleton),
#gm-product-purchase.gm-purchase-loading > :not(.gm-purchase-skeleton) {
  opacity: .72;
}
#gm-product-purchase.gm-purchase-loading { pointer-events: none; }

/* Existing JS inserts these two accessibility-labelled status layers.
   Fill the actual component, with ZERO opaque background or guessed geometry. */
.gm-gallery-skeleton,
.gm-purchase-skeleton {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}

/* Old version's fake image/price/button blocks are deliberately hidden. */
.gm-skeleton-shape { display: none !important; }

/* All loading indicators use ONE soft transparent shimmer.
   rgba fallback works on all themes; currentColor follows actual light/dark text. */
.gm-gallery-skeleton::after,
.gm-purchase-skeleton::after,
.related-carousel .gm-product-thumb.gm-related-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    transparent 12%,
    rgba(128, 128, 128, .045) 30%,
    rgba(128, 128, 128, .18) 48%,
    rgba(128, 128, 128, .045) 66%,
    transparent 86%
  );
  background-size: 230% 100%;
  animation: gm-transparent-shimmer 1.65s ease-in-out infinite;
}

@supports (background-color: color-mix(in srgb, currentColor 10%, transparent)) {
  .gm-gallery-skeleton::after,
  .gm-purchase-skeleton::after,
  .related-carousel .gm-product-thumb.gm-related-loading::after {
    background-image: linear-gradient(
      100deg,
      transparent 12%,
      color-mix(in srgb, currentColor 5%, transparent) 30%,
      color-mix(in srgb, currentColor 19%, transparent) 48%,
      color-mix(in srgb, currentColor 5%, transparent) 66%,
      transparent 86%
    );
  }
}

/* Preserve the actual related-card image and dimensions during reload. */
.related-carousel .gm-product-thumb.gm-related-loading > img {
  opacity: .72;
}
/* Avoid the white lazy-image holder flashing through the translucent layer. */
#product-img-carousel-container.gm-gallery-loading .gm-img-holder {
  background-color: transparent !important;
}

/* Keep the existing sale badge slot; avoid content shift. */
#product-detail #sale-badge.hidden { display: flex !important; visibility: hidden; }
.gm-gallery-error {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: inherit;
  opacity: .8;
}

@keyframes gm-transparent-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -180% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-gallery-skeleton::after,
  .gm-purchase-skeleton::after,
  .related-carousel .gm-product-thumb.gm-related-loading::after {
    animation: none;
    background-position: 50% 0;
  }
}