/* O enfeite · the builder page (/estudio). Loaded after styles.css, which gives the tokens, the type and the buttons.
   One screen, never scrolled: the bar, the stage (the 3D, the main thing), one panel under it at a time and the four steps.
   Everything sits inside the visible height (app.js keeps --vh and --vt in step with the keyboard) and the safe areas.
   The order is a full screen that slides over it on a phone; on a computer the stage is on the left and the steps, the panel
   and the order share the right-hand column. */
body.estudio-pg {
  --erro: #8E1F18; --erro-fundo: #F6E3E1; --tap: 52px;
  margin: 0; background: #050608; color: var(--ink);
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
.estudio-pg [hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sem-js { padding: 24px var(--m); background: var(--paper); }

.app {
  position: fixed; left: 0; right: 0; top: var(--vt, 0px); overflow: hidden;
  height: 100vh; height: var(--vh, 100dvh);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}

/* ---- the bar ---- */
.topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--paper);
  padding: max(env(safe-area-inset-top, 0px), 6px) max(var(--m), env(safe-area-inset-right, 0px)) 6px max(var(--m), env(safe-area-inset-left, 0px));
  min-height: 56px;
}
.topo-t { font-size: var(--t-body); font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volta {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 12px 0 0; border: 0; background: none;
  font: 600 var(--t-body)/1 var(--f); color: var(--ink); text-decoration: none; cursor: pointer;
}
.volta svg { width: 26px; height: 26px; flex: none; }
.lang-rapido {
  min-height: 48px; min-width: 48px; padding: 0 16px; border: 0; border-radius: 0; background: var(--tone); color: var(--ink);
  font: 500 var(--t-small)/1 var(--f); cursor: pointer; transition: background-color .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lang-rapido:hover { background: var(--grout); } .volta:hover span { text-decoration: underline; text-underline-offset: 5px; } }

/* ---- the builder: the stage, one panel, the steps ---- */
.estudio { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.est-vista { grid-row: 1; }
.paineis { grid-row: 2; }
.passos { grid-row: 3; }
.vivo { display: none; }
.est-vista { margin: 0; min-height: 0; display: grid; place-items: center; container-type: size; background: #050608; }
/* one stage for both pictures: the flat render underneath (it loads first, and stays if WebGL does not) and the 3D over it */
.est-palco { position: relative; aspect-ratio: 4 / 5; width: min(100%, 60vh); width: min(100cqw, 80cqh); background: #050608; overflow: hidden; }
.est-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.est-3d { opacity: 0; pointer-events: none; touch-action: none; transition: opacity .7s var(--ease); }
.est-3d.on { opacity: 1; pointer-events: auto; cursor: grab; }
.est-3d:focus-visible { outline: 3px solid var(--paper); outline-offset: -8px; }
.est-legenda {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 14px 10px; background: rgba(5, 6, 8, .78); color: #EEEDE9;
  font-size: var(--t-small); line-height: 1.35; text-align: center; pointer-events: none;
}
.est-reset {
  position: absolute; top: 10px; right: 10px; z-index: 2; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink); font: 600 var(--t-small)/1 var(--f); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .est-reset:hover { background: var(--tone); } }
/* the photo's circle: drag it to place the photo. Flat preview: fixed over the render's arena; in 3D app.js sets its place
   and size every frame, and it follows the ornament as it turns */
.est-aro {
  position: absolute; left: var(--aro-l, 24.97%); top: var(--aro-t, 31.43%); width: var(--aro-w, 50.4%); aspect-ratio: 1; border-radius: 50%;
  cursor: pointer; touch-action: none; transition: outline-color .2s var(--ease);
  outline: 3px solid transparent; outline-offset: 4px;
}
.em-3d .est-aro { aspect-ratio: auto; }
.est-aro.com-foto { cursor: grab; }
.est-aro.arrasta { cursor: grabbing; outline-color: rgba(248, 249, 251, .75); }
.est-aro.avisa { animation: aro-avisa 3.4s var(--ease) both; }
@keyframes aro-avisa { 0%, 55% { outline-color: rgba(248, 249, 251, .7); } 100% { outline-color: transparent; } }
.est-aro:focus-visible { outline-color: var(--paper); }
/* the circle places the photo; on the other steps a finger anywhere on the stage turns the ornament */
.app[data-passo="texto"] .est-aro, .app[data-passo="luz"] .est-aro, .app[data-passo="pedido"] .est-aro { pointer-events: none; }

/* ---- the panel: one at a time, in reach of a thumb. Tapping the open step again folds it away ---- */
.paineis { background: var(--paper); }
.app[data-passo=""] .paineis, .app[data-passo="pedido"] .paineis { display: none; }
.painel { display: grid; gap: 8px; padding: 10px max(var(--m), env(safe-area-inset-right, 0px)) 8px max(var(--m), env(safe-area-inset-left, 0px)); }
.app[data-passo="foto"] .painel:not([data-painel="foto"]), .app[data-passo="texto"] .painel:not([data-painel="texto"]), .app[data-passo="luz"] .painel:not([data-painel="luz"]) { display: none; }
.acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.acoes.dupla, .estudio.tem-foto .painel[data-painel="foto"] .acoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.estudio:not(.tem-foto) [data-precisa-foto] { display: none; }
.estudio.tem-foto .privado { display: none; }
.painel .btn { min-height: 54px; font-size: var(--t-body); padding: 0 14px; }
.ficheiro { position: relative; overflow: hidden; }
.ficheiro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ficheiro:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.estudio.tem-foto .ficheiro { background: var(--tone); color: var(--ink); }
.btn-tone { background: var(--tone); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-tone:hover { background: var(--grout); } }
.nota { font-size: var(--t-small); color: var(--muted); margin: 0; }
.so-fino { display: none; }
@media (hover: hover) and (pointer: fine) { .so-fino { display: block; } }
.privado { color: var(--ink); line-height: 1.35; }
.aviso { background: var(--erro-fundo); color: var(--erro); padding: 10px 14px; font-weight: 600; font-size: var(--t-small); line-height: 1.35; margin: 0; }

.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.vista {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 8px 12px;
  background: var(--wall); cursor: pointer; font-weight: 600; font-size: var(--t-body); line-height: 1.2;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .vista:hover { background: var(--tone); } }
.vista input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vista.on { background: var(--ink); color: var(--paper); }
.vista:focus-within { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.vistas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lugar-texto .vista { font-size: var(--t-small); padding: 6px 4px; }

.zoom { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap) auto; gap: 8px; align-items: center; }
.qtd-b {
  width: var(--tap); height: var(--tap); border: 0; border-radius: 0; cursor: pointer; padding: 0;
  font: 600 var(--t-lead)/1 var(--f); background: var(--wall); color: var(--ink);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .qtd-b:hover { background: var(--tone); } }
.qtd-b:active { transform: scale(.94); }
.qtd-b:disabled { color: var(--grout); cursor: default; }
.zoom input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); background: transparent; margin: 0; cursor: pointer; touch-action: pan-x; }
.zoom input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--grout); }
.zoom input[type="range"]::-moz-range-track { height: 8px; background: var(--grout); }
.zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -18px; background: var(--ink); border: 0; border-radius: 0; }
.zoom input[type="range"]::-moz-range-thumb { width: 44px; height: 44px; background: var(--ink); border: 0; border-radius: 0; }
.zoom input[type="range"]:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.zoom .centrar { min-height: var(--tap); padding: 0 14px; }

