.golgeter-product-gallery{position:relative}
.gpg-main-wrap{position:relative}
.gpg-main-link{display:block}
.gpg-main-image{display:block;width:100%;height:auto}
.gpg-thumbnails{display:flex;gap:10px;overflow-x:auto;margin-top:12px;padding:0 0 4px}
.gpg-thumb{flex:0 0 auto;width:76px;height:76px;padding:0;border:1px solid #ddd;background:#fff;cursor:pointer;overflow:hidden}
.gpg-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gpg-thumb.is-active{border-color:#111}
.gpg-thumb:focus-visible,.gpg-lightbox-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.gpg-lightbox[hidden]{display:none!important}
.gpg-lightbox{position:fixed;z-index:999999;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(0,0,0,.88)}

.gpg-lightbox-close{position:absolute;top:14px;right:18px;border:0;background:transparent;color:#fff;font-size:44px;line-height:1;cursor:pointer;padding:8px}
body.gpg-lightbox-open{overflow:hidden}
@media (max-width:767px){
    .gpg-thumbnails{gap:8px}
    .gpg-thumb{width:64px;height:64px}
    .gpg-lightbox{padding:18px}
}


/* Desktop product layout compatibility.
   The theme normally targets WooCommerce's standard .images class.
   These rules are a conservative fallback so the gallery stays left
   and the product summary stays right instead of dropping underneath. */
@media (min-width: 768px){
    .woocommerce div.product .golgeter-product-gallery.images{
        width:48%;
        float:left;
        clear:none;
        margin-bottom:2em;
    }
    .woocommerce div.product div.summary{
        width:48%;
        float:right;
        clear:none;
    }
    .woocommerce div.product::after{
        content:"";
        display:table;
        clear:both;
    }
}

/* Mobile remains stacked. */
@media (max-width: 767px){
    .woocommerce div.product .golgeter-product-gallery.images,
    .woocommerce div.product div.summary{
        width:100%;
        float:none;
        clear:both;
    }
}

/* v0.1.2 — Lightbox image ratio fix.
   Strong selectors intentionally override theme/global product-image CSS. */
.golgeter-product-gallery .gpg-lightbox{
    box-sizing:border-box;
    overflow:hidden;
}

.golgeter-product-gallery .gpg-lightbox .gpg-lightbox-image{
    display:block !important;
    position:static !important;
    flex:0 1 auto !important;

    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;

    max-width:calc(100vw - 64px) !important;
    max-height:calc(100vh - 64px) !important;

    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;

    margin:auto !important;
    padding:0 !important;
    transform:none !important;
}

@media (max-width:767px){
    .golgeter-product-gallery .gpg-lightbox .gpg-lightbox-image{
        max-width:calc(100vw - 28px) !important;
        max-height:calc(100vh - 28px) !important;
    }
}