/* ============================================================
   product-list.css — Product listing (sidebar + card grid)
   ============================================================ */
#c-hero-video{
        position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-listing {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.c-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    min-width: 0;
}

/* Keep every card in a row equal-height and vertically consistent. */
.c-product-grid .c-card {
    display: flex;
    flex-direction: column;
}

.c-product-grid .c-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.c-product-grid .c-card__text {
    flex: 1;
}

.c-product-grid .c-card__body .btn {
    /* margin-top: 1rem; */
    align-self: flex-start;
    font-size: 0.9rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
    .c-listing {
        grid-template-columns: 15rem 1fr;
    }

    .c-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .c-listing {
        grid-template-columns: 1fr;
    }

    .c-product-grid {
        grid-template-columns: 1fr;
    }
}