/**
 * Kod Pendule — page-specific storefront styles
 * Design tokens: tokens.css · foundation.css · components.css
 */

.product-card__img,
.category-card__img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-card__img--placeholder {
    min-height: 12rem;
    background: var(--shop-color-surface-subtle);
    color: var(--shop-color-text-quiet);
}

/* Homepage hero/promos: see home.css (Phase 3) */

/* Product detail gallery: see product.css (Phase 5) */

.product-description {
    max-width: 42rem;
    line-height: var(--shop-line-height-relaxed);
}

.order-status-progress .list-group-item {
    border-color: var(--shop-color-border-subtle);
    color: var(--shop-color-text-muted);
    background: var(--shop-color-surface-subtle);
    border-radius: var(--shop-radius-sm);
}

.order-status-progress .list-group-item.active {
    color: var(--shop-color-primary-active);
    background: var(--shop-color-primary-soft);
    font-weight: var(--shop-font-weight-semibold);
    border-color: var(--shop-color-primary-muted);
}