/* FT Product Search: results-page note and discontinued label. */
.fts-note {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	background: var( --brass-50, #FEF8ED );
	border-left: 4px solid var( --brass-400, #CA9E4E );
}

.fts-discontinued {
	margin: 0.3em 0 0;
	font-size: 0.85em;
	line-height: 1.4;
}

.fts-badge {
	display: inline-block;
	padding: 0.1em 0.45em;
	border-radius: 3px;
	background: var( --espresso-600, #532E10 );
	color: var( --white, #FFFFFF );
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * Header search box ("Espresso Well", operator chose design B 2026-10-06; replaces the Task 16 white
 * pill). The form is a dark espresso pill with a brass edge: magnifier drawn inside on the left
 * (decoration), the box, a clear button the script adds, and a gold round Search button (in the header
 * markup, so Enter and the button work with JavaScript off). On the cream desktop menu row the pill is
 * espresso with a dark-gold edge; on the espresso tablet/phone rows it is one shade lighter with a gold
 * edge so it still reads as a box. The drop-down hangs 10px under the pill at exactly its width. Where
 * the form sits in the Fast Tracks header (GP Element 160799) is set in the "Header placement" rules below.
 */
.fts-search-form {
	position: relative;
	display: flex;
	gap: 6px;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	margin: 0;
	padding: 0 3px 0 46px;
	border: 1.5px solid var( --brass-600, #98692B );
	background: var( --espresso-900, #200A01 ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CA9E4E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 18px center / 18px 18px;
	border-radius: 24px;
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.fts-search-row .fts-search-form {
	height: 52px;
	border-color: var( --brass-400, #CA9E4E );
	background-color: var( --espresso-800, #2C1305 );
	border-radius: 26px;
}

.fts-search-form:focus-within {
	border-color: var( --brass-400, #CA9E4E );
	box-shadow: var( --ring, 0 0 0 3px rgba( 176, 131, 52, 0.45 ) );
}

.fts-search-form input[type="search"].site-search-box,
.fts-search-form input[type="search"].site-search-box:focus {
	flex: 1;
	width: auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var( --sand-100, #FFF3DC );
	font: 500 16px/1.2 Montserrat, sans-serif;
	-webkit-appearance: none;
	appearance: none;
}

.fts-search-form input[type="search"].site-search-box::placeholder {
	color: var( --sand-400, #CBB489 );
	opacity: 1;
}

.fts-search-form input[type="search"].site-search-box::-webkit-search-cancel-button {
	display: none;
}

.fts-clear {
	flex: none;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF3DC' stroke-width='2.4'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	cursor: pointer;
}

.fts-clear:hover,
.fts-clear:focus {
	background-color: rgba( 255, 243, 220, 0.14 );
}

.fts-clear[hidden] {
	display: none;
}

/* The gold round Search button at the right end of the pill. */
.fts-search-form .fts-go {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var( --brass-400, #CA9E4E ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23200A01' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
	cursor: pointer;
	transition: background-color 120ms ease-out;
}

.fts-search-row .fts-go {
	width: 44px;
	height: 44px;
	border-radius: 22px;
}

.fts-search-form .fts-go:hover,
.fts-search-form .fts-go:focus-visible {
	background-color: var( --brass-500, #B4863B );
}

.fts-search-form .fts-go:focus-visible {
	outline: 2px solid var( --sand-100, #FFF3DC );
	outline-offset: 2px;
}

/* Drop-down (Task 7, restyled in Task 16). */
.fts-anchor {
	position: relative;
}

.fts-dropdown {
	position: absolute;
	z-index: 9999;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	box-sizing: border-box;
	max-height: 70vh;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	text-align: left;
	background: var( --white, #FFFFFF );
	border-radius: 14px;
	box-shadow: var( --shadow-lg, 0 8px 24px rgba( 37, 20, 9, 0.14 ), 0 2px 6px rgba( 37, 20, 9, 0.10 ) );
	color: var( --espresso-900, #200A01 );
	font-family: Montserrat, sans-serif;
	container-type: inline-size;
}

.fts-dropdown[hidden] {
	display: none;
}

.fts-dropdown li {
	margin: 0;
}

.fts-heading {
	padding: 16px 24px 8px;
	color: var( --sand-600, #6E5A34 );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.fts-item a {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 24px;
	color: var( --espresso-900, #200A01 );
	text-decoration: none;
}

.fts-item img {
	flex: none;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1px solid var( --sand-300, #E9D2A8 );
	border-radius: 6px;
	background: var( --sand-100, #FFF3DC );
	object-fit: contain;
}

.fts-item[aria-selected="true"],
.fts-item:hover,
.fts-all[aria-selected="true"],
.fts-all:hover {
	background: var( --brass-50, #FEF8ED );
}

.fts-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.fts-sku {
	font-size: 15px;
	font-weight: 700;
}

.fts-name {
	overflow: hidden;
	color: var( --espresso-700, #3E2009 );
	font-size: 13px;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fts-disc {
	align-self: flex-start;
	margin-top: 0.15em;
	padding: 0 0.4em;
	border-radius: 3px;
	background: var( --espresso-600, #532E10 );
	color: var( --white, #FFFFFF );
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
}

.fts-repl {
	font-size: 0.8em;
}

.fts-label,
.fts-empty {
	padding: 8px 24px;
	color: var( --sand-600, #6E5A34 );
	font-size: 13px;
}

.fts-empty {
	padding: 16px 24px;
}

.fts-label {
	font-weight: 600;
}

.fts-all {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-top: 1px solid var( --sand-300, #E9D2A8 );
	background: var( --sand-100, #FFF3DC );
	cursor: pointer;
}

.fts-all a {
	color: var( --brass-700, #7C551F );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.fts-hint {
	color: var( --sand-600, #6E5A34 );
	font-size: 12px;
	white-space: nowrap;
}

/* The keyboard hint only where it fits (desktop, wide box). */
@container (max-width: 539px) {
	.fts-hint {
		display: none;
	}
}

.fts-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fts-backdrop {
	display: none;
}

@media (max-width: 1024px) {
	.fts-hint {
		display: none;
	}
}

/*
 * Phone: slightly smaller pill with no magnifier inside (the gold button carries it, design B), so the
 * short hint has the room; tighter rows, short footer, and the page dimmed under the open list.
 */
@media (max-width: 767px) {
	.fts-search-form,
	.fts-search-row .fts-search-form {
		height: 50px;
		padding-left: 20px;
		background-image: none;
		border-radius: 25px;
	}

	.fts-search-form .fts-go {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23200A01' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
		background-size: 20px 20px;
	}

	.fts-clear {
		width: 34px;
		height: 34px;
		border-radius: 17px;
		background-size: 14px 14px;
	}

	.fts-dropdown {
		border-radius: 12px;
		box-shadow: var( --shadow-lg, 0 8px 24px rgba( 37, 20, 9, 0.14 ), 0 2px 6px rgba( 37, 20, 9, 0.10 ) );
	}

	.fts-heading,
	.fts-for {
		display: none;
	}

	.fts-item a {
		gap: 12px;
		padding: 14px 18px;
	}

	.fts-item {
		border-bottom: 1px solid var( --sand-300, #E9D2A8 );
	}

	.fts-item img {
		width: 40px;
		height: 40px;
	}

	.fts-name {
		display: -webkit-box;
		white-space: normal;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.fts-all {
		justify-content: center;
		padding: 16px 18px;
		border-top: 0;
	}

	.fts-all a {
		font-size: 15px;
	}

	.fts-backdrop:not([hidden]) {
		position: absolute;
		z-index: 9;
		left: 0;
		right: 0;
		display: block;
		background: rgba( 32, 10, 1, 0.35 );
	}
}

/*
 * Header placement (Task 13, operator chose Option A 2026-10-05; widened 2026-10-06 when Knowledgebase
 * moved to the top bar). Desktop: the form ends the cream menu row (.ft-main-menu) and its block takes
 * the row's spare width. Tablet (768-1024 px) and phone (<= 767 px): the form sits alone on its own
 * espresso row under the header band, 30px clear all round (20px / 16px on a phone, to give the box room).
 * Breakpoints match GenerateBlocks' hideOnTablet / hideOnMobile.
 */
.ft-main-menu :has( > .fts-search-form ) {
	flex: 1 1 480px;
	min-width: 240px; /* narrow desktops: give way rather than push the menu off-screen */
	max-width: 620px;
}

.ft-main-menu .fts-search-form {
	flex: 1;
	min-width: 0;
}

.fts-search-row {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 30px;
	background: var( --espresso-900, #200A01 );
}

.fts-search-row .fts-search-form {
	width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fts-search-row--tablet {
		display: block;
	}
}

@media (max-width: 767px) {
	.fts-search-row--phone {
		display: block;
		padding: 20px 16px;
	}
}

/* Free template card and label (spec §6): a small brass tag, like the Discontinued badge. Fast Tracks
   design tokens with fallbacks (fast-tracks-design skill). */
.fts-tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background: var( --brass-400, #CA9E4E );
	color: var( --espresso-900, #200A01 );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
ul.products li.product.fts-template-card > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 100%;
	min-height: 180px;
	padding: 16px 14px;
	border: 1px dashed var( --brass-400, #CA9E4E );
	border-radius: 6px;
	background: var( --sand-100, #FFF3DC );
	color: var( --espresso-900, #200A01 );
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
}
ul.products li.product.fts-template-card > a:hover,
ul.products li.product.fts-template-card > a:focus-visible {
	border-style: solid;
	box-shadow: var( --shadow-brass, 0 2px 10px rgba( 199, 154, 65, 0.35 ) );
}
/* Staging check (Task 7): theme sizes made the text cramped and the link line pale, so the parts are
   sized here and the link line is dark ink with the kit's 3px brass underline. */
ul.products li.product.fts-template-card .fts-card-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
ul.products li.product.fts-template-card .fts-card-label { font-size: 14px; }
ul.products li.product.fts-template-card .fts-card-cta {
	margin-top: 4px;
	color: var( --espresso-900, #200A01 );
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var( --brass-400, #CA9E4E );
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
.fts-template-label { margin: 4px 0 0; }
/* No products found: the card alone (Results_Page::render_note), outside the theme's product grid, so
   it gets one tile's width here. */
ul.products.fts-card-only {
	display: block;
	max-width: 320px;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}
ul.products.fts-card-only li.product.fts-template-card {
	float: none;
	width: auto;
	margin: 0;
}