/**
 * CommerceForge UI design tokens.
 *
 * These tokens intentionally read Elementor globals first, then fall back to
 * theme/browser inheritance where that is safer than forcing plugin colors.
 */

:root {
	--cforge-ui-color-primary: var(--e-global-color-primary, #3b82f6);
	--cforge-ui-color-primary-hover: var(--e-global-color-accent, #2563eb);
	--cforge-ui-color-primary-soft: color-mix(in srgb, var(--cforge-ui-color-primary) 12%, #ffffff);
	--cforge-ui-color-accent: var(--e-global-color-accent, #ef4444);
	--cforge-ui-color-accent-hover: color-mix(in srgb, var(--cforge-ui-color-accent) 84%, #000000);
	--cforge-ui-color-text: var(--e-global-color-text, inherit);
	--cforge-ui-color-heading: var(--e-global-color-primary, var(--e-global-color-text, inherit));
	--cforge-ui-color-muted: var(--e-global-color-secondary, #6b7280);
	--cforge-ui-color-surface: var(--e-global-color-astglobalcolor5, #ffffff);
	--cforge-ui-color-surface-soft: color-mix(in srgb, var(--cforge-ui-color-surface) 88%, var(--cforge-ui-color-primary) 12%);
	--cforge-ui-color-border-soft: #e9ecef;
	--cforge-ui-color-border: var(--cforge-ui-color-border-soft, #e9ecef);
	--cforge-ui-color-overlay-dark: rgba(17, 24, 39, 0.72);
	--cforge-ui-color-overlay-light: rgba(255, 255, 255, 0.72);

	--cforge-ui-color-sale: #ef4444;
	--cforge-ui-color-sale-text: #ffffff;
	--cforge-ui-color-rating: #fbbf24;
	--cforge-ui-color-rating-dark: #f59e0b;
	--cforge-ui-color-success: #047857;
	--cforge-ui-color-success-dark: #065f46;
	--cforge-ui-color-success-soft: #ecfdf5;
	--cforge-ui-color-danger: #dc2626;
	--cforge-ui-color-danger-soft: #fef2f2;
	--cforge-ui-color-warning: #9a3412;
	--cforge-ui-color-warning-soft: #fff7ed;
	--cforge-ui-color-offer-gradient-start: #EF233C;
	--cforge-ui-color-offer-gradient-end: #F47103;
	--cforge-ui-color-stock-progress-red: #F03E3E;
	--cforge-ui-color-stock-progress-orange: #F76028;
	--cforge-ui-color-stock-progress-yellow: #FFD43B;
	--cforge-ui-color-stock-progress-green: #12B886;
	--cforge-ui-gradient-countdown-offer: linear-gradient(45deg, rgb(239, 35, 60) 0%, rgb(244, 113, 3) 100%);
	--cforge-ui-gradient-countdown-deal-header: linear-gradient(45deg, rgb(232, 89, 12) 0%, rgb(240, 62, 62) 100%);
	--cforge-ui-gradient-stock-progress: linear-gradient(to right, #F03E3E, #F76028, #FFD43B, #12B886);

	--cforge-ui-font-family: inherit;
	--cforge-ui-font-family-heading: inherit;
	--cforge-ui-font-size-body: inherit;
	--cforge-ui-font-weight-normal: inherit;
	--cforge-ui-font-weight-medium: 600;
	--cforge-ui-font-weight-bold: 700;
	--cforge-ui-font-weight-heading: 800;
	--cforge-ui-line-height-body: inherit;
	--cforge-ui-line-height-heading: 1.2;

	--cforge-ui-radius-sm: 8px;
	--cforge-ui-radius-md: 12px;
	--cforge-ui-radius-lg: 16px;
	--cforge-ui-radius-pill: 999px;
	--cforge-ui-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
	--cforge-ui-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.12);
	--cforge-ui-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * First-paint guard for Elementor dividers.
 *
 * Elementor may output divider width/style before the saved color is available.
 * Giving the separator an explicit soft token prevents temporary dark lines
 * without depending on generated page IDs or overriding intentional colors.
 */
body.post-type-archive-product .elementor-widget-divider,
body.tax-product_cat .elementor-widget-divider,
body.tax-product_tag .elementor-widget-divider {
	--divider-color: var(--cforge-ui-color-border-soft, #e9ecef) !important;
	color: var(--cforge-ui-color-border-soft, #e9ecef);
}

body.post-type-archive-product .elementor-widget-divider .elementor-divider-separator,
body.tax-product_cat .elementor-widget-divider .elementor-divider-separator,
body.tax-product_tag .elementor-widget-divider .elementor-divider-separator {
	border-color: var(--cforge-ui-color-border-soft, #e9ecef) !important;
	border-top-color: var(--cforge-ui-color-border-soft, #e9ecef) !important;
}

.cforge-ui-button-effect {
	position: relative;
	z-index: 0;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
}

.cforge-ui-button-effect .cforge-ui-marketing-button__text,
.cforge-ui-button-effect .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect .cforge-ui-product-card__action-label,
.cforge-ui-button-effect .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect .cforge-ui-single-product__action-icon,
.cforge-ui-button-effect > span {
	position: relative;
	z-index: 2;
	transition: transform 180ms ease;
}

.cforge-ui-button-effect--lift:hover,
.cforge-ui-button-effect--lift:focus-visible {
	transform: translateY(-2px);
}

.cforge-ui-button-effect--scale:hover,
.cforge-ui-button-effect--scale:focus-visible {
	transform: scale(1.035);
}

.cforge-ui-button-effect--press:hover,
.cforge-ui-button-effect--press:focus-visible {
	transform: translateY(1px) scale(0.985);
}

.cforge-ui-button-effect--text-swipe {
	--cforge-ui-button-text-swipe-distance: 1.2em;
}

.cforge-ui-button-effect--text-swipe .cforge-ui-marketing-button__text,
.cforge-ui-button-effect--text-swipe .cforge-ui-product-card__action-label {
	display: inline-block;
	position: relative;
	overflow: hidden;
	line-height: inherit;
	vertical-align: middle;
	white-space: nowrap;
}

.cforge-ui-button-effect--text-swipe .cforge-ui-button-text-swipe__inner {
	display: block;
	position: relative;
	line-height: inherit;
	white-space: nowrap;
	text-shadow: 0 var(--cforge-ui-button-text-swipe-distance) 0 currentColor;
	transition: transform 1s cubic-bezier(.23, 1, .32, 1);
	will-change: transform;
}

.cforge-ui-button-effect--text-swipe:hover .cforge-ui-button-text-swipe__inner,
.cforge-ui-button-effect--text-swipe:focus-visible .cforge-ui-button-text-swipe__inner {
	transform: translate3d(0, calc(-1 * var(--cforge-ui-button-text-swipe-distance)), 0);
}

.cforge-ui-button-effect--icon-slide:hover .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--icon-slide:hover .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--icon-slide:hover .cforge-ui-single-product__action-icon,
.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-single-product__action-icon {
	transform: translateX(0.22rem);
}

.cforge-ui-button-effect--icon-swap:hover .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--icon-swap:hover .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--icon-swap:hover .cforge-ui-single-product__action-icon,
.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-single-product__action-icon {
	transform: rotateY(180deg) scale(1.08);
}

.cforge-ui-button-effect--shine::before,
.cforge-ui-button-effect--background-sweep::before,
.cforge-ui-button-effect--wipe-fill-arrow::after,
.cforge-ui-button-effect--split-fill::before,
.cforge-ui-button-effect--split-fill::after,
.cforge-ui-button-effect--border-draw::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
}

.cforge-ui-button-effect--shine::before {
	z-index: 1;
	width: 42%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.34), transparent);
	transform: translateX(-150%) skewX(-18deg);
	transition: transform 520ms ease;
}

.cforge-ui-button-effect--shine:hover::before,
.cforge-ui-button-effect--shine:focus-visible::before {
	transform: translateX(260%) skewX(-18deg);
}

.cforge-ui-button-effect--background-sweep::before {
	z-index: 1;
	background: color-mix(in srgb, currentColor 14%, transparent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease;
}

.cforge-ui-button-effect--background-sweep:hover::before,
.cforge-ui-button-effect--background-sweep:focus-visible::before {
	transform: scaleX(1);
}

.cforge-ui-button-effect--wipe-fill-arrow {
	--cforge-ui-button-wipe-fill-bg: var(--cforge-ui-color-primary-hover);
	--cforge-ui-button-wipe-hover-color: var(--cforge-ui-color-sale-text);
	--cforge-ui-button-wipe-icon-color: currentColor;
	--cforge-ui-button-wipe-icon-hover-color: currentColor;
	--cforge-ui-button-wipe-icon-rotate: var(--cforge-ui-button-wipe-icon-rotate-value, 45deg);
	--cforge-ui-button-wipe-duration: 0.4s;
	--cforge-ui-button-wipe-easing: ease-in-out;
}

.cforge-ui-button-effect--wipe-fill-arrow::after {
	z-index: 1;
	right: auto;
	width: 0;
	border-radius: inherit;
	background: var(--cforge-ui-button-wipe-fill-bg);
	transition: width var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing), transform var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing);
}

.cforge-ui-button-wipe-fill-rtl .cforge-ui-button-effect--wipe-fill-arrow::after {
	right: 0;
	left: auto;
}

.cforge-ui-button-wipe-fill-center .cforge-ui-button-effect--wipe-fill-arrow::after {
	width: 100%;
	transform: scaleX(0);
	transform-origin: center;
}

.cforge-ui-button-effect--wipe-fill-arrow:hover,
.cforge-ui-button-effect--wipe-fill-arrow:focus-visible {
	color: var(--cforge-ui-button-wipe-hover-color);
}

.cforge-ui-button-effect--wipe-fill-arrow:hover::after,
.cforge-ui-button-effect--wipe-fill-arrow:focus-visible::after {
	width: 100%;
}

.cforge-ui-button-wipe-fill-center .cforge-ui-button-effect--wipe-fill-arrow:hover::after,
.cforge-ui-button-wipe-fill-center .cforge-ui-button-effect--wipe-fill-arrow:focus-visible::after {
	transform: scaleX(1);
}

.cforge-ui-button-effect--wipe-fill-arrow .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--wipe-fill-arrow .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--wipe-fill-arrow .cforge-ui-single-product__action-icon {
	color: var(--cforge-ui-button-wipe-icon-color);
	transition: color var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing), transform var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing), background-color var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing), border-color var(--cforge-ui-button-wipe-duration) var(--cforge-ui-button-wipe-easing);
}

.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-marketing-button-widget__icon,
.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-product-card__action-icon,
.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-single-product__action-icon,
.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-single-product__action-icon {
	color: var(--cforge-ui-button-wipe-icon-hover-color);
	transform: rotate(var(--cforge-ui-button-wipe-icon-rotate));
}

.cforge-ui-button-effect--split-fill {
	--cforge-ui-button-split-fill-bg: var(--cforge-ui-color-heading, #111827);
	--cforge-ui-button-split-hover-color: var(--cforge-ui-color-surface, #fff);
	--cforge-ui-button-split-fill-width: 55%;
	--cforge-ui-button-split-duration: 0.4s;
	--cforge-ui-button-split-easing: ease-out;
	transition: background-color var(--cforge-ui-button-split-duration) var(--cforge-ui-button-split-easing), border-color var(--cforge-ui-button-split-duration) var(--cforge-ui-button-split-easing), color var(--cforge-ui-button-split-duration) var(--cforge-ui-button-split-easing), transform var(--cforge-ui-button-split-duration) var(--cforge-ui-button-split-easing);
}

.cforge-ui-button-effect--split-fill::before,
.cforge-ui-button-effect--split-fill::after {
	z-index: 1;
	top: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--cforge-ui-button-split-fill-bg);
	transition: width var(--cforge-ui-button-split-duration) var(--cforge-ui-button-split-easing);
}

.cforge-ui-button-effect--split-fill::before {
	right: auto;
	left: 0;
}

.cforge-ui-button-effect--split-fill::after {
	right: 0;
	left: auto;
}

.cforge-ui-button-effect--split-fill:hover,
.cforge-ui-button-effect--split-fill:focus-visible {
	color: var(--cforge-ui-button-split-hover-color);
}

.cforge-ui-button-effect--split-fill:hover::before,
.cforge-ui-button-effect--split-fill:hover::after,
.cforge-ui-button-effect--split-fill:focus-visible::before,
.cforge-ui-button-effect--split-fill:focus-visible::after {
	width: var(--cforge-ui-button-split-fill-width);
}

.cforge-ui-button-split-fill-left .cforge-ui-button-effect--split-fill::after {
	display: none;
}

.cforge-ui-button-split-fill-left .cforge-ui-button-effect--split-fill:hover::before,
.cforge-ui-button-split-fill-left .cforge-ui-button-effect--split-fill:focus-visible::before,
.cforge-ui-button-split-fill-right .cforge-ui-button-effect--split-fill:hover::after,
.cforge-ui-button-split-fill-right .cforge-ui-button-effect--split-fill:focus-visible::after {
	width: 100%;
}

.cforge-ui-button-split-fill-right .cforge-ui-button-effect--split-fill::before {
	display: none;
}

.cforge-ui-button-effect--border-draw::after {
	z-index: 3;
	border: 1px solid currentColor;
	border-radius: inherit;
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 180ms ease, transform 180ms ease;
}

.cforge-ui-button-effect--border-draw:hover::after,
.cforge-ui-button-effect--border-draw:focus-visible::after {
	opacity: 0.86;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.cforge-ui-button-effect,
	.cforge-ui-button-effect::before,
	.cforge-ui-button-effect::after,
	.cforge-ui-button-effect .cforge-ui-marketing-button__text,
	.cforge-ui-button-effect .cforge-ui-button-text-swipe__inner,
	.cforge-ui-button-effect .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect .cforge-ui-product-card__action-label,
	.cforge-ui-button-effect .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect > span {
		transition-duration: 1ms;
	}

	.cforge-ui-button-effect--lift:hover,
	.cforge-ui-button-effect--lift:focus-visible,
	.cforge-ui-button-effect--scale:hover,
	.cforge-ui-button-effect--scale:focus-visible,
	.cforge-ui-button-effect--press:hover,
	.cforge-ui-button-effect--press:focus-visible,
	.cforge-ui-button-effect--text-swipe:hover .cforge-ui-button-text-swipe__inner,
	.cforge-ui-button-effect--text-swipe:focus-visible .cforge-ui-button-text-swipe__inner,
	.cforge-ui-button-effect--icon-slide:hover .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--icon-slide:hover .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--icon-slide:hover .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect--icon-slide:focus-visible .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect--icon-swap:hover .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--icon-swap:hover .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--icon-swap:hover .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect--icon-swap:focus-visible .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-marketing-button-widget__icon,
	.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-product-card__action-icon,
	.cforge-ui-button-effect--wipe-fill-arrow:hover .cforge-ui-single-product__action-icon,
	.cforge-ui-button-effect--wipe-fill-arrow:focus-visible .cforge-ui-single-product__action-icon {
		transform: none;
	}

	.cforge-ui-button-effect--wipe-fill-arrow:hover::after,
	.cforge-ui-button-effect--split-fill:hover::before,
	.cforge-ui-button-effect--split-fill:hover::after,
	.cforge-ui-button-effect--wipe-fill-arrow:focus-visible::after,
	.cforge-ui-button-effect--split-fill:focus-visible::before,
	.cforge-ui-button-effect--split-fill:focus-visible::after {
		width: 100%;
		transform: none;
	}
}