/* ==========================================================================
   1. CATALOGUE / CATEGORY PAGE (Outside Product Grid Images)
   ========================================================================== */
.products-grid .product-item-info .product-image-container,
.products-grid .product-item-photo,
.product-item .product-image-container,
.page-products .product-image-wrapper {
    background-color: #ffffff !important; /* Changed to White */
    border: 1px solid #e5e5e5 !important;  /* Retained light grey border */
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.products-grid .product-item-photo img,
.products-grid .product-image-photo {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* ==========================================================================
   2. PRODUCT DETAIL PAGE (Inside Single Product Main Image View)
   ========================================================================== */
.product.media .gallery-placeholder,
.product.media .fotorama__stage__frame,
.product.media .fotorama__nav__frame--thumb {
    background-color: #ffffff !important; /* Changed to White */
    border: 1px solid #e5e5e5 !important;  /* Retained light grey border */
    padding: 2rem !important;
    box-sizing: border-box !important;
}

.product.media .fotorama__img {
    padding: 1rem !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE - SINGLE GREY BOX GALLERY LAYOUT (FIXED)
   ========================================================================== */

/* 1. Outer Box (Main Container with outer light grey border) */
#gallery-main {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    padding: 24px !important; /* Space between outer box and inner image */
    box-sizing: border-box !important;
}

/* 2. Inner Box - REMOVED BORDERS TO FIX DOUBLE LINE ISSUE */
#gallery-main .absolute.inset-0,
#gallery-main template + div,
#gallery-main div[x-data*="zoom"] {
    border: none !important; /* Removed the conflicting inner border */
    background-color: transparent !important;
    box-sizing: border-box !important;
}

/* 3. Image Styling inside the Inner Box */
#gallery-main img {
    padding: 0 !important; /* Let the outer box handle the padding */
    box-sizing: border-box !important;
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* 4. Ensure navigation arrows sit nicely outside/over the inner box */
#gallery-main button[aria-label="Previous image"],
#gallery-main button[aria-label="Next image"] {
    z-index: 40 !important;
}