/*
 * Theme bridge base: shared role->token mapping across all commerce themes.
 * Any theme can opt-in by adding data-theme-role attributes in its templates.
 * v20260521-hero-overlay: hero ใช้ --theme-hero-overlay-bg (เฟดทึบ→โปร่ง) ไม่ใช้ navbar-to
 */

[data-theme-role="navbar"] {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--theme-navbar-text, #ffffff) !important;
}

[data-theme-role="hero-overlay"] {
	background: var(--theme-hero-overlay-bg, linear-gradient(180deg, rgba(246, 63, 47, 1) 0%, rgba(245, 61, 48, 0) 100%)) !important;
}

[data-theme-role="footer"] {
	background: linear-gradient(var(--theme-footer-angle, 269.98deg), var(--theme-footer-from, #f6402d) 0%, var(--theme-footer-to, #fe6232) 100%) !important;
	color: var(--theme-footer-text, #ffffff) !important;
}
[data-theme-role="footer"] .text-footer,
[data-theme-role="footer"] .li-text-footer,
[data-theme-role="footer"] .li-text-footer a {
	color: var(--theme-footer-text, #ffffff) !important;
}

[data-theme-role="primary-button"] {
	background: linear-gradient(var(--theme-btn-primary-angle, 135deg), var(--theme-btn-primary-bg, #1F2679) 0%, var(--theme-btn-primary-to, var(--theme-btn-primary-bg, #1F2679)) 100%) !important;
	color: var(--theme-btn-primary-text, #ffffff) !important;
	border-color: var(--theme-btn-primary-bg, #1F2679) !important;
}
[data-theme-role="primary-button"]:hover {
	background: var(--theme-btn-primary-hover, #151c5b) !important;
	border-color: var(--theme-btn-primary-hover, #151c5b) !important;
}

[data-theme-role="secondary-button"] {
	background: var(--theme-btn-secondary-bg, #ffffff) !important;
	border-color: var(--theme-btn-secondary-border, #ffffff) !important;
	color: var(--theme-btn-secondary-text, #f7412e) !important;
}

[data-theme-role="promo-gradient"],
[data-theme-role="contact-gradient"] {
	background: linear-gradient(var(--theme-footer-angle, 269.98deg), var(--theme-footer-from, #f6402d) 0%, var(--theme-footer-to, #fe6232) 100%) !important;
}

[data-theme-role="link"] {
	color: var(--theme-link-default, #0d9488) !important;
}
[data-theme-role="link"]:hover,
[data-theme-role="link"]:focus {
	color: var(--theme-link-hover, #0f766e) !important;
}