/* Espaço Sow, cartão do cliente, lote 13: resumo "Confirme seu pedido" antes de enviar (Pedro, 30/10/2026).
   Só visual. Linkado SÓ no index.html da raiz, depois de v26.css. Nenhum id ou classe existente foi renomeado.
   Tipografia: Cormorant Garamond (títulos, via --font-display) e Inter (texto e botões, via --font-ui). Nada de fonte nova.
   Cores: SOMENTE var(--...) que já existem em tokens.css e claro.css. Nenhum hex, rgb ou gradiente aqui.
   Tema: o site hoje só tem o tema claro. A variante escura do resumo fica pronta em
   html[data-tema="escuro"] (ou html.tema-escuro) e só liga quando alguém marcar o html assim.
   Contrato dos ids e dos textos que o JS troca: CONTRATO_DOM_CARTAO.md. */

/* ---------- barra fixa do pedido: "Seu pedido · N itens" + total + "Ver pedido" ---------- */
.barra-resumo{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.barra .barra-resumo .rot{display:block;white-space:nowrap;text-transform:none;font-size:.8125rem;letter-spacing:.02em;color:var(--c-topo-2)}
.barra .barra-resumo .tot{font-size:1.0625rem}
/* celular: duas linhas. 1a "Seu pedido · N itens" + total; 2a "Minha comanda" + "Ver pedido" (cabe a 360 px) */
@media (max-width:559px){
  :root:has(.barra.on){--barra-h:96px}
  .barra.on{flex-wrap:wrap;align-content:center;align-items:center;gap:var(--sp-2) var(--sp-3)}
  .barra.on .barra-pedido{display:contents}
  .barra.on .barra-resumo{order:1;flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
  .barra.on .barra-comanda{order:2;flex:1 1 0;height:48px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 var(--sp-3)}
  .barra.on .barra-comanda .rot{font-size:.8125rem}
  .barra.on .btn-claro{order:3;flex:1 1 0;padding:0 var(--sp-3)}
}

/* ---------- resumo antes de enviar (dialog#dlgConfirmar, folha de baixo para cima) ---------- */
.confirmar[open]{display:flex;flex-direction:column}
.conf-cab{position:relative;flex:none;padding:var(--sp-6) var(--gutter) var(--sp-3);background:var(--c-cartao);border-bottom:1px solid var(--c-linha)}
.conf-cab::after{content:"";position:absolute;left:var(--gutter);bottom:-1px;width:56px;height:2px;background:var(--c-ambar)}
.conf-cab h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1.08;letter-spacing:.005em;color:var(--c-grafite)}
.conf-cab h2:focus{outline:none}
.conf-comanda{margin:var(--sp-2) 0 0;font-size:var(--fs-body);line-height:1.4;color:var(--c-grafite-2)}
.conf-comanda strong{font-weight:700;color:var(--c-grafite);font-variant-numeric:lining-nums tabular-nums}

.conf-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) var(--sp-4)}
.conf-lista{list-style:none;margin:0;padding:0}
.conf-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-linha)}
.conf-desc,.sug-txt{min-width:0}
.conf-qtd{min-width:2ch;font-weight:600;color:var(--c-ambar-texto);font-variant-numeric:lining-nums tabular-nums}
.conf-nome-item{display:block;font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.15;color:var(--c-grafite);overflow-wrap:anywhere}
.conf-obs{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.35;color:var(--c-grafite-2);overflow-wrap:anywhere}
.conf-preco{white-space:nowrap;font-weight:600;color:var(--c-grafite);font-variant-numeric:lining-nums tabular-nums}

.conf-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:var(--sp-4) 0 var(--sp-3)}
.conf-total .rot{flex:1 1 auto;min-width:0;color:var(--c-grafite-2)}
.conf-total .v{flex:none;white-space:nowrap;font-size:1.625rem;font-weight:600;letter-spacing:.01em;color:var(--c-grafite);font-variant-numeric:lining-nums tabular-nums}

.conf-nome{padding-top:var(--sp-3)}
.conf-nome[hidden],.conf-sug[hidden],.confirmar .msg[hidden]{display:none}
.conf-rot{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-grafite-2)}
.conf-campo{box-sizing:border-box;display:block;width:100%;min-height:48px;margin:var(--sp-2) 0 0;padding:0 var(--sp-3);background:var(--c-areia);border:1px solid var(--c-contorno);border-radius:var(--r-1);font:inherit;font-size:1rem;color:var(--c-grafite)}
.conf-campo::placeholder{color:var(--c-grafite-2);opacity:1}
.conf-campo:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:2px}

