/* ==========================================================================
   PRODUCT DETAIL PAGE - GALLERY LAYOUT (CORRECTED / TUNED)
   ========================================================================== */

/* 1. Outer container: plain white, no border, no padding.
      overflow:hidden clips anything the scaled image pushes past the edge. */
#gallery-main {
    background-color: 
#ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 2. Inner box: border + inset spacing lives here.
      Uses inset instead of margin so top/right/bottom/left are all
      forced to 3rem regardless of the wrapper's original positioning —
      this is what fixes the one-sided border bug on the detail page. */
#gallery-main > .absolute.inset-0,
#gallery-main > template + div,
#gallery-main > div[x-data*="zoom"] {
    position: absolute !important;
    inset: 3rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 1.5px solid 
#d5d5d5 !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 3. Image: scaled up, but contained within the inner box regardless of
      the source image's own aspect ratio / built-in padding. */
#gallery-main img {
    scale: 1.15 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3b. Fallback for browsers without support for the standalone scale property */
@supports not (scale: 1) {
    #gallery-main img {
        transform: scale(1.15) !important;
        transform-origin: center !important;
    }
}

/* 4. Keep nav arrows above the frame */
#gallery-main button[aria-label="Previous image"],
#gallery-main button[aria-label="Next image"] {
    z-index: 40 !important;
}

/* 5. Explicitly exclude the thumbnail strip from anything above, in case
      thumbnails share a similar x-data attribute or class naming pattern. */
#gallery-main [class*="thumbnail"],
#gallery-main [class*="thumb-"] {
    margin: 0 !important;
    border: none !important;
    scale: 1 !important;
}