/* Vitrusfer — busca (FiboSearch): campo do header, sugestões, painel do campo vazio, busca em tela cheia
   no celular e ajuda da busca sem resultado. Mobile-first. :is(.vf-search, .vf-om) cobre o campo no header
   e dentro do overlay do celular (para onde o FiboSearch move o formulário). */

/* ---------- Campo ---------- */
.vf-search { position: relative; display: flex; width: 100%; }
.vf-search .dgwt-wcas-search-wrapp { width: 100%; max-width: none !important; margin: 0; }
:is(.vf-search, .vf-om) .dgwt-wcas-sf-wrapp { position: relative; padding: 0 !important; border-radius: var(--vf-r-md); background: #fff !important; }

.vf-search input[type="search"], :is(.vf-search, .vf-om) .dgwt-wcas-search-input {
	width: 100%; height: 48px !important; margin: 0; padding: 0 100px 0 16px !important;
	border: 2px solid transparent !important; border-radius: var(--vf-r-md) !important;
	background: #fff !important; color: var(--vf-ink) !important; box-shadow: none !important;
	font: 400 16px/1.2 var(--vf-font) !important; -webkit-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s;
}
.vf-search input[type="search"]::-webkit-search-cancel-button, :is(.vf-search, .vf-om) .dgwt-wcas-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.vf-search input::placeholder, :is(.vf-search, .vf-om) .dgwt-wcas-search-input::placeholder { color: var(--vf-ph) !important; opacity: 1 !important; font-style: normal; font-weight: 400; }
.vf-search input[type="search"]:focus, .vf-search .dgwt-wcas-search-input:focus { outline: 3px solid #fff; outline-offset: 2px; border-color: var(--vf-blue) !important; }

/* Botão buscar (laranja) */
.vf-search > button, :is(.vf-search, .vf-om) .dgwt-wcas-search-submit {
	position: absolute !important; top: 2px !important; right: 2px !important; left: auto !important;
	width: 44px !important; min-width: 0 !important; height: 44px !important; min-height: 0 !important; padding: 0 !important;
	display: grid !important; place-items: center; border: 0 !important; border-radius: 10px !important;
	background: var(--vf-orange-btn) !important; color: #fff !important; opacity: 1 !important; text-shadow: none !important;
	cursor: pointer; transition: background-color .15s;
}
.vf-search > button:hover, :is(.vf-search, .vf-om) .dgwt-wcas-search-submit:hover { background: var(--vf-orange-ink) !important; }
.vf-search > button:focus-visible, :is(.vf-search, .vf-om) .dgwt-wcas-search-submit:focus-visible { outline: 3px solid var(--vf-blue); outline-offset: -6px; box-shadow: inset 0 0 0 2px #fff; }
:is(.vf-search, .vf-om) .dgwt-wcas-search-submit::before, :is(.vf-search, .vf-om) .dgwt-wcas-search-submit::after { display: none !important; }
.vf-search > button .vf-ico, :is(.vf-search, .vf-om) .dgwt-wcas-search-submit svg { width: 22px; height: 22px; }
:is(.vf-search, .vf-om) .dgwt-wcas-search-submit :is(svg, path) { fill: #fff !important; color: #fff !important; }
:is(.vf-search, .vf-om) .dgwt-wcas-ico-magnifier { display: none; }
:is(.vf-search, .vf-om) .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { display: block; position: static !important; max-width: none; }

/* Carregando (o "x" do FiboSearch dá lugar ao botão limpar acessível) */
:is(.vf-search, .vf-om) .dgwt-wcas-preloader { right: 92px !important; width: 24px; z-index: 2; margin: 0 !important; }
:is(.vf-search, .vf-om) .dgwt-wcas-close { display: none !important; }

.vf-search__clear {
	position: absolute; top: 2px; right: 48px; z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
	border: 0; border-radius: 10px; background: transparent; color: var(--vf-mut); cursor: pointer;
}
.vf-search__clear[hidden] { display: none; }
.vf-search__clear:hover { background: var(--vf-bg); color: var(--vf-ink); }
.vf-search__clear:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: -4px; }
.vf-search__clear .vf-ico { width: 20px; height: 20px; }

/* Dica animada no lugar do placeholder (só com movimento permitido; o placeholder real continua para leitores de tela) */
.dgwt-wcas-sf-wrapp.vf-hint .dgwt-wcas-search-input::placeholder { color: transparent !important; }
.vf-search__hint {
	position: absolute; top: 50%; left: 18px; right: 104px; z-index: 1; overflow: hidden; transform: translateY(-50%);
	color: var(--vf-mut); font: 400 16px/1.2 var(--vf-font); white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
.vf-search__term { display: inline-block; color: var(--vf-ink); font-weight: 600; transition: opacity .26s var(--vf-ease), transform .26s var(--vf-ease); }
.vf-search__term.is-out { opacity: 0; transform: translateY(-60%); }
.vf-filled .vf-search__hint { display: none; }

/* Atalho "/" (desktop com mouse) */
.vf-search__kbd { display: none; }
@media (min-width: 1024px) and (hover: hover) {
	.vf-search__kbd {
		position: absolute; top: 50%; right: 58px; z-index: 1; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
		transform: translateY(-50%); border: 1px solid var(--vf-line-2); border-radius: 6px; background: var(--vf-bg);
		color: var(--vf-mut); font: 600 12px/1 var(--vf-font); pointer-events: none;
	}
	.dgwt-wcas-sf-wrapp:focus-within .vf-search__kbd, .vf-filled .vf-search__kbd { display: none; }
}

/* Celular: o campo do header abre a busca em tela cheia (área de toque do FiboSearch sobre o campo) */
.vf-search .dgwt-wcas-enable-mobile-form { border-radius: var(--vf-r-md); }
.vf-search .dgwt-wcas-enable-mobile-form:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Sugestões ao digitar ---------- */
.vf .dgwt-wcas-suggestions-wrapp {
	margin-top: 8px; padding: 6px 0 !important; border: 1px solid var(--vf-line) !important; border-radius: var(--vf-r-md) !important;
	background: #fff; box-shadow: 0 2px 4px rgba(10, 31, 68, .06), 0 18px 48px rgba(10, 31, 68, .18);
	max-height: min(72vh, 640px) !important; font-family: var(--vf-font); overscroll-behavior: contain;
}
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion {
	min-height: 44px; gap: 12px; padding: 8px 16px !important; border: 0 !important;
	color: var(--vf-ink); font-family: var(--vf-font); line-height: 1.3; text-decoration: none !important;
}
.vf .dgwt-wcas-suggestion .dgwt-wcas-st { color: var(--vf-ink); font-size: 15px; line-height: 1.35; }
.vf .dgwt-wcas-suggestion strong { color: var(--vf-blue-ink); font-weight: 700; }
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion:hover,
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
	background: var(--vf-blue-soft) !important; box-shadow: inset 3px 0 0 var(--vf-blue); text-decoration: none !important;
}

/* Títulos dos grupos */
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-headline { min-height: 0; padding: 12px 16px 4px !important; background: none !important; box-shadow: none; }
.vf .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
	margin: 0; padding: 0; border: 0; color: var(--vf-mut); font: 700 12px/1.2 var(--vf-font); letter-spacing: .06em; text-transform: uppercase;
}

/* Categorias e termos */
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-tax { justify-content: flex-start; }
.vf .dgwt-wcas-suggestion-tax::before {
	content: ""; flex: none; width: 18px; height: 18px; background: var(--vf-icon-mut);
	-webkit-mask: var(--vf-sug-ico) center / contain no-repeat; mask: var(--vf-sug-ico) center / contain no-repeat;
}
.vf .dgwt-wcas-suggestion-cat { --vf-sug-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); }
.vf .dgwt-wcas-suggestion-tag { --vf-sug-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.vf .dgwt-wcas-suggestion-tax .dgwt-wcas-st { font-weight: 500; }
.vf .dgwt-wcas-st-breadcrumbs { color: var(--vf-mut); opacity: 1; font-size: 13px; }

/* Produtos: foto, nome, preço e estoque (como o card da loja) */
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-product { align-items: center; padding-block: 10px !important; }
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-si {
	flex: none; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden;
	border: 1px solid var(--vf-line); border-radius: var(--vf-r-sm); background: #fff;
}
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-si img { width: 100%; height: 100%; max-height: none; padding: 3px; border: 0; object-fit: contain; }
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 0; }
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-st-title {
	display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14.5px; font-weight: 400;
}
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-meta { display: block; width: 100%; }
.vf .dgwt-wcas-suggestion-product .dgwt-wcas-sp {
	display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0; text-align: left; color: var(--vf-ink); font-size: 15px;
}
.vf .dgwt-wcas-sp > * { display: inline-flex !important; }
.vf .vf-sug__price { align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--vf-ink); font-weight: 700; }
.vf .vf-sug__price .amount, .vf .vf-sug__price bdi { color: var(--vf-ink); font-weight: 700; }
.vf .vf-sug__price del, .vf .vf-sug__price del .amount { color: var(--vf-old); font-size: 13px; font-weight: 400; opacity: 1; }
.vf .vf-sug__price ins { text-decoration: none; }
.vf .vf-sug__from { color: var(--vf-mut); font-size: 12px; font-weight: 500; }
.vf .vf-sug__ask { color: var(--vf-mut); font-weight: 600; }
/* Selo igual ao .vf-pill do card */
.vf .vf-sug__stock, .vf .vf-sug__out { align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--vf-r-pill); color: #fff; font: 700 11px/1 var(--vf-font); }
.vf .vf-sug__stock { background: var(--vf-navy); }
.vf .vf-sug__stock .vf-ico { width: 12px; height: 12px; fill: #ffb37a; stroke: none; }
.vf .vf-sug__out { background: var(--vf-mut); }

@media (min-width: 600px) {
	.vf .dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
	.vf .dgwt-wcas-suggestion-product .dgwt-wcas-meta { width: auto; flex: none; }
	.vf .dgwt-wcas-suggestion-product .dgwt-wcas-sp { flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
}

/* "Ver todos os N resultados" */
.vf .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-more {
	justify-content: center; min-height: 48px; margin-top: 4px; border-top: 1px solid var(--vf-line) !important;
	color: var(--vf-blue); text-transform: none;
}
.vf .dgwt-wcas-st-more { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: var(--vf-blue); font: 700 14px var(--vf-font); }
.vf .dgwt-wcas-suggestion-more:is(:hover, .dgwt-wcas-suggestion-selected) .dgwt-wcas-st-more { color: var(--vf-blue-ink); }
.vf .dgwt-wcas-st-more .vf-ico { width: 16px; height: 16px; }

/* Sem resultado no painel */
.vf .dgwt-wcas-suggestion-nores { padding: 14px 18px !important; color: var(--vf-mut); font: 400 14px/1.5 var(--vf-font); }
.vf .dgwt-wcas-suggestion-nores p { margin: 0 0 2px; color: var(--vf-ink); font: 700 15px var(--vf-font); }

/* ---------- Painel do campo vazio: recentes, mais buscados e categorias ---------- */
.vf-sp {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; display: grid; gap: 18px;
	max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 20px;
	border: 1px solid var(--vf-line); border-radius: var(--vf-r-md); background: #fff; color: var(--vf-ink);
	box-shadow: 0 2px 4px rgba(10, 31, 68, .06), 0 18px 48px rgba(10, 31, 68, .18); text-align: left;
}
.vf-sp[hidden], .vf-sp__sec[hidden] { display: none; }
.vf-sp__sec { display: grid; gap: 8px; }
.vf-sp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vf-sp__title { margin: 0; color: var(--vf-mut); font: 700 12px/1.2 var(--vf-font); letter-spacing: .06em; text-transform: uppercase; }
.vf-sp ul { display: flex; margin: 0; padding: 0; list-style: none; }
.vf-sp li { margin: 0; padding: 0; }
.vf-sp a { text-decoration: none; }
.vf-sp a:focus-visible, .vf-sp button:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
.vf-sp .vf-ico { flex: none; width: 18px; height: 18px; color: var(--vf-icon-mut); }

.vf-sp__clear {
	min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; border-radius: var(--vf-r-sm); background: none;
	color: var(--vf-blue); font: 600 14px var(--vf-font); text-transform: none; letter-spacing: 0; cursor: pointer;
}
.vf-sp__clear:hover { background: var(--vf-blue-soft); color: var(--vf-blue-ink); }

.vf-sp__recent { flex-direction: column; }
.vf-sp__recent li { display: flex; align-items: center; }
.vf-sp__item {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px;
	border-radius: var(--vf-r-sm); color: var(--vf-ink) !important; font: 400 15px var(--vf-font);
}
.vf-sp__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-sp__item:hover { background: var(--vf-bg); }
.vf-sp__item:hover .vf-ico { color: var(--vf-mut); }
.vf-sp__del {
	flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--vf-r-sm);
	background: none; color: var(--vf-mut); cursor: pointer;
}
.vf-sp__del .vf-ico { width: 16px; height: 16px; color: currentColor; }
.vf-sp__del:hover { background: var(--vf-bg); color: var(--vf-ink); }

.vf-sp__chips { flex-wrap: wrap; gap: 8px; }
.vf-sp__chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px;
	border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-pill); background: #fff;
	color: var(--vf-ink) !important; font: 500 14px var(--vf-font); transition: background-color .15s, border-color .15s;
}
.vf-sp__chip .vf-ico { width: 16px; height: 16px; }
.vf-sp__chip:hover { border-color: var(--vf-blue); background: var(--vf-blue-soft); color: var(--vf-blue-ink) !important; }
.vf-sp__chip:hover .vf-ico { color: var(--vf-blue); }

