/* Eudora image loading: gray EJ mark inside a thin brand ring while a product/category photo loads.
   Only with JS (body.ed-js), so a no-JS visitor never sees a spinner that cannot stop.
   eudora-loading-1.0.0.js adds .el-loaded (photo shown) or .el-failed (keep the mark, stop the ring). */
body.ed-js .ec-card__media:not(.el-loaded),
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded),
body.ed-js .eh-mega__img:not(.el-loaded) { box-shadow: inset 0 0 0 2000px #f6f6f6; } /* inset shadow: theme grids force a white background */

body.ed-js .ec-card__media:not(.el-loaded)::before,
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded)::before,
body.ed-js .eh-mega__img:not(.el-loaded)::before,
body.ed-js .ec-card__media:not(.el-loaded):not(.el-failed)::after,
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded):not(.el-failed)::after,
body.ed-js .eh-mega__img:not(.el-loaded):not(.el-failed)::after {
    content: ""; display: block; opacity: 1; position: absolute; top: 50%; left: 50%; right: auto; bottom: auto;
    pointer-events: none; z-index: 2; background-color: transparent; /* overrides rwd .products-grid .product-image:before/:after */
}
/* The mark */
body.ed-js .ec-card__media:not(.el-loaded)::before,
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded)::before,
body.ed-js .eh-mega__img:not(.el-loaded)::before {
    width: var(--el-load-mark, 22px); height: calc(var(--el-load-mark, 22px) * 2.12);
    margin: calc(var(--el-load-mark, 22px) * -1.06) 0 0 calc(var(--el-load-mark, 22px) * -.5);
    background: url("../images/eudora-loading/ej-mark-gray.png") center / contain no-repeat;
}
/* The ring */
body.ed-js .ec-card__media:not(.el-loaded):not(.el-failed)::after,
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded):not(.el-failed)::after,
body.ed-js .eh-mega__img:not(.el-loaded):not(.el-failed)::after {
    width: var(--el-load-ring, 64px); height: var(--el-load-ring, 64px); box-sizing: border-box;
    margin: calc(var(--el-load-ring, 64px) / -2) 0 0 calc(var(--el-load-ring, 64px) / -2);
    background: none; /* drop rwd's opc-ajax-loader.gif */
    border: 2px solid rgba(209, 4, 95, .14); border-top-color: var(--el-brand, #d1045f); border-radius: 50%;
    animation: el-load-spin .9s linear infinite;
}
/* Failed photo: hide the browser's broken-image icon/alt text (alt stays for screen readers) */
body.ed-js .el-failed img { opacity: 0; }
/* PDP: the main photo has no width/height, so hold a square frame until it arrives */
body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded) { aspect-ratio: 1 / 1; }
@media (min-width: 961px) { /* desktop grid column is sized by the photo itself */
    body.ed-js .eudora-pdp .product-image-gallery:not(.el-loaded) { width: clamp(280px, 36vw, 520px); }
}
body.ed-js .eudora-pdp .product-image-gallery { position: relative; --el-load-mark: 30px; --el-load-ring: 84px; }
body.ed-js .eh-mega__img { position: relative; --el-load-mark: 14px; --el-load-ring: 40px; }
@keyframes el-load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.ed-js .ec-card__media::after,
    body.ed-js .eudora-pdp .product-image-gallery::after,
    body.ed-js .eh-mega__img::after { animation: none; display: none; }
}