/**
 * editor.css — Editor v5 (Matter Customizer)
 * ═══════════════════════════════════════════════════════════════════════
 * O único CSS do editor desde a 4.14.27 (o app.css do v4 saiu a 2026-10-20).
 *
 * 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) ═══ */
.mc5 {
  /* Fonte de verdade: variáveis globais do site — se a marca mudar uma
     cor no Site Settings, o editor acompanha. O fallback é o valor
     atual da casa, para o editor nunca nascer sem cor. */
  --mc5-ink: var(--mx-global-color-primary, #0F0F0F);
  --mc5-ink-2: var(--mx-global-color-796a98c, #252525);
  /* muted fica local: o cinza do kit (#888) não passa 4,5:1 sobre
     paper-2 — e o antigo #757575 media 4,3:1 lá; #6F6F6F passa. */
  --mc5-muted: var(--mx-global-color-tinta-3, #6B6B68);
  --mc5-line: var(--mx-global-color-f78bd59, #EBEBEB);
  --mc5-paper: var(--mx-global-color-secondary, #FFFFFF);
  --mc5-paper-2: var(--mx-global-color-text, #F9F9F9);
  --mc5-accent: var(--mx-global-color-accent, #4A7259);
  --mc5-accent-ink: var(--mx-global-color-accent-escuro, #3A5A47);
  /* Hover do primário. O padrão REAL da casa (medido no botão
     "Subscrever" do site) é o botão manter a sua cor e apenas suavizar
     — nunca trocar de cor. Um primário preto suaviza para o cinza
     escuro do kit, não para verde. */
  --mc5-btn-hover: var(--mx-global-color-796a98c, #252525);
  --mc5-accent-soft: #EEF3EF;
  --mc5-warn: #B4322C;
  --mc5-warn-ink: #7A2420;
  --mc5-warn-soft: #FDF0EF;
  --mc5-amber: #C98A00;
  --mc5-amber-ink: #6B5100;
  --mc5-amber-soft: #FFF6E0;
  --mc5-r: 12px;
  --mc5-r-sm: 8px;
  --mc5-ease: cubic-bezier(.16, 1, .3, 1);
  /* O body do tema fica em fonte de sistema (a Plus Jakarta só é
     aplicada a headings/widgets pelo tema) — declaramos a fonte
     da marca explicitamente, com a var do kit como primeira escolha. */
  --mc5-font: var(--mx-global-typography-text-font-family, 'Plus Jakarta Sans'), 'Plus Jakarta Sans', -apple-system, sans-serif;
  /* ── Escala tipográfica = tipografia global do site ─────────────────────────────
     Regra da casa (Rafael, 2026-09-04): o personalizador usa as tipografias
     GLOBAIS do tema, excepto onde nenhuma se adapta. Cada papel do editor
     aponta para um estilo do kit; os fallbacks só valem sem essas variáveis.
     Os ids dos customs (f844386 Title M, 6bcba6a Title S, b0e9e5e Small
     Body) são iguais na cópia e em produção — verificado a 2026-09-04.
     Excepções documentadas, onde o kit não tem estilo que sirva:
       · pesos 600–800 em texto e legendas que são rótulos, não prosa (o kit
         só tem Body Text 400 e Small Body 400);
       · o que é mais pequeno que Small Body (contadores, marcas, pontos);
       · tabelas ao pixel da tabela de medidas da ficha (ladder.css, popup). */
  --mc5-t-display-size:   var(--mx-global-typography-secondary-font-size, 1.7rem);  /* Title L */
  --mc5-t-display-weight: var(--mx-global-typography-secondary-font-weight, 600);
  --mc5-t-title-m-size:   var(--mx-global-typography-f844386-font-size, 1.25rem);  /* Title M */
  --mc5-t-title-m-weight: var(--mx-global-typography-f844386-font-weight, 600);
  --mc5-t-title-m-lh:     var(--mx-global-typography-f844386-line-height, 1.2);
  --mc5-t-title-s-size:   var(--mx-global-typography-6bcba6a-font-size, 1rem);     /* Title S */
  --mc5-t-title-s-weight: var(--mx-global-typography-6bcba6a-font-weight, 600);
  --mc5-t-title-s-lh:     var(--mx-global-typography-6bcba6a-line-height, 1.4);
  --mc5-t-button-size:    var(--mx-global-typography-accent-font-size, .95rem);    /* Buttons */
  --mc5-t-button-weight:  var(--mx-global-typography-accent-font-weight, 600);
  --mc5-t-body-size:      var(--mx-global-typography-text-font-size, .86rem);      /* Body Text */
  --mc5-t-body-weight:    var(--mx-global-typography-text-font-weight, 400);
  --mc5-t-small-size:     var(--mx-global-typography-b0e9e5e-font-size, .75rem);   /* Small Body */
  --mc5-t-small-weight:   var(--mx-global-typography-b0e9e5e-font-weight, 400);
  font-family: var(--mc5-font);
  color: var(--mc5-ink);
  -webkit-tap-highlight-color: transparent;
}

/* 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). */
.mc5.mc5 button:hover,
.mc5.mc5 button:focus,
.mc5.mc5 button:active { background-color: transparent; }
.mc5 button, .mc5 input, .mc5 textarea { font-family: var(--mc5-font); }

/* ═══ Reset baixo (só elementos, nunca componentes) ═══ */
.mc5 *, .mc5 *::before, .mc5 *::after { box-sizing: border-box; }
.mc5 button {
  font: inherit; cursor: pointer; border: none; background: none;
  color: inherit; text-decoration: none; text-transform: none;
  letter-spacing: normal; box-shadow: none; margin: 0;
  /* o tema põe `white-space: nowrap` em todos os <button> e isso
     herdava para dentro dos nossos: o texto do chip do Bordado
     ("6 cores sólidas máx. · +15,00 € únicos") não quebrava linha e
     saía da caixa. Quem precisa de nowrap pede-o (ver .mc5-btn). */
  white-space: normal;
}
.mc5 img { max-width: 100%; display: block; }
.mc5 ::selection { background: var(--mc5-accent); color: #fff; }
.mc5 :focus { outline: none; }
.mc5 :focus-visible { outline: 2px solid var(--mc5-accent); outline-offset: 2px; border-radius: 4px; }

/* Phosphor: centragem ótica dentro de qualquer botão/linha */
.mc5.mc5 .ph { font-size: 1.1em; line-height: 1; display: inline-block; }
/* 4.13.67 — os ícones são SVG dentro do <i class="ph">: 1em do tamanho de letra, como a fonte era. */
.mc5.mc5 .ph > svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.mc5.mc5 button > .ph:only-child { font-size: 1.15rem; }

.mc5.mc5 .mc5-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ═══ Botões ═══ */
.mc5.mc5 .mc5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: var(--mc5-r);
  font-family: inherit; font-weight: var(--mc5-t-button-weight); font-size: var(--mc5-t-button-size); line-height: 1.2;
  border: 1.5px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.mc5.mc5 .mc5-btn--primary,
.mc5.mc5 .mc5-btn--primary:visited { background: var(--mc5-ink); color: #fff; }
.mc5.mc5 .mc5-btn--primary:hover,
.mc5.mc5 .mc5-btn--primary:focus-visible { background: var(--mc5-btn-hover); color: #fff; }
/* :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ã. */
.mc5.mc5 .mc5-btn--primary:focus:not(:focus-visible) { background: var(--mc5-ink); color: #fff; }
.mc5.mc5 .mc5-btn--primary:active { background: var(--mc5-btn-hover); color: #fff; }
.mc5.mc5 .mc5-btn--primary:disabled,
.mc5.mc5 .mc5-btn--primary:disabled:hover {
  background: var(--mc5-line); color: var(--mc5-muted); cursor: not-allowed;
}
.mc5.mc5 .mc5-btn--ghost { background: var(--mc5-paper); color: var(--mc5-ink); border-color: var(--mc5-line); }
.mc5.mc5 .mc5-btn--ghost:hover,
.mc5.mc5 .mc5-btn--ghost:focus { background: var(--mc5-paper); color: var(--mc5-ink); border-color: var(--mc5-ink); }
.mc5.mc5 .mc5-btn--block { width: 100%; }

/* botões-ícone (fechar, anular, setas…): quadrado, ícone centrado */
.mc5.mc5 .mc5-ibtn {
  display: grid; place-items: center;
  width: 36px; height: 34px; border-radius: var(--mc5-r-sm);
  color: var(--mc5-ink); background: none; border: 1px solid transparent; padding: 0;
  transition: background-color .15s, border-color .15s, color .15s;
}
.mc5.mc5 .mc5-ibtn:hover,
.mc5.mc5 .mc5-ibtn:focus { background: var(--mc5-paper-2); color: var(--mc5-ink); }
.mc5.mc5 .mc5-ibtn:disabled,
.mc5.mc5 .mc5-ibtn:disabled:hover { color: #C4C4C4; background: none; cursor: not-allowed; }

/* ═══ Página de produto ═══ */
.mc5.mc5 .mc5-page { display: grid; gap: 18px; }
/* 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 */
.mc5.mc5 .mc5-ladder-info + * { margin-top: 6px; }
#mc-actions-mount .mc5-page { gap: 12px; padding-top: 20px; }
/* 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. */
.mc5.mc5 .mc5-sizelink {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; color: var(--mc5-muted);
  text-decoration: none; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--mc5-line);
  transition: border-color .15s, color .15s;
}
.mc5.mc5 .mc5-sizelink:hover { border-bottom-color: var(--mc5-ink); color: var(--mc5-ink); }
.mc5.mc5 .mc5-sizelink .ph { font-size: .95rem; }
/* 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. */
.mc5.mc5 .mc5-price-from { display: flex; align-items: baseline; gap: 10px; row-gap: 2px; flex-wrap: wrap; }
.mc5.mc5 .mc5-price-from b { font-size: var(--mc5-t-display-size); font-weight: var(--mc5-t-display-weight); letter-spacing: -.03em; color: var(--mc5-ink); }
.mc5.mc5 .mc5-price-from small { font-size: var(--mc5-t-body-size); color: var(--mc5-muted); font-weight: 600; }
/* (a antiga pílula "Desce até…" fundiu-se no cabeçalho da escada de
   descontos — uma promessa, um sítio) */
.mc5.mc5 .mc5-label {
  font-size: var(--mc5-t-small-size); font-weight: 700; color: var(--mc5-muted);
  display: flex; align-items: baseline; gap: 7px; margin: 0 0 9px;
}
/* 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. */
.mc5.mc5 .mc5-label .mc5-opt {
  color: var(--mc5-ink); font-weight: 700;
}
.mc5.mc5 .mc5-label .mc5-opt::before { content: '·'; color: var(--mc5-line); margin-right: 7px; }

.mc5.mc5 .mc5-swatches { display: flex; gap: 9px; flex-wrap: wrap; }

/* 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. */
.mc5.mc5 .mc5-garantia {
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.45; color: var(--mc5-muted);
}
.mc5.mc5 .mc5-garantia i { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.3; color: var(--mc5-ink); }

/* 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. */

.mc5.mc5 .mc5-sw {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(15,15,15,.18); padding: 0; position: relative;
  transition: box-shadow .15s;
}
.mc5.mc5 .mc5-sw:hover { box-shadow: 0 0 0 2px var(--mc5-paper), 0 0 0 3px var(--mc5-muted); }
.mc5.mc5 .mc5-sw.on,
.mc5.mc5 .mc5-sw.on:hover { box-shadow: 0 0 0 2px var(--mc5-paper), 0 0 0 4px var(--mc5-ink); }
.mc5.mc5 .mc5-sw:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
/* 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 */
.mc5.mc5 .mc5-swi {
  width: 42px; height: 42px; flex: 0 0 42px; padding: 0;
  border-radius: var(--mc5-r-sm); border: 1.5px solid var(--mc5-line);
  background-color: var(--mc5-paper-2);
  background-size: cover; background-position: center;
  transition: border-color .15s, box-shadow .15s;
}
.mc5.mc5 .mc5-swi:hover { border-color: var(--mc5-muted); }
/* uma linha só: o anel duplo (moldura + halo) lia-se como dois
   contornos concêntricos e sujava a fila de cores */
.mc5.mc5 .mc5-swi.on,
.mc5.mc5 .mc5-swi.on:hover { border-color: var(--mc5-ink); border-width: 2px; box-shadow: none; }
.mc5.mc5 .mc5-swi:disabled { opacity: .35; cursor: not-allowed; }

/* 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. */
.mc5.mc5 .mc5-ladder-info { border: 1px solid var(--mc5-line); border-radius: var(--mc5-r); padding: 12px 14px 14px; }
/* 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. */
.mc5.mc5 .mc5-ladder-info .cell {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--mc5-r-sm);
  background: var(--mc5-paper-2);
}
.mc5.mc5 .mc5-ladder-info .cell small { flex: 1; }
.mc5.mc5 .mc5-ladder-info .cell small { font-size: var(--mc5-t-small-size); font-weight: 700; color: var(--mc5-muted); }
.mc5.mc5 .mc5-ladder-info .cell b { font-size: var(--mc5-t-title-s-size); line-height: var(--mc5-t-title-s-lh); font-weight: var(--mc5-t-title-s-weight); letter-spacing: -.01em; color: var(--mc5-ink); }
.mc5.mc5 .mc5-ladder-info .cell i {
  font-style: normal; font-size: .68rem; font-weight: 700;
  color: var(--mc5-accent-ink); background: var(--mc5-accent-soft);
  padding: 2px 7px; border-radius: 999px;
  min-width: 52px; text-align: center;
}
.mc5.mc5 .mc5-ladder-info .cell i:empty { visibility: hidden; }
.mc5.mc5 .mc5-ladder-info .cell.best { background: var(--mc5-accent-soft); }
.mc5.mc5 .mc5-ladder-info .cell.best i { background: var(--mc5-paper); }

/* ═══ Palco (galeria, mount de fallback, e editor) ═══ */
.mc5-stage {
  position: relative; width: 100%;
  background: var(--mc5-paper, #fff);
  overflow: hidden;
}
.mc5-stage .mc5-bg {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}

/* 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 */
.mc5.mc5 .mc5-stagebox {
  position: relative; height: 100%; min-height: 0; max-width: 100%;
  display: grid; place-items: center;
}
.mc5.mc5 .mc5-stagebox .mc5-stage { height: 100%; width: auto; max-width: 100%; }

/* 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. */
.mc-lowest-price:not(.mx-loop-item *):not(.mt-loop-container *):not(.products *) { display: none; }

/* 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.) */
.mx-loop-item .mc-lowest-price,
.mt-loop-container .mc-lowest-price { font-weight: inherit; }

/* 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 */
.mc5-gallery-mode #mc-mockup-mount { display: none; }
.mc-gallery__slide--mockup { position: relative; display: grid; place-items: center; }
.mc-gallery__slide--mockup .mc5-stage {
  height: 100%; width: auto; max-width: 100%;
  border-radius: 0; cursor: pointer;
}
.mc-gallery__slide--mockup .mc5-back-preview { width: 100%; height: 100%; object-fit: contain; }
/* fallback: páginas sem galeria */
#mc-mockup-mount .mc5-stage { max-width: 440px; cursor: pointer; border: 1px solid var(--mc5-line); }

.mc5-stage .mc5-zone {
  position: absolute; border: 1.5px dashed rgba(74,114,89,.6); border-radius: 3px;
  display: grid; place-items: center;
  /* container para o texto de exemplo saber que espaço tem (abaixo) */
  container-type: size;
}
/* modo montra (página/galeria): a zona existe só como âncora da arte */
.mc5-stage .mc5-zone.view { border-color: transparent; }
/* "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. */

.mc5-stage .mc5-art { position: absolute; cursor: grab; user-select: none; touch-action: none; }
.mc5-stage .mc5-art:active { cursor: grabbing; }
.mc5-stage .mc5-art img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mc5-stage .mc5-art.sel {
  outline: 1.5px solid var(--mc5-accent); outline-offset: 3px;
  /* A camada seleccionada pinta POR CIMA das outras. Com imagem e texto
     na mesma area, a camada de cima interceptava as pegas da de baixo:
     medido, so o centro de 13px respondia ao dedo — nao por serem
     pequenas, mas por estarem tapadas. As guias (z-index 4) continuam
     acima. */
  z-index: 3;
}
.mc5-stage .mc5-h {
  position: absolute; width: 13px; height: 13px; border-radius: 3px;
  background: #fff; border: 1.5px solid var(--mc5-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  display: none; touch-action: none;
}
/* 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. */
.mc5-stage .mc5-h::after {
  content: ''; position: absolute; inset: -10px;
}
.mc5-stage .mc5-art.sel .mc5-h { display: block; }
.mc5-stage .mc5-h.tl { left: -7px; top: -7px; cursor: nwse-resize; }
.mc5-stage .mc5-h.tr { right: -7px; top: -7px; cursor: nesw-resize; }
.mc5-stage .mc5-h.bl { left: -7px; bottom: -7px; cursor: nesw-resize; }
.mc5-stage .mc5-h.br { right: -7px; bottom: -7px; cursor: nwse-resize; }

.mc5-stage .mc5-guide {
  position: absolute; background: var(--mc5-accent, #4A7259);
  opacity: 0; pointer-events: none; transition: opacity .1s; z-index: 4;
}
.mc5-stage .mc5-guide.gx { top: 6%; bottom: 6%; width: 1px; }
.mc5-stage .mc5-guide.gy { left: 10%; right: 10%; height: 1px; }

/* 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. */
.mc5.mc5 .mc5-sides {
  display: flex; flex-direction: row; gap: 3px; width: 100%;
  margin: 0 0 16px; padding: 3px;
  background: var(--mc5-paper-2); border-radius: var(--mc5-r);
}
.mc5.mc5 .mc5-sides:empty { display: none; }
.mc5.mc5 .mc5-sides button {
  position: relative;
  padding: 9px 20px; border-radius: var(--mc5-r-sm);
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--mc5-muted);
  background: transparent; border: 0; box-shadow: none;
}
.mc5.mc5 .mc5-sides button:hover:not(.on),
.mc5.mc5 .mc5-sides button:focus-visible:not(.on) { background-color: rgba(0,0,0,.05); color: var(--mc5-ink); }
.mc5.mc5 .mc5-sides button.on { background: var(--mc5-ink); color: #fff; }
.mc5.mc5 .mc5-sides button.on:hover,
.mc5.mc5 .mc5-sides button.on:focus { background-color: var(--mc5-ink); }
/* 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. */
.mc5.mc5 .mc5-sides button .dot {
  position: absolute; top: 6px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mc5-accent);
}
.mc5.mc5 .mc5-sides button.on .dot { background: #fff; }
/* 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. */
.mc5.mc5 .mc5-sides button .dot.falta { background: var(--mc5-amber); }
.mc5.mc5 .mc5-sides button.on .dot.falta { background: #FFC94A; }

/* 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. */
.mc5 .mc-toast__acao,
.mc-toast .mc-toast__acao {
  display: inline-block; margin-left: 10px;
  padding: 6px 12px; border-radius: var(--mc5-r-sm, 8px);
  background: rgba(255,255,255,.16);
  color: inherit; font-weight: 800; text-decoration: underline;
  text-underline-offset: 2px;
}
.mc5 .mc-toast__acao:hover,
.mc-toast .mc-toast__acao:hover { background: rgba(255,255,255,.28); }

/* ── 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). */
@media (max-width: 900px) {
  /* O CTA vive DENTRO do painel, no fim dos slots de personalizacao —
     o JS move-o para la (posicionaCTA). Fixo no fundo roubava altura o
     tempo todo; flutuante ao rolar tapava conteudo. No fim do conteudo
     (referencia: Threadheads) chega-se la a rolar, que e o gesto que ja
     se esta a fazer. */
  .mc5.mc5 .mc5-ed { grid-template-rows: auto 1fr; }

  /* Teclado aberto: o palco perde o sticky e desliza para fora, como na
     Threadheads. O canvas NAO muda de tamanho — foi a licao da volta
     anterior. A folga em baixo garante que qualquer campo, mesmo o
     ultimo, tem para onde subir. */
  /* ── Teclado aberto: a peça FICA ─────────────────────────────────
     Antes o palco perdia o sticky e deslizava para fora do ecrã. A ideia
     era dar espaço ao teclado, e o efeito foi escrever às cegas: o
     editor já desenhava o texto em vivo no mockup e ninguém o via.

     A conta diz que não era preciso. Num iPhone de 844px o teclado leva
     336 e sobram 508; tirando a barra de topo, o campo, as letras e as
     tintas, sobram 285 para o palco — que sem teclado tem 302. Encolhe
     17px e fica.

     --mc5-visivel vem do JS (visualViewport), porque nenhuma unidade de
     CSS conhece a altura do teclado. */
  .mc-sheet.mc5.mc5-teclado .mc5-stagebox .mc5-stage,
  .mc-sheet.mc5.mc5-teclado .mc5-stagewrap .mc5-stage {
    height: 100%; width: auto; aspect-ratio: auto;
  }
  /* Espaço para o campo poder subir até debaixo do palco. */
  /* A barra de acertar não serve de nada enquanto se escreve e só tapa
     a peça — que é justamente o que agora se quer ver. */
  .mc-sheet.mc5.mc5-teclado .mc5-nudge { opacity: 0; pointer-events: none; }

}

/* ── 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. */
@media (max-width: 900px) {
  #matt-sticky-chat,
  #matt-bubble-label,
  #matt-chat-window { display: none !important; }
}

/* ═══ Editor (folha) ═══ */
.mc-sheet.mc5 {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--mc5-paper); display: none;
}
.mc-sheet.mc5.on { display: block; }
/* o chat flutuante (z-index máximo) tapava o CTA do editor */

/* ── 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. */
html body #matt-sticky-chat.matt-forced { display: block !important; }
html body #matt-sticky-chat.matt-forced #matt-chat-window { display: flex !important; }
html body #matt-sticky-chat.matt-forced #matt-bubble-label { display: none !important; }
/* 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. */

.mc5.mc5 .mc5-ed {
  position: absolute; inset: 0; display: grid;
  grid-template-rows: auto 1fr auto; background: var(--mc5-paper);
  /* a coluna implícita era `auto` (= max-content): a fita de cores, com
     696px de miniaturas, esticava a grelha para 406px num ecrã de 375 e
     o palco saía do lado direito. minmax(0,1fr) prende a grelha à
     largura real — mesmo bug dos chips de técnica. */
  grid-template-columns: minmax(0, 1fr);
}
.mc5.mc5 .mc5-flow {
  display: none; gap: 6px; align-items: center;
  font-size: var(--mc5-t-small-size); font-weight: 700; color: var(--mc5-muted);
}
.mc5.mc5 .mc5-flow span { display: flex; align-items: center; gap: 5px; }
.mc5.mc5 .mc5-flow span.done { color: var(--mc5-accent-ink); }
.mc5.mc5 .mc5-flow span.now { color: var(--mc5-ink); }
.mc5.mc5 .mc5-flow i {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid currentColor;
  font-size: .6rem; font-style: normal; display: grid; place-items: center;
}
.mc5.mc5 .mc5-flow span.done i { background: var(--mc5-accent); border-color: var(--mc5-accent); color: #fff; }
.mc5.mc5 .mc5-flow span.now i { background: var(--mc5-ink); border-color: var(--mc5-ink); color: #fff; }
.mc5.mc5 .mc5-flow em { opacity: .35; font-style: normal; }

/* 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) */
.mc5.mc5 .mc5-stagewrap {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: grid; place-items: center; padding: 8px;
}
.mc5.mc5 .mc5-stagewrap { min-width: 0; }
/* 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. */
.mc5.mc5 .mc5-stagewrap .mc5-stage {
  height: min(100%, calc(100vw - 24px));
  /* O `100vw` sozinho era um limite de telemóvel deixado a valer em todo o
     lado — esta regra não está dentro de media query nenhuma. Em desktop
     `calc(100vw - 24px)` dá 1256px, não trava nada, e, por vir DEPOIS da
     regra `.mc5-ed-stage .mc5-stage` com a mesma especificidade, apagava-lhe
     o `max-width: 100%`. Resultado: num ecrã de 1280 o palco ficava com
     763px dentro de um wrap de 681 e entrava 25px pelo painel adentro, com
     o fundo branco do mockup a tapar a borda dos cartões e a primeira letra
     dos títulos. O `min()` guarda as duas travas: a do ecrã e a do pai. */
  width: auto; max-width: min(100%, calc(100vw - 24px));
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* barra mover/escala */
.mc5.mc5 .mc5-nudge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 2px; align-items: center;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--mc5-line); border-radius: var(--mc5-r); padding: 4px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mc5.mc5 .mc5-nudge.on { opacity: 1; pointer-events: auto; }
.mc5.mc5 .mc5-nudge .mc5-ibtn { width: 34px; height: 32px; color: var(--mc5-ink-2); }
.mc5.mc5 .mc5-nudge .sep { width: 1px; height: 16px; background: var(--mc5-line); margin: 0 3px; }

/* 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 */
.mc5.mc5 .mc5-areas { display: grid; gap: 8px; }
/* 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 */
.mc5.mc5 .mc5-area {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--mc5-paper);
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r);
  padding: 12px 14px; min-height: 56px;
  transition: border-color .15s, background-color .15s;
}
.mc5.mc5 .mc5-area:hover { background: var(--mc5-paper); border-color: var(--mc5-muted); color: inherit; }
.mc5.mc5 .mc5-area.on,
.mc5.mc5 .mc5-area.on:hover { border-color: var(--mc5-ink); background: var(--mc5-paper-2); }
.mc5.mc5 .mc5-area .tick {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 1.5px solid #C9C9C9; display: grid; place-items: center;
  font-size: .62rem; color: #fff; transition: background-color .15s, border-color .15s;
}
.mc5.mc5 .mc5-area .tick { border-radius: 50%; }
.mc5.mc5 .mc5-area.on .tick { background: var(--mc5-ink); border-color: var(--mc5-ink); }
.mc5.mc5 .mc5-area .n { flex: 1; min-width: 0; }
.mc5.mc5 .mc5-area .n b { font-size: var(--mc5-t-body-size); display: block; color: var(--mc5-ink); }
.mc5.mc5 .mc5-area .n small { font-size: var(--mc5-t-small-size); color: var(--mc5-muted); }
.mc5.mc5 .mc5-area .pr { font-size: var(--mc5-t-small-size); font-weight: 700; color: var(--mc5-ink); }
.mc5.mc5 .mc5-area .pr.free { color: var(--mc5-accent-ink); }

/* cartão por área */
.mc5.mc5 .mc5-card {
  border: 1.5px solid var(--mc5-ink); border-radius: var(--mc5-r);
  padding: 15px; margin-top: 14px; background: var(--mc5-paper);
}
.mc5.mc5 .mc5-card .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mc5.mc5 .mc5-card .ch b { font-size: var(--mc5-t-body-size); }
.mc5.mc5 .mc5-card .ch .pr { margin-left: auto; font-size: var(--mc5-t-small-size); font-weight: 700; color: var(--mc5-muted); }
/* 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 */
.mc5.mc5 .mc5-textbox { display: grid; gap: 10px; margin-top: 10px; }
.mc5.mc5 .mc5-textbox textarea {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1.5px solid var(--mc5-ink); border-radius: var(--mc5-r-sm);
  padding: 12px; font-family: var(--mc5-font); font-weight: var(--mc5-t-title-s-weight);
  font-size: var(--mc5-t-title-s-size); line-height: var(--mc5-t-title-s-lh); text-align: center; letter-spacing: .01em;
  color: var(--mc5-ink); background: var(--mc5-paper);
  text-transform: none;
}
.mc5.mc5 .mc5-textbox textarea::placeholder { color: var(--mx-global-color-5db5e15, #888888); }
/* 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 */
.mc5.mc5 .mc5-textbox .fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.mc5.mc5 .mc5-textbox .fonts button {
  /* .94rem e sem folga lateral: a Syne a 800 pedia 64px numa caixa de
     63 e ficava "AB…" — a amostra tem de caber inteira */
  padding: 12px 4px; font-size: var(--mc5-t-button-size); line-height: 1.1;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r-sm);
  color: var(--mc5-ink); background: var(--mc5-paper);
  /* sem ellipsis: uma AMOSTRA cortada com "…" não serve para julgar a
     letra — a grelha é que tem de dar largura */
  overflow: hidden; white-space: nowrap; min-width: 0;
}
.mc5.mc5 .mc5-textbox .fonts button:hover:not(.on) { background-color: var(--mc5-paper); border-color: var(--mc5-muted); }
.mc5.mc5 .mc5-textbox .fonts button.on { border-color: var(--mc5-ink); background: var(--mc5-paper-2); }
.mc5.mc5 .mc5-textbox .fonts button.on:hover { background-color: var(--mc5-paper-2); }
/* 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) */
.mc5.mc5 .mc5-textbox .inks {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px 6px; justify-items: center;
}
.mc5.mc5 .mc5-textbox .inks button {
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  border: 1.5px solid rgba(15,15,15,.18);
}
.mc5.mc5 .mc5-textbox .inks button:hover:not(.on) { box-shadow: 0 0 0 2px var(--mc5-paper), 0 0 0 3px var(--mc5-muted); }
.mc5.mc5 .mc5-textbox .inks button.on { box-shadow: 0 0 0 2px var(--mc5-paper), 0 0 0 4px var(--mc5-ink); }
/* 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 */
.mc5.mc5 .mc5-textbox .inks .custom {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(15,15,15,.15); overflow: hidden; position: relative;
  display: grid; place-items: center;
  /* roda cromática = "escolhe qualquer cor"; um disco preto tracejado
     lia-se como uma segunda tinta preta */
  background: conic-gradient(#F43F5E, #F59E0B, #84CC16, #06B6D4, #6366F1, #D946EF, #F43F5E);
}
.mc5.mc5 .mc5-textbox .inks .custom input[type=color] { opacity: 0; }
.mc5.mc5 .mc5-textbox .inks .custom.on { border-style: solid; box-shadow: 0 0 0 2px var(--mc5-paper), 0 0 0 4px var(--mc5-ink); }
.mc5.mc5 .mc5-textbox .inks .custom input[type=color] {
  width: 200%; height: 200%; border: none; padding: 0; background: none; cursor: pointer;
}
/* o texto em construção aparece na peça com um respiro visual que o
   distingue de arte já colocada */
.mc5-stage .mc5-art.live { opacity: .92; }
.mc5-stage .mc5-art.live img { animation: mc5-livein .18s var(--mc5-ease); }
@keyframes mc5-livein { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .mc5-stage .mc5-art.live img { animation: none } }
.mc5.mc5 .mc5-textbox .acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.mc5.mc5 .mc5-textbox .acts .mc5-btn { padding: 12px 14px; font-size: .85rem; }

.mc5.mc5 .mc5-chk {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--mc5-t-small-size); font-weight: 600; line-height: 1.45;
  padding: 9px 11px; border-radius: 9px; margin-top: 8px;
}
.mc5.mc5 .mc5-chk .ph { font-size: .95rem; flex: 0 0 auto; margin-top: 1px; }
.mc5.mc5 .mc5-chk.ok   { background: var(--mc5-accent-soft); color: var(--mc5-accent-ink); }
.mc5.mc5 .mc5-chk.warn { background: var(--mc5-amber-soft);  color: var(--mc5-amber-ink); }
.mc5.mc5 .mc5-chk.bad  { background: var(--mc5-warn-soft);   color: var(--mc5-warn-ink); }

/* controlos da camada ativa */
.mc5.mc5 .mc5-pos { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mc5.mc5 .mc5-pos button {
  font-size: .72rem; font-weight: 700; color: var(--mc5-ink-2); background: var(--mc5-paper);
  border: 1px solid var(--mc5-line); border-radius: var(--mc5-r-sm); padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, color .15s;
}
.mc5.mc5 .mc5-pos button:hover { border-color: var(--mc5-ink); color: var(--mc5-ink); background: var(--mc5-paper); }

/* aviso com aceitação (bordado) */
.mc5.mc5 .mc5-advisory {
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r);
  padding: 13px 15px; margin-top: 14px; font-size: var(--mc5-t-small-size); line-height: 1.5;
  background: var(--mc5-paper); color: var(--mc5-ink-2);
}
.mc5.mc5 .mc5-advisory.need { border-color: var(--mc5-warn); }
.mc5.mc5 .mc5-advisory label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 600; margin-top: 8px; }
.mc5.mc5 .mc5-advisory input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--mc5-ink); flex: 0 0 18px; margin: 1px 0 0; cursor: pointer;
}

.mc5.mc5 .mc5-notes textarea {
  width: 100%; min-height: 56px; resize: vertical;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r-sm);
  padding: 10px 12px; font: inherit; font-size: var(--mc5-t-body-size); color: var(--mc5-ink);
  background: var(--mc5-paper);
}
.mc5.mc5 .mc5-notes textarea::placeholder { color: var(--mc5-muted); }
.mc5.mc5 .mc5-notes textarea:focus { border-color: var(--mc5-ink); outline: none; }

/* 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 ═══ */
.mc5.mc5 .mc5-rev {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(15,15,15,0); display: none;
  transition: background-color .3s var(--mc5-ease);
}
.mc5.mc5 .mc5-rev.on { display: block; }
.mc5.mc5 .mc5-rev.in { background: rgba(15,15,15,.35); }
.mc5.mc5 .mc5-rev .sheet {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100%;
  background: #fff; display: grid; grid-template-rows: auto 1fr auto;
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .38s var(--mc5-ease);
}
.mc5.mc5 .mc5-rev.in .sheet { transform: none; }
.mc5.mc5 .mc5-rev .rh {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--mc5-line); min-height: 54px;
}
.mc5.mc5 .mc5-rev .rh b { font-size: var(--mc5-t-title-s-size); line-height: var(--mc5-t-title-s-lh); margin: 0 auto; }
.mc5.mc5 .mc5-rev .rb { overflow-y: auto; padding: 18px 16px; }
.mc5.mc5 .mc5-rev .rf {
  border-top: 1px solid var(--mc5-line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.mc5.mc5 .mc5-rev .rf p { font-size: var(--mc5-t-small-size); color: var(--mc5-muted); text-align: center; margin: 8px 0 0; }
/* 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. */

.mc5.mc5 .mc5-ladder { border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r); padding: 14px 16px; margin-top: 18px; }
.mc5.mc5 .mc5-ladder p { font-size: var(--mc5-t-body-size); font-weight: 700; text-align: center; margin: 0 0 10px; color: var(--mc5-ink); }
/* 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ã. */
.mc5.mc5 .mc5-ladder p.lad-c {
  font-size: var(--mc5-t-small-size); font-weight: 600; color: var(--mc5-muted);
  margin: -6px 0 10px;
}
.mc5.mc5 .mc5-ladder .track { display: flex; gap: 5px; }
.mc5.mc5 .mc5-ladder .track i {
  flex: 1; height: 5px; background: var(--mc5-line); border-radius: 2px;
  position: relative; overflow: hidden;
}
.mc5.mc5 .mc5-ladder .track i b {
  position: absolute; inset: 0; background: var(--mc5-accent);
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--mc5-ease);
}

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

/* ═══ Toast ═══ */
.mc-toast.mc5 {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 100001; background: var(--mc5-ink); color: #fff;
  font-size: var(--mc5-t-body-size); font-weight: 600; padding: 12px 18px;
  border-radius: var(--mc5-r); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s var(--mc5-ease);
  max-width: min(92vw, 480px); text-align: center;
}
.mc-toast.mc5.on {
  opacity: 1; transform: translate(-50%, 0);
  /* A base tem pointer-events:none para o aviso não roubar toques quando
     está invisível — mas nunca era reposto, e a ligação "Iniciar sessão"
     lá dentro não recebia clique nenhum, em nenhum ecrã. */
  pointer-events: auto;
}
.mc-toast.mc5.error { background: var(--mc5-warn); }


/* 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. */
body:has(#mc-app.mc5) .mx-con:has(> .mt-element > .mt-shortcode > .mc-qty-wrap) { display: none; }

/* ═══ 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. */
@media (pointer: coarse), (max-width: 900px) {
  .mc5.mc5 .mc5-ibtn { width: 42px; height: 40px; }
  .mc5.mc5 .mc5-nudge .mc5-ibtn { width: 40px; height: 40px; }
  .mc5.mc5 .mc5-pos button { padding: 11px 15px; font-size: .78rem; }
  .mc5.mc5 .mc5-sides button { padding: 10px 16px; }
  .mc5.mc5 .mc5-textbox .inks button, .mc5.mc5 .mc5-textbox .inks .custom { width: 32px; height: 32px; }
  .mc5.mc5 .mc5-chk { font-size: var(--mc5-t-small-size); }
}

/* ═══ Guardar design (modal) ═══ */
.mc5.mc5.mc5-save { position: fixed; inset: 0; z-index: 100002; display: grid; place-items: center; padding: 20px; }
.mc5.mc5.mc5-save .bk { position: absolute; inset: 0; background: rgba(15,15,15,.45); }
.mc5.mc5.mc5-save .pn {
  position: relative; width: min(420px, 100%);
  background: var(--mc5-paper); border-radius: var(--mc5-r);
  padding: 22px 20px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
  display: grid; gap: 8px;
}
.mc5.mc5.mc5-save .x { position: absolute; top: 10px; right: 10px; }
.mc5.mc5.mc5-save h3 { font-size: var(--mc5-t-title-s-size); line-height: var(--mc5-t-title-s-lh); font-weight: var(--mc5-t-title-s-weight); margin: 0 18px 0 0; }
.mc5.mc5.mc5-save p { font-size: var(--mc5-t-body-size); color: var(--mc5-muted); margin: 0 0 6px; }
.mc5.mc5.mc5-save label { font-size: var(--mc5-t-small-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mc5-muted); }
.mc5.mc5.mc5-save input[type=text] {
  width: 100%; border: 1.5px solid var(--mc5-ink); border-radius: var(--mc5-r-sm);
  padding: 11px 12px; font-family: var(--mc5-font); font-weight: var(--mc5-t-title-s-weight); font-size: var(--mc5-t-title-s-size); line-height: var(--mc5-t-title-s-lh);
  color: var(--mc5-ink); background: var(--mc5-paper);
}
.mc5.mc5.mc5-save .acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 8px; }

/* 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). */
.mc5.mc5.mc5-guia .pn { width: min(560px, 100%); max-height: min(86vh, 720px); overflow-y: auto; }
.mc5.mc5.mc5-guia .tb { overflow-x: auto; margin-top: 4px; }
.mc5.mc5.mc5-guia .tb table { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc5.mc5.mc5-guia .tb table,
.mc5.mc5.mc5-guia .tb tr,
.mc5.mc5.mc5-guia .tb th,
.mc5.mc5.mc5-guia .tb td { border: 0 !important; background: transparent !important; }
.mc5.mc5.mc5-guia .tb thead tr { border-bottom: 1px solid var(--mc5-ink) !important; }
.mc5.mc5.mc5-guia .tb tbody tr { border-bottom: 1px solid var(--mc5-line) !important; }
.mc5.mc5.mc5-guia .tb tbody tr:last-child { border-bottom: 0 !important; }
.mc5.mc5.mc5-guia .tb thead th,
.mc5.mc5.mc5-guia .tb thead td {
  padding: 12px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  text-align: left; vertical-align: bottom; color: var(--mc5-ink);
}
.mc5.mc5.mc5-guia .tb tbody td {
  padding: 13px 8px; font-size: 14px; font-weight: 600;
  text-align: left; color: var(--mc5-ink);
}

/* ═══ Desktop (expansão) ═══ */
@media (min-width: 901px) {
  .mc5.mc5 .mc5-ladder-info .cell { display: grid; gap: 3px; justify-items: start; align-content: start; padding: 10px 12px; }
  .mc5.mc5 .mc5-ladder-info .cell small { flex: none; }
  .mc5.mc5 .mc5-flow { display: flex; }
  /* Painel mais largo em ecrãs generosos — os cartões de área e o
     compositor de texto respiram; nunca rouba o protagonismo ao palco. */
  /* height:100% + min-height:0: sem isto, o item do flex-row deixa o
     conteúdo ditar a altura (min-height:auto) e o palco a height:100%
     entra em ciclo — mediu 932px numa coluna de 773 e empurrou as
     pílulas de lado para fora do ecrã. */
  .mc5.mc5 .mc5-stagewrap { padding: 0; height: 100%; min-height: 0; flex: 0 1 auto; }
  /* desktop: as cores são uma SIDEBAR vertical ao lado do palco —
     a coluna do palco vira linha [sidebar | palco] */
  /* O palco e quadrado e dimensionado pela ALTURA, por isso cada pixel
     de crome vertical sai directamente ao mockup. A margem lateral
     fica: e o ar entre a sidebar de cor e a peca. */
  /* padding-left menor: os 32px que a barra de cores ganhou saem daqui,
     que era folga. O palco fica onde estava. */
  /* Grelha e não coluna: com flex-wrap a última linha ficava alinhada à
     esquerda e a coluna parecia partida. A grelha mantém as duas colunas
     sempre com a mesma largura, seja qual for o número de cores. */
  /* Um produto de duas cores não precisa de duas colunas: uma só, e a
     barra encolhe com ela em vez de deixar meia coluna vazia. */
  .mc5.mc5 .mc5-rev .sheet { width: min(100%, 520px); }
}

/* 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). */
@media (max-width: 900px) {
  body:not(.mc5-editor-open) #mc-actions-mount .mc5-page {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--mc5-line);
  }
  body:has(#mc-app.mc5) { padding-bottom: 84px; }
  /* o chat da casa fica ACIMA do CTA sticky, não em cima dele */
  body:has(#mc-app.mc5):not(.mc5-editor-open) #matt-sticky-chat,
  body:has(#mc-app.mc5):not(.mc5-editor-open) #matt-bubble-label {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══ 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. */

@media (prefers-reduced-motion: reduce) {
  .mc5 *, .mc5 *::before, .mc5 *::after { transition: none !important; animation: none !important; }
}

/* ═══ 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. */
@media (max-width: 900px) {
  /* 16px nos campos: abaixo disso o iOS faz zoom a pagina inteira ao
     focar, e nao o desfaz sozinho. Lista explicita — os selectores
     especificos (notas .85rem, quantidades .9rem) furavam o apanhado. */
  /* !important a serio: ha uma regra global de tipografia fluida (o
     snippet Font Clamp) que poe os campos a ~13.8px com !important —
     era ELA a causa do zoom do iOS. So important-contra-important com
     mais especificidade a vence. */
  .mc5.mc5 textarea,
  .mc5.mc5 input[type="text"],
  .mc5.mc5 input[type="number"],
  .mc5.mc5 .mc5-notes textarea { font-size: 16px !important; }
}

/* ═══ 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. */
.mc5.mc5 .mc5-guialink {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  color: var(--mc5-accent); font-size: .78rem; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (pointer: coarse) {
  .mc5.mc5 .mc5-sizelink { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ═══ 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). */
@media (max-width: 900px) {
  /* Palco e coluna de cores lado a lado, e altura ditada pelo conteudo:
     antes eram 58vh fixos (471px) para um mockup de 287 — 184px de vazio
     roubados ao espaco de edicao. */

  /* O nome fica POR BAIXO das cores, centrado e a quebrar linha. Deixa
     de ser sticky: numa coluna nao ha fita a deslizar por tras dele, e
     o que ele tapava era o problema que resolvemos antes. */

  /* O palco ocupa o que sobra e continua quadrado. */
  /* padding 0: cada pixel de folga aqui sai ao mockup, que ja pagou
     largura a coluna de cores. */
  .mc5.mc5 .mc5-stagewrap { flex: 1 1 auto; min-width: 0; padding: 0; }

  /* O PAINEL encolhe ate ao mockup. Antes tinha 58vh fixos (471px) para
     um mockup de 287 — 184px de vazio por cima e por baixo, roubados ao
     espaco de edicao. Agora a altura vem do conteudo, e o mockup fica do
     mesmo tamanho: quem manda e a largura disponivel.
     aspect-ratio em vez de height:100%: sem altura fixa no pai, uma
     percentagem nao tem a que se referir. */
  .mc5.mc5 .mc5-stagebox { height: auto; }
  .mc5.mc5 .mc5-stagebox .mc5-stage,
  .mc5.mc5 .mc5-stagewrap .mc5-stage {
    width: calc(100vw - 88px);
    max-width: calc(100vw - 88px);
    height: auto; aspect-ratio: 1 / 1;
  }
}

/* ═══ 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-stagebox .mc5-nudge {
    /* width: max-content é preciso. Sendo absoluta, a largura de ajuste
       da barra é limitada pelo que resta da CAIXA DO PALCO à direita do
       seu `left` — 152px num ecrã de 320 — e ela partia em três linhas
       de 40px, a tapar 44% da peça. Com max-content pede o que precisa e
       só o max-width a trava. */
    width: max-content;
    max-width: calc(100vw - 16px);
    /* Num ecrã de 320px a barra precisa de 347 e só tem 304. Sem isto o
       flex espremia os seis botões de ícone de 40 para 33px — trocar um
       problema de recorte por um de alvo de toque não é correcção.
       Preferem-se DUAS LINHAS: nada desaparece e nada encolhe. */
    flex-wrap: wrap; justify-content: center; row-gap: 2px;
  }
  .mc5.mc5 .mc5-stagebox .mc5-nudge > * { flex: none; }
}

/* ═══ 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. */
@media (max-width: 900px) {
  .mc-sheet.mc5.mc5-teclado .mc5-stagewrap,
  .mc-sheet.mc5.mc5-teclado .mc5-stagebox { height: 100%; min-height: 0; }
  .mc-sheet.mc5.mc5-teclado .mc5-stagebox .mc5-stage,
  .mc-sheet.mc5.mc5-teclado .mc5-stagewrap .mc5-stage {
    height: 100%; width: auto; max-width: 100%;
  }
}

/* ═══ 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-stagewrap { width: 100%; flex: 1 1 auto; min-width: 0; padding: 0; }
  .mc5.mc5 .mc5-stagebox,
  .mc5.mc5 .mc5-stagewrap .mc5-stage,
  .mc5.mc5 .mc5-stagebox .mc5-stage {
    width: min(100%, calc(100vh - 420px) * 1);
    max-width: 100%; height: auto; margin: 0 auto;
  }

  /* A fita de cores dentro do painel: grelha de miniaturas da peça. */
  /* Sem `display` aqui: quem o decide é o separador aberto, mais abaixo.
     Esta regra herdou-se de quando a fita vivia no painel e vencia, por
     especificidade, a regra que esconde o que não está em foco. */
  /* Cabeçalho da secção + o nome da cor escolhida ao lado. */
  /* "Cor  Azzure" na mesma linha — o nome não precisa de linha própria. */
  /* O nome sozinho por baixo deixa de fazer falta. */
}

/* ═══ 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. */
@media (max-width: 900px) {
  /* Frente/Costas ao centro, em cápsula sobre fundo suave. */

  /* O palco é um cartão branco sobre fundo suave, com folga à volta. */
  .mc5.mc5 .mc5-stagewrap {
    background: var(--mc5-paper); border-radius: var(--mc5-r);
    border: 1px solid var(--mc5-line); padding: 10px; position: relative;
  }

  /* Anular / refazer / guardar: coluna no canto do cartão. */

  /* A barra de acertar desce para DENTRO do cartão, abaixo da peça:
     deixa de tapar a estampagem, que é o que se está a ver. */
  .mc5.mc5 .mc5-stagebox .mc5-nudge {
    position: static; left: auto; transform: none; width: 100%; max-width: 100%;
    margin-top: 8px; justify-content: space-between; flex-wrap: nowrap;
    background: var(--mc5-paper-2); backdrop-filter: none; -webkit-backdrop-filter: none;
    /* Vem PRIMEIRO no HTML (era flutuante, e a ordem não contava). Agora
       que ocupa espaço a sério, sem isto empurrava a peça 50px para
       baixo e deixava o cartão desequilibrado. */
    order: 2;
  }
  .mc5.mc5 .mc5-stagebox .mc5-stage { order: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* O corpo do editor deixa de rolar: quem rola é a folha. */

  /* A peça: fundo do ecrã, centrada no que sobra acima da folha. */
  .mc5.mc5 .mc5-stagewrap { width: 100%; flex: 0 1 auto; min-height: 0; }
  /* A caixa do palco é uma grelha e a coluna dela era dimensionada pelo
     conteúdo mais largo — a barra de acertar, que não encolhe abaixo dos
     seus sete botões. Com a folha aberta o palco encolhe, a barra não, e
     a coluna ficava 90px mais larga do que a caixa: a peça saía do centro
     e ia bater nos botões de anular. A coluna passa a valer a caixa, e a
     barra rola quando não couber. */
  .mc5.mc5 .mc5-stagebox { grid-template-columns: minmax(0, 1fr); }
  .mc5.mc5 .mc5-stagebox .mc5-nudge {
    min-width: 0; overflow-x: auto; scrollbar-width: none;
  }
  .mc5.mc5 .mc5-stagebox .mc5-nudge::-webkit-scrollbar { display: none; }
  .mc5.mc5 .mc5-stagebox .mc5-nudge > * { flex: 0 0 auto; }
  /* A largura da peça é o menor de dois limites: o que a coluna dá e o que
     a altura permite. `--mc5-visivel` desce quando o teclado abre, por isso
     a peça encolhe sozinha em vez de ser empurrada para fora do ecrã. */
  .mc5.mc5 .mc5-stagebox,
  .mc5.mc5 .mc5-stagewrap .mc5-stage,
  .mc5.mc5 .mc5-stagebox .mc5-stage {
    width: min(100%, max(170px, calc(var(--mc5-visivel, 100vh) - 282px)));
    max-width: 100%; height: auto; margin: 0 auto;
  }

  .mc5.mc5 .mc5-folha {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    height: var(--mc5-folha-h, 152px);
    display: flex; flex-direction: column;
    background: var(--mc5-paper);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -1px 0 var(--mc5-line), 0 -10px 34px rgba(15,15,15,.10);
    transition: height .38s var(--mc5-ease);
  }
  /* Enquanto o dedo está na pega não há transição: a folha segue o dedo. */
  .mc5.mc5 .mc5-folha.a-arrastar { transition: none; }

  .mc5.mc5 .mc5-folha .pega {
    flex: none; height: 22px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: grab; touch-action: none;
  }
  .mc5.mc5 .mc5-folha .pega i {
    display: block; width: 36px; height: 4px; border-radius: 999px;
    background: var(--mc5-line-2, #DEDEDA);
  }

  /* Flex e não grelha de 4: um boné só tem frente, e os separadores
     passam a ser três sem precisar de contar nada em JS. */
  .mc5.mc5 .mc5-folha .tabs {
    flex: none; display: flex; gap: 4px; padding: 0 10px 8px;
  }
  .mc5.mc5 .mc5-folha .tabs button { flex: 1 1 0; min-width: 0; }
  .mc5.mc5 .mc5-folha .tabs button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 0; padding: 6px 0 7px; border: 0; background: none;
    border-radius: var(--mc5-r-sm); color: var(--mc5-muted);
    font-size: .68rem; font-weight: 700; letter-spacing: -.005em;
  }
  .mc5.mc5 .mc5-folha .tabs button i { font-size: 1.24rem; line-height: 1; }
  .mc5.mc5 .mc5-folha .tabs button.on { color: var(--mc5-ink); background: var(--mc5-paper-2); }
  .mc5.mc5 .mc5-folha .tabs .pt {
    position: absolute; top: 5px; left: 50%; margin-left: 7px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--mc5-accent);
  }

  .mc5.mc5 .mc5-folha .corpo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px; border-top: 1px solid var(--mc5-line);
  }
  .mc5.mc5 .mc5-folha.pousada .corpo { display: none; }

  /* Um assunto de cada vez: o separador aberto escolhe o que se vê. */
  .mc5.mc5 .mc5-folha .corpo > * { display: none; }
  .mc5.mc5 .mc5-folha[data-tab="front"] > .corpo > #mc5-lista,
  .mc5.mc5 .mc5-folha[data-tab="back"]  > .corpo > #mc5-lista { display: block; }
  /* A fita de cores já não precisa de folga em baixo: é a secção toda. */

  /* A barra de preço: presa ao fundo da folha, visível nas três alturas. */

  /* Com o teclado aberto o editor encolhe para a altura visível, em vez
     de ficar meio escondido por baixo dele: assim a peça continua à
     vista enquanto se escreve — que é o ponto todo do texto em vivo. */
  .mc-sheet.mc5.mc5-teclado .mc5-ed { height: var(--mc5-visivel, 100%); bottom: auto; }
  .mc-sheet.mc5.mc5-teclado .mc5-stagewrap,
  .mc-sheet.mc5.mc5-teclado .mc5-stagebox { height: auto; min-height: 0; }
}

/* 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. */
@media (min-width: 901px) {
  /* Ambas são de telemóvel. Vazias em desktop, mas continuavam a ocupar
     uma linha da grelha do editor — fecham-se aqui. */
  .mc5.mc5 .mc5-folha { display: none; }
}




/* ═══ 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-rev .sheet {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: min(86%, calc(var(--mc5-visivel, 100vh) - 64px));
    grid-template-rows: auto auto 1fr auto;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(15,15,15,.16);
    transform: translateY(100%);
    transition: transform .38s var(--mc5-ease);
  }
  .mc5.mc5 .mc5-rev.in .sheet { transform: none; }

  .mc5.mc5 .mc5-rev .pega {
    height: 22px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: grab; touch-action: none;
  }
  .mc5.mc5 .mc5-rev .pega i {
    display: block; width: 36px; height: 4px; border-radius: 999px;
    background: var(--mc5-line-2, #DEDEDA);
  }
  .mc5.mc5 .mc5-rev .rh { min-height: 44px; padding: 4px 12px 10px; border-bottom: 0; }
  .mc5.mc5 .mc5-rev .rb { padding: 4px 16px 16px; border-top: 1px solid var(--mc5-line); }
}
@media (min-width: 901px) {
  .mc5.mc5 .mc5-rev .pega { display: none; }
}

/* 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-sides { display: none; }
}

/* ═══ 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. */
@media (min-width: 901px) {
  .mc5.mc5 .mc5-ed .mc5-stage { border-radius: var(--mc5-r); }
}

/* ═══ 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. */
.mc5.mc5 .mc5-folha .corpo,
.mc5.mc5 .mc5-rev .rb {
  scrollbar-width: thin;
  scrollbar-color: var(--mc5-line-2, #DEDEDA) transparent;
}
.mc5.mc5 .mc5-folha .corpo::-webkit-scrollbar,
.mc5.mc5 .mc5-rev .rb::-webkit-scrollbar { width: 8px; }
.mc5.mc5 .mc5-folha .corpo::-webkit-scrollbar-track,
.mc5.mc5 .mc5-rev .rb::-webkit-scrollbar-track { background: transparent; }
.mc5.mc5 .mc5-folha .corpo::-webkit-scrollbar-thumb,
.mc5.mc5 .mc5-rev .rb::-webkit-scrollbar-thumb {
  background-color: var(--mc5-line-2, #DEDEDA); border-radius: 999px;
}

/* 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). */
.mc5-stage .mc5-h.tl { left: -13px; top: -13px; }
.mc5-stage .mc5-h.tr { right: -13px; top: -13px; }
.mc5-stage .mc5-h.bl { left: -13px; bottom: -13px; }
.mc5-stage .mc5-h.br { right: -13px; bottom: -13px; }

@media (max-width: 900px) {
  /* 3. A barra de acertar reservava 50px dentro do cartão mesmo estando
        invisível (opacidade 0, sem arte seleccionada): o cartão nascia
        sempre com uma faixa branca morta em baixo. Sai do fluxo quando
        não há nada para acertar. */
  .mc5.mc5 .mc5-stagebox .mc5-nudge:not(.on) { display: none; }
}

@media (max-width: 900px) {
  /* 4. A barra de acertar não cabia: 345px de conteúdo em 256 de largura,
        e o "Centrar" ficava fora sem nenhuma pista de que a barra rolava.
        Aperta-se o que dá — os separadores saem, os botões encolhem — e
        o "Centrar" passa a caber sem rolagem nenhuma. */
  .mc5.mc5 .mc5-stagebox .mc5-nudge { gap: 0; padding: 4px 6px; }
  .mc5.mc5 .mc5-stagebox .mc5-nudge .sep { display: none; }
  .mc5.mc5 .mc5-stagebox .mc5-nudge .mc5-ibtn {
    width: 38px; min-width: 38px; height: 42px;
  }
}

/* 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-stagewrap { padding: 0; overflow: hidden; }
  .mc5.mc5 .mc5-stagebox .mc5-stage { box-shadow: none; }
  .mc5.mc5 .mc5-stagebox .mc5-nudge { margin: 8px 10px 10px; }
}

/* ═══ 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. */
.mc5-stage.dark .mc5-zone:not(.view) { border-color: rgba(255,255,255,.62); }
.mc5-stage.dark .mc5-zone.sel,
.mc5-stage.dark .mc5-art.sel { outline-color: rgba(255,255,255,.85); }
.mc5-stage.dark .mc5-guide { background: rgba(255,255,255,.8); }

/* ═══ 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. */

/* ═══ 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. */
@media (min-width: 601px) and (max-width: 900px) {
  .mc5.mc5 .mc5-stagebox,
  .mc5.mc5 .mc5-stagewrap .mc5-stage,
  .mc5.mc5 .mc5-stagebox .mc5-stage { max-width: 540px; }
  /* `width: 100%` é obrigatório aqui. A folha é um flex em coluna, e
     margens automáticas num filho de flex ANULAM o esticar por omissão:
     sem a largura declarada, a barra de separadores encolhia até ao
     conteúdo e os quatro botões ficavam encavalitados. */
  .mc5.mc5 .mc5-folha .tabs {
    width: 100%; max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .mc5.mc5 .mc5-folha .corpo > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  .mc5.mc5 .mc5-folha .corpo { padding-left: 0; padding-right: 0; }
}

/* 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). */
.mc5.mc5 #mc5-tx-conta { flex: none; font-variant-numeric: tabular-nums; }
.mc5.mc5 #mc5-tx-conta.cheio { color: var(--mc5-warn-ink, #7A2420); font-weight: 700; }

/* ── 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. */
.mc5.mc5 #mc-after-mount .mc5-page { padding-top: 20px; }

/* "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. */
.mc5.mc5 .mc5-price-from__drop {
  flex-basis: 100%;
  /* Tipografia global "Body Text" do site (400, ~0,87rem): a mais fina
     do kit, e a que o resto da ficha usa para texto corrido — a linha lê-se
     como nota ao preço, não como segundo preço. Variáveis de SISTEMA, logo
     existem em qualquer kit; os fallbacks são só para sem essas variáveis. */
  font-family: var(--mx-global-typography-text-font-family, inherit);
  font-weight: var(--mx-global-typography-text-font-weight, 400);
  font-size: var(--mx-global-typography-text-font-size, .85rem);
  color: var(--mc5-muted, #6B6B68);
}


/* ── 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. */
.mc5.mc5 .mc5-card { min-width: 0; }

/* 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.
   ═══════════════════════════════════════════════════════════════════════ */

.mc5.mc5 .mc5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mc5.mc5 .mc5-note { margin: 10px 0 0; font-size: var(--mc5-t-small-size); color: var(--mc5-muted); }

/* ── Palco: recorta o zoom, e o dedo é do editor (pinça, arrasto) ── */
.mc5.mc5 .mc5-ed .mc5-stagewrap { position: relative; overflow: hidden; touch-action: none; }
.mc5.mc5 .mc5-ed .mc5-stage { transition: transform .38s var(--mc5-ease); --zs: 1; }
@media (prefers-reduced-motion: reduce) { .mc5.mc5 .mc5-ed .mc5-stage { transition: none; } }

/* Molduras, contornos e pegas não engordam com o zoom. */
.mc5-stage .mc5-zone { border-width: calc(1.5px / var(--zs, 1)); border-radius: calc(3px / var(--zs, 1)); }
.mc5-stage .mc5-art.sel { outline-width: calc(1.5px / var(--zs, 1)); outline-offset: calc(3px / var(--zs, 1)); }
.mc5-stage .mc5-h {
  width: calc(13px / var(--zs, 1)); height: calc(13px / var(--zs, 1));
  border-width: calc(1.5px / var(--zs, 1)); border-radius: calc(3px / var(--zs, 1));
}
.mc5-stage .mc5-h::after { inset: calc(-10px / var(--zs, 1)); }
.mc5-stage .mc5-h.tl { left: calc(-13px / var(--zs, 1)); top: calc(-13px / var(--zs, 1)); }
.mc5-stage .mc5-h.tr { right: calc(-13px / var(--zs, 1)); top: calc(-13px / var(--zs, 1)); }
.mc5-stage .mc5-h.bl { left: calc(-13px / var(--zs, 1)); bottom: calc(-13px / var(--zs, 1)); }
.mc5-stage .mc5-h.br { right: calc(-13px / var(--zs, 1)); bottom: calc(-13px / var(--zs, 1)); }

/* ── Frente/Costas sobre a foto, destacado ── */
.mc5.mc5 .mc5-stagewrap > .mc5-sides {
  position: absolute; top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); z-index: 8;
  display: flex; flex-direction: row; gap: 3px; width: auto; margin: 0; padding: 3px;
  background: var(--mc5-paper); border: 1.5px solid var(--mc5-ink); border-radius: var(--mc5-r-sm);
  box-shadow: 0 4px 14px rgba(15, 15, 15, .14);
}
.mc5.mc5 .mc5-stagewrap > .mc5-sides:empty { display: none; }
.mc5.mc5 .mc5-stagewrap > .mc5-sides button {
  position: relative; min-height: 42px; padding: 0 18px; border-radius: 6px;
  font-size: .88rem; font-weight: 800; letter-spacing: -.01em; color: var(--mc5-ink-2);
  display: flex; align-items: center; gap: 6px; background: transparent;
  transition: background-color .15s, color .15s;
}
.mc5.mc5 .mc5-stagewrap > .mc5-sides button:hover:not(.on) { background-color: var(--mc5-paper-2); color: var(--mc5-ink); }
.mc5.mc5 .mc5-stagewrap > .mc5-sides button.on,
.mc5.mc5 .mc5-stagewrap > .mc5-sides button.on:hover,
.mc5.mc5 .mc5-stagewrap > .mc5-sides button.on:focus { background-color: var(--mc5-ink); color: var(--mc5-paper); }
.mc5.mc5 .mc5-stagewrap > .mc5-sides .dot {
  position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mc5-accent);
}
.mc5.mc5 .mc5-stagewrap > .mc5-sides button.on .dot { background: var(--mc5-paper); }
.mc5.mc5 .mc5-stagewrap > .mc5-sides .dot.falta { background: var(--mc5-amber); }
.mc5.mc5 .mc5-stagewrap > .mc5-sides button.on .dot.falta { background: #FFC94A; }
@media (max-width: 900px) { .mc5.mc5 .mc5-stagewrap > .mc5-sides { display: flex; } }

/* ── Dica e botão de zoom, em baixo no palco ── */
.mc5.mc5 .mc5-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 7;
  background: var(--mc5-ink); color: var(--mc5-paper);
  font-size: .75rem; font-weight: 600; line-height: 1.35; text-align: center;
  padding: 8px 12px; border-radius: var(--mc5-r-sm);
  width: max-content; max-width: calc(100% - 24px); pointer-events: none;
}
.mc5.mc5 .mc5-hint[hidden], .mc5.mc5 .mc5-zoombtn[hidden] { display: none; }
.mc5.mc5 .mc5-zoombtn {
  position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); bottom: 10px; z-index: 8;
  display: flex; gap: 6px; align-items: center;
  background: var(--mc5-paper); border: 1px solid var(--mc5-line); border-radius: var(--mc5-r-sm);
  padding: 8px 12px; font-size: .78rem; font-weight: 700; color: var(--mc5-ink);
}
.mc5.mc5 .mc5-zoombtn:hover, .mc5.mc5 .mc5-zoombtn:focus { background-color: var(--mc5-paper); border-color: var(--mc5-ink); }
.mc5.mc5 .mc5-zoombtn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 360px) {
  .mc5.mc5 .mc5-zoombtn .zl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mc5.mc5 .mc5-zoombtn { padding: 9px; }
}

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

/* ── Área vazia: «Carrega aqui o teu design» dentro da zona ── */
.mc5-stage .mc5-zone--vazia { border-style: dashed; }
.mc5.mc5 .mc5-stage .mc5-tapcta {
  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(--mc5-accent-ink);
  font-weight: 700; font-size: 10cqw; line-height: 1.15; text-align: center; padding: 6cqw;
  cursor: pointer; white-space: normal;
}
.mc5.mc5 .mc5-stage .mc5-tapcta:hover,
.mc5.mc5 .mc5-stage .mc5-tapcta:focus { background-color: #fff; }
.mc5.mc5 .mc5-stage .mc5-tapcta i { font-style: normal; font-size: 22cqw; line-height: 1; }
.mc5.mc5 .mc5-stage .mc5-tapcta small { font-size: 6.5cqw; font-weight: 600; color: var(--mc5-muted); margin-top: 1cqw; }

/* ── Separadores: «Cor e artigos» / «Design» (folha e painel) ── */
.mc5.mc5 .mc5-ptabs { display: none; }
@media (min-width: 901px) {
  .mc5.mc5 .mc5-ptabs {
    display: flex; gap: 4px; position: sticky; top: 0; z-index: 5;
    background: var(--mc5-paper); margin: 0 -18px 14px; padding: 12px 18px 10px;
    border-bottom: 1px solid var(--mc5-line);
  }
}
.mc5.mc5 .mc5-ptabs button,
.mc5.mc5 .mc5-folha .tabs button {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 6px;
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--mc5-muted);
  border-radius: var(--mc5-r-sm); background: transparent; position: relative;
}
.mc5.mc5 .mc5-ptabs button.on,
.mc5.mc5 .mc5-folha .tabs button.on,
.mc5.mc5 .mc5-ptabs button.on:hover,
.mc5.mc5 .mc5-folha .tabs button.on:hover { color: var(--mc5-ink); background-color: var(--mc5-paper-2); }
.mc5.mc5 .mc5-ptabs button:hover:not(.on) { color: var(--mc5-ink); }
.mc5.mc5 .mc5-ptabs .pt,
.mc5.mc5 .mc5-folha .tabs .pt {
  position: static; margin: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--mc5-accent);
}

/* ── «Cor e artigos»: stock por cor antes de desenhar ── */
.mc5.mc5 em.ok { color: var(--mc5-accent); }
.mc5.mc5 em.low { color: var(--mc5-amber-ink); }
.mc5.mc5 em.out { color: var(--mc5-warn); }

/* ── 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. */
@media (max-width: 900px) {
  .mc-sheet.mc5 { --mc5-folha-ef: var(--mc5-folha-h, 152px); }
  .mc-sheet.mc5.mc5-teclado { --mc5-folha-ef: min(var(--mc5-folha-h, 152px), calc(var(--mc5-visivel, 100vh) * .55)); }
  .mc-sheet.mc5.mc5-teclado .mc5-folha { height: var(--mc5-folha-ef); }
  .mc5.mc5 .mc5-stagewrap { flex: 1 1 auto; height: auto; min-height: 120px; display: grid; place-items: center; }
  .mc5.mc5 .mc5-stagebox,
  .mc5.mc5 .mc5-stagewrap .mc5-stage,
  .mc5.mc5 .mc5-stagebox .mc5-stage {
    width: min(100%, max(140px, calc(var(--mc5-visivel, 100vh) - 54px - var(--mc5-folha-ef, 152px) - 36px)));
  }

  /* A folha mostra um separador de cada vez. */
  .mc5.mc5 .mc5-folha[data-tab="cor"] > .corpo > #mc5-rail,
  .mc5.mc5 .mc5-folha[data-tab="des"] > .corpo > #mc5-lista { display: block; }
  .mc5.mc5 .mc5-folha .tabs { padding: 0 10px 8px; }
}

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

/* ── Texto: rótulos, «Auto», cor personalizada (protótipo) ── */
.mc5.mc5 .mc5-textbox { gap: 12px; }
.mc5.mc5 .mc5-textbox .inks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc5.mc5 .mc5-textbox .inks button[data-ink]:not(.cauto),
.mc5.mc5 .mc5-textbox .inks .custom { width: 36px; height: 36px; flex: none; }
.mc5.mc5 .mc5-textbox .inks .cauto {
  display: flex; align-items: center; gap: 8px; height: 36px; width: auto;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r-sm); padding: 5px 12px 5px 6px;
  font-size: .78rem; font-weight: 700; color: var(--mc5-ink); background: var(--mc5-paper); box-shadow: none;
}
.mc5.mc5 .mc5-textbox .inks .cauto i {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2);
  background: linear-gradient(135deg, #fff 50%, #0F0F0F 50%);
}
.mc5.mc5 .mc5-textbox .inks .cauto.on,
.mc5.mc5 .mc5-textbox .inks .cauto.on:hover { border: 2px solid var(--mc5-ink); padding: 4.5px 11.5px 4.5px 5.5px; box-shadow: none; background-color: var(--mc5-paper); }

/* ── Avisos, interruptor, botões pequenos e ligação ── */
.mc5.mc5 .mc5-alert {
  border-radius: var(--mc5-r); padding: 11px 14px; font-size: .8rem; line-height: 1.45;
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
}
.mc5.mc5 .mc5-alert b { display: block; }
.mc5.mc5 .mc5-alert.warn { background: var(--mc5-amber-soft); color: var(--mc5-amber-ink); }
.mc5.mc5 .mc5-alert.bad { background: var(--mc5-warn-soft); color: var(--mc5-warn-ink); }
.mc5.mc5 .mc5-alert.ok { background: var(--mc5-accent-soft); color: var(--mc5-accent-ink); }
.mc5.mc5 .mc5-sbtn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 8px 12px; border-radius: var(--mc5-r-sm); border: 1.5px solid var(--mc5-line);
  font-weight: 700; font-size: .78rem; color: var(--mc5-ink); background: var(--mc5-paper);
}
.mc5.mc5 .mc5-sbtn:hover, .mc5.mc5 .mc5-sbtn:focus { border-color: var(--mc5-ink); background-color: var(--mc5-paper); }
.mc5.mc5 .mc5-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r); padding: 11px 14px;
  text-align: left; margin-top: 10px; background: var(--mc5-paper);
}
.mc5.mc5 .mc5-toggle:hover, .mc5.mc5 .mc5-toggle:focus { background-color: var(--mc5-paper); border-color: var(--mc5-muted); }
.mc5.mc5 .mc5-toggle span { display: flex; flex-direction: column; }
.mc5.mc5 .mc5-toggle b { font-size: var(--mc5-t-body-size); font-weight: 700; }
.mc5.mc5 .mc5-toggle small { font-size: var(--mc5-t-small-size); color: var(--mc5-muted); }
.mc5.mc5 .mc5-switch {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #A8A8A4; background: var(--mc5-paper);
  position: relative; flex: none; display: grid; place-items: center;
}
.mc5.mc5 .mc5-toggle[aria-checked="true"] .mc5-switch { background: var(--mc5-ink); border-color: var(--mc5-ink); }
.mc5.mc5 .mc5-toggle[aria-checked="true"] .mc5-switch::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid var(--mc5-paper); border-bottom: 2px solid var(--mc5-paper);
  transform: translateY(-1px) rotate(-45deg);
}
.mc5.mc5 .mc5-q { font-weight: 700; }
.mc5.mc5 .mc5-q.good { color: var(--mc5-accent); }
.mc5.mc5 .mc5-q.mid { color: var(--mc5-amber-ink); }
.mc5.mc5 .mc5-q.low { color: var(--mc5-warn); }
.mc5.mc5 .mc5-pos button svg, .mc5.mc5 .mc5-pos button .ph { width: 15px; height: 15px; }
.mc-toast button.mc-toast__acao { border: 0; cursor: pointer; font: inherit; }

/* 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. */
.mc5.mc5 .mc5-ed .mc5-nudge, .mc5.mc5 .mc5-ed .mc5-nudge.on { display: none; }

/* ── Revisão (protótipo): várias cores, verificações, duas colunas ── */
.mc5.mc5 .mc5-rev .rh { gap: 6px; }
.mc5.mc5 .mc5-rev .rh .mc5-rev-save.is-saved { color: var(--mc5-accent-ink); }
.mc5.mc5 .mc5-rev .rb { display: grid; gap: 18px; align-content: start; }
.mc5.mc5 .mc5-rev .mc5-ladder { margin-top: 0; }
.mc5.mc5 .mc5-rev .mc5-guialink { margin-left: auto; font-size: .78rem; font-weight: 700; }
/* As notas moram agora na revisão, nas duas larguras (protótipo). */
.mc5.mc5 #mc5-notes-wrap { display: none; }
@media (min-width: 901px) {
  .mc5.mc5 .mc5-rev .sheet { width: min(100%, 980px); }
  .mc5.mc5 .mc5-rev .rb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding: 18px 22px; }
}

/* ── Pega de redimensionar: uma bolinha no canto (protótipo) ── */
.mc5-stage .mc5-h.br {
  width: calc(16px / var(--zs, 1)); height: calc(16px / var(--zs, 1)); border-radius: 50%;
  right: calc(-9px / var(--zs, 1)); bottom: calc(-9px / var(--zs, 1));
  border-width: calc(1.5px / var(--zs, 1)); background: #fff;
}

/* ── Menu de ajuda (folha em telemóvel, janela no computador) ── */
.mc5.mc5-helpwrap { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: flex-end; justify-content: center; }
.mc5.mc5-helpwrap .bg { position: absolute; inset: 0; background: rgba(15, 15, 15, .4); }
.mc5.mc5-helpwrap .box {
  position: relative; width: 100%; max-height: 85%; display: flex; flex-direction: column;
  background: var(--mc5-paper); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(15, 15, 15, .14);
}
.mc5.mc5-helpwrap .hh {
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--mc5-line);
  padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
}
.mc5.mc5-helpwrap .hh h2 { flex: 1; margin: 0; font-size: var(--mc5-t-title-s-size); font-weight: 600; letter-spacing: -.02em; }
.mc5.mc5-helpwrap .hb {
  overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.mc5.mc5-helpwrap section { display: flex; flex-direction: column; gap: 10px; }
.mc5.mc5-helpwrap h3 { margin: 0; font-size: var(--mc5-t-body-size); font-weight: 700; }
.mc5.mc5-helpwrap .hacts { display: flex; flex-direction: column; gap: 8px; }
.mc5.mc5-helpwrap .hact {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r); padding: 12px 14px;
  background: var(--mc5-paper); color: var(--mc5-ink); text-decoration: none; transition: border-color .15s;
}
.mc5.mc5-helpwrap .hact:hover, .mc5.mc5-helpwrap .hact:focus { border-color: var(--mc5-ink); background-color: var(--mc5-paper); }
.mc5.mc5-helpwrap .hact b { display: block; font-size: var(--mc5-t-body-size); font-weight: 700; }
.mc5.mc5-helpwrap .hact small { display: block; font-size: var(--mc5-t-small-size); color: var(--mc5-muted); }
.mc5.mc5-helpwrap .hact .hi {
  width: 40px; height: 40px; flex: none; border-radius: var(--mc5-r-sm); background: var(--mc5-paper-2);
  display: grid; place-items: center; color: var(--mc5-ink);
}
.mc5.mc5-helpwrap .hact .hi svg { width: 18px; height: 18px; }
.mc5.mc5-helpwrap .hact .hi.matt { background: var(--mc5-accent); }
.mc5.mc5-helpwrap .hact .hi.matt img { width: 28px; height: 28px; }
.mc5.mc5-helpwrap .hact.main, .mc5.mc5-helpwrap .hact.main:focus { background: var(--mc5-ink); border-color: var(--mc5-ink); color: var(--mc5-paper); }
.mc5.mc5-helpwrap .hact.main:hover { background-color: var(--mc5-ink-2); }
.mc5.mc5-helpwrap .hact.main small { color: rgba(255, 255, 255, .72); }
.mc5.mc5-helpwrap .hact.main .hi { background: rgba(255, 255, 255, .14); color: var(--mc5-paper); }
.mc5.mc5-helpwrap .hvideo { border-radius: var(--mc5-r); overflow: hidden; background: var(--mc5-ink); aspect-ratio: 16 / 9; }
.mc5.mc5-helpwrap .hvideo[hidden] { display: none; }
.mc5.mc5-helpwrap .hvideo video { display: block; width: 100%; height: 100%; }
.mc5.mc5-helpwrap .steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.mc5.mc5-helpwrap .steps li {
  counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  font-size: var(--mc5-t-body-size); line-height: 1.45; color: var(--mc5-ink-2);
}
.mc5.mc5-helpwrap .steps li::before {
  content: counter(s); width: 24px; height: 24px; border-radius: 6px; background: var(--mc5-ink); color: var(--mc5-paper);
  font-size: .72rem; font-weight: 800; display: grid; place-items: center;
}
.mc5.mc5-helpwrap .steps b { color: var(--mc5-ink); }
.mc5.mc5-helpwrap .tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--mc5-t-body-size); color: var(--mc5-ink-2); line-height: 1.45; }
.mc5.mc5-helpwrap .mc5-garantia { display: flex; gap: 8px; font-size: var(--mc5-t-small-size); color: var(--mc5-muted); align-items: flex-start; margin: 0; }
.mc5.mc5-helpwrap .mc5-garantia svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--mc5-accent); }
.mc5.mc5-helpwrap .hlinks { display: flex; gap: 8px; flex-wrap: wrap; }
.mc5.mc5-helpwrap .hlinks a {
  font-size: .78rem; font-weight: 700; color: var(--mc5-ink); text-decoration: none;
  border: 1.5px solid var(--mc5-line); border-radius: var(--mc5-r-sm); padding: 11px 15px;
}
.mc5.mc5-helpwrap .hlinks a:hover { border-color: var(--mc5-ink); }
@media (min-width: 901px) {
  .mc5.mc5-helpwrap { align-items: center; }
  .mc5.mc5-helpwrap .box { max-width: 460px; border-radius: var(--mc5-r); max-height: 80%; }
}

/* ── Passo a passo: destaque e cartão ── */
.mc5.mc5-tourspot {
  position: fixed; z-index: 100020; border-radius: var(--mc5-r); pointer-events: none;
  box-shadow: 0 0 0 2px var(--mc5-accent), 0 0 0 9999px rgba(15, 15, 15, .55);
  transition: all .3s var(--mc5-ease);
}
.mc5.mc5-tourspot[hidden], .mc5.mc5-tourcard[hidden] { display: none; }
.mc5.mc5-tourcard {
  position: fixed; z-index: 100021; width: min(340px, calc(100vw - 24px));
  background: var(--mc5-paper); border-radius: var(--mc5-r); box-shadow: 0 10px 34px rgba(15, 15, 15, .22);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  transition: top .3s var(--mc5-ease), left .3s var(--mc5-ease);
}
.mc5.mc5-tourcard .tstep { font-size: var(--mc5-t-small-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mc5-muted); }
.mc5.mc5-tourcard h3 { margin: 0; font-size: var(--mc5-t-title-s-size); font-weight: 600; letter-spacing: -.02em; }
.mc5.mc5-tourcard p { margin: 0; font-size: var(--mc5-t-body-size); color: var(--mc5-ink-2); line-height: 1.5; }
.mc5.mc5-tourcard .twait { font-size: var(--mc5-t-small-size); font-weight: 600; color: var(--mc5-amber-ink); background: var(--mc5-amber-soft); border-radius: 8px; padding: 8px 10px; }
.mc5.mc5-tourcard .tbar { display: flex; gap: 4px; }
.mc5.mc5-tourcard .tbar i { flex: 1; height: 4px; border-radius: 2px; background: var(--mc5-line); }
.mc5.mc5-tourcard .tbar i.on { background: var(--mc5-accent); }
.mc5.mc5-tourcard .tacts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mc5.mc5-tourcard .tacts .sp { flex: 1; }
.mc5.mc5-tourcard .tskip { font-size: .78rem; font-weight: 700; color: var(--mc5-muted); text-decoration: underline; text-underline-offset: 2px; padding: 10px 0; }
.mc5.mc5-tourcard .tb { font-size: .82rem; font-weight: 700; border-radius: var(--mc5-r-sm); padding: 10px 14px; border: 1.5px solid var(--mc5-line); background: var(--mc5-paper); color: var(--mc5-ink); }
.mc5.mc5-tourcard .tb.next, .mc5.mc5-tourcard .tb.next:hover, .mc5.mc5-tourcard .tb.next:focus { background-color: var(--mc5-ink); border-color: var(--mc5-ink); color: var(--mc5-paper); }
.mc5.mc5-tourcard .tb:disabled, .mc5.mc5-tourcard .tb.next:disabled { background: var(--mc5-line); border-color: var(--mc5-line); color: var(--mc5-muted); cursor: not-allowed; }

/* 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. */
@media (max-width: 900px) {
  .mc5.mc5 .mc5-stagewrap > .mc5-sides { top: 8px; left: max(8px, env(safe-area-inset-left, 0px)); padding: 2px; gap: 2px; border-width: 1.5px; }
  .mc5.mc5 .mc5-stagewrap > .mc5-sides button { min-height: 32px; padding: 0 12px; font-size: .78rem; font-weight: 700; border-radius: 6px; }
  .mc5.mc5 .mc5-stagewrap > .mc5-sides .dot { top: 4px; right: 4px; width: 5px; height: 5px; }
}

/* 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. */
.mc5.mc5 .mc5-stage .mc5-tapcta { font-size: clamp(8px, 10cqw, 14px); gap: clamp(2px, 3cqw, 6px); padding: clamp(4px, 6cqw, 12px); }
.mc5.mc5 .mc5-stage .mc5-tapcta i { font-size: clamp(14px, 22cqw, 30px); }
.mc5.mc5 .mc5-stage .mc5-tapcta small { font-size: clamp(7px, 6.5cqw, 11px); }
.mc5.mc5 .mc5-textbox .mc5-pos { margin-top: 0; }

/* ── 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. */
.mc5.mc5 .mc5-stage .mc5-tapcta { font-size: min(10cqw, 14px); gap: min(3cqw, 6px); padding: min(6cqw, 12px); }
.mc5.mc5 .mc5-stage .mc5-tapcta i { font-size: min(22cqw, 30px); }
.mc5.mc5 .mc5-stage .mc5-tapcta small { font-size: min(6.5cqw, 11px); }
.mc5.mc5 .mc5-card > .mc5-pos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mc5.mc5 .mc5-card > .mc5-pos button { justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   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ó %).
   ═══════════════════════════════════════════════════════════════════════ */

.mc-sheet.mc5 .mc-sheet__panel {
  position: absolute; inset: 0; max-height: none; min-height: 0; height: auto;
  border-radius: 0; transform: none; opacity: 1; box-shadow: none; overflow: visible; background: #F9F9F9;
}
/* 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. */

/* ── A grelha ── */

/* ── Palco ── */
/* pedido do Rafael (17/10): no telemóvel o Frente/Costas mais pequeno */

/* zonas e camadas, com as medidas do protótipo */

/* ── Folha ── */

/* ── Barra ── */

/* teclado aberto (telemóvel): sai a barra e a folha fica com 55% */
/* 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 */

/* ── Conteúdo do painel ── */
/* os avisos da imagem (avisosDaImagem) com o aspeto do protótipo */

/* ── Revisão: um ecrã inteiro, nas duas larguras ── */

/* ── Computador: folha à direita (420 px) e a barra por baixo dela ── */
/* o tema força um contorno de 1 px cinzento nos campos (com !important) */
/* «Remover esta área»: discreto, em cinzento, por baixo da lista */

/* ── Pedidos do Rafael, 18/10 ── */
/* «Carrega aqui o teu design»: só o texto, dentro do tracejado e na cor dele */
/* ícone da área no rádio: a silhueta do artigo com a área a tracejado */
/* a dica do palco é um botão: leva à lista das áreas (as zonas saíram da foto) */
/* quatro âncoras nos cantos da arte (pedido do Rafael, 18/10), em vez da bolinha só num canto */
/* o editor acompanha a parte visível do ecrã (teclado do iPhone): ver publicaAlturaVisivel() */
/* a linha por baixo do preço parte em duas em vez de ser cortada («inclui +3,00 € · +15,00 € únicos») */