/* Kommissary Smart Search: results panel under the header search */
.kss-on { position: relative; }
/* while a smart search is showing, hide the theme's own live results and the "Shop by category" tiles */
.kss-on .wd-search-results,
.kss-on .wd-search-results-wrapper,
.kss-on .wd-dropdown-results,
.kss-on .wd-search-dropdown,
.kss-on .kms-sd { display: none !important; }

.kss-panel { display: none; }
.kss-on > .kss-panel {
	display: block;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
	padding: 12px 14px 10px;
	text-align: left;
	min-width: 320px;
}
.kss-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid #f1e3e3; }
.kss-what { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.kss-count { font-size: 12px; color: #999; white-space: nowrap; }
.kss-fix { font-size: 12.5px; color: #555; padding: 7px 2px 0; }
.kss-fix b { color: #1a1a1a; }
.kss-note { font-size: 12.5px; color: #b9473f; background: #fff6f6; border-radius: 8px; padding: 6px 10px; margin: 8px 0 2px; }
.kss-list { max-height: 420px; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px; }
.kss-row { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px solid #f6f6f6; }
.kss-row:last-child { border-bottom: 0; }
.kss-img { display: block; width: 52px; height: 52px; border-radius: 8px; background: #fff; overflow: hidden; }
.kss-img img { width: 52px; height: 52px; object-fit: contain; display: block; }
.kss-name { font-size: 13.5px; line-height: 1.3; color: #1a1a1a; text-decoration: none; }
.kss-name:hover { color: #e94f4f; }
.kss-price { font-weight: 800; font-size: 14px; color: #e94f4f; white-space: nowrap; }
.kss-panel a.kss-add {
	display: inline-block; min-height: 0; line-height: 1; padding: 8px 14px; border-radius: 999px;
	background: #ff6666; color: #fff; font-size: 12.5px; font-weight: 700; text-transform: none; white-space: nowrap; text-decoration: none;
}
.kss-panel a.kss-add:hover { background: #e94f4f; color: #fff; }
.kss-panel a.kss-add.kss-view { background: #f2f2f2; color: #333; }
.kss-panel a.kss-add.added { background: #3a9d5d; }
.kss-panel a.added_to_cart { display: none; }
.kss-sep { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #b9473f; padding: 10px 2px 4px; border-bottom: 1px solid #f1e3e3; }
.kss-empty { padding: 14px 4px; font-size: 13.5px; color: #666; }
.kss-all { display: block; text-align: center; margin-top: 8px; padding: 9px; border-radius: 10px; background: #fff6f6; color: #e94f4f; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.kss-all:hover { background: #ffe9e9; color: #e94f4f; }

@media (max-width: 767px) {
	.kss-on > .kss-panel { min-width: 0; padding: 10px 10px 8px; }
	.kss-row { grid-template-columns: 44px 1fr auto; }
	.kss-row .kss-add { grid-column: 2 / 4; justify-self: start; }
	.kss-img, .kss-img img { width: 44px; height: 44px; }
}

/* rotating hint in the empty search bar */
form.kss-hinted { position: relative; }
form.kss-hinted input[name="s"]::placeholder { color: transparent !important; }
.kss-hint {
	position: absolute; display: flex; align-items: center; pointer-events: none; z-index: 2;
	color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: opacity .45s ease, transform .45s ease;
}
.kss-hint.kss-hint-out { opacity: 0; transform: translateY(-4px); }
form.kss-typing .kss-hint { display: none; }

/* store questions: answer cards above any products */
.kss-help { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 10px; }
a.kss-help-card { display: block; white-space: normal; overflow-wrap: anywhere; min-width: 0; background: #fff6f6; border: 1px solid #f6d9d9; border-radius: 12px; padding: 11px 14px; text-decoration: none; transition: background .15s; }
a.kss-help-card:hover { background: #ffecec; }
.kss-help-q { display: block; font-weight: 700; font-size: 14px; color: #1a1a1a; margin-bottom: 3px; }
.kss-help-a { display: block; white-space: normal; font-size: 13px; line-height: 1.45; color: #555; }
.kss-help-go { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #e94f4f; }

/* cart drawer: "Added to cart" line under the title, above the header rule; CartPops' banner hidden */
html body #cartpops-drawer#cartpops-drawer .cpops-drawer-notices-wrapper { display: none !important; }
#cartpops-drawer .cpops-drawer-header__heading { position: relative; }
#cartpops-drawer .kss-added {
	position: absolute; left: 0; bottom: 10px; font-size: 13.5px; font-weight: 600; color: #23824a;
	opacity: 0; transform: translateY(3px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
#cartpops-drawer .kss-added.kss-added-on { opacity: 1; transform: none; }

/* the mobile header search: the theme's placeholder stayed visible under the hint, and the hint could attach twice */
html body form.kss-hinted input[name="s"]::placeholder { color: transparent !important; opacity: 0 !important; }
