/* editor-app.css — GERADO a 18/10 a partir do editor.css (tools/divide-css não existe: foi uma divisão única).
   Tudo o que só se vê com o editor ABERTO (#mc5-app, #mc5-rev, .mp-*, body.mc5-editor-open).
   Carrega em segundo plano depois do load da página (editor.js → carregaCssDoEditor) e o
   openEditor espera por ele. Regras para a PÁGINA do produto vão no editor.css; regras
   do editor aberto vêm para aqui. */
/**
 * editor.css — Editor v5 (Matter Customizer)
 * ═══════════════════════════════════════════════════════════════════════
 * Carrega EM VEZ de app.css quando a flag mc_editor_v5 está ligada.
 *
 * ARQUITETURA DE ESPECIFICIDADE (a lição do primeiro round de QA):
 *   O editor vive dentro de um tema + WooCommerce cheio de
 *   regras globais (`button:hover` do kit pintava os nossos botões de
 *   lilás). E o nosso próprio reset `.mc5 button` (0,1,1) ganhava aos
 *   componentes `.mc5-btn` (0,1,0) — o CTA ficou transparente.
 *   Regra da casa:
 *     · reset       → `.mc5 <elemento>`          (0,1,1)  — baixo
 *     · componentes → `.mc5.mc5 .mc5-*`          (0,3,0)  — ganha ao
 *       reset e a qualquer `.tema button:hover` (0,2,1) sem !important
 *   Portadores da classe .mc5: #mc-app, a folha (#mc-sheet), o toast e
 *   o PALCO (que vive dentro da galeria do tema, fora do #mc-app — sem
 *   a classe própria, os tokens nem lá chegavam).
 *
 * Ícones: Phosphor (regular), já enfileirado como dependência.
 * Mobile-first; motion só em transform/opacity; reduced-motion honrado.
 */

/* ═══ Tokens (em todos os portadores de .mc5) ═══ */

/* Rede de segurança de hover: o tema pinta `button:hover` de lilás e
   qualquer botão nosso SEM background próprio herdava-o. (0,3,1) vence
   o hover do tema (0,2,1); as bases e hovers dos componentes (mais
   abaixo no ficheiro, mesma ou maior especificidade) vencem esta regra
   por ordem — por isso ela tem de viver AQUI, antes de todas.
   :focus tem de estar cá: o tema pinta `button:focus` de rosa e o
   focus FICA depois do clique, por isso o botão ficava rosa mesmo com
   o rato longe (era o que se via no "Centrar" da barra de mover). */

/* ═══ Reset baixo (só elementos, nunca componentes) ═══ */

/* Phosphor: centragem ótica dentro de qualquer botão/linha */
/* 4.13.67 — os ícones são SVG dentro do <i class="ph">: 1em do tamanho de letra, como a fonte era. */

/* ═══ Botões ═══ */
/* :focus (sem -visible) agarrava-se depois do clique e o botão ficava
   com a cor de hover para sempre — era isso que se via no ecrã. */

/* botões-ícone (fechar, anular, setas…): quadrado, ícone centrado */

/* ═══ Página de produto ═══ */
/* o CTA precisa de ar depois da tabela de descontos: encostado, lia-se
   como parte da tabela em vez de a conclusão do bloco */
/* Tabela de medidas: vive na linha da cor, encostada à direita — o
   espaço estava vazio e o link deixou de ser um órfão sob o CTA. */
/* row-gap à parte: o gap de 10px é entre o preço e o "/ unidade"; entre o
   preço e a linha "Desce até" por baixo, 10px liam-se como duas coisas. */
/* (a antiga pílula "Desce até…" fundiu-se no cabeçalho da escada de
   descontos — uma promessa, um sítio) */
/* o nome da cor vive COLADO à etiqueta ("Cor · Burgundy"), não atirado
   para a outra ponta da linha — quem lê "Cor" quer ler já qual. */

/* Garantia do ficheiro. Sobrou um só sítio, o --edit; a base fica à parte
   porque a estrutura (ícone + texto) volta assim que houver segunda casa.
   O ícone alinha-se pelo topo porque o texto passa a duas linhas no telemóvel. */

/* Dentro do editor, ao lado do botão de carregar: sem moldura, senão fica
   uma caixa dentro de outra caixa e o botão perde protagonismo. */
/* miniatura de cor com a FOTO da variação (referência do Rafael):
   diz mais que uma bolinha; a bolinha fica como fallback sem imagem */
/* uma linha só: o anel duplo (moldura + halo) lia-se como dois
   contornos concêntricos e sujava a fila de cores */

/* Escada de descontos como FITA: as células lado a lado leem-se como
   uma progressão (mais peças → menos €), sem o ténis-de-olhos
   rótulo-à-esquerda / preço-à-direita do formato lista em ecrãs
   largos. O melhor escalão fica destacado — é o argumento de venda. */
/* MOBILE-FIRST: linhas finas — num ecrã de 375px a viagem do olho é
   curta e blocos 2×2 de 85px eram um tabuleiro pesado (medido: cartão
   de 234px; em linhas fica ~150px). A fita de células é para desktop,
   onde o problema é o inverso. */

/* ═══ Palco (galeria, mount de fallback, e editor) ═══ */

/* caixa do palco: shrink-wrap à peça — as pílulas de lado e o nudge
   ancoram AQUI, colados ao cartão da peça, não perdidos no wrap */

/* Este ficheiro só carrega com o editor v5 ativo — aproveitamos para
   silenciar o "Desde X €" do shortcode mc-lowest-price NA FICHA do
   produto: o preço por unidade real + a escada já vivem no bloco do
   editor, e o "desde" por cima deles era duplicação enganadora.
   MAS o mesmo shortcode alimenta os cartões de produto (loop items),
   onde é o ÚNICO preço — escondê-lo em todo o lado deixava os cartões
   da página de produto sem preço nenhum. Só se esconde fora deles. */
/* Esconde-se FORA dos cartões. Antes escondia em todo o lado e
   re-mostrava nos cartões com display:revert — mas isso impunha-lhes o
   display do browser e pisava o que o template quisesse. Com :not(),
   os cartões nunca recebem propriedade nenhuma minha. */

/* O CSS do template da ficha (post-223) tem `.mc-lowest-price {
   font-weight:600 }` com a classe à solta, e isso escorre para os
   cartões DESSA página: o mesmo cartão saía a 400 na loja e a 600 na
   ficha. Isolar o cartão devolve-lhe a tipografia do próprio template.
   (A correção de raiz é dar âmbito a essa regra no template 223.) */

/* Ficha técnica em linha, sob o título ([matter_specs]). Vive fora do
   .mc5 de propósito: é conteúdo da PÁGINA, não do editor, e tem de
   aparecer mesmo com a flag do v5 desligada. */
/* As regras do .mc-specs mudaram-se para assets/css/specs.css. Aqui
   dependiam da flag do v5 estar ligada, e em produção — com ela
   desligada — o widget ficava sem `display: flex`, o que tornava o
   controlo de espaçamento inerte. */

/* uma galeria só: o palco mora num slide da MCGallery */
/* fallback: páginas sem galeria */
/* modo montra (página/galeria): a zona existe só como âncora da arte */
/* "A tua imagem ou texto entra aqui" são 32 caracteres. Numa área
   pequena — o Peito Centro de uma t-shirt — transbordava em cinco linhas
   para cima da peça, e lia-se pior do que nada. Abaixo deste tamanho
   fica só o tracejado, que já diz onde é.

   Limiares medidos no palco: uma área de Peito Centro dá ~42px num
   telemóvel e não cabe; uma Frente Completa dá ~102px e cabe. */
/* Area de toque: 13px visuais sao impossiveis de agarrar com o dedo,
   e o alvo real passa a 33px sem mudar o desenho.
   Isto ja ca estava e parecia nao funcionar — so o centro respondia ao
   toque. A culpa nao era do pseudo-elemento: com imagem e texto na
   mesma area, a camada de cima tapava as pegas da de baixo. Resolvido
   no z-index de .mc5-art.sel; esta regra fica como sempre esteve. */

/* Lados (Frente/Costas): um controlo segmentado à cabeça do painel. A
   lista de áreas mostra só o lado à vista, por isso estes dois botões não
   são um atalho — são a navegação do que está por baixo deles. Já foram
   pílulas a flutuar sobre o palco; saíram de lá por taparem tecido e por
   estarem longe do que comandam. */
/* ponto = este lado ja tem arte. Posicao ABSOLUTA de proposito: em linha
   com o rotulo mudava a largura do botao ao colocar a primeira arte, e o
   controlo saltava. */
/* ambar = ha uma area deste lado a espera de arte. Nao e um erro (por
   isso nao e o vermelho de aviso), e trabalho por acabar. */

/* Ligacao dentro de um aviso (ex.: "Iniciar sessao"). Sublinhada e com
   area de toque propria: e uma porta, tem de se ver que se pode abrir. */

/* ── Mobile: editor ───────────────────────────────────────────────────
   Historia curta de duas tentativas falhadas, para nao as repetir:
   encolher o palco ao rolar era irritante; encolher a FOLHA quando o
   teclado abria redimensionava o canvas e desfazia o layout. O que
   ficou: canvas imutavel, CTA no fim do conteudo, e com o teclado
   aberto o palco so perde o sticky e desliza para fora (Threadheads). */

