/* Critical CSS to prevent product page CLS */

/* =============================================
   GALLERY PLACEHOLDER - reserve space before JS
   ============================================= */
   .gallery-placeholder {
    min-height: 380px;
}

/* =============================================
   DESKTOP (1025px+)
   ============================================= */
@media (min-width: 1025px) {

    .gallery-placeholder {
        min-width: 250px;
        min-height: 500px;
    }

    .page-layout-1column .product-info-main {
        min-width: 500px;
    }

    /* Reserve exact space for main gallery stage */
    .fotorama-item[data-gallery-role="gallery"],
    .fotorama__stage,
    .fotorama__wrap {
        min-height: 500px;
    }

    /* Reserve exact space for thumbnail navigation */
    .fotorama__nav,
    .fotorama__nav__shaft,
    .fotorama__nav-wrap {
        height: 110px;
        min-height: 110px;
    }

    /* Prevent thumbnail container collapse during load */
    .fotorama__nav__frame {
        width: 88px;
        height: 110px;
        display: inline-block;
    }

    /* Placeholder background while thumbs load */
    .fotorama__thumb {
        width: 88px;
        height: 110px;
    }

    .fotorama__thumb::before {
        content: '';
        display: block;
        width: 88px;
        height: 110px;
        background: #f5f5f5;
    }
}

/* =============================================
   MOBILE (max 1024px) - MUST BE TOP LEVEL
   ============================================= */
@media (max-width: 1024px) {

    .gallery-placeholder {
        min-height: 100vw;
        max-height: 900px;
    }

    /* Reserve space for main stage */
    .fotorama-item[data-gallery-role="gallery"],
    .fotorama__stage {
        min-height: 100vw;
        max-height: 900px;
    }

    /* Reserve space for dots navigation */
    .fotorama__nav--dots {
        min-height: 16px;
        height: 16px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .fotorama__nav__shaft--dots {
        min-height: 16px;
    }

    .fotorama__nav__frame--dot {
        width: 18px;
        height: 18px;
    }

    .fotorama__nav-wrap--dots {
        min-height: 36px;
        display: block;
    }
}

/* =============================================
   ADD TO CART FORM - prevent shift while loading
   ============================================= */
.product-info-main .product-add-form {
    min-height: 270px;
}

/* =============================================
   FOTORAMA IMAGE - let Fotorama control position
   Do NOT override position/transform as Fotorama
   JS will fight it and cause a second shift.
   Only prevent the initial unconstrained render.
   ============================================= */
.fotorama__stage__frame .fotorama__img {
    max-width: 100%;
    max-height: 100%;
}