/* ==========================================================================
   Cards — generic surface used as the base for product cards (shop grid,
   related products, wishlist) and content cards (blog teaser, account
   summary tiles). Kept intentionally minimal here; page CSS can extend
   with page-specific classes (e.g. .product-card adds price/badge markup)
   without redefining the base look.
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    transform: translateY(-2px);
}

.card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--border);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.card:hover .card__media img {
    transform: scale(1.04);
}

.card__badge {
    position: absolute;
    top: var(--space-3);
    inset-inline-start: var(--space-3);
    background: var(--accent);
    color: #0A0A0A;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    z-index: 1;
}

.card__actions {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    opacity: 0;
    transform: translateX(0);
    transition: opacity var(--transition-fast);
}

.card:hover .card__actions,
.card:focus-within .card__actions {
    opacity: 1;
}

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

.card__eyebrow {
    font-size: var(--text-xs);
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card__title {
    font-size: var(--text-md);
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.card__title a {
    text-decoration: none;
    color: inherit;
}

.card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-weight: 700;
}

.card__price .price-current {
    color: var(--text);
    font-size: var(--text-md);
}

.card__price .price-original {
    color: var(--secondary);
    font-size: var(--text-sm);
    text-decoration: line-through;
    font-weight: 400;
}

.card__footer {
    margin-top: auto;
    padding: 0 var(--space-4) var(--space-4);
}

/* Skeleton loading state for async-loaded product grids */
.card.is-loading .card__media,
.card.is-loading .card__title,
.card.is-loading .card__price {
    background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--bg)) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: card-shimmer 1.4s ease-in-out infinite;
    color: transparent;
    border-radius: var(--radius-sm);
}

@keyframes card-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}