/*
 * Buttons and link-buttons (design-main 2.5, design-shop 1.4).
 *
 * .lvt-btn                    base (Figtree 18px, radius 5px, 54px tall)
 * .lvt-btn--gradient          brown gradient, hover solid #543227 (B1 / shop primary)
 * .lvt-btn--solid             solid #814D3B, hover #352F2D (B2); + .lvt-btn--upper for the shop form buttons
 * .lvt-btn--tint              light brown "View basket"
 * .lvt-btn--outline           white with 2px brown border (cookie buttons)
 * .lvt-btn--muted             grey disabled look ("Update basket")
 * Sizes: .lvt-btn--sm (42px), .lvt-btn--md (48px); .lvt-btn--block full width;
 * weights: .lvt-btn--w500 / .lvt-btn--w600.
 * Link styles: .lvt-link-line (B3), .lvt-link-arrow (B4), .lvt-link-more (B6).
 */

.lvt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 18px 34px;
	border: 0;
	border-radius: var(--lvt-radius);
	background: var(--lvt-c-primary);
	color: #FFFFFF;
	font-family: var(--lvt-font-accent);
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .3s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lvt-btn:hover,
.lvt-btn:focus-visible {
	color: #FFFFFF;
}

.lvt-site-shop .lvt-btn {
	font-weight: 500;
}

/*
 * The hover colour sits under the gradient image, so the swap on hover is
 * instant as live (an image cannot fade: with a transparent colour below it
 * the button turned see-through for the first part of the .3s transition).
 */
.lvt-btn--gradient {
	background: var(--lvt-gradient);
	background-color: var(--lvt-c-primary-dark);
}

.lvt-btn--gradient:hover {
	background: var(--lvt-c-primary-dark);
}

.lvt-btn--solid {
	border: 1px solid var(--lvt-c-primary);
	background: var(--lvt-c-primary);
	line-height: 22px;
}

.lvt-btn--solid:hover {
	background: var(--lvt-c-secondary);
}

.lvt-btn--upper {
	font-weight: 600;
	text-transform: uppercase;
}

.lvt-btn--upper:hover {
	border-color: #333333;
	background: #333333;
}

.lvt-btn--tint {
	background: var(--lvt-c-primary-tint);
	color: var(--lvt-c-primary);
}

.lvt-btn--tint:hover {
	background: var(--lvt-c-primary-dark);
}

.lvt-btn--outline {
	border: 2px solid var(--lvt-c-primary);
	background: #FFFFFF;
	color: var(--lvt-c-primary);
}

.lvt-btn--outline:hover {
	background: var(--lvt-c-primary);
}

.lvt-btn--muted,
.lvt-btn--muted:hover {
	background: var(--lvt-c-disabled-bg);
	color: var(--lvt-c-grey-btn);
	font-size: 16px;
	cursor: default;
}

.lvt-btn:disabled,
.lvt-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}

.lvt-btn--sm {
	min-height: 42px;
	padding: 5px 20px;
}

.lvt-btn--md {
	min-height: 48px;
	padding: 15px 30px;
}

.lvt-btn--block {
	display: flex;
	width: 100%;
}

.lvt-btn--w500,
.lvt-site-main .lvt-btn--w500 {
	font-weight: 500;
}

.lvt-btn--w600,
.lvt-site-shop .lvt-btn--w600 {
	font-weight: 600;
}

@media (max-width: 767px) {
	.lvt-btn:not(.lvt-btn--sm):not(.lvt-btn--md) {
		min-height: 44px;
		padding: 13px 24px;
	}

	.lvt-btn--solid:not(.lvt-btn--sm):not(.lvt-btn--md) {
		min-height: 48px;
	}

	/* The Elementor kit gives buttons a 1px brown edge on phones (same 44px height). */
	.lvt-btn--gradient:not(.lvt-btn--sm):not(.lvt-btn--md) {
		border: 1px solid var(--lvt-c-primary);
		padding: 12px 24px;
	}
}

/* B3: white underlined uppercase link (on photos). */
.lvt-link-line {
	display: inline-block;
	padding: 0;
	border-bottom: 2px solid rgba(255, 255, 255, .3);
	color: #FFFFFF;
	font-family: var(--lvt-font-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
	transition: border-color .25s ease;
}

.lvt-link-line:hover {
	border-color: #FFFFFF;
	color: #FFFFFF;
}

/* B4: brown link with a chevron that moves on hover. */
.lvt-link-arrow {
	display: inline-flex;
	align-items: center;
	color: var(--lvt-c-primary);
	font-family: var(--lvt-font-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
}

.lvt-link-arrow .lvt-icon {
	width: 7px;
	height: 12px;
	margin-left: 5px;
	transition: margin-left .3s ease;
}

.lvt-link-arrow:hover {
	color: var(--lvt-c-primary);
}

.lvt-link-arrow:hover .lvt-icon {
	margin-left: 12px;
}

/* B6: small caps "Continue reading". */
.lvt-link-more {
	color: var(--lvt-c-primary);
	font-family: var(--lvt-font-accent);
	font-size: 13px;
	font-weight: 800;
	line-height: 13px;
	text-transform: uppercase;
	transition: opacity .25s ease;
}

.lvt-link-more:hover {
	color: var(--lvt-c-primary);
	opacity: .8;
}