/*
 * Cart Free Shipping Upsell for XootiX — Final Horizontal Cards v1.4
 * Change the variables below to match your brand.
 */

#cfsu-xootix-mount {
	--cfsu-accent: #c5a15b;
	--cfsu-accent-dark: #927037;
	--cfsu-success: #178447;
	--cfsu-text: #151515;
	--cfsu-muted: #707070;
	--cfsu-border: #e9e5de;
	--cfsu-soft: #f8f6f2;
	--cfsu-surface: #ffffff;

	display: block;
	width: 100%;
	margin-top: 14px;
	border-top: 1px solid var(--cfsu-border);
	background: var(--cfsu-surface);
	transition: opacity 160ms ease;
}

#cfsu-xootix-mount[hidden] {
	display: none !important;
}

#cfsu-xootix-mount.is-loading {
	opacity: 0.58;
	pointer-events: none;
}

.cfsu-panel {
	padding: 15px 16px 18px;
	color: var(--cfsu-text);
	font-size: 14px;
	line-height: 1.4;
}

.cfsu-message {
	margin-bottom: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cfsu-highlight {
	color: var(--cfsu-accent-dark);
	font-weight: 800;
}

.cfsu-progress {
	position: relative;
	width: 100%;
	height: 8px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.035);
	border-radius: 999px;
	background: #ecebe8;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.cfsu-progress__fill {
	display: block;
	height: 100%;
	min-width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--cfsu-accent), var(--cfsu-accent-dark));
	box-shadow: 0 1px 4px rgba(146, 112, 55, 0.25);
	transition: width 280ms ease;
}

.cfsu-panel.is-unlocked .cfsu-progress__fill {
	background: var(--cfsu-success);
}

.cfsu-panel.is-unlocked .cfsu-message {
	color: var(--cfsu-success);
}

.cfsu-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	color: var(--cfsu-muted);
	font-size: 10px;
	font-weight: 600;
}

.cfsu-recommendations {
	position: relative;
	margin-top: 15px;
}

.cfsu-heading {
	display: flex;
	align-items: center;
	margin-bottom: 9px;
}

.cfsu-heading__title {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.015em;
}

/*
 * v1.4: horizontal carousel.
 * Two cards remain fully visible and part of the third card stays visible,
 * making the swipe/scroll interaction obvious.
 */
.cfsu-product-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 64px) / 2);
	gap: 10px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1px 1px 8px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #aaa9a5 #efefed;
}

.cfsu-product-list::-webkit-scrollbar {
	height: 5px;
}

.cfsu-product-list::-webkit-scrollbar-track {
	border-radius: 999px;
	background: #efefed;
}

.cfsu-product-list::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #aaa9a5;
}

.cfsu-product-list::-webkit-scrollbar-thumb:hover {
	background: #8e8d89;
}

.cfsu-product {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 190px;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--cfsu-border);
	border-radius: 11px;
	background: #ffffff;
	box-shadow:
		0 6px 18px rgba(20, 20, 20, 0.055),
		0 1px 4px rgba(20, 20, 20, 0.035);
	scroll-snap-align: start;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.cfsu-product:hover {
	border-color: rgba(197, 161, 91, 0.55);
	box-shadow:
		0 9px 22px rgba(20, 20, 20, 0.075),
		0 2px 6px rgba(20, 20, 20, 0.04);
	transform: translateY(-1px);
}

.cfsu-product__image-link {
	position: relative;
	display: flex;
	width: 100%;
	height: 88px;
	flex: 0 0 88px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 9px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.045);
	background:
		radial-gradient(circle at 50% 42%, #ffffff 0%, #f9f8f5 72%, #f4f1eb 100%);
}

.cfsu-product__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 78px !important;
	max-height: 72px !important;
	margin: 0 !important;
	object-fit: contain;
	transition: transform 170ms ease;
}

.cfsu-product:hover .cfsu-product__image {
	transform: scale(1.035);
}

.cfsu-product__content {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	padding: 9px;
}

.cfsu-product__title {
	display: -webkit-box;
	min-height: 31px;
	overflow: hidden;
	color: var(--cfsu-text);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.38;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cfsu-product__title:hover,
.cfsu-product__title:focus {
	color: var(--cfsu-accent-dark);
	text-decoration: none;
}

.cfsu-product__bottom {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: 6px;
}

.cfsu-product__price {
	min-width: 0;
	margin-bottom: 7px;
	color: var(--cfsu-text);
	font-size: 13px;
	font-weight: 850;
	letter-spacing: -0.02em;
}

.cfsu-product__price del {
	display: block;
	margin-bottom: 1px;
	color: var(--cfsu-muted);
	font-size: 9px;
	font-weight: 500;
}

.cfsu-product__price ins {
	text-decoration: none;
}

/*
 * Matches the visual direction of the XootiX "Continue Shopping" button:
 * warm gold background, white text, compact sizing.
 */
.cfsu-add-button {
	display: inline-flex;
	width: 100%;
	min-height: 32px;
	align-items: center;
	justify-content: center;
	padding: 6px 8px;
	border: 1px solid #c5a15b;
	border-radius: 4px;
	background: #c5a15b;
	box-shadow: none;
	color: #ffffff;
	font: inherit;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.cfsu-add-button::before,
.cfsu-add-button::after {
	display: none;
	content: none;
}

.cfsu-add-button:hover,
.cfsu-add-button:focus-visible {
	border-color: #aa8645;
	background: #aa8645;
	color: #ffffff;
	transform: translateY(-1px);
}

.cfsu-add-button:disabled {
	cursor: wait;
	opacity: 0.72;
	transform: none;
}

.cfsu-add-button.is-added {
	border-color: var(--cfsu-success);
	background: var(--cfsu-success);
	cursor: default;
}

@media (max-width: 420px) {
	.cfsu-panel {
		padding-inline: 12px;
	}

	.cfsu-product-list {
		grid-auto-columns: calc((100% - 58px) / 2);
		gap: 9px;
	}

	.cfsu-product {
		min-height: 184px;
	}

	.cfsu-product__image-link {
		height: 84px;
		flex-basis: 84px;
		padding: 8px;
	}

	.cfsu-product__content {
		padding: 8px;
	}

	.cfsu-product__title {
		font-size: 10px;
	}

	.cfsu-product__price {
		font-size: 12px;
	}

	.cfsu-add-button {
		min-height: 31px;
		padding-inline: 6px;
		font-size: 9.5px;
	}
}

@media (max-width: 350px) {
	.cfsu-product-list {
		grid-auto-columns: calc((100% - 50px) / 2);
		gap: 8px;
	}

	.cfsu-product {
		min-height: 178px;
	}

	.cfsu-product__image-link {
		height: 78px;
		flex-basis: 78px;
	}

	.cfsu-product__title {
		font-size: 9.5px;
	}

	.cfsu-add-button {
		font-size: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cfsu-xootix-mount,
	.cfsu-progress__fill,
	.cfsu-product,
	.cfsu-product__image,
	.cfsu-add-button,
	.cfsu-add-button::after {
		transition: none;
	}
}