/* ═══════════════════════════════════════════════════════════════════════
   Mercado Helper: interface do app de listas de compras.
   Escuro com vidro sutil e destaque âmbar/laranja (o claro entra sozinho pelo
   prefers-color-scheme). Pensado para o celular, de pé, com uma mão: alvos de
   toque de 44px ou mais. Não depende de Bootstrap nem de tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Tokens ───────── */
:root {
	color-scheme: dark;
	--bg: #0a0907;
	--card: rgb(255 255 255 / .06);
	--card-hover: rgb(255 255 255 / .095);
	--line: rgb(255 255 255 / .11);
	--ink: #f6f0e7;
	--ink-2: #c3baac;
	--ink-3: #a29889;
	--accent: #fbbf24;
	--accent-2: #f97316;
	--accent-ink: #fbbf24;
	--on-accent: #1b1204;
	--danger-ink: #ff9d93;
	--glass: rgb(18 15 11 / .78);
	--sheet: rgb(26 22 16 / .96);
	--scrim: rgb(6 5 3 / .64);
	--done: rgb(251 191 36 / .075);
	--done-line: rgb(251 191 36 / .26);
	--track: rgb(255 255 255 / .1);
	--shadow: 0 22px 50px -22px rgb(0 0 0 / .9);
	--radius: 20px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--grad: linear-gradient(135deg, var(--accent), var(--accent-2));
	--glow-a: rgb(251 191 36 / .17);
	--glow-b: rgb(249 115 22 / .11);
	--glow-c: rgb(251 191 36 / .07);
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
		--bg: #fbf7f0;
		--card: rgb(255 255 255 / .78);
		--card-hover: #fff;
		--line: rgb(60 40 10 / .12);
		--ink: #1f1a12;
		--ink-2: #574e41;
		--ink-3: #6b6252;
		--accent-ink: #944405;
		--danger-ink: #b3261b;
		--glass: rgb(255 252 246 / .84);
		--sheet: rgb(255 253 249 / .98);
		--scrim: rgb(40 28 10 / .42);
		--done: rgb(251 191 36 / .16);
		--done-line: rgb(217 119 6 / .38);
		--track: rgb(60 40 10 / .1);
		--shadow: 0 22px 44px -26px rgb(90 50 0 / .4);
		--glow-a: rgb(251 191 36 / .3);
		--glow-b: rgb(249 115 22 / .14);
		--glow-c: rgb(251 191 36 / .12);
	}
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100dvh;
	font: 400 1rem/1.5 var(--font); color: var(--ink); background: var(--bg);
	-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
