/* CT Live Search — base structural styles.
   Colors, sizes, fonts, borders etc. are all controlled from the Elementor
   Style tab and injected by Elementor itself via the {{WRAPPER}} selectors
   defined in the widget's controls — this file only handles layout/behaviour
   that isn't meant to be user-editable. */

.ctls-search-widget {
	position: relative;
	max-width: 100%;
}

/* Defensive fallback: WooCommerce's core stylesheet already hides
   .screen-reader-text (it's used inside get_price_html()'s sale-price
   markup for the "Original price was.../Current price is..." accessibility
   text). This search widget/page can appear on non-WooCommerce pages where
   that core stylesheet may not be enqueued, so this rule is repeated here
   to guarantee that text never becomes visible. */
.ctls-search-widget .screen-reader-text,
.ctls-search-page .screen-reader-text,
.ctls-results .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.ctls-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.ctls-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	box-sizing: border-box;
}

.ctls-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.ctls-icon img {
	display: block;
	object-fit: contain;
}

.ctls-icon-left {
	order: -1;
}

.ctls-icon-right {
	order: 1;
}

.ctls-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	margin-top: 4px;
	padding: 4px;
	box-sizing: border-box;
	grid-template-columns: repeat(1, 1fr);
	gap: 4px;
}

.ctls-results.ctls-active {
	display: grid;
}

/* Grid layout — product-card style (image on top) instead of the default
   horizontal list row, laid out in the configured number of columns. */
.ctls-results.ctls-layout-grid .ctls-result-item {
	border: 1px solid #eeeeee;
	border-radius: 6px;
}

.ctls-results.ctls-layout-grid .ctls-result-link {
	flex-direction: column;
}

