/* Busca Cipó — cores/fontes controláveis pelo widget Elementor; aqui só
   layout e comportamento. Mesmo breakpoint mobile do resto do plugin:
   1024px — abaixo disso o painel vira tela cheia (98% do acesso é celular,
   então essa é a experiência que mais importa).

   Sem overlay/fundo escurecido e sem travar o scroll do body de propósito
   (pedido do cliente) — o painel fecha com Escape, no botão de fechar
   (mobile) ou clicando fora dele (ver document click listener em
   search.js).

   !important em quase tudo dos elementos interativos (botão, campo, X de
   limpar, botão de busca) de propósito: mesmo motivo documentado em
   notices.css/footer-menu.css — o Elementor injeta CSS global bastante
   abrangente em cima de seletores como [type=button] e input (border,
   padding, position, border-radius), com especificidade/ordem de carga que
   vence o nosso CSS quando falta !important. Foi exatamente isso que
   quebrava o botão "limpar" (X): sem !important em "position", o reset do
   Elementor virava a "position: absolute" em algo tipo "static/block",
   e o botão saía do canto do campo e virava uma linha própria acima do
   input, com a borda rosa padrão do tema por cima. Qualquer propriedade
   forçada aqui que também é sobrescrita dentro do media query mobile
   precisa do !important nos dois lugares (senão o da regra base trava e o
   mobile deixa de conseguir mudar o valor).

   Além do !important, os seletores desses mesmos elementos vêm com a
   classe repetida (ex.: ".loja-cipo-search-clear.loja-cipo-search-clear")
   de propósito — é um truque só de especificidade (não muda o que é
   selecionado, é a MESMA classe duas vezes), pra garantir que a gente
   ganhe mesmo se o CSS global do Elementor também usar !important em cima
   de um seletor com mais de uma classe/atributo (ponto que vimos persistir
   mesmo depois do primeiro !important). Entre dois !important empatados, o
   desempate é por especificidade, e só depois por ordem de carregamento —
   isso tira a gente dessa loteria. */

.loja-cipo-search {
	position: relative;
	display: inline-block;
}

/* Botão "PESQUISAR" — sem caixa (sem borda/fundo/padding) de propósito:
   fica só texto + ícone, alinhado (flush) com os outros ícones do header
   (wishlist, carrinho), em vez de um "pill" com borda própria. */
.loja-cipo-search-trigger.loja-cipo-search-trigger,
.loja-cipo-search-trigger.loja-cipo-search-trigger:hover,
.loja-cipo-search-trigger.loja-cipo-search-trigger:focus,
.loja-cipo-search-trigger.loja-cipo-search-trigger:active {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: inherit;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.loja-cipo-search-icon {
	flex-shrink: 0;
}

/* Ícone customizado (upload de SVG no widget Elementor) — usado como
   mask-image + background-color: currentColor, assim herda a mesma cor já
   configurável nos controles de estilo existentes (botão/campo), sem
   precisar de um controle de cor duplicado. Mesma técnica do ícone da
   Barra de Benefícios (ver benefits.css), só trocando a cor fixa por
   currentColor porque aqui o ícone SEMPRE mora dentro de um elemento cuja
   cor já é controlável. */

.loja-cipo-search-icon-custom {
	display: inline-block !important;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: var( --lc-search-icon-url );
	mask-image: var( --lc-search-icon-url );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Painel — dropdown no desktop. Sem padding aqui: cada área interna (form,
   resultados, rodapé "ver mais") controla o próprio respiro, pra o rodapé
   poder ficar colado na borda de baixo do modal (ver comentário mais
   abaixo em .loja-cipo-search-more-wrap). overflow:hidden recorta os
   filhos certinho no border-radius; a sombra é feita com "filter" em vez
   de "box-shadow" de propósito — box-shadow de um elemento com
   overflow:hidden é cortado junto (bug clássico de CSS), filter não. */

.loja-cipo-search-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: min(420px, 90vw);
	max-height: min(70vh, 640px);
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.16));
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	/* Mesma hierarquia do off-canvas do Menu (ver nav.css): header sticky
	   do Elementor = 999999, overlay do off-canvas = 1000000, off-canvas
	   em si = 1000001. Esse painel de busca precisa ficar no topo de tudo
	   (>= 1000001), senão os ícones do header ou o overlay do menu podem
	   desenhar por cima dele dependendo de qual estiver aberto. */
	z-index: 1000002;
	-webkit-tap-highlight-color: transparent;
}

.loja-cipo-search.is-open .loja-cipo-search-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.loja-cipo-search-close.loja-cipo-search-close {
	/* Precisa de !important aqui (fora do media query mobile): sem ele,
	   ".loja-cipo-search-close { display:none }" (uma classe, especificidade
	   0,1,0) empata em especificidade com o reset global "[type=button]"
	   (seletor de atributo TEM O MESMO PESO de uma classe, também 0,1,0) —
	   em empate, quem carrega por último no cascade vence, e o reset ganhava,
	   deixando o botão "Fechar busca" (que só devia existir escondido no
	   desktop) visível com o estilo cru deles (borda rosa, padding, herdando
	   display:inline-block dentro de um painel flex-direction:column — por
	   isso ele "esticava" e virava aquela caixa larga acima do campo). */
	display: none !important;
}