.vf-sp__cats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vf-sp__cat {
	display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px 8px 8px;
	border: 1px solid var(--vf-line); border-radius: var(--vf-r-md); color: var(--vf-ink) !important;
	font: 600 13.5px/1.25 var(--vf-font); transition: background-color .15s, border-color .15s;
}
.vf-sp__cat > span:last-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vf-sp__cat:hover { border-color: var(--vf-blue); background: var(--vf-blue-soft); }
.vf-sp__thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: var(--vf-r-sm); background: var(--vf-bg); }
.vf-sp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vf-sp__thumb .vf-ico { width: 22px; height: 22px; }
@media (min-width: 600px) { .vf-sp__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vf-sp { padding: 18px 20px 22px; } }

/* ---------- Celular: busca em tela cheia (overlay do FiboSearch) ---------- */
.vf-om.dgwt-wcas-overlay-mobile { position: fixed !important; inset: 0; background: #fff; font-family: var(--vf-font); }
.vf-om .dgwt-wcas-om-bar {
	position: relative; height: 68px; align-items: center; gap: 4px; padding: 10px 12px 10px 4px;
	border-bottom: 1px solid var(--vf-line); background: #fff;
}
.vf-om .dgwt-wcas-om-bar button.dgwt-wcas-om-return {
	flex: none; width: 48px !important; height: 48px !important; display: grid !important; place-items: center;
	border-radius: var(--vf-r-sm) !important; background: transparent !important; color: var(--vf-ink); cursor: pointer;
}
.vf-om .dgwt-wcas-om-bar button.dgwt-wcas-om-return:hover { background: var(--vf-bg) !important; }
.vf-om .dgwt-wcas-om-bar button.dgwt-wcas-om-return:focus-visible { outline: 2px solid var(--vf-blue) !important; outline-offset: -2px; }
.vf-om .dgwt-wcas-om-bar .dgwt-wcas-om-return svg { position: static; width: 24px; height: 24px; fill: none; }
.vf-om .dgwt-wcas-om-bar .dgwt-wcas-om-return svg path { fill: none !important; }
.vf-om .dgwt-wcas-search-wrapp-mobile { flex: 1; width: auto !important; min-width: 0; }
.vf-om .dgwt-wcas-search-input {
	height: 48px !important; border: 2px solid transparent !important; border-radius: var(--vf-r-md) !important;
	background: var(--vf-bg) !important;
}
.vf-om .dgwt-wcas-sf-wrapp { background: var(--vf-bg) !important; }
.vf-om .dgwt-wcas-search-input::placeholder { color: var(--vf-mut) !important; }
.vf-om .dgwt-wcas-search-input:focus { outline: none; border-color: var(--vf-blue) !important; }
.vf-om .dgwt-wcas-suggestions-wrapp {
	top: 68px !important; height: calc(100% - 68px) !important; max-height: none !important; margin: 0;
	padding: 6px 0 calc(24px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none;
}
.vf-om .vf-sp {
	top: 68px; bottom: 0; max-height: none; padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
	border: 0; border-radius: 0; box-shadow: none; align-content: start;
}

/* ---------- Página de resultados sem produto (dentro do .vf-empty da loja) ---------- */
.vf-noresult { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 560px; }
.vf-noresult__tips { margin: 4px 0 0; padding: 0 0 0 20px; color: var(--vf-mut); font-size: 14px; line-height: 1.6; text-align: left; }
.vf-noresult__help { margin: 8px 0 0; color: var(--vf-mut); font-size: 14px; }
.vf-noresult__help a { color: var(--vf-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.vf-noresult__help a:hover { color: var(--vf-blue-ink); }