.ctls-results.ctls-layout-grid .ctls-result-img,
.ctls-results.ctls-layout-grid .ctls-result-img-wrap {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ctls-results.ctls-layout-grid .ctls-result-info {
	width: 100%;
}

/* Carousel layout — same card look as Grid, but laid out in one scrollable
   row instead of wrapping, so it behaves like a horizontal product carousel
   without needing a separate JS slider engine. */
.ctls-results.ctls-layout-carousel.ctls-active {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.ctls-results.ctls-layout-carousel .ctls-result-item {
	flex: 0 0 calc((100% - (var(--ctls-carousel-cols, 2) - 1) * 4px) / var(--ctls-carousel-cols, 2));
	scroll-snap-align: start;
	border: 1px solid #eeeeee;
	border-radius: 6px;
}

.ctls-results.ctls-layout-carousel .ctls-result-link {
	flex-direction: column;
}

.ctls-results.ctls-layout-carousel .ctls-result-img,
.ctls-results.ctls-layout-carousel .ctls-result-img-wrap {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ctls-results.ctls-layout-carousel .ctls-view-all {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.ctls-result-wishlist {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	padding: 0;
	color: #333333;
	z-index: 2;
}

.ctls-result-wishlist svg {
	width: 15px;
	height: 15px;
}

.ctls-result-wishlist.active {
	color: #e53935;
}

.ctls-results.ctls-layout-grid .ctls-result-item,
.ctls-results.ctls-layout-carousel .ctls-result-item {
	position: relative;
}


.ctls-result-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	border-radius: 4px;
	transition: background-color 0.15s ease;
	min-width: 0;
}

.ctls-result-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

.ctls-result-img {
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 4px;
}

.ctls-result-img-wrap {
	position: relative;
	flex-shrink: 0;
	line-height: 0;
}

/* The [ctls_search_results] page always uses a grid-style card (unlike the
   dropdown, which also has a List mode with a small fixed-size thumbnail),
   so its image wrapper should always stretch full width here. */
.ctls-search-page .ctls-result-img-wrap {
	width: 100%;
}

.ctls-result-sale-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: #e53935;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 2px 6px;
	border-radius: 3px;
	line-height: 1.4;
}

.ctls-result-price-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ctls-result-discount {
	background-color: #2e7d32;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

.ctls-result-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ctls-result-title {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Applied via JS from the "Wrap Title Text" setting — kept in the plugin's
   own stylesheet (rather than relying only on Elementor's generated CSS)
   so it takes effect right away after an update. */
.ctls-results.ctls-wrap-titles .ctls-result-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: break-word;
	word-break: break-word;
}

.ctls-result-price {
	font-size: 13px;
}

.ctls-result-excerpt {
	font-size: 12px;
	opacity: 0.75;
}

.ctls-result-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	/* Both .ctls-result-item (dropdown) and .ctls-sp-item (results page) are
	   flex columns stretched to their grid row's height, so this pushes the
	   qty/Add-to-cart row to the bottom of every card — titles/prices/ratings
	   of different lengths no longer throw the button out of alignment. */
	margin-top: auto;
}

.ctls-qty-input {
	width: 50px;
	flex-shrink: 0;
	padding: 6px 4px;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #dddddd;
	border-radius: 3px;
}

.ctls-add-to-cart {
	/* Previously a fixed min-width:120px with flex-shrink:0 — on a narrow
	   column (e.g. 4+ cards per row) that hard floor, plus the qty input
	   next to it, was wider than the card itself and spilled out of it.
	   Letting the button shrink (down to a sane 72px floor) and wrap onto
	   its own line as a last resort means it now always stays inside its
	   card, at any column width. */
	flex: 1 1 72px;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #222222;
	background-color: #222222;
	color: #ffffff;
	border-radius: 3px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ctls-add-to-cart.ctls-loading {
	opacity: 0.6;
	cursor: default;
}

.ctls-no-results {
	grid-column: 1 / -1;
	padding: 14px;
	text-align: center;
	font-size: 13px;
	opacity: 0.7;
}

.ctls-view-all {
	grid-column: 1 / -1;
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	border-top: 1px solid #eeeeee;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
	box-sizing: border-box;
}

.ctls-view-all:hover {
	opacity: 0.75;
}

.ctls-branding {
	display: block;
	text-align: right;
	margin-top: 4px;
}

.ctls-branding a {
	text-decoration: none;
	font-weight: 600;
}

/* [ctls_search_results] standalone page */

.ctls-search-page {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

/* ---------- Categories sidebar ----------
 * A single bordered card (heading + list) rather than bare text sitting in
 * the page's own left margin, with a count badge and a highlighted active
 * state — closer to a typical WooCommerce category-archive filter widget.
 */
.ctls-sp-sidebar {
	flex: 0 0 240px;
	max-width: 240px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 18px;
	box-sizing: border-box;
}

.ctls-sp-sidebar h3 {
	margin: 0 0 14px;
	padding-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
	border-bottom: 2px solid #1f2430;
}

.ctls-sp-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctls-sp-cats li {
	margin-bottom: 2px;
}

.ctls-sp-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	font-size: 13px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ctls-sp-cat-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctls-sp-cats li > a:hover {
	background: #f6f7fb;
}

.ctls-sp-cat-count {
	flex: 0 0 auto;
	font-size: 11px;
	color: #9aa0b4;
	background: #f1f1f4;
	border-radius: 10px;
	padding: 1px 8px;
}

.ctls-sp-cat-active a {
	background: #1f2430;
	color: #ffffff;
	font-weight: 600;
}

.ctls-sp-cat-active .ctls-sp-cat-count {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.ctls-sp-no-cats {
	font-size: 13px;
	color: #9aa0b4;
	margin: 0;
}

.ctls-sp-main {
	flex: 1;
	min-width: 0;
}

.ctls-sp-heading {
	font-size: 15px;
	margin: 0 0 12px;
}

/* ---------- Suggestion chips ----------
 * Rendered as small pill buttons with an alternating two-tone background
 * (odd/even) instead of plain underlined links, so a row of suggestions
 * reads as a set of tappable options rather than inline text links.
 */
.ctls-sp-suggestions {
	margin-bottom: 20px;
}

.ctls-sp-suggestions h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7086;
}

.ctls-sp-suggestion-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ctls-sp-suggestion-chips a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	color: #1f2430;
	background: #f1f1f4;
	transition: transform 0.12s ease, opacity 0.12s ease;
}

.ctls-sp-suggestion-chips a:nth-child(even) {
	background: var(--ctls-popup-input-bg, #fdf3f4);
	color: var(--ctls-popup-accent, #e0546b);
}

.ctls-sp-suggestion-chips a:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

.ctls-sp-count {
	font-size: 13px;
	opacity: 0.75;
	margin-bottom: 16px;
}

.ctls-sp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
}

/* ---------- Product card ----------
 * White card, rounded corners, a soft hover lift, and a category label
 * above the title — matching the shop/category-archive card look instead
 * of the previous bare image + text stacked with no card surface at all.
 */
.ctls-sp-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	position: relative;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 12px;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	/* Grid/flex items default to min-width:auto, sized off their content
	   (e.g. the qty input + Add to Cart button not wrapping) rather than
	   their track's fair 1fr share — that was letting the last column push
	   past the container's right edge instead of shrinking with the rest,
	   forcing an unwanted horizontal scrollbar on the whole page. */
	min-width: 0;
}

.ctls-sp-item:hover {
	box-shadow: 0 8px 24px rgba(31, 36, 48, 0.08);
	transform: translateY(-2px);
}

.ctls-sp-wishlist {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	background: #ffffff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(31, 36, 48, 0.15);
}

.ctls-sp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.ctls-sp-toolbar .ctls-sp-count {
	margin: 0;
}

.ctls-sp-sorting {
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid #dddddd;
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
}

.ctls-sp-item-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.ctls-sp-item-img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
}

.ctls-sp-item-cat {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #9aa0b4;
	margin-top: 6px;
}

.ctls-sp-item-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
}

.ctls-sp-no-results {
	padding: 20px 0;
}

.ctls-sp-pagination {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
}

.ctls-sp-pagination a {
	text-decoration: none;
	font-weight: 600;
}

.ctls-sp-pagination .ctls-sp-page-status {
	font-size: 13px;
	opacity: 0.75;
}

/* ---------- Infinite scroll sentinel ----------
 * Sits at the bottom of the grid; IntersectionObserver in live-search.js
 * loads the next page once this scrolls into view, then either moves it
 * down (more pages left) or removes it entirely (last page reached).
 */
.ctls-sp-infinite-sentinel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
	padding: 16px;
	font-size: 13px;
	color: #9aa0b4;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ctls-sp-infinite-sentinel.ctls-sp-infinite-loading {
	opacity: 1;
}

.ctls-sp-infinite-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #e2e2e2;
	border-top-color: var(--ctls-popup-accent, #e0546b);
	animation: ctls-sp-spin 0.7s linear infinite;
}

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

@media (max-width: 767px) {
	.ctls-search-page {
		flex-direction: column;
	}

	.ctls-sp-sidebar {
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================================================
   Popup mode — full-screen search overlay: header, search bar, Browse
   Categories grid, Most Popular list, live results, keyboard-hint footer.
   Colours are CSS custom properties (set inline by the widget's "Popup
   Colours" Style-tab controls, see class-ctsuite-live-search-widget.php)
   with fallbacks here matching the default pink theme, so the popup still
   looks right even before anyone touches those controls.
   ========================================================================== */

.ctls-popup-mode .ctls-search-form {
	cursor: pointer;
}

.ctls-popup-mode .ctls-input {
	cursor: pointer;
}

.ctls-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--ctls-popup-overlay-bg, rgba(20, 16, 20, 0.55));
	padding: 6vh 16px 16px;
	box-sizing: border-box;
	overflow-y: auto;
}

.ctls-popup-overlay.ctls-popup-open {
	display: block;
}

body.ctls-popup-noscroll {
	overflow: hidden;
}

.ctls-popup {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	background: var(--ctls-popup-bg, #ffffff);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 86vh;
	box-sizing: border-box;
}

.ctls-popup-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px 14px;
	background: var(--ctls-popup-header-bg, #fdeef0);
	flex-shrink: 0;
}

.ctls-popup-title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ctls-popup-title-color, #1f2430);
}

.ctls-popup-subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--ctls-popup-subtitle-color, #6b7280);
}

.ctls-popup-close {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	color: #1f2430;
	cursor: pointer;
	padding: 0;
}

.ctls-popup-search {
	padding: 16px 22px 4px;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Dedicated positioning context for the icon + input pair, sized exactly
   to the input itself (no ancestor padding to account for), so the icon's
   "left" always lines up with the input's own left edge instead of the
   outer .ctls-popup-search padding box - that mismatch was why the icon
   used to sit on top of the typed text instead of to its left. */
.ctls-popup-search-box {
	position: relative;
}

.ctls-popup-search-box .ctls-popup-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--ctls-popup-accent, #e08a97);
	pointer-events: none;
}

/* Scoped to .ctls-popup-search-box (2 classes) instead of just
   .ctls-popup-input, and !important on the padding itself: some
   themes/page builders ship a global "input[type=text]" style for their
   own form fields that has equal-or-higher specificity and loads after
   this file, which was silently winning and pulling padding-left back
   down under the icon. This wins regardless of theme CSS load order. */
.ctls-popup-search-box .ctls-popup-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px 12px 44px !important;
	border-radius: 12px;
	border: 1px solid var(--ctls-popup-input-border, #f6d9dc);
	background: var(--ctls-popup-input-bg, #fdf3f4);
	font-size: 14px;
	outline: none;
}

.ctls-popup-input:focus {
	border-color: var(--ctls-popup-accent, #e08a97);
}

.ctls-popup-body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 22px 14px;
	box-sizing: border-box;
}

.ctls-popup-section-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ctls-popup-label-color, #9aa0b4);
}

.ctls-popup-popular-label {
	color: var(--ctls-popup-accent, #e0546b);
}

.ctls-popup-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.ctls-popup-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	border: 1px solid #f1f1f4;
	border-radius: 12px;
	padding: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ctls-popup-cat-card:hover,
.ctls-popup-cat-card.ctls-kbd-active {
	border-color: var(--ctls-popup-accent, #e08a97);
	background: var(--ctls-popup-input-bg, #fdf3f4);
}

.ctls-popup-cat-img-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #f6f2f0;
}

.ctls-popup-cat-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ctls-popup-cat-name {
	font-size: 12px;
	font-weight: 600;
	color: #1f2430;
	text-align: center;
}

.ctls-popup-list {
	display: flex;
	flex-direction: column;
}

/* Shared by the server-rendered "Most Popular" rows AND the JS-rendered
   live-search results inside the popup (renderPopupResults() in
   live-search.js uses this exact class), so search results look no
   different from the default panel. */
.ctls-popup-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}

.ctls-popup-row:hover,
.ctls-popup-row.ctls-kbd-active {
	background: var(--ctls-popup-input-bg, #fdf3f4);
}

.ctls-popup-row-img {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 8px;
	object-fit: cover;
}

.ctls-popup-row-img-empty {
	background: #f1f1f4;
}

.ctls-popup-row-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ctls-popup-row-title {
	font-size: 13px;
	font-weight: 600;
	color: #1f2430;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctls-popup-row-arrow {
	flex-shrink: 0;
	color: #b3b8c9;
	display: flex;
}

/* Category rows shown above the product rows once the person types a term
   that matches products in one or more categories - same row shape as
   .ctls-popup-row (product rows) but with a small icon tile instead of a
   product photo, and a "Browse category" sub-line. */
.ctls-popup-cat-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}

.ctls-popup-cat-row:hover,
.ctls-popup-cat-row.ctls-kbd-active {
	background: var(--ctls-popup-input-bg, #fdf3f4);
}

.ctls-popup-cat-row-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ctls-popup-input-bg, #fdf3f4);
	color: var(--ctls-popup-accent, #e0546b);
}

.ctls-popup-cat-row-sub {
	font-size: 11px;
	color: #9aa0b4;
}

.ctls-popup-browse.ctls-popup-hidden {
	display: none;
}

.ctls-popup-results {
	display: none;
}

.ctls-popup-results.ctls-active {
	display: block;
}

.ctls-popup-no-results {
	padding: 24px 4px;
	text-align: center;
	color: #8a8fa3;
	font-size: 13px;
}

/* "View all Results" link appended under the popup's product list -
   same settings (show_view_all / view_all_text / results_page_url) and
   buildViewAllUrl() the dropdown's .ctls-view-all already uses, just
   themed to match the popup's rounded pink-accent look instead of the
   dropdown's plain grid style. */
.ctls-popup-view-all {
	display: block;
	margin-top: 8px;
	padding: 12px;
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ctls-popup-accent, #e0546b);
	background: var(--ctls-popup-input-bg, #fdf3f4);
	transition: opacity 0.15s ease;
}

.ctls-popup-view-all:hover {
	opacity: 0.8;
}

/* Shown the instant typing starts (before the debounced AJAX call
   resolves) so a slower backend search never looks like the popup has
   frozen. */
.ctls-popup-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 36px 4px;
	color: #8a8fa3;
	font-size: 13px;
}

.ctls-popup-spinner {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--ctls-popup-input-border, #f6d9dc);
	border-top-color: var(--ctls-popup-accent, #e0546b);
	border-radius: 50%;
	animation: ctls-popup-spin 0.7s linear infinite;
}

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

.ctls-popup-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 22px;
	background: #f7f7fa;
	border-top: 1px solid #eeeef2;
	box-sizing: border-box;
}

.ctls-kbd-hint {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: #8a8fa3;
}

.ctls-kbd-hint-esc {
	margin-left: auto;
}

.ctls-kbd-hint kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 4px;
	border: 1px solid #d8d8e0;
	background: #ffffff;
	font-size: 10px;
	font-family: inherit;
}

@media (max-width: 640px) {
	.ctls-popup-overlay {
		padding: 0;
	}

	.ctls-popup {
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.ctls-popup-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Keyboard hints assume a physical keyboard — not much use on a phone,
	   and the extra bar just eats vertical space that matters more here. */
	.ctls-popup-footer {
		display: none;
	}
}