#search_mini_form > input#search{
	width:1036px;
}

@media (max-width: 1535px) {
	#search_mini_form > input#search{
		width:863px;
	}
}
@media (max-width: 1280px) {
	#search_mini_form > input#search{
		width: 599px;
	}
}
@media (max-width: 674px) {
	#search_mini_form > input#search{
		width: 541px;
	}
}

/* Amasty Shop By visual swatches in layered navigation. Two upstream problems:
   the colour <span> is given a height class but no width (the module's own Tailwind component
   CSS is not part of this theme's build), and the surrounding link carries px-2/py-1 padding
   plus the span has its own border, which left the colour floating inside a second box.
   Zero that padding and let the colour fill the rectangle. The :has() guard keeps the "Multi"
   text chip (h-auto, not h-6) padded as designed. */
.am-swatch-wrapper .swatch-option:has(.am-swatch-image.h-6) {
	padding: 0;
}
.am-swatch-wrapper .am-swatch-image.h-6 {
	width: 100%;
	height: 100%;
	border: 0;
}

/* 2026-10-01: header search suggestions. The header lays the search form out as a flex row
   (input | button), and the autocomplete list renders as a third flex item inside that row, so
   typing squeezed the input to a stub and the suggestions took over the bar on all three stores.
   Drop the list below the form as an overlay instead. */
#search_mini_form {
	position: relative;
}
#search_mini_form > div.flex-col {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	margin-top: 4px;
	background: #fff;
	border-radius: 0.375rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15), 0 4px 6px -4px rgba(0, 0, 0, .1);
	max-height: 70vh;
	overflow-y: auto;
}


/* 2026-10-04: cookie notice (web/cookie/cookie_restriction = 1, owner-approved for the AI Live Agent rollout).
   The template's Tailwind classes (fixed bottom-6 left-6, bg-white/90, bg-blue-700...) are not in this theme's
   compiled CSS - the banner never ran before - so it is styled here in full. The bottom-right corner stays free for
   the chat bubble: the card sits 96px up on mobile and stops 104px short of the right edge on desktop. */
#notice-cookie-block div[role="dialog"] {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 96px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, .97);
	color: #1f2937;
	font-size: 14px;
	line-height: 1.4;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}
#notice-cookie-block div[role="dialog"] > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
}
#notice-cookie-block div[role="dialog"] > div a {
	color: #6b7280;
	display: inline-flex;
}
#notice-cookie-block #btn-cookie-allow {
	background: #000;
	color: #fff;
	font-weight: 700;
	padding: 12px 20px;
	border-radius: 6px;
	text-align: center;
	white-space: nowrap;
}
#notice-cookie-block #btn-cookie-allow:hover {
	background: #333;
}
@media (min-width: 768px) {
	#notice-cookie-block div[role="dialog"] {
		flex-direction: row;
		align-items: center;
		bottom: 24px;
		left: 24px;
		right: auto;
		max-width: 560px; /* bottom-left card: the right side stays free for SalesIQ now, the AI chat bubble later */
		padding: 12px 16px 12px 24px;
	}
	#notice-cookie-block div[role="dialog"] > div {
		flex: 1;
		justify-content: flex-start;
	}
}