/* iDelivPedWeb — CSS3 moderno: @layer, custom properties, color-mix(), :has(), container queries, scroll-snap, @starting-style, prefers-* . Mobile-first (alvos de toque >= 44 px). */
@layer base, layout, componentes, temas, utilitarios;

@layer base {
  :root {
    --cor: #ea1d2c;
    --cor-escura: color-mix(in srgb, var(--cor) 78%, black);
    --sobre-cor: #ffffff;
    --topo-bg: color-mix(in srgb, var(--card) 88%, transparent);
    --topo-txt: var(--txt);
    --cor-suave: color-mix(in srgb, var(--cor) 10%, var(--card));
    --txt: #1f1f1f;
    --suave: #6b6b6b;
    --fundo: #f6f4f2;
    --card: #ffffff;
    --linha: #e8e4e0;
    --ok: #168a3a;
    --aviso: #b26a00;
    --raio: 16px;
    --raio-p: 10px;
    --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .06);
    --sombra-g: 0 12px 40px rgb(0 0 0 / .22);
    --topo-h: 3.5rem;
    --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --txt: #f3f1ef;
      --suave: #aaa6a2;
      --fundo: #121110;
      --card: #1c1a19;
      --linha: #302d2a;
      --cor-suave: color-mix(in srgb, var(--cor) 18%, var(--card));
      --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 6px 18px rgb(0 0 0 / .35);
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 4.2rem); }
  body {
    margin: 0;
    font-family: var(--fonte);
    font-size: clamp(.95rem, .92rem + .15vw, 1.05rem);
    color: var(--txt);
    background: var(--fundo);
    line-height: 1.45;
    text-wrap: pretty;
    -webkit-tap-highlight-color: transparent;
  }
  body:has(.modal) { overflow: hidden; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.2; margin: 0; }
  p { margin: 0; }
  a { color: var(--cor); }
  button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--cor) 70%, white); outline-offset: 2px; border-radius: 6px; }
  img { max-inline-size: 100%; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

@layer layout {
  .app { max-inline-size: 64rem; margin-inline: auto; min-block-size: 100dvh; padding-block-end: 6rem; }
  .conteudo { padding-inline: clamp(.75rem, 3vw, 1.5rem); }

  .topo {
    position: sticky; top: 0; z-index: 30; block-size: var(--topo-h);
    display: flex; align-items: center; gap: .75rem; padding-inline: clamp(.75rem, 3vw, 1.5rem);
    background: var(--topo-bg); color: var(--topo-txt);
    backdrop-filter: saturate(160%) blur(14px);
    border-block-end: 1px solid var(--linha);
  }
  .marca { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; flex: 1; color: var(--topo-txt); text-decoration: none; font-weight: 700; }
  .marca__logo {
    flex: none; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cor), var(--cor-escura)); color: var(--sobre-cor); font-weight: 800;
  }
  /* atalho "Pedidos" abaixo do título do site, com a bolinha dos pedidos em andamento */
  .subtopo { display: flex; padding: .4rem clamp(.75rem, 3vw, 1.5rem) 0; }
  .subtopo__item { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.5rem; padding-inline: .9rem; border-radius: 999px; border: 1px solid var(--linha); background: var(--card);
    color: var(--txt); font-weight: 700; text-decoration: none; }
  .selo--pedidos { background: #e53935; color: #fff; min-inline-size: 1.4rem; text-align: center; border-radius: 999px; padding: .05rem .45rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
  .pedidos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .pedido-cartao { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .8rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card);
    color: var(--txt); text-decoration: none; box-shadow: var(--sombra); }
  .pedido-cartao__num { font-weight: 800; }
  .pedido-cartao__estado { text-align: end; font-weight: 700; }
  .pedido-cartao__hora { grid-column: 1 / -1; color: var(--suave); font-size: .85rem; }
  .pedido-cartao--pendente .pedido-cartao__estado { color: #e53935; }
  .pedido-cartao--aceito .pedido-cartao__estado, .pedido-cartao--pronto .pedido-cartao__estado { color: #d97706; }
  .pedido-cartao--entrega .pedido-cartao__estado { color: #a16207; }
  .pedido-cartao--entregue .pedido-cartao__estado { color: var(--ok); }
  .marca__logo--img { object-fit: cover; background: var(--card); }
  .hero__titulo { display: flex; align-items: center; gap: .9rem; }
  .hero__logo { flex: none; inline-size: 4rem; block-size: 4rem; border-radius: 50%; object-fit: cover; background: var(--card); border: 1px solid var(--linha); }
  .marca__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .idioma { flex: none; max-inline-size: 7.5rem; min-block-size: 2.5rem; padding-inline: .5rem; border: 1px solid color-mix(in srgb, var(--topo-txt) 25%, transparent); border-radius: .6rem;
    background: transparent; color: var(--topo-txt); font: inherit; font-size: .85rem; }
  .idioma option { color: #111; background: #fff; }
  .topo-cesta {
    position: relative; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
    color: var(--txt); text-decoration: none; background: var(--cor-suave); font-size: 1.25rem;
  }
  .selo {
    position: absolute; inset-block-start: -.15rem; inset-inline-end: -.15rem; min-inline-size: 1.25rem; padding-inline: .3rem;
    background: var(--cor); color: var(--sobre-cor); border-radius: 999px; font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.25rem;
  }

  .barra-cesta {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 35; margin-inline: auto; max-inline-size: 40rem;
    display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem calc(.85rem + env(safe-area-inset-bottom));
    margin-block-end: .6rem; inline-size: calc(100% - 1.2rem);
    background: var(--cor); color: var(--sobre-cor); text-decoration: none; font-weight: 700; border-radius: var(--raio);
    box-shadow: var(--sombra-g);
    animation: sobe .28s cubic-bezier(.2, .8, .2, 1);
  }
  .barra-cesta__txt { flex: 1; }
  .barra-cesta__qtd { background: var(--sobre-cor); color: var(--cor); border-radius: 999px; padding: .1rem .65rem; font-variant-numeric: tabular-nums; }
  .barra-cesta__total { font-variant-numeric: tabular-nums; }

  .toast {
    position: fixed; inset-inline: 0; inset-block-end: 5.2rem; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 2rem); z-index: 60;
    background: #1f1f1f; color: #fff; padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--sombra-g); font-weight: 600;
    animation: sobe .22s ease-out;
  }
  @keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@layer componentes {
  /* ---- hero da loja ---- */
  .hero {
    margin-block: .75rem 1rem; padding: clamp(1rem, 4vw, 1.6rem); border-radius: calc(var(--raio) + 4px); color: var(--sobre-cor); position: relative; overflow: hidden;
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, white 22%, transparent) 0, transparent 55%),
      linear-gradient(135deg, var(--cor), var(--cor-escura));
    box-shadow: var(--sombra);
  }
  .hero h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.01em; }
  .hero__info { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .8rem; }
  .pilula {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: rgb(255 255 255 / .18); backdrop-filter: blur(6px);
  }
  .pilula--estado::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #5df28a; box-shadow: 0 0 0 3px rgb(93 242 138 / .25); }
  .pilula--fechada::before { background: #ffb4b4; box-shadow: none; }

  .aviso { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .8rem 1rem; }
  .aviso--atencao { border-color: color-mix(in srgb, var(--aviso) 55%, var(--linha)); background: color-mix(in srgb, var(--aviso) 10%, var(--card)); }
  .aviso.erro { border-color: var(--cor); color: var(--cor); }
  .carregando { text-align: center; color: var(--suave); padding: 3rem 1rem; }

  .aviso + .horarios, .hero + .horarios { margin-block-start: .6rem; }
  .aviso { margin-block-end: 0; }
  .horarios { margin-block-end: .8rem; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .55rem .9rem; }
  .horarios summary { cursor: pointer; font-weight: 700; min-block-size: 2rem; display: flex; align-items: center; }
  .horarios ul { list-style: none; margin: .4rem 0 .2rem; padding: 0; display: grid; gap: .15rem; color: var(--suave); font-variant-numeric: tabular-nums; }

  /* ---- busca + abas ---- */
  .busca { position: relative; margin-block-end: .6rem; }
  .busca input {
    inline-size: 100%; min-block-size: 3rem; padding: .7rem 1rem .7rem 2.8rem; border: 1px solid var(--linha); border-radius: 999px;
    background: var(--card); color: var(--txt); font: inherit; box-shadow: var(--sombra);
  }
  .busca::before { content: "🔍"; position: absolute; inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); font-size: 1rem; opacity: .7; }
  .abas-wrap { position: sticky; top: var(--topo-h); z-index: 20; margin-inline: calc(-1 * clamp(.75rem, 3vw, 1.5rem)); padding-inline: clamp(.75rem, 3vw, 1.5rem);
    background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--linha); }
  .abas { display: flex; gap: .5rem; overflow-x: auto; padding-block: .6rem; scrollbar-width: none; scroll-snap-type: x proximity; }
  .abas::-webkit-scrollbar { display: none; }
  .aba {
    flex: none; scroll-snap-align: center; min-block-size: 2.5rem; padding-inline: 1rem; border-radius: 999px; text-decoration: none; display: grid; place-items: center;
    background: var(--card); color: var(--txt); border: 1px solid var(--linha); font-weight: 600; transition: background .15s, color .15s, border-color .15s;
  }
  .aba[aria-current="true"] { background: var(--txt); color: var(--fundo); border-color: var(--txt); }

  /* ---- categorias e itens ---- */
  .categoria { margin-block-start: 1.4rem; }
  .categoria > h2 { font-size: 1.25rem; margin-block-end: .7rem; }
  /* nomes da hierarquia do site vêm em caixa alta sem acento (campo padrão do cadastro): exibidos em frase */
  .categoria > h2, .categoria > .tipo, .departamento, .aba { text-transform: lowercase; }
  .categoria > h2::first-letter, .categoria > .tipo::first-letter, .departamento::first-letter, .aba::first-letter { text-transform: uppercase; }
  .departamento { margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--txt-suave, #6b7280); }
  .categoria > .tipo { font-size: .95rem; font-weight: 600; margin: .9rem 0 .4rem; color: var(--txt-suave, #6b7280); }
  .itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); container-type: inline-size; }
  /* sem content-visibility: ele mudava a altura das seções durante a rolagem e a âncora da categoria caía em outra seção */
  .categoria:last-of-type { min-block-size: 70dvh; }   /* a última categoria consegue chegar ao topo */
  .catbar { position: sticky; top: var(--topo-h); z-index: 20; background: color-mix(in srgb, var(--fundo) 94%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--linha);
    margin-inline: calc(-1 * clamp(.75rem, 3vw, 1.5rem)); padding-inline: clamp(.75rem, 3vw, 1.5rem); }
  .catmenu > summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-block-size: 3rem; cursor: pointer; font-weight: 700; }
  .catmenu > summary::-webkit-details-marker { display: none; }
  .catbar__atual { margin-inline-start: auto; font-weight: 400; color: var(--suave); text-transform: lowercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .catbar__atual::first-letter { text-transform: uppercase; }
  .catmenu__lista { position: absolute; inset-inline: 0; max-block-size: 70dvh; overflow-y: auto; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-p);
    box-shadow: var(--sombra-g); padding: .6rem .9rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .4rem 1.4rem; }
  .catgrupo { display: grid; align-content: start; gap: .1rem; }
  .catgrupo__titulo { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--suave); text-transform: lowercase; margin-block: .6rem .15rem; }
  .catgrupo__titulo::first-letter { text-transform: uppercase; }
  .catitem { text-align: start; background: none; border: 0; border-radius: var(--raio-p); min-block-size: 2.75rem; padding: .3rem .6rem; text-transform: lowercase; }
  .catitem::first-letter { text-transform: uppercase; }
  .catitem:hover { background: var(--cor-suave); }
  .catitem[aria-current="true"] { color: var(--cor); font-weight: 700; }
  .item {
    position: relative; block-size: 100%; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
    transition: transform .12s ease, border-color .15s;
  }
  .item:has(.item__corpo:not(:disabled)):hover { border-color: color-mix(in srgb, var(--cor) 45%, var(--linha)); }
  .item:has(.item__corpo:not(:disabled)):active { transform: scale(.985); }
  .item.esgotado { opacity: .6; }
  .item__corpo {
    inline-size: 100%; block-size: 100%; display: grid; grid-template-columns: 1fr auto; gap: .9rem; align-items: stretch; text-align: start;
    padding: .8rem; border: 0; background: none; border-radius: inherit; color: inherit;
  }
  .item__corpo:disabled { cursor: default; }
  .item__texto { display: flex; flex-direction: column; gap: .25rem; min-inline-size: 0; }
  .item__nome { font-weight: 700; font-size: 1.02rem; }
  .item__desc { color: var(--suave); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .item__preco { margin-block-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
  .item__tag { align-self: start; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--cor-suave); color: var(--cor); }
  .item__foto, .item__tile {
    inline-size: 6.2rem; block-size: 6.2rem; border-radius: var(--raio-p); object-fit: cover; align-self: center;
    background: color-mix(in srgb, var(--linha) 70%, transparent);
  }
  .item__foto { opacity: 0; transition: opacity .35s; }
  .item__foto.carregada { opacity: 1; }
  .item__tile {
    display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: hsl(var(--h) 55% 38%);
    background: linear-gradient(135deg, hsl(var(--h) 80% 92%), hsl(var(--h) 70% 82%));
  }
  @media (prefers-color-scheme: dark) { .item__tile { color: hsl(var(--h) 70% 80%); background: linear-gradient(135deg, hsl(var(--h) 35% 22%), hsl(var(--h) 35% 30%)); } }
  .item__mais {
    position: absolute; inset-inline-end: .5rem; inset-block-end: .5rem; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; border: 0;
    background: var(--cor); color: var(--sobre-cor); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 12px rgb(0 0 0 / .25);
  }
  .item__mais:active { transform: scale(.92); }

  .esqueleto { display: grid; gap: .75rem; }
  .esqueleto > div {
    block-size: 7rem; border-radius: var(--raio);
    background: linear-gradient(100deg, var(--card) 30%, color-mix(in srgb, var(--linha) 60%, var(--card)) 50%, var(--card) 70%) 0 0 / 200% 100%;
    animation: brilho 1.2s linear infinite;
  }
  @keyframes brilho { to { background-position: -200% 0; } }

  /* ---- botões, campos ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 3rem; padding: .7rem 1.2rem; border-radius: var(--raio-p);
    border: 1px solid var(--linha); background: var(--card); color: var(--txt); text-decoration: none; font-weight: 600;
  }
  .btn--principal { background: var(--cor); border-color: var(--cor); color: var(--sobre-cor); font-weight: 700; }
  .btn--grande { inline-size: 100%; min-block-size: 3.4rem; font-size: 1.05rem; border-radius: var(--raio); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .link { background: none; border: 0; color: var(--cor); font-weight: 600; min-block-size: 2.5rem; padding-inline: .2rem; }

  .campo { display: grid; gap: .3rem; margin-block: .75rem; }
  .campo > span { font-size: .85rem; font-weight: 600; color: var(--suave); }
  .campo input, .campo textarea {
    inline-size: 100%; min-block-size: 3rem; padding: .7rem .85rem; border: 1px solid var(--linha); border-radius: var(--raio-p);
    background: var(--card); color: var(--txt); font: inherit;
  }
  .campo input:user-invalid { border-color: var(--cor); }
  .campo__ajuda { font-size: .8rem; color: var(--suave); }

  .qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; background: var(--card); }
  .qtd button { inline-size: 2.75rem; block-size: 2.75rem; border: 0; background: none; color: var(--cor); font-size: 1.4rem; border-radius: 50%; }
  .qtd output { min-inline-size: 2rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* ---- modal do produto (bottom sheet no celular, diálogo no desktop) ---- */
  .modal-fundo { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .55); animation: aparece .2s ease-out; }
  .modal {
    position: fixed; z-index: 50; inset-inline: 0; inset-block-end: 0; margin-inline: auto; inline-size: min(100%, 40rem); max-block-size: 92dvh;
    display: flex; flex-direction: column; background: var(--card); border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: var(--sombra-g);
    animation: sobe-modal .3s cubic-bezier(.2, .8, .2, 1);
  }
  .modal::before { content: ""; position: absolute; inset-block-start: .5rem; inset-inline: 0; margin-inline: auto; inline-size: 2.6rem; block-size: .3rem; border-radius: 999px; background: rgb(255 255 255 / .75); z-index: 3; mix-blend-mode: difference; }
  @media (min-width: 720px) {
    .modal { inset-block: 0; margin-block: auto; block-size: fit-content; border-radius: 22px; animation: aparece .2s ease-out; }
    .modal::before { display: none; }
  }
  @keyframes sobe-modal { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  .modal__fechar { position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; z-index: 4;
    background: rgb(255 255 255 / .92); color: #111; font-size: 1.1rem; box-shadow: var(--sombra); }
  .modal__foto { inline-size: 100%; max-block-size: 30dvh; object-fit: cover; background: var(--linha); }
  .modal__corpo { padding: 1.1rem 1.1rem .4rem; overflow-y: auto; overscroll-behavior: contain; }
  .modal__titulo { font-size: 1.35rem; }
  .modal__desc { color: var(--suave); margin-block-start: .3rem; }
  .modal__preco { font-weight: 800; font-size: 1.15rem; margin-block-start: .5rem; }
  .modal__rodape { display: flex; gap: .8rem; padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--linha); background: var(--card); }
  .modal__rodape .btn { flex: 1; }
  .modal__rodape--sabores { flex-direction: column; gap: .5rem; }
  .modal__rodape-acoes { display: flex; gap: .8rem; }
  .modal__rodape-acoes .btn { flex: 1; }
  .sabores-resumo { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--suave); max-block-size: 7rem; overflow-y: auto; }
  .sabores-resumo li { padding-block: .1rem; }
  .sabor-pers { border-inline-start: 3px solid var(--cor); padding-inline-start: .7rem; }
  fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
  legend { font-weight: 800; margin-block-end: .2rem; }
  .opcao {
    display: flex; align-items: center; gap: .75rem; min-block-size: 3.2rem; padding-block: .4rem; border-block-end: 1px solid var(--linha); cursor: pointer;
  }
  .opcao input { inline-size: 1.4rem; block-size: 1.4rem; accent-color: var(--cor); flex: none; }
  .opcao em { margin-inline-start: auto; font-style: normal; color: var(--suave); font-variant-numeric: tabular-nums; }

  /* ---- cesta e checkout ---- */
  .pagina-titulo { font-size: 1.5rem; margin-block: 1rem .6rem; }
  .cartao { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin-block-end: .9rem; box-shadow: var(--sombra); }
  .cartao > h2 { font-size: 1.05rem; margin-block-end: .4rem; }
  .cesta { list-style: none; margin: 0; padding: 0; }
  .cesta__item { display: flex; gap: .8rem; justify-content: space-between; padding-block: .8rem; border-block-end: 1px solid var(--linha); }
  .cesta__item:last-child { border-block-end: 0; }
  .cesta__texto { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
  .cesta__pers, .cesta__obs { color: var(--suave); font-size: .88rem; }
  .cesta__acoes { display: flex; gap: .8rem; }
  .cesta__qtd { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
  .cesta__total { font-weight: 800; font-variant-numeric: tabular-nums; }
  .resumo p { display: flex; justify-content: space-between; margin-block: .45rem; font-variant-numeric: tabular-nums; }
  .resumo__total { font-size: 1.2rem; border-block-start: 1px dashed var(--linha); padding-block-start: .6rem; font-weight: 800; }
  .canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
  .canal {
    min-block-size: 3.2rem; border: 1.5px solid var(--linha); background: var(--card); border-radius: var(--raio-p); padding: .6rem; font-weight: 600;
    display: grid; place-items: center; text-align: center;
  }
  .canal[aria-pressed="true"] { border-color: var(--cor); background: var(--cor-suave); color: var(--cor); }
  .verificacao { display: grid; gap: .5rem; padding: .8rem; border-radius: var(--raio-p); background: var(--cor-suave); }
  .verificacao--ok { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); font-weight: 700; }
  .codigo input { letter-spacing: .5em; text-align: center; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* ---- acompanhamento ---- */
  .linha-tempo { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: 0; margin-block: 1rem; counter-reset: etapa; }
  .linha-tempo li { position: relative; text-align: center; font-size: .82rem; color: var(--suave); display: grid; gap: .4rem; justify-items: center; }
  .linha-tempo li::before { content: ""; position: absolute; inset-block-start: .8rem; inset-inline: -50% 50%; block-size: 3px; background: var(--linha); z-index: 0; }
  .linha-tempo li:first-child::before { display: none; }
  .bolinha { position: relative; z-index: 1; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; background: var(--linha); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem; }
  .linha-tempo .feito .bolinha, .linha-tempo .atual .bolinha { background: var(--ok); }
  .linha-tempo .feito::before, .linha-tempo .atual::before { background: var(--ok); }
  .linha-tempo .atual { color: var(--txt); font-weight: 800; }
  .linha-tempo .atual .bolinha { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 25%, transparent); animation: pulsa 1.6s ease-in-out infinite; }
  @keyframes pulsa { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 5%, transparent); } }
  .status { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); }
  .status strong { font-size: 1.1rem; }
  .status.recusado, .status.cancelado { border-color: var(--cor); }
  .status.pronto, .status.entregue { border-color: var(--ok); }
  .rodape { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--suave); font-size: .8rem; padding: 2rem 1rem; }
  .rodape__logo { block-size: 2.4rem; inline-size: auto; padding: .15rem .35rem; background: #fff; border-radius: .5rem; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  #blazor-error-ui { display: none; }
}

