/*
 * TradeKit Why Choose Us / Features block styles.
 */

.tk-features {
	--tk-features-bg: var(--wp--preset--color--light);
	--tk-features-heading: var(--wp--preset--color--dark);
	--tk-features-body: var(--wp--preset--color--neutral-600);
	--tk-features-accent: var(--wp--preset--color--accent);
	--tk-features-card-bg: #fff;
	--tk-features-card-heading: var(--wp--preset--color--dark);
	--tk-features-card-body: var(--wp--preset--color--neutral-600);
	--tk-features-icon-bg: color-mix(in srgb, var(--tk-features-accent) 16%, transparent);
	--tk-features-icon-color: var(--tk-features-accent);
	--tk-features-panel-bg: color-mix(in srgb, #fff 92%, var(--tk-features-bg) 8%);
	--tk-features-panel-text: var(--wp--preset--color--dark);
	--tk-features-cta-bg: var(--wp--preset--color--primary);
	--tk-features-cta-text: var(--wp--preset--color--light);
	--tk-features-cta-hover-bg: color-mix(in srgb, var(--tk-features-cta-bg) 88%, #000 12%);
	--tk-features-cta-hover-text: var(--tk-features-cta-text);
	--tk-features-cta-secondary-bg: transparent;
	--tk-features-cta-secondary-text: var(--tk-features-heading);
	--tk-features-cta-secondary-border: color-mix(in srgb, var(--tk-features-heading) 24%, transparent);
	--tk-features-cta-secondary-hover-bg: color-mix(in srgb, var(--tk-features-cta-secondary-text) 10%, transparent);
	--tk-features-cta-secondary-hover-text: var(--tk-features-cta-secondary-text);
	--tk-features-cta-secondary-hover-border: var(--tk-features-cta-secondary-border);
	--tk-features-overlay: #0f172a;
	--tk-features-overlay-opacity: 0.56;
	--tk-features-panel-bg-opacity: 100%;
	--tk-features-icon-bg-opacity: 100%;
	--tk-features-carousel-arrow-color: var(--tk-features-heading);
	--tk-features-carousel-arrow-bg: color-mix(in srgb, var(--tk-features-card-bg) 86%, transparent);
	--tk-features-carousel-arrow-border: color-mix(in srgb, var(--tk-features-heading) 18%, transparent);
	--tk-features-carousel-dot-color: color-mix(in srgb, var(--tk-features-heading) 28%, transparent);
	--tk-features-carousel-dot-active-color: var(--tk-features-accent);
	--tk-features-per-view: 1;
	--tk-features-carousel-gap: clamp(14px, 1.8vw, 24px);
	--tk-features-radius: var(--tk-radius-default);
	background: var(--tk-features-bg);
	color: var(--tk-features-heading);
}

.tk-features .tk-section-block__background-overlay {
	background-color: var(--tk-features-overlay);
	opacity: var(--tk-features-overlay-opacity);
}

.wp-block-tradekit-features,
.tk-features {
	max-inline-size: 100%;
	width: 100%;
}

.wp-block-tradekit-features.alignfull,
.tk-features.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: auto;
}

.tk-features :where(.tk-section-intro__eyebrow) {
	--tk-section-accent: var(--tk-features-accent);
}

.tk-features :where(.tk-section-intro__headline) {
	--tk-section-heading: var(--tk-features-heading);
}

.tk-features :where(.tk-section-intro__copy) {
	--tk-section-body: var(--tk-features-body);
}

.tk-features__items {
	display: grid;
	gap: var(--tk-features-carousel-gap);
}

.tk-features--columns-2 .tk-features__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tk-features--columns-3 .tk-features__items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tk-features--columns-4 .tk-features__items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tk-features__item {
	background: color-mix(in srgb, var(--tk-features-card-bg) var(--tk-features-panel-bg-opacity), transparent);
	border: 1px solid color-mix(in srgb, var(--tk-features-heading) 12%, transparent);
	border-radius: var(--tk-features-radius);
	color: var(--tk-features-panel-text);
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	grid-template-columns: auto 1fr;
	padding: clamp(16px, 2vw, 26px);
}

.tk-features__item-icon {
	align-items: center;
	background: color-mix(in srgb, var(--tk-features-icon-bg) var(--tk-features-icon-bg-opacity), transparent);
	border-radius: 999px;
	color: var(--tk-features-icon-color);
	display: inline-flex;
	height: 2.7rem;
	justify-content: center;
	line-height: 1;
	width: 2.7rem;
}

.tk-features__icon-svg {
	height: 1.3rem;
	width: 1.3rem;
}

.tk-features__item-icon--image {
	background: transparent;
	border-radius: 0;
	overflow: hidden;
	padding: 0;
}

.tk-features__icon-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.tk-features--icon-image-fit-contain .tk-features__icon-image {
	object-fit: contain;
}

.tk-features--icon-image-shape-none .tk-features__item-icon--image {
	border-radius: 0;
}

.tk-features--icon-image-shape-rounded .tk-features__item-icon--image {
	border-radius: 14px;
}

.tk-features--icon-image-shape-square .tk-features__item-icon--image {
	border-radius: 4px;
}

.tk-features--icon-image-shape-circle .tk-features__item-icon--image {
	border-radius: 999px;
}

.tk-features--icon-image-size-sm .tk-features__item-icon--image {
	height: 2.6rem;
	width: 2.6rem;
}

.tk-features--icon-image-size-md .tk-features__item-icon--image {
	height: 3.2rem;
	width: 3.2rem;
}

.tk-features--icon-image-size-lg .tk-features__item-icon--image {
	height: 4rem;
	width: 4rem;
}

.tk-features__item-content {
	display: grid;
	gap: 8px;
}

.tk-features__item-kicker {
	color: var(--tk-features-accent);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

.tk-features__item-title {
	color: var(--tk-features-card-heading);
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.2;
	margin: 0;
}

.tk-features__item-copy {
	color: var(--tk-features-card-body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
}

.tk-features__item-copy p {
	margin: 0;
}

.tk-features--item-align-center .tk-features__item {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.tk-features--layout-featured-supporting .tk-features__items {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.tk-features--layout-featured-supporting .tk-features__item.is-featured {
	background: color-mix(in srgb, var(--tk-features-panel-bg) var(--tk-features-panel-bg-opacity), transparent);
	color: var(--tk-features-panel-text);
	grid-row: span 2;
}

.tk-features--layout-featured-supporting .tk-features__item.is-featured .tk-features__item-title {
	font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.tk-features--layout-visual-panel .tk-features__container {
	background: color-mix(in srgb, var(--tk-features-panel-bg) var(--tk-features-panel-bg-opacity), transparent);
	border: 1px solid color-mix(in srgb, var(--tk-features-heading) 12%, transparent);
	border-radius: var(--tk-features-radius);
	box-shadow: 0 22px 45px color-mix(in srgb, var(--tk-features-heading) 16%, transparent);
	padding-block: clamp(18px, 2vw, 30px);
	padding-inline: clamp(14px, 2vw, 28px);
}

.tk-features--layout-visual-panel .tk-features__item {
	background: color-mix(in srgb, var(--tk-features-card-bg) 88%, transparent);
}


.tk-features--panel-bg-off .tk-features__item,
.tk-features--panel-bg-off .tk-features__item.is-featured {
	background: transparent;
	color: var(--tk-features-panel-text);
}

.tk-features--panel-border-off .tk-features__item,
.tk-features--panel-border-off .tk-features__item.is-featured {
	border-color: transparent;
	box-shadow: none;
}

.tk-features .tk-features__cta--primary.tk-button--primary {
	background-color: var(--tk-features-cta-bg);
	border-color: var(--tk-features-cta-bg);
	color: var(--tk-features-cta-text);
}

.tk-features .tk-features__cta--secondary.tk-button--secondary {
	background-color: var(--tk-features-cta-secondary-bg);
	border-color: var(--tk-features-cta-secondary-border);
	color: var(--tk-features-cta-secondary-text);
}

.tk-features .tk-features__cta--primary.tk-button--primary:hover,
.tk-features .tk-features__cta--primary.tk-button--primary:focus-visible {
	background-color: var(--tk-features-cta-hover-bg);
	border-color: var(--tk-features-cta-hover-bg);
	color: var(--tk-features-cta-hover-text);
}

.tk-features .tk-features__cta--secondary.tk-button--secondary:hover,
.tk-features .tk-features__cta--secondary.tk-button--secondary:focus-visible {
	background-color: var(--tk-features-cta-secondary-hover-bg);
	border-color: var(--tk-features-cta-secondary-hover-border);
	color: var(--tk-features-cta-secondary-hover-text);
}

.tk-features__actions {
	width: 100%;
}

.tk-features__actions--left {
	justify-content: flex-start;
}

.tk-features__actions--center {
	justify-content: center;
}

.tk-features__actions--right {
	justify-content: flex-end;
}

.tk-features--surface-light {
	--tk-features-bg: var(--wp--preset--color--light);
	--tk-features-heading: var(--wp--preset--color--dark);
	--tk-features-body: var(--wp--preset--color--neutral-600);
	--tk-features-accent: var(--wp--preset--color--accent);
	--tk-features-card-bg: #fff;
	--tk-features-card-heading: var(--wp--preset--color--dark);
	--tk-features-card-body: var(--wp--preset--color--neutral-600);
	--tk-features-panel-bg: color-mix(in srgb, #fff 94%, var(--wp--preset--color--accent) 6%);
	--tk-features-panel-text: var(--wp--preset--color--dark);
}

.tk-features--surface-dark {
	--tk-features-bg: var(--wp--preset--color--dark);
	--tk-features-heading: var(--wp--preset--color--light);
	--tk-features-body: var(--wp--preset--color--neutral-100);
	--tk-features-accent: var(--wp--preset--color--accent);
	--tk-features-card-bg: color-mix(in srgb, var(--wp--preset--color--dark) 80%, #1e293b 20%);
	--tk-features-card-heading: var(--wp--preset--color--light);
	--tk-features-card-body: var(--wp--preset--color--neutral-100);
	--tk-features-panel-bg: color-mix(in srgb, var(--wp--preset--color--dark) 74%, #334155 26%);
	--tk-features-panel-text: var(--wp--preset--color--light);
}

.tk-features--surface-brand {
	--tk-features-bg: var(--wp--preset--color--primary);
	--tk-features-heading: var(--wp--preset--color--light);
	--tk-features-body: var(--wp--preset--color--neutral-100);
	--tk-features-accent: var(--wp--preset--color--light);
	--tk-features-card-bg: color-mix(in srgb, var(--wp--preset--color--light) 94%, var(--wp--preset--color--primary) 6%);
	--tk-features-card-heading: var(--wp--preset--color--dark);
	--tk-features-card-body: var(--wp--preset--color--neutral-600);
	--tk-features-panel-bg: color-mix(in srgb, var(--wp--preset--color--light) 90%, var(--wp--preset--color--primary) 10%);
	--tk-features-panel-text: var(--wp--preset--color--dark);
}

.tk-features .tk-section-block__texture {
	inset: 0;
	mix-blend-mode: overlay;
	opacity: var(--tk-features-texture-opacity, 0.14);
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.tk-features .tk-section-block__texture--site {
	background-image:
		linear-gradient(135deg, rgb(255 255 255 / 20%) 0, rgb(255 255 255 / 0%) 45%),
		repeating-linear-gradient(45deg, rgb(255 255 255 / 10%) 0, rgb(255 255 255 / 10%) 1px, transparent 1px, transparent 11px);
	background-size: cover, auto;
	background-position: center, center;
	background-repeat: no-repeat, repeat;
}

.tk-features--texture-intensity-subtle {
	--tk-features-texture-opacity: 0.14;
}

.tk-features--texture-intensity-normal {
	--tk-features-texture-opacity: 0.22;
}

.tk-features--texture-intensity-strong {
	--tk-features-texture-opacity: 0.3;
}

.tk-features--texture-intensity-full {
	--tk-features-texture-opacity: 1;
}

.tk-features--texture-fit-repeat .tk-section-block__texture--custom {
	background-repeat: repeat;
	background-size: auto;
}

.tk-features--texture-fit-cover .tk-section-block__texture--custom {
	background-repeat: no-repeat;
	background-size: cover;
}

.tk-features--geometry-inherit,
.tk-features--geometry-clean {
	--tk-features-radius: var(--tk-radius-clean);
}

.tk-features--geometry-soft {
	--tk-features-radius: var(--tk-radius-soft);
}

.tk-features--geometry-cut {
	--tk-features-radius: var(--tk-radius-cut);
}

.tk-features.tk-features--geometry-cut .tk-features__item,
.tk-features.tk-features--geometry-cut .tk-features__container {
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.tk-features--intro-center .tk-section-intro {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.tk-features--intro-center .tk-section-intro__actions {
	justify-content: center;
}

.tk-features--background-fixed .tk-section-block__background-image {
	background-attachment: fixed;
}

.tk-features--carousel-active .tk-features__carousel {
	padding-inline: clamp(52px, 5.5vw, 78px);
	position: relative;
}

.tk-features--carousel-active .tk-features__viewport {
	margin-inline: auto;
	overflow: hidden;
	width: 100%;
}

.tk-features--carousel-active .tk-features__items--carousel {
	display: flex;
	gap: var(--tk-features-carousel-gap);
	min-width: 0;
	overflow: visible;
	padding: 4px 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.tk-features--carousel-active .tk-features__slide {
	flex: 0 0 calc((100% - (var(--tk-features-carousel-gap) * (var(--tk-features-per-view) - 1))) / var(--tk-features-per-view));
	max-width: calc((100% - (var(--tk-features-carousel-gap) * (var(--tk-features-per-view) - 1))) / var(--tk-features-per-view));
}

.tk-features.tk-features--carousel-active .tk-features__item {
	align-content: start;
	gap: 12px;
	grid-template-columns: 1fr;
	height: auto;
	justify-items: center;
	min-height: 0;
	text-align: center;
}

.tk-features--carousel-active .tk-features__item-icon {
	align-self: center;
	margin-bottom: 2px;
}

.tk-features--carousel-active .tk-features__item-content {
	align-content: start;
	gap: 10px;
	justify-items: center;
	width: 100%;
}

.tk-features--carousel-active :where(.tk-features__item-title, .tk-features__item-copy, .tk-features__item-kicker) {
	overflow-wrap: break-word;
	word-break: normal;
}

.tk-features--carousel-static .tk-features__carousel {
	padding-inline: 0;
}

.tk-features--carousel-static .tk-features__viewport {
	overflow: visible;
}

.tk-features--carousel-static .tk-features__items--carousel {
	flex-wrap: wrap;
	transform: none !important;
	will-change: auto;
}

.tk-features--carousel-static .tk-features__slide {
	flex: 1 1 calc((100% - (var(--tk-features-carousel-gap) * (var(--tk-features-static-columns, 1) - 1))) / var(--tk-features-static-columns, 1));
	max-width: calc((100% - (var(--tk-features-carousel-gap) * (var(--tk-features-static-columns, 1) - 1))) / var(--tk-features-static-columns, 1));
}

.tk-features__carousel-controls {
	display: block;
	margin-top: 16px;
	width: 100%;
}

.tk-features__carousel-controls--pos-outside {
	margin-top: 14px;
}

.tk-features__carousel-controls--align-left {
	text-align: left;
}

.tk-features__carousel-controls--align-center {
	text-align: center;
}

.tk-features__carousel-controls--align-right {
	text-align: right;
}

.tk-features__carousel-controls--pos-inside {
	left: 0;
	margin-top: 0;
	padding-inline: clamp(8px, 1.2vw, 16px);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: clamp(8px, 1.3vw, 16px);
	z-index: 3;
}

.tk-features__carousel-controls--pos-inside :where(.tk-features__carousel-arrows, .tk-features__carousel-dots) {
	pointer-events: auto;
}

.tk-features__carousel-controls--pos-below {
	margin-top: 22px;
}

.tk-features__carousel-arrows {
	display: contents;
}

.tk-features__carousel-controls--pos-inside .tk-features__carousel-arrows {
	display: inline-flex;
	gap: 10px;
}

.tk-features__carousel-controls--pos-below .tk-features__carousel-arrows {
	display: inline-flex;
	gap: 10px;
	margin-bottom: 10px;
}

.tk-features__carousel-arrow {
	align-items: center;
	background: var(--tk-features-carousel-arrow-bg);
	border: 1px solid var(--tk-features-carousel-arrow-border);
	border-radius: 999px;
	color: var(--tk-features-carousel-arrow-color);
	cursor: pointer;
	display: inline-flex;
	height: 54px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: transform 140ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 140ms ease;
	width: 54px;
	z-index: 4;
}

.tk-features__carousel-arrow:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow {
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.tk-features__carousel-arrow:hover:not(:disabled) {
	transform: translateY(-50%);
}

.tk-features__carousel-controls--pos-inside .tk-features__carousel-arrow:hover:not(:disabled),
.tk-features__carousel-controls--pos-below .tk-features__carousel-arrow:hover:not(:disabled) {
	transform: translateY(-1px);
}

.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow:hover:not(:disabled) {
	transform: translateY(calc(-50% - 1px));
}

.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow--prev {
	left: 0;
}

.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow--next {
	right: 0;
}

.tk-features__carousel-arrow-icon {
	display: block;
	height: 24px;
	width: 24px;
}

.tk-features__carousel-dots {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin: 0 auto;
}

.tk-features__carousel-controls--pos-outside .tk-features__carousel-dots {
	display: flex;
}

.tk-features__carousel-dot {
	appearance: none;
	background: var(--tk-features-carousel-dot-color);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: block;
	flex: 0 0 7px;
	height: 7px;
	min-height: 7px;
	min-width: 7px;
	opacity: 0.5;
	padding: 0;
	transition: background-color 160ms ease, opacity 140ms ease;
	width: 7px;
}

.tk-features__carousel-dot.is-active {
	background: var(--tk-features-carousel-dot-active-color);
	opacity: 1;
}

.tk-features-editor__item {
	border: 1px solid rgb(148 163 184 / 42%);
	border-radius: 6px;
	margin-top: 12px;
	padding: 12px;
}

.tk-features-editor__item-title {
	font-weight: 700;
	margin: 0 0 8px;
}

.tk-features-editor__item-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.tk-features-editor__icon-preview {
	border-radius: 8px;
	display: block;
	height: 62px;
	margin-top: 10px;
	object-fit: cover;
	width: 62px;
}

@media (max-width: 1023px) {

	.tk-features--columns-4 .tk-features__items,
	.tk-features--columns-3 .tk-features__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tk-features--layout-featured-supporting .tk-features__items {
		grid-template-columns: 1fr;
	}

	.tk-features--layout-featured-supporting .tk-features__item.is-featured {
		grid-row: auto;
	}

	.tk-features--carousel-active .tk-features__carousel {
		padding-inline: clamp(44px, 5vw, 58px);
	}
}

@media (max-width: 699px) {

	.tk-features__items,
	.tk-features--columns-2 .tk-features__items,
	.tk-features--columns-3 .tk-features__items,
	.tk-features--columns-4 .tk-features__items {
		grid-template-columns: 1fr;
	}

	.tk-features .tk-section-intro__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tk-features .tk-section-intro__actions :where(.wp-element-button, .wp-block-button__link) {
		text-align: center;
		width: 100%;
	}

	.tk-features__carousel-controls {
		justify-content: center;
	}

	.tk-features--carousel-active .tk-features__carousel {
		padding-inline: clamp(10px, 4.2vw, 16px);
	}

	.tk-features.tk-features--carousel-active .tk-features__item {
		gap: 10px;
		padding: 14px 16px;
	}

	.tk-features--carousel-active .tk-features__item-content {
		gap: 8px;
	}

	.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow {
		height: 44px;
		width: 44px;
	}

	.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow--prev {
		left: 6px;
	}

	.tk-features__carousel-controls--pos-outside .tk-features__carousel-arrow--next {
		right: 6px;
	}
}