/* ── Chat do Matt: fora da pagina de produto em mobile ────────────────
   Levantar o balao acima da barra de compra nao resultou (a barra
   aparece e some com o scroll e o balao andava aos saltos). Num ecra
   de 375px nao ha canto livre: ou tapa o CTA, ou a tabela de precos,
   ou as setas do editor. Fora com ele — o apoio continua no rodape e
   nas outras paginas. Este ficheiro so carrega na pagina de produto
   com o editor v5, por isso o ambito e exactamente esse. */

/* ═══ Editor (folha) ═══ */
/* o chat flutuante (z-index máximo) tapava o CTA do editor */
body.mc5-editor-open #matt-sticky-chat,
body.mc5-editor-open #matt-bubble-label,
body.mc5-editor-open #matt-chat-window { display: none !important; }

/* ── A porta do Matt dentro do editor ────────────────────────────────
   Escondê-lo enquanto o editor está aberto continua certo: o balão
   tapava o CTA, e num ecrã de 375px não há canto livre. O que faltava
   era outra porta — o "?" da barra de topo. Quando é ELE a chamar, o
   matter-ai marca o chat com `matt-forced` e estas regras deixam-no
   passar (mais específicas do que as de cima, e do que a regra mobile
   que o tira da ficha de produto). A etiqueta "Precisas de ajuda?" fica
   de fora de propósito: quem clicou já sabe o que abriu.
   O balão continua visível porque é ele o X que fecha a conversa. */
/* Em telemóvel a bolha cai por cima do "Rever o meu design" (medido:
   sobrepõe-lhe o canto superior direito). A conversa fecha-se pelo X do
   próprio cabeçalho, por isso a bolha sai de cena enquanto está aberta. */
@media (max-width: 900px) {
  html body.mc5-editor-open #matt-sticky-chat.matt-forced #matt-bubble-btn { display: none !important; }
}

/* corpo — mobile: palco fixo no topo, painel corre por baixo */
/* min-width:0 em toda a cadeia: o gémeo horizontal do min-height do
   grid — sem ele, a barra de cores (conteúdo largo) recusa encolher
   e empurra 444px por dentro de um ecrã de 375. */

/* palco: wrap centrado + barra de lado/cor por BAIXO — os controlos
   nunca pousam sobre a peça (a versão flutuante tapava a pala do boné
   e as suas 14 cores tornavam-na um cartão gigante) */
/* O palco é quadrado e era dimensionado só pela ALTURA. A 58vh num
   ecrã de 375px pedia 387px de largura e ficava cortado 22px à
   direita. min() faz o quadrado respeitar o menor dos dois eixos —
   e o box tem de continuar quadrado, senão as zonas (em % do palco)
   descolam do desenho da peça. */

/* barra mover/escala */

/* painel */
/* O rodape e uma LINHA PROPRIA da grelha, nao paira sobre o painel:
   os 96px que aqui estavam para lhe fugir eram espaco morto, e viam-se
   como um vazio enorme por baixo das notas. */

/* a ranhura só existe quando tem cartão dentro — senão a grelha
   abria um espaço vazio debaixo de cada rádio */
/* o cartão é filho da escolha, não um irmão: recuado e agarrado ao
   rádio de cima, para se ver de relance a que área pertence */

/* cartão por área */
/* 44px, não 30: as artes das técnicas são o "M" da casa em bordado
   (pontos + contorno picotado) e em DTF (película a descolar). A 30px
   esse detalhe colapsa e os dois chips ficam a mesma mancha verde —
   o ícone deixava de fazer o trabalho de distinguir. */

/* v4.13.80 — no telemóvel as duas técnicas ficam lado a lado, como no
   computador. Empilhadas ocupavam 142 px dos 246 que a folha tem num ecrã
   de 664 (Safari com as barras): ao escolher a área, ou se via a técnica
   escolhida ou os botões de imagem e texto, nunca os dois. Lado a lado são
   89 px. Ícone a 32 px ao lado do nome e a descrição por baixo, a toda a
   largura do cartão; a 360 px «Estampagem» ainda cabe numa linha. Só para
   a escolha entre duas: o cartão único (t-shirts, bonés) fica como está. */
/* slot vazio quando o outro já está preenchido: convite discreto em
   linha, não um caixote tracejado a competir com o cartão de cima */
/* cartão de slot selecionado: é ESTA camada que o palco e o slider
   controlam — a moldura diz qual sem precisar de legenda */
/* Os dois slots empilhados respiram entre si em qualquer ordem: o
   convite fino pode vir em cima (imagem por preencher) ou em baixo. */
/* cartão do texto: a miniatura é um "Aa" na própria fonte e cor */

/* respiro depois do slot de imagem: a caixa de texto estava colada ao
   "+ Adicionar imagem" e as duas liam-se como um só bloco */
/* fontes por categoria: o rótulo ocupa a linha toda e os chips da
   família seguem-no — 28 opções corridas eram um muro */
/* amostras "ABC": a grelha adapta-se (4 colunas no telemóvel, 5-6 no
   painel largo) — 5 fixas espremiam a Syne, que é a mais larga */
/* grelha auto-fill: 13 discos (12 tintas + cor livre) distribuem-se
   por linhas completas — o flex centrado deixava o último disco órfão
   sozinho na segunda linha, ao centro, com ar de erro */
/* 7 colunas fixas: 13 discos partem em 7+6 — linhas quase cheias e
   equilibradas em qualquer largura (auto-fill dava 11+2) */
/* cor personalizada: o disco mostra a cor escolhida e abre o seletor
   nativo — quem tem a cor exata da marca não fica preso à paleta */
/* o texto em construção aparece na peça com um respiro visual que o
   distingue de arte já colocada */

/* controlos da camada ativa */

/* aviso com aceitação (bordado) */

/* rodapé do editor */

/* Guardar design — com palavra, não só ícone: era uma função que
   ninguém descobria. Contorno para se distinguir dos ibtn do histórico
   sem competir com o CTA principal do rodapé. */
/* Contorno cinza, não preto: descobre-se à mesma e deixa de disputar
   o olho com o CTA do rodapé, que é o botão que fecha a venda. */
/* guardado e intacto desde então — confirmação que fica, não um toast
   que desaparece antes de o cliente olhar */
/* sem arte não há nada para guardar: bloqueado em vez de castigar o
   clique com um erro */

/* ═══ Revisão ═══ */
/* Tamanho sem stock NA COR escolhida: vê-se que existe, vê-se que não dá,
   e não se pode escolher. Antes só se descobria ao adicionar ao carrinho,
   depois de o design estar feito. */
/* A nota do carrinho é contexto, não título — abaixo do peso da linha de
   cima e acima da barra, para explicar de onde vêm as peças que o cliente
   não escolheu neste ecrã. */

/* Notas de produção dentro do Rever (telemóvel). */

/* ═══ Toast ═══ */


/* Página v5: o cartão do shortcode [mc_qty_table] duplica a
   escada de descontos nova e rende sem estilos (o CSS dele vive no
   app.css antigo, que o v5 não carrega). Esconde-se o cartão inteiro,
   heading incluído. A cadeia de filhos diretos garante que só o cartão
   imediato desaparece — nunca a coluna que o contém. Com a flag
   desligada nada muda: o seletor exige #mc-app.mc5. */

/* ═══ Dedos, não cursores ═══
   Em ecrãs táteis (pointer:coarse) OU estreitos (≤900px — o emulador
   de alguns browsers não reporta coarse, e um ecrã estreito é quase
   sempre um dedo) tudo o que se toca sobe para perto dos 44px de alvo
   e o micro-tipo ganha um ponto — o editor vai ser usado por gente
   até aos 60 anos, no telemóvel. */

/* ═══ Guardar design (modal) ═══ */

/* Popup da tabela de medidas: a casca do modal de guardar, mais largo e
   com a tabela a rolar de lado se o ecrã for estreito.

   A tabela é clonada da ficha SEM o contentor que a embrulha —
   e é esse contentor que, na página, lhe dá o aspeto da casa. Solta, o
   tema pinta-lhe grelha e riscas. Repomos aqui o estilo medido na ficha:
   cabeçalho 11px/700 em maiúsculas com traço de 1px em tinta, corpo
   14px/600, sem bordas verticais nem riscas. Os !important são contra o
   tema, que pinta as riscas e as bordas no <td> com selectores mais
   fortes (mesma razão de ladder.css). */

/* ═══ Desktop (expansão) ═══ */

/* Página de produto (mobile): o CTA Personalizar é STICKY no fundo —
   sempre a um toque, como o rodapé do editor. Some quando o editor
   abre (a folha cobre tudo). */

/* ═══ Grelha de tamanhos em telemóvel ═══
   A linha horizontal ("XS ——— − 0 +") precisa de 128px de stepper mais o
   rótulo dentro de 347px de folha: não cabiam dois por linha, e a regra
   antiga colapsava para UMA coluna. Seis tamanhos davam 399px de scroll
   com ~180px de vazio em cada linha, e o escalão de descontos — o
   argumento de venda — ficava sempre fora do ecrã enquanto se escolhem
   as quantidades. Empilhar o rótulo por cima do stepper liberta a
   largura para duas colunas sem encolher um único alvo de toque. */

/* ═══ Janelas baixas: o palco tem prioridade sobre o crome ═══
   O palco é dimensionado pela ALTURA (height:100%, largura por
   proporção), por isso cada pixel gasto na barra de topo e no rodapé
   sai directamente ao mockup — e sobra faixa morta nos lados. Medido a
   1000×500: crome 127px, palco 341px numa coluna de 580 (59%).
   Abaixo de 720px de altura o crome encolhe e devolve ~40px à peça. */

