/*
 * Commerce data components (Phase 3A — docs/COMPONENT-LIBRARY.md): price,
 * discount/savings, rating, stock indicator, SKU, specification row.
 * Per docs/DESIGN-SYSTEM.md §7 "Price styling" and docs/PRODUCT-DATA-MODEL.md.
 */

/* --- Price block ---
   Structure: .bholats-price (wrapper) > .bholats-price__current +
   optional .bholats-price__was + optional .bholats-price__savings.
   Regular price is never rendered at the same size as the current price. */

.bholats-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.bholats-price__current {
	font-family: var(--font-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.bholats-price__was {
	font-size: var(--text-sm);
	/* --color-text-secondary, not --color-text-muted (3.9:1 fails WCAG AA at
	   this text size) — found via axe-core, Phase 3A, docs/COMPONENT-LIBRARY.md §14 */
	color: var(--color-text-secondary);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.bholats-price__savings {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-sale);
	flex-basis: 100%;
}

/* Size modifiers reuse the type-scale price tokens from base.css */
.bholats-price--lg .bholats-price__current { font-size: var(--text-price-lg); }
.bholats-price--card .bholats-price__current { font-size: var(--text-price-card); }
.bholats-price--sm .bholats-price__current { font-size: var(--text-price-sm); }

/* --- Rating ---
   Stars are decorative (aria-hidden); the numeric/text summary carries the
   accessible name. Per docs/DESIGN-SYSTEM.md's product-card spec, this whole
   component is omitted entirely when a product has zero reviews — that's a
   template-logic decision (template-parts/product/card.php), not a CSS one. */

.bholats-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.bholats-rating__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--color-warning);
}

.bholats-rating__stars svg { width: var(--icon-sm); height: var(--icon-sm); }
.bholats-rating__stars svg[data-empty="true"] { color: var(--color-border-strong); }

.bholats-rating__count {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

/* --- Stock indicator ---
   A coloured dot + text. Colour communicates status but text always carries
   the same meaning (never colour-only), per docs/QA-PLAN.md §6. */

.bholats-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.bholats-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.bholats-stock--in-stock { color: var(--color-success); }
.bholats-stock--in-stock .bholats-stock__dot { background: var(--color-success); }

.bholats-stock--low-stock { color: var(--color-warning); }
.bholats-stock--low-stock .bholats-stock__dot { background: var(--color-warning); }

/* --color-text-muted (3.9:1 on white) reads fine for icons/disabled controls
   but fails WCAG AA for real text at this size — use --color-text-secondary
   (6.4:1) for the out-of-stock label itself (found via axe-core, Phase 3A,
   docs/COMPONENT-LIBRARY.md §14). */
.bholats-stock--out-of-stock { color: var(--color-text-secondary); }
.bholats-stock--out-of-stock .bholats-stock__dot { background: var(--color-text-secondary); }

/* --- SKU --- */

.bholats-sku {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

.bholats-sku__value {
	font-family: var(--font-data);
	color: var(--color-text-primary);
}

/* --- Specification row / table ---
   Used both as a single row (product card spec chips reuse the chip pattern
   below) and as a full spec table on the product page. */

.bholats-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.bholats-spec-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: var(--border-default);
}

.bholats-spec-row:last-child { border-bottom: none; }

/* Compact spec "chip" — used on product cards, max 3, only rendered when the
   underlying attribute actually has a value (docs/DESIGN-SYSTEM.md §7). */
.bholats-spec-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	border: var(--border-width-sm) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	font-family: var(--font-data);
}

.bholats-spec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}