/* Ki Delivery — Cardápio: hero, categorias, busca, cardápio e barra da sacola.
   Fatia contígua do frontend.css original (linhas 40–282);
   a ordem de carregamento preserva a cascata. Ver REFACTOR.md. */
/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.kid-hero {
	position: relative;
	background: linear-gradient(150deg, var(--kid-red) 0%, var(--kid-red-dark) 55%, var(--kid-red-deep) 100%);
	color: #fff;
	padding: 34px 20px 30px;
	text-align: center;
	overflow: hidden;
}
.kid-hero::before {
	content: '';
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .16), transparent 45%),
		radial-gradient(circle at 12% 85%, rgba(255, 255, 255, .10), transparent 40%);
	pointer-events: none;
}
.kid-hero--img { background-size: cover; background-position: center; }
.kid-hero__overlay { display: none; }
.kid-hero--img .kid-hero__overlay {
	display: block;
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(143, 14, 24, .55), rgba(143, 14, 24, .82));
}
.kid-hero__content { position: relative; z-index: 1; }
.kid-hero__logo {
	width: 76px; height: 76px;
	border-radius: 22px;
	object-fit: cover;
	margin: 0 auto 12px;
	border: 3px solid rgba(255, 255, 255, .85);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
	background: #fff;
}
.kid-hero__logo--placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 34px;
}
.kid-hero__name { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kid-hero__tagline { margin: 4px 0 14px; font-size: 13.5px; opacity: .88; font-weight: 500; }
.kid-hero__meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.kid-hero__hours { margin: 10px 0 0; font-size: 12px; opacity: .78; font-weight: 500; }

.kid-badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700;
	padding: 6px 12px; border-radius: 999px;
}
.kid-badge--open { background: rgba(255, 255, 255, .95); color: var(--kid-green); }
.kid-badge--closed { background: rgba(0, 0, 0, .35); color: #ffd6d9; }
.kid-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kid-badge--open .kid-badge__dot { animation: kid-pulse 1.6s infinite; }
@keyframes kid-pulse { 50% { opacity: .35; } }

.kid-chip {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 12.5px; font-weight: 600;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Barra de categorias + busca
   -------------------------------------------------------------------------- */
.kid-catbar {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--kid-line);
	padding: 10px 0 10px 12px;
}
body.admin-bar .kid-catbar { top: 32px; }
.kid-catbar__scroll {
	display: flex; gap: 8px; overflow-x: auto; flex: 1;
	scrollbar-width: none; padding-right: 8px;
	scroll-behavior: smooth;
}
.kid-catbar__scroll::-webkit-scrollbar { display: none; }
.kid-cat-pill {
	flex: 0 0 auto;
	font-size: 13.5px; font-weight: 700;
	padding: 9px 16px; border-radius: 999px;
	background: var(--kid-surface); color: var(--kid-muted);
	transition: background .18s, color .18s, transform .12s;
	white-space: nowrap;
}
.kid-cat-pill:active { transform: scale(.95); }
.kid-cat-pill--active { background: var(--kid-red); color: var(--kid-btn-text); }
.kid-catbar__search {
	flex: 0 0 auto;
	width: 40px; height: 40px; margin: 0 12px 0 4px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 12px; background: var(--kid-surface); color: var(--kid-muted);
}
.kid-catbar__search svg { width: 18px; height: 18px; }
.kid-searchbox { padding: 10px 16px; border-bottom: 1px solid var(--kid-line); }
.kid-searchbox input {
	width: 100%; padding: 12px 16px;
	border: 1.5px solid var(--kid-line); border-radius: 12px;
	outline: none; background: var(--kid-surface);
}
.kid-searchbox input:focus { border-color: var(--kid-red); background: #fff; }

/* --------------------------------------------------------------------------
   Cardápio
   -------------------------------------------------------------------------- */
.kid-menu { padding: 4px 16px 130px; background: var(--kid-menu-bg, transparent); }
.kid-section__title {
	font-size: 16px; font-weight: 800; letter-spacing: -.01em;
	margin: 26px 0 14px; padding-bottom: 10px;
	display: flex; align-items: center; gap: 10px;
}
.kid-section__title::after {
	content: ''; flex: 1; height: 1px;
	background: linear-gradient(90deg, var(--kid-line), transparent);
}
.kid-card,
.kid-card:focus,
.kid-card:focus-visible {
	display: flex; gap: 6px; align-items: stretch;
	width: 100%; text-align: left;
	padding: 16px;
	margin: 0 0 14px;
	background: #fff;
	color: var(--kid-ink);
	border: 1px solid var(--kid-line);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(15, 15, 18, .05);
	outline: none; text-decoration: none;
	transition: opacity .15s, transform .12s, box-shadow .15s, background .15s;
}
.kid-card:hover {
	background: #fafafa;
	color: var(--kid-ink);
	border-color: var(--kid-line);
	box-shadow: 0 2px 10px rgba(15, 15, 18, .05);
}
.kid-card:active {
	background: #fafafa; color: var(--kid-ink);
	opacity: .8; transform: scale(.985);
}
.kid-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kid-card__name { font-size: var(--kid-card-name, 16px); font-weight: 800; letter-spacing: -.01em; margin: 0 0 5px; }
.kid .kid-card__desc,
.kid p.kid-card__desc {
	font-size: var(--kid-card-desc, 13px); line-height: 1.45; color: var(--kid-muted); margin: 0 0 10px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	white-space: normal; overflow-wrap: anywhere; word-break: normal;
	hyphens: auto; -webkit-hyphens: auto;
	text-overflow: ellipsis; max-height: calc(1.45em * 2);
	padding: 0;
}
.kid-card__price { margin-top: auto; font-size: var(--kid-card-price, 15px); font-weight: 800; color: var(--kid-ink); }
.kid-card__price small { font-weight: 600; color: var(--kid-muted); font-size: 11.5px; }
/* "a partir de" — o prefixo é contexto, não preço: fica menor e apagado
   para o valor continuar sendo a primeira coisa que o olho pega. */
.kid-card__from,
.kid-prod__price .kid-card__from {
	font-weight: 600; font-size: 11.5px; color: var(--kid-muted);
	letter-spacing: .01em;
}
.kid-card__img {
	flex: 0 0 var(--kid-card-img, 96px);
	width: var(--kid-card-img, 96px) !important;
	height: var(--kid-card-img, 96px) !important;
	min-height: var(--kid-card-img, 96px); max-height: var(--kid-card-img, 96px);
	border-radius: 5px; object-fit: var(--kid-card-fit, cover) !important;
	background: transparent;
	align-self: center;
}
.kid-card--soldout { pointer-events: none; }

/* Arredondamento das fotos no modo "Ajustar" (contain).
   Com object-fit: contain a foto fica encaixotada numa área maior que ela:
   sobra faixa transparente em cima e embaixo. O border-radius arredonda os
   cantos da CAIXA, que ali estão vazios — a foto continua com canto reto.
   Deixando a caixa acompanhar a foto (auto + max-*), o raio passa a recortar
   pixel de verdade. No modo "Preencher" (cover) a foto já ocupa a caixa
   inteira, então nada muda. */
.kid--fit-contain .kid-card__img {
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	min-width: 0; min-height: 0;
	max-width: var(--kid-card-img, 96px);
	max-height: var(--kid-card-img, 96px);
}
.kid--fit-contain img.kid-prod__img {
	aspect-ratio: auto;
	width: auto; height: auto;
	max-width: min(240px, calc(100% - 40px));
	max-height: 240px;
}
.kid-card--soldout .kid-card__img, .kid-card--soldout .kid-card__body { opacity: .45; filter: grayscale(1); }
.kid-soldout-tag {
	display: inline-block; font-size: 11px; font-weight: 700;
	color: var(--kid-red-dark); background: var(--kid-red-tint);
	padding: 3px 8px; border-radius: 6px; margin-top: 6px; align-self: flex-start;
}
.kid-empty { text-align: center; color: var(--kid-muted); padding: 60px 20px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Barra da sacola
   -------------------------------------------------------------------------- */
.kid-cartbar {
	position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
	width: min(92%, 520px); z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: linear-gradient(135deg, var(--kid-red), var(--kid-red-dark));
	color: var(--kid-btn-text); padding: 16px 20px;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(15, 15, 18, .22);
	transition: transform .15s, background .2s, box-shadow .2s, color .2s;
}
.kid-cartbar:active { transform: translateX(-50%) scale(.97); }
.kid-cartbar.kid-bounce { animation: kid-bounce .4s; }
@keyframes kid-bounce {
	0%, 100% { transform: translateX(-50%) scale(1); }
	40% { transform: translateX(-50%) scale(1.05); }
}
.kid-cartbar__info {
	display: flex; align-items: center; gap: 7px;
	font-size: 14.5px; font-weight: 700;
	white-space: nowrap; overflow: hidden;
	min-width: 0;
}
.kid-cartbar__total { font-weight: 800; }
.kid-cartbar__dot { opacity: .75; font-weight: 800; }
.kid-cartbar__items { font-weight: 600; opacity: .95; }
.kid-cartbar__cta {
	display: flex; align-items: center; gap: 9px;
	font-size: 15px; font-weight: 800; letter-spacing: -.01em;
	flex: 0 0 auto;
}
.kid-cartbar__cta svg { width: 21px; height: 21px; }

/* Estado vazio (modo "sempre visível"): mesma cor do tema, levemente suavizada */
.kid-cartbar--empty { opacity: .96; }