.xtool-loop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	border: 1px solid #E5E0D8;
	border-radius: 8px;
}

.xtool-loop-toolbar__notice {
	padding: 16px;
	border: 1px dashed #D4CEC7;
	border-radius: 6px;
	color: #8A8680;
	font-size: 13px;
}

.xtool-loop-toolbar__count {
	font-size: 14px;
	color: #4A4742;
	white-space: nowrap;
}

.xtool-loop-toolbar__right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-left: auto;
}

/* ── Search ──────────────────────────────────────────────────────── */

.xtool-loop-toolbar__search {
	position: relative;
	width: 240px;
	max-width: 100%;
}

.xtool-loop-toolbar__search-icon {
	position: absolute !important;
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	width: 16px !important;
	height: 16px !important;
	color: #8A8680;
	pointer-events: none;
	z-index: 1;
}

.xtool-loop-toolbar__search-icon svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

/* !important throughout — a theme's own global input reset (a very common
   "input,textarea{padding:0;border:...}" rule) can otherwise silently win
   over this and push the placeholder text underneath the icon, since the
   icon itself is absolutely positioned independent of the input's own
   padding. Confirmed via an isolated render that this exact markup/CSS
   has no overlap on its own — the padding just needs to survive contact
   with whatever the live theme brings. */
.xtool-loop-toolbar__search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 8px 12px 8px 36px !important;
	border: 1px solid #E5E0D8 !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: #1A1814 !important;
	font-size: 14px;
	line-height: 1.4;
}

.xtool-loop-toolbar__search-input:focus {
	outline: none !important;
	border-color: #1C1C1E !important;
}

/* Kill the native browser "clear" X and magnifier that a plain
   type="search" input can add in some browsers — this widget already
   renders its own icon and doesn't need a duplicate. */
.xtool-loop-toolbar__search-input::-webkit-search-decoration,
.xtool-loop-toolbar__search-input::-webkit-search-cancel-button,
.xtool-loop-toolbar__search-input::-webkit-search-results-button,
.xtool-loop-toolbar__search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

/* ── Sort ────────────────────────────────────────────────────────── */

/* !important on the layout-critical properties (not font-size/line-height,
   which the widget's own Typography group control needs to keep winning
   by plain source order) — same theme-conflict hardening already proven
   necessary on the Search Box right next to this one. */
.xtool-loop-toolbar__sort-select {
	padding: 8px 32px 8px 12px !important;
	border: 1px solid #E5E0D8 !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	background: #fff
		url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
		no-repeat right 10px center / 14px !important;
	color: #1A1814 !important;
	font-size: 14px;
	line-height: 1.4;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
}

.xtool-loop-toolbar__sort-select:focus {
	outline: none !important;
	border-color: #1C1C1E !important;
}

/* ── View toggle ─────────────────────────────────────────────────── */

.xtool-loop-toolbar__view-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
}

.xtool-loop-toolbar__view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #8A8680;
	font-size: 16px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.xtool-loop-toolbar__view-btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xtool-loop-toolbar__view-btn.is-active {
	color: #1C1C1E;
	background: #F2EDE7;
}

@media (max-width: 767px) {
	.xtool-loop-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.xtool-loop-toolbar__right {
		margin-left: 0;
		width: 100%;
	}

	.xtool-loop-toolbar__search {
		width: 100%;
	}

	/* "Mobile Layout: Keep Horizontal" (mobile_layout control) — overrides
	   every rule above so the whole toolbar stays a single non-wrapping row
	   instead of stacking. Content that doesn't fit (e.g. Search Box's own
	   fixed default width alongside Sort + the view-toggle icons) scrolls
	   horizontally rather than wrapping to a second line or overflowing off
	   screen — same "let it scroll instead of wrap/break" convention this
	   codebase already uses for the Product Images thumbnail row and the
	   Loop Filter groups. */
	.xtool-loop-toolbar.xtool-loop-toolbar--mobile-row {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.xtool-loop-toolbar.xtool-loop-toolbar--mobile-row .xtool-loop-toolbar__count {
		flex: 0 0 auto;
	}

	.xtool-loop-toolbar.xtool-loop-toolbar--mobile-row .xtool-loop-toolbar__right {
		flex-wrap: nowrap;
		flex: 0 0 auto;
		width: auto;
		margin-left: 0;
	}

	/* flex-basis (not width) here deliberately — a definite flex-basis wins
	   over the `width` property for main-axis sizing per the flexbox spec,
	   so this can't fight the Search Box "Width" control's own selector
	   (which sets `width`, not `flex-basis`) even if a user has also set a
	   mobile-specific value there — the two controls' CSS simply never
	   touches the same property. */
	.xtool-loop-toolbar.xtool-loop-toolbar--mobile-row .xtool-loop-toolbar__search {
		flex: 0 0 200px;
	}
}