/**
 * Product detail page — store-colour corrections.
 * Markup: AFX_Products product/detailsInfo.phtml (the price / purchase box)
 *
 * afx-base.css hardcodes the purchase box as a GREEN tint:
 *
 *     .afx-purchase-box { background: #e9f7ef; border: 1px solid #cfe9da }
 *
 * which leaves the box green on spares_usa, clashing with that store's red accent (its
 * ADD TO CART button, active gallery thumbnail and headings are all --color-primary).
 * Derive the tint from --color-primary instead so each store gets its own.
 *
 * The mix percentages are chosen so spares_child stays visually identical to the approved
 * design rather than shifting to a "cleaner" tint:
 *
 *     background  9% of #137C4E on white -> rgb(234,243,239) vs the current #e9f7ef (233,247,239)
 *     border     20% of #137C4E on white -> rgb(208,229,220) vs the current #cfe9da (207,233,218)
 *
 * i.e. under 2% off per channel — imperceptible — while spares_usa becomes the matching red
 * tint. color-mix() is already relied on by Hyvä's own styles.css, so support is not a concern.
 *
 * This lives in its own file, not in afx-base.css, because pub/static holds a frozen
 * root-owned copy of afx-base.css that cannot be redeployed from the CLI account. Fold these
 * rules back into afx-base.css once a static deploy is possible again.
 *
 * NOT changed here: the "In stock" text and its tick stay #137C4E green on BOTH stores.
 * afx-base.css documents that as deliberate (a semantic in-stock signal, per the original
 * design), so it is left alone.
 */

.afx-purchase-box {
    background: color-mix(in srgb, var(--color-primary, #137C4E) 9%, #fff) !important;
    border-color: color-mix(in srgb, var(--color-primary, #137C4E) 20%, #fff) !important;
}