/* Product Card Styles - Modernized for Tailwind Compatibility */

/* 
   We have moved to utility classes (aspect-square, absolute, etc.) in the HTML 
   to handle layout and sizing. This CSS file now mainly handles hover effects 
   that are more complex or specific.
*/

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 
   padding-top: 100% was removed because we now use 'aspect-square' in HTML.
   This prevents double-spacing or layout breakage.
*/
.product-image-container {
    overflow: hidden;
    position: relative;
}

/*
   If product-image class is added back, ensure it doesn't conflict.
   But current HTML uses w-full h-full object-contain directly.
*/

.action-buttons {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.product-card:hover .action-buttons {
    transform: translateY(0);
}