/**
 * Product Cards CSS - Optimized for WooCommerce FSE themes
 * Features: Consistent heights, responsive spacing, hover effects, enquiry buttons
 * @package BlazeCommerce Child Theme
 * @version 2.0.0
 */

/* ==========================================================================
   PRODUCT CARD CONTAINER & RESPONSIVE SYSTEM
   ========================================================================== */

/* Main product card container with optimized responsive system */
.products-block-post-template .wp-block-group {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--wp--preset--color--safelife-background);
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    transition: all 0.3s ease;
    /* Optimized heights with proper enquiry button space */
    height: 537px; /* Desktop: 307px image + 260px content (increased) */
    min-height: 537px;
}

/* Responsive card heights - fluid scaling */
@media (max-width: 1024px) {
    .products-block-post-template .wp-block-group {
        height: 515px; /* Tablet: 275px image + 240px content (increased) */
        min-height: 515px;
    }
}

@media (max-width: 768px) {
    .products-block-post-template .wp-block-group {
        height: 460px; /* Mobile: 240px image + 220px content (increased) */
        min-height: 460px;
    }
}

@media (max-width: 480px) {
    .products-block-post-template .wp-block-group {
        height: 400px; /* Small mobile: 200px image + 200px content (increased) */
        min-height: 400px;
    }
}

/* ==========================================================================
   PRODUCT IMAGE SIZING & HOVER EFFECTS
   ========================================================================== */

/* Product image container - consistent sizing */
.products-block-post-template .wp-block-woocommerce-product-image {
    flex: 0 0 auto;
    position: relative;
    height: 307px; /* Desktop image height */
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background-color: var(--wp--preset--color--safelife-background);
}

/* Product image styling with smooth transitions */
.products-block-post-template .wp-block-woocommerce-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effects - scale for single images, swap for gallery images */
.products-block-post-template .wp-block-group:hover .wp-block-woocommerce-product-image.single-image-hover img,
.products-block-post-template .wp-block-group:hover .wp-block-woocommerce-product-image img {
    transform: scale(1.05);
}

/* Disable scale effect when image swapping is active */
.products-block-post-template .wp-block-woocommerce-product-image.has-gallery-hover img {
    transform: none !important;
}

/* Sale badge positioning and styling */
.products-block-post-template .wc-block-components-product-sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: var(--wp--preset--color--safelife-primary) !important;
    color: var(--wp--preset--color--safelife-background) !important;
    border-radius: 4px !important;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Responsive image sizing */
@media (max-width: 1024px) {
    .products-block-post-template .wp-block-woocommerce-product-image {
        height: 264px; /* Tablet image height - reduced */
    }
}

@media (max-width: 768px) {
    .products-block-post-template .wp-block-woocommerce-product-image {
        height: 194px; /* Mobile image height - reduced */
    }
}

@media (max-width: 480px) {
    .products-block-post-template .wp-block-woocommerce-product-image {
        height: 176px; /* Small mobile image height */
    }
}

/* ==========================================================================
   CONTENT AREA & SPACING OPTIMIZATION - ALIGNED LAYOUT
   ========================================================================== */

/* Content area with optimized spacing system and element alignment */
.products-block-post-template .wp-block-group > .wp-block-group:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Changed from flex-start to space-between */
    padding: 12px var(--wp--preset--spacing--xs) 12px;
    height: 260px; /* Desktop content height (increased for better button spacing) */
    min-height: 260px;
    gap: 8px; /* Optimal spacing between elements */
}

/* Responsive grid layout adjustments */
@media (max-width: 1024px) {
    .products-block-post-template .wp-block-group > .wp-block-group:last-child {
        grid-template-rows:
            60px      /* Title area - slightly smaller */
            18px      /* Review area */
            auto      /* Price area */
            1fr       /* Spacer */
            45px      /* Add to cart button */
            45px;     /* Enquiry button */
        grid-gap: 6px;
        padding: 10px var(--wp--preset--spacing--xs) 10px;
    }

    .products-block-post-template .wp-block-post-title {
        height: 65px;
        font-size: 18px !important;
    }

    .products-block-post-template .woocommerce-product-rating,
    .products-block-post-template .star-rating,
    .products-block-post-template .wp-block-woocommerce-product-rating,
    .products-block-post-template .jdgm-widget,
    .products-block-post-template .jdgm-preview-badge {
        height: 18px;
    }
}