.campo { display: grid; gap: 8px; }
.campo-t { font-weight: 600; font-size: var(--t-body); padding: 0; margin: 0; }
.campo input, .campo textarea, .selecao {
  font: 400 var(--t-body)/1.3 var(--f); color: var(--ink); background: var(--paper);
  min-height: var(--tap); padding: 10px 14px; border: 2px solid var(--grout); border-radius: 0; width: 100%;
}
.selecao { -webkit-appearance: none; appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%2310285C' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat right 10px center / 22px 22px; }
.campo textarea { resize: none; }
.campo input:focus, .campo textarea:focus, .selecao:focus { border-color: var(--cobalt); }
.campo input:focus-visible, .campo textarea:focus-visible, .selecao:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.campo input[aria-invalid="true"], .selecao[aria-invalid="true"] { border-color: var(--erro); }
.campo-texto input { font-size: var(--t-lead); font-weight: 600; text-align: center; }

/* ---- the four steps: the bar under everything, the current one filled ---- */
.passos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--paper);
  padding: 4px max(var(--m), env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(var(--m), env(safe-area-inset-left, 0px));
}
.passo-b {
  position: relative; min-height: 52px; padding: 0 4px 6px; border: 0; border-radius: 0; background: var(--wall); color: var(--ink);
  font: 600 var(--t-small)/1.1 var(--f); cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease);
}
.passo-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--grout); }   /* a filled bar, not a rule: how far each step is done */
.passo-b.feito::after { background: var(--cobalt); }
.passo-b[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.passo-b[aria-expanded="true"]::after { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .passo-b:not([aria-expanded="true"]):hover { background: var(--tone); } }
.passo-b:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }

