/* Custom Redesign for Product Cards */
.work-item a {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    background: #fff !important;
    transition: all .3s var(--ease-out-short) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.work-item a:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

.work-item .work-intro {
    padding: 20px 25px 25px !important;
    text-align: left !important;
}

.work-item a:hover .work-intro {
    transform: none !important;
}

/* Ensure images cover the area correctly with fixed aspect ratio */
.work-item .work-img {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    position: relative !important;
    padding-top: 75% !important; /* 4:3 Aspect Ratio */
    overflow: hidden !important;
    /* background: #f9f9f9 !important; */
}

.work-item .work-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Use contain to see full product, or cover for filled look */
    padding: 15px !important;
}

/* Equal Height Product Cards */
.works-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -15px !important;
}

.works-grid .work-item {
    display: flex; /* No !important — allows Isotope's display:none to override */
    flex-direction: column !important;
    width: 33.333% !important; /* For 3 columns */
    padding: 15px !important;
    float: none !important; /* Remove float if any */
}

/* Allow Isotope to hide items by NOT fighting its inline display:none */
.works-grid .work-item[style*="display: none"] {
    display: none !important;
}
.works-grid .work-item.isotope-hidden {
    display: none !important;
}

.works-grid .work-item a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
}

.work-item .work-intro {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.work-item .work-descr {
    margin-top: auto !important; /* Optional: push description or metadata to bottom */
}