/* ═══ Mobile: regras que TEM de fechar o ficheiro ═══
   Estas perdem por ordem se ficarem no bloco mobile la de cima: as
   regras base que pretendem vencer (notas, quantidades, stagebar) vem
   depois dele e têm a mesma especificidade. Aqui, por ultimo, ganham. */

/* ═══ Alvos de toque (medidos numa varredura a 375px) ═══
   Tudo o que segue existe porque o dedo nao acerta em 18 ou 31 pixeis.
   O desenho nao muda — cresce a AREA, nao a tinta. */

/* Guia de tamanhos: 18px de altura era um alvo impossivel, e para quem
   oferece uma peca e o link mais importante do ecra. Area de toque a
   condizer, nos dois sitios onde aparece. */

/* ═══ Mobile: cores ao lado do mockup ═══
   A fita horizontal por baixo do palco passa a coluna a esquerda, como
   no desktop. Fica no fim do ficheiro porque tem de vencer as regras
   base da barra (que a poem horizontal e a 100% de largura). */

/* ═══ O painel enche o resto do ecrã ═══
   Sem isto o CTA parava a meio da folha com uma faixa vazia por baixo
   (115px medidos num boné, onde há uma só área e o painel é curto).
   A altura da faixa do palco vem do JS, porque depende da proporção do
   mockup; se ainda não veio, o `0px` do fallback deixa tudo como estava. */

/* ═══ Telemóvel: a barra de acertar não pode sair do ecrã ═══
   A barra centra-se no PALCO (`left: 50%` do .mc5-stagebox). Em desktop
   isso está certo, porque o palco está centrado na sua zona. Em telemóvel
   não: a coluna de cores empurra o palco para a direita, e a barra —
   centrada nele — passava 15px para fora do ecrã. Medido num iPhone de
   390px: barra de 347px a começar em 57, a acabar em 405. O "Centrar"
   ficava cortado ao meio.

   A correcção é ancorá-la ao ECRÃ e não ao palco. O deslocamento do palco
   dentro da sua zona é conhecido — é a coluna de cores mais o intervalo —
   por isso subtrai-se. Fica centrada nos 390px reais: 22 a 368. */

/* ═══ Telemóvel: barra de topo mais baixa ═══
   Eram 65px num ecrã de 844 — 8% gastos numa barra cujo título nem cabe
   ("Personalizar · T-shirt Regular 190" pede 208px e tem 166).

   Os 65 decompõem-se em 44 de botão + 10+10 de folga + 1 de bordo. Corta-se
   na FOLGA e não no botão: os 44px de alvo de toque foram postos de
   propósito e não se mexem. Ficam 55px, e os 10 recuperados vão para o
   painel — que em telemóvel é onde falta espaço. */

/* ═══ Teclado aberto: o palco passa a ser dimensionado pela ALTURA ═══
   Enquanto se escreve, a faixa do palco encolhe para dar lugar ao campo.
   Mas a peça continuava a ser medida pela LARGURA (calc(100vw - 88px)),
   e com a proporção do mockup transbordava 13px da faixa.

   Aqui é a altura que manda e a largura segue a proporção. Fica no fim
   do ficheiro porque tem de vencer o bloco de telemóvel que fixa a
   largura — mesma media query, e ganha quem vem depois. */

/* ═══ Telemóvel: a peça ocupa a largura toda ═══════════════════════════
   A fita de cores era uma coluna ao lado do palco e custava-lhe 88px de
   largura — 23% do ecrã de um telemóvel. Desce para o painel (o JS
   move-a) e passa a ser a primeira secção do que se rola, logo abaixo da
   peça, em grelha de miniaturas.

   Ganha o mockup, que era o que estava a perder. */

/* ═══ Telemóvel: a barra de topo e o cartão do palco ═══════════════════
   Desenho do Rafael sobre capturas do próprio editor. Três mudanças:
   o nome da peça sozinho à esquerda, o Frente/Costas ao centro da barra
   (era flutuante sobre a peça, que tapava), e o anular/refazer/guardar
   em coluna dentro do cartão — onde estão à mão e não roubam a barra. */


/* ═══════════════════════════════════════════════════════════════════════
   A FOLHA — telemóvel
   ───────────────────────────────────────────────────────────────────────
   A peça passa a ser o fundo do editor e ocupa tudo o que a folha não
   usa. A folha tem três alturas (pousada / meia / cheia), quatro
   separadores e a barra de preço presa em baixo. O painel lateral fica
   escondido: os elementos que vivem nele mudaram de casa para cá dentro,
   por isso não há conteúdo duplicado — há o mesmo conteúdo noutro sítio.
   ═══════════════════════════════════════════════════════════════════════ */

/* A folha é só de telemóvel. Em desktop os elementos voltam ao painel
   lateral e ela fica uma casca vazia — mas os separadores continuavam a
   desenhar-se no fundo do ecrã. Fecha-se aqui, num bloco à parte, para
   não depender da ordem de origem contra o bloco de telemóvel. */




/* ═══ Revisão: folha de confirmação (telemóvel) ════════════════════════
   Em desktop continua a ser o painel que entra pela direita. Em telemóvel
   sobe do fundo como folha, deixa a peça a espreitar por cima e fecha-se
   com a pega, com o ‹ ou tocando fora — em vez de ser um ecrã de onde é
   preciso voltar. O conteúdo é exactamente o mesmo. */

/* Na folha de confirmação a maqueta é uma prova, não o assunto: a 300px
   empurrava a ficha técnica e as contas para fora do primeiro ecrã. */

/* Preço de tabela riscado ao lado do preço com escalão, na barra da folha. */

/* Frente/Costas mudou-se para os separadores da folha: a barra de topo
   fica só com o nome da peça e o fechar. Em desktop continua a flutuar
   sobre o palco, onde há espaço de sobra. */

/* ═══ Frente/Costas no topo do painel (desktop) ══════════════════════
   Saiu de cima da peça, onde tapava tecido e ficava longe do que
   comanda. À cabeça do painel é o que é: a navegação da lista que está
   logo por baixo. Em telemóvel são os separadores da folha que fazem
   este trabalho, e o painel inteiro está escondido. */

/* O palco volta a ter cantos em desktop. Perdeu-os quando o cartão de
   telemóvel passou a dar a moldura; aqui não há cartão, e a peça a
   quadrado destoava do resto (tudo o resto usa --mc5-r). Fica preso ao
   editor: o mesmo elemento também serve a galeria da página de produto,
   que não é para mexer. */

/* ═══ Acabamentos apanhados na revisão visual ═════════════════════════ */

/* 1. A barra de rolagem. O tema define `scrollbar-color` com o polegar a
      tinta sólida (#0F0F0F): dentro do editor lia-se como uma barra preta
      grossa colada ao painel e à folha, a destoar de tudo o resto, que é
      discreto. Passa a cinza fino, como no resto do site. */

/* 2. As pegas de redimensionar engoliam a arte pequena. Com a caixa do
      texto agora justa às letras (34×7px num peito de 16cm), quatro pegas
      de 13px cobriam-na por inteiro e não se lia o que lá estava. Passam
      a assentar FORA da caixa: a arte fica sempre visível, e a área de
      toque não muda (o ::after já a estica 10px em redor). */

/* O "Centrar" ganhou um ícone ao lado da palavra (para poder recolher em
   ecrãs estreitos). Sem esta regra o ícone empilhava POR CIMA do texto e
   o botão crescia em altura, a desalinhar a barra toda — visível em
   desktop, onde a palavra fica. Vale nas duas larguras. */

/* Preço de tabela riscado também em desktop, ao lado do preço a pagar. */

/* ═══ O palco encosta ao cartão (telemóvel) ═══════════════════════════
   A sombra vinha da altura em que o palco flutuava sozinho, sem cartão à
   volta; com a moldura do cartão passou a ser uma linha a mais. E os
   10px de padding do cartão comiam largura à peça — 333 de 355 — que é
   precisamente o que não sobra num ecrã de 375. A imagem passa a encostar
   à moldura; só a barra de acertar fica recolhida, para não ficar rente
   ao vidro. */

/* ═══ A zona e as guias em peças escuras ══════════════════════════════
   O palco já se marca `.dark` quando o mockup é escuro, e o texto de
   convite já mudava para branco — mas a moldura da zona e as guias
   ficaram no verde a 60%, que sobre um grafite ou um preto quase não se
   vê. Passam a claro no mesmo sítio onde o texto já passava. */
/* O :not(.view) é o que impede o tracejado de reaparecer na PÁGINA. Esta
   regra vem depois da que apaga a moldura em modo montra e tem a mesma
   especificidade, por isso ganhava — e numa peça escura o cliente via um
   quadrado branco à volta da estampa, fora do editor. Em peça clara não
   se notava, porque a moldura branca some no tecido claro. */

/* ═══ Topo do painel colado (desktop) ═════════════════════════════════
   O título e o Frente/Costas comandam a lista que vem a seguir, por isso
   ficam à vista enquanto ela rola — os cartões passam por baixo deles.
   As margens negativas puxam o bloco às bordas do painel, para o fundo
   tapar a lista de lado a lado e não deixar uma nesga a passar. */

/* A instrução na barra de preço ("Escolhe uma área para começar", "Há
   personalizações em falta.") — tinta um passo acima do muted para se
   distinguir do rótulo neutro "por unidade", sem gritar como um erro. */
/* A nota da revisão quando carrega a instrução em vez do tranquilizante. */
.mc5.mc5 #mc5-rev-note.dica { color: var(--mc5-ink-2); font-weight: 700; }

