/**
 * Professional Product Card Styling
 * 
 * Enhances WooCommerce product cards on homepage and shop page
 * IMPORTANT: Does NOT modify any button styles or button HTML
 * 
 * Targets:
 * - Homepage product grid
 * - Shop page (archive) product grid
 */

/* ================================================================
   PRODUCT CARD CONTAINER
   Professional card styling with subtle shadows and borders
   ================================================================ */

.woocommerce .products article,
.woocommerce-page .products article,
article.bg-white.rounded-xl {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card Hover Effect - Subtle Lift */
.woocommerce .products article:hover,
.woocommerce-page .products article:hover,
article.bg-white.rounded-xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.12);
    border-color: rgba(15, 23, 42, 0.12);
}

/* ================================================================
   PRODUCT IMAGE AREA
   Fixed height container with light background and centered image
   ================================================================ */

/* Image Container - Fixed Height with Clean Background */
.woocommerce .products article a[href*="product"] > div:first-child,
.woocommerce-page .products article a[href*="product"] > div:first-child,
article.bg-white.rounded-xl > a.block.relative.bg-white,
.woocommerce .products article .relative.bg-white,
.woocommerce-page .products article .relative.bg-white,
article.bg-white.rounded-xl .relative.bg-white {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    padding: 24px !important;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mobile: Smaller Image Area */
@media (max-width: 768px) {
    .woocommerce .products article a[href*="product"] > div:first-child,
    .woocommerce-page .products article a[href*="product"] > div:first-child,
    article.bg-white.rounded-xl > a.block.relative.bg-white {
        min-height: 180px;
        padding: 20px !important;
    }
}

/* Image Wrapper - Clean, No Borders */
.woocommerce .products article .aspect-square,
.woocommerce-page .products article .aspect-square,
article.bg-white.rounded-xl .aspect-square {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Product Images - Proper Sizing and Fit
 * IMPORTANT: width/height must be 100% (not auto) so images fill their
 * aspect-square container. object-fit:contain prevents stretching.
 * Using 'auto' caused images to render at natural size, making them appear
 * smaller/blurrier on the homepage 4-col grid where containers are narrow.
 * Optimole's lazy-loader also detects rendered element size, so 'auto'
 * can cause it to serve lower-resolution versions.
 *
 * Applies to: Homepage grid, /shop archive, Related Products, Category pages
 */
.woocommerce .products article img,
.woocommerce-page .products article img,
article.bg-white.rounded-xl img,
.woocommerce .products li.product img,
.woocommerce-page .products li.product img,
.related.products li.product img,
section.related.products li.product img {
    object-fit: contain !important;
    max-width: 100%;
    max-height: 100%;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* CRITICAL: Remove all borders/outlines/shadows from images */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Remove borders from attachment images (WordPress default classes) */
.woocommerce .products article .attachment-woocommerce_thumbnail,
.woocommerce-page .products article .attachment-woocommerce_thumbnail,
.woocommerce .products article .wp-post-image,
.woocommerce-page .products article .wp-post-image,
article.bg-white.rounded-xl .attachment-woocommerce_thumbnail,
article.bg-white.rounded-xl .wp-post-image {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Remove borders from placeholder images */
.woocommerce .products article .woocommerce-placeholder,
.woocommerce-page .products article .woocommerce-placeholder,
.woocommerce .products article img[src*="placeholder"],
.woocommerce-page .products article img[src*="placeholder"],
.woocommerce .products article img[src*="woocommerce-placeholder"],
.woocommerce-page .products article img[src*="woocommerce-placeholder"],
article.bg-white.rounded-xl .woocommerce-placeholder,
article.bg-white.rounded-xl img[src*="placeholder"] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Remove any figure/picture wrapper borders */
.woocommerce .products article figure,
.woocommerce-page .products article figure,
.woocommerce .products article picture,
.woocommerce-page .products article picture,
article.bg-white.rounded-xl figure,
article.bg-white.rounded-xl picture {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
}

/* Image Hover Zoom - Only on Image, NOT on Buttons */
.woocommerce .products article:hover img,
.woocommerce-page .products article:hover img,
article.bg-white.rounded-xl:hover img {
    transform: scale(1.05);
}

/* ================================================================
   PRODUCT INFO SECTION
   Better spacing and typography
   ================================================================ */

/* Product Info Container */
.woocommerce .products article .p-4,
.woocommerce-page .products article .p-4,
article.bg-white.rounded-xl .p-4 {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
}

/* ================================================================
   TYPOGRAPHY IMPROVEMENTS (Non-Button Elements)
   ================================================================ */

/* Product Title - Better Readability */
.woocommerce .products article h3,
.woocommerce-page .products article h3,
article.bg-white.rounded-xl h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1024px) {
    .woocommerce .products article h3,
    .woocommerce-page .products article h3,
    article.bg-white.rounded-xl h3 {
        font-size: 16px !important;
    }
}

/* Product Title Link Hover */
.woocommerce .products article h3 a:hover,
.woocommerce-page .products article h3 a:hover,
article.bg-white.rounded-xl h3 a:hover {
    color: #2563eb !important;
    text-decoration: none;
}

/* Price - More Emphasis */
.woocommerce .products article .text-lg.font-bold,
.woocommerce-page .products article .text-lg.font-bold,
article.bg-white.rounded-xl .text-lg.font-bold {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    margin-bottom: 12px !important;
}

@media (min-width: 1024px) {
    .woocommerce .products article .text-lg.font-bold,
    .woocommerce-page .products article .text-lg.font-bold,
    article.bg-white.rounded-xl .text-lg.font-bold {
        font-size: 22px !important;
    }
}

/* Sale Price Styling */
.woocommerce .products article del,
.woocommerce-page .products article del,
article.bg-white.rounded-xl del {
    opacity: 0.6;
    font-size: 14px !important;
    margin-right: 8px;
}

/* ================================================================
   SALE BADGE - Enhanced Styling
   ================================================================ */

.woocommerce .products article .bg-red-500,
.woocommerce-page .products article .bg-red-500,
article.bg-white.rounded-xl .bg-red-500 {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    font-size: 11px !important;
    letter-spacing: 0.05em;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .woocommerce .products article a[href*="product"] > div:first-child,
    .woocommerce-page .products article a[href*="product"] > div:first-child,
    article.bg-white.rounded-xl > a.block.relative.bg-white {
        min-height: 200px;
    }
}

/* ================================================================
   GRID LAYOUT IMPROVEMENTS
   ================================================================ */

/* Ensure consistent card heights in grid */
.woocommerce .products,
.woocommerce-page .products,
.grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4,
.grid.grid-cols-2.lg\\:grid-cols-3 {
    display: grid;
    align-items: stretch;
}

/* ================================================================
   IMPORTANT: BUTTON EXCLUSIONS
   These selectors ensure NO button styles are affected
   ================================================================ */

/* Explicitly preserve all button styling */
.woocommerce .products article a.bg-black,
.woocommerce .products article a.bg-lab-blue-600,
.woocommerce .products article .bg-emerald-600,
.woocommerce .products article button,
.woocommerce .products article .add_to_cart_button,
.woocommerce-page .products article a.bg-black,
.woocommerce-page .products article a.bg-lab-blue-600,
.woocommerce-page .products article .bg-emerald-600,
.woocommerce-page .products article button,
.woocommerce-page .products article .add_to_cart_button,
article.bg-white.rounded-xl a.bg-black,
article.bg-white.rounded-xl a.bg-lab-blue-600,
article.bg-white.rounded-xl .bg-emerald-600,
article.bg-white.rounded-xl button,
article.bg-white.rounded-xl .add_to_cart_button {
    /* DO NOT add any styles here - buttons are managed by inline styles */
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

/* Focus States for Keyboard Navigation */
.woocommerce .products article:focus-within,
.woocommerce-page .products article:focus-within,
article.bg-white.rounded-xl:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.woocommerce .products article a:focus,
.woocommerce-page .products article a:focus,
article.bg-white.rounded-xl a:focus {
    outline: none;
}

/* ================================================================
   LOADING STATE (Optional Enhancement)
   ================================================================ */

.woocommerce .products article.loading,
.woocommerce-page .products article.loading,
article.bg-white.rounded-xl.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ================================================================
   RELATED PRODUCTS - Single Product Page
   Styles for WooCommerce default <li class="product"> loop used in
   Related Products and cross-sell sections.
   ================================================================ */

/* Related Products Grid Layout */
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* Related Product Card Container */
.related.products li.product {
    background: #ffffff;
    border: none !important;
    outline: none !important;
    border-radius: 16px;
    box-shadow: none !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    list-style: none !important;
}

.related.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08) !important;
}

/* Related Product Image Container */
.related.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related.products li.product a.woocommerce-LoopProduct-link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    padding: 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .related.products li.product a.woocommerce-LoopProduct-link img {
        padding: 16px;
    }
}

.related.products li.product:hover a.woocommerce-LoopProduct-link img {
    transform: scale(1.05);
}

/* Related Product Title */
.related.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    padding: 0 16px !important;
    margin: 0 0 8px 0 !important;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1024px) {
    .related.products li.product .woocommerce-loop-product__title {
        font-size: 15px !important;
    }
}

/* Related Product Price */
.related.products li.product .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    padding: 0 16px 12px !important;
    display: block;
}

/* Related Product Add to Cart Button */
.related.products li.product a.button.add_to_cart_button {
    display: block;
    text-align: center;
    margin: 0 16px 16px !important;
    padding: 10px 16px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.related.products li.product a.button.add_to_cart_button:hover {
    background: #000000 !important;
}

/* Hide default WooCommerce section heading (we use custom one) */
.related.products > h2 {
    display: none !important;
}

/* ================================================================
   SINGLE PRODUCT PAGE - Main Image
   Clean display without visible box/border/background
   ================================================================ */

.sp-main-image {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.sp-main-image .sp-main-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ================================================================
   END OF PRODUCT CARD STYLING
   ================================================================ */