/* ==========================================================================
   1. CATALOGUE / CATEGORY PAGE + SEARCH RESULTS
      (Product Grid Images - image pulled in close to container border)
   ========================================================================== */
.products-grid .product-item-photo,
.products-grid .product-image-container,
.products-grid .product-item-info .product-image-container,
.page-products .product-image-wrapper,
.search.results .product-item-photo,
.search.results .product-image-container {
    background-color: #ffffff !important;
    border: 2px solid #e5e5e5 !important;
    padding: 0.05rem !important; /* minimal gap so image edge sits close to the border */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.products-grid .product-image-photo,
.search.results .product-image-photo {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border: none !important;
    outline: none !important;
}


/* ==========================================================================
   PRODUCT DETAIL PAGE - GALLERY LAYOUT (border + scale, non-breaking clip)
   ========================================================================== */
#gallery-main {
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Border overlay */
#gallery-main::after {
    content: "";
    position: absolute;
    inset: 3rem;
    border: 1.5px solid #d5d5d5;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 35;
}

/* Maintain original slide structure & overflow rules */
#gallery-main > .absolute.inset-0 > div {
    overflow: hidden !important;
}

/* Scale image and clip strictly to the 3rem grey border boundary */
#gallery-main img {
    scale: 1.3 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: inset(3rem) !important;
}

@supports not (scale: 1) {
    #gallery-main img {
        transform: scale(1.3) !important;
        transform-origin: center !important;
        clip-path: inset(3rem) !important;
    }
}

#gallery-main button[aria-label="Previous image"],
#gallery-main button[aria-label="Next image"] {
    z-index: 40 !important;
}

#gallery-main [class*="thumbnail"],
#gallery-main [class*="thumb-"] {
    margin: 0 !important;
    border: none !important;
    scale: 1 !important;
}