@media (max-width: 768px) {
    .products-block-post-template .wp-block-group > .wp-block-group:last-child {
        grid-template-rows:
            55px      /* Title area - smaller */
            16px      /* Review area */
            auto      /* Price area */
            1fr       /* Spacer */
            40px     /* Add to cart button */
            40px;    /* Enquiry button - COMMENTED OUT */
        grid-gap: 5px;
        padding: 3px var(--wp--preset--spacing--xs) 12px; /* Reduced top padding, increased bottom */
    }

    .products-block-post-template .wp-block-post-title {
        height: 65px;
        font-size: 18px !important;
    }

    .products-block-post-template .woocommerce-product-rating,
    .products-block-post-template .star-rating,
    .products-block-post-template .wp-block-woocommerce-product-rating,
    .products-block-post-template .jdgm-widget,
    .products-block-post-template .jdgm-preview-badge {
        height: 16px;
    }
}

@media (max-width: 480px) {
    .products-block-post-template .wp-block-group > .wp-block-group:last-child {
        grid-template-rows:
            50px      /* Title area - smallest */
            14px      /* Review area */
            auto      /* Price area */
            1fr       /* Spacer */
            38px     /* Add to cart button */
            38px;     /* Enquiry button - COMMENTED OUT */
        grid-gap: 4px;
        padding: 2px var(--wp--preset--spacing--xs) 10px; /* Reduced top padding, increased bottom */
    }

    .products-block-post-template .wp-block-post-title {
        height: 65px;
        font-size: 18px !important;
    }

    .products-block-post-template .woocommerce-product-rating,
    .products-block-post-template .star-rating,
    .products-block-post-template .wp-block-woocommerce-product-rating,
    .products-block-post-template .jdgm-widget,
    .products-block-post-template .jdgm-preview-badge {
        height: 14px;
    }
}

/* ==========================================================================
   PRODUCT ELEMENTS STYLING - ALIGNED LAYOUT SYSTEM
   ========================================================================== */

/* Create structured layout areas for consistent alignment */
.products-block-post-template .wp-block-group > .wp-block-group:last-child {
    display: grid !important;
    grid-template-rows:
        60px      /* Title area - reduced height */
        18px      /* Review area - reduced height */
        auto      /* Price area - flexible */
        1fr       /* Spacer - takes remaining space */
        45px      /* Add to cart button - reduced height */
        45px;     /* Enquiry button */
    grid-gap: 5px;    /* Normal spacing */
    align-content: start;
    padding: 10px var(--wp--preset--spacing--xs) 15px; /* Normal bottom padding */
}

/* Product title - consistent positioning with fixed height */
.products-block-post-template .wp-block-post-title {
    grid-row: 1;
    margin: 0 !important;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 65px; /* Increased height for 18px font */
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Product price with grid positioning */
.products-block-post-template .wp-block-woocommerce-product-price {
    grid-row: 3;
    margin: 0;
    font-weight: 700;
    color: var(--wp--preset--color--safelife-primary);
    align-self: start;
}

/* Standardized product price classes for consistent font sizing */
.safelife-related-product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--wp--preset--color--safelife-primary);
}

.safelife-product-price {
    font-size: 30px;
    font-weight: 700;
    color: var(--wp--preset--color--safelife-primary);
}

/* Single product page main price styling */
.single-product .wp-block-woocommerce-product-price {
    font-size: 30px;
    font-weight: 800;
    color: var(--wp--preset--color--safelife-primary);
}

/* Single product page add to cart button styling */
.single-product .wp-block-woocommerce-add-to-cart-form .wp-block-button__link,
.single-product .wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button {
    width: 100%;
    text-transform: uppercase;
    background-color: var(--wp--preset--color--safelife-secondary);
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.single-product .wp-block-woocommerce-add-to-cart-form .wp-block-button__link:hover,
.single-product .wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button:hover {
    background-color: var(--wp--preset--color--safelife-primary);
}


/* ==========================================================================
   CUSTOM "YOU MAY ALSO LIKE" SECTION STYLING
   ========================================================================== */

/* Hide the default up-sells section completely */
.up-sells.upsells.products,
.single-product .up-sells.upsells.products {
    display: none;
}



/* 4-column layout for "You may also like" section (product-collection) */
.single-product .wp-block-woocommerce-product-collection {
    --wc-product-collection-columns: 4;
}

/* Grid template columns for "You may also like" to ensure 4 columns */
.single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive layout for "You may also like" section */
@media (max-width: 1200px) {
    .single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: 1fr;
    }
}

