/**
 * Flatsome theme compatibility shim.
 *
 * Flatsome doesn't expose --wp--preset--color--* tokens; it uses its own
 * --fs-color-* namespace. This file maps Flatsome tokens → plugin tokens so
 * the plugin looks native under Flatsome without hardcoding anything.
 *
 * Only loaded when the active theme is `flatsome` (see class-public.php).
 * User overrides in Customizer "Additional CSS" still win.
 */

:root {
	/* Colors — map Flatsome tokens onto plugin tokens.
	   Where Flatsome has no equivalent (text-muted, surface-muted, border)
	   we derive from --fs-color-base via color-mix so the values retone
	   when the customer changes their primary text colour. */
	--shop-color-primary:       var(--fs-color-primary, #446084);
	--shop-color-on-primary:    var(--fs-color-on-primary, #fff);

	--shop-color-accent:        var(--fs-color-secondary, #d26e4b);
	--shop-color-on-accent:     var(--fs-color-on-secondary, #fff);

	--shop-color-surface:       var(--fs-color-body, #fff);
	--shop-color-surface-muted: color-mix(in srgb, var(--fs-color-base, #4a4a4a) 4%, transparent);

	--shop-color-text:          var(--fs-color-base, #4a4a4a);
	--shop-color-text-muted:    color-mix(in srgb, var(--fs-color-base, #4a4a4a) 60%, transparent);
	--shop-color-border:        color-mix(in srgb, var(--fs-color-base, #4a4a4a) 15%, transparent);

	/* Semantic */
	--shop-color-oos:           var(--fs-color-alert, #b20000);
	--shop-color-sale:          var(--fs-color-secondary, #d26e4b);
	--shop-color-success:       var(--fs-color-success, #7a9c59);
	--shop-color-alert:         var(--fs-color-alert, #b20000);
	/* Flatsome ships no warning/info/purple equivalents — fall through to shop-tokens.css defaults
	   (we re-declare so the cascade order doesn't accidentally drop them when this shim loads). */
	--shop-color-warning:       #f39c12;
	--shop-color-info:          #3498db;
	--shop-color-purple:        #7a5cb8;

	/* Typography — Flatsome doesn't define preset font families.
	   `inherit` makes our components pick up Flatsome's body/heading fonts. */
	--shop-font-body:    inherit;
	--shop-font-heading: inherit;

	/* Layout — reproduce Flatsome's .row > .large-10.col geometry as a token.
	   Flatsome: .row{max-width:1080px} .large-10{width:83.3333%}
	   Verified against measured widths: vp 1035 → 863px, vp 1054 → 878px (= vp × 0.8333)
	   formula: min(100vw, 1080px) × 0.8333  → matches Flatsome at every viewport. */
	--shop-wrapper-max-width:      calc(min(100vw, 1080px) * 0.8333);
	--shop-wrapper-padding-inline: 15px;
}