/* Ki Delivery — Cardápio: order bump.
   Fatia contígua do frontend.css original (linhas 919–1089);
   a ordem de carregamento preserva a cascata. Ver REFACTOR.md. */
/* Order bump — oferta de última hora no checkout                        */
/* --------------------------------------------------------------------- */

/* Entra suave: o modal aparece depois de uma decisão do cliente (forma de
   pagamento, "fazer pedido"), então surgir seco parece erro de tela. */
.kid-modal--bump .kid-modal__backdrop,
.kid-modal--bump .kid-modal__card--bump {
	opacity: 0;
	transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.kid-modal--bump .kid-modal__card--bump {
	transform: translate(-50%, -46%) scale(.97);
}
.kid-modal--bump.kid-show .kid-modal__backdrop { opacity: 1; }
.kid-modal--bump.kid-show .kid-modal__card--bump {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* A sheet do checkout é mais alta e mais larga que este modal, então sempre
   sobra um pedaço dela à vista — no topo, embaixo e nas laterais. Igualar a
   geometria não resolve; desfocar, sim. O "Fazer pedido" que aparecia por
   baixo vira mancha e para de disputar o toque com o "Adicionar". */
.kid-modal--bump .kid-modal__backdrop {
	background: rgba(15, 15, 18, .66);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
/* Sem desfoque disponível, o mesmo trabalho tem que ser feito só com tinta. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.kid-modal--bump .kid-modal__backdrop { background: rgba(15, 15, 18, .78); }
}

/* O card sobe para 90vh e aperta as laterais: o bump pode carregar a lista
   inteira de complementos do produto ofertado, e cada pixel de recuo lateral
   é largura que falta depois para o nome da opção — que, quebrando em duas
   linhas, ainda por cima cresce na altura. */
.kid-modal__card--bump {
	width: min(94%, 420px);
	max-height: 90vh; max-height: 90dvh;
	padding: 22px 14px 12px;
	overflow: hidden;
}

/* O corpo vira a coluna que divide rolagem e rodapé. */
.kid-bump {
	display: flex; flex-direction: column;
	flex: 1 1 auto; min-height: 0;
}

/* Só o miolo rola. As margens negativas devolvem os 14px do card, então a
   lista usa a largura cheia e a barra de rolagem encosta na borda. */
.kid-bump__scroll {
	flex: 1 1 auto; min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	margin: 0 -14px;
	padding: 0 14px;
}

/* Rodapé ancorado no fundo do card. Antes ele rolava junto e sumia da tela
   justamente no produto com muitas opções — que é quando a oferta mais
   precisa do botão à vista. O filete no topo separa do que passa por baixo. */
.kid-bump__actions {
	flex: 0 0 auto;
	margin: 0 -14px -12px;
	padding: 10px 14px 8px;
	background: #fff;
}
.kid-bump__actions--split { border-top: 1px solid var(--kid-line); }

.kid-bump__title {
	margin: 0 0 3px;
	font-size: 17.5px; font-weight: 800; line-height: 1.25;
	/* Espaço do X de fechar, que é absoluto e ignora o padding do card. */
	padding-right: 40px;
}
.kid-bump__sub {
	margin: 0 0 12px;
	font-size: 13.5px; line-height: 1.4; color: var(--kid-muted);
}
.kid-bump__title:last-of-type { margin-bottom: 12px; }

/* O produto é o centro do modal: card destacado, não uma linha de lista. */
.kid-bump__card {
	display: flex; align-items: center; gap: 12px;
	padding: 10px;
	background: #f7f7f9;
	border-radius: 14px;
	margin-bottom: 10px;
}
.kid-bump__img {
	width: 66px; height: 66px; flex: 0 0 auto;
	border-radius: 11px; object-fit: cover;
	background: #fff;
}
.kid-bump__info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.kid-bump__name { font-size: 15px; font-weight: 800; line-height: 1.25; }
.kid-bump__desc {
	font-size: 12.5px; line-height: 1.4; color: var(--kid-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.kid-bump__price {
	margin-top: 4px;
	font-size: 16px; font-weight: 800; color: var(--kid-red);
}

/* A frase de persuasão é o argumento, não uma legenda: ganha a barra
   lateral na cor da loja para o olho parar nela. */
.kid-bump__hook {
	margin: 0 0 4px;
	padding: 9px 12px;
	border-left: 3px solid var(--kid-red);
	background: color-mix(in srgb, var(--kid-red) 7%, #fff);
	border-radius: 0 10px 10px 0;
	font-size: 13.5px; line-height: 1.45; font-weight: 600;
}
@supports not (background: color-mix(in srgb, red 7%, #fff)) {
	.kid-bump__hook { background: #faf7f7; }
}

.kid-bump__add { width: 100%; }

/* Complementos dentro do modal da oferta. O desenho é o mesmo da ficha do
   produto — só o espaçamento aperta, porque aqui o cliente está a um toque
   de fechar o pedido. */
.kid-bump__groups { margin: 10px 0 2px; text-align: left; }
/* Na ficha do produto o grupo tem margem lateral de 8px para descolar da
   borda da folha. Aqui ela sai: são 16px de largura que o nome da opção
   aproveita melhor do que o respiro. */
.kid-bump__groups .kid-group {
	margin: 0 0 8px;
	padding: 8px 6px 2px;
}
.kid-bump__groups .kid-group:last-child { margin-bottom: 0; }
.kid-bump__groups .kid-group__head {
	gap: 10px;
	padding: 7px 10px;
	margin-bottom: 2px;
}
.kid-bump__groups .kid-group__name { min-width: 0; }
/* A dica ("Escolha a quantidade · obrigatório") ficava disputando a linha
   com o nome do grupo e quebrava em duas. Alinhada à direita e sem encolher,
   ela ocupa o que precisa e o nome cede o resto. */
.kid-bump__groups .kid-group__hint {
	flex: 0 0 auto;
	text-align: right;
	font-size: 11px;
}
.kid-bump__groups .kid-group__err { margin-bottom: 4px; }
.kid-bump__groups .kid-opt { gap: 10px; padding: 8px 6px; }
.kid-bump__groups .kid-opt__name { font-size: 14px; }
.kid-bump__groups .kid-opt__ctrl { width: 20px; height: 20px; }
/* Contador menor: a linha do complemento é a que mais se repete, então cada
   pixel de altura aqui vale por todas as opções da lista. */
.kid-bump__groups .kid-qty button,
.kid-bump__groups .kid-qty__add { width: 30px; height: 30px; font-size: 17px; }
/* A regra acima trava a largura em 30px para o botão de símbolo. A variante
   com palavra precisa recuperar a largura livre — só a altura continua
   compacta. */
.kid-bump__groups .kid-qty__add--label {
	width: auto; min-width: 72px; padding: 0 11px; font-size: 12px;
}

.kid-bump__foot { display: flex; gap: 10px; align-items: center; margin-top: 0; }
.kid-bump__foot .kid-stepper { flex: 0 0 auto; }
.kid-bump__foot .kid-stepper button { width: 36px; height: 40px; font-size: 18px; }
.kid-bump__foot .kid-btn { flex: 1; }
.kid-bump__actions .kid-modal__quiet { margin-top: 0; padding: 9px 8px; min-height: 38px; }

/* ==========================================================================
   Estados de toque em aparelhos sem mouse
   ==========================================================================

   Este bloco mora no fim da cadeia de CSS de propósito: ele precisa vir
   depois de todas as regras que corrige (core → menu → product → checkout
   → bump). Ver a ordem em class-frontend.php.

   O problema que ele resolve: no celular, tocar num item que ABRE UMA TELA
   POR CIMA — o card do produto, "Conferir meu pedido", uma opção de
   complemento — deixa o realce grudado. O dedo sai, mas o elemento nunca
   recebe o aviso de "soltou", porque quando isso aconteceria já havia um
   overlay na frente dele. O navegador então mantém :hover e :active
   aplicados até o próximo toque em outro lugar, e o que era para ser um
   piscar de confirmação vira uma marca vermelha parada na tela.

   A correção é desligar esses estados onde o ponteiro não é um mouse. Não
   se perde feedback: no toque, a resposta ao gesto é a própria tela que
   abre, imediata. No desktop nada muda — lá o :hover acompanha o cursor e
   sai junto com ele, que é o comportamento que se espera. */
@media (hover: none) {

	/* Cardápio */
	.kid-card:hover,
	.kid-card:active {
		background: #fff;
		color: var(--kid-ink);
		opacity: 1;
		transform: none;
		box-shadow: 0 2px 10px rgba(15, 15, 18, .05);
	}
	.kid-cat-pill:active { transform: none; }
	.kid-cartbar:active { transform: translateX(-50%); }

	/* Ficha do produto */
	.kid-opt:active { background: transparent; }
	.kid-opt--on:active { background: var(--kid-red-tint); }
	.kid-qty__add:active { border-color: var(--kid-line); background: transparent; }
	.kid-dropfield:active { border-color: #dedee4; }
	.kid-btn:active { transform: none; }
	.kid-sheet__closetxt:active { color: var(--kid-muted); }

	/* Sacola e checkout */
	.kid-review-link:active { border-color: #dedee4; background: var(--kid-surface); }
	.kid-hoodfield:active { border-color: #dedee4; }
	.kid-hood:active { background: transparent; transform: none; }
	.kid-item__edit:active,
	.kid-item__remove:active { opacity: 1; }
	.kid-modal__quiet:active { color: var(--kid-muted); }
	.kid-coupon button:hover { background: var(--kid-red); }
	.kid-coupon__remove:hover { color: var(--kid-muted); }
}