/**
 * Fancy Search Panel — Frontend Styles (v2.1)
 * High-End Luxury E-Commerce Aesthetic (Organized, Lucrative & Robust)
 * Fully compatible with WoodMart & standard WooCommerce themes.
 */

/* ============================================================
   GLOBAL RESET & TOKENS (Strictly scoped under .fs-root)
   ============================================================ */
.fs-root,
.fs-root *,
.fs-root *::before,
.fs-root *::after {
	box-sizing: border-box !important;
}

.fs-root {
	--fs-primary: #111827;
	--fs-primary-hover: #1f2937;
	--fs-text-main: #0f172a;
	--fs-text-sub: #475569;
	--fs-text-muted: #94a3b8;
	--fs-border: #e2e8f0;
	--fs-border-focus: #0f172a;
	--fs-bg-main: #ffffff;
	--fs-bg-subtle: #f8fafc;
	--fs-bg-hover: #f1f5f9;
	--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--fs-shadow-glow: 0 0 0 4px rgba(15, 23, 42, 0.06);
	--fs-shadow-btn: 0 2px 6px rgba(15, 23, 42, 0.2);
	--fs-radius-pill: 999px;
	--fs-radius-card: 10px;
	--fs-panel-w: 420px;
	--fs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   TRIGGER BUTTON (Header Icon)
   ============================================================ */
.fs-root {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
}

.fs-trigger,
.fs-trigger:active,
.fs-trigger:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: inherit !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.fs-trigger svg {
	display: block !important;
	width: var(--fs-trigger-icon-size, 20px) !important;
	height: var(--fs-trigger-icon-size, 20px) !important;
}

.fs-trigger:hover {
	opacity: 0.65 !important;
	transform: scale(1.05) !important;
}

/* ============================================================
   BACKGROUND OVERLAY
   ============================================================ */
.fs-overlay {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(15, 23, 42, 0.45) !important;
	backdrop-filter: blur(3px) !important;
	-webkit-backdrop-filter: blur(3px) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: 99997 !important;
	transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.fs-open .fs-overlay {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ============================================================
   OFF-CANVAS SLIDE-OUT PANEL
   ============================================================ */
.fs-panel {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	height: 100% !important;
	height: 100dvh !important;
	width: var(--fs-panel-w) !important;
	max-width: 100vw !important;
	background: var(--fs-bg-main) !important;
	z-index: 99998 !important;
	display: flex !important;
	flex-direction: column !important;
	font-family: inherit !important;
	transform: translateX(105%) !important;
	transition: transform 0.4s var(--fs-ease) !important;
	box-shadow: -12px 0 35px rgba(0, 0, 0, 0.08) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

.fs-open .fs-panel {
	transform: translateX(0) !important;
}

.fs-panel[hidden] {
	display: none !important;
}

/* ============================================================
   PANEL HEADER
   ============================================================ */
.fs-panel__head {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--fs-border) !important;
	background: var(--fs-bg-main) !important;
	flex-shrink: 0 !important;
}

.fs-panel__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--fs-text-main) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

/* --- Close (X) Button --- */
.fs-close,
.fs-close:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	background: var(--fs-bg-subtle) !important;
	border: 1px solid var(--fs-border) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: var(--fs-text-sub) !important;
	line-height: 0 !important;
	transition: all 0.25s var(--fs-ease) !important;
}

.fs-close svg {
	width: 15px !important;
	height: 15px !important;
	display: block !important;
	stroke: currentColor !important;
}

.fs-close:hover,
.fs-close:focus {
	background: var(--fs-primary) !important;
	border-color: var(--fs-primary) !important;
	color: #ffffff !important;
	transform: rotate(90deg) scale(1.06) !important;
	outline: none !important;
}

/* ============================================================
   PANEL BODY (Scrollable container)
   ============================================================ */
.fs-panel__body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	padding: 24px !important;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.fs-panel__body::-webkit-scrollbar {
	width: 5px;
}

.fs-panel__body::-webkit-scrollbar-track {
	background: transparent;
}

.fs-panel__body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

/* ============================================================
   ORGANIZED SEARCH FORM
   ============================================================ */
.fs-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
}

