.product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border); /* filet chaud Direction B */
    border-radius: var(--border-radius);
    overflow: hidden;
}

.product-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
}

.product-card__media {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%; /* 3:4 ratio box - guarantees uniform card height regardless of source image ratio */
    background-color: var(--color-bg-light);
    overflow: hidden;
}

/* Scoped to .product-card__media on purpose: on WooCommerce pages (cart, shop,
   category) the body has a `woocommerce-page` class, and woocommerce-layout.css
   sets `.woocommerce-page img { height: auto }` (specificity 0,1,1). That beats a
   bare `.product-card__image` (0,1,0) and breaks the fixed-ratio cover fill, so
   the product images come out ragged (different heights). This selector (0,2,0)
   wins, keeping every card image the same height wherever the card is used. */
.product-card__media .product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.product-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* placeholder chaud Direction B en attendant les photos produit (phase 7) */
    background: linear-gradient(135deg, #d8c7bb, var(--color-bg-alt));
}

.product-card__placeholder svg {
    width: 25%;
    height: 25%;
}

.product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-heading-medium);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-pill);
    text-transform: uppercase;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.product-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin: 0;
    /* Reserve exactly two lines so the price and the CTA button line up across
       every card in a row, even when one title wraps to two lines and another
       fits on one. Longer titles are clamped to two lines. */
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__price {
    font-family: var(--font-body-medium);
    font-size: var(--text-base);
    color: var(--color-primary);
}

.product-card__price del {
    color: var(--color-text-muted);
    margin-right: var(--space-2);
}

.product-card__price ins {
    text-decoration: none;
}

.product-card__cart {
    margin: 0 var(--space-4) var(--space-4);
    text-align: center;
}