/* 
   FULL-BLEED IMAGE SYSTEM v9.0
   Edge-to-edge product images with object-fit: cover
   NO empty space, NO borders, NO "barrier of nothingness"
*/

/* ============================================
   GLOBAL RESET - Remove all padding/backgrounds
   ============================================ */
.product-image-container,
.product-card .product-image-container,
.gallery-main .product-image-container,
#mainImageContainer {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    /* NOTE: transform removed - flagship.css handles zoom */
}

/* ============================================
   PRODUCT GRID CARDS - Full Bleed
   ============================================ */
.product-card .product-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.product-card .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   PRODUCT DETAIL HERO - Full Bleed
   ============================================ */
.gallery-main .product-image-container,
#mainImageContainer {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-main .product-image-container img,
#mainImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   MOBILE OVERRIDES - Full Bleed
   ============================================ */
@media (max-width: 768px) {

    /* Grid Cards */
    .product-card .product-image-container {
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 8px;
    }

    .product-card .product-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Detail Hero */
    .gallery-main .product-image-container,
    #mainImageContainer {
        width: 100%;
        min-height: 50vh;
        aspect-ratio: 3 / 4;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0;
    }

    #mainImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* ============================================
   THUMBNAILS - Full Bleed in small containers
   ============================================ */
.thumb img,
.thumb .product-image-container {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    padding: 0;
    background: transparent;
}

.thumb .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   CART ITEMS - Full Bleed
   ============================================ */
.cart-item-image-wrapper .product-image-container {
    width: 80px;
    height: 80px;
    padding: 0;
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
}

.cart-item-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}