/* Product button - grid positioned for alignment */
.products-block-post-template .wp-block-woocommerce-product-button {
    grid-row: 5;
    margin: 0;
    width: 100%;
    align-self: end;
    display: block;
}

/* Button styling consistency - Force full width */
.products-block-post-template .wp-block-woocommerce-product-button .wp-block-button {
    width: 100%;
    margin: 0;
}

/* Add to Cart Button Link - Optimized styling with reduced specificity */
.products-block-post-template .wp-block-woocommerce-product-button .wp-block-button__link,
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button,
.products-block-post-template .wp-block-woocommerce-product-button button,
.products-block-post-template .wp-block-woocommerce-product-button a.button {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    background-color: var(--wp--preset--color--safelife-primary);
    color: white;
    border: none;
    transition: all 0.3s ease;
    margin: 0 0 5px 0;
    height: 45px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Add to Cart Button Hover Effect - ALL BUTTON TYPES */
.products-block-post-template .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button:hover,
.products-block-post-template .wp-block-woocommerce-product-button button:hover,
.products-block-post-template .wp-block-woocommerce-product-button a.button:hover {
    background-color: var(--wp--preset--color--safelife-secondary);
    transform: translateY(-1px);
}

/* Removed redundant CSS - handled by final override section */

/* ==========================================================================
   REVIEWS & RATINGS SYSTEM - GRID ALIGNED
   ========================================================================== */

/* Consistent review space - grid positioned for alignment */
.products-block-post-template .woocommerce-product-rating,
.products-block-post-template .star-rating,
.products-block-post-template .wp-block-woocommerce-product-rating,
.products-block-post-template .jdgm-widget,
.products-block-post-template .jdgm-preview-badge {
    grid-row: 2;
    margin: 0 !important;
    height: 18px; /* Reduced height for alignment */
    min-height: 18px;
    align-self: start;
}

/* Hide empty reviews but maintain space */
.products-block-post-template .jdgm-preview-badge[data-number-of-reviews="0"],
.products-block-post-template .jdgm-widget:empty,
.products-block-post-template .jdgm-prev-badge:empty {
    visibility: hidden;
    height: 18px;
}

/* Show reviews when they exist */
.products-block-post-template .jdgm-preview-badge[data-number-of-reviews]:not([data-number-of-reviews="0"]) {
    visibility: visible;
}

/* Judge.me review widget styling */
.products-block-post-template .jdgm-prev-badge {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: var(--wp--preset--font-size--link);
}

.products-block-post-template .jdgm-prev-badge__stars {
    display: flex;
    gap: 2px;
}

.products-block-post-template .jdgm-star {
    width: 14px;
    height: 14px;
    color: #ffa500;
}

/* ==========================================================================
   ENQUIRY BUTTON INTEGRATION
   ========================================================================== */

.products-block-post-template .pi-custom-button,
.products-block-post-template .add-to-enquiry,
.products-block-post-template .add-to-enquiry-loop,
.products-block-post-template button[data-action="pi_add_to_enquiry"],
.products-block-post-template .pi-custom-button a,
.products-block-post-template .add-to-enquiry a,
.products-block-post-template .add-to-enquiry-loop a {
    grid-row: 6;
    display: flex !important;
    width: 100%;
    text-align: center;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 6px;
    background-color: transparent !important;
    color: var(--wp--preset--color--safelife-primary) !important;
    border: 2px solid var(--wp--preset--color--safelife-primary) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 !important;
    box-sizing: border-box;
    align-self: end;
    height: 45px !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: none !important;
    font-family: var(--wp--preset--font-family--roboto) !important;
}

.products-block-post-template .pi-custom-button:hover,
.products-block-post-template .add-to-enquiry:hover,
.products-block-post-template .add-to-enquiry-loop:hover,
.products-block-post-template button[data-action="pi_add_to_enquiry"]:hover,
.products-block-post-template .pi-custom-button a:hover,
.products-block-post-template .add-to-enquiry a:hover,
.products-block-post-template .add-to-enquiry-loop a:hover {
    background-color: var(--wp--preset--color--safelife-primary) !important;
    color: white !important;
    transform: translateY(-1px);
}

.add-to-enquiry-loop:not(.products-block-post-template *),
.pi-custom-button:not(.products-block-post-template *) {
    display: none !important;
}


/* ==========================================================================
   STICKY HEADER Z-INDEX FIX - PREVENT FILTER OVERLAP
   ========================================================================== */

/* Ensure sticky header group has highest z-index */
.wp-block-group[style*="position"][style*="sticky"] {
    z-index: 999;
}

/* Target the specific sticky header container from your template */
.wp-block-group.has-safelife-background-background-color.has-background {
    z-index: 999;
}

/* Filter sidebar - keep z-index very low */
.wp-block-columns .wp-block-column[style*="flex-basis:25%"] {
    z-index: 1;
}

/* All filter elements should stay behind header */
.wp-block-woocommerce-product-filters,
.wc-block-product-filters,
.wp-block-woocommerce-product-filter-rating,
.wp-block-woocommerce-product-filter-attribute,
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filter-checkbox-list,
.wp-block-woocommerce-product-filter-price-slider {
    z-index: 1;
}

/* ==========================================================================
   ACCESSIBILITY & PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .products-block-post-template .wp-block-group,
    .products-block-post-template .wp-block-woocommerce-product-image img,
    .products-block-post-template .wp-block-woocommerce-product-button .wp-block-button__link
    /* .products-block-post-template .pi-custom-button */ {
        transition: none;
    }

    .products-block-post-template .wp-block-group:hover .wp-block-woocommerce-product-image img {
        transform: none;
    }
}

