/* Critical CSS to prevent product page CLS - inlined */
.gallery-placeholder {
    min-height: 380px;
  }  

  @media (min-width: 1025px) {
    .gallery-placeholder {
        min-width: 250px;
        min-height: 250px;
    }
    .page-layout-1column .product-info-main {
        min-width: 500px;
    }
}


.product-info-main .product-add-form {
    min-height: 270px;
}

/* Prevent image vertical centering shift */
.fotorama__stage__frame .fotorama__img {
    top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: static;
    margin-top: auto !important;
}

@media (min-width: 1025px) {
/* Reserve exact space for thumbnail navigation */
.fotorama__nav-wrap {
    height: 110px;
    min-height: 110px;
}

.fotorama__nav__shaft {
    min-height: 110px;
}

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

/* Add placeholder background to show reserved space */
.fotorama__thumb::before {
    content: '';
    display: block;
    width: 88px;
    height: 110px;
    background: #f5f5f5; /* Light grey placeholder */
}

.fotorama-item[data-gallery-role="gallery"],
.fotorama__stage,
.fotorama__wrap {
    min-height: 380px;
}

.fotorama__nav,
.fotorama__nav__shaft,
.fotorama__nav-wrap {
    height: 110px;
    min-height: 110px;
}

.fotorama__thumb {
    width: 88px;
    height: 110px;
}

@media (max-width: 1024px) {
    .fotorama-item[data-gallery-role="gallery"],
    .fotorama__stage {
        min-height: 100vw;
        max-height: 900px;
    }
}
}

/* Mobile dots navigation - prevent CLS */
@media (max-width: 1024px) {
    /* Reserve space for dots navigation */
    .fotorama__nav--dots {
        min-height: 16px; /* Standard dot height */
        height: 16px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .fotorama__nav__shaft--dots {
        min-height: 16px;
    }
    
    /* Individual dot dimensions */
    .fotorama__nav__frame--dot {
        width: 18px;
        height: 18px;
    }
    
    /* Ensure dots container is always present */
    .fotorama__nav-wrap--dots {
        min-height: 36px; /* Dots + margins */
        display: block;
    }
}