@charset "UTF-8";
/* CSS Document */

/* --- Grid Container and Responsiveness --- */
.wg-product-type-list-grid {
    display: grid;
    /* Mobile: 1 per row */
    grid-template-columns: 1fr;
    gap: 20px; /* Space between grid items */
}

/* Tablet: 2 per row */
@media (min-width: 768px) {
    .wg-product-type-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 per row */
@media (min-width: 1024px) {
    .wg-product-type-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Individual Grid Item Styling --- */
.wg-product-type-list-item {
    border: 1px solid var(--wg-medium-gray); /* 1px solid border */
    border-radius: 10px; /* 10px border radius */
    padding: 15px; /* Internal padding for content */
    text-align: center;
}

/* --- Image and Hover Effects --- */
.wg-product-type-list-image-link {
    display: block; /* Makes the link wrap the div */
    overflow: hidden; /* Important for border-radius and hover effect */
    border-radius: 10px; /* 10px border radius for the image area */
    line-height: 0; /* Remove potential extra space under the image */
    position: relative; /* Context for the absolute overlay */
}

.wg-product-type-image-wrapper {
    position: relative; /* Context for the image scaling and count overlay */
    overflow: hidden; /* Ensures the scaled image doesn't break the container */
    border-radius: 10px;
}

.wg-product-type-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Photo border radius */
    transform: scale(1); /* Initial scale state */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover */
}

/* Hover effect: Enlarge to 104% */
.wg-product-type-list-image-link:hover .wg-product-type-image {
    transform: scale(1.04);
}


/* --- Product Count Overlay Styling (FINAL ROBUST FIX) --- */
/* Increased specificity to ensure this padding overrides theme/plugin styles */
.wg-product-type-image-wrapper .wg-product-type-count-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--wg-gold); /* Gold background color */
    color: #000; /* Text color for contrast */
    
    /* Explicitly setting padding with !important and HIGH SPECIFICITY */
    /* Padding: 8px top, 15px right, 8px bottom, 15px left */
    padding: 8px 15px 8px 15px !important;
    
    font-size: 0.85em;
    font-weight: normal; 
    border-top-left-radius: 10px; 
    z-index: 10;

    /* --- ADDED FOR PADDING FIX --- */
    /* Ensure content box is well-behaved and centered vertically within the padding */
    display: flex;
    align-items: center; /* Vertically centers the text */
    line-height: 1; /* Prevents large default line height from affecting vertical space */
}

/* --- Title Styling (Updated for H3) --- */
/* The class wrapper remains the same, but the styling is applied to the new tag */
h3.wg-product-type-list-title {
    margin: 15px 0 0 0; /* Space above title */
    font-size: 1.2em;
    font-weight: 600;
}

h3.wg-product-type-list-title a {
    /* Retains default text-decoration (underline) */
    color: inherit; /* Inherit color from the parent */
}