/* ==========================================================================
   PRODUCT CATEGORY FILTERS Z-INDEX
   ========================================================================== */

/* Filter column container - 25% width column */
.wp-block-columns .wp-block-column[style*="flex-basis:25%"] {
    position: relative;
    z-index: 10;
}

/* WooCommerce Product Filters block */
.wp-block-woocommerce-product-filters.wc-block-product-filters {
    position: relative;
    z-index: 15;
}

/* Filter group container */
.wp-block-group.w-3\/12.hidden.md\:block {
    position: relative;
    z-index: 12;
}

/* Individual filter sections */
.wp-block-woocommerce-product-filter-rating,
.wp-block-woocommerce-product-filter-attribute,
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-price {
    position: relative;
    z-index: 11;
}

/* Filter dropdowns and interactive elements */
.wp-block-woocommerce-product-filter-checkbox-list,
.wp-block-woocommerce-product-filter-price-slider {
    position: relative;
    z-index: 16;
}

/* ==========================================================================
   FINAL OVERRIDE - FORCE ADD TO CART BUTTONS FULL WIDTH
   ========================================================================== */

/* Ultimate override for Add to Cart button width - highest specificity */
.products-block-post-template .wp-block-woocommerce-product-button[class*="wp-block"] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.products-block-post-template .wp-block-woocommerce-product-button[class*="wp-block"] * {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   POST-CLICK ADD TO CART STATE - HIDE VIEW CART LINK
   ========================================================================== */

/* Hide the "View cart" link that appears after adding to cart since mini cart handles this */
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-cart-link,
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button-interstitial,
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button__interstitial,
.products-block-post-template .wp-block-woocommerce-product-button [class*="interstitial"],
.products-block-post-template .wp-block-woocommerce-product-button a[href*="cart"],
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button__link[href*="cart"] {
    display: none;
    visibility: hidden;
}

/* Keep the original "Add to Cart" button visible and maintain its styling */
.products-block-post-template .wp-block-woocommerce-product-button .wp-block-button__link:not([href*="cart"]),
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button:not([href*="cart"]),
.products-block-post-template .wp-block-woocommerce-product-button button:not([href*="cart"]),
.products-block-post-template .wp-block-woocommerce-product-button a.button:not([href*="cart"]) {
    display: flex;
    visibility: visible;
}

/* Force container to maintain structure when content changes */
.products-block-post-template .wp-block-woocommerce-product-button .wp-block-button,
.products-block-post-template .wp-block-woocommerce-product-button .wc-block-components-product-button {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Handle any nested containers that might appear */
.products-block-post-template .wp-block-woocommerce-product-button > div,
.products-block-post-template .wp-block-woocommerce-product-button > span {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure all child elements maintain full width */
.products-block-post-template .wp-block-woocommerce-product-button * {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
}