.conf-sug{margin-top:var(--sp-5)}
.conf-sug h3{margin:0 0 var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.1;color:var(--c-grafite)}
.conf-sug-lista{list-style:none;margin:0;padding:0}
.sug-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--c-linha)}
.sug-nome{display:block;font-weight:600;line-height:1.25;color:var(--c-grafite);overflow-wrap:anywhere}
.sug-preco{display:block;font-size:var(--fs-small);color:var(--c-ambar-texto);font-variant-numeric:lining-nums tabular-nums}
.sug-add{appearance:none;box-sizing:border-box;min-width:104px;min-height:48px;margin:0;padding:0 var(--sp-4);background:transparent;border:1.5px solid var(--c-grafite);border-radius:var(--r-1);color:var(--c-grafite);font:inherit;font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sug-add:active{background:var(--c-areia)}
.sug-add:disabled{border-color:var(--c-contorno);color:var(--c-grafite-2);cursor:not-allowed}
.sug-add:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:2px}

.confirmar .msg{margin:var(--sp-3) 0 0}

.conf-pe{flex:none;display:grid;gap:var(--sp-2);padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));background:var(--c-cartao);border-top:1px solid var(--c-linha)}
.conf-pe .btn-escuro,.conf-pe .btn-contorno{min-height:54px}
.conf-pe .btn-escuro:focus-visible,.conf-pe .btn-contorno:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:2px}
.conf-pe .btn-escuro[aria-busy="true"]{cursor:progress;opacity:.6}

/* ---------- variante escura do resumo (só liga com html[data-tema="escuro"] ou html.tema-escuro) ---------- */
:is(html[data-tema="escuro"],html.tema-escuro) .confirmar{color-scheme:dark;background:var(--c-topo);color:var(--c-cartao)}
:is(html[data-tema="escuro"],html.tema-escuro) .confirmar .detalhe-alca{background:var(--c-topo-2)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-cab{background:var(--c-topo);border-bottom-color:var(--linha-invertida)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-cab h2,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-sug h3,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-nome-item,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-preco,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-total .v,
:is(html[data-tema="escuro"],html.tema-escuro) .sug-nome,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-comanda strong{color:var(--c-cartao)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-comanda,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-obs,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-total .rot,
:is(html[data-tema="escuro"],html.tema-escuro) .conf-rot{color:var(--c-topo-2)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-qtd,
:is(html[data-tema="escuro"],html.tema-escuro) .sug-preco{color:var(--c-ouro-claro)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-item,
:is(html[data-tema="escuro"],html.tema-escuro) .sug-item{border-bottom-color:var(--linha-invertida)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-campo{background:var(--c-grafite);border-color:var(--c-topo-2);color:var(--c-cartao)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-campo::placeholder{color:var(--c-topo-2)}
:is(html[data-tema="escuro"],html.tema-escuro) .sug-add{border-color:var(--c-cartao);color:var(--c-cartao)}
:is(html[data-tema="escuro"],html.tema-escuro) .sug-add:active{background:var(--c-grafite)}
:is(html[data-tema="escuro"],html.tema-escuro) .sug-add:disabled{border-color:var(--c-topo-2);color:var(--c-topo-2)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-pe{background:var(--c-topo);border-top-color:var(--linha-invertida)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-pe .btn-escuro{background:var(--c-cartao);color:var(--c-grafite)}
:is(html[data-tema="escuro"],html.tema-escuro) .conf-pe .btn-contorno{background:transparent;border-color:var(--c-cartao);color:var(--c-cartao)}
:is(html[data-tema="escuro"],html.tema-escuro) .confirmar :is(.conf-campo,.sug-add,.btn-escuro,.btn-contorno):focus-visible{outline-color:var(--c-ouro-claro)}

/* ---------- celular estreito (360 px): nada estoura na horizontal ---------- */
@media (max-width:379px){
  .conf-cab h2{font-size:1.75rem}
  .conf-item{column-gap:var(--sp-2)}
  .sug-add{min-width:96px;padding:0 var(--sp-3)}
}