/* Cards */
.category-card,
.product-card,
.service-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card:hover,
.service-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

/* NEW: Style for the anchor wrapper around product card */
.product-card-link {
    text-decoration: none; /* Remove underline from the anchor */
    color: inherit;
    display: block; /* Make it take up the grid cell space */
    height: 100%; /* Important for grid alignment */
}

.product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary-green);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
}

.product-badge.new {
    background: var(--secondary-green);
}

/* Highlight special product cards (Fixato & Microtol Plus) to stand out on listing */
.product-card[data-product="fixato"],
.product-card[data-product="microtol-plus"] {
    border: 2px solid rgba(123,200,127,0.14);
    box-shadow: 0 18px 48px rgba(45,122,62,0.18);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.2,0.9,0.2,1), box-shadow 0.45s ease, border-color 0.3s ease;
}

.product-card[data-product="fixato"] .product-image-wrapper,
.product-card[data-product="microtol-plus"] .product-image-wrapper {
    height: 320px; /* larger image area for emphasis */
}

.product-card[data-product="fixato"]:hover,
.product-card[data-product="microtol-plus"]:hover {
    transform: translateY(-14px) scale(1.04);
    box-shadow: 0 30px 80px rgba(45,122,62,0.22);
    border-color: rgba(45,122,62,0.22);
}

.product-card[data-product="fixato"] .product-badge,
.product-card[data-product="microtol-plus"] .product-badge {
    right: auto;
    left: 16px;
    top: 18px;
    background: linear-gradient(90deg, var(--secondary-green), var(--accent-green));
    box-shadow: 0 10px 30px rgba(45,122,62,0.18);
}