/* Bento MAZO com degradês: tokens iguais aos do site principal (docs/superpowers/specs/2026-09-12-redesign-bento-design.md). */
:root {
  --fundo: radial-gradient(120% 60% at 50% 0%, #fff, #F4F3EF 60%);
  --fundo-solido: #F4F3EF;
  --bloco: linear-gradient(160deg, #fff, #f7f6f2);
  --bloco-solido: #fff;
  --bloco-borda: #ebe9e3;
  --campo: #fff;
  --campo-borda: #d9d6cf;
  --texto: #1C1D1F; --texto-2: #5F6166;
  --titulo-degrade: linear-gradient(180deg, #1C1D1F 35%, #7a7c82);
  --cta: linear-gradient(180deg, #d92d34, #b31c22);
  --cta-sombra: 0 6px 18px rgba(210, 35, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
  --vermelho: #D2232A;
  --destaque-foco: radial-gradient(120% 90% at 30% 10%, #3a3a3f, #161618 70%);
  --destaque-grade: linear-gradient(150deg, #FDEDEE, #F7D9DB);
  --numero-degrade: linear-gradient(180deg, #c21f26, #7d151a);
  --grade-texto: #6b4a4c;
  --palco: radial-gradient(70% 80% at 50% 45%, #fff, #eeece6);
  --selo-fundo: #FBE9EA; --selo-texto: #9E1B21;
  --ok-fundo: #E3F3E8; --ok-texto: #1D6634;
  --enc-fundo: #FFF1DB; --enc-texto: #8A4F00;
  --azul-fundo: #E6EDFB; --azul-texto: #1F4C9A;
  --sombra: 0 10px 30px rgba(20, 20, 20, .06);
  --sombra-forte: 0 18px 44px rgba(20, 20, 20, .12);
  --r-grande: 22px; --r-medio: 18px; --r-palco: 12px;
  --brilho: rgba(210, 35, 42, .08);
  --brilho-hero: rgba(210, 35, 42, .09);
  --avatar: linear-gradient(145deg, #c42a31, #9e1b21); /* iniciais brancas: 5,64 no início e 7,98 no fim */
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --fundo: radial-gradient(120% 60% at 50% 0%, #232326, #0d0d0f 60%);
  --fundo-solido: #0d0d0f;
  --bloco: linear-gradient(160deg, #1c1c1f, #121214);
  --bloco-solido: #161618;
  --bloco-borda: #26262a;
  --campo: #111113;
  --campo-borda: #34343a;
  --texto: #ECECEA; --texto-2: #A3A6AB;
  --titulo-degrade: linear-gradient(180deg, #fff 35%, #8d8d92);
  --cta-sombra: 0 6px 20px rgba(229, 72, 77, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
  --vermelho: #E5484D;
  --destaque-foco: radial-gradient(120% 90% at 30% 10%, #4a1518, #1a0b0c 75%);
  --destaque-grade: linear-gradient(150deg, #1e1e21, #151517);
  --numero-degrade: linear-gradient(180deg, #ff9ea2, #e5484d);
  --grade-texto: #A3A6AB;
  --palco: radial-gradient(60% 80% at 50% 45%, #f4f2ec, #cfccc4 70%, #8e8b84);
  --selo-fundo: #3A1D1F; --selo-texto: #FF9EA2;
  --ok-fundo: #15301F; --ok-texto: #86E0A4;
  --enc-fundo: #33270F; --enc-texto: #F5C26B;
  --azul-fundo: #17223A; --azul-texto: #A4C0F7;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --sombra-forte: 0 18px 44px rgba(0, 0, 0, .5);
  --brilho: rgba(255, 255, 255, .08);
  --brilho-hero: rgba(229, 72, 77, .16);
  --avatar: linear-gradient(145deg, #c73a3f, #8a1a1f); /* iniciais brancas: 5,12 no início e 9,34 no fim */
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fundo-solido); }
body { margin: 0; min-height: 100dvh; font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo) no-repeat, var(--fundo-solido); background-attachment: fixed; color: var(--texto); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.texto-2 { color: var(--texto-2); }
.nota { font-size: 14px; color: var(--texto-2); }
.logo-escuro, [data-theme="dark"] .logo-claro { display: none; }
[data-theme="dark"] .logo-escuro { display: block; }

/* ---- blocos e títulos ---- */
.bloco { background: var(--bloco); border: 1px solid var(--bloco-borda); border-radius: var(--r-grande); box-shadow: var(--sombra); }
.titulo-degrade { color: var(--texto); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .titulo-degrade { background: var(--titulo-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.sobretitulo { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }

/* ---- botões ---- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--bloco-borda); border-radius: 999px; background: var(--bloco-solido); color: var(--texto); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.botao:hover { box-shadow: var(--sombra); }
.botao-cta { border: 0; background: var(--cta); color: #fff; box-shadow: var(--cta-sombra); }
.botao-cta:hover { transform: translateY(-1px); box-shadow: var(--cta-sombra), 0 2px 0 rgba(0, 0, 0, .05); }
.botao-largo { width: 100%; }
.botao-icone { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bloco-borda); border-radius: 999px; background: var(--bloco-solido); color: var(--texto); cursor: pointer; }
.botao-icone svg { width: 20px; height: 20px; }
/* Aparelhos de toque seguem sempre o tema do aparelho (tema.js): o botão de tema some. */
@media (hover: none) and (pointer: coarse) { #tema { display: none; } }
button:disabled { opacity: .6; cursor: wait; transform: none; }
.link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--vermelho); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.icone-sol, [data-theme="dark"] .icone-lua { display: none; }
[data-theme="dark"] .icone-sol { display: block; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- formulários ---- */
.formulario { display: grid; gap: 16px; }
.formulario label, .gaveta-form label:not(.opcao):not(.check) { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
:where(input:not([type=radio]):not([type=checkbox]), select, textarea) { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--campo-borda); border-radius: 14px; background: var(--campo); color: var(--texto); font-weight: 500; }
textarea { resize: vertical; min-height: 110px; }
/* O placeholder da busca é o único rótulo visível: cor do texto secundário (o cinza padrão do navegador ficava em 3,92 no escuro). */
::placeholder { color: var(--texto-2); opacity: 1; }
.aviso-texto { min-height: 1.5em; margin: 12px 0 0; color: var(--selo-texto); font-weight: 600; line-height: 1.5; }
.aviso-texto:empty { margin: 0; min-height: 0; }

/* ---- entrada ---- */
.acesso { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; padding: clamp(16px, 6vh, 64px) 16px 32px; }
.acesso-principal { padding: clamp(22px, 5vw, 40px); }
.acesso-logo { height: 52px; width: auto; }
.acesso h1 { margin: 20px 0 6px; font-size: clamp(32px, 6vw, 46px); }
.acesso-principal > .texto-2 { margin: 0 0 22px; }
#login-aviso { margin-top: 16px; }
#login-aviso:empty { margin-top: 0; }
.bloco-foco { display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: 20px; border: 0; background: var(--destaque-foco); color: #f5f5f7; }
.bloco-foco .sobretitulo { color: #ff8a8e; }
.foco-titulo { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #f5f5f7; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foco-titulo { background: linear-gradient(180deg, #fff 40%, #9a9aa0); -webkit-background-clip: text; background-clip: text; color: transparent; }
  [data-theme="dark"] .foco-titulo { background-image: linear-gradient(180deg, #fff 40%, #c9a3a5); }
}
.bloco-grade-destaque { display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: 20px; background: var(--destaque-grade); }
.bloco-grade-destaque p { margin: 0; color: var(--grade-texto); font-size: 14px; }
.bloco-grade-destaque .numero-degrade { font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--vermelho); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bloco-grade-destaque .numero-degrade { background: var(--numero-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (min-width: 760px) {
  .acesso { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
  .acesso-principal { grid-row: span 2; }
}
/* Os três blocos da entrada chegam em sequência. */
.acesso > .bloco { animation: sobe .6s var(--curva) backwards; }
.acesso > .bloco:nth-child(2) { animation-delay: .09s; }
.acesso > .bloco:nth-child(3) { animation-delay: .18s; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }

/* ---- topo ---- */
/* O fundo desfocado fica numa camada própria: ao rolar, ela e o conteúdo sobem (só transform), sem mexer no layout da página. */
.topo { position: sticky; top: 0; z-index: 10; padding: 10px clamp(12px, 4vw, 40px) 0; pointer-events: none; }
.topo > * { pointer-events: auto; }
.topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fundo-solido) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bloco-borda); transition: transform .3s var(--curva), box-shadow .3s ease; }
.topo-linha, .chips { transition: transform .3s var(--curva); }
.topo.rolou::before { transform: translateY(-12px); background: color-mix(in srgb, var(--fundo-solido) 74%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.topo.rolou .topo-linha { transform: translateY(-4px); }
.topo.rolou .chips { transform: translateY(-8px); }
.topo-linha { display: flex; align-items: center; gap: 10px; max-width: calc(1200px - 2 * clamp(12px, 4vw, 40px)); margin: 0 auto; }.marca { flex: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.logo { height: 36px; width: auto; }
.busca { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.busca svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--texto-2); pointer-events: none; }
.busca input { height: 44px; min-height: 44px; padding: 0 16px 0 40px; border-color: var(--bloco-borda); border-radius: 999px; background: var(--bloco-solido); }
.topo-acoes { display: flex; gap: 8px; }
.contador { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cta); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--fundo-solido); }
.contador.pulo { animation: pulo .35s var(--curva); }
@keyframes pulo { 40% { transform: scale(1.4); } 70% { transform: scale(.9); } }
.chips { display: flex; gap: 8px; max-width: calc(1200px - 2 * clamp(12px, 4vw, 40px)); margin: 0 auto; padding: 10px 0 12px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 10px 16px; border: 1px solid var(--bloco-borda); border-radius: 999px; background: var(--bloco-solido); color: var(--texto); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s var(--curva); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { border-color: transparent; background: var(--texto); color: var(--fundo-solido); }
@media (max-width: 600px) {
  .topo-linha { flex-wrap: wrap; }
  .marca { margin-right: auto; }
  .busca { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* ---- vitrine ---- */
main { max-width: 1200px; margin: 0 auto; padding: 18px clamp(12px, 4vw, 40px) 48px; }
.abertura { display: grid; gap: 12px; margin-bottom: 22px; }
/* A abertura é só o bloco da marca: logo e título lado a lado no computador, com um foco de luz no canto. */
.bloco-hero { position: relative; overflow: hidden; padding: clamp(20px, 4vw, 34px); background: radial-gradient(55% 140% at 100% 0%, var(--brilho-hero), transparent 70%), var(--bloco); }
.logo-abertura { height: clamp(44px, 7vw, 64px); width: auto; }
.bloco-hero h1 { margin: 16px 0 6px; font-size: clamp(30px, 5vw, 48px); }
.bloco-hero p { margin: 0; }
@media (min-width: 820px) {
  .bloco-hero { display: flex; align-items: center; gap: clamp(24px, 4vw, 48px); padding-block: clamp(26px, 3.4vw, 40px); }
  .logo-abertura { flex: none; padding-right: clamp(24px, 4vw, 48px); border-right: 1px solid var(--bloco-borda); }
  .bloco-hero h1 { margin-top: 0; }
}

.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.card { position: relative; padding: 8px; background: var(--bloco); border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); transition: transform .3s var(--curva), box-shadow .3s ease, opacity .5s ease-out; }
/* Cascata ao exibir e ao filtrar: --i (0 a 11) vem do app.js via setProperty. */
.card.entra { animation: sobe-card .45s var(--curva) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes sobe-card { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
/* Foco de luz que segue o cursor (--mx/--my pelo app.js). */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), var(--brilho), transparent 70%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; border-radius: var(--r-palco); }
.palco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--palco); border-radius: var(--r-palco); }
.palco img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: scale-down; mix-blend-mode: multiply; transition: transform .5s var(--curva), opacity .45s ease, scale .6s var(--curva); }
/* Enquanto a foto não chega: brilho passando pelo palco; no load (ou erro, com a silhueta) a classe sai e a foto entra. */
.palco.carregando img { opacity: 0; scale: .96; }
.palco.carregando::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .6) 50%, transparent 75%); transform: translateX(-100%); animation: brilho 1.3s ease-in-out infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
.card-corpo { display: flex; flex: 1; flex-direction: column; padding: 10px 6px 6px; }
.card-cat { margin: 0; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.card-nome { margin: 2px 0 8px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.card-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; }
.card-preco { font-size: 13px; color: var(--texto-2); }
.card-preco strong { color: var(--texto); font-weight: 800; }
.selos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.selo { padding: 2px 8px; border-radius: 999px; background: var(--selo-fundo); color: var(--selo-texto); font-size: 11px; font-weight: 700; }
.disp { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.disp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.disp-sim { background: var(--ok-fundo); color: var(--ok-texto); }
.disp-enc { background: var(--enc-fundo); color: var(--enc-texto); }
@media (hover: hover) {
  .card:hover { box-shadow: var(--sombra-forte); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-4px); }
  .card:hover::after { opacity: 1; }
  .card:hover .palco img { transform: scale(1.04); }
}
.revela { opacity: 0; transform: translateY(16px); }
.revela.visivel { opacity: 1; transform: none; }
.aviso { padding: 14px 18px; border-radius: var(--r-medio); background: var(--selo-fundo); color: var(--selo-texto); font-weight: 600; }
.vazio { padding: 48px 0; text-align: center; color: var(--texto-2); }
.rodape { padding: 24px clamp(16px, 4vw, 40px); border-top: 1px solid var(--bloco-borda); text-align: center; font-size: 14px; color: var(--texto-2); }
.rodape p { margin: 4px 0; }
.rodape a { display: inline-block; padding: 10px 4px; }

/* ---- diálogos ---- */
.painel { width: min(1000px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--bloco-borda); border-radius: var(--r-grande); background: var(--bloco-solido); color: var(--texto); box-shadow: 0 24px 64px rgba(0, 0, 0, .3); }
.painel[open] { display: flex; flex-direction: column; }
.painel::backdrop { background: rgba(10, 10, 12, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Abertura e fechamento: diálogo com fade + escala, gaveta deslizando, fundo com fade. Sem @starting-style/allow-discrete, abrem normalmente. */
.painel { opacity: 0; scale: .96; transition: opacity .25s ease, scale .3s var(--curva), translate .38s var(--curva), overlay .38s allow-discrete, display .38s allow-discrete; }
.painel[open] { opacity: 1; scale: 1; }
.painel::backdrop { opacity: 0; transition: opacity .3s ease, overlay .38s allow-discrete, display .38s allow-discrete; }
.painel[open]::backdrop { opacity: 1; }
.gaveta { opacity: 1; scale: 1; translate: 100% 0; }
.gaveta[open] { translate: 0 0; }
@starting-style {
  .painel[open] { opacity: 0; scale: .96; }
  .gaveta[open] { opacity: 1; scale: 1; translate: 100% 0; }
  .painel[open]::backdrop { opacity: 0; }
}
.painel-corpo { position: relative; overflow: auto; padding: clamp(16px, 3vw, 28px); overscroll-behavior: contain; }
.painel-estreito { width: min(460px, calc(100% - 24px)); }
.painel-estreito h2 { margin: 0 0 16px; }
.fechar { position: sticky; top: 0; float: right; z-index: 2; margin: 0 0 8px 8px; box-shadow: var(--sombra); }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 640px) {
  #detalhe { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  #detalhe .painel-corpo { flex: 1; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---- produto ---- */
.detalhe-grade { display: grid; gap: 22px; }
@media (min-width: 760px) {
  .detalhe-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .galeria { position: sticky; top: 0; }
}
.palco-grande { aspect-ratio: 1 / 1; border-radius: var(--r-medio); }
.palco-grande img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.miniaturas { display: flex; gap: 8px; padding: 10px 0 2px; overflow-x: auto; }
.miniaturas button { flex: none; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--r-palco); background: var(--palco); cursor: pointer; }
.miniaturas button[aria-pressed="true"] { border-color: var(--vermelho); }
.miniaturas img { width: 60px; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.detalhe-info h2 { margin: 4px 0 10px; font-size: clamp(24px, 3.4vw, 32px); }
.detalhe-info h3 { margin: 26px 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.composicao { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--bloco-borda); border-radius: 14px; background: var(--bloco); }

.compra { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); }
.atributo { margin: 0; padding: 0; border: 0; min-width: 0; }
.atributo legend, .tecnica legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcao span { display: grid; place-items: center; min-width: 48px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--campo-borda); border-radius: 12px; background: var(--campo); font-size: 14px; font-weight: 700; }
.opcao input:checked + span { border-color: var(--texto); background: var(--texto); color: var(--fundo-solido); }
.opcao input:focus-visible + span { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.variante-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; }
.variante-preco { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.variante-preco small { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.compra-linha { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.compra-linha .botao-cta { position: relative; flex: 1 1 200px; }
/* Confirmação rápida ao adicionar: o texto fica (leitores de tela) e um ✓ aparece por cima. */
.botao-cta.feito { color: transparent; }
.botao-cta.feito::after { content: "✓"; content: "✓" / ""; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 800; animation: marca .4s cubic-bezier(.2, .8, .3, 1.5); }
@keyframes marca { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
.quantidade label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.passo { display: inline-flex; align-items: center; border: 1px solid var(--campo-borda); border-radius: 999px; background: var(--campo); }
.passo-botao { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; font-size: 20px; font-weight: 700; cursor: pointer; }
.passo-botao:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
input.passo-campo { width: 72px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: none; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.passo-campo::-webkit-inner-spin-button, .passo-campo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.minimo-nota { margin: 0; }
.compra-aviso { margin: 0; font-size: 14px; font-weight: 600; color: var(--selo-texto); }
.compra-aviso:empty { display: none; }
.compra-aviso.ok { color: var(--ok-texto); }
.compra-aviso .link { min-height: 0; margin-left: 4px; }

.medidas { width: 100%; min-width: 280px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.medidas th, .medidas td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--bloco-borda); }
.medidas thead th { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.medidas tbody tr:nth-child(even) { background: color-mix(in srgb, var(--texto) 3%, transparent); }
.tabela-rolagem { overflow: auto; border: 1px solid var(--bloco-borda); border-radius: 14px; }
.guia { margin: 14px 0 0; padding: 14px; border: 1px dashed var(--campo-borda); border-radius: var(--r-medio); }
.guia svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; color: var(--texto-2); }
.guia .peca { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.guia .seta { stroke: var(--vermelho); stroke-width: 2; }
.guia .ponta, .guia .rotulo { fill: var(--vermelho); }
.guia .rotulo { font: 700 12px Manrope, system-ui, sans-serif; }
.guia figcaption { margin-top: 8px; font-size: 13px; color: var(--texto-2); }

/* ---- gaveta: carrinho e meus pedidos ---- */
.gaveta { width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-width: 0 0 0 1px; border-radius: var(--r-grande) 0 0 var(--r-grande); background: var(--fundo-solido); }
@media (max-width: 640px) { .gaveta { width: 100%; border: 0; border-radius: 0; } }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--bloco-borda); background: var(--bloco-solido); }
.gaveta-topo h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gaveta-topo h2:focus { outline: none; }
.gaveta-conteudo, .gaveta-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.gaveta-corpo { flex: 1; overflow: auto; padding: 16px; overscroll-behavior: contain; }
.gaveta-rodape { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bloco-borda); background: var(--bloco-solido); }
.gaveta-rodape .nota { margin: 0 0 10px; font-size: 13px; }
.resumo { display: grid; gap: 4px; margin: 0 0 10px; }
.resumo div { display: flex; justify-content: space-between; gap: 12px; }
.resumo dt { color: var(--texto-2); font-size: 14px; }
.resumo dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.resumo-total dt { color: var(--texto); font-weight: 700; }
.resumo-total dd { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.erro-campo { margin: 0; color: var(--selo-texto); font-size: 14px; font-weight: 700; }
.erro-campo:empty { display: none; }
.gaveta-rodape .erro-campo { margin-bottom: 10px; }

.grupos, .itens, .revisao-itens, .pedidos-lista { margin: 0; padding: 0; list-style: none; }
.grupos { display: grid; gap: 12px; }
.grupo { padding: 12px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); }
.grupo-cabeca { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.mini-palco { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-palco); background: var(--palco); }
.mini-palco img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.grupo-nome { margin: 0; font-weight: 800; line-height: 1.25; }
.grupo-min { margin: 2px 0 0; font-size: 13px; color: var(--ok-texto); font-weight: 600; }
.grupo-min.alerta { color: var(--enc-texto); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "var sub rem" "passo passo rem"; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--bloco-borda); }
.item-var { grid-area: var; display: grid; font-size: 13px; }
.item-nome { font-size: 15px; font-weight: 700; }
.item .passo { grid-area: passo; justify-self: start; }
.item-subtotal { grid-area: sub; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.botao-remover { grid-area: rem; border-color: transparent; background: none; color: var(--texto-2); }
.botao-remover:hover { color: var(--vermelho); }
@media (min-width: 420px) {
  .item { grid-template-columns: minmax(0, 1fr) auto auto 44px; grid-template-areas: "var passo sub rem"; }
  .item-subtotal { min-width: 84px; }
}
.a-confirmar { padding: 2px 8px; border-radius: 999px; background: var(--enc-fundo); color: var(--enc-texto); font-size: 12px; font-weight: 700; }

.voltar { margin-bottom: 6px; text-decoration: none; }
.revisao-itens { display: grid; margin: 6px 0 16px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); }
.revisao-itens li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 14px; font-size: 14px; }
.revisao-itens li + li { border-top: 1px solid var(--bloco-borda); }
.campo-obs { margin-top: 4px; }
.obs-conta { margin: 4px 0 8px; text-align: right; font-size: 12px; }
.personalizacao, .equipe-crs { display: grid; gap: 12px; margin: 8px 0 0; padding: 14px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); }
.personalizacao > legend, .equipe-crs > legend { padding: 0 6px; font-weight: 800; }
.equipe-crs { gap: 2px; }
.equipe-corpo { display: grid; gap: 12px; align-content: start; }
.equipe-corpo > .voltar, .equipe-corpo > .sobretitulo { justify-self: start; margin: 0; }
.equipe-crs .nota, .equipe-email { margin: 0; }
/* CR / local de entrega na revisão do pedido */
.campo-cr { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); }
.gaveta-form .campo-cr label { font-weight: 800; }
.cr-endereco { margin: 0; overflow-wrap: anywhere; }
.aviso-cr { margin: 0 0 14px; padding: 14px; border-radius: var(--r-medio); background: var(--selo-fundo); color: var(--selo-texto); font-weight: 700; }
.pedido-cr { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.pedido-linha.fixa { cursor: default; }
.pedido-linha.fixa:hover { box-shadow: none; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--vermelho); }
.personal-campos { display: grid; gap: 12px; }
.personalizacao:has(input[name=personalizar]:not(:checked)) .personal-campos { display: none; }
.tecnica { margin: 0; padding: 0; border: 0; }

.estado-vazio { display: grid; justify-items: center; gap: 10px; padding: 40px 12px; text-align: center; }
.estado-vazio p { margin: 0; }
.estado-titulo { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.estado-titulo:focus { outline: none; }
.sucesso .acoes-linha { justify-content: center; margin-top: 8px; }
.icone-ok { width: 64px; height: 64px; }
.icone-ok circle { fill: var(--ok-fundo); }
.icone-ok path { fill: none; stroke: var(--ok-texto); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--texto-2); }
.giro { width: 20px; height: 20px; border: 3px solid var(--bloco-borda); border-top-color: var(--vermelho); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.pedidos-lista { display: grid; gap: 10px; }
.pedido-linha { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 14px; border: 1px solid var(--bloco-borda); border-radius: var(--r-medio); background: var(--bloco); text-align: left; cursor: pointer; }
.pedido-linha:hover { box-shadow: var(--sombra); }
.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pedido-topo strong { font-size: 16px; letter-spacing: -.01em; }
.pedido-linha .texto-2 { font-size: 13px; }
.pedido-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.pedido-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pedido-cabeca h3 { margin: 4px 0; font-size: 28px; }
.situacao, .bloco-texto, .etapas-bloco { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--bloco-borda); border-radius: 14px; background: var(--bloco); white-space: pre-line; overflow-wrap: anywhere; }
/* Linha do tempo do pedido: um ponto por etapa sobre a linha, data à direita (quebra embaixo no celular). */
.etapas { display: grid; gap: 10px; margin: 8px 0 2px 5px; padding: 0 0 0 16px; border-left: 2px solid var(--bloco-borda); list-style: none; white-space: normal; }
.etapas li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14px; }
.etapas li::before { content: ''; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border: 2px solid var(--bloco-solido); border-radius: 50%; background: var(--vermelho); }
.etapa-nome { font-weight: 700; }
.etapas time { font-variant-numeric: tabular-nums; }
.status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.st-recebido { background: var(--enc-fundo); color: var(--enc-texto); }
.st-aprovado { background: var(--azul-fundo); color: var(--azul-texto); }
.st-enviado { background: var(--ok-fundo); color: var(--ok-texto); }
.st-cancelado { background: var(--selo-fundo); color: var(--selo-texto); }

/* ---- conta: avatar, menu e foto de perfil ---- */
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--avatar); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .02em; line-height: 1; user-select: none; }
.avatar.com-foto { background: var(--palco); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-grande { width: 60px; height: 60px; font-size: 22px; }
.avatar-enorme { width: 112px; height: 112px; font-size: 40px; box-shadow: var(--sombra-forte); }
.avatar-lista { width: 44px; height: 44px; font-size: 16px; }
.botao-conta { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.botao-conta .avatar { width: 38px; height: 38px; box-shadow: 0 0 0 1px var(--bloco-borda), var(--sombra); transition: box-shadow .2s ease, transform .15s var(--curva); }
.botao-conta:hover .avatar, .botao-conta[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--fundo-solido), 0 0 0 4px color-mix(in srgb, var(--vermelho) 60%, transparent); }
.botao-conta:active .avatar { transform: scale(.94); }

/* Menu da conta: popover ancorado ao avatar (fade + escala a partir do canto); no celular, folha que sobe de baixo. */
.conta-menu { position: fixed; inset: var(--conta-topo, 64px) var(--conta-direita, 16px) auto auto; width: min(340px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - var(--conta-topo, 64px) - 12px); margin: 0; padding: 0; overflow: auto; border: 1px solid var(--bloco-borda); border-radius: var(--r-grande); background: var(--bloco-solido); color: var(--texto); box-shadow: var(--sombra-forte), 0 2px 8px rgba(0, 0, 0, .08); overscroll-behavior: contain; transform-origin: top right;
  opacity: 0; scale: .92; transition: opacity .18s ease, scale .26s var(--curva), translate .38s var(--curva), overlay .38s allow-discrete, display .38s allow-discrete; }
.conta-menu[open] { opacity: 1; scale: 1; }
.conta-menu::backdrop { background: transparent; }
@starting-style { .conta-menu[open] { opacity: 0; scale: .92; } }
.conta-corpo { padding: 18px 8px 8px; }
.conta-cabeca { display: flex; align-items: center; gap: 14px; padding: 0 10px 16px; border-bottom: 1px solid var(--bloco-borda); }
.conta-dados { min-width: 0; }
.conta-dados p { margin: 0; overflow-wrap: anywhere; }
.conta-nome { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.conta-email { font-size: 13px; }
.conta-empresa { font-size: 13px; font-weight: 700; }
.conta-papel { display: inline-block; margin-top: 6px; }
.conta-opcoes { display: grid; gap: 2px; padding-top: 8px; }
.conta-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--texto); font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.conta-item:hover, .conta-item:focus-visible { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.conta-item:focus-visible { outline-offset: -2px; }
.conta-item svg { flex: none; width: 20px; height: 20px; color: var(--texto-2); }
.conta-sair, .conta-sair svg { color: var(--selo-texto); }
.conta-divisor { margin: 4px 12px; border: 0; border-top: 1px solid var(--bloco-borda); }
@media (max-width: 640px) {
  .conta-menu { inset: auto 0 0 0; width: 100%; max-height: 88dvh; border-width: 1px 0 0; border-radius: var(--r-grande) var(--r-grande) 0 0; opacity: 1; scale: 1; translate: 0 100%; }
  .conta-menu[open] { translate: 0 0; }
  .conta-menu::backdrop { background: rgba(10, 10, 12, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease, overlay .38s allow-discrete, display .38s allow-discrete; }
  .conta-menu[open]::backdrop { opacity: 1; }
  @starting-style {
    .conta-menu[open] { opacity: 1; scale: 1; translate: 0 100%; }
    .conta-menu[open]::backdrop { opacity: 0; }
  }
  .conta-corpo { padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); }
  .conta-corpo::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--campo-borda); }
  .conta-item { min-height: 50px; font-size: 16px; }
}

.foto-dialog h2 { margin: 0 0 18px; font-size: 22px; letter-spacing: -.02em; }
.foto-etapa { display: grid; justify-items: center; gap: 14px; text-align: center; }
.foto-dica { margin: 0; max-width: 34ch; font-size: 14px; }
.foto-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.foto-acoes .botao { flex: 1 1 auto; white-space: nowrap; }
.foto-acoes svg { width: 18px; height: 18px; }
.camera, .recorte { position: relative; width: min(300px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-medio); background: #111; }
.camera video, .camera canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera video { transform: scaleX(-1); } /* espelho, como no FaceTime; a captura também sai espelhada */
.recorte canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.recorte canvas:active { cursor: grabbing; }
.recorte canvas:focus-visible { outline: none; }
.recorte:has(canvas:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: 3px; }
/* Prévia circular: fora do círculo escurece, com um aro claro. */
.recorte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent 0 calc(100% - 2px), rgba(255, 255, 255, .9) calc(100% - 2px) 100%, rgba(10, 10, 12, .55) 100%); }
.recorte-zoom { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); color: var(--texto-2); }
.recorte-zoom svg { flex: none; width: 20px; height: 20px; }
.recorte-zoom input[type=range] { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; accent-color: var(--vermelho); }
.foto-aviso { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--selo-texto); }
.foto-aviso.ok { color: var(--texto-2); font-weight: 600; }
.foto-aviso:empty { margin: 0; }
.equipe-lista .pedido-linha { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.equipe-info { display: grid; gap: 4px; min-width: 0; }
.equipe-info .texto-2 { overflow-wrap: anywhere; }
.equipe-info .pedido-topo { align-items: flex-start; }
.equipe-info .status { flex: none; white-space: nowrap; }
/* Minha equipe: filtros, seleção (caixa de 44 px ao lado de cada pessoa) e ações em lote no rodapé. */
.equipe-lista-corpo { display: grid; gap: 12px; align-content: start; }
.equipe-filtros { display: grid; gap: 10px; }
.equipe-filtros label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.equipe-filtros-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.equipe-contagem { margin: 0; font-size: 13px; font-weight: 600; }
.equipe-resultado[aria-busy="true"] { opacity: .55; transition: opacity .2s ease; }
.equipe-todos { justify-self: start; margin-bottom: 4px; font-size: 14px; }
.equipe-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px; }
.equipe-sel { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; }
.equipe-sel:has(input:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: 0; }
.equipe-sel input { width: 22px; height: 22px; margin: 0; accent-color: var(--vermelho); cursor: pointer; }
span.equipe-sel { cursor: default; }
.equipe-item:has(.equipe-sel input:checked) .pedido-linha { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
.equipe-paginas, .pedidos-paginas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.equipe-paginas .texto-2, .pedidos-paginas .texto-2 { font-size: 13px; text-align: center; }
.pedidos-paginas { margin-top: 14px; }
.pedidos-conta { margin: 0 0 10px; font-size: 13px; }
.equipe-lote { display: grid; gap: 10px; }
.equipe-sel-info { margin: 0; font-weight: 800; }
.equipe-lote-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.equipe-lote .link { justify-self: start; }
.botao-perigo { border-color: color-mix(in srgb, var(--selo-texto) 40%, transparent); color: var(--selo-texto); }
.gaveta-form [aria-invalid="true"], .formulario [aria-invalid="true"] { border-color: var(--selo-texto); }

/* Troca de tema: a nova aparência cresce num círculo a partir do botão (--vt-x/--vt-y/--vt-r pelo app.js). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: tema-circulo .55s cubic-bezier(.4, 0, .2, 1); }
@keyframes tema-circulo {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { transition: none !important; animation: none !important; }
  .revela { opacity: 1; transform: none; }
  .giro { border-top-color: var(--vermelho); }
  .palco.carregando::before { transform: none; opacity: .5; }
  .topo.rolou::before, .topo.rolou .topo-linha, .topo.rolou .chips { transform: none; }
}