/* ═══ Ecrãs muito estreitos e tablets em retrato ═══
   Duas correcções encontradas a abrir o editor em catorze aparelhos. */

/* 320px (Galaxy S1 e afins): a dica por baixo do preço passava a três
   linhas e a terceira era cortada pela barra — lia-se "Escolhe uma área
   para" e o "começar" desaparecia. A barra não pode crescer (a altura da
   folha pousada é uma constante no JS), por isso encolhe-se o botão e a
   dica até caberem em duas linhas. */

/* Tablets em retrato (800–900px): recebem o desenho de telemóvel porque
   ainda não têm largura para as três colunas do desktop. Sem limite, a
   peça esticava até aos 800px e os controlos ficavam com tamanho de
   telemóvel num ecrã enorme — funcionava, mas parecia acidente.
   Travar as larguras e centrar devolve-lhe intenção. */

/* Linha de estado do compositor de texto: aviso de legibilidade à
   esquerda, contador à direita. O aviso usa a mesma tinta dos avisos de
   DPI — é a mesma família de problema (isto vai imprimir mal). */

/* ── A ordem nova da página de produto ───────────────────────────────────
   A escada de descontos desceu para debaixo do CTA (ver renderPage no
   editor.js). Aqui fica só o que o move precisa: o espaço acima e a
   linha de apoio do botão. */

/* "Desce até X/un." na linha de baixo do preço, com menos peso — o número
   grande continua a ser o que se paga por uma. flex-basis:100% obriga a
   linha própria dentro do flex com wrap sem partir o baseline do preço. */


/* ── Nomes de ficheiro compridos ─────────────────────────────────────────
   O cartão da arte já sabia cortar o nome com reticências (`.mc5-file .m b`
   tem overflow/ellipsis), mas nunca chegava a cortá-lo: a ranhura que o
   contém é um ITEM DE GRELHA, e um item de grelha não encolhe abaixo do
   seu conteúdo enquanto tiver `min-width: auto` — que é o valor por
   omissão. O nome esticava a ranhura a 920px dentro de uma coluna de 398,
   e o painel inteiro passava a rolar de lado.

   Medido com "Firefly_Gemini Flash_coloca o rapaz de t-shirt e com
   tatuagens…818174.png": o <b> ficava com 767px de largura e nem uma
   reticência aparecia. */

/* NÃO acrescentar aqui um `overflow-x: hidden/clip` no painel como rede de
   segurança: o painel tem `overflow-y: auto`, e nesse caso o `clip` computa
   para `hidden` — o painel passa a ser uma caixa COM scroll horizontal, e
   basta um `scrollIntoView` de um cartão para lhe deixar `scrollLeft` posto
   e o conteúdo cortado à esquerda ("eito Centro", "rgura"). Tentado e
   revertido. A correção certa é a de cima: deixar a cadeia encolher. */

/* ═══ Passagem de UI/UX (2026-10-17): computador igual ao telemóvel ═══════
   1. Títulos do painel sem versalete espaçada: a regra da casa é não ter
      títulos pequenos em maiúsculas, e o telemóvel já os tinha em letra
      normal. «Onde queres personalizar» e «Tamanhos e quantidades» ficam
      com o tamanho de título do telemóvel; «Notas…» e o grupo «Frente» são
      etiquetas.
   2. Rodapé: o preço à frente e a etiqueta logo a seguir («21,00 € por
      unidade · 2 peças»), como na folha do telemóvel. Antes a etiqueta
      ficava à esquerda e o preço solto 200 px depois. */

/* ═══════════════════════════════════════════════════════════════════════
   PROTÓTIPO APROVADO (2026-10-17) — personalizador v2
   ───────────────────────────────────────────────────────────────────────
   O Rafael aprovou um protótipo (prototipo-personalizador/) feito a partir
   da análise das desistências em telemóvel. Este bloco leva o aspeto dele
   para dentro do editor: Frente/Costas sobre a foto, zonas tocáveis,
   zoom à área, dois separadores (Cor e artigos / Design) e o stock por
   cor antes de desenhar. Fica no fim do ficheiro para ganhar por ordem.
   Cantos 12/8/6/3 px, sem pílulas; amostras quadradas com a foto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Palco: recorta o zoom, e o dedo é do editor (pinça, arrasto) ── */

/* Molduras, contornos e pegas não engordam com o zoom. */

/* ── Frente/Costas sobre a foto, destacado ── */

/* ── Dica e botão de zoom, em baixo no palco ── */

/* ── Zonas tocáveis na foto (sem área escolhida) ── */

/* ── Área vazia: «Carrega aqui o teu design» dentro da zona ── */

/* ── Separadores: «Cor e artigos» / «Design» (folha e painel) ── */

/* ── «Cor e artigos»: stock por cor antes de desenhar ── */

/* ── Telemóvel: o artigo fica com o espaço acima da folha ──
   O protótipo encolhe o palco ao que a folha deixa livre e aproxima-o da
   área escolhida; as alturas da folha (no JS) nunca o deixam minúsculo.
   Com o teclado aberto a folha fica a no máximo 55% da janela visível e
   a barra de preço sai, como no protótipo. */

/* ── Anular/refazer na barra de topo; «Guardar» no canto da foto (telemóvel) ── */

/* ── Texto: rótulos, «Auto», cor personalizada (protótipo) ── */

/* ── Avisos, interruptor, botões pequenos e ligação ── */

/* A barra de setas saiu (protótipo): mexe-se com o dedo, a pinça, as pegas
   e os botões Centrar / Ajustar / Apagar do painel. As setas do teclado
   continuam a funcionar no computador. */

/* ── Revisão (protótipo): várias cores, verificações, duas colunas ── */
/* As notas moram agora na revisão, nas duas larguras (protótipo). */

/* ── Pega de redimensionar: uma bolinha no canto (protótipo) ── */

/* ── Menu de ajuda (folha em telemóvel, janela no computador) ── */

/* ── Passo a passo: destaque e cartão ── */

/* Pedido do Rafael (17/10): no telemóvel o Frente/Costas ficava grande
   demais sobre a foto. Mais baixo e mais estreito; o «Guardar» acompanha
   a altura para os dois alinharem. */

/* Achados da segunda volta (17/10):
   · o «+4» das cores ficava no fundo do quadrado, tapado pelo rodapé;
   · o convite dentro da área crescia com ela: num tablet, letra de 40 px.
     Os px aqui são do palco antes do zoom, por isso o teto também escala. */

/* ── Polimento (impeccable, 17/10) ──
   · O convite numa área pequena transbordava: o mínimo de 8 px, depois do
     zoom (×2,4), saía da zona. Sem mínimo, como no protótipo; o teto fica.
   · Centrar / Ajustar à área / Apagar numa grelha de três (no telemóvel
     partiam para duas linhas).
   · Na revisão, a margem de cada grupo somava-se ao espaçamento da coluna. */

/* ═══════════════════════════════════════════════════════════════════════
   PERSONALIZADOR v2 — IGUAL AO PROTÓTIPO (pedido do Rafael, 17/10)
   ───────────────────────────────────────────────────────────────────────
   «Eu queria igual ao protótipo que estava aprovado.» A casca do editor
   passou a ser a do protótipo (prototipo-personalizador/), com as mesmas
   medidas: cabeçalho, palco, folha de duas alturas e barra; no computador
   a folha é a coluna de 420 px. As regras vivem sob #mc5-app e #mc5-rev
   (um id): ganham ao tema e às camadas antigas deste ficheiro sem
   !important. Ficam de fora, de propósito: o seletor de artigo (o editor
   é por ficha) e as medidas em cm (regra antiga: só %).
   ═══════════════════════════════════════════════════════════════════════ */
