﻿.products-card-section {
    background-color: lightgrey;
    padding: 40px 0;
}

.product-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
    background: #fff;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    border-color: rgba(0,91,150,.18);
}

.product-media {
    position: relative;
    height: 230px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #e9eef5;
}

.object-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.product-card:hover .object-cover {
    transform: scale(1.04);
}

.product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.22));
    opacity: 0;
    transition: opacity .25s ease;
}

.product-card:hover .product-media::after {
    opacity: 1;
}

.product-chip {
    position: absolute;
    top: .65rem;
    left: .65rem;
    background: rgba(255,255,255,.95);
    color: #005B96;
    border: 1px solid rgba(0,91,150,.18);
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: 999px;
    backdrop-filter: saturate(140%) blur(2px);
}

.card-body {
    padding: 1rem 1.1rem 1.2rem;
}

.card-title {
    color: #0b1220;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0;
}

a.text-decoration-none .card-title {
    color: #0b1220;
}

a.text-decoration-none:hover .card-title {
    color: #005B96;
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .object-cover,
    .product-media::after {
        transition: none !important;
    }
}
