/**
 * 🖼️ SMTBOX Product Thumbnail & Media Fallback Normalizer
 * File: css/components/product-thumbnail-fallback.css
 * Work Order: WO-20260904-02-PRODUCT-THUMBNAIL-MEDIA-FALLBACK
 * Proof Marker: Stan: verified md, non-speculative (已讀 md、非臆測)
 * 
 * Enforces clean white/light branded styling across all product card images and placeholders.
 * Strictly eliminates dark inverted boxes, maintains 4:3 / 1:1 aspect ratio containment,
 * and guarantees zero Cumulative Layout Shift (CLS = 0).
 */

/* ==========================================================================
   1. Clean Light Background & Anti-Inversion Normalization
   ========================================================================== */

/* Force all product card image containers to pure light background */
.product-small .box-image,
.product-small .box-image-inner,
.product-section .product-small.box .box-image,
.related .product-small.box .box-image,
.related-products-wrapper .product-small.box .box-image,
.has-shadow .box-image,
.category-page-row .box-image {
    background-color: var(--smt-color-white, #ffffff);
    background: #ffffff;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

/* Eliminate dark watermarks and filter inversions on all fallback images */
img.catalog-placeholder,
img.woocommerce-placeholder,
img.sre-fallback-thumbnail,
img.smtbox-fallback-thumbnail,
img.sre-fallback-single,
img.smtbox-fallback-single,
img.sre-fallback-placeholder,
img.smtbox-fallback-placeholder,
img.smtbox-image-fallback-active,
img.smtbox-hardware-preview-card,
img[src*="placeholder.svg"],
img[src*="missing.jpg"],
img[src*="6300985313"] {
    background-color: var(--smt-color-white, #ffffff);
    background: #ffffff;
    filter: none;
    -webkit-filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    border-radius: 4px;
    box-shadow: none;
}

/* ==========================================================================
   2. Geometry Lock & Zero Cumulative Layout Shift (CLS = 0)
   ========================================================================== */

/* 4:3 Aspect ratio containment for catalog loops */
.product-small .box-image img,
.product-section .product-small.box .box-image img,
.related .product-small.box .box-image img,
.related-products-wrapper .product-small.box .box-image img,
.category-page-row .box-image img,
img.attachment-woocommerce_thumbnail,
img.attachment-catalog_thumbnail {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    display: block;
    background-color: #ffffff;
}

/* 4:3 Aspect ratio for single product main hero image & placeholders */
:is(.single-product, .catalog-single-product) .product-gallery :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder, .catalog-product-gallery__image, .catalog-product-gallery__image--placeholder) {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--smt-color-white, #ffffff);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

:is(.single-product, .catalog-single-product) .product-gallery :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder, .catalog-product-gallery__image, .catalog-product-gallery__image--placeholder) img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
}

/* 1:1 Aspect ratio for gallery thumbnail strip */
.single-product .product-thumbnails :is(.col, a, img) {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ==========================================================================
   3. Specific Hardware Accessory Card Styling (Hitachi 6300985313)
   ========================================================================== */

.smtbox-hardware-preview-card {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #ffffff;
    border-radius: 4px;
    transition: transform 0.2s ease-in-out;
}

.product-small:hover .smtbox-hardware-preview-card {
    transform: scale(1.02);
}

/* Safe image lazy-loading transition */
img[data-src]:not(.lazy-loaded) {
    opacity: 0.85;
}

img.lazy-loaded {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}