:is(#mc5-app, #mc5-rev) {
  color-scheme: light;
  --ink: #0F0F0F; --ink-2: #252525; --muted: #6B6B68; --line: #EBEBEB; --line-2: #DEDEDA;
  --paper: #FFFFFF; --paper-2: #F9F9F9; --stage: #FFFFFF;
  --accent: #4A7259; --accent-ink: #3A5A47; --accent-soft: #EEF3EF;
  --warn: #B4322C; --warn-ink: #7A2420; --warn-soft: #FDF0EF;
  --amber: #C98A00; --amber-ink: #6B5100; --amber-soft: #FFF6E0;
  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-title-s: 1rem; --t-btn: .95rem; --t-body: .86rem; --t-small: .75rem;
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--ink); -webkit-tap-highlight-color: transparent;
  text-align: left; letter-spacing: normal;
}
:is(#mc5-app, #mc5-rev) *, :is(#mc5-app, #mc5-rev) *::before, :is(#mc5-app, #mc5-rev) *::after { box-sizing: border-box; }
/* A base vai em :where() (sem o peso do id): assim ganha ao tema, mas
   perde para as regras de cada peça, que levam #mc5-app / #mc5-rev. */
.mc5.mc5 :where(#mc5-app, #mc5-rev) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.mc5.mc5 :where(#mc5-app, #mc5-rev) button,
.mc5.mc5 :where(#mc5-app, #mc5-rev) button:hover,
.mc5.mc5 :where(#mc5-app, #mc5-rev) button:focus {
  cursor: pointer; background-color: transparent; border: 0; padding: 0; margin: 0; box-shadow: none;
  color: inherit; min-height: 0; line-height: inherit; text-decoration: none; border-radius: 0; width: auto;
}
.mc5.mc5 :where(#mc5-app, #mc5-rev) :focus { outline: none; }
.mc5.mc5 :where(#mc5-app, #mc5-rev) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(#mc5-app, #mc5-rev) .mc5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(#mc5-app, #mc5-rev) [hidden] { display: none !important; }
:is(#mc5-app, #mc5-rev) svg { display: block; }

/* ── A grelha ── */
#mc5-app {
  position: absolute; inset: 0; height: var(--mc5-visivel, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "stage" "sheet" "bar";
  background: var(--paper-2); overflow: hidden;
}
#mc5-app .mp-top {
  grid-area: top; display: flex; align-items: center; gap: 8px; background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
}
#mc5-app .mp-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mc5-app .mp-ttl b { font-size: var(--t-title-s); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
#mc5-app .mp-ttl span { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
:is(#mc5-app, #mc5-rev) .mp-ibtn,
:is(#mc5-app, #mc5-rev) .mp-ibtn:hover,
:is(#mc5-app, #mc5-rev) .mp-ibtn:focus {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); border: 1px solid var(--line);
  display: grid; place-items: center; background: var(--paper); color: var(--ink);
}
:is(#mc5-app, #mc5-rev) .mp-ibtn:disabled { opacity: .35; cursor: default; }
:is(#mc5-app, #mc5-rev) .mp-ibtn svg { width: 18px; height: 18px; }

/* ── Palco ── */
#mc5-app .mp-stage-wrap { grid-area: stage; position: relative; overflow: hidden; background: var(--stage); touch-action: none; }
#mc5-app .mp-stage-wrap.mp-drop { background: var(--accent-soft); }
#mc5-app .mp-stagebox { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#mc5-app .mp-stagebox .mc5-stage {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  aspect-ratio: auto !important; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  transform-origin: 0 0; transition: transform .38s var(--ease);
}
@media (prefers-reduced-motion: reduce) { #mc5-app .mp-stagebox .mc5-stage { transition: none; } }
#mc5-app .mp-stagebox .mc5-stage .mc5-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
#mc5-app .mp-sidebar {
  position: absolute; top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); z-index: 3;
  display: flex; gap: 3px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  padding: 3px; box-shadow: 0 4px 14px rgb(15 15 15 / .14);
}
#mc5-app .mp-sidebar:empty { display: none; }
#mc5-app .mp-sidebar button,
#mc5-app .mp-sidebar button:hover,
#mc5-app .mp-sidebar button:focus {
  position: relative; min-height: 42px; padding: 0 18px; border-radius: var(--r-xs);
  font-weight: 800; font-size: .88rem; letter-spacing: -.01em; display: flex; gap: 6px; align-items: center;
  color: var(--ink-2); background: transparent; transition: background-color .15s, color .15s;
}
#mc5-app .mp-sidebar button:hover:not([aria-pressed="true"]) { background: var(--paper-2); color: var(--ink); }
#mc5-app .mp-sidebar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#mc5-app .mp-sidebar .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
#mc5-app .mp-sidebar button[aria-pressed="true"] .dot { background: var(--paper); }
#mc5-app .mp-sidebar .dot.falta { background: var(--amber); }
/* pedido do Rafael (17/10): no telemóvel o Frente/Costas mais pequeno */
@media (max-width: 900px) {
  #mc5-app .mp-sidebar button, #mc5-app .mp-sidebar button:hover, #mc5-app .mp-sidebar button:focus {
    min-height: 32px; padding: 0 13px; font-size: .8rem;
  }
  #mc5-app .mp-sidebar .dot { top: 4px; right: 5px; }
}
#mc5-app .mp-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 600; line-height: 1.45;
  padding: 8px 12px; border-radius: var(--r-sm); width: max-content; max-width: calc(100% - 24px); text-align: center; pointer-events: none;
}
#mc5-app .mp-zoombtn,
#mc5-app .mp-zoombtn:hover,
#mc5-app .mp-zoombtn:focus {
  position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); bottom: 10px; z-index: 3;
  display: flex; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: .78rem; font-weight: 700; color: var(--ink);
}
#mc5-app .mp-zoombtn svg { width: 16px; height: 16px; }
@media (max-width: 360px) {
  #mc5-app .mp-zoombtn .zl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #mc5-app .mp-zoombtn, #mc5-app .mp-zoombtn:hover { padding: 9px; }
}
#mc5-app .mp-savebtn,
#mc5-app .mp-savebtn:hover,
#mc5-app .mp-savebtn:focus {
  position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); top: 10px; z-index: 3;
  display: flex; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0 12px; height: 40px; font-size: .78rem; font-weight: 700;
  color: var(--ink); white-space: nowrap; transition: border-color .15s;
}
#mc5-app .mp-savebtn:hover:not(:disabled) { border-color: var(--ink); }
#mc5-app .mp-savebtn:disabled { background: var(--paper); color: #A8A8A4; cursor: default; }
#mc5-app .mp-savebtn svg, #mc5-app .mp-savebtn i { width: 16px; height: 16px; font-size: 16px; }
#mc5-app .mp-savebtn.is-saved { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
@media (max-width: 900px) {
  #mc5-app .mp-savebtn, #mc5-app .mp-savebtn:hover, #mc5-app .mp-savebtn:focus { height: 38px; top: 10px; }
}

/* zonas e camadas, com as medidas do protótipo */
#mc5-app .mc5-stage .mc5-zone {
  position: absolute; container-type: size; box-sizing: border-box;
  border: calc(1.5px / var(--zs, 1)) dashed rgba(74, 114, 89, .9); border-radius: calc(3px / var(--zs, 1));
  background: transparent; outline: 0;
}
#mc5-app .mc5-stage.dark .mc5-zone { border-color: rgba(255, 255, 255, .75); }
#mc5-app .mc5-stage .mc5-tapcta,
#mc5-app .mc5-stage .mc5-tapcta:hover,
#mc5-app .mc5-stage .mc5-tapcta:focus {
  position: absolute; inset: 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  border-radius: 5cqw; background: rgba(255, 255, 255, .9); color: var(--accent-ink);
  font-weight: 700; font-size: 10cqw; line-height: 1.15; text-align: center; padding: 6cqw; white-space: normal;
}
#mc5-app .mc5-stage .mc5-tapcta i { font-style: normal; font-size: 22cqw; line-height: 1; }
#mc5-app .mc5-stage .mc5-tapcta small { font-size: 6.5cqw; font-weight: 600; color: var(--muted); margin-top: 1cqw; }
#mc5-app .mc5-stage .mc5-art.sel { outline: calc(1.2px / var(--zs, 1)) solid var(--accent); outline-offset: calc(2px / var(--zs, 1)); }
#mc5-app .mc5-stage .mc5-h.br {
  right: calc(-9px / var(--zs, 1)); bottom: calc(-9px / var(--zs, 1)); left: auto; top: auto;
  width: calc(16px / var(--zs, 1)); height: calc(16px / var(--zs, 1)); border-radius: 50%;
  background: var(--paper); border: calc(1.5px / var(--zs, 1)) solid var(--accent);
}

/* ── Folha ── */
#mc5-app .mp-sheet {
  grid-area: sheet; background: var(--paper); border-radius: 18px 18px 0 0;
  box-shadow: 0 -1px 0 var(--line), 0 -10px 34px rgb(15 15 15 / .10);
  display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 5;
  max-height: 150px; transition: max-height .38s var(--ease); overflow: hidden;
}
#mc5-app .mp-sheet.a-arrastar { transition: none; }
#mc5-app .mp-handle,
#mc5-app .mp-handle:hover,
#mc5-app .mp-handle:focus { flex: none; display: grid; place-items: center; height: 24px; width: 100%; cursor: grab; touch-action: none; }
#mc5-app .mp-handle i { width: 36px; height: 4px; border-radius: 999px; background: var(--line-2); }
#mc5-app .mp-tabs { flex: none; display: flex; gap: 4px; padding: 0 10px 8px; }
#mc5-app .mp-tabs button,
#mc5-app .mp-tabs button:hover,
#mc5-app .mp-tabs button:focus {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 6px; font-weight: 700; font-size: .78rem; color: var(--muted);
  border-radius: var(--r-sm); display: flex; justify-content: center; gap: 6px; align-items: center; position: relative; background: transparent;
}
#mc5-app .mp-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper-2); }
#mc5-app .mp-tabs .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
#mc5-app .mp-pane {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  padding: 14px max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px));
}
#mc5-app .mp-sheet[data-tab=""] .mp-pane { display: none; }
#mc5-app .mp-sheet[data-tab="cor"] .mp-pdes,
#mc5-app .mp-sheet[data-tab="des"] .mp-pcor { display: none; }
#mc5-app .mp-pcor, #mc5-app .mp-pdes, #mc5-app #mc5-areas, #mc5-app #mc5-cards { display: flex; flex-direction: column; gap: 18px; }
#mc5-app #mc5-cards:empty { display: none; }