/* --- Primary Search Input Wrapper --- */
.fs-field {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fs-input {
	display: block !important;
	width: 100% !important;
	height: 48px !important;
	border: 1.5px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-pill) !important;
	padding: 0 calc(var(--fs-submit-icon-size, 16px) + 32px) 0 20px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	color: var(--fs-text-main) !important;
	background: var(--fs-bg-main) !important;
	box-shadow: var(--fs-shadow-sm) !important;
	outline: none !important;
	line-height: 48px !important;
	margin: 0 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.fs-input:focus {
	border-color: var(--fs-border-focus) !important;
	box-shadow: var(--fs-shadow-glow) !important;
}

.fs-input::placeholder {
	color: var(--fs-text-muted) !important;
	font-weight: 400 !important;
	opacity: 1 !important;
}

.fs-input::-webkit-search-cancel-button,
.fs-input::-webkit-search-decoration {
	display: none !important;
}

/* --- Search Submit Button (Sleek Inset Pill Button) --- */
.fs-submit,
.fs-submit:visited {
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	width: calc(var(--fs-submit-icon-size, 16px) + 20px) !important;
	height: calc(var(--fs-submit-icon-size, 16px) + 20px) !important;
	min-width: calc(var(--fs-submit-icon-size, 16px) + 20px) !important;
	min-height: calc(var(--fs-submit-icon-size, 16px) + 20px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--fs-primary) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: var(--fs-shadow-btn) !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: #ffffff !important;
	line-height: 0 !important;
	text-decoration: none !important;
	transition: all 0.2s var(--fs-ease) !important;
	z-index: 2 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.fs-submit svg {
	width: var(--fs-submit-icon-size, 16px) !important;
	height: var(--fs-submit-icon-size, 16px) !important;
	display: block !important;
	stroke: currentColor !important;
	pointer-events: none !important;
}

.fs-submit:hover,
.fs-submit:focus {
	background: var(--fs-primary-hover) !important;
	transform: translateY(-50%) scale(1.08) !important;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3) !important;
	color: #ffffff !important;
	outline: none !important;
}

/* --- Category Filter Dropdown --- */
.fs-cats {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fs-cat {
	display: block !important;
	width: 100% !important;
	height: 42px !important;
	line-height: 40px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	border: 1.5px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-pill) !important;
	background-color: var(--fs-bg-subtle) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 13px !important;
	padding: 0 38px 0 18px !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	color: var(--fs-text-sub) !important;
	cursor: pointer !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	transition: all 0.2s ease !important;
}

.fs-cat:focus,
.fs-cat:hover {
	border-color: #cbd5e1 !important;
	background-color: var(--fs-bg-main) !important;
	color: var(--fs-text-main) !important;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.04) !important;
}

/* --- Trending Searches Chips --- */
.fs-trending {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px 8px !important;
	margin: 0 0 16px 0 !important;
}

.fs-trending__label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--fs-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

.fs-trending__tags {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.fs-trending__tag {
	background: var(--fs-bg-subtle) !important;
	border: 1px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-pill) !important;
	padding: 4px 10px !important;
	font-size: 12px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	color: var(--fs-text-sub) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	line-height: 1.2 !important;
	outline: none !important;
}

.fs-trending__tag:hover,
.fs-trending__tag:focus {
	background: var(--fs-primary) !important;
	border-color: var(--fs-primary) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

/* --- Recent Searches Section --- */
.fs-recent {
	margin: 0 0 16px 0 !important;
	padding: 10px 12px !important;
	background: var(--fs-bg-subtle) !important;
	border: 1px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-card) !important;
}

.fs-recent__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 8px !important;
}

.fs-recent__label {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--fs-text-muted) !important;
}

.fs-recent__clear {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 11px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	color: #ef4444 !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	line-height: 1 !important;
}

.fs-recent__tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.fs-recent__tag {
	background: var(--fs-bg-main) !important;
	border: 1px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-pill) !important;
	padding: 4px 10px !important;
	font-size: 12px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	color: var(--fs-text-main) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	line-height: 1.2 !important;
	outline: none !important;
}

