/**
 * Public storefront styles for EXG Brands Studio product customization.
 */

.ebs-3d-viewer-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 400px;
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

#ebs-3d-canvas-mount {
    width: 100%;
    height: 100%;
}

#ebs-2d-fallback-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#ebs-2d-fallback-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Make WoodMart PDP gallery placeholder hidden when 3D is active */
.product-images.ebs-has-3d-viewer .woocommerce-product-gallery {
    display: none !important;
}

/* On customizable products: disable gallery zoom + hide prev/next + thumbnails so the
   logo overlay stays put. Covers WooCommerce core and common WoodMart markup. */
.ebs-no-gallery-zoom .woocommerce-product-gallery__trigger,
.ebs-no-gallery-zoom .zoomImg,
.ebs-no-gallery-zoom .flex-control-thumbs,
.ebs-no-gallery-zoom .flex-control-nav,
.ebs-no-gallery-zoom .wd-gallery-btn,
.ebs-no-gallery-zoom .wd-nav-arrows,
.ebs-no-gallery-zoom .owl-nav,
.ebs-no-gallery-zoom .slick-arrow,
.ebs-no-gallery-zoom .wd-carousel-arrow,
.ebs-no-gallery-zoom .product-images .wd-btn-arrow {
    display: none !important;
    pointer-events: none !important;
}
.ebs-no-gallery-zoom .woocommerce-product-gallery__image,
.ebs-no-gallery-zoom .woocommerce-product-gallery__image img,
.ebs-no-gallery-zoom .wd-carousel-item img {
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   Cap the product image height on desktop.

   Promo product shots are often tall/portrait, which pushes the buy area far
   down the page. Constrain the height and let the width follow, so the image
   stays centred and keeps its aspect ratio. Mobile is left alone.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .single-product .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery img,
    .single-product .wd-carousel-item img,
    .single-product .product-images img,
    .single-product figure.woocommerce-product-gallery__wrapper img {
        max-height: 700px !important;
        width: auto !important;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        object-fit: contain;
    }

    /* Keep the slide/figure from reserving the original (taller) height. */
    .single-product .woocommerce-product-gallery__image,
    .single-product .wd-carousel-item {
        max-height: 700px;
    }
}