/* =============================================================================
   LAZY ELEMENT LOADING — CLS-safe reserved slots and shimmer skeletons
   ============================================================================= */

.lazy-element-slot {
    --lazy-slot-height: 700px;
    inline-size: 100%;
    min-block-size: var(--lazy-slot-height);
    position: relative;
}

/* Reserve a representative final height for every server-lazy product element. */
.lazy-element-slot[data-element-type="31"] { --lazy-slot-height: 980px; }
.lazy-element-slot[data-element-type="32"] { --lazy-slot-height: 700px; }
.lazy-element-slot[data-element-type="46"] { --lazy-slot-height: 620px; }
.lazy-element-slot[data-element-type="47"] { --lazy-slot-height: 680px; }
.lazy-element-slot[data-element-type="56"] { --lazy-slot-height: 940px; }

.lazy-element-placeholder {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    block-size: var(--lazy-slot-height, 700px);
    padding: clamp(20px, 4vw, 48px) 0;
    background-color: var(--body-bg, #f7f8fa);
    border-radius: 12px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.lazy-element-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform: translateX(-110%);
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.72) 48%, transparent 72%);
    animation: lazy-shimmer 1.35s ease-in-out infinite;
}

@keyframes lazy-shimmer {
    to { transform: translateX(110%); }
}

.lazy-element-skeleton {
    inline-size: min(calc(100% - 32px), 1200px);
    margin-inline: auto;
}

.lazy-element-skeleton__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 28px;
}

.lazy-element-skeleton__title,
.lazy-element-skeleton__action,
.lazy-element-skeleton__image,
.lazy-element-skeleton__line {
    display: block;
    background: #e5e8ec;
    border-radius: 9px;
}

.lazy-element-skeleton__title { inline-size: min(34%, 290px); block-size: 30px; }
.lazy-element-skeleton__action { inline-size: 96px; block-size: 22px; }

.lazy-element-skeleton__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
}

.lazy-element-skeleton__card {
    min-inline-size: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
}

.lazy-element-skeleton__image {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    margin-block-end: 18px;
}

.lazy-element-skeleton__line {
    inline-size: 58%;
    block-size: 14px;
    margin-block: 10px;
}

.lazy-element-skeleton__line--wide { inline-size: 88%; block-size: 17px; }

/* A failed request keeps the reserved space, preventing a second layout shift. */
.lazy-element-placeholder.lazy-error::before { animation: none; opacity: 0; }
.lazy-element-placeholder.lazy-error .lazy-element-skeleton { opacity: 0.55; }

@media (max-width: 991.98px) {
    .lazy-element-slot[data-element-type="31"] { --lazy-slot-height: 1120px; }
    .lazy-element-slot[data-element-type="32"] { --lazy-slot-height: 720px; }
    .lazy-element-slot[data-element-type="46"] { --lazy-slot-height: 660px; }
    .lazy-element-slot[data-element-type="47"] { --lazy-slot-height: 1180px; }
    .lazy-element-slot[data-element-type="56"] { --lazy-slot-height: 1180px; }

    .lazy-element-skeleton__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lazy-element-skeleton__card:nth-child(n + 4) { display: none; }
}

@media (max-width: 575.98px) {
    .lazy-element-slot[data-element-type="31"] { --lazy-slot-height: 1040px; }
    .lazy-element-slot[data-element-type="32"] { --lazy-slot-height: 680px; }
    .lazy-element-slot[data-element-type="46"] { --lazy-slot-height: 620px; }
    .lazy-element-slot[data-element-type="47"] { --lazy-slot-height: 1460px; }
    .lazy-element-slot[data-element-type="56"] { --lazy-slot-height: 1380px; }

    .lazy-element-skeleton { inline-size: calc(100% - 24px); }
    .lazy-element-skeleton__header { margin-block-end: 20px; }
    .lazy-element-skeleton__title { inline-size: 56%; block-size: 24px; }
    .lazy-element-skeleton__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lazy-element-skeleton__card:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-element-placeholder::before { animation: none; }
}