.fs-recent__tag:hover,
.fs-recent__tag:focus {
	border-color: var(--fs-primary) !important;
	color: var(--fs-primary) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   RESULTS / INSPIRATION SECTION
   ============================================================ */
.fs-results {
	margin-top: 6px !important;
}

.fs-results__head {
	margin: 0 0 14px 0 !important;
	padding: 0 0 10px 0 !important;
	border-bottom: 1px solid var(--fs-border) !important;
}

.fs-results__title {
	display: block !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--fs-text-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* --- Results List & Loading State --- */
.fs-results__list {
	position: relative !important;
	min-height: 50px !important;
	transition: opacity 0.2s ease !important;
}

.fs-results__list.fs-loading {
	opacity: 0.35 !important;
	pointer-events: none !important;
	min-height: 120px !important;
}

.fs-results__list.fs-loading::after {
	content: "" !important;
	position: absolute !important;
	top: 30px !important;
	left: 50% !important;
	width: 26px !important;
	height: 26px !important;
	margin-left: -13px !important;
	border: 2.5px solid #e2e8f0 !important;
	border-top-color: var(--fs-primary) !important;
	border-radius: 50% !important;
	animation: fs-spin 0.65s linear infinite !important;
}

@keyframes fs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
   PRODUCT CARDS (Clean Luxury Look)
   ============================================================ */
.fs-product {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 10px 12px !important;
	margin: 2px -12px !important;
	border-radius: var(--fs-radius-card) !important;
	text-decoration: none !important;
	transition: background-color 0.18s ease, transform 0.18s ease !important;
}

.fs-product:hover {
	background-color: var(--fs-bg-subtle) !important;
}

.fs-product__thumb {
	position: relative !important;
	flex: 0 0 62px !important;
	width: 62px !important;
	height: 62px !important;
	max-width: 62px !important;
	max-height: 62px !important;
	line-height: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: var(--fs-bg-subtle) !important;
	border: 1px solid #f1f5f9 !important;
}

.fs-product__thumb img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* --- Product Badges --- */
.fs-badge {
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	padding: 2px 4px !important;
	font-size: 8.5px !important;
	font-family: inherit !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	border-radius: 3px !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.fs-badge--sale {
	background: #ef4444 !important;
	color: #ffffff !important;
	box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4) !important;
}

.fs-badge--stock {
	background: #475569 !important;
	color: #ffffff !important;
	box-shadow: 0 1px 3px rgba(71, 85, 105, 0.4) !important;
}

.fs-product:hover .fs-product__thumb img {
	transform: scale(1.05) !important;
	opacity: 0.9 !important;
}

.fs-product__info {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	gap: 2px !important;
}

.fs-product__cat {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--fs-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.fs-product__title {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--fs-text-main) !important;
	text-decoration: none !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	transition: color 0.2s ease !important;
}

.fs-product:hover .fs-product__title {
	color: #2563eb !important;
}

.fs-product__price {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--fs-text-main) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.fs-product__price del {
	color: var(--fs-text-muted) !important;
	font-weight: 400 !important;
	margin-right: 4px !important;
}

.fs-product__price ins {
	text-decoration: none !important;
}

.fs-empty {
	color: var(--fs-text-muted) !important;
	font-size: 13.5px !important;
	padding: 24px 0 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* ============================================================
   VIEW ALL RESULTS LINK
   ============================================================ */
.fs-view-all {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	padding: 12px 20px !important;
	margin-top: 16px !important;
	background: var(--fs-bg-subtle) !important;
	border: 1px solid var(--fs-border) !important;
	border-radius: var(--fs-radius-pill) !important;
	text-align: center !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--fs-text-main) !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.fs-view-all--show {
	display: flex !important;
}

.fs-view-all:hover {
	background: var(--fs-primary) !important;
	border-color: var(--fs-primary) !important;
	color: #ffffff !important;
}

.fs-view-all__count {
	color: inherit !important;
	opacity: 0.7 !important;
	font-weight: 500 !important;
}

/* ============================================================
   BODY SCROLL LOCK
   ============================================================ */
body.fs-lock {
	overflow: hidden !important;
}

/* ============================================================
   RESPONSIVE OPTIMIZATIONS (Tablet & Mobile)
   ============================================================ */
@media (max-width: 768px) {
	.fs-root {
		--fs-panel-w: 380px;
	}
	.fs-panel__head {
		padding: 18px 20px !important;
	}
	.fs-panel__body {
		padding: 20px !important;
	}
}

@media (max-width: 575px) {
	.fs-root {
		--fs-panel-w: var(--fs-panel-mobile-w, 100vw);
	}
	.fs-panel {
		width: var(--fs-panel-mobile-w, 100vw) !important;
		max-width: 100vw !important;
		box-shadow: none !important;
	}
	.fs-panel__head {
		padding: 16px !important;
	}
	.fs-panel__title {
		font-size: 14px !important;
	}
	.fs-close {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
	}
	.fs-close svg {
		width: 14px !important;
		height: 14px !important;
	}
	.fs-panel__body {
		padding: 16px !important;
	}
	.fs-input {
		height: 46px !important;
		line-height: 46px !important;
		font-size: 13.5px !important;
		padding: 0 calc(var(--fs-submit-icon-size, 16px) + 28px) 0 16px !important;
	}
	.fs-submit {
		width: calc(var(--fs-submit-icon-size, 16px) + 18px) !important;
		height: calc(var(--fs-submit-icon-size, 16px) + 18px) !important;
		min-width: calc(var(--fs-submit-icon-size, 16px) + 18px) !important;
		min-height: calc(var(--fs-submit-icon-size, 16px) + 18px) !important;
		right: 6px !important;
	}
	.fs-submit svg {
		width: var(--fs-submit-icon-size, 15px) !important;
		height: var(--fs-submit-icon-size, 15px) !important;
	}
	.fs-cat {
		height: 40px !important;
		line-height: 38px !important;
		font-size: 13px !important;
		padding: 0 34px 0 16px !important;
	}
	.fs-product {
		padding: 8px 10px !important;
		margin: 2px -10px !important;
		gap: 12px !important;
	}
	.fs-product__thumb {
		flex: 0 0 54px !important;
		width: 54px !important;
		height: 54px !important;
		max-width: 54px !important;
		max-height: 54px !important;
	}
}

/* ============================================================
   FLOATING CART WIDGET (Matching Reference UI)
   ============================================================ */
.fs-floating-cart {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 99990 !important;
	display: flex !important;
	flex-direction: column !important;
	width: 82px !important;
	text-decoration: none !important;
	box-shadow: -2px 5px 20px rgba(0, 0, 0, 0.14) !important;
	overflow: hidden !important;
	cursor: pointer !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
	line-height: 1.2 !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.fs-floating-cart *,
.fs-floating-cart *::before,
.fs-floating-cart *::after {
	box-sizing: border-box !important;
}

/* --- Position: Right Edge (Default) --- */
.fs-floating-cart--right {
	right: 0 !important;
	left: auto !important;
	border-radius: 12px 0 0 12px !important;
}

.fs-floating-cart--right:hover,
.fs-floating-cart--right:focus {
	transform: translateY(-50%) translateX(-4px) !important;
	box-shadow: -4px 8px 26px rgba(0, 0, 0, 0.22) !important;
}

/* --- Position: Left Edge --- */
.fs-floating-cart--left {
	left: 0 !important;
	right: auto !important;
	border-radius: 0 12px 12px 0 !important;
	box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.14) !important;
}

.fs-floating-cart--left:hover,
.fs-floating-cart--left:focus {
	transform: translateY(-50%) translateX(4px) !important;
	box-shadow: 4px 8px 26px rgba(0, 0, 0, 0.22) !important;
}

/* --- Upper Block (Colored: Icon + Count) --- */
.fs-fc-top {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--fs-fc-color, #f27a1a) !important;
	padding: 12px 6px 10px !important;
	text-align: center !important;
	gap: 4px !important;
}

.fs-fc-icon {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
	stroke: #ffffff !important;
	stroke-width: 2.2 !important;
	fill: none !important;
	pointer-events: none !important;
	transition: transform 0.2s ease !important;
}

.fs-floating-cart:hover .fs-fc-icon {
	transform: scale(1.1) !important;
}

.fs-fc-count {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
	letter-spacing: -0.01em !important;
}

/* --- Lower Block (White: Subtotal Price) --- */
.fs-fc-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #ffffff !important;
	padding: 8px 6px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
	text-align: center !important;
	min-height: 32px !important;
}

.fs-fc-price {
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--fs-fc-color, #f27a1a) !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
}

.fs-fc-price .woocommerce-Price-amount,
.fs-fc-price .amount {
	color: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
}

.fs-fc-price .woocommerce-Price-currencySymbol {
	color: inherit !important;
	font-weight: inherit !important;
	margin-right: 1px !important;
}

/* --- Mobile Viewports (≤575px) --- */
@media (max-width: 575px) {
	.fs-floating-cart {
		width: 72px !important;
		top: 55% !important;
	}
	.fs-fc-top {
		padding: 10px 4px 8px !important;
		gap: 3px !important;
	}
	.fs-fc-icon {
		width: 20px !important;
		height: 20px !important;
	}
	.fs-fc-count {
		font-size: 11.5px !important;
	}
	.fs-fc-bottom {
		padding: 6px 4px !important;
		min-height: 28px !important;
	}
	.fs-fc-price {
		font-size: 11.5px !important;
	}
	.fs-fc-shipping,
	.fs-fc-discount {
		font-size: 8.5px !important;
		padding: 4px 3px !important;
	}
}

/* --- Floating Cart: Free Shipping Goal Notification --- */
.fs-fc-shipping {
	display: block !important;
	background: #0f172a;
	color: #f8fafc;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding: 5px 4px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fs-fc-shipping,
.fs-fc-shipping * {
	color: inherit;
}

.fs-fc-shipping--unlocked {
	background: #059669;
	color: #ffffff;
}

/* --- Floating Cart: Quantity Discount Upsell Notification --- */
.fs-fc-discount {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: #4f46e5;
	color: #ffffff;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding: 5px 4px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
	gap: 3px !important;
	transition: background-color 0.2s ease !important;
}

.fs-fc-discount,
.fs-fc-discount * {
	color: inherit;
}

.fs-fc-discount--unlocked {
	background: #10b981;
	color: #ffffff;
}

.fs-fc-disc-text {
	display: block !important;
	line-height: 1.2 !important;
}

.fs-fc-disc-action {
	display: inline-block !important;
	padding: 2px 7px !important;
	background: #ffffff !important;
	color: #1e293b !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
	margin-top: 1px !important;
	user-select: none !important;
}

.fs-fc-disc-action:hover {
	transform: scale(1.06) !important;
	background: #f8fafc !important;
}

.fs-fc-disc-action--remove {
	background: rgba(239, 68, 68, 0.9) !important;
	color: #ffffff !important;
	padding: 1px 5px !important;
	border-radius: 3px !important;
}

.fs-fc-disc-action--remove:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
}

/* ============================================================
   CART & CHECKOUT 1-CLICK DISCOUNT CLAIM BANNER
   ============================================================ */
.fs-discount-banner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px 18px !important;
	background-color: var(--fs-db-bg, #ecfdf5) !important;
	border: 1.5px solid var(--fs-db-border, #6ee7b7) !important;
	border-radius: 10px !important;
	padding: 14px 20px !important;
	margin: 0 0 24px 0 !important;
	color: var(--fs-db-color, #065f46) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	transition: all 0.25s ease !important;
}

.fs-discount-banner__content {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex: 1 1 auto !important;
	min-width: 220px !important;
}

.fs-discount-banner__icon {
	font-size: 24px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}

.fs-discount-banner__message {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: inherit !important;
}

.fs-discount-banner__message strong {
	font-weight: 800 !important;
	color: inherit !important;
}

.fs-discount-banner__actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
}

.fs-discount-banner__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 9px 20px !important;
	background-color: var(--fs-db-btn-bg, #059669) !important;
	color: var(--fs-db-btn-color, #ffffff) !important;
	border: none !important;
	border-radius: 7px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
	text-decoration: none !important;
}

.fs-discount-banner__btn:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
	opacity: 0.95 !important;
}

.fs-discount-banner__btn:active {
	transform: translateY(0) !important;
}

.fs-discount-banner__btn.fs-loading,
.fs-fc-disc-action.fs-loading {
	opacity: 0.65 !important;
	pointer-events: none !important;
}

.fs-discount-banner__applied-tag {
	display: inline-flex !important;
	align-items: center !important;
	padding: 7px 14px !important;
	background: rgba(16, 185, 129, 0.15) !important;
	border: 1px solid rgba(16, 185, 129, 0.4) !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: inherit !important;
	line-height: 1.2 !important;
}

.fs-discount-banner__btn--remove {
	padding: 7px 14px !important;
	background: transparent !important;
	color: #ef4444 !important;
	border: 1px solid #fca5a5 !important;
	box-shadow: none !important;
	font-size: 12.5px !important;
}

.fs-discount-banner__btn--remove:hover {
	background: #fee2e2 !important;
	color: #b91c1c !important;
	box-shadow: none !important;
}

@media (max-width: 600px) {
	.fs-discount-banner {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 12px 14px !important;
		gap: 12px !important;
	}
	.fs-discount-banner__actions {
		width: 100% !important;
		justify-content: flex-end !important;
	}
	.fs-discount-banner__btn {
		width: 100% !important;
	}
}

/* --- Floating Cart: Add-to-Cart Shake/Pulse Animation --- */
.fs-floating-cart.fs-fc-shake {
	animation: fs-fc-shake 0.75s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes fs-fc-shake {
	10%, 90% {
		transform: translateY(-50%) translate3d(-3px, 0, 0) scale(1.08);
	}
	20%, 80% {
		transform: translateY(-50%) translate3d(5px, 0, 0) scale(1.08);
	}
	30%, 50%, 70% {
		transform: translateY(-50%) translate3d(-6px, 0, 0) scale(1.12);
	}
	40%, 60% {
		transform: translateY(-50%) translate3d(6px, 0, 0) scale(1.12);
	}
	100% {
		transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
	}
}