/**
 * Ökonoova-aligned layout tokens — scoped to plugin roots only (no global :root / body).
 * Colour variables from WooCommerce → Cosmetics dossier Settings are injected in PHP
 * on `cosmetics-dossier-tokens` (see Cosmetics_Assets::maybe_inline_dossier_color_vars).
 *
 * @package cosmetics-product-page
 */

.cosmetics-dossier-product,
.cosm-dossier-grid,
.cosm-sl-root,
.cosm-pms-subscribe--skinned {
	--cosmetics-dossier-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--cosmetics-dossier-font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cosmetics-dossier-surface-fog: #f4f4f4;
	--cosmetics-dossier-radius-sm: 4px;
	--cosmetics-dossier-radius-md: 8px;
	--cosmetics-dossier-shadow-card: 0 4px 24px rgba(70, 93, 82, 0.1);
	--cosmetics-dossier-shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.06);
	/* Shared controls (buttons / filter pills) — Ökonoova-style */
	--cosm-pill-radius: 9999px;
	--cosm-btn-radius: var(--cosmetics-dossier-radius-sm);
	--cosm-btn-min-height: 44px;
	font-family: var(--cosmetics-dossier-font-body, inherit);
}

/* Tray/FAB geometry — only under .cosm-sl-root (avoid polluting theme :root). */
.cosm-sl-root {
	--cosm-sl-primary: var(--cosmetics-dossier-primary, #465d52);
	--cosm-sl-primary-light: var(--cosmetics-dossier-border, #e2ddda);
	--cosm-sl-primary-border: var(--cosmetics-dossier-border, #e2ddda);
	--cosm-sl-primary-text: var(--cosmetics-dossier-primary, #465d52);
	--cosm-sl-in-list-card: var(--cosmetics-dossier-primary, #465d52);
	--cosm-sl-panel-bg: #fff;
	--cosm-sl-border: var(--cosmetics-dossier-border, #e2ddda);
	--cosm-sl-panel-w: 300px;
	--cosm-sl-handle-w: 28px;
	--cosm-sl-z: 200000;
	--cosm-sl-fab-size: 48px;
	--cosm-sl-fab-radius: 50%;
	--cosm-sl-fab-shadow: var(--cosmetics-dossier-shadow-card);
	--cosm-sl-panel-text: var(--cosmetics-dossier-secondary, #4a413a);
	--cosm-sl-panel-muted: rgba(74, 65, 58, 0.65);
}

@media (min-width: 480px) and (max-width: 782px) {
	.cosm-sl-root {
		--cosm-sl-panel-w: 260px;
	}
}