/* Janela aberta: a página de trás não rola no celular (no computador a barra de rolagem sumiria e a tela daria um pulo) */
@media (pointer: coarse) { body:has(dialog[open]) { overflow: hidden; } }
button, input { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
[tabindex='-1']:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.i { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fundo: brilho âmbar bem leve (gradientes estáticos, baratos para o celular) */
.bg {
	position: fixed; inset: 0; z-index: -1;
	background:
		radial-gradient(70% 45% at 12% -8%, var(--glow-a), transparent 70%),
		radial-gradient(55% 40% at 105% 18%, var(--glow-b), transparent 70%),
		radial-gradient(60% 40% at 50% 115%, var(--glow-c), transparent 70%),
		var(--bg);
}

.wrap { width: min(640px, 100% - 32px); margin-inline: auto; }
.main { padding-block: 8px calc(56px + env(safe-area-inset-bottom)); }
body[data-view='viewList'] .main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

.view { animation: view-in .32s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* ───────── Topo ───────── */
.top {
	position: sticky; top: 0; z-index: 20;
	padding-top: env(safe-area-inset-top);
	background: var(--glass); border-bottom: 1px solid var(--line);
	-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--on-accent); background: var(--grad); box-shadow: 0 8px 20px -8px var(--accent-2); }
.brand__name b { color: var(--accent-ink); font-weight: 800; }

.pill {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
	border-radius: 999px; border: 1px solid var(--line); background: var(--card);
	font-size: .95rem; font-weight: 600; transition: background .2s, transform .15s;
}
.pill:active { transform: scale(.97); }

.icon-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: var(--ink-3); transition: background .2s, color .2s, transform .15s; }
.icon-btn:active { transform: scale(.92); }
.icon-btn .i { width: 1.3em; height: 1.3em; }

/* ───────── Títulos ───────── */
.title { margin: 28px 0 4px; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.lead { margin: 0 0 22px; color: var(--ink-2); }

.titlefield { position: relative; margin-top: 18px; }
.title--input {
	display: block; width: 100%; margin: 0; padding: 8px 44px 8px 0; min-height: 52px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; text-overflow: ellipsis;
	transition: border-color .2s;
}
.title--input:focus { outline: none; border-bottom-color: var(--accent); }
.titlefield__icon { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.titlefield:focus-within .titlefield__icon { color: var(--accent-ink); }

.progress { margin: 2px 0 22px; }
.progress__text { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }

.meter { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: var(--track); }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .5s var(--ease); }

/* ───────── Campo de adicionar (lista e produto) ───────── */
.addbar {
	display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 6px 6px 20px;
	border-radius: 24px; border: 1px solid var(--line); background: var(--card);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.addbar:focus-within { border-color: var(--accent); background: var(--card-hover); box-shadow: 0 0 0 4px rgb(251 191 36 / .16); }
.addbar input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: none; font-size: 1rem; }
.addbar input:focus { outline: none; }
.addbar input::placeholder { color: var(--ink-3); opacity: 1; }
.addbar__btn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; color: var(--on-accent); background: var(--grad); box-shadow: 0 8px 18px -8px var(--accent-2); transition: transform .15s; }
.addbar__btn .i { width: 1.5em; height: 1.5em; stroke-width: 2.4; }
.addbar__btn:active { transform: scale(.9); }
.addbar.is-shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ───────── Botões ───────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px;
	border-radius: 18px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
	transition: transform .15s, filter .2s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn--block { width: 100%; min-height: 56px; }
.btn--primary { color: var(--on-accent); background: var(--grad); box-shadow: 0 10px 24px -12px var(--accent-2); }
.btn--ghost { border: 1px solid var(--line); background: var(--card); }
.btn--danger { color: #fff; background: #d02a21; }
.btn[aria-disabled='true'] { opacity: .5; box-shadow: none; }

/* ───────── Cartões de lista e de compra ───────── */
.card {
	display: flex; align-items: stretch; margin-bottom: 10px; overflow: hidden;
	border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
	transition: background .2s, border-color .2s, transform .15s;
}
.card:active { transform: scale(.985); }
.card__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; flex: 1; min-width: 0; min-height: 76px; padding: 16px 8px 16px 20px; text-align: left; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.card__total { flex: none; color: var(--accent-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.card__meta { color: var(--ink-2); font-size: .92rem; }
.card .meter { margin-top: 8px; height: 4px; }
.card__rm { align-self: center; margin-right: 6px; }
.card.is-new { animation: arrive .6s var(--ease); }
@keyframes arrive { from { opacity: 0; transform: translateY(-8px) scale(.97); border-color: var(--accent); } }

.card--buy { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 14px 16px 14px 20px; text-align: left; overflow: visible; }
.card--buy .card__main { padding: 0; min-height: 0; }
.card--buy .card__right { display: flex; align-items: center; gap: 4px; flex: none; }
.card--buy .card__sum { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.card--buy .i { color: var(--ink-3); }

/* ───────── Produtos ───────── */
.group { display: flex; align-items: center; gap: 10px; margin: 26px 4px 10px; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.group b { padding: 2px 9px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: .78rem; letter-spacing: 0; color: var(--ink-2); }
#productsContainer > .group:first-child { margin-top: 4px; }

.row {
	display: flex; align-items: center; margin-bottom: 8px;
	border-radius: 18px; border: 1px solid var(--line); background: var(--card);
	transition: background .25s, border-color .25s;
}
.row__main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 66px; padding: 10px 4px 10px 14px; text-align: left; }
.row__text { display: grid; flex: 1; min-width: 0; }
.row__name { overflow-wrap: anywhere; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.row__meta { color: var(--ink-2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.row__price { flex: none; color: var(--accent-ink); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.row__rm { margin-right: 4px; }

.row.is-done { background: var(--done); border-color: var(--done-line); }
.row.is-done .row__name { color: var(--ink-2); }

.check {
	display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
	border: 2px solid var(--ink-3); color: var(--on-accent);
	transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.row__main:active .check { transform: scale(.85); }
.is-done .check { border-color: transparent; background: var(--grad); }
.check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.check path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.row.is-new { animation: pop .6s var(--ease); }
.row.is-new.is-done .check { animation: check-pop .45s var(--ease); }
.row.is-new.is-done .check path { animation: draw .38s .1s var(--ease) both; }
@keyframes pop { 0% { transform: scale(.96); box-shadow: 0 0 0 0 rgb(251 191 36 / .45); } 55% { transform: scale(1.015); } 100% { transform: none; box-shadow: 0 0 0 16px rgb(251 191 36 / 0); } }
@keyframes check-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } }

.hint { margin: 18px 4px 0; color: var(--ink-2); font-size: .95rem; text-align: center; }

/* ───────── Estado vazio ───────── */
.empty { display: grid; justify-items: center; gap: 10px; padding: 36px 8px 8px; text-align: center; }
.empty__icon {
	display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 8px; border-radius: 28px;
	color: var(--accent-ink); background: linear-gradient(160deg, rgb(251 191 36 / .18), rgb(249 115 22 / .06));
	border: 1px solid var(--done-line); box-shadow: 0 18px 40px -18px var(--accent-2);
}
.empty__icon .i { width: 40px; height: 40px; stroke-width: 1.7; }
.empty__title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; }
.empty__text { max-width: 34ch; margin: 0 0 8px; color: var(--ink-2); }
.empty__text b { color: var(--accent-ink); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-size: .95rem; font-weight: 600; transition: background .2s, border-color .2s, transform .15s; }
.chip:active { transform: scale(.95); }

/* ───────── Esqueleto de carregamento ───────── */
.sk {
	border-radius: var(--radius);
	background: linear-gradient(90deg, var(--card) 30%, var(--card-hover) 45%, var(--card) 60%) 0 0 / 300% 100%;
	border: 1px solid var(--line);
	animation: shimmer 1.5s linear infinite;
}
.sk--card { height: 84px; margin-bottom: 10px; }
.sk--short { opacity: .6; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ───────── Detalhe da compra ───────── */
.receipt {
	margin-top: 22px; padding: 28px 20px 26px; text-align: center; border-radius: 28px;
	border: 1px solid var(--done-line); box-shadow: 0 24px 50px -28px var(--accent-2);
	background: radial-gradient(90% 120% at 50% 0%, rgb(251 191 36 / .2), transparent 70%), var(--card);
}
.receipt__name { margin: 0; color: var(--ink-2); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.receipt__total { margin: 6px 0 6px; font-size: clamp(2.6rem, 2rem + 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.receipt__date { margin: 0; color: var(--ink-2); font-size: .95rem; }

.lines { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.line + .line { border-top: 1px solid var(--line); }
.line__name { overflow-wrap: anywhere; font-weight: 600; }
.line__meta { display: block; color: var(--ink-2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.line__sum { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lines__empty { margin: 0; padding: 22px 18px; color: var(--ink-2); text-align: center; }

/* ───────── Rodapé da home ───────── */
.foot { margin-top: 40px; text-align: center; }
.foot a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 99px; color: var(--ink-3); font-size: .92rem; transition: color .2s; }

/* ───────── Barra do carrinho ───────── */
.cart {
	position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: center; pointer-events: none;
	padding: 0 16px calc(12px + env(safe-area-inset-bottom));
	animation: bar-in .4s var(--ease) both;
}
@keyframes bar-in { from { transform: translateY(24px); opacity: 0; } }
.cart__in {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(640px, 100%); pointer-events: auto;
	padding: 12px 12px 12px 22px; border-radius: 26px; border: 1px solid var(--line); background: var(--glass); box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.cart__sum { display: grid; min-width: 0; }
.cart__label { color: var(--ink-2); font-size: .82rem; font-weight: 600; }
.cart__total { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__cur { margin-right: 2px; color: var(--ink-2); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.cart__total.bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { transform: scale(1.07); color: var(--accent-ink); } }
.cart .btn { min-height: 56px; padding: 0 26px; }

/* ───────── Aviso rápido (toast) ───────── */
.toasts { position: fixed; inset: auto 16px calc(24px + env(safe-area-inset-bottom)) 16px; z-index: 70; display: grid; justify-items: center; pointer-events: none; }
body[data-view='viewList'] .toasts { bottom: calc(112px + env(safe-area-inset-bottom)); }
.toast {
	display: flex; align-items: center; gap: 4px; max-width: min(520px, 100%); min-height: 52px; padding: 6px 8px 6px 20px; pointer-events: auto;
	border-radius: 18px; border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow); font-size: .95rem; font-weight: 500;
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	animation: toast-in .35s var(--ease) both;
}
.toast.is-out { animation: toast-out .25s ease-in both; }
.toast__act { min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--accent-ink); font-weight: 800; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ───────── Janelas (sheet no celular, caixa centralizada no computador) ───────── */
.sheet {
	position: fixed; inset: auto 0 var(--kb, 0px) 0; width: 100%; max-width: 480px;
	max-height: calc(100vh - var(--kb, 0px) - 12px); max-height: calc(100dvh - var(--kb, 0px) - 12px);
	margin: 0 auto; padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--ink);
	border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--sheet); box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
}
.sheet[open] { animation: sheet-in .34s var(--ease) both; }
.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in .25s both; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (min-width: 600px) {
	.sheet { inset: 0; height: fit-content; margin: auto; border-bottom: 1px solid var(--line); border-radius: 28px; }
	.sheet--sm { max-width: 420px; }
}

.sheet__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 22px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .sheet__body { padding-bottom: 24px; } }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-right: -8px; }
.sheet__title { margin: 0; padding-top: 4px; overflow-wrap: anywhere; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.sheet__text { margin: -6px 0 0; color: var(--ink-2); }
.actions { display: grid; gap: 10px; margin-top: 4px; }

.fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fld__label { color: var(--ink-2); font-size: .92rem; font-weight: 600; }

.money, .stepper {
	display: flex; align-items: center; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
	transition: border-color .2s, box-shadow .2s;
}
.money:focus-within, .stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(251 191 36 / .16); }
.money { gap: 10px; padding: 0 20px; min-height: 68px; }
.money span { color: var(--ink-2); font-size: 1.2rem; font-weight: 700; }
.money input { flex: 1; width: 100%; min-width: 0; min-height: 66px; border: 0; background: none; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.money input::placeholder { color: var(--ink-3); opacity: .7; }
.money input:focus, .stepper input:focus { outline: none; }
.is-invalid { border-color: var(--danger-ink); }
.err { margin: 0; color: var(--danger-ink); font-size: .9rem; font-weight: 600; }

.qty-row { display: flex; gap: 10px; }
.stepper { flex: 1; min-width: 0; overflow: hidden; }
.stepper button { display: grid; place-items: center; flex: none; width: 52px; height: 54px; color: var(--ink); transition: background .2s, transform .15s; }
.stepper button:active { transform: scale(.88); }
.stepper input { flex: 1; width: 100%; min-width: 0; min-height: 54px; border: 0; background: none; text-align: center; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.seg { display: flex; flex: none; padding: 4px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-width: 64px; min-height: 46px; padding: 0 14px; border-radius: 14px; color: var(--ink-2); font-weight: 700; transition: background .2s, color .2s; }
.seg input:checked + span { color: var(--on-accent); background: var(--grad); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

.sum { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px; color: var(--ink-2); font-weight: 600; }
.sum strong { color: var(--ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

/* ───────── Telas grandes ───────── */
@media (min-width: 720px) {
	.top__in { min-height: 72px; }
	.main { padding-top: 16px; }
	.title { margin-top: 36px; }
	.cart { padding-bottom: 24px; }
	body[data-view='viewList'] .toasts { bottom: 124px; }
}

/* ───────── Menos movimento ───────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ───────── Passar o mouse (só onde existe mouse: no celular o realce não fica preso depois do toque) ───────── */
@media (hover: hover) {
	.pill:hover { background: var(--card-hover); }
	.icon-btn:hover { background: var(--card-hover); color: var(--ink); }
	.title--input:hover { border-bottom-color: var(--line); }
	.btn--primary:hover { filter: brightness(1.06); }
	.btn--ghost:hover { background: var(--card-hover); }
	.btn--danger:hover { filter: brightness(1.08); }
	.card:hover { background: var(--card-hover); }
	.card__rm:hover, .row__rm:hover { color: var(--danger-ink); }
	.row:not(.is-done):hover { background: var(--card-hover); }
	.chip:hover { border-color: var(--accent); background: var(--card-hover); }
	.foot a:hover { color: var(--accent-ink); }
	.toast__act:hover { background: var(--card-hover); }
	.stepper button:hover { background: var(--card-hover); }
}