/* price — @tokens: (none — fully semantic/L1)

   A WooCommerce product-price display atom for custom card / product layouts.
   Non-interactive; tabular figures so aligned prices in a list stay in column.
   Token-only: every colour / size / weight reads a semantic or L1 token. */
.hzo-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);
    color: var(--text-heading);
    font-size: var(--fs-200);
    font-weight: var(--fw-600);
    font-variant-numeric: tabular-nums;
}

/* The effective / current price — inherits the block's size, weight and colour. */
.hzo-price__amount {
    color: inherit;
}

/* The struck original price when on sale — muted + line-through, lighter weight. */
.hzo-price__regular {
    color: var(--text-muted);
    font-size: var(--fs-75);
    font-weight: var(--fw-500);
    text-decoration: line-through;
}

/* The emphasised sale price — accent ink, heavier weight. */
.hzo-price__sale {
    color: var(--accent-text);
    font-weight: var(--fw-700);
}

/* Small muted affixes ("From", "/mo"). */
.hzo-price__prefix,
.hzo-price__suffix {
    color: var(--text-muted);
    font-size: var(--fs-75);
    font-weight: var(--fw-500);
}

/* Product-page hero price. */
.hzo-price--lg {
    font-size: var(--fs-400);
}