.loja-cipo-search-form {
	flex-shrink: 0;
	/* Padding nos 4 lados (não só topo/laterais): sem o de baixo, quando a
	   lista de resultados está vazia (campo em branco, ou limpou a busca)
	   o painel "acaba" logo depois do campo, sem respiro nenhum embaixo —
	   ficava com cara de cortado. O respiro entre o campo e os resultados
	   (quando eles aparecem) vem só daqui agora, então .loja-cipo-search-results
	   não tem padding-top próprio (evita somar os dois e abrir um vão
	   grande demais). */
	padding: 18px;
}

.loja-cipo-search-field-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.loja-cipo-search-input.loja-cipo-search-input {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 6px !important;
	padding: 12px 76px 12px 18px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	background: #f7f7f7 !important;
	color: inherit;
	box-shadow: none !important;
	outline: none !important;
}

.loja-cipo-search-input.loja-cipo-search-input:focus {
	outline: none !important;
	border-color: rgba(0, 0, 0, 0.35) !important;
	box-shadow: none !important;
}

.loja-cipo-search-input::-webkit-search-cancel-button,
.loja-cipo-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.loja-cipo-search-clear.loja-cipo-search-clear,
.loja-cipo-search-submit.loja-cipo-search-submit {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	margin: 0 !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: inherit;
	padding: 6px !important;
}

.loja-cipo-search-clear.loja-cipo-search-clear {
	right: 42px !important;
	opacity: 0.5;
}

.loja-cipo-search-input:placeholder-shown ~ .loja-cipo-search-clear {
	display: none !important;
}

.loja-cipo-search-submit.loja-cipo-search-submit {
	right: 6px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
}

.loja-cipo-search-submit.loja-cipo-search-submit:hover {
	background: rgba(0, 0, 0, 0.06) !important;
}

/* Resultados — área rolável (flex:1), com scrollbar customizada em vez do
   padrão do SO. min-height:0 é necessário pro flex:1 conseguir encolher e
   deixar o overflow-y:auto funcionar dentro de um flex column. */

.loja-cipo-search-results {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	/* Sem padding-top: o respiro entre o campo e a lista já vem do
	   padding-bottom de .loja-cipo-search-form (ver comentário lá). */
	padding: 0 18px 18px;
	display: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.loja-cipo-search-results.is-visible {
	display: block;
}

.loja-cipo-search-results::-webkit-scrollbar {
	width: 6px;
}

.loja-cipo-search-results::-webkit-scrollbar-track {
	background: transparent;
}

.loja-cipo-search-results::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
}

.loja-cipo-search-results::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

/* Chrome/Edge no Windows desenham setinhas nativas em cima/embaixo do
   scrollbar por padrão, mesmo com a trilha/thumb customizados acima — sem
   isso, sobrava uma "seta" cinza no canto inferior do resultado, comendo o
   espaço que devia ser o padding-bottom da lista e dando a impressão de
   que o padding tinha sumido. */
.loja-cipo-search-results::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

.loja-cipo-search-status {
	margin: 10px 0;
	font-size: 14px;
	opacity: 0.6;
	text-align: center;
}

/* Skeleton (placeholder animado) enquanto a busca ainda não respondeu —
   mesmo formato de uma linha de resultado (miniatura + 2 linhas de texto),
   com um "brilho" passando da esquerda pra direita. */

.loja-cipo-search-skeleton {
	display: block;
}

.loja-cipo-search-skeleton-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
}

.loja-cipo-search-skeleton-thumb,
.loja-cipo-search-skeleton-line {
	display: block;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.06) 25%,
		rgba(0, 0, 0, 0.12) 37%,
		rgba(0, 0, 0, 0.06) 63%
	);
	background-size: 400px 100%;
	animation: loja-cipo-search-shimmer 1.4s ease infinite;
	border-radius: 6px;
}

.loja-cipo-search-skeleton-thumb {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
}

