/**
 * Essential Magento Fotorama gallery layout.
 * Required because the Autolock theme removes Luma styles-m.css / styles-l.css,
 * which normally include lib/web/mage/gallery/gallery.less.
 * Without these rules, stage frames stay in document flow and all product
 * images stack vertically (especially visible on mobile).
 */

.fotorama__stage,
.fotorama__nav {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.fotorama__stage__shaft {
    position: relative;
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.fotorama__stage__frame {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
}

.fotorama__stage__frame.fotorama__active {
    z-index: 8;
}

.fotorama__wrap--slide .fotorama__stage__frame {
    opacity: 1 !important;
}

.fotorama__img {
    border: none !important;
    max-width: inherit;
}

.fotorama__img--full {
    display: none;
}

.fotorama--hidden {
    display: none;
    position: absolute;
    left: -99999px;
    top: -99999px;
    z-index: -1000;
    width: 0;
    height: 0;
    overflow: hidden;
}

._block-content-loading .fotorama-item {
    position: absolute !important;
    z-index: -1;
    top: 0;
    width: 100%;
}

.gallery-placeholder:not(._block-content-loading) .gallery-placeholder__image {
    display: none;
}

.fotorama__nav--dots .fotorama__nav__frame--thumb,
.fotorama__nav--dots .fotorama__thumb-border {
    display: none;
}

.fotorama__nav--thumbs .fotorama__nav__frame--dot {
    display: none;
}

/* Override theme cosmetic rule that expands every slide in normal flow */
.page-wrapper .product.media .fotorama__stage__frame .fotorama__img {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}