/* ── Barra ── */
#mc5-app .mp-bar {
  grid-area: bar; background: var(--paper); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 6;
  padding: 9px max(14px, env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
#mc5-app .mp-price { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mc5-app .mp-price b { font-size: var(--t-title-s); font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
#mc5-app .mp-price span { font-size: var(--t-small); font-weight: 600; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mc5-app .mp-price span.dica { color: var(--ink-2); font-weight: 700; }
:is(#mc5-app, #mc5-rev) .mp-cta,
:is(#mc5-app, #mc5-rev) .mp-cta:hover,
:is(#mc5-app, #mc5-rev) .mp-cta:focus {
  background: var(--ink); color: var(--paper); border: 1.5px solid transparent; border-radius: var(--r);
  padding: 12px 18px; font-weight: 600; font-size: .85rem; line-height: 1.45; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; transition: background .2s;
}
:is(#mc5-app, #mc5-rev) .mp-cta:hover:not(:disabled) { background: var(--ink-2); }
:is(#mc5-app, #mc5-rev) .mp-cta:disabled { background: var(--line); color: #A8A8A4; cursor: not-allowed; }
:is(#mc5-app, #mc5-rev) .mp-cta svg { width: 18px; height: 18px; }

/* teclado aberto (telemóvel): sai a barra e a folha fica com 55% */
.mc-sheet.mc5.mc5-teclado #mc5-app .mp-bar { display: none; }
/* 55% da parte VISÍVEL (em px): em % da grelha não contava, e a folha
   ocupava tudo — o artigo, onde o texto aparece enquanto se escreve, sumia */
.mc-sheet.mc5.mc5-teclado #mc5-app .mp-sheet { max-height: calc(var(--mc5-visivel, 100vh) * 0.55) !important; }
.mc-sheet.mc5.mc5-teclado #mc5-app .mp-hint,
.mc-sheet.mc5.mc5-teclado #mc5-app .mp-zoombtn { display: none; }

/* ── Conteúdo do painel ── */
:is(#mc5-app, #mc5-rev) .mp-grp { display: flex; flex-direction: column; gap: 10px; }
:is(#mc5-app, #mc5-rev) .mp-lbl {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px;
  font-weight: 600; font-size: var(--t-title-s); letter-spacing: -.02em; margin: 0; color: var(--ink); line-height: 1.45;
}
:is(#mc5-app, #mc5-rev) .mp-lbl small { font-weight: 600; color: var(--muted); font-size: .78rem; letter-spacing: 0; }
:is(#mc5-app, #mc5-rev) .mp-note { font-size: var(--t-small); color: var(--muted); margin: 0; line-height: 1.45; }
:is(#mc5-app, #mc5-rev) .mp-guialink { font-size: .78rem; font-weight: 700; color: var(--accent-ink); letter-spacing: 0; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }

#mc5-app .mp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#mc5-app .mp-sw,
#mc5-app .mp-sw:hover,
#mc5-app .mp-sw:focus {
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column;
  align-items: center; gap: 5px; background: var(--paper); text-align: center;
}
#mc5-app .mp-sw[aria-pressed="true"] { border: 2px solid var(--ink); padding: 7.5px; }
#mc5-app .mp-sw .c { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--paper-2) center / cover no-repeat; }
#mc5-app .mp-sw b { font-size: .78rem; font-weight: 700; line-height: 1.2; }
#mc5-app .mp-sw em { font-style: normal; font-size: .7rem; font-weight: 700; line-height: 1.2; }
:is(#mc5-app, #mc5-rev) em.ok { color: var(--accent); }
:is(#mc5-app, #mc5-rev) em.low { color: var(--amber-ink); }
:is(#mc5-app, #mc5-rev) em.out { color: var(--warn); }
#mc5-app .mp-sw:disabled { opacity: .5; cursor: not-allowed; }
#mc5-app .mp-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
#mc5-app .mp-sz { min-width: 44px; padding: 7px 10px; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-weight: 700; font-size: .78rem; text-align: center; line-height: 1.45; }
#mc5-app .mp-sz.out { color: #A8A8A4; text-decoration: line-through; background: var(--paper-2); }
:is(#mc5-app, #mc5-rev) .mp-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
:is(#mc5-app, #mc5-rev) .mp-dsw,
:is(#mc5-app, #mc5-rev) .mp-dsw:hover,
:is(#mc5-app, #mc5-rev) .mp-dsw:focus {
  position: relative; aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--paper-2) center / cover no-repeat;
}
:is(#mc5-app, #mc5-rev) .mp-dsw[style] { background-size: cover; background-position: center; }
:is(#mc5-app, #mc5-rev) .mp-dsw[aria-pressed="true"] { border: 2px solid var(--ink); }
:is(#mc5-app, #mc5-rev) .mp-dsw.low::after { content: ""; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
:is(#mc5-app, #mc5-rev) .mp-dsw.out { opacity: .4; }
:is(#mc5-app, #mc5-rev) .mp-dsw.out::before { content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%; width: 1.5px; background: var(--warn); transform: rotate(45deg); }
:is(#mc5-app, #mc5-rev) .mp-dsw.more { background: var(--paper); font-size: .78rem; font-weight: 800; color: var(--ink); border-style: dashed; display: grid; place-items: center; }
:is(#mc5-app, #mc5-rev) .mp-selname { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--t-body); }
:is(#mc5-app, #mc5-rev) .mp-selname b { font-weight: 700; }
:is(#mc5-app, #mc5-rev) .mp-selname em { font-style: normal; font-size: var(--t-small); font-weight: 700; }
#mc5-app .mp-legend { display: flex; gap: 6px; align-items: center; font-size: var(--t-small); color: var(--muted); }
#mc5-app .mp-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

:is(#mc5-app, #mc5-rev) .mp-areas, #mc5-app .mp-tech { display: flex; flex-direction: column; gap: 8px; }
#mc5-app .mp-arow,
#mc5-app .mp-arow:hover,
#mc5-app .mp-arow:focus {
  display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; text-align: left; width: 100%; background: var(--paper);
}
#mc5-app .mp-arow[aria-pressed="true"] { border: 2px solid var(--ink); padding: 11.5px 13.5px; }
#mc5-app .mp-arow .rad { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #A8A8A4; flex: none; display: grid; place-items: center; }
#mc5-app .mp-arow[aria-pressed="true"] .rad { border-color: var(--ink); }
#mc5-app .mp-arow[aria-pressed="true"] .rad::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
/* ícone da técnica (icon_url de cada técnica, no admin) */
#mc5-app .mp-arow .ico { width: 30px; height: 30px; flex: none; object-fit: contain; }
#mc5-app .mp-arow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mc5-app .mp-arow .t b { font-size: var(--t-body); font-weight: 700; }
#mc5-app .mp-arow .t small { color: var(--muted); font-size: var(--t-small); }
#mc5-app .mp-arow .p { font-size: .78rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

#mc5-app .mp-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#mc5-app .mp-add,
#mc5-app .mp-add:hover,
#mc5-app .mp-add:focus {
  border: 1.5px dashed #C9C9C4; border-radius: var(--r); padding: 14px 10px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center; background: var(--paper); position: relative; width: 100%;
}
#mc5-app .mp-add:hover { border-color: var(--ink); }
#mc5-app .mp-add b { font-size: var(--t-body); font-weight: 700; }
#mc5-app .mp-add small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
#mc5-app .mp-add svg { width: 22px; height: 22px; }
#mc5-app .mp-linkbtn,
#mc5-app .mp-linkbtn:hover,
#mc5-app .mp-linkbtn:focus {
  color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; font-size: .78rem;
  align-self: flex-start; padding: 10px 0; margin: -10px 0; text-align: left; background: transparent;
}
#mc5-app .mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#mc5-app .mp-chip,
#mc5-app .mp-chip:hover,
#mc5-app .mp-chip:focus { padding: 8px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-size: .78rem; font-weight: 700; background: var(--paper); }
#mc5-app .mp-chip:hover { border-color: var(--ink); }

#mc5-app .mp-layers { display: flex; flex-direction: column; gap: 6px; }
#mc5-app .mp-lrow { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--paper); }
#mc5-app .mp-lrow[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
#mc5-app .mp-lrow .th,
#mc5-app .mp-lrow .th:hover,
#mc5-app .mp-lrow .th:focus {
  width: 38px; height: 38px; border-radius: var(--r-xs); background: var(--paper-2); display: grid; place-items: center;
  font-weight: 800; overflow: hidden; flex: none; font-size: 15px;
}
#mc5-app .mp-lrow .th img { max-width: 100%; max-height: 100%; }
#mc5-app .mp-lrow .nm,
#mc5-app .mp-lrow .nm:hover,
#mc5-app .mp-lrow .nm:focus { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; background: transparent; }
#mc5-app .mp-lrow .nm b { font-size: var(--t-body); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mc5-app .mp-lrow .nm small { font-size: var(--t-small); color: var(--muted); }
#mc5-app .mp-lrow .del,
#mc5-app .mp-lrow .del:hover,
#mc5-app .mp-lrow .del:focus { width: 40px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); background: transparent; }
#mc5-app .mp-lrow .del svg { width: 16px; height: 16px; }

#mc5-app .mp-editor { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
#mc5-app textarea.mp-txt {
  width: 100%; min-height: 64px; border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 10px 12px;
  resize: vertical; font-weight: 600; font-size: 16px; text-align: center; background: var(--paper); color: var(--ink); margin: 0;
}
#mc5-app #mc5-tx-aviso.mau { color: var(--warn-ink); font-weight: 600; }
#mc5-app .mp-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
#mc5-app .mp-fbtn,
#mc5-app .mp-fbtn:hover,
#mc5-app .mp-fbtn:focus { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 4px; font-size: 18px; line-height: 1.1; white-space: nowrap; overflow: hidden; background: var(--paper); }
#mc5-app .mp-fbtn[aria-pressed="true"] { border: 2px solid var(--ink); padding: 7.5px 3.5px; }
#mc5-app .mp-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#mc5-app .mp-cbtn,
#mc5-app .mp-cbtn:hover,
#mc5-app .mp-cbtn:focus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); position: relative; flex: none; }
#mc5-app .mp-cbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
#mc5-app .mp-cbtn.custom { overflow: hidden; cursor: pointer; background: conic-gradient(#F43F5E, #F59E0B, #84CC16, #06B6D4, #6366F1, #D946EF, #F43F5E); display: block; }
#mc5-app .mp-cbtn.custom input { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
#mc5-app .mp-cbtn.custom:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#mc5-app .mp-cauto,
#mc5-app .mp-cauto:hover,
#mc5-app .mp-cauto:focus {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 12px 5px 6px; font-size: .78rem; font-weight: 700; height: 36px; background: var(--paper);
}
#mc5-app .mp-cauto[aria-pressed="true"] { border: 2px solid var(--ink); padding: 4.5px 11.5px 4.5px 5.5px; }
#mc5-app .mp-cauto i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #fff 50%, #0F0F0F 50%); border: 1px solid rgba(0, 0, 0, .2); }
#mc5-app .mp-range { display: flex; align-items: center; gap: 12px; }
#mc5-app .mp-range input { flex: 1; accent-color: var(--ink); margin: 0; height: 44px; /* a barra nativa fica igual; a zona de toque passa a 44 px */ }
#mc5-app .mp-range output { font-size: var(--t-small); color: var(--muted); min-width: 86px; text-align: right; font-variant-numeric: tabular-nums; }
#mc5-app .mp-row { display: flex; gap: 8px; flex-wrap: wrap; }
:is(#mc5-app, #mc5-rev) .mp-sbtn,
:is(#mc5-app, #mc5-rev) .mp-sbtn:hover,
:is(#mc5-app, #mc5-rev) .mp-sbtn:focus {
  padding: 11px 15px; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-weight: 700; font-size: .78rem;
  background: var(--paper); display: flex; gap: 6px; align-items: center; color: var(--ink); line-height: 1.2;
}
:is(#mc5-app, #mc5-rev) .mp-sbtn:hover { border-color: var(--ink); }
:is(#mc5-app, #mc5-rev) .mp-sbtn svg { width: 15px; height: 15px; }
/* os avisos da imagem (avisosDaImagem) com o aspeto do protótipo */
#mc5-app .mc5-toggle,
#mc5-app .mc5-toggle:hover,
#mc5-app .mc5-toggle:focus {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 11px 14px; text-align: left; width: 100%; background: var(--paper);
}
#mc5-app .mc5-toggle span { display: flex; flex-direction: column; }
#mc5-app .mc5-toggle b { font-size: var(--t-body); font-weight: 700; }
#mc5-app .mc5-toggle small { font-size: var(--t-small); color: var(--muted); }
#mc5-app .mc5-switch { width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid #A8A8A4; background: var(--paper); position: relative; flex: none; display: grid; place-items: center; }
#mc5-app .mc5-toggle[aria-checked="true"] .mc5-switch { background: var(--ink); border-color: var(--ink); }
#mc5-app .mc5-toggle[aria-checked="true"] .mc5-switch::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: translateY(-1px) rotate(-45deg); }
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert) { border-radius: var(--r); padding: 11px 14px; font-size: .8rem; display: flex; gap: 10px; align-items: flex-start; margin: 0; line-height: 1.45; }
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert) b { display: block; }
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert).warn { background: var(--amber-soft); color: var(--amber-ink); }
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert).bad { background: var(--warn-soft); color: var(--warn-ink); }
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert) :is(.mp-sbtn, .mc5-sbtn),
:is(#mc5-app, #mc5-rev) :is(.mp-alert, .mc5-alert) :is(.mp-sbtn, .mc5-sbtn):hover {
  margin-top: 8px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-weight: 700; font-size: .78rem; display: flex;
}
#mc5-app .mc5-note { font-size: var(--t-small); color: var(--muted); margin: 0; }
#mc5-app .mc5-q { font-weight: 700; }
#mc5-app .mc5-q.good { color: var(--accent); } #mc5-app .mc5-q.mid { color: var(--amber-ink); } #mc5-app .mc5-q.low { color: var(--warn); }
:is(#mc5-app, #mc5-rev) .mp-reassure { display: flex; gap: 8px; font-size: var(--t-small); color: var(--muted); align-items: flex-start; margin: 0; }
:is(#mc5-app, #mc5-rev) .mp-reassure svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }

/* ── Revisão: um ecrã inteiro, nas duas larguras ── */
#mc5-rev { position: fixed; inset: 0; z-index: 20; background: var(--paper-2); display: none; flex-direction: column; }
#mc5-rev.on { display: flex; }
#mc5-rev .mp-ohead {
  display: flex; align-items: center; gap: 10px; background: var(--paper); border-bottom: 1px solid var(--line);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
}
#mc5-rev .mp-ohead h2 { flex: 1; font-size: var(--t-title-s); font-weight: 600; letter-spacing: -.02em; margin: 0; text-align: center; color: var(--ink); line-height: 1.45; }
#mc5-rev .mp-ibtn.is-saved { color: var(--accent-ink); }
#mc5-rev .mp-obody { flex: 1; overflow-y: auto; padding: 16px max(14px, env(safe-area-inset-right, 0px)) 24px max(14px, env(safe-area-inset-left, 0px)); }
#mc5-rev .mp-ogrid { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
#mc5-rev .mp-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#mc5-rev .mp-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#mc5-rev .pv { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#mc5-rev .pv .box { width: 100%; aspect-ratio: 1 / 1; background: var(--stage); border: 1px solid var(--line); border-radius: var(--r); position: relative; overflow: hidden; display: grid; place-items: center; }
#mc5-rev .pv .box .mini { position: relative; width: 100%; max-height: 100%; }
#mc5-rev .pv small { font-size: var(--t-small); color: var(--muted); font-weight: 600; font-style: normal; }
#mc5-rev .mp-checks { display: flex; flex-direction: column; gap: 6px; }
#mc5-rev .mp-chk { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-body); }
#mc5-rev .mp-chk i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
#mc5-rev .mp-chk.ok i { background: var(--accent-soft); color: var(--accent); }
#mc5-rev .mp-chk.warn i { background: var(--amber-soft); color: var(--amber-ink); }
#mc5-rev .mp-chk.bad i { background: var(--warn-soft); color: var(--warn); }
#mc5-rev .mp-rsw { display: flex; flex-wrap: wrap; gap: 8px; }
#mc5-rev .mp-rsw button,
#mc5-rev .mp-rsw button:hover,
#mc5-rev .mp-rsw button:focus {
  position: relative; border: 1.5px solid var(--line); border-radius: var(--r); padding: 6px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px;
}
#mc5-rev .mp-rsw button[aria-pressed="true"] { border: 2px solid var(--ink); padding: 5.5px; }
#mc5-rev .mp-rsw button:disabled { opacity: .45; cursor: not-allowed; }
#mc5-rev .mp-rsw .c { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--paper-2) center / cover no-repeat; }
#mc5-rev .mp-rsw small { font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center; }
#mc5-rev .mp-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--accent);
  color: var(--paper); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--paper);
}
#mc5-rev .mp-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
#mc5-rev .mp-scell {
  min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r); padding: 6px 6px 4px; background: var(--paper);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; transition: border-color .15s, background-color .15s;
}
#mc5-rev .mp-scell.on { border-color: var(--ink); background: var(--paper-2); }
#mc5-rev .mp-scell .szl { display: flex; justify-content: center; align-items: baseline; gap: 6px; min-height: 20px; }
#mc5-rev .mp-scell b { font-size: var(--t-small); font-weight: 700; line-height: 1.5; color: var(--ink-2); }
#mc5-rev .mp-scell.on b { color: var(--ink); }
#mc5-rev .mp-scell small { font-size: .7rem; color: var(--warn); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#mc5-rev .mp-scell.out { background: var(--paper-2); }
#mc5-rev .mp-scell.out b { color: #A8A8A4; text-decoration: line-through; }
#mc5-rev .mp-scell .step { display: flex; align-items: center; justify-content: space-between; }
#mc5-rev .mp-scell .step button,
#mc5-rev .mp-scell .step button:hover,
#mc5-rev .mp-scell .step button:focus {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); color: var(--ink-2); font-size: 20px; font-weight: 500;
  line-height: 1; display: grid; place-items: center; transition: background-color .15s;
}
#mc5-rev .mp-scell .step button:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
#mc5-rev .mp-scell.on .step button:hover:not(:disabled) { background: var(--paper); }
#mc5-rev .mp-scell .step button:disabled { color: #C4C4C4; cursor: not-allowed; }
#mc5-rev .mp-scell .step input {
  width: 40px; min-width: 0; text-align: center; border: 0; background: none; height: 40px; padding: 0; margin: 0;
  font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; box-shadow: none;
}
#mc5-rev .mp-scell .step input:disabled { color: #A8A8A4; }
#mc5-rev .mp-scell .step input::-webkit-inner-spin-button,
#mc5-rev .mp-scell .step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#mc5-rev .mp-tiers { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
#mc5-rev .mp-tiers .msg { font-size: var(--t-body); font-weight: 700; text-align: center; }
#mc5-rev .mp-tiers .lad-c { text-align: center; }
#mc5-rev .mp-tiers .track { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
#mc5-rev .mp-tiers .seg { display: flex; flex-direction: column; gap: 4px; align-items: center; }
#mc5-rev .mp-tiers .seg .b { height: 6px; width: 100%; border-radius: 2px; background: var(--line); overflow: hidden; display: block; }
#mc5-rev .mp-tiers .seg .b i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .3s var(--ease); }
#mc5-rev .mp-tiers .seg small { font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
#mc5-rev .mp-tiers .seg.on small { color: var(--accent); }
#mc5-rev .mp-sum { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-body); }
#mc5-rev .mp-sum .ln { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
#mc5-rev .mp-sum .ln.tot { font-weight: 600; font-size: var(--t-title-s); letter-spacing: -.02em; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
#mc5-rev .mp-sum .ln s { color: var(--muted); font-weight: 500; }
#mc5-rev textarea.mp-notes { width: 100%; min-height: 56px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; resize: vertical; font-size: 16px; background: var(--paper); color: var(--ink); margin: 0; }
#mc5-rev .mp-ofoot {
  background: var(--paper); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
#mc5-rev .mp-ofoot .mp-cta,
#mc5-rev .mp-ofoot .mp-cta:hover,
#mc5-rev .mp-ofoot .mp-cta:focus { justify-content: center; max-width: 980px; width: 100%; margin: 0 auto; padding: 15px 24px; font-size: var(--t-btn); }
#mc5-rev .mp-ofoot .mp-note { text-align: center; }
#mc5-rev .mp-ofoot .mp-note.dica { color: var(--muted); }
#mc5-rev .mp-ofoot [data-mt-pag] { justify-content: center; margin: 0 auto; }

/* ── Computador: folha à direita (420 px) e a barra por baixo dela ── */
@media (min-width: 901px) {
  #mc5-app {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "stage sheet" "stage bar";
  }
  #mc5-app .mp-sheet { max-height: none !important; border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); }
  #mc5-app .mp-handle { display: none; }
  #mc5-app .mp-tabs { padding-top: 10px; }
  #mc5-app .mp-bar { border-left: 1px solid var(--line); }
  #mc5-rev .mp-ogrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
#mc5-app #mc5-tx-aviso { font-size: var(--t-small); line-height: 1.45; margin: 0; }
/* o tema força um contorno de 1 px cinzento nos campos (com !important) */
#mc5-app textarea.mp-txt { border: 1.5px solid var(--ink) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
#mc5-rev textarea.mp-notes { border: 1.5px solid var(--line) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
#mc5-rev textarea.mp-notes:focus { border-color: var(--ink) !important; }
#mc5-rev .mp-scell .step input { border: 0 !important; box-shadow: none !important; }
/* «Remover esta área»: discreto, em cinzento, por baixo da lista */
#mc5-app .mp-linkbtn.mp-tira,
#mc5-app .mp-linkbtn.mp-tira:hover,
#mc5-app .mp-linkbtn.mp-tira:focus { color: var(--muted); font-weight: 600; }
#mc5-app .mp-linkbtn.mp-tira:hover { color: var(--ink); }

/* ── Pedidos do Rafael, 18/10 ── */
/* «Carrega aqui o teu design»: só o texto, dentro do tracejado e na cor dele */
#mc5-app .mc5-stage .mc5-tapcta,
#mc5-app .mc5-stage .mc5-tapcta:hover,
#mc5-app .mc5-stage .mc5-tapcta:focus {
  inset: 0; background: transparent; border-radius: 0; color: rgba(74, 114, 89, .95);
}
#mc5-app .mc5-stage .mc5-tapcta:hover { background: rgba(74, 114, 89, .08); }
#mc5-app .mc5-stage .mc5-tapcta small { color: inherit; opacity: .8; }
#mc5-app .mc5-stage.dark .mc5-tapcta,
#mc5-app .mc5-stage.dark .mc5-tapcta:hover,
#mc5-app .mc5-stage.dark .mc5-tapcta:focus { color: rgba(255, 255, 255, .9); }
#mc5-app .mc5-stage.dark .mc5-tapcta:hover { background: rgba(255, 255, 255, .08); }
/* ícone da área no rádio: a silhueta do artigo com a área a tracejado */
#mc5-app .mp-aico { position: relative; width: 34px; height: 34px; flex: none; border-radius: var(--r-xs); overflow: hidden; background: var(--paper); }
#mc5-app .mp-aico .z { position: absolute; inset: 0; transform: scale(1.22); transform-origin: 50% 46%; }
#mc5-app .mp-aico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .2; }
#mc5-app .mp-aico svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#mc5-app .mp-aico rect { fill: rgba(74, 114, 89, .16); stroke: var(--accent); stroke-width: 1.1px; stroke-dasharray: 2.2 1.6; vector-effect: non-scaling-stroke; }
#mc5-app .mp-arow[aria-pressed="true"] .mp-aico img { opacity: .32; }
#mc5-app .mp-arow[aria-pressed="true"] .mp-aico rect { fill: rgba(74, 114, 89, .32); }
/* a dica do palco é um botão: leva à lista das áreas (as zonas saíram da foto) */
#mc5-app .mp-hint,
#mc5-app .mp-hint:hover,
#mc5-app .mp-hint:focus {
  pointer-events: auto; cursor: pointer; background: var(--ink); color: var(--paper); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: .75rem; font-weight: 600; line-height: 1.45;
}
#mc5-app .mp-lrow .th img.deco { max-width: 70%; max-height: 70%; }
/* quatro âncoras nos cantos da arte (pedido do Rafael, 18/10), em vez da bolinha só num canto */
#mc5-app .mc5-stage .mc5-art .mc5-h,
#mc5-app .mc5-stage .mc5-art .mc5-h.br {
  position: absolute; width: calc(12px / var(--zs, 1)); height: calc(12px / var(--zs, 1));
  border-radius: calc(2px / var(--zs, 1)); background: var(--paper);
  border: calc(1.5px / var(--zs, 1)) solid var(--accent); box-shadow: 0 1px 3px rgb(15 15 15 / .25);
  left: auto; right: auto; top: auto; bottom: auto; z-index: 2; touch-action: none;
}
#mc5-app .mc5-stage .mc5-art .mc5-h::after { content: ""; position: absolute; inset: calc(-10px / var(--zs, 1)); }
#mc5-app .mc5-stage .mc5-art .mc5-h.tl { left: calc(-7px / var(--zs, 1)); top: calc(-7px / var(--zs, 1)); cursor: nwse-resize; }
#mc5-app .mc5-stage .mc5-art .mc5-h.tr { right: calc(-7px / var(--zs, 1)); top: calc(-7px / var(--zs, 1)); cursor: nesw-resize; }
#mc5-app .mc5-stage .mc5-art .mc5-h.bl { left: calc(-7px / var(--zs, 1)); bottom: calc(-7px / var(--zs, 1)); cursor: nesw-resize; }
#mc5-app .mc5-stage .mc5-art .mc5-h.br { right: calc(-7px / var(--zs, 1)); bottom: calc(-7px / var(--zs, 1)); cursor: nwse-resize; }
/* o editor acompanha a parte visível do ecrã (teclado do iPhone): ver publicaAlturaVisivel() */
#mc5-app { top: var(--mc5-vv-top, 0px); bottom: auto; }
#mc5-rev { top: var(--mc5-vv-top, 0px); bottom: auto; height: var(--mc5-visivel, 100%); }
/* a linha por baixo do preço parte em duas em vez de ser cortada («inclui +3,00 € · +15,00 € únicos») */
#mc5-app .mp-price span { white-space: normal; overflow: visible; text-overflow: clip; }
/* os avisos (com «Desfazer») nunca tapam o botão principal: no telemóvel sobem
   acima da barra do preço, e na revisão acima do «Adicionar ao carrinho» */
/* No editor, no telemóvel, os avisos aparecem no TOPO do artigo (debaixo do
   cabeçalho): em baixo tapavam o botão principal, e a meio tapavam os botões do
   painel («Escrever texto»). E só o «Desfazer» (ou um link) apanha toques — o
   resto do aviso deixa o toque passar para o que está por baixo. */
@media (max-width: 900px) {
  body.mc5-editor-open .mc-toast.mc5 { top: calc(68px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -8px); }
  body.mc5-editor-open .mc-toast.mc5.on { transform: translate(-50%, 0); }
}
body.mc5-editor-open .mc-toast.mc5.on { pointer-events: none; }
body.mc5-editor-open .mc-toast.mc5.on :is(button, a) { pointer-events: auto; }


/* ── Acessibilidade (18/10) ─────────────────────────────────────────────
   Botões do topo a 44×44 (alvo de toque recomendado pela Apple; o WCAG 2.2
   AA pede 24). Setas para mover sem arrastar (WCAG 2.5.7). O título do
   editor e o da revisão recebem o foco ao abrir — para o leitor de ecrã
   começar por eles —, mas não são controlos e não levam contorno. */
#mc5-app #mc-sheet-title:focus,
#mc5-rev #mc5-rev-t:focus { outline: none; }
#mc5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#mc5-app .mp-cbtn.custom.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
#mc5-app .mp-move { align-items: center; margin-bottom: 8px; }
#mc5-app .mp-mv,
#mc5-app .mp-mv:hover,
#mc5-app .mp-mv:focus {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
#mc5-app .mp-mv:hover { border-color: var(--ink); }
#mc5-app .mp-mv:active { background: var(--paper-2); }
#mc5-app .mp-mv svg { width: 18px; height: 18px; }
#mc5-app .mp-move .mc5-pos-c { margin-left: auto; min-height: 44px; }
/* Movimento reduzido: o editor inteiro sem transições nem animações
   (a folha, o palco, a revisão e os avisos deslizavam). */
@media (prefers-reduced-motion: reduce) {
  #mc5-app *, #mc5-app *::before, #mc5-app *::after,
  #mc5-rev, #mc5-rev *, #mc5-rev *::before, #mc5-rev *::after,
  .mc-sheet.mc5, .mc-sheet.mc5 *, .mc-toast.mc5 {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
}