.loja-cipo-search-skeleton-lines {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.loja-cipo-search-skeleton-line {
	height: 12px;
	width: 80%;
}

.loja-cipo-search-skeleton-line.is-short {
	width: 40%;
	height: 10px;
}

@keyframes loja-cipo-search-shimmer {
	from {
		background-position: -200px 0;
	}

	to {
		background-position: 200px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loja-cipo-search-skeleton-thumb,
	.loja-cipo-search-skeleton-line {
		animation: none;
	}
}

.loja-cipo-search-section + .loja-cipo-search-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.loja-cipo-search-section-title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 8px;
}

.loja-cipo-search-category,
.loja-cipo-search-product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	text-decoration: none !important;
	color: inherit !important;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.loja-cipo-search-category:hover,
.loja-cipo-search-product:hover,
.loja-cipo-search-category:focus,
.loja-cipo-search-product:focus {
	background-color: rgba(0, 0, 0, 0.045);
	outline: none;
}

.loja-cipo-search-category {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.loja-cipo-search-category-name {
	font-size: 15px;
}

.loja-cipo-search-category-breadcrumb {
	font-size: 13px;
	opacity: 0.55;
}

.loja-cipo-search-product-thumb {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f0f0;
}

.loja-cipo-search-product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Título + preço do produto ficam empilhados (info), lado a lado com a
   miniatura — o preço é o "Pricing" pedido, reaproveitando o mesmo
   get_price_html() do WooCommerce usado no card de produto (cuida de
   promoção com <del>/<ins>, "a partir de" em variável etc. sozinho). */

.loja-cipo-search-product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.loja-cipo-search-product-title {
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.loja-cipo-search-product-price {
	font-size: 13px;
	opacity: 0.7;
}

.loja-cipo-search-product-price del {
	opacity: 0.65;
	font-weight: 400;
	margin-right: 4px;
	text-decoration: line-through;
}

.loja-cipo-search-product-price ins {
	font-weight: 600;
	text-decoration: none;
}

.loja-cipo-search-highlight {
	color: #c1440e;
	font-weight: 700;
	background: none;
}

/* "Ver mais produtos" — elemento SEPARADO da área rolável de propósito
   (populado à parte via JS, ver moreWrapEl em search.js), fixo no rodapé
   do painel (flex-shrink:0, fora do flex:1 dos resultados) — assim fica
   sempre colado na borda de baixo do modal, visível mesmo com a lista
   rolada, em vez de rolar junto com o resto do conteúdo. */

.loja-cipo-search-more-wrap {
	flex-shrink: 0;
}

.loja-cipo-search-more {
	display: block;
	text-align: center;
	/* Mais fino que o padding dos itens da lista (8px) de propósito — é um
	   rodapé colado na borda do modal, não mais um item "solto" dentro do
	   scroll, então não precisa do mesmo respiro generoso. */
	padding: 10px 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: inherit !important;
}

.loja-cipo-search-more:hover {
	opacity: 0.75;
}

/* Mobile — painel ocupa a tela inteira */

@media (max-width: 1024px) {
	/* Só o ícone da lupa no gatilho no mobile — some o texto "Pesquisar",
	   fica igual aos outros ícones do header (conta, carrinho). */
	.loja-cipo-search-trigger span {
		display: none;
	}

	.loja-cipo-search-trigger .loja-cipo-search-icon,
	.loja-cipo-search-trigger .loja-cipo-search-icon-custom {
		width: 28px !important;
		height: 28px !important;
	}

	/* Não é mais tela cheia: agora abre como uma seção logo abaixo do
	   header, crescendo pra baixo (altura animada via JS — ver
	   positionPanelForMobile() em search.js) em vez de cobrir a tela toda
	   de uma vez. top/left/width/height inline vêm todos do JS, mesmo
	   motivo de sempre: o header sticky do Elementor tem um ancestral com
	   transform, que vira o containing block do fixed — um "top" relativo
	   à janela sai errado sem a correção via offsetParent (mesma técnica
	   do Mega Menu/off-canvas do Menu). "height" começa em 0 aqui só como
	   valor de partida/fallback antes do JS calcular a altura disponível
	   abaixo do header; overflow:hidden é o que faz esse crescimento
	   parecer uma "seção abrindo", não um pulo abrupto. */
	.loja-cipo-search-panel {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		max-height: none;
		border-radius: 0;
		transform: none;
		filter: none;
		overflow: hidden;
		transition: opacity 0.2s ease, visibility 0.2s, height 0.35s ease;
	}

	.loja-cipo-search-close {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		top: 18px !important;
		right: 16px !important;
		width: 38px !important;
		height: 38px !important;
		border-radius: 50% !important;
		background: rgba(0, 0, 0, 0.06) !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		color: inherit;
		cursor: pointer;
		z-index: 1;
	}

	.loja-cipo-search-form {
		/* Mesmo motivo do desktop: padding nos 4 lados (não só topo/laterais)
		   pra não "cortar" o painel logo depois do campo quando a lista de
		   resultados está vazia. */
		padding: 20px calc(48px + 16px) 20px 16px;
	}

	.loja-cipo-search-input.loja-cipo-search-input {
		/* Precisa repetir !important E a classe duplicada aqui: a regra
		   base (desktop) já força padding/font-size com !important numa
		   especificidade mais alta (classe repetida), então sem as duas
		   coisas aqui o valor mobile nunca "ganharia" da base. */
		padding: 10px 70px 10px 14px !important;
		font-size: 16px !important; /* NÃO reduzir abaixo de 16px: é o mínimo pra
			o Safari do iOS não dar zoom automático quando o campo recebe foco. */
	}

	.loja-cipo-search-results {
		/* Sem padding-top aqui também — mesmo motivo do desktop. */
		padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.loja-cipo-search-more {
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
}