/* TRU Luxury CTA. Colours are custom properties so variants and Elementor style controls compose. */
.tru-btn-wrap {
	display: flex;
	flex-wrap: wrap;
}

.tru-site a.tru-btn,
.tru-site button.tru-btn {
	--tru-btn-fg: var(--tru-ivory);
	--tru-btn-bg: var(--tru-ink);
	--tru-btn-border: var(--tru-ink);
	--tru-btn-fg-hover: var(--tru-ink);
	--tru-btn-bg-hover: var(--tru-champagne);
	--tru-btn-border-hover: var(--tru-champagne);
	--tru-btn-radius: var(--tru-radius-1);
	--tru-btn-speed: var(--tru-dur);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--tru-btn-border);
	border-radius: var(--tru-btn-radius);
	background: var(--tru-btn-bg);
	color: var(--tru-btn-fg);
	font: 500 0.8125rem/1.2 var(--tru-font-text);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--tru-btn-speed) var(--tru-ease), background-color var(--tru-btn-speed) var(--tru-ease), border-color var(--tru-btn-speed) var(--tru-ease);
}

.tru-site a.tru-btn:hover,
.tru-site a.tru-btn:focus-visible,
.tru-site button.tru-btn:hover,
.tru-site button.tru-btn:focus-visible {
	color: var(--tru-btn-fg-hover);
	background: var(--tru-btn-bg-hover);
	border-color: var(--tru-btn-border-hover);
	text-decoration: none;
}

.tru-btn--sm {
	min-height: 44px !important;
	padding: 0.7rem 1.15rem !important;
	font-size: 0.75rem !important;
}

.tru-btn--lg {
	min-height: 54px !important;
	padding: 1.05rem 1.9rem !important;
}

/* Variants */
.tru-site a.tru-btn--outline,
.tru-site button.tru-btn--outline {
	--tru-btn-fg: var(--tru-ink);
	--tru-btn-bg: transparent;
	--tru-btn-border: var(--tru-taupe);
	--tru-btn-fg-hover: var(--tru-ivory);
	--tru-btn-bg-hover: var(--tru-ink);
	--tru-btn-border-hover: var(--tru-ink);
}

.tru-tone--ink a.tru-btn--outline {
	--tru-btn-fg: var(--tru-ivory);
	--tru-btn-border: var(--tru-champagne);
	--tru-btn-fg-hover: var(--tru-ink);
	--tru-btn-bg-hover: var(--tru-champagne);
	--tru-btn-border-hover: var(--tru-champagne);
}

.tru-site a.tru-btn--light {
	--tru-btn-fg: var(--tru-ink);
	--tru-btn-bg: var(--tru-ivory);
	--tru-btn-border: var(--tru-ivory);
	--tru-btn-fg-hover: var(--tru-ink);
	--tru-btn-bg-hover: var(--tru-champagne);
	--tru-btn-border-hover: var(--tru-champagne);
}

.tru-site a.tru-btn--on-image {
	--tru-btn-fg: var(--tru-ivory);
	--tru-btn-bg: rgb(41 40 39 / 0.25);
	--tru-btn-border: rgb(245 244 240 / 0.7);
	--tru-btn-fg-hover: var(--tru-ink);
	--tru-btn-bg-hover: var(--tru-ivory);
	--tru-btn-border-hover: var(--tru-ivory);
}

.tru-site a.tru-btn--text {
	--tru-btn-fg: var(--tru-text, var(--tru-ink));
	--tru-btn-bg: transparent;
	--tru-btn-border: transparent;
	--tru-btn-fg-hover: var(--tru-accent-text, var(--tru-bronze));
	--tru-btn-bg-hover: transparent;
	--tru-btn-border-hover: transparent;
	min-height: 44px;
	padding: 0.6rem 0 !important;
	overflow: visible;
}

.tru-site a.tru-btn--text .tru-btn__label {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 0.3em;
	transition: background-size var(--tru-btn-speed) var(--tru-ease);
}

.tru-site a.tru-btn--text:hover .tru-btn__label,
.tru-site a.tru-btn--text:focus-visible .tru-btn__label {
	background-size: 35% 1px;
}

/* Icon and arrow motion */
.tru-btn__icon {
	display: inline-flex;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
}

.tru-btn__icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.6;
}

.tru-btn--arrow .tru-btn__icon {
	transition: transform var(--tru-btn-speed) var(--tru-ease);
}

.tru-btn--arrow:hover .tru-btn__icon,
.tru-btn--arrow:focus-visible .tru-btn__icon {
	transform: translateX(4px);
}

.tru-btn--arrow .tru-i--arrow-right .tru-i-shaft {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.tru-btn--arrow:hover .tru-i--arrow-right .tru-i-shaft,
.tru-btn--arrow:focus-visible .tru-i--arrow-right .tru-i-shaft {
	animation: tru-btn-draw calc(var(--tru-btn-speed) * 1.6) var(--tru-ease) both;
}

@keyframes tru-btn-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* Background reveal: a champagne panel sweeps in from the left behind the label. */
.tru-btn--reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tru-btn-bg-hover);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--tru-btn-speed) var(--tru-ease);
}

.tru-site a.tru-btn--reveal:hover,
.tru-site a.tru-btn--reveal:focus-visible,
.tru-site button.tru-btn--reveal:hover,
.tru-site button.tru-btn--reveal:focus-visible {
	background: var(--tru-btn-bg);
}

.tru-btn--reveal:hover::before,
.tru-btn--reveal:focus-visible::before {
	transform: scaleX(1);
}

/* Border trace */
.tru-btn__trace {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--tru-btn-border-hover);
	stroke-width: 2px;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	pointer-events: none;
	transition: stroke-dashoffset calc(var(--tru-btn-speed) * 2) var(--tru-ease-in-out);
}

.tru-btn--trace:hover .tru-btn__trace,
.tru-btn--trace:focus-visible .tru-btn__trace {
	stroke-dashoffset: 0;
}

.tru-tone--ink a.tru-btn--primary {
	--tru-btn-fg: var(--tru-ink);
	--tru-btn-bg: var(--tru-champagne);
	--tru-btn-border: var(--tru-champagne);
	--tru-btn-fg-hover: var(--tru-ink);
	--tru-btn-bg-hover: var(--tru-ivory);
	--tru-btn-border-hover: var(--tru-ivory);
}

@media (prefers-reduced-motion: reduce) {
	.tru-btn--arrow:hover .tru-btn__icon {
		transform: none;
	}

	.tru-btn--reveal::before {
		transition: none;
	}
}