/* product-card — @tokens: --card-bg, --card-border, --card-radius, --card-shadow, --card-hover-shadow */
/* ─── Product card ───────────────────────────────────────────────────────────
   Self-contained card for CUSTOM commerce grids (the [wc_cards] path). It
   DELIBERATELY reads the same shared card-surface tokens the native WC product
   loop uses (assets/css/woocommerce.css → .woocommerce ul.products li.product,
   and components/card/card.css → .hzo-card): --card-bg, --card-border,
   --card-radius, --card-shadow, --card-hover-shadow, with the exact inline
   fallbacks those call-sites use. This is intentional cross-surface consistency
   — a custom card must read byte-identically to a native loop card and respond
   to the same archetype dials — NOT token-borrowing drift.
   Composes foreign primitives (.hzo-price, .hzo-stock-status, .hzo-badge--sale,
   .hzo-wishlist, .hzo-btn) inside its slots but styles ONLY its own
   .hzo-product-card__* structure — never those foreign classes. */
.hzo-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--card-bg, #fff);
    border: var(--border-1) solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    box-shadow: var(--card-shadow, var(--shadow-sm));
    position: relative;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.hzo-product-card:hover {
    box-shadow: var(--card-hover-shadow, var(--shadow-lg));
    transform: translateY(-4px);
}

/* Image slot */
.hzo-product-card__media {
    position: relative;
    border-radius: var(--radius-control);
    overflow: hidden;
    margin: 0;
}
.hzo-product-card__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Sale-badge slot (holds .hzo-badge--sale) */
.hzo-product-card__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
}

/* Wishlist slot (holds .hzo-wishlist) */
.hzo-product-card__wishlist {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
}

.hzo-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1 1 auto;
}

.hzo-product-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-300);
    font-weight: var(--fw-700);
    color: var(--text-heading);
    line-height: var(--lh-tight);
    margin: 0;
}
.hzo-product-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: none; /* a title link is a heading — never let a client content-link highlight ride onto it */
}
.hzo-product-card__title a:hover {
    text-decoration: underline;
}

/* Price + stock row; margin-top:auto pins it to the bottom above actions.
   Holds .hzo-price + .hzo-stock-status. */
.hzo-product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: auto;
}

/* Add-to-cart row (holds the .hzo-btn) */
.hzo-product-card__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Compact density */
.hzo-product-card--compact {
    padding: var(--space-sm);
    gap: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
    .hzo-product-card {
        transition: none;
    }
    .hzo-product-card:hover {
        transform: none;
    }
}