/* ---- the order: a full screen over the builder on a phone ---- */
.pedido {
  position: absolute; inset: 0; z-index: 30; background: var(--paper); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  transform: translateY(100%); visibility: hidden; transition: transform .38s var(--ease), visibility 0s .38s;
}
.app[data-passo="pedido"] .pedido { transform: none; visibility: visible; transition: transform .38s var(--ease); }
.pedido-topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: max(env(safe-area-inset-top, 0px), 4px) max(var(--m), env(safe-area-inset-right, 0px)) 2px max(var(--m), env(safe-area-inset-left, 0px)); min-height: 50px;
}
.pedido-t { font-size: var(--t-body); font-weight: 600; text-align: right; }
.pedido-passos {
  list-style: none; margin: 0; padding: 0 max(var(--m), env(safe-area-inset-right, 0px)) 6px max(var(--m), env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
}
.pedido-passos li { position: relative; padding: 4px 4px 9px; background: var(--wall); text-align: center; font-size: var(--t-small); font-weight: 600; line-height: 1.1; color: var(--muted); }
.pedido-passos li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--grout); }
.pedido-passos li.feito::after { background: var(--cobalt); }
.pedido-passos li.agora { background: var(--ink); color: var(--paper); }
.pedido-passos li.agora::after { background: var(--paper); }
.pedido-form {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px max(var(--m), env(safe-area-inset-right, 0px)) 12px max(var(--m), env(safe-area-inset-left, 0px));
}
.sub { display: grid; gap: 8px; align-content: start; max-width: 680px; margin: 0 auto; }
.pedido-acao { padding: 8px max(var(--m), env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(var(--m), env(safe-area-inset-left, 0px)); background: var(--paper); }
.pedido-acao .btn { min-height: 54px; font-size: var(--t-body); }
.pedido-acao .btn[disabled] { background: var(--grout); color: var(--muted); cursor: default; }
.foto-resumo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.foto-resumo:has(.est-mini[hidden]) { grid-template-columns: minmax(0, 1fr); }
.foto-resumo-txt { display: grid; gap: 8px; justify-items: start; }
.foto-resumo-txt p { margin: 0; line-height: 1.35; font-size: var(--t-small); }
.foto-resumo-txt .btn { min-height: 44px; font-size: var(--t-small); padding: 0 14px; }
.est-mini { width: 84px; height: 84px; background: #050608; }
.escolhas { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.escolhas legend { margin-bottom: 4px; font-size: var(--t-lead); }
.escolha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome preco" "desc desc"; gap: 4px 12px; align-items: baseline;
  padding: 16px 16px 16px 16px; background: var(--wall); color: var(--ink); cursor: pointer; position: relative;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .18s var(--ease);
}
.escolha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.e-nome { grid-area: nome; font-size: var(--t-lead); font-weight: 600; line-height: 1.2; }
.e-preco { grid-area: preco; font-size: var(--t-lead); font-weight: 600; white-space: nowrap; }
.e-desc { grid-area: desc; font-size: var(--t-small); line-height: 1.4; }
.escolha.on { background: var(--ink); color: var(--paper); }
/* the shell paints every .on in the LIVE red; the selected cards are not a live badge */
html.sh .vista.on, html.sh .escolha.on, html.sh .opcao.on { color: var(--paper) !important; }
.escolha:active { transform: scale(.99); }
.escolha:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .escolha:not(.on):hover { background: var(--tone); } }
.det { display: grid; gap: 10px; }
.opcao {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 60px;
  padding: 10px 14px; background: var(--wall); color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .opcao:hover { background: var(--tone); } }
.opcao input { width: 26px; height: 26px; margin: 0; accent-color: var(--cobalt); cursor: pointer; }
.op-txt { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.op-nome { font-size: var(--t-body); font-weight: 600; line-height: 1.25; }
.op-preco { font-size: var(--t-body); font-weight: 600; white-space: nowrap; }
.opcao.on { background: var(--ink); color: var(--paper); }
.opcao.on input { accent-color: var(--paper); }
.opcao:focus-within { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.op-qtd { grid-template-columns: minmax(0, 1fr) auto; cursor: default; padding: 8px 8px 8px 14px; }
.op-qtd .op-txt { display: grid; gap: 2px; }
.qtd { display: inline-grid; grid-template-columns: var(--tap) 44px var(--tap); align-items: center; }
.qtd-n { text-align: center; font-size: var(--t-lead); font-weight: 600; }
.op-qtd.on .qtd-b { background: var(--cobalt); color: var(--paper); }
.talao { background: var(--wall); padding: 12px 14px 12px; display: grid; gap: 8px; }
.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linhas li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; line-height: 1.25; }
.linhas li b { font-weight: 600; white-space: nowrap; }
.linhas .sub-l { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 1px; line-height: 1.25; }
.total { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-lead); font-weight: 600; padding-top: 10px; border-top: 6px dotted var(--cobalt); }
.fim-t { max-width: 46ch; margin: 0; line-height: 1.4; }
.fim-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fim-b .btn { min-height: 50px; font-size: var(--t-body); padding: 0 10px; text-wrap: balance; line-height: 1.2; }
.acesso { display: grid; gap: 12px; }
.acesso-ok { display: grid; gap: 8px; }
.rodape { text-align: center; }
.fim-nota a, .nota a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.campo-nome { margin-top: 2px; }

/* ---- what the ornament has so far (a computer only) ---- */
.vivo { margin: 0 24px 20px; padding: 16px 18px 14px; background: var(--wall); gap: 10px; align-content: start; }
.vivo-t { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.vivo-l { margin: 0; display: grid; gap: 6px; }
.vivo-l div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.vivo-l dt { font-size: var(--t-small); color: var(--muted); }
.vivo-l dd { margin: 0; font-size: var(--t-body); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vivo-p { margin: 4px 0 0; padding-top: 10px; border-top: 6px dotted var(--cobalt); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--t-small); }
.vivo-p b { font-size: var(--t-body); }

/* ---- a computer: the stage on the left, the steps, the panel and the order in one column on the right ---- */
@media (min-width: 900px) and (min-height: 560px) {
  .app { grid-template-columns: minmax(0, 1fr) 480px; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .topo { grid-column: 1 / -1; }
  .estudio { display: contents; }
  .est-vista { grid-column: 1; grid-row: 2 / 5; }
  .est-palco { width: min(94cqw, 78cqh); }
  .passos { grid-column: 2; grid-row: 2; padding: 12px 24px 4px; }
  .paineis { grid-column: 2; grid-row: 3; padding: 4px 0; }
  .app[data-passo="pedido"] .paineis, .app[data-passo=""] .paineis { display: block; }
  .app[data-passo="pedido"] .paineis .painel, .app[data-passo=""] .paineis .painel { display: none; }
  .vivo { display: grid; grid-column: 2; grid-row: 4; align-self: end; }
  .app[data-passo="pedido"] .vivo { display: none; }
  .painel { padding: 12px 24px; }
  .pedido { position: static; grid-column: 2; grid-row: 3 / 5; transform: none; visibility: hidden; transition: none; min-height: 0; z-index: auto; }
  .app[data-passo="pedido"] .pedido { visibility: visible; }
  .pedido-topo { padding: 4px 24px; min-height: 48px; }
  .pedido-passos { padding: 0 24px 6px; }
  .pedido-form { padding: 8px 24px 12px; }
  .pedido-acao { padding: 8px 24px 16px; }
  .app { background: var(--paper); }
}
/* a laptop's browser leaves 600 to 700 px of height: the same column, a little tighter, and the summary steps aside when it would crowd the panel */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 800px) {
  .topo { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .passos { padding-top: 8px; }
  .passo-b { min-height: 46px; }
  .painel { padding: 8px 24px; gap: 6px; }
  .painel .btn { min-height: 48px; }
  .vivo { margin-bottom: 12px; padding: 12px 16px 10px; gap: 8px; }
  .escolha { padding: 12px 16px; }
  .escolhas { gap: 8px; }
  .pedido-form { padding: 6px 24px 8px; }
  .pedido-acao { padding: 6px 24px 12px; }
  .pedido-acao .btn { min-height: 48px; }
  /* the order's two heading rows share one: "Voltar" on the left, the three panes on the right (the pane's name is in the bar already) */
  .pedido { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .pedido-topo { grid-column: 1; grid-row: 1; padding-right: 12px; }
  .pedido-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pedido-passos { grid-column: 2; grid-row: 1; align-self: center; padding: 0 24px 0 0; }
  .pedido-form { grid-column: 1 / -1; grid-row: 2; }
  .pedido-acao { grid-column: 1 / -1; grid-row: 3; }
  .sub { gap: 6px; }
  .fim-b .btn { min-height: 44px; }
  .det { gap: 8px; }
  .opcao { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 900px) and (min-height: 560px) and (max-height: 700px) {
  .vivo { display: none; }
  .est-palco { width: min(94cqw, 80cqh); }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  /* a phone on its side: the stage on the left, the steps and the panel beside it */
  .app { grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); grid-template-rows: auto minmax(0, 1fr); }
  .topo { grid-column: 1 / -1; min-height: 48px; padding-top: max(env(safe-area-inset-top, 0px), 2px); padding-bottom: 2px; }
  .topo .volta, .topo .lang-rapido { min-height: 44px; }
  .estudio { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); grid-template-rows: auto minmax(0, 1fr); }
  .est-vista { grid-column: 1; grid-row: 1 / 3; }
  .passos { grid-column: 2; grid-row: 1; padding: 4px 10px 2px; }
  .paineis { grid-column: 2; grid-row: 2; overflow-y: auto; }
  .passo-b { min-height: 44px; }
  .painel .btn, .vista { min-height: 46px; }
  .est-legenda { display: none; }
  .painel { padding: 6px 10px; }
}
/* editing the base text: the help line moves up, so the letters on the front band stay in view */
.app[data-passo="texto"] .est-legenda { top: 0; bottom: auto; }
/* the keyboard is open: the stage and the box being typed in are what matters */
.app.teclado .topo, .app.teclado .passos, .app.teclado .acoes.dupla { display: none; }
@media (prefers-reduced-motion: reduce) {
  .est-aro.avisa { animation: none; }
  .est-3d, .pedido, .app[data-passo="pedido"] .pedido { transition: none; }
}
.btn.com-mini { display: flex; align-items: center; gap: 12px; text-align: left; height: auto; padding-block: 5px; }
.com-mini img { width: 66px; height: 44px; object-fit: cover; flex: none; display: block; }

/* ---- inside the shell: the site's top bar (and the sidebar, collapsed) frame the tool, which takes everything that is left ---- */
html.sh .topo { display: none; }
/* the bar's row is gone from the grid: phones have the tool alone in it; a computer keeps its own rows (the first one empty) */
html.sh .app { grid-template-rows: minmax(0, 1fr); }
@media (min-width: 900px) and (min-height: 560px) { html.sh .app { grid-template-rows: auto auto auto minmax(0, 1fr); } }
html.sh body.estudio-pg { background: var(--wall); }
html.sh .app { top: calc(var(--vt, 0px) + var(--sh-topo)); height: calc(100vh - var(--sh-topo)); height: calc(var(--vh, 100dvh) - var(--sh-topo)); }
@media (min-width: 1081px) { html.sh .app { left: var(--sh-lado); } html.sh.sh-c .app { left: var(--sh-lado-c); } }
html.sh .sh-baixo { display: none !important; }                       /* the tool needs the height: the drawer (the bar's menu button) reaches the places */
html.sh.sh-tem-baixo body { padding-bottom: 0 !important; }
@media (max-width: 760px) { html.sh .sh-burger { display: inline-grid !important; } }
html.sh .app { background: var(--wall); }
@media (min-width: 900px) and (min-height: 560px) { html.sh .app { background: var(--paper); } }
/* the keyboard is open on a phone: the stage and the box being typed in are what matters, so the bar steps aside as well */
html.sh:has(.app.teclado) header.bar { display: none !important; }
html.sh:has(.app.teclado) .app { top: var(--vt, 0px); height: var(--vh, 100dvh); }
/* a phone: the bar takes 56 px that the order sheet used to have, so its two heading rows become one ("Voltar" and the three panes side by side), as on a laptop */
@media (max-width: 899px) {
  html.sh .pedido { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  html.sh .pedido-topo { grid-column: 1; grid-row: 1; padding: 2px 6px 2px max(var(--m), env(safe-area-inset-left, 0px)); min-height: 48px; }
  html.sh .pedido-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.sh .pedido-passos { grid-column: 2; grid-row: 1; align-self: center; padding: 0 max(var(--m), env(safe-area-inset-right, 0px)) 0 0; }
  html.sh .pedido-form { grid-column: 1 / -1; grid-row: 2; padding-top: 4px; }
  html.sh .pedido-acao { grid-column: 1 / -1; grid-row: 3; padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  html.sh .sub { gap: 6px; }
  html.sh .talao { padding-block: 10px; }
}
/* a laptop's short window: the bar is 8 px taller than the studio's own was, so the order's rows give a little back */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 760px) {
  html.sh .sub { gap: 4px; }
  html.sh .pedido-form { padding-top: 4px; padding-bottom: 6px; }
  html.sh .talao { padding-block: 10px; }
}
/* a phone on its side has 390 px of height or less: the tool keeps all of it, and the bar returns when the phone is turned upright */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  html.sh header.bar { display: none !important; }
  html.sh .app { top: var(--vt, 0px); height: 100vh; height: var(--vh, 100dvh); left: 0; }
  html.sh body.estudio-pg { padding-left: 0; }
}
.mais-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mais-b .btn { min-height: 52px; font-size: var(--t-small); padding: 6px 10px; line-height: 1.2; text-align: left; justify-content: flex-start; }
.mais-b .com-mini img { width: 44px; height: 44px; }
html[data-peca="praca"] .mais-b [data-praca], html[data-peca="baleia"] .mais-b [data-baleia] { order: -1; grid-column: 1 / -1; background: var(--ink); color: var(--paper); }