/* FORCE SQUARE IMAGES + FADE HOVER ANIMATION */

/* Square containers */
.product-image-container {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
}

/* All images - square, positioned absolutely */
.product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
}

/* Main image - visible, fades out */
.product-image.main-image {
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
}

/* Alt image - hidden, fades in */
.product-image.alt-image {
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 2 !important;
}

/* HOVER - on link OR card */
.product-link:hover .product-image.main-image,
.product-card:hover .product-image.main-image,
a:hover .product-image.main-image {
    opacity: 0 !important;
}

.product-link:hover .product-image.alt-image,
.product-card:hover .product-image.alt-image,
a:hover .product-image.alt-image {
    opacity: 1 !important;
}

/* No rounded corners */
.product-card {
    border-radius: 0 !important;
}

/* VINYL ACCESSORIES - object-fit contain to show full products without cropping */
body[data-collection-name="Classic Collection"] .product-image,
body[data-collection-name="Builder's Choice"] .product-image,
body[data-collection-name="LEGENDS"] .product-image,
body[data-collection-name="Longboards"] .product-image {
    object-fit: contain !important;
    background: white !important;
}

/* VINYL ACCESSORIES - Keep main image visible on hover (single image that changes src, not dual images) */
body[data-collection-name="Classic Collection"] .product-card:hover .product-image.main-image,
body[data-collection-name="Builder's Choice"] .product-card:hover .product-image.main-image,
body[data-collection-name="LEGENDS"] .product-card:hover .product-image.main-image,
body[data-collection-name="Longboards"] .product-card:hover .product-image.main-image {
    opacity: 1 !important;
}