/* ===== Temas (perfis de cores e layout) — o iDeliv grava o tema da loja (Configurações avançadas > Pedidos Web) e o site aplica via <html data-tema="..."> ===== */
@layer temas {
  /* iFood: vermelho clássico, topo claro, cartões em lista com foto à direita (padrão acima). */
  /* Valores lidos do CSS CAPTURADO da página do restaurante (feeds/ifood-ponto-da-esfiha): vermelho #ea1d2c, texto #3e3e3e, secundário #717171, bordas #f2f2f2, cantos 4px,
     sombra 0 1px 4px rgb(0 0 0/.05), foto 140 px à direita, título leve, abas com sublinhado vermelho, "entrega grátis" #50a773. */
  :root[data-tema="ifood"] {
    --cor: #ea1d2c; --fundo: #ffffff; --card: #ffffff; --txt: #3e3e3e; --suave: #717171; --linha: #f2f2f2; --ok: #50a773;
    --raio: 4px; --raio-p: 4px; --sombra: 0 1px 4px rgb(0 0 0 / .05);
    --fonte: "iFood RC Textos", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  :root[data-tema="ifood"] .hero { background: none; color: var(--txt); box-shadow: none; padding: .4rem 0 .2rem; border-radius: 0; overflow: visible; }
  :root[data-tema="ifood"] .hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 400; letter-spacing: -1px; }
  :root[data-tema="ifood"] .pilula { background: none; backdrop-filter: none; color: var(--suave); font-weight: 400; padding-inline: 0; margin-inline-end: .6rem; }
  :root[data-tema="ifood"] .pilula--estado { color: var(--ok); }
  :root[data-tema="ifood"] .pilula--fechada { color: var(--cor); }
  :root[data-tema="ifood"] .busca input { border-radius: 4px; box-shadow: none; background: #f7f7f7; border-color: #f2f2f2; }
  :root[data-tema="ifood"] .abas-wrap { background: #fff; backdrop-filter: none; }
  :root[data-tema="ifood"] .aba { border: 0; border-radius: 0; background: none; color: var(--suave); font-weight: 400; border-block-end: 2px solid transparent; }
  :root[data-tema="ifood"] .aba[aria-current="true"] { background: none; color: var(--cor); border-color: var(--cor); }
  :root[data-tema="ifood"] .categoria > h2 { font-size: 1.5rem; font-weight: 400; }
  :root[data-tema="ifood"] .item { border-radius: 4px; box-shadow: 0 1px 4px rgb(0 0 0 / .05); }
  :root[data-tema="ifood"] .item__corpo { padding: 10px 20px; gap: 15px; }
  :root[data-tema="ifood"] .item__nome { font-weight: 400; font-size: 1rem; line-height: 1.25rem; }
  :root[data-tema="ifood"] .item__desc { font-size: .875rem; font-weight: 300; line-height: 1.25rem; }
  :root[data-tema="ifood"] .item__preco { font-weight: 400; font-size: 1rem; color: var(--txt); }
  :root[data-tema="ifood"] .item__foto, :root[data-tema="ifood"] .item__tile { inline-size: 140px; block-size: 140px; border-radius: 4px; align-self: flex-start; }
  @media (max-width: 480px) { :root[data-tema="ifood"] .item__foto, :root[data-tema="ifood"] .item__tile { inline-size: 100px; block-size: 100px; } }
  :root[data-tema="ifood"] .item__mais { background: #fff; color: var(--cor); border: 1px solid #f2f2f2; box-shadow: 0 1px 4px rgb(0 0 0 / .15); inline-size: 2rem; block-size: 2rem; font-size: 1.25rem; }
  :root[data-tema="ifood"] .btn, :root[data-tema="ifood"] .modal { border-radius: 4px; }
  :root[data-tema="ifood"] .barra-cesta { border-radius: 4px; }

  /* 99Food: amarelo e preto — topo preto, texto escuro sobre o amarelo, cartões em GRADE com a foto grande no alto. */
  :root[data-tema="99food"] {
    --cor: #ffc72c; --sobre-cor: #111111; --cor-escura: #e6a800; --raio: 14px; --raio-p: 8px;
    --topo-bg: #111111; --topo-txt: #ffc72c; --fundo: #f5f5f0; --txt: #111111;
  }
  :root[data-tema="99food"] .topo-cesta { background: #ffc72c; color: #111; }
  :root[data-tema="99food"] .hero { background: linear-gradient(135deg, #111111, #2b2b2b); color: #ffc72c; }
  :root[data-tema="99food"] .pilula { background: rgb(255 199 44 / .18); }
  :root[data-tema="99food"] .aba[aria-current="true"] { background: #ffc72c; color: #111; border-color: #ffc72c; }
  :root[data-tema="99food"] .itens { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  :root[data-tema="99food"] .item__corpo { grid-template-columns: 1fr; gap: .6rem; }
  :root[data-tema="99food"] .item__foto, :root[data-tema="99food"] .item__tile { order: -1; inline-size: 100%; block-size: 9rem; }
  :root[data-tema="99food"] .item__mais { inset-block-start: 7.1rem; inset-block-end: auto; }

  /* Rappi: coral, cantos bem arredondados, foto à ESQUERDA, topo e herói em cor sólida. */
  :root[data-tema="rappi"] {
    --cor: #ff441f; --cor-escura: #e63a17; --fundo: #ffffff; --txt: #2e2c36; --linha: #e6ebf1; --suave: #6a696e; --raio: 22px; --raio-p: 14px;
    --topo-bg: #ff441f; --topo-txt: #ffffff;
  }
  :root[data-tema="rappi"] .topo-cesta { background: rgb(255 255 255 / .22); color: #fff; }
  :root[data-tema="rappi"] .marca__logo { background: #fff; color: #ff441f; }
  :root[data-tema="rappi"] .hero { background: #ff441f; box-shadow: none; }
  :root[data-tema="rappi"] .pilula--estado::before { background: #29d884; box-shadow: 0 0 0 3px rgb(41 216 132 / .3); }
  :root[data-tema="rappi"] .item { box-shadow: none; }
  :root[data-tema="rappi"] .item__corpo { grid-template-columns: auto 1fr; }
  :root[data-tema="rappi"] .item__foto, :root[data-tema="rappi"] .item__tile { order: -1; }
  :root[data-tema="rappi"] .item__mais { background: #fff; color: #ff441f; border: 1.5px solid #ff441f; box-shadow: none; }

  /* Noturno: escuro com dourado, independente da preferência do aparelho. */
  :root[data-tema="noturno"] {
    --cor: #f5b301; --sobre-cor: #111111; --cor-escura: #c98f00; --fundo: #0e0e10; --card: #18181b; --txt: #f5f5f5; --suave: #a1a1aa; --linha: #2a2a30;
    --topo-bg: #131316; --topo-txt: #f5b301; color-scheme: dark;
  }
  :root[data-tema="noturno"] .hero { background: linear-gradient(135deg, #1d1b14, #2a2410); border: 1px solid #3a3115; color: #f5b301; }
  :root[data-tema="noturno"] .aba[aria-current="true"] { background: #f5b301; color: #111; border-color: #f5b301; }

  /* Verde fresco. */
  :root[data-tema="verde"] { --cor: #16a34a; --cor-escura: #0f7a37; --fundo: #f4f8f4; --txt: #1b2b1f; --linha: #dbe7dc; }
}