/* Fontes do tema Flutuante (hospedadas no app — o PNG não depende do Google).
   Anton = nome do produto (alto e condensado); Archivo Black = números do preço
   (gordos). Subset latin+latin-1 já cobre acentos do português (ç, ã, é...). */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/anton.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/archivo-black.woff2") format("woff2");
}

:root {
  /* Brand palette — pulled from the "Mercado Studio" logo (orange tag + navy pen). */
  --brand-orange: #f26c1f;
  --brand-orange-strong: #d65b15;
  --brand-orange-soft: #ffe7d6;
  --brand-blue: #1e5ba6;
  --brand-blue-strong: #154582;
  --brand-blue-soft: #e8f1fb;
  --brand-blue-line: #5b9bd5;

  /* Semantic tokens (everything else in the app references these). */
  --bg: #eef3f9;
  --surface: #ffffff;
  --surface-strong: #f4f7fb;
  --ink: #1d2a3a;
  --muted: #6c7a8c;
  --line: #d4dde9;
  --accent: var(--brand-orange);
  --accent-strong: var(--brand-orange-strong);
  --accent-soft: var(--brand-orange-soft);
  --accent-blue: var(--brand-blue);
  --accent-blue-strong: var(--brand-blue-strong);
  --danger: #e64545;
  --sidebar: #1d2a3a;
  --sidebar-soft: #28384c;
  --yellow: #ffd400;
  --red: #d70c12;
  --green: #1ca465;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --shadow: 0 18px 42px rgba(30, 91, 166, 0.14);
  --shadow-sm: 0 4px 12px rgba(30, 91, 166, 0.08);
  font-family: "Hanken Grotesk", Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
  /* Fundo/cor explícitos pro dropdown nativo ficar legível e consistente. */
  background-color: #ffffff;
  color: var(--ink);
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 rgba(30, 91, 166, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 7px;
  /* Subtle shadow so it pops against the white topbar */
  filter: drop-shadow(0 2px 4px rgba(30, 91, 166, 0.18));
}
/* Wordmark "Mercado Studio" usado na aba (substitui o texto) */
.app-tab-wordmark {
  height: 26px;
  width: auto;
  display: block;
}

/* ── App-level tabs (Mercado Studio / Cartaz A4) ── */
.app-tabs {
  display: flex;
  gap: 4px;
  margin-left: 18px;
  height: 100%;
  align-items: flex-end;
}

.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  border-radius: 8px 8px 0 0;
}

.app-tab:hover {
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

.app-tab.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
  background: var(--accent-soft);
}

.app-tab .tab-icon {
  font-size: 16px;
  line-height: 1;
}

.app-tab-pane {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Force-hide regardless of element type (workspace's display:grid otherwise wins). */
[id="appTabEncarte"][hidden],
[id="appTabCartaz"][hidden],
.app-tab-pane[hidden] {
  display: none !important;
}

#cartazFrame {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 68px);
  border: 0;
  background: #0f172a;
}

/* Hide encarte-only top buttons (Baixar PNG, save status) when viewing Cartaz tab. */
.top-actions.on-cartaz-tab .save-status,
.top-actions.on-cartaz-tab #downloadButton,
.top-actions.on-cartaz-tab #undoButton,
.top-actions.on-cartaz-tab #resetButton {
  display: none;
}

/* Desfazer fica apagadinho quando não há nada pra desfazer.
   (No mobile o ↩ segue visível de propósito: lá não tem Ctrl+Z.) */
.ghost-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.nav-item,
.tab,
.segment,
.ghost-button,
.primary-button,
.secondary-button,
.danger-button,
.rail-button {
  border: 0;
  min-height: 36px;
}

.nav-item {
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  border-bottom: 3px solid transparent;
}

.nav-item.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.save-status.saved {
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

.save-status.saved.cloud {
  color: #fff;
  background: linear-gradient(135deg, #1a8b3a 0%, #2bbf57 100%);
}

.save-status.pending {
  color: #6c5b00;
  background: #fff5cc;
}

.save-status.error {
  color: #b3261e;
  background: #fdecea;
}

.save-status:empty {
  display: none;
}

.ghost-button {
  width: 38px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 20px;
  color: var(--brand-blue);
  transition: background .15s, border-color .15s;
}

.ghost-button:hover {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue-line);
}

.primary-button,
.secondary-button,
.danger-button {
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform .12s, box-shadow .15s, background .15s;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 91, 166, 0.18);
}

.primary-button {
  background: var(--brand-orange);
}

.primary-button:hover {
  background: var(--brand-orange-strong);
}

.secondary-button {
  background: var(--brand-blue);
}

.secondary-button:hover {
  background: var(--brand-blue-strong);
}

.danger-button {
  background: var(--danger);
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.sidebar {
  grid-row: 1 / -1;
}

.preview-stage {
  grid-column: 2;
  grid-row: 1;
}

.editor-panel {
  grid-column: 2;
  grid-row: 2;
}

.topnav-spacer {
  flex: 1;
}

.sidebar-section-title {
  margin: 8px 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: #f4f7fb;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rail {
  background: #171a1f;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-button {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: transparent;
  color: #c6cbd4;
  font-size: 25px;
}

.rail-button.active,
.rail-button:hover {
  color: #fff;
  background: var(--sidebar-soft);
}

.sidebar {
  background: var(--sidebar);
  color: #f4f7fb;
  padding: 18px 16px;
  overflow: auto;
}

.product-search-card,
.search-results-card {
  border: 1px solid var(--brand-blue);
  background: linear-gradient(180deg, var(--brand-blue-strong), var(--brand-blue));
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}

.sidebar-tabs.compact {
  margin: -2px -2px 12px;
  border-bottom: 0;
}

/* Vitrine de destaques na sidebar (abaixo do buscador) */
.destaque-showcase {
  margin-bottom: 16px;
}
.destaque-showcase[hidden] { display: none; }
.destaque-showcase-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: #eaf2ff;
}
.destaque-showcase-head p {
  margin: 2px 0 10px;
  font-size: 11px;
  color: rgba(234, 242, 255, 0.65);
}
/* Zona premium — moldura branca agrupando banner + vitrine */
.premium-zone {
  border: 3px solid #ffffff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.premium-zone[hidden] { display: none; }

/* Banner da logo premium — fundo branco que se funde com a imagem. Clicável → planos */
.sidebar-premium-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sidebar-premium-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* Cada tema tem seu próprio bloco (label + carrossel horizontal) */
.destaque-showcase-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.destaque-theme-label {
  font-size: 11px;
  font-weight: 900;
  color: #ffd27a;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Carrossel HORIZONTAL contínuo por tema — cards deslizam devagar */
.destaque-carousel {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.destaque-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: max-content;
}
.destaque-track.is-animated {
  animation: destaque-scroll linear infinite;  /* duration vem inline do JS */
  will-change: transform;
}
.destaque-carousel:hover .destaque-track.is-animated {
  animation-play-state: paused;  /* pausa no hover pra clicar com calma */
}
@keyframes destaque-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* lista duplicada → loop perfeito */
}

/* Card de destaque (thumb em cima + nome embaixo) — um pouco maior */
.destaque-card {
  flex-shrink: 0;
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.destaque-card:hover {
  border-color: var(--brand-orange, #f26c1f);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.destaque-card.active {
  border-color: var(--brand-orange, #f26c1f);
  box-shadow: 0 0 0 2px rgba(242, 108, 31, 0.35);
}
.destaque-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
.destaque-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #eaf2ff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Selo "premium" na parte inferior do card */
.destaque-card-premium {
  display: block;
  width: 64px;
  height: auto;
  margin: 1px auto 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.paste-label {
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}

.paste-example {
  display: block;
  color: #d9e2ef;
  font-size: 12px;
  margin-bottom: 8px;
}

.product-search-card textarea {
  width: 100%;
  min-height: 126px;
  resize: vertical;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  line-height: 1.55;
  background: #fff;
  color: #10151b;
  box-shadow: inset -8px 0 0 #c0c2c6;
}

.search-products-button,
.add-all-button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  margin-top: 8px;
}

.search-products-button:hover,
.add-all-button:hover {
  background: var(--brand-orange-strong);
}

.search-products-button.is-loading {
  background: #6b7482;
}

.search-results-card summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  color: #f8fbff;
}

.search-results-card p {
  margin: 8px 0 10px;
  color: #d5dce6;
  font-size: 12px;
}

.new-badge {
  float: right;
  margin-top: 3px;
  background: #ff1515;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 900;
}

.add-all-button {
  min-height: 34px;
  font-size: 13px;
  margin: 0;
}

/* Linha com "Adicionar todos" + "Limpar lista". */
.search-results-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.search-results-actions .add-all-button {
  flex: 1 1 auto;
}
.clear-all-button {
  flex-shrink: 0;
  background: #fff;
  color: #c0392b;
  border: 1px solid #f0b7ad;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  min-height: 34px;
  transition: background 0.1s ease, color 0.1s ease;
}
.clear-all-button:hover {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}

.search-results-list {
  display: grid;
  gap: 8px;
}

.search-result-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  background: #fff;
  color: #27313d;
  border: 1px solid #d7dde5;
  border-radius: 7px;
  padding: 8px;
}

/* Botão "✕" pequeno no canto pra remover só este item da lista. */
.remove-search-result {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 53, 69, 0.08);
  color: #c0392b;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, transform 0.08s ease;
  z-index: 2;
}
.remove-search-result:hover {
  background: #c0392b;
  color: #fff;
  transform: scale(1.08);
}

.search-result-item img {
  width: 92px;
  height: 72px;
  object-fit: contain;
  border-radius: 6px;
  background-color: #f4f6f8;
  background-image:
    linear-gradient(45deg, #e3e7ed 25%, transparent 25%),
    linear-gradient(-45deg, #e3e7ed 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e3e7ed 75%),
    linear-gradient(-45deg, transparent 75%, #e3e7ed 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.search-result-name {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
}

.search-result-price {
  margin: 0 0 8px;
  font-size: 12px;
  color: #3f4a57;
}

.cutout-status {
  margin: -3px 0 8px;
  font-size: 11px;
  color: #0f7b43;
  font-weight: 800;
}

.result-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.add-search-result,
.swap-image-button,
.text-tool-button {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-weight: 900;
  padding: 0 10px;
}

.add-search-result {
  background: #39a846;
}

.swap-image-button {
  background: #1476f2;
  font-size: 12px;
}

.sidebar-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #3c424a;
}

.tab {
  background: transparent;
  color: #bec6d0;
  padding: 0 6px;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: #fff;
  border-bottom-color: #57a7ff;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 6px;
  margin-bottom: 18px;
}

.search-row input,
.search-row button {
  height: 36px;
  border: 0;
}

.search-row input {
  border-radius: 6px 0 0 6px;
  padding: 0 10px;
}

.search-row button {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 800;
  transition: background .15s;
}

.search-row button:hover {
  background: var(--brand-orange-strong);
}

.search-row input {
  background: var(--surface);
  color: var(--ink);
}

.search-row input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-orange);
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 8px;
  color: #e5edf6;
  text-align: left;
  transition: border-color .15s, transform .12s, background .15s;
}

.theme-card:hover {
  border-color: var(--brand-orange);
  transform: translateY(-1px);
}

.theme-card.active {
  border-color: var(--brand-orange);
  background: rgba(242, 108, 31, 0.10);
  box-shadow: 0 0 0 2px rgba(242, 108, 31, 0.35);
}

.theme-thumb {
  height: 84px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.theme-thumb span {
  font-size: 23px;
}

.theme-name {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.theme-meta {
  color: #9fa7b3;
  font-size: 12px;
}

.preview-stage {
  padding: 18px 22px;
  overflow: auto;
  transition: padding-right 0.22s ease-out;
}

/* Quando o painel de produto está aberto, empurra o conteúdo do preview para a
   esquerda para centralizar o poster no espaço visível restante. O sidebar é
   position:fixed (380px de largura) então ficaria por cima — esse padding evita
   sobreposição visual e o auto-zoom recalcula pra caber. */
body.has-product-sidebar .preview-stage {
  padding-right: calc(22px + min(380px, 92vw));
}

.preview-toolbar {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;   /* alinhado à esquerda, lado oposto do painel de produto */
  flex-wrap: wrap;               /* quebra linha se faltar espaço em monitores menores */
  padding-right: 16px;           /* respiro à direita pra não colar no painel quando aberto */
}

/* Divisor entre o grupo de aparência (etiqueta/fundos/logo/destaque) e os
   toggles (rodapé/capa), espelhando o divisor que o zoom já tem — agrupa visualmente. */
.preview-toolbar .toolbar-art-btn + .toggle-field {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid #d0d5dd;
}

/* Divisor de abertura do grupo de aparência: separa dos campos de layout
   (Produtos por página / Colunas) que vêm antes. */
.preview-toolbar .compact-field + .toolbar-art-btn {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid #d0d5dd;
}

/* ── Controles de zoom da prévia ── */
.preview-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  border-left: 1px solid #d0d5dd;
  padding-left: 10px;
}
.zoom-icon {
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.zoom-label {
  font-size: 11px;
  font-weight: 700;
  color: #46505c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: #eef1f5;
  color: #46505c;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.zoom-btn:hover { background: #d6dbe3; }
.zoom-select {
  height: 26px;
  padding: 0 4px 0 8px;
  border-radius: 6px;
  border: 1px solid #cfd5de;
  background: #fff;
  color: #46505c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 110px;
  transition: border 0.1s, background 0.1s;
}
.zoom-select:hover { border-color: #a8b1bd; }
.zoom-select:focus { outline: 2px solid #1a6cff; outline-offset: 1px; }
.zoom-select.is-auto {
  background: #e8effe;
  color: #1a6cff;
  border-color: #b6cdff;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  background: #dce1e8;
  border-radius: 8px;
}

.segment {
  height: 32px;
  border-radius: 6px;
  padding: 0 13px;
  background: transparent;
  color: #46505c;
}

.segment.active {
  background: #fff;
  color: #10151b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.compact-field,
.toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f5966;
  font-size: 13px;
}

.compact-field input {
  width: 54px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: var(--surface);
  color: var(--ink);
}

.compact-field select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.compact-field input:focus,
.compact-field select:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(242, 108, 31, 0.18);
}

.toolbar-button {
  height: 32px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Botões da toolbar onde a imagem inteira É o botão (PNG já contém ícone + texto). */
.toolbar-button-img {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  height: 20px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.toolbar-button-img img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 6px;
}
.toolbar-button-img:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.toolbar-button-img:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Botões de aparência da toolbar (etiqueta, fundos, logo, destaque):
   ícone + texto em HTML — legíveis, leves e no mesmo estilo dos demais
   controles da toolbar. Substituem os PNGs pesados antigos. */
.toolbar-art-btn {
  height: 34px;
  padding: 0 12px 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  color: #1e3a5f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 31, 51, 0.06);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Chip do ícone: pequeno quadrado arredondado tingido pela categoria — é a
   assinatura visual do grupo. Cada botão recebe sua cor logo abaixo. */
.toolbar-art-btn .tb-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 7px;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(16, 31, 51, 0.04);
}
.toolbar-art-btn:hover {
  transform: translateY(-1px);
  border-color: #cdd6e4;
  box-shadow: 0 3px 8px rgba(16, 31, 51, 0.12);
}
.toolbar-art-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 31, 51, 0.08);
}
.toolbar-art-btn:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

/* Cor do chip por função — laranja(etiqueta) · verde(boxes) · azul(fundo) ·
   roxo(logo) · rosa(destaque). Dá identidade ao grupo sem colorir o botão todo. */
#openPriceTagPickerButton  .tb-ico { background: #ffe8d7; }
#openTileBgPickerButton    .tb-ico { background: #ddf3e8; }
#openPosterBgPickerButton  .tb-ico { background: #e1ecff; }
#openLogoPickerButton      .tb-ico { background: #ece5fd; }
#openHeaderArtPickerButton .tb-ico { background: #fde3ef; }

.toolbar-button:hover {
  border-color: var(--brand-orange);
  background: var(--accent-soft);
  color: var(--brand-orange-strong);
}

.poster-wrap {
  display: grid;
  place-items: start center;
  padding: 20px 0;
  transform-origin: top center;   /* fallback caso browser não suporte zoom */
}

/* ARTBOARD: largura canônica FIXA por formato (não responsiva). É o que garante
   que o layout interno (fontes cqw, etiquetas, grade) seja IDÊNTICO em qualquer
   tela — desktop e mobile montam o mesmo pôster. O ajuste ao tamanho da tela é
   feito SÓ pelo display (zoom/scale do .poster-wrap), nunca relayoutando o pôster.
   Trocar estes valores reescala TODO o pôster proporcionalmente. */
.poster {
  width: var(--artboard-w, 720px);
  aspect-ratio: 4 / 5;
  background: #ffd400;
  color: #111;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
  container-type: inline-size;
  /* BLINDAGEM: o pôster mantém a fonte original (a UI virou Hanken Grotesk).
     O PNG é desenhado lendo a font-family do DOM — então NÃO pode herdar a
     fonte nova da interface, senão o encarte exportado mudaria. */
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

.poster.format-feed-4-5 {
  --artboard-w: 720px;
  aspect-ratio: 4 / 5;
}

.poster.format-feed-square {
  --artboard-w: 720px;
  aspect-ratio: 1 / 1;
}

.poster.format-story {
  --artboard-w: 540px;
  aspect-ratio: 9 / 16;
}

.poster.format-a4 {
  --artboard-w: 680px;
  aspect-ratio: 210 / 297;
}

.poster.format-tv {
  --artboard-w: 1000px;
  aspect-ratio: 16 / 9;
}

/* TV (16:9) is much wider than tall, so the cqw-based header fonts ("16cqw" for h1)
   become huge and inflate the header zone. Constrain the header strip and shrink the
   kicker/title fonts so products get more room. */
.poster.format-tv .poster-header {
  min-height: 14%;
  max-height: 22%;
}
.poster.format-tv .poster-kicker { font-size: 2.6cqw; }
.poster.format-tv .poster h1    { font-size: 7.5cqw; }
.poster.format-tv .poster-header-image { height: 88%; }

/* Square (1:1) feed: cabeçalho padrão fica grande demais e rouba espaço dos produtos.
   Encolhe a faixa e os fontes pra dar mais destaque às ofertas. */
.poster.format-feed-square .poster-header {
  min-height: 20%;
  max-height: 26%;
}
.poster.format-feed-square .poster-kicker { font-size: 4.6cqw; }
.poster.format-feed-square .poster h1    { font-size: 13cqw; }
.poster.format-feed-square .poster-header-image { height: 90%; }

/* ─────────────────────────────────────────────────────────────────────────
   Grids densos (14 e 16 produtos) no formato QUADRADO
   No 1:1 a altura é limitada — encolhe texto/etiqueta pra sobrar mais
   espaço pra IMAGEM do produto, que é o que vende.
   ───────────────────────────────────────────────────────────────────────── */
.poster.format-feed-square .product-grid[data-grid="4x4"] .offer-tile {
  padding: 3px;
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .product-name {
  font-size: clamp(5px, 5.5cqi, 10px);
  margin-top: 2px;
  -webkit-line-clamp: 1;  /* só 1 linha pra não roubar altura da imagem */
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .product-note {
  font-size: clamp(5px, 3cqi, 8px);
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .price-row {
  padding: 1px 3px;
  margin-top: 2px;
  border-radius: 4px;
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .price {
  font-size: clamp(10px, 11cqi, 22px);
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .currency {
  font-size: clamp(6px, 5cqi, 11px);
}
.poster.format-feed-square .product-grid[data-grid="4x4"] .price small {
  font-size: 0.55em;
}

.poster.has-custom-bg {
  background-image: var(--custom-bg);
  background-size: cover;
  background-position: center top;
}

/* User-uploaded poster background image — wins over the theme background.
   Stays BEHIND the header, tiles and footer because they are flow children. */
.poster.has-poster-bg-image {
  background-image: var(--poster-bg-image) !important;
  background-size: var(--poster-bg-fit, cover) !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  background-color: #000;
}

.poster.has-custom-bg .poster-header {
  background: transparent;
  min-height: var(--custom-header-h, 22%);
  visibility: hidden;
}

.poster.has-custom-bg .poster-header::before { display: none; }

.theme-thumb.theme-custom {
  background-size: cover;
  background-position: center;
  background-color: #444;
}

.theme-card { position: relative; }

.theme-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.theme-add-card { border-style: dashed !important; }

.theme-add-thumb {
  background: var(--surface-strong) !important;
  color: var(--accent) !important;
  font-size: 36px !important;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.custom-theme-dialog { width: min(540px, 100%); }

.custom-theme-body {
  padding: 18px 20px;
  overflow: auto;
  display: grid;
  gap: 14px;
}

.custom-theme-field {
  display: grid;
  gap: 6px;
}

.custom-theme-field span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.custom-theme-field input[type="text"],
.custom-theme-field input[type="file"] {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
}

.custom-theme-field input[type="range"] { accent-color: var(--accent); }

.custom-theme-help {
  font-size: 11px;
  color: var(--muted);
}

.custom-theme-preview {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 280px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.ct-preview-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

.ct-preview-marker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 2px dashed #1d6cd6;
  background: rgba(29, 108, 214, 0.18);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  padding-bottom: 4px;
}

.custom-theme-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}


.poster-header {
  min-height: 18%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5% 3%;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, #c90000 0%, #ff2c15 58%, #970000 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.poster-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 20%, rgba(255, 255, 255, 0.18) 20% 24%, transparent 24%),
    radial-gradient(circle at 20% 20%, rgba(255, 220, 0, 0.4), transparent 30%);
  z-index: -1;
}

.poster-kicker {
  display: block;
  font-size: 5.5cqw;
  font-weight: 900;
  line-height: 1;
  text-transform: lowercase;
}

.poster h1 {
  margin: 0;
  font-size: 16cqw;
  line-height: 0.86;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.26);
}

.discount-symbol {
  font-size: 13cqw;
  font-weight: 900;
  color: #ffd400;
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.discount-symbol.has-logo {
  transform: none;
  width: 34%;
  height: 95%;
}

.poster-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.logo-field {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.logo-field > span {
  color: #596575;
  font-size: 12px;
  font-weight: 700;
}

.logo-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-color-field {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.footer-color-field > span {
  color: #596575;
  font-size: 12px;
  font-weight: 700;
}

.tile-opacity-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.tile-opacity-field > span {
  color: #596575;
  font-size: 12px;
  font-weight: 700;
}
.tile-opacity-field > span strong {
  color: #f26c1f;
}
.tile-opacity-field input[type="range"] {
  width: 100%;
  accent-color: #f26c1f;
}

/* ── Stepper (− valor +): substitui os sliders crus por um controle compacto.
   O <input type="range"> original continua no DOM (escondido) como fonte do
   valor; os botões mexem nele e disparam "input", então o app.js segue igual. */
.stepper-native { display: none !important; }
.stepper-field {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 31, 51, 0.05);
}
.stepper-btn {
  width: 42px;
  border: 0;
  background: #f4f6fa;
  color: #1e5ba6;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: none;
  transition: background 0.12s ease;
}
.stepper-btn:hover { background: #e7ecf4; }
.stepper-btn:active { background: #d7e0ee; }
.stepper-btn:focus-visible {
  outline: 2px solid var(--brand-orange, #f26c1f);
  outline-offset: -2px;
}
.stepper-value {
  min-width: 72px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #f26c1f;
  border-left: 1px solid #e6eaf0;
  border-right: 1px solid #e6eaf0;
  font-variant-numeric: tabular-nums;
}

.hero-color-field {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.hero-color-field > span {
  color: #596575;
  font-size: 12px;
  font-weight: 700;
}
.hero-color-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-color-controls input[type="color"] {
  width: 38px;
  height: 32px;
  border: 1px solid var(--line, #d8dee6);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
}
.hero-color-presets {
  display: flex;
  gap: 5px;
}
.hero-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
}
.hero-color-swatch:hover {
  transform: scale(1.12);
}

.footer-color-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-color-controls input[type="color"] {
  width: 48px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
  background: var(--surface);
}

.drag-hint {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.poster-logo,
.poster-header-image,
.poster-header > div {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.poster.poster-element-dragging .poster-logo,
.poster.poster-element-dragging .poster-header-image,
.poster.poster-element-dragging .poster-header > div {
  cursor: grabbing;
}

.poster[data-drag-hint]::after {
  content: attr(data-drag-hint);
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  z-index: 50;
  pointer-events: none;
}

.logo-thumb {
  width: 64px;
  height: 64px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  overflow: hidden;
}

.logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-button.compact {
  margin-top: 0;
  padding: 6px 10px;
  background: #eef4ff;
  border: 1px solid #c8daf7;
  border-radius: 5px;
  font-weight: 700;
}

.image-scale-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.image-scale-field {
  flex: 1;
  display: grid;
  gap: 2px;
}

.image-scale-field span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.image-scale-field strong {
  color: var(--ink);
}

.image-scale-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.text-tool-button.auto-fit {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
}

.ean-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: stretch;
}

.ean-row input {
  flex: 1;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
}

.ean-row .text-tool-button {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  background: var(--green);
  color: #fff;
  border: 0;
}

.product-art {
  transition: transform 0.18s ease-out;
  transform-origin: center;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-drag: none;
}

.offer-tile.resizing .product-art,
.offer-tile.moving .product-art {
  transition: none;
}

.offer-tile.resizing,
.offer-tile.moving {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.offer-tile.moving .product-art {
  cursor: grabbing;
}

.offer-tile[data-scale-hint]::before {
  content: attr(data-scale-hint);
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 32, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
}

.text-tool-button.danger {
  background: #ffe6e4;
  color: #bc241a;
  border: 1px solid #f6c6c2;
  width: auto;
  padding: 6px 10px;
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 7px;
  padding-top: 7px;
  min-height: 0;
}

.product-grid[data-grid="1x1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
}
.product-grid[data-grid="2x1"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.product-grid[data-grid="3x1"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
}
.product-grid[data-grid="2x2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="5-left"] {
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="5-left"] > :nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1;
  /* Mantém o destaque mais quadrado (no máx 1.25x mais alto que largo).
     Sem isso, em formatos verticais (A4, feed 4:5) o destaque vira uma
     coluna muito comprida com a foto pequena no meio. */
  aspect-ratio: 1 / 1.25;
  align-self: center;
  max-height: 100%;
}
.product-grid[data-grid="5-right"] {
  grid-template-columns: 1fr 1fr 1.6fr;
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="5-right"] > :nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 3;
  aspect-ratio: 1 / 1.25;
  align-self: center;
  max-height: 100%;
}
.product-grid[data-grid="3x2"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="6-sides"] {
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="6-sides"] > :nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1;
  aspect-ratio: 1 / 1.25;
  align-self: center;
  max-height: 100%;
}
.product-grid[data-grid="6-sides"] > :nth-child(2) {
  grid-row: 1 / span 2;
  grid-column: 4;
  aspect-ratio: 1 / 1.25;
  align-self: center;
  max-height: 100%;
}
.product-grid[data-grid="7-top3"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1.25fr 1fr;
}
.product-grid[data-grid="7-top3"] > :nth-child(1) { grid-row: 1; grid-column: 1 / span 4; }
.product-grid[data-grid="7-top3"] > :nth-child(2) { grid-row: 1; grid-column: 5 / span 4; }
.product-grid[data-grid="7-top3"] > :nth-child(3) { grid-row: 1; grid-column: 9 / span 4; }
.product-grid[data-grid="7-top3"] > :nth-child(4) { grid-row: 2; grid-column: 1 / span 3; }
.product-grid[data-grid="7-top3"] > :nth-child(5) { grid-row: 2; grid-column: 4 / span 3; }
.product-grid[data-grid="7-top3"] > :nth-child(6) { grid-row: 2; grid-column: 7 / span 3; }
.product-grid[data-grid="7-top3"] > :nth-child(7) { grid-row: 2; grid-column: 10 / span 3; }
.product-grid[data-grid="4x2"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="3x3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
}

.product-grid[data-grid="7-side-left"] {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.product-grid[data-grid="7-side-left"] > :nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1;
  aspect-ratio: 1 / 1.25;
  align-self: center;
  max-height: 100%;
}

.product-grid[data-grid="8-top3"] {
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: 1.25fr 1fr;
}
.product-grid[data-grid="8-top3"] > :nth-child(1) { grid-row: 1; grid-column: 1 / span 5; }
.product-grid[data-grid="8-top3"] > :nth-child(2) { grid-row: 1; grid-column: 6 / span 5; }
.product-grid[data-grid="8-top3"] > :nth-child(3) { grid-row: 1; grid-column: 11 / span 5; }
.product-grid[data-grid="8-top3"] > :nth-child(4) { grid-row: 2; grid-column: 1 / span 3; }
.product-grid[data-grid="8-top3"] > :nth-child(5) { grid-row: 2; grid-column: 4 / span 3; }
.product-grid[data-grid="8-top3"] > :nth-child(6) { grid-row: 2; grid-column: 7 / span 3; }
.product-grid[data-grid="8-top3"] > :nth-child(7) { grid-row: 2; grid-column: 10 / span 3; }
.product-grid[data-grid="8-top3"] > :nth-child(8) { grid-row: 2; grid-column: 13 / span 3; }

.product-grid[data-grid="8-bottom3"] {
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: 1fr 1.25fr;
}
.product-grid[data-grid="8-bottom3"] > :nth-child(1) { grid-row: 1; grid-column: 1 / span 3; }
.product-grid[data-grid="8-bottom3"] > :nth-child(2) { grid-row: 1; grid-column: 4 / span 3; }
.product-grid[data-grid="8-bottom3"] > :nth-child(3) { grid-row: 1; grid-column: 7 / span 3; }
.product-grid[data-grid="8-bottom3"] > :nth-child(4) { grid-row: 1; grid-column: 10 / span 3; }
.product-grid[data-grid="8-bottom3"] > :nth-child(5) { grid-row: 1; grid-column: 13 / span 3; }
.product-grid[data-grid="8-bottom3"] > :nth-child(6) { grid-row: 2; grid-column: 1 / span 5; }
.product-grid[data-grid="8-bottom3"] > :nth-child(7) { grid-row: 2; grid-column: 6 / span 5; }
.product-grid[data-grid="8-bottom3"] > :nth-child(8) { grid-row: 2; grid-column: 11 / span 5; }

.product-grid[data-grid="10-side-left"] {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}
.product-grid[data-grid="10-side-left"] > :nth-child(1) {
  grid-row: 1 / span 3;
  grid-column: 1;
  /* span 3 rows seria absurdamente alto — limita aspect e centraliza */
  aspect-ratio: 1 / 1.4;
  align-self: center;
  max-height: 100%;
}

.product-grid[data-grid="11-3top"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1.3fr 1fr 1fr;
}
.product-grid[data-grid="11-3top"] > :nth-child(1) { grid-row: 1; grid-column: 1 / span 4; }
.product-grid[data-grid="11-3top"] > :nth-child(2) { grid-row: 1; grid-column: 5 / span 4; }
.product-grid[data-grid="11-3top"] > :nth-child(3) { grid-row: 1; grid-column: 9 / span 4; }
.product-grid[data-grid="11-3top"] > :nth-child(4) { grid-row: 2; grid-column: 1 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(5) { grid-row: 2; grid-column: 4 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(6) { grid-row: 2; grid-column: 7 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(7) { grid-row: 2; grid-column: 10 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(8) { grid-row: 3; grid-column: 1 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(9) { grid-row: 3; grid-column: 4 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(10) { grid-row: 3; grid-column: 7 / span 3; }
.product-grid[data-grid="11-3top"] > :nth-child(11) { grid-row: 3; grid-column: 10 / span 3; }

.product-grid[data-grid="11-center"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1fr);
}
.product-grid[data-grid="11-center"] > :nth-child(1) {
  grid-row: 2 / span 2;
  grid-column: 2 / span 2;
  aspect-ratio: 1 / 1;
  align-self: center;
  max-height: 100%;
}

.product-grid[data-grid="4x3"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
}

.product-grid[data-grid="4x4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1fr);
}

.product-grid[data-grid="12-4top"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.25fr 1fr 1fr;
}

.product-grid[data-grid="12-4bottom"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr 1.25fr;
}
.product-grid[data-grid="12-4bottom"] > :nth-child(n+9) { font-weight: 700; }

.product-grid[data-grid="13-big+4x3"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.5fr repeat(3, 1fr);
}
.product-grid[data-grid="13-big+4x3"] > :nth-child(1) {
  grid-row: 1;
  grid-column: 1 / span 4;
}

.product-grid[data-grid="14-2big+4x3"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.4fr repeat(3, 1fr);
}
.product-grid[data-grid="14-2big+4x3"] > :nth-child(1) {
  grid-row: 1;
  grid-column: 1 / span 2;
}
.product-grid[data-grid="14-2big+4x3"] > :nth-child(2) {
  grid-row: 1;
  grid-column: 3 / span 2;
}

.product-grid[data-grid="14-center-top"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.4fr repeat(5, 1fr);
}
.product-grid[data-grid="14-center-top"] > :nth-child(1) {
  grid-row: 1;
  grid-column: 1 / span 3;
}

.product-grid[data-grid="14-center-bottom"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, 1fr) 1.4fr;
}
.product-grid[data-grid="14-center-bottom"] > :nth-child(14) {
  grid-row: 6;
  grid-column: 1 / span 3;
}

.product-grid[data-grid="18-4top-14"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.3fr repeat(4, 0.75fr);
}

.product-grid[data-grid="18-14-4bottom"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, 0.75fr) 1.3fr;
}
.product-grid[data-grid="18-14-4bottom"] > :nth-child(n+15) {
  grid-row: 5;
}

.offer-tile {
  /* O fundo é desenhado numa CAMADA separada (.tile-bg) pra que a transparência
     (--tile-opacity-frac, 0-1) afete SÓ o fundo — não a imagem/nome/preço.
     Funciona com cor sólida E gradiente/radial, já que .tile-bg usa var(--tile-bg). */
  --tile-bg: #fff;
  background: transparent;
  border-radius: 8px;
  padding: 6px;
  min-width: 0;
  min-height: 0;
  /* container-type: size faz os cqi/cqb das fontes internas serem relativos
     AO TILE (largura E altura) — assim quando o tile fica pequeno (grades 18,
     14, etc) a descrição e o preço encolhem, e quando fica ALTO (grades com
     poucos produtos em página alta) eles crescem pra preencher o espaço (ver
     o bloco @container "BOX ALTO" perto do .price). Seguro usar "size" porque
     a ALTURA do tile vem das rows 1fr da .product-grid, nunca do conteúdo. */
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Layout LEGADO: NOME no topo (auto), IMAGEM no meio (1fr, bottom-aligned),
     PREÇO embaixo (auto) com overlap via margin-top negativo. O estilo "faixas
     fixas" copiado do QR Ofertas vale SÓ no formato Story com grade de 8 — ver
     o bloco "FORMATO STORY" mais abaixo. Vamos levar pras outras grades uma a
     uma, conforme aprovação. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: end;
  /* Borda também respeita a transparência dos boxes */
  border: 2px solid color-mix(in srgb, rgba(255, 255, 255, 0.72) var(--tile-opacity, 100%), transparent);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.offer-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Enquanto algum box está processando fundo, esconde o overlay de seleção
   (quadrado laranja do modo livre, z-index alto) pra não cobrir o spinner. */
.poster:has(.offer-tile.is-bg-processing) #freeSelection {
  display: none !important;
}

/* Overlay de "removendo fundo" — spinner girando sobre o box durante o processamento IA */
.offer-tile > .tile-bg-spinner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(1.5px);
  border-radius: inherit;
  pointer-events: none;
}
.tile-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(242, 108, 31, 0.25);
  border-top-color: #f26c1f;
  border-radius: 50%;
  animation: tile-spin 0.7s linear infinite;
}
.tile-spinner-label {
  font-size: clamp(7px, 4cqi, 11px);
  font-weight: 800;
  color: #c4551a;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@keyframes tile-spin {
  to { transform: rotate(360deg); }
}

/* Camada de fundo do tile — recebe a cor/gradiente E a opacidade (transparência).
   Fica atrás de todo o conteúdo (z-index:0). */
.offer-tile > .tile-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tile-bg, #fff);
  opacity: var(--tile-opacity-frac, 1);
  z-index: 0;
  pointer-events: none;
}
/* Conteúdo em fluxo: relative + z-index acima da camada de fundo */
.offer-tile > .product-art-stack,
.offer-tile > .product-info-wrap,
.offer-tile > .old-price-row,
.offer-tile > .price-row {
  position: relative;
  z-index: 1;
}
/* Selos/badges/limite já são absolute — só garante z-index acima do fundo */
.offer-tile > .product-badge,
.offer-tile > .product-selo,
.offer-tile > .product-limit {
  z-index: 3;
}

/* Reordena os filhos do tile: nome vai pra primeira row (topo).
   Imagem fica na row 1fr (meio) — bottom-aligned via align-items:end no .offer-tile.
   Preço fica na última row (base) e ainda recebe margin-top:negative pro overlap. */
.offer-tile > .product-info-wrap { order: -1; }
.offer-tile > .product-art-stack { order: 0; }
.offer-tile > .old-price-row    { order: 1; }
.offer-tile > .price-row {
  order: 2;
  margin-top: -10px;           /* puxa a etiqueta pra cima → overlap com a imagem */
  position: relative;
  z-index: 2;
  justify-self: end;           /* alinha à direita */
  width: auto;
  min-width: 50%;              /* garante que não fica muito estreita */
  max-width: 85%;              /* maior, mas ainda deixa espaço pra imagem à esquerda */
  padding: 4px 14px;           /* mais "carne" na etiqueta */
  /* Tamanho ajustável pelo slider (50-150%). Ancora no canto inferior-direito
     pra crescer pra cima/esquerda sem sair do tile. */
  transform: scale(var(--price-scale, 1));
  transform-origin: right bottom;
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO TILE — fundo amarelo + nome escuro + preço verde
   Aplicado nos destaques de layouts assimétricos (5-left, 7-top3, etc).
   Inspirado no padrão QR Ofertas (referência do mercado).
   ───────────────────────────────────────────────────────────────────────── */
.offer-tile.is-hero {
  --tile-bg: var(--hero-color, #ffd400);
  border-color: color-mix(in srgb, var(--hero-color, #ffd400) 70%, #000) !important;
}
.offer-tile.is-hero .product-name {
  color: #1a1a1a !important;
  font-size: clamp(8px, 8.5cqi, 18px);
}
.offer-tile.is-hero .product-note {
  color: #444 !important;
}
.offer-tile.is-hero .price-row {
  background: #18803a !important;  /* verde escuro */
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.offer-tile.is-hero .price-row .currency,
.offer-tile.is-hero .price-row .price,
.offer-tile.is-hero .price-row .por-label {
  color: #ffffff !important;
}
/* Hero sempre manda a cor de destaque, mesmo com data-tile-bg/etiqueta-imagem */
.offer-tile.is-hero[data-tile-bg],
.offer-tile.is-hero.has-tag-image {
  --tile-bg: var(--hero-color, #ffd400) !important;
}

.product-editor.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(12, 116, 242, 0.22);
  animation: editor-pulse 1.4s ease-out;
}

@keyframes editor-pulse {
  0% { box-shadow: 0 0 0 0 rgba(12, 116, 242, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(12, 116, 242, 0.22); }
}

.empty-poster-state {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  width: min(64%, 250px);
  aspect-ratio: 1 / 1.12;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: #fff;
  border-radius: 8px;
  color: #161c24;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(16px, 3vw, 22px);
  box-shadow: 0 10px 28px rgba(18, 24, 32, 0.12);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.empty-poster-state:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(18, 24, 32, 0.22);
}
.empty-hint {
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 700;
  text-transform: none;
  color: #6a7686;
  margin-top: -6px;
}

.empty-plus {
  font-size: clamp(54px, 9vw, 86px);
  line-height: 0.8;
  font-weight: 900;
}

/* "LIMITE 18 KG" tag — small red banner anchored to the lower-right of the
   product image. Activates per-product via the "Limite" field in the editor. */
.product-limit {
  position: absolute;
  z-index: 6;
  right: 6%;
  /* Anchored to the bottom of the image area, just above the product name. */
  bottom: 38%;
  top: auto;
  background: linear-gradient(180deg, #e20d14 0%, #a8090e 100%);
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: clamp(7px, 1.05vw, 10px);
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.product-limit span {
  display: block;
  line-height: 1;
}

.product-badge {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 950;
  text-transform: uppercase;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}

/* Etiqueta-imagem: quando o usuário escolhe um PNG na galeria de etiquetas,
   a tile ganha .has-tag-image e a .price-row passa a usar a imagem como fundo.
   IMPORTANTE: aspect-ratio = proporção REAL da imagem (vem do JS), pra que o
   PNG fique sempre proporcional, sem esticar nem distorcer. */
.offer-tile.has-tag-image .price-row {
  background-color: transparent !important;
  background-image: var(--tag-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* contain (em vez de 100% 100%) preserva o aspect do PNG sem esticar */
  background-size: contain !important;
  aspect-ratio: var(--tag-aspect, 4 / 1);
  width: 100%;
  /* Cap absoluto pra não dominar tile em destaques grandes (desktop). */
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: var(--tag-text-color, #fff) !important;
  text-shadow: var(--tag-text-shadow, none) !important;
}
.offer-tile.has-tag-image .price-row .currency,
.offer-tile.has-tag-image .price-row .price,
.offer-tile.has-tag-image .price-row .por-label {
  color: var(--tag-text-color, #fff) !important;
  text-shadow: var(--tag-text-shadow, none) !important;
}

/* Mini-preview do card do picker pra etiquetas-imagem (mostra a arte com preço por cima). */
.tag-image-preview {
  position: relative;
  width: 100%;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-image-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tag-image-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: Arial, sans-serif;
  font-weight: 950;
  line-height: 0.95;
}
.tag-image-text .cur { font-size: 11px; font-weight: 900; padding-bottom: 4px; }
.tag-image-text .num { font-size: 24px; font-weight: 950; }
.tag-image-text .num small { font-size: 12px; font-weight: 900; }

/* Selo do produto: PNG transparente com texto embutido posicionado no canto.
   Posicionado no canto inferior-esquerdo pra não competir com o nome (topo)
   nem com a etiqueta de preço (canto inferior-direito). */
.product-selo {
  position: absolute;
  bottom: 22%;            /* sobe pra não cair em cima da etiqueta de preço (base) */
  left: 2%;
  width: 42%;
  height: auto;
  max-height: 42%;
  object-fit: contain;
  object-position: bottom left;
  z-index: 3;             /* abaixo da etiqueta de preço (z-index:2 do price-row + 1) */
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.28));
}

/* Garante que o nome do produto fique sempre acima dos selos/badges */
.product-info-wrap {
  position: relative;
  z-index: 6;
}

.product-badge span {
  display: block;
  line-height: 1;
  padding: 4px;
}

.product-badge[data-badge-style="burst-yellow"],
.product-badge[data-badge-style="burst-red"] {
  top: 2%;
  right: 2%;
  width: 38%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 60% 12%, 71% 5%, 75% 18%, 87% 17%, 86% 31%, 97% 36%, 90% 47%, 100% 56%, 88% 64%, 95% 76%, 81% 78%, 80% 92%, 67% 86%, 60% 98%, 50% 88%, 40% 98%, 33% 86%, 20% 92%, 19% 78%, 5% 76%, 12% 64%, 0% 56%, 10% 47%, 3% 36%, 14% 31%, 13% 17%, 25% 18%, 29% 5%, 40% 12%);
  font-size: clamp(6px, 1.4cqw, 11px);
  rotate: -8deg;
  overflow: hidden;
}

.product-badge[data-badge-style="burst-yellow"] { background: #ffd400; color: #c40010; }
.product-badge[data-badge-style="burst-red"] { background: #d6111a; color: #fff; }

.product-badge[data-badge-style="burst-yellow"] span,
.product-badge[data-badge-style="burst-red"] span {
  width: 70%;
  word-break: break-word;
  hyphens: auto;
  line-height: 0.95;
}

.product-badge[data-badge-style="ribbon-red"] {
  top: 0;
  left: -3%;
  background: #d6111a;
  color: #fff;
  padding: 4px 10px;
  font-size: clamp(8px, 1.6cqw, 13px);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
}

.product-badge[data-badge-style="ribbon-yellow"] {
  top: 0;
  left: -3%;
  background: #ffd400;
  color: #c40010;
  padding: 4px 10px;
  font-size: clamp(8px, 1.6cqw, 13px);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
}

.product-badge[data-badge-style="circle-red"] {
  top: 4%;
  right: 4%;
  width: 28%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #ff3535 0%, #b00910 100%);
  color: #fff;
  border-radius: 50%;
  font-size: clamp(7px, 1.4cqw, 11px);
  border: 2px solid #fff;
}

.product-badge[data-badge-style="diamond-yellow"] {
  top: 4%;
  right: 4%;
  width: 28%;
  aspect-ratio: 1;
  background: #ffd400;
  color: #c40010;
  rotate: 45deg;
  font-size: clamp(7px, 1.3cqw, 10px);
  border: 2px solid #c40010;
}

.product-badge[data-badge-style="diamond-yellow"] span {
  rotate: -45deg;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.badge-row input {
  flex: 1 1 200px;
  min-width: 180px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.badge-row select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  background: #fff;
  cursor: pointer;
}

.badge-quickpick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.quickpick-chip {
  font-size: 10px;
  padding: 3px 6px;
  white-space: nowrap;
}

.quickpick-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.quickpick-chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.offer-tile.only-adults::after {
  content: "18";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d6111a;
  color: #fff;
  font-weight: 950;
  font-size: 14px;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px #d6111a, 0 2px 6px rgba(0,0,0,0.35);
  z-index: 6;
  font-family: Arial, sans-serif;
  letter-spacing: -0.05em;
}

.offer-tile.only-adults:has(.product-badge)::after {
  right: auto;
  left: 6px;
}

.product-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 72px;
  object-fit: contain;
  /* object-position: bottom faz a foto do produto ancorar na base do espaço dela,
     em vez de ficar centralizada. Isso elimina o "espaço fantasma" abaixo da
     imagem em produtos cuja proporção natural não preenche todo o espaço — assim
     a descrição encosta na imagem e a etiqueta encosta na descrição. */
  object-position: center bottom;
  align-self: stretch;
  justify-self: center;
}

/* Fotos LARGAS E BAIXAS (fardo/pack deitado, ex: cerveja 15x269ml): centralizadas
   verticalmente no espaço delas, em vez de coladas na etiqueta. A classe .is-wide
   é adicionada pelo JS quando a proporção natural da foto (largura/altura) >= 1.2.
   O export do PNG lê o object-position computado do DOM, então prévia == PNG. */
.product-art.is-wide {
  object-position: center center;
}

/* Stack de 1, 2 ou 3 cópias da imagem do produto dentro do mesmo box.
   Mercados costumam encher o card com 2-3 unidades pra dar impressão de
   "muita oferta" ou destacar embalagem coletiva. */
.product-art-stack {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 72px;
  /* Permite a transform de cada img sair do recipiente sem cortar. */
  overflow: visible;
}
/* 1 cópia: ocupa o card inteiro normalmente. */
.product-art-stack[data-count="1"] .product-art {
  width: 100%;
  height: 100%;
}
/* 2+ cópias: cada uma ABSOLUTAMENTE posicionada com tamanho cheio do card,
   então cada imagem tem o mesmo espaço de quando é 1×. O usuário separa
   elas movendo cada uma com Shift. */
.product-art-stack[data-count="2"] .product-art,
.product-art-stack[data-count="3"] .product-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* As cópias ficam em flex igual (33%, 50% ou 100%); a posição final de cada uma
   é controlada por transform individual gravado em product.copyOffsets — assim o
   usuário pode arrastar cada cópia separadamente (Shift/Alt) e cada produto fica
   com posicionamento sob medida (garrafa fina precisa de overlap diferente de caixa). */

/* Cursor de "agarrar" ao passar mouse — visual sem outline pra não poluir. */
.product-art-stack[data-count="2"] .product-art,
.product-art-stack[data-count="3"] .product-art {
  cursor: grab;
}

/* Outline da cópia ativa: usa drop-shadow empilhado em 8 direções, que SEGUE
   o canal alpha da imagem. Resultado: o contorno fica colado na silhueta real
   do produto (sem fundo), não no retângulo do elemento. */
.product-art.active-copy {
  filter:
    drop-shadow( 1px  0    0 #f26c1f)
    drop-shadow(-1px  0    0 #f26c1f)
    drop-shadow( 0    1px  0 #f26c1f)
    drop-shadow( 0   -1px  0 #f26c1f)
    drop-shadow( 1px  1px  0 #f26c1f)
    drop-shadow(-1px  1px  0 #f26c1f)
    drop-shadow( 1px -1px  0 #f26c1f)
    drop-shadow(-1px -1px  0 #f26c1f);
  cursor: grabbing !important;
  z-index: 5;
  position: relative;
}

.product-name {
  margin-top: 4px;
  /* cqi = % da largura do tile. Tile 100px → 7px. Tile 200px → 14px. Mantém
     min/max pra não ficar nem ilegível nem absurdo. */
  font-size: clamp(6px, 7cqi, 13px);
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.product-note {
  color: #52606e;
  /* Proporcional ao tile (4cqi = 4% da largura). Min 7px pra ficar legível
     em grades densas, max 11px pra não dominar em destaques grandes. */
  font-size: clamp(7px, 4cqi, 11px);
  line-height: 1.1;
  text-align: center;
}

.product-note:empty {
  display: none;
}

.price-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  color: white;
  background: #e20d14;
  border-radius: 5px;
  padding: 2px 4px;
  margin-top: 3px;
}

.old-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: clamp(8px, 1.4vw, 10px);
  color: #6a6a6a;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1;
}

.old-price-row .old-price {
  text-decoration: line-through;
  text-decoration-color: #d6111a;
  text-decoration-thickness: 2px;
  color: #2a2a2a;
}

.por-label {
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-right: 1px;
  align-self: center;
  text-transform: uppercase;
}

.currency {
  /* Escala com tile, com teto baixo pra não dominar destaques largos. */
  font-size: clamp(6px, 5cqi, 11px);
  font-weight: 900;
}

.price {
  /* Escala com tile, com teto controlado: 12cqi (era 15) e max 22px (era 32).
     Antes em tiles destaque (largos) o preço ficava enorme e a foto sumia. */
  font-size: clamp(10px, 12cqi, 22px);
  line-height: 0.95;
  font-weight: 950;
}

/* ─── FORMATO STORY: grade de 8 em FAIXAS FIXAS (receita QR Ofertas) ─────────
   Aprovado pelo usuário SÓ pra grade de 8 no Story por enquanto; as outras
   grades/formatos seguem o layout legado acima (vamos ajustar grade a grade).
   Geometria medida no box do QR Ofertas: nome na faixa de 26% do topo (até 4
   linhas, centralizado), foto CENTRALIZADA na faixa do meio, etiqueta na faixa
   de 28% da base em largura total. Fontes pela ALTURA do box (cqb): nome 5.6%,
   número do preço 12%, R$ 47% do número, centavos 60% do número.
   A LARGURA da etiqueta compensa o slider de escala (--price-scale) pra nunca
   estourar o box. O export PNG mede tudo do DOM → prévia == PNG. */
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile {
  grid-template-rows: 26% minmax(0, 1fr) auto 28%;
  align-items: stretch;
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile > .product-info-wrap {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile > .product-art-stack { grid-row: 2; }
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile > .old-price-row { grid-row: 3; }
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile > .price-row {
  grid-row: 4;
  margin-top: 0;
  align-self: center;
  justify-self: center;
  min-width: 0;
  /* Largura cheia, dividida pela escala do slider: depois do transform:scale
     a etiqueta ocupa no máximo 100% do box — nunca estoura. */
  width: calc(100% / max(var(--price-scale, 1), 1));
  max-width: calc(100% / max(var(--price-scale, 1), 1));
  max-height: 100%;
  padding: 2% 4%;
  transform-origin: center center;
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .product-art {
  object-position: center center;
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .product-name {
  margin-top: 0;
  font-size: clamp(6px, 5.6cqb, 34px);
  -webkit-line-clamp: 4;
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .product-note {
  font-size: clamp(6px, 3cqb, 14px);
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .currency {
  font-size: clamp(6px, 5.6cqb, 26px);
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .price {
  font-size: clamp(10px, 12cqb, 56px);
}
.poster.format-story :is(.product-grid[data-grid="auto"], .product-grid[data-grid="4x2"]) .offer-tile .price small {
  font-size: 0.6em;
  font-weight: 900;
}

.unit {
  font-size: 8px;
  font-weight: 800;
  margin-bottom: 2px;
}

.poster-footer {
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  color: var(--footer-color, #332b00);
  font-size: 11px;
  font-weight: 800;
  padding-top: 8px;
}
/* Linha "disclaimer (esquerda) ... validade (direita)" — comportamento antigo. */
.poster-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
/* Faixa de contato (endereço/WhatsApp/Instagram/Facebook) com ícones. */
.poster-footer-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 14px;
}
.poster-footer-contacts:empty { display: none; }
.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.footer-contact-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Honour the HTML hidden attribute over the flex display above. */
.poster-footer[hidden] {
  display: none !important;
}

/* Header bg override (🎀 Faixa picker) — force theme text color away. */
.poster-header[data-bg-override="true"] .poster-kicker,
.poster-header[data-bg-override="true"] h1 {
  color: var(--header-text-color) !important;
  background: none !important;
  -webkit-text-fill-color: var(--header-text-color) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
}
/* Hide the theme's decorative ::before overlay so the custom bg shows clean. */
.poster-header[data-bg-override="true"]::before {
  display: none;
}

/* When the user picks a custom footer color via the control, override the
   theme-specific footer colors set later in the cascade. */
.poster-footer[data-custom-color="true"],
.theme-detona .poster-footer[data-custom-color="true"],
.theme-meat-pro .poster-footer[data-custom-color="true"] {
  color: var(--footer-color) !important;
  text-shadow: none;
}

/* ---- Seção "Dados da empresa" no painel de edição (desktop) ---- */
.company-info-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 4px;
  background: var(--surface, #fff);
}
.company-info-section > summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.company-info-section > summary small {
  font-weight: 600;
  opacity: .6;
}
.company-info-hint {
  margin: 6px 0 10px;
  font-size: 12px;
  opacity: .7;
}
.company-field {
  margin-bottom: 12px;
}
.company-field > label:first-child {
  margin-bottom: 4px;
}
.company-show-toggle {
  font-size: 12px;
  opacity: .85;
}

/* ---- Mobile: card "Dados da empresa" ---- */
.mobile-company-hint {
  margin: 0 0 10px;
  font-size: 13px;
  opacity: .7;
}
.mobile-toggle-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 14px;
}
.mobile-toggle-field input { width: 18px; height: 18px; }

.page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.page-controls button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand-blue);
  font-weight: 800;
  padding: 0 14px;
  transition: background .15s, border-color .15s, color .15s;
}

.page-controls button:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--brand-orange);
  color: var(--brand-orange-strong);
}

.page-controls button:disabled {
  opacity: 0.42;
  cursor: default;
}

.page-note {
  margin: 0;
  min-width: 110px;
  color: #6a7280;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
}

.model-picker-section {
  margin-top: 22px;
  padding: 16px 4px 12px;
  border-top: 1px solid var(--line);
}

.model-picker-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.model-picker-head p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.model-picker {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  justify-content: center;
}

.model-card {
  position: relative;
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.model-card:hover {
  border-color: var(--accent);
}

.model-card.active {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(242, 108, 31, 0.25);
}

.model-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ff1515;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  z-index: 2;
}

.model-thumb {
  width: 100%;
  max-height: 150px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: #ffd400;
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 3px;
}

.model-thumb-header {
  display: block;
  height: 22%;
  border-radius: 3px;
  background: linear-gradient(135deg, #c90000, #ff2b15 60%, #970000);
}

.model-thumb-grid {
  flex: 1;
  display: block;
  border-radius: 3px;
  background-color: #fff3bd;
}

.model-thumb.theme-leader { background: linear-gradient(160deg, #ff62ba 0%, #ffb300 50%, #7849ff 100%); }
.model-thumb.theme-leader .model-thumb-header { background: linear-gradient(135deg, #ff43b4, #ff8a00 55%, #6e3cff); }
.model-thumb.theme-leader .model-thumb-grid { background-color: #fff8dc; }
.model-thumb.theme-black { background: #101215; }
.model-thumb.theme-black .model-thumb-header { background: linear-gradient(135deg, #151515, #3b3d43 55%, #000); }
.model-thumb.theme-black .model-thumb-grid { background-color: #f3f5f8; }
.model-thumb.theme-fresh { background: linear-gradient(160deg, #14a15f, #f6d43b); }
.model-thumb.theme-fresh .model-thumb-header { background: linear-gradient(135deg, #078240, #23bd6b 60%, #f1bd18); }
.model-thumb.theme-fresh .model-thumb-grid { background-color: #f2fff5; }

.model-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}

.model-desc {
  font-size: 11px;
  color: var(--muted);
}

.model-select {
  margin-top: 4px;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 0;
  border-radius: 5px;
}

.model-card.active .model-select {
  background: var(--green);
}

.editor-panel {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 20px;
  overflow: auto;
  max-height: 50vh;
}

.panel-head h2 {
  color: var(--brand-blue);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.panel-head h2 {
  margin: 0 0 5px;
  font-size: 20px;
}

.panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.campaign-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.campaign-controls label,
.editor-field,
.price-options label {
  display: grid;
  gap: 4px;
}

.campaign-controls span,
.editor-field span,
.price-options span {
  color: #596575;
  font-size: 12px;
  font-weight: 700;
}

.campaign-controls input,
.editor-field input,
.editor-field select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.campaign-controls input:focus,
.editor-field input:focus,
.editor-field select:focus,
.editor-field textarea:focus,
.adjust-grid input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(242, 108, 31, 0.18);
}

input[type="range"] {
  accent-color: var(--brand-orange);
}

input[type="checkbox"] {
  accent-color: var(--brand-orange);
}

.product-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.product-editor-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* Quando escondido via [hidden] (HTML attr), o display:grid acima sobrescreve.
   Esta regra força display:none pra realmente esconder os cards redundantes. */
.product-editor-list[hidden] { display: none; }

.product-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 30, 42, 0.08);
  padding: 10px;
}

.product-editor.dragging {
  opacity: 0.45;
}

.product-editor-inner {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
}

.image-box {
  min-width: 0;
}

.image-preview {
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background-color: #f7f9fb;
  background-image:
    linear-gradient(45deg, #e6ebf1 25%, transparent 25%),
    linear-gradient(-45deg, #e6ebf1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6ebf1 75%),
    linear-gradient(-45deg, transparent 75%, #e6ebf1 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-button {
  display: block;
  margin-top: 7px;
  padding: 7px 8px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.file-button:hover {
  background: #0f7e3f;
}

.text-tool-button {
  margin-top: 6px;
  min-height: 28px;
  width: 100%;
  background: #eef4ff;
  color: #0f61d3;
  border: 1px solid #c8daf7;
  font-size: 12px;
}

/* Linha "Escolher selo" + thumb no editor do produto. */
.selo-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.selo-pick-button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
}
.selo-thumb-inline {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.selo-clear-button {
  flex: 0 0 auto;
  width: 32px;
  margin-top: 0;
  background: #ffe6e4;
  color: #bc241a;
  border-color: #f0b7ad;
}

/* Linha de chips "1× / 2× / 3×" no editor do produto pra duplicar a imagem dentro do card. */
.image-count-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.image-count-label {
  font-size: 11px;
  font-weight: 700;
  color: #5a6470;
  margin-right: 2px;
}
.image-count-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 26px;
  padding: 0 6px;
  background: #fff;
  color: #5a6470;
  border: 1px solid #c8daf7;
  border-radius: 5px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.image-count-chip:hover {
  background: #eef4ff;
}
.image-count-chip.active {
  background: var(--brand-blue, #1e5ba6);
  color: #fff;
  border-color: var(--brand-blue, #1e5ba6);
}
.image-count-chip.reset-copies {
  flex: 0 0 auto;
  width: 30px;
  padding: 0;
  font-size: 14px;
  color: #5a6470;
}
.image-count-chip.reset-copies:hover {
  background: #fff3cd;
  border-color: #ffc107;
  color: #5a3a00;
}

.poster .offer-tile[data-tile-bg="white"] { --tile-bg: #ffffff; }
.poster .offer-tile[data-tile-bg="cream"] { --tile-bg: #fff7e0; }
.poster .offer-tile[data-tile-bg="light-yellow"] { --tile-bg: #fff3bd; }
.poster .offer-tile[data-tile-bg="light-blue"] { --tile-bg: #e3f1ff; }
.poster .offer-tile[data-tile-bg="light-green"] { --tile-bg: #e7fbe9; }
.poster .offer-tile[data-tile-bg="light-pink"] { --tile-bg: #ffe6ee; }
.poster .offer-tile[data-tile-bg="light-gray"] { --tile-bg: #f0f2f5; }
.poster .offer-tile[data-tile-bg="yellow-bold"] { --tile-bg: #ffd400; }
.poster .offer-tile[data-tile-bg="red-bold"] { --tile-bg: #d6111a; color: #fff; }
.poster .offer-tile[data-tile-bg="dark"] { --tile-bg: #1a1a22; color: #fff; }
.poster .offer-tile[data-tile-bg="dark"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="red-bold"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-warm"] { --tile-bg: linear-gradient(180deg, #fff3bd, #ffb877); }
.poster .offer-tile[data-tile-bg="gradient-cool"] { --tile-bg: linear-gradient(180deg, #d8efff, #c2dcff); }
.poster .offer-tile[data-tile-bg="gradient-sunset"] { --tile-bg: linear-gradient(180deg, #ffd470, #ff8a6f 60%, #ff5fa0); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-sunset"] .product-name { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.poster .offer-tile[data-tile-bg="dots"] {
  --tile-bg: radial-gradient(#ffd400 1.6px, transparent 1.7px) 0 0 / 14px 14px, #ffffff;
}
.poster .offer-tile[data-tile-bg="stripes"] {
  --tile-bg: repeating-linear-gradient(45deg, #ffe98a 0 8px, transparent 8px 18px), #ffffff;
}
.poster .offer-tile[data-tile-bg="grid"] {
  --tile-bg: linear-gradient(#e0e6ec 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, #e0e6ec 1px, transparent 1px) 0 0 / 18px 18px, #ffffff;
}
.poster .offer-tile[data-tile-bg="diagonal-split"] {
  --tile-bg: linear-gradient(135deg, #ffd400 50%, #ffffff 50%);
}
.poster .offer-tile[data-tile-bg="light-purple"] { --tile-bg: #f0e3ff; }
.poster .offer-tile[data-tile-bg="light-peach"] { --tile-bg: #ffe6d0; }
.poster .offer-tile[data-tile-bg="blue-bold"] { --tile-bg: #1d6cd6; color: #fff; }
.poster .offer-tile[data-tile-bg="blue-bold"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="green-bold"] { --tile-bg: #14a15f; color: #fff; }
.poster .offer-tile[data-tile-bg="green-bold"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="navy"] { --tile-bg: #0a1f4a; color: #fff; }
.poster .offer-tile[data-tile-bg="navy"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="burgundy"] { --tile-bg: #5e1024; color: #fff; }
.poster .offer-tile[data-tile-bg="burgundy"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-ocean"] { --tile-bg: linear-gradient(180deg, #2a93d5, #0e3b66); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-ocean"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-forest"] { --tile-bg: linear-gradient(180deg, #4ec47a, #0d5a2c); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-forest"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-purple"] { --tile-bg: linear-gradient(180deg, #b378ff, #5a23c0); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-purple"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-mint"] { --tile-bg: linear-gradient(180deg, #c8f5e0, #6dd1a8); }
.poster .offer-tile[data-tile-bg="gradient-fire"] { --tile-bg: linear-gradient(180deg, #ffe070, #ff8a1a 50%, #d6111a); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-fire"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-rainbow"] { --tile-bg: linear-gradient(135deg, #ff5fa0, #ffd400 35%, #1bcd5d 65%, #2492ff); }

/* ── Novos gradientes ── */
.poster .offer-tile[data-tile-bg="gradient-peach"]      { --tile-bg: linear-gradient(180deg, #ffe1c4, #ff9a6b); }
.poster .offer-tile[data-tile-bg="gradient-lavender"]   { --tile-bg: linear-gradient(180deg, #e6d7ff, #8b6dff); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-lavender"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-citrus"]     { --tile-bg: linear-gradient(180deg, #fffbcc, #ffd400 55%, #ff7a00); }
.poster .offer-tile[data-tile-bg="gradient-tropical"]   { --tile-bg: linear-gradient(180deg, #fff4a3, #36d68d 55%, #0a8c5b); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-tropical"] .product-name { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.poster .offer-tile[data-tile-bg="gradient-candy"]      { --tile-bg: linear-gradient(180deg, #ffe7f3, #ffb6dc 50%, #ff7eb6); }
.poster .offer-tile[data-tile-bg="gradient-aurora"]     { --tile-bg: linear-gradient(135deg, #36e2c2, #5b8df5 55%, #a663ff); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-aurora"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-coffee"]     { --tile-bg: linear-gradient(180deg, #d8b58a, #7a4a23 55%, #3a2110); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-coffee"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-rose-gold"]  { --tile-bg: linear-gradient(180deg, #ffe2d4, #f0a896 55%, #c97770); }
.poster .offer-tile[data-tile-bg="gradient-midnight"]   { --tile-bg: linear-gradient(180deg, #1e3a8a, #0f172a 60%, #020617); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-midnight"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-grass"]      { --tile-bg: linear-gradient(180deg, #9be888, #3aa84a 55%, #0b6b2c); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-grass"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-cherry"]     { --tile-bg: linear-gradient(180deg, #ffd8d8, #ff5c66 55%, #a4001a); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-cherry"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-sand"]       { --tile-bg: linear-gradient(180deg, #fff2d6, #f0c98e 55%, #b88a4a); }
.poster .offer-tile[data-tile-bg="gradient-steel"]      { --tile-bg: linear-gradient(180deg, #dbe4ee, #7d8a99 55%, #3a4452); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-steel"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-bubble-gum"] { --tile-bg: linear-gradient(180deg, #ffb6e0, #ff5fa0 55%, #a4006a); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-bubble-gum"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-volcano"]    { --tile-bg: linear-gradient(180deg, #fff4a3, #ff5c33 55%, #7a0014); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-volcano"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-sky"]        { --tile-bg: linear-gradient(180deg, #c2e9ff, #5fbef0 55%, #1976c4); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-sky"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-emerald"]    { --tile-bg: linear-gradient(180deg, #a9f5d1, #1ca465 55%, #0a5e3b); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-emerald"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-plum"]       { --tile-bg: linear-gradient(180deg, #f3dcff, #a85cd6 55%, #4a1670); color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-plum"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="gradient-radial-sun"] {
  --tile-bg: radial-gradient(circle at 50% 25%, #fff8c2 0%, #ffb300 45%, #ff5a1f 90%);
}

/* ── Radial variants of every palette (spotlight effect) ──
   Each entry: same color stops as its linear sibling, drawn as a radial spotlight
   originating slightly above center, like the original "Sol radial". */
.poster .offer-tile[data-tile-bg="radial-warm"]       { --tile-bg: radial-gradient(circle at 50% 25%, #fff3bd 0%, #ffb877 90%); }
.poster .offer-tile[data-tile-bg="radial-cool"]       { --tile-bg: radial-gradient(circle at 50% 25%, #d8efff 0%, #c2dcff 90%); }
.poster .offer-tile[data-tile-bg="radial-sunset"]     { --tile-bg: radial-gradient(circle at 50% 25%, #ffd470 0%, #ff8a6f 50%, #ff5fa0 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-sunset"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-ocean"]      { --tile-bg: radial-gradient(circle at 50% 25%, #2a93d5 0%, #0e3b66 90%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-ocean"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-forest"]     { --tile-bg: radial-gradient(circle at 50% 25%, #4ec47a 0%, #0d5a2c 90%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-forest"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-purple"]     { --tile-bg: radial-gradient(circle at 50% 25%, #b378ff 0%, #5a23c0 90%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-purple"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-mint"]       { --tile-bg: radial-gradient(circle at 50% 25%, #c8f5e0 0%, #6dd1a8 90%); }
.poster .offer-tile[data-tile-bg="radial-fire"]       { --tile-bg: radial-gradient(circle at 50% 25%, #ffe070 0%, #ff8a1a 50%, #d6111a 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-fire"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-rainbow"]    { --tile-bg: radial-gradient(circle at 50% 25%, #ff5fa0 0%, #ffd400 35%, #1bcd5d 65%, #2492ff 95%); }
.poster .offer-tile[data-tile-bg="radial-peach"]      { --tile-bg: radial-gradient(circle at 50% 25%, #ffe1c4 0%, #ff9a6b 90%); }
.poster .offer-tile[data-tile-bg="radial-lavender"]   { --tile-bg: radial-gradient(circle at 50% 25%, #e6d7ff 0%, #8b6dff 90%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-lavender"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-citrus"]     { --tile-bg: radial-gradient(circle at 50% 25%, #fffbcc 0%, #ffd400 55%, #ff7a00 95%); }
.poster .offer-tile[data-tile-bg="radial-tropical"]   { --tile-bg: radial-gradient(circle at 50% 25%, #fff4a3 0%, #36d68d 55%, #0a8c5b 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-tropical"] .product-name { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.poster .offer-tile[data-tile-bg="radial-candy"]      { --tile-bg: radial-gradient(circle at 50% 25%, #ffe7f3 0%, #ffb6dc 50%, #ff7eb6 95%); }
.poster .offer-tile[data-tile-bg="radial-aurora"]     { --tile-bg: radial-gradient(circle at 50% 25%, #36e2c2 0%, #5b8df5 55%, #a663ff 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-aurora"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-coffee"]     { --tile-bg: radial-gradient(circle at 50% 25%, #d8b58a 0%, #7a4a23 55%, #3a2110 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-coffee"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-rose-gold"]  { --tile-bg: radial-gradient(circle at 50% 25%, #ffe2d4 0%, #f0a896 55%, #c97770 95%); }
.poster .offer-tile[data-tile-bg="radial-midnight"]   { --tile-bg: radial-gradient(circle at 50% 25%, #1e3a8a 0%, #0f172a 60%, #020617 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-midnight"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-grass"]      { --tile-bg: radial-gradient(circle at 50% 25%, #9be888 0%, #3aa84a 55%, #0b6b2c 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-grass"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-cherry"]     { --tile-bg: radial-gradient(circle at 50% 25%, #ffd8d8 0%, #ff5c66 55%, #a4001a 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-cherry"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-sand"]       { --tile-bg: radial-gradient(circle at 50% 25%, #fff2d6 0%, #f0c98e 55%, #b88a4a 95%); }
.poster .offer-tile[data-tile-bg="radial-steel"]      { --tile-bg: radial-gradient(circle at 50% 25%, #dbe4ee 0%, #7d8a99 55%, #3a4452 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-steel"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-bubble-gum"] { --tile-bg: radial-gradient(circle at 50% 25%, #ffb6e0 0%, #ff5fa0 55%, #a4006a 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-bubble-gum"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-volcano"]    { --tile-bg: radial-gradient(circle at 50% 25%, #fff4a3 0%, #ff5c33 55%, #7a0014 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-volcano"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-sky"]        { --tile-bg: radial-gradient(circle at 50% 25%, #c2e9ff 0%, #5fbef0 55%, #1976c4 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-sky"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-emerald"]    { --tile-bg: radial-gradient(circle at 50% 25%, #a9f5d1 0%, #1ca465 55%, #0a5e3b 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-emerald"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-plum"]       { --tile-bg: radial-gradient(circle at 50% 25%, #f3dcff 0%, #a85cd6 55%, #4a1670 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-plum"] .product-name { color: #fff; }
.poster .offer-tile[data-tile-bg="radial-black"]      { --tile-bg: radial-gradient(circle at 50% 25%, #4a4a4a 0%, #1a1a1a 55%, #000000 95%); color: #fff; }
.poster .offer-tile[data-tile-bg="radial-black"] .product-name { color: #fff; }

.poster .offer-tile[data-tile-bg="gradient-conic-sweep"] {
  --tile-bg: conic-gradient(from 0deg at 50% 50%, #ff5fa0, #ffd400, #1bcd5d, #2492ff, #a663ff, #ff5fa0);
}

.tile-bg-preview[data-tile-bg-preview="light-purple"] { background: #f0e3ff; }
.tile-bg-preview[data-tile-bg-preview="light-peach"] { background: #ffe6d0; }
.tile-bg-preview[data-tile-bg-preview="blue-bold"] { background: #1d6cd6; }
.tile-bg-preview[data-tile-bg-preview="green-bold"] { background: #14a15f; }
.tile-bg-preview[data-tile-bg-preview="navy"] { background: #0a1f4a; }
.tile-bg-preview[data-tile-bg-preview="burgundy"] { background: #5e1024; }
.tile-bg-preview[data-tile-bg-preview="gradient-ocean"] { background: linear-gradient(180deg, #2a93d5, #0e3b66); }
.tile-bg-preview[data-tile-bg-preview="gradient-forest"] { background: linear-gradient(180deg, #4ec47a, #0d5a2c); }
.tile-bg-preview[data-tile-bg-preview="gradient-purple"] { background: linear-gradient(180deg, #b378ff, #5a23c0); }
.tile-bg-preview[data-tile-bg-preview="gradient-mint"] { background: linear-gradient(180deg, #c8f5e0, #6dd1a8); }
.tile-bg-preview[data-tile-bg-preview="gradient-fire"] { background: linear-gradient(180deg, #ffe070, #ff8a1a 50%, #d6111a); }
.tile-bg-preview[data-tile-bg-preview="gradient-rainbow"] { background: linear-gradient(135deg, #ff5fa0, #ffd400 35%, #1bcd5d 65%, #2492ff); }
.tile-bg-preview[data-tile-bg-preview="gradient-peach"]      { background: linear-gradient(180deg, #ffe1c4, #ff9a6b); }
.tile-bg-preview[data-tile-bg-preview="gradient-lavender"]   { background: linear-gradient(180deg, #e6d7ff, #8b6dff); }
.tile-bg-preview[data-tile-bg-preview="gradient-citrus"]     { background: linear-gradient(180deg, #fffbcc, #ffd400 55%, #ff7a00); }
.tile-bg-preview[data-tile-bg-preview="gradient-tropical"]   { background: linear-gradient(180deg, #fff4a3, #36d68d 55%, #0a8c5b); }
.tile-bg-preview[data-tile-bg-preview="gradient-candy"]      { background: linear-gradient(180deg, #ffe7f3, #ffb6dc 50%, #ff7eb6); }
.tile-bg-preview[data-tile-bg-preview="gradient-aurora"]     { background: linear-gradient(135deg, #36e2c2, #5b8df5 55%, #a663ff); }
.tile-bg-preview[data-tile-bg-preview="gradient-coffee"]     { background: linear-gradient(180deg, #d8b58a, #7a4a23 55%, #3a2110); }
.tile-bg-preview[data-tile-bg-preview="gradient-rose-gold"]  { background: linear-gradient(180deg, #ffe2d4, #f0a896 55%, #c97770); }
.tile-bg-preview[data-tile-bg-preview="gradient-midnight"]   { background: linear-gradient(180deg, #1e3a8a, #0f172a 60%, #020617); }
.tile-bg-preview[data-tile-bg-preview="gradient-grass"]      { background: linear-gradient(180deg, #9be888, #3aa84a 55%, #0b6b2c); }
.tile-bg-preview[data-tile-bg-preview="gradient-cherry"]     { background: linear-gradient(180deg, #ffd8d8, #ff5c66 55%, #a4001a); }
.tile-bg-preview[data-tile-bg-preview="gradient-sand"]       { background: linear-gradient(180deg, #fff2d6, #f0c98e 55%, #b88a4a); }
.tile-bg-preview[data-tile-bg-preview="gradient-steel"]      { background: linear-gradient(180deg, #dbe4ee, #7d8a99 55%, #3a4452); }
.tile-bg-preview[data-tile-bg-preview="gradient-bubble-gum"] { background: linear-gradient(180deg, #ffb6e0, #ff5fa0 55%, #a4006a); }
.tile-bg-preview[data-tile-bg-preview="gradient-volcano"]    { background: linear-gradient(180deg, #fff4a3, #ff5c33 55%, #7a0014); }
.tile-bg-preview[data-tile-bg-preview="gradient-sky"]        { background: linear-gradient(180deg, #c2e9ff, #5fbef0 55%, #1976c4); }
.tile-bg-preview[data-tile-bg-preview="gradient-emerald"]    { background: linear-gradient(180deg, #a9f5d1, #1ca465 55%, #0a5e3b); }
.tile-bg-preview[data-tile-bg-preview="gradient-plum"]       { background: linear-gradient(180deg, #f3dcff, #a85cd6 55%, #4a1670); }
.tile-bg-preview[data-tile-bg-preview="gradient-radial-sun"] { background: radial-gradient(circle at 50% 30%, #fff8c2 0%, #ffb300 50%, #ff5a1f 95%); }
.tile-bg-preview[data-tile-bg-preview="gradient-conic-sweep"]{ background: conic-gradient(from 0deg at 50% 50%, #ff5fa0, #ffd400, #1bcd5d, #2492ff, #a663ff, #ff5fa0); }

/* ── Mini-previews dos radiais (no picker) ── */
.tile-bg-preview[data-tile-bg-preview="radial-warm"]       { background: radial-gradient(circle at 50% 30%, #fff3bd 0%, #ffb877 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-cool"]       { background: radial-gradient(circle at 50% 30%, #d8efff 0%, #c2dcff 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-sunset"]     { background: radial-gradient(circle at 50% 30%, #ffd470 0%, #ff8a6f 50%, #ff5fa0 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-ocean"]      { background: radial-gradient(circle at 50% 30%, #2a93d5 0%, #0e3b66 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-forest"]     { background: radial-gradient(circle at 50% 30%, #4ec47a 0%, #0d5a2c 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-purple"]     { background: radial-gradient(circle at 50% 30%, #b378ff 0%, #5a23c0 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-mint"]       { background: radial-gradient(circle at 50% 30%, #c8f5e0 0%, #6dd1a8 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-fire"]       { background: radial-gradient(circle at 50% 30%, #ffe070 0%, #ff8a1a 50%, #d6111a 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-rainbow"]    { background: radial-gradient(circle at 50% 30%, #ff5fa0 0%, #ffd400 35%, #1bcd5d 65%, #2492ff 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-peach"]      { background: radial-gradient(circle at 50% 30%, #ffe1c4 0%, #ff9a6b 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-lavender"]   { background: radial-gradient(circle at 50% 30%, #e6d7ff 0%, #8b6dff 90%); }
.tile-bg-preview[data-tile-bg-preview="radial-citrus"]     { background: radial-gradient(circle at 50% 30%, #fffbcc 0%, #ffd400 55%, #ff7a00 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-tropical"]   { background: radial-gradient(circle at 50% 30%, #fff4a3 0%, #36d68d 55%, #0a8c5b 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-candy"]      { background: radial-gradient(circle at 50% 30%, #ffe7f3 0%, #ffb6dc 50%, #ff7eb6 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-aurora"]     { background: radial-gradient(circle at 50% 30%, #36e2c2 0%, #5b8df5 55%, #a663ff 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-coffee"]     { background: radial-gradient(circle at 50% 30%, #d8b58a 0%, #7a4a23 55%, #3a2110 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-rose-gold"]  { background: radial-gradient(circle at 50% 30%, #ffe2d4 0%, #f0a896 55%, #c97770 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-midnight"]   { background: radial-gradient(circle at 50% 30%, #1e3a8a 0%, #0f172a 60%, #020617 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-grass"]      { background: radial-gradient(circle at 50% 30%, #9be888 0%, #3aa84a 55%, #0b6b2c 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-cherry"]     { background: radial-gradient(circle at 50% 30%, #ffd8d8 0%, #ff5c66 55%, #a4001a 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-sand"]       { background: radial-gradient(circle at 50% 30%, #fff2d6 0%, #f0c98e 55%, #b88a4a 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-steel"]      { background: radial-gradient(circle at 50% 30%, #dbe4ee 0%, #7d8a99 55%, #3a4452 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-bubble-gum"] { background: radial-gradient(circle at 50% 30%, #ffb6e0 0%, #ff5fa0 55%, #a4006a 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-volcano"]    { background: radial-gradient(circle at 50% 30%, #fff4a3 0%, #ff5c33 55%, #7a0014 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-sky"]        { background: radial-gradient(circle at 50% 30%, #c2e9ff 0%, #5fbef0 55%, #1976c4 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-emerald"]    { background: radial-gradient(circle at 50% 30%, #a9f5d1 0%, #1ca465 55%, #0a5e3b 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-plum"]       { background: radial-gradient(circle at 50% 30%, #f3dcff 0%, #a85cd6 55%, #4a1670 95%); }
.tile-bg-preview[data-tile-bg-preview="radial-black"]      { background: radial-gradient(circle at 50% 30%, #4a4a4a 0%, #1a1a1a 55%, #000000 95%); }
.tile-bg-preview[data-tile-bg-preview="grid"] {
  background-color: #fff;
  background-image:
    linear-gradient(#e0e6ec 1px, transparent 1px),
    linear-gradient(90deg, #e0e6ec 1px, transparent 1px);
  background-size: 18px 18px;
}
.tile-bg-preview[data-tile-bg-preview="diagonal-split"] { background: linear-gradient(135deg, #ffd400 50%, #ffffff 50%); }

.tile-bg-grid {
  padding: 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

/* ── Poster background picker (🖼️ Cenário) ── */
.poster-bg-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.poster-bg-actions .file-button-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  height: 38px;
}

.poster-bg-fit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.poster-bg-fit-toggle select {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.poster-bg-grid {
  padding: 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.poster-bg-choice {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-strong);
  /* Fixed two-row layout: thumb takes whatever's left, label always gets its own row.
     Was using aspect-ratio + flex which could push the label out of view. */
  display: grid;
  grid-template-rows: 1fr auto;
  height: 200px;
  padding: 0;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}

.poster-bg-choice:hover {
  border-color: var(--brand-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30, 91, 166, 0.12);
}

.poster-bg-choice.active {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(242, 108, 31, 0.25);
}

.poster-bg-choice .poster-bg-thumb {
  background-size: cover;
  background-position: center;
  background-color: #1d2a3a;
  min-height: 0;  /* lets the grid row shrink to fit so the name always shows */
}

/* Logo and destaque thumbnails — use `contain` so the whole image is visible
   with letterbox padding, since these are usually transparent PNGs. */
.poster-bg-choice .poster-bg-thumb.thumb-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--brand-blue-soft);
}

/* Miniatura como <img> (em vez de background-image) — usada no picker de
   destaque pra contornar o teto de memória de imagens do Safari iOS, que
   deixava as background-images cinza. object-fit:contain replica o letterbox. */
.poster-bg-choice .poster-bg-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.poster-bg-choice .poster-bg-name {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.25;
  /* Limit to 2 lines so a long name doesn't push the thumb area. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

.poster-bg-hint {
  padding: 12px 18px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.picker-section-title {
  margin: 4px 18px 8px;
  padding: 12px 0 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-blue);
}
.picker-section-title:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.poster-bg-hint code {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.tile-bg-choice {
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.tile-bg-choice:hover { border-color: var(--accent); }

.tile-bg-choice.active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(19, 159, 81, 0.18);
}

.tile-bg-preview {
  width: 100%;
  height: 92px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.tile-bg-preview[data-tile-bg-preview="auto"] {
  background: repeating-linear-gradient(45deg, #f5f7fa 0 8px, #e4e8ee 8px 16px);
}
.tile-bg-preview[data-tile-bg-preview="white"] { background: #fff; }
.tile-bg-preview[data-tile-bg-preview="cream"] { background: #fff7e0; }
.tile-bg-preview[data-tile-bg-preview="light-yellow"] { background: #fff3bd; }
.tile-bg-preview[data-tile-bg-preview="light-blue"] { background: #e3f1ff; }
.tile-bg-preview[data-tile-bg-preview="light-green"] { background: #e7fbe9; }
.tile-bg-preview[data-tile-bg-preview="light-pink"] { background: #ffe6ee; }
.tile-bg-preview[data-tile-bg-preview="light-gray"] { background: #f0f2f5; }
.tile-bg-preview[data-tile-bg-preview="yellow-bold"] { background: #ffd400; }
.tile-bg-preview[data-tile-bg-preview="red-bold"] { background: #d6111a; }
.tile-bg-preview[data-tile-bg-preview="dark"] { background: #1a1a22; }
.tile-bg-preview[data-tile-bg-preview="gradient-warm"] { background: linear-gradient(180deg, #fff3bd, #ffb877); }
.tile-bg-preview[data-tile-bg-preview="gradient-cool"] { background: linear-gradient(180deg, #d8efff, #c2dcff); }
.tile-bg-preview[data-tile-bg-preview="gradient-sunset"] { background: linear-gradient(180deg, #ffd470, #ff8a6f, #ff5fa0); }
.tile-bg-preview[data-tile-bg-preview="dots"] {
  background-color: #ffffff;
  background-image: radial-gradient(#ffd400 1.6px, transparent 1.7px);
  background-size: 14px 14px;
}
.tile-bg-preview[data-tile-bg-preview="stripes"] {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg, #ffe98a 0 8px, transparent 8px 18px);
}

.tile-bg-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

[data-tag-style="yellow"] .price-row { background: linear-gradient(180deg, #fff8c2, #ffd400 55%, #f6a800); color: #c40010; }
[data-tag-style="yellow"] .price-row .currency,
[data-tag-style="yellow"] .price-row .price { color: #c40010; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }

[data-tag-style="black"] .price-row { background: #111; color: #ffd400; }
[data-tag-style="black"] .price-row .currency,
[data-tag-style="black"] .price-row .price { color: #ffd400; }

[data-tag-style="green"] .price-row { background: linear-gradient(180deg, #1bcd5d, #0a8a3e); color: #fff; }

[data-tag-style="blue"] .price-row { background: linear-gradient(180deg, #2492ff, #0c5fc6); color: #fff; }

[data-tag-style="pink"] .price-row { background: linear-gradient(180deg, #ff5fa0, #d8246d); color: #fff; }

[data-tag-style="purple"] .price-row { background: linear-gradient(180deg, #8a4cff, #5a23c0); color: #fff; }

[data-tag-style="orange"] .price-row { background: linear-gradient(180deg, #ff9c2a, #d56a00); color: #fff; }

[data-tag-style="white"] .price-row { background: #fff; color: #c40010; border: 2px solid #c40010; }
[data-tag-style="white"] .price-row .currency,
[data-tag-style="white"] .price-row .price { color: #c40010; }

[data-tag-style="outline"] .price-row { background: transparent; color: #c40010; border: 2.5px solid #c40010; }
[data-tag-style="outline"] .price-row .currency,
[data-tag-style="outline"] .price-row .price { color: #c40010; }

[data-tag-style="diamond"] .price-row {
  background: linear-gradient(180deg, #fff8c2, #ffd400 55%, #f6a800);
  color: #c40010;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  border: 0;
  border-radius: 0;
}
[data-tag-style="diamond"] .price-row .currency,
[data-tag-style="diamond"] .price-row .price { color: #c40010; }

[data-tag-style="tag"] .price-row {
  background: #e20d14;
  color: #fff;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%);
  border-radius: 0;
}

[data-tag-style="burst"] .price-row {
  background: #ffd400;
  color: #c40010;
  clip-path: polygon(0 25%, 8% 0, 16% 25%, 28% 0, 40% 25%, 52% 0, 64% 25%, 76% 0, 88% 25%, 100% 0, 100% 75%, 88% 100%, 76% 75%, 64% 100%, 52% 75%, 40% 100%, 28% 75%, 16% 100%, 8% 75%, 0 100%);
  border-radius: 0;
  padding: 6px 8px;
}
[data-tag-style="burst"] .price-row .currency,
[data-tag-style="burst"] .price-row .price { color: #c40010; }

[data-tag-style="teal"] .price-row { background: linear-gradient(180deg, #2dd4bf, #0e7c70); color: #fff; }
[data-tag-style="navy"] .price-row { background: linear-gradient(180deg, #1e3a8a, #0a1f4a); color: #fff; }
[data-tag-style="gold"] .price-row { background: linear-gradient(180deg, #fff8c2, #d4a017 50%, #8a6708); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
[data-tag-style="gold"] .price-row .currency,
[data-tag-style="gold"] .price-row .price { color: #fff; }
[data-tag-style="silver"] .price-row { background: linear-gradient(180deg, #f5f7fa, #b8c1cc 60%, #6f7782); color: #1a1a22; }
[data-tag-style="silver"] .price-row .currency,
[data-tag-style="silver"] .price-row .price { color: #1a1a22; }
[data-tag-style="mint"] .price-row { background: linear-gradient(180deg, #a3eccd, #2db58a); color: #08311e; }
[data-tag-style="mint"] .price-row .currency,
[data-tag-style="mint"] .price-row .price { color: #08311e; }
[data-tag-style="coral"] .price-row { background: linear-gradient(180deg, #ff9173, #e25c45); color: #fff; }
[data-tag-style="outline-yellow"] .price-row { background: transparent; border: 2.5px solid #ffd400; color: #ffd400; }
[data-tag-style="outline-yellow"] .price-row .currency,
[data-tag-style="outline-yellow"] .price-row .price { color: #ffd400; }
[data-tag-style="pill"] .price-row { background: linear-gradient(180deg, #e20d14, #a8090e); color: #fff; border-radius: 999px; }
[data-tag-style="arrow-right"] .price-row { background: linear-gradient(180deg, #e20d14, #a8090e); color: #fff; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); border-radius: 0; }
[data-tag-style="embossed"] .price-row { background: linear-gradient(180deg, #ff3535 0%, #d61015 50%, #8a0a10 100%); color: #fff; border-top: 2px solid rgba(255,255,255,0.4); border-bottom: 2px solid rgba(0,0,0,0.5); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3); }
[data-tag-style="vintage"] .price-row { background: linear-gradient(180deg, #d4b886, #8a6c3e); color: #2a1a08; border: 2px dashed #5a3818; }
[data-tag-style="vintage"] .price-row .currency,
[data-tag-style="vintage"] .price-row .price { color: #2a1a08; }
[data-tag-style="fire-grad"] .price-row { background: linear-gradient(135deg, #ffd400, #ff6a00 45%, #c40010); color: #fff; }
[data-tag-style="ocean-grad"] .price-row { background: linear-gradient(135deg, #2dd4bf, #2492ff 50%, #1e3a8a); color: #fff; }
[data-tag-style="tropical"] .price-row { background: linear-gradient(135deg, #1bcd5d, #ffd400 50%, #ff5fa0); color: #fff; }

[data-tag-style="neon"] .price-row {
  background: #0a0a14;
  color: #00ffaa;
  border: 2px solid #00ffaa;
  box-shadow: 0 0 12px rgba(0, 255, 170, 0.6), inset 0 0 8px rgba(0, 255, 170, 0.4);
}
[data-tag-style="neon"] .price-row .currency,
[data-tag-style="neon"] .price-row .price { color: #00ffaa; text-shadow: 0 0 6px rgba(0, 255, 170, 0.8); }

[data-tag-style="stamp"] .price-row {
  background: #c40010;
  color: #fff;
  transform: rotate(-3deg);
  border: 2.5px dashed #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.32);
}

[data-tag-style="ribbon"] .price-row {
  background: linear-gradient(180deg, #e20d14 0%, #9b0008 100%);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  border-radius: 0;
}

.price-tag-dialog {
  width: min(880px, 100%);
}

.price-tag-grid {
  padding: 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.price-tag-choice {
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #f5f7fa;
  padding: 18px 14px 12px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.price-tag-choice:hover {
  border-color: var(--accent);
}

.price-tag-choice.active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(19, 159, 81, 0.18);
}

.price-tag-choice .preview-row {
  width: 100%;
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  border-radius: 5px;
  /* OBS: background/color removidos pra deixar as regras [data-tag-style="X"] .price-row
     definirem a cor de cada amostra. Antes esse background:red sobrescrevia tudo. */
}

.price-tag-choice .preview-row .currency { font-size: 10px; font-weight: 900; }
.price-tag-choice .preview-row .price { font-size: 22px; font-weight: 950; line-height: 0.95; }

.price-tag-choice .preview-row[data-tag-style="yellow"] { background: linear-gradient(180deg, #fff8c2, #ffd400 55%, #f6a800); color: #c40010; }
.price-tag-choice .preview-row[data-tag-style="black"] { background: #111; color: #ffd400; }
.price-tag-choice .preview-row[data-tag-style="green"] { background: linear-gradient(180deg, #1bcd5d, #0a8a3e); color: #fff; }
.price-tag-choice .preview-row[data-tag-style="blue"] { background: linear-gradient(180deg, #2492ff, #0c5fc6); color: #fff; }
.price-tag-choice .preview-row[data-tag-style="pink"] { background: linear-gradient(180deg, #ff5fa0, #d8246d); color: #fff; }
.price-tag-choice .preview-row[data-tag-style="purple"] { background: linear-gradient(180deg, #8a4cff, #5a23c0); color: #fff; }
.price-tag-choice .preview-row[data-tag-style="orange"] { background: linear-gradient(180deg, #ff9c2a, #d56a00); color: #fff; }
.price-tag-choice .preview-row[data-tag-style="white"] { background: #fff; color: #c40010; border: 2px solid #c40010; }
.price-tag-choice .preview-row[data-tag-style="outline"] { background: transparent; color: #c40010; border: 2.5px solid #c40010; }
.price-tag-choice .preview-row[data-tag-style="diamond"] { clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%); border-radius: 0; background: linear-gradient(180deg, #fff8c2, #ffd400, #f6a800); color: #c40010; padding: 8px 16px; }
.price-tag-choice .preview-row[data-tag-style="tag"] { clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%); border-radius: 0; padding: 6px 14px; }
.price-tag-choice .preview-row[data-tag-style="burst"] { clip-path: polygon(0 25%, 8% 0, 16% 25%, 28% 0, 40% 25%, 52% 0, 64% 25%, 76% 0, 88% 25%, 100% 0, 100% 75%, 88% 100%, 76% 75%, 64% 100%, 52% 75%, 40% 100%, 28% 75%, 16% 100%, 8% 75%, 0 100%); border-radius: 0; background: #ffd400; color: #c40010; padding: 10px 12px; }
.price-tag-choice .preview-row[data-tag-style="neon"] { background: #0a0a14; color: #00ffaa; border: 2px solid #00ffaa; box-shadow: 0 0 8px rgba(0, 255, 170, 0.5); }
.price-tag-choice .preview-row[data-tag-style="stamp"] { transform: rotate(-3deg); border: 2.5px dashed #fff; }
.price-tag-choice .preview-row[data-tag-style="ribbon"] { clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); border-radius: 0; background: linear-gradient(180deg, #e20d14, #9b0008); padding: 6px 18px; }
/* Preço solto: o card do modal é claro — mini-fundo vermelho só no thumb pra
   dar contexto ao texto branco (no encarte de verdade não tem fundo nenhum). */
.price-tag-choice .preview-row[data-tag-style="flutuante"] { background: radial-gradient(circle at 50% 30%, #d31115, #6b0508); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); border: none; }

.price-tag-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.ghost-button.wide {
  width: auto;
  padding: 0 14px;
}

/* Painel lateral de edição rápida do produto (abre ao clicar em qualquer tile do encarte). */
.product-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 92vw);
  height: 100vh;
  background: #ffffff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  z-index: 40;
  display: flex;
  flex-direction: column;
  animation: sidebar-slide-in 0.22s ease-out;
}
.product-sidebar[hidden] { display: none; }
@keyframes sidebar-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.product-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--brand-blue, #1e5ba6);
  color: #fff;
}
.product-sidebar-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-sidebar-head .modal-close-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
.product-sidebar-head .modal-close-button:hover {
  background: rgba(255, 255, 255, 0.3);
}
.product-sidebar-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-thumb {
  width: 100%;
  height: 140px;
  background: #f4f6f8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar-thumb img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-field > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6470;
}
.sidebar-field > input {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
  background: #fff;
}
.sidebar-field > input:focus {
  outline: 2px solid var(--brand-blue, #1e5ba6);
  outline-offset: -1px;
}
/* Chips de cópias da imagem (1× / 2× / 3×) na sidebar */
.sidebar-copies {
  display: flex;
  gap: 6px;
}
.sidebar-copy-chip {
  flex: 1 1 0;
  min-height: 34px;
  background: #fff;
  color: #5a6470;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.sidebar-copy-chip:hover {
  background: var(--brand-blue-soft, #e8f0fc);
}
.sidebar-copy-chip.active {
  background: var(--brand-blue, #1e5ba6);
  color: #fff;
  border-color: var(--brand-blue, #1e5ba6);
}

/* Botões de reordenar (subir / descer / topo / final) na sidebar */
.sidebar-reorder {
  display: flex;
  gap: 6px;
}
.sidebar-reorder-btn {
  flex: 1 1 0;
  min-height: 36px;
  background: #fff;
  color: var(--brand-blue, #1e5ba6);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.sidebar-reorder-btn:hover {
  background: var(--brand-blue, #1e5ba6);
  color: #fff;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.sidebar-actions .primary-button,
.sidebar-actions .text-tool-button,
.sidebar-actions .danger-button {
  width: 100%;
  min-height: 38px;
  margin: 0;
}

.image-picker-modal {
  position: fixed;
  inset: 0;
  /* z-index 9500: precisa ser MAIOR que o tile-editor-modal (9000) pra
     que selo/fundo pickers apareçam por cima quando abertos a partir
     do tile editor mobile. */
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 18, 25, 0.68);
}

.image-picker-modal[hidden] {
  display: none;
}

.image-picker-dialog {
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

/* Single scrollable body for pickers with multiple sections (artes + cor da faixa). */
.image-picker-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.image-picker-body .poster-bg-grid,
.image-picker-body .tile-bg-grid {
  overflow: visible;
  max-height: none;
}

.image-picker-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.image-picker-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.image-picker-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.modal-close-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
  color: #1d2530;
  font-size: 28px;
  line-height: 1;
}

.image-picker-grid {
  padding: 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  /* Faz o grid encolher antes da barra de paginação fixar no rodapé. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Barra de paginação ("Voltar ao início" / "Mais variações") fixa no rodapé do dialog. */
.image-picker-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}
.image-picker-pagination .text-tool-button[hidden] { display: none; }
.image-picker-pagination .primary-button { margin-left: auto; }

/* Bloco de ajuda no topo do picker: banner de upload + fotos parecidas usadas antes. */
.image-picker-helpers {
  flex-shrink: 0;
  padding: 14px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.picker-upload-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff8e1;
  border: 1px solid #ffd966;
  border-radius: 8px;
  padding: 10px 14px;
}
.picker-upload-text {
  font-size: 13px;
  color: #5a4500;
  line-height: 1.35;
}
.picker-upload-text strong {
  color: #3a2d00;
}
.picker-upload-button {
  flex-shrink: 0;
  white-space: nowrap;
}

.picker-memory-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.picker-memory-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.picker-memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.picker-memory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1.5px solid var(--brand-blue);
  border-radius: 8px;
  background: #f3f7ff;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.1s ease;
}
.picker-memory-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 91, 166, 0.16);
}
.picker-memory-card img {
  width: 100%;
  height: 80px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.picker-memory-card span {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-blue);
}

.image-choice {
  min-height: 198px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
  color: #20242a;
  font-weight: 800;
  text-align: center;
}

.image-choice:hover,
.image-choice.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(12, 116, 242, 0.18);
}

.image-choice img {
  width: 100%;
  height: 148px;
  object-fit: contain;
  background: #f5f7fa;
  border-radius: 6px;
}

/* Esqueleto enquanto o dedup visual procura imagens DIFERENTES pra grade */
.image-choice.loading {
  border-style: dashed;
  background: linear-gradient(100deg, #f0f3f7 40%, #f9fbfd 50%, #f0f3f7 60%);
  background-size: 200% 100%;
  animation: image-choice-shimmer 1.1s linear infinite;
  cursor: default;
}
@keyframes image-choice-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
.image-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 16px;
  color: #5a6573;
  font-size: 14px;
  background: #f7f9fc;
  border: 2px dashed #d6dde6;
  border-radius: 10px;
}

/* Selo das fotos vindas do catálogo compartilhado Mercado Studio */
.image-choice.from-catalog {
  position: relative;
}
.image-choice.from-catalog::before {
  content: "🏬 Catálogo";
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.file-button input {
  display: none;
}

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
}

.price-options {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
  margin-top: 8px;
  align-items: end;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #404957;
  font-size: 13px;
}

.editor-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  height: 34px;
  min-width: 88px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: #6d7480;
  border-radius: 6px;
  font-weight: 700;
  cursor: grab;
}

.reorder-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reorder-btn {
  height: 34px;
  width: 34px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: #4f5966;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.reorder-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.remove-product {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: #ffe6e4;
  color: #bc241a;
  font-weight: 800;
  padding: 0 12px;
}

.theme-day .offer-tile {
  --tile-bg: #fff3bd;
}

.theme-leader {
  background: linear-gradient(160deg, #ff62ba 0%, #ffb300 50%, #7849ff 100%);
}

.theme-leader .poster-header {
  background: linear-gradient(135deg, #ff43b4, #ff8a00 55%, #6e3cff);
}

.theme-leader .offer-tile {
  --tile-bg: #fff8dc;
}

.theme-black {
  background: #101215;
}

.theme-black .poster-header {
  background: linear-gradient(135deg, #151515, #3b3d43 55%, #000);
}

.theme-black .offer-tile {
  --tile-bg: #f3f5f8;
}

.theme-fresh {
  background: linear-gradient(160deg, #14a15f, #f6d43b);
}

.theme-fresh .poster-header {
  background: linear-gradient(135deg, #078240, #23bd6b 60%, #f1bd18);
}

.theme-fresh .offer-tile {
  --tile-bg: #f2fff5;
}

.theme-meat-pro {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.35), transparent 50%),
    linear-gradient(135deg, #8a0510 0%, #d31115 45%, #6b0508 100%);
}

.theme-meat-pro .poster-header {
  background: transparent;
  min-height: 22%;
  padding: 1% 3%;
  border-radius: 0;
  overflow: visible;
}

.theme-meat-pro .poster-header::before { display: none; }

.theme-meat-pro .poster-kicker {
  font-family: "Impact", "Arial Black", "Oswald", sans-serif;
  font-size: 11cqw;
  background: linear-gradient(180deg, #fff8d2 0%, #ffd400 35%, #f59500 75%, #c66200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45)) drop-shadow(0 6px 8px rgba(0,0,0,0.4));
  font-style: italic;
  line-height: 0.95;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

.theme-meat-pro .poster h1 {
  font-family: "Impact", "Arial Black", "Oswald", sans-serif;
  font-size: 22cqw;
  background: linear-gradient(180deg, #fff8d2 0%, #ffd400 35%, #f59500 75%, #b85800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.55)) drop-shadow(0 10px 14px rgba(0,0,0,0.45));
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.theme-meat-pro .discount-symbol:not(.has-logo) {
  color: #ffd400;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.5));
}

.theme-meat-pro .offer-tile {
  --tile-bg: linear-gradient(180deg, #d6111a 0%, #b1090f 100%);
  border: 3px solid #fff5b8;
  border-radius: 18px;
  padding: 8px 8px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.32), inset 0 0 0 2px rgba(255,255,255,0.15);
  position: relative;
}

.theme-meat-pro .product-art {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

.theme-meat-pro .product-name {
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,0.5);
}

.theme-meat-pro [data-tag-style="classic"] .price-row {
  background: linear-gradient(180deg, #fff8c2 0%, #ffd400 50%, #f6a800 100%);
  color: #c40010;
  margin: 6px -4px -4px;
  padding: 5px 18px;
  border-radius: 4px;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  border: 0;
  font-weight: 950;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.32));
}

.theme-meat-pro [data-tag-style="classic"] .price-row .currency,
.theme-meat-pro [data-tag-style="classic"] .price-row .price {
  color: #c40010;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.theme-meat-pro .poster-footer {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-weight: 900;
}

.theme-detona {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.4), transparent 55%),
    linear-gradient(135deg, #2a2823 0%, #4a3f33 50%, #1d1c1a 100%);
}

.theme-detona .poster-header {
  background: linear-gradient(180deg, #5a3b1f 0%, #8b5a2b 50%, #3d2814 100%);
  border: 2px solid #c08f4a;
  box-shadow: inset 0 0 0 1px rgba(255,200,120,0.3), 0 6px 14px rgba(0,0,0,0.4);
}

.theme-detona .poster-header::before { display: none; }

.theme-detona .poster-kicker {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 9cqw;
  background: linear-gradient(180deg, #fff0c0 0%, #ffd24a 50%, #b8841e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.6));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.theme-detona .poster h1 {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 18cqw;
  background: linear-gradient(180deg, #ededed 0%, #b3b3b3 35%, #e8e8e8 55%, #6a6a6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.65)) drop-shadow(0 8px 12px rgba(0,0,0,0.5));
  letter-spacing: 0.01em;
  line-height: 0.85;
  text-shadow: none;
}

.theme-detona .discount-symbol:not(.has-logo) {
  color: #ffb45a;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.6));
}

.theme-detona .offer-tile {
  --tile-bg: linear-gradient(180deg, #f4ecd9, #d8c79d);
  border: 2px solid #8b5a2b;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.32), inset 0 0 0 2px rgba(255,255,255,0.3);
}

.theme-detona .product-name { color: #2a1a08; }

.theme-detona [data-tag-style="classic"] .price-row {
  background: linear-gradient(180deg, #c8302a 0%, #8a0e0a 100%);
  color: #fff;
  border: 2px solid #ffd24a;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}

.theme-detona .poster-footer { color: #ffd24a; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

/* ════════════════════════════════════════════════════════════════════════
   TEMA FLUTUANTE — réplica do flyer de referência do Paulo (Sexta da Carne
   "flutuante"): fundo vermelho radial, boxes BEM atenuados, foto com sombra
   3D e preço SOLTO (texto branco, sem etiqueta). Cada regra daqui tem o
   equivalente no canvas do export (paintBackground/paintHeader/paintTile).
   ════════════════════════════════════════════════════════════════════════ */
.theme-flutuante {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.35), transparent 50%),
    linear-gradient(135deg, #8a0510 0%, #d31115 45%, #6b0508 100%);
}

.theme-flutuante .poster-header {
  background: transparent;
  min-height: 22%;
  padding: 1% 3%;
  border-radius: 0;
  overflow: visible;
}

.theme-flutuante .poster-header::before { display: none; }

.theme-flutuante .poster-kicker {
  font-family: "Impact", "Arial Black", "Oswald", sans-serif;
  font-size: 11cqw;
  background: linear-gradient(180deg, #fff8d2 0%, #ffd400 35%, #f59500 75%, #c66200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45)) drop-shadow(0 6px 8px rgba(0,0,0,0.4));
  font-style: italic;
  line-height: 0.95;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

.theme-flutuante .poster h1 {
  font-family: "Impact", "Arial Black", "Oswald", sans-serif;
  font-size: 22cqw;
  background: linear-gradient(180deg, #fff8d2 0%, #ffd400 35%, #f59500 75%, #b85800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.55)) drop-shadow(0 10px 14px rgba(0,0,0,0.45));
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.theme-flutuante .discount-symbol:not(.has-logo) {
  color: #ffd400;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.5));
}

/* Boxes ATENUADOS: véu escuro translúcido + contorno suave. O valor do
   --tile-bg TEM que bater com TILE_THEME_STYLES.flutuante.bg no app.js
   (prévia e PNG multiplicam o mesmo slider de transparência por cima). */
.theme-flutuante .offer-tile {
  --tile-bg: rgba(0, 0, 0, 0.28);
  border: 1.5px solid color-mix(in srgb, rgba(255, 255, 255, 0.16) var(--tile-opacity, 100%), transparent);
  border-radius: 14px;
  box-shadow: none;
}

/* Sombra 3D nas fotos (o canvas lê este filter e replica no PNG) */
.theme-flutuante .product-art {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.theme-flutuante .product-name {
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  /* Anton: alto e condensado, igual ao flyer de referência. O canvas lê este
     font-family do DOM e replica no PNG (drawPoster já espera document.fonts). */
  font-family: "Anton", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Anton é condensado: no mesmo tamanho parece menor que a fonte antiga. Nos
   boxes NORMAIS (não-destaque) o nome ficava pequeno demais — subo o tamanho
   só aqui (o destaque/.is-hero já estava bom e fica intocado). O canvas lê o
   font-size do DOM, então o PNG acompanha. */
.theme-flutuante .offer-tile:not(.is-hero) .product-name {
  /* Tamanho que SE ADAPTA ao box: pega o MENOR entre 14.25% da largura (cqi) e
     12% da altura (cqb). Assim, em box alto+largo o nome fica grande (bom), e em
     box baixo (grades densas tipo 4x4/3x3) ele encolhe pra não esmagar a foto.
     O .offer-tile tem container-type:size, então cqb (altura) funciona.
     O canvas lê o font-size já resolvido do DOM → o PNG acompanha. */
  font-size: clamp(11px, min(12cqi, 8.5cqb), 25.5px);
  line-height: 1.05;
  /* Nome longo pode usar até 3 linhas (a foto flexiona) em vez de cortar em 2. */
  -webkit-line-clamp: 3;
}

.theme-flutuante .product-note { color: rgba(255, 255, 255, 0.82); }
.theme-flutuante .old-price-row { color: rgba(255, 255, 255, 0.78); }
.theme-flutuante .old-price-row .old-price { color: #fff; }

/* Preço SOLTO — 1 bloco, 2 usos: padrão do tema Flutuante (classic) E estilo
   "Flutuante" do picker de etiquetas em QUALQUER tema. Sem width/aspect-ratio
   (não briga com as faixas do formato Story, que só mexem em geometria). */
.theme-flutuante [data-tag-style="classic"] .price-row,
[data-tag-style="flutuante"] .price-row {
  background: transparent;
  border: none;
  box-shadow: none;
  clip-path: none;
  filter: none;
  padding: 0 4px;
  margin-top: 0;
  min-width: 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.theme-flutuante [data-tag-style="classic"] .price-row .currency,
[data-tag-style="flutuante"] .price-row .currency {
  color: #fff;
  font-size: clamp(7px, 6.5cqi, 15px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  font-family: "Archivo Black", Arial, sans-serif;
  font-weight: 400;
}

.theme-flutuante [data-tag-style="classic"] .price-row .price,
[data-tag-style="flutuante"] .price-row .price {
  color: #fff;
  /* Número GRANDE (igual à referência) — Archivo Black gordo. */
  font-size: clamp(13px, 17cqi, 34px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  font-family: "Archivo Black", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Centavos do MESMO tamanho do número (no flyer de referência o ",99" é igual
   ao "27"). O canvas mede .price small do DOM, então o PNG acompanha. */
.theme-flutuante [data-tag-style="classic"] .price-row .price small,
[data-tag-style="flutuante"] .price-row .price small {
  font-size: 1em;
}

/* Herói no Flutuante: continua flutuante (sem amarelo), só MAIOR pela grade.
   Precisa de !important pra vencer a regra base do .is-hero. */
.theme-flutuante .offer-tile.is-hero,
.theme-flutuante .offer-tile.is-hero[data-tile-bg] {
  --tile-bg: rgba(0, 0, 0, 0.28) !important;
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.16) var(--tile-opacity, 100%), transparent) !important;
  box-shadow: none !important;
}

.theme-flutuante .offer-tile.is-hero .product-name {
  color: #fff !important;
}

.theme-flutuante .offer-tile.is-hero .product-note {
  color: rgba(255, 255, 255, 0.82) !important;
}

.theme-flutuante .offer-tile.is-hero .old-price-row {
  color: rgba(255, 255, 255, 0.78) !important;
}

.theme-flutuante .offer-tile.is-hero .price-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

.theme-flutuante .offer-tile.is-hero .price-row .currency,
.theme-flutuante .offer-tile.is-hero .price-row .price {
  color: #fff !important;
}

.theme-flutuante .poster-footer {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}

.poster-header-image {
  position: absolute;
  top: 4%;
  left: 4%;
  height: 92%;
  width: 90%;
  max-width: 90%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  z-index: 1;
}

.poster-header.has-logo .poster-header-image {
  width: 60%;
  max-width: 60%;
}

.poster-header.has-image .poster-kicker,
.poster-header.has-image > div > h1 {
  visibility: hidden;
}

.poster-header.has-image .discount-symbol {
  z-index: 2;
}

.model-thumb.theme-detona {
  background: linear-gradient(135deg, #2a2823, #4a3f33 50%, #1d1c1a);
}
.model-thumb.theme-detona .model-thumb-header {
  background: linear-gradient(180deg, #8b5a2b, #3d2814);
}
.model-thumb.theme-detona .model-thumb-grid { background-color: #f4ecd9; }

.theme-card .theme-thumb.theme-detona span {
  background: linear-gradient(180deg, #fff0c0, #ffd24a, #b8841e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.model-thumb.theme-meat-pro {
  background: linear-gradient(135deg, #8a0510 0%, #d31115 50%, #6b0508 100%);
}

.model-thumb.theme-meat-pro .model-thumb-header {
  background: linear-gradient(180deg, #ffd400, #c66200);
}

.model-thumb.theme-meat-pro .model-thumb-grid {
  background-color: #fff;
}

.theme-card .theme-meta {
  position: relative;
}

.theme-card .theme-thumb.theme-meat-pro span {
  background: linear-gradient(180deg, #fff8d2, #ffd400 40%, #f59500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
  font-style: italic;
}

.model-thumb.theme-flutuante {
  background: linear-gradient(135deg, #8a0510 0%, #d31115 50%, #6b0508 100%);
}

.model-thumb.theme-flutuante .model-thumb-header {
  background: transparent;
}

.model-thumb.theme-flutuante .model-thumb-grid {
  background-color: rgba(0, 0, 0, 0.28);
}

.theme-card .theme-thumb.theme-flutuante span {
  font-size: 14px; /* "Flutuante" não cabe nos 23px padrão */
  background: linear-gradient(180deg, #fff8d2, #ffd400 40%, #f59500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
  font-style: italic;
}

/* Telas médias (notebooks ~1366-1600): encolhe a sidebar esquerda e a sidebar
   de produto pra sobrar espaço pro preview. */
@media (max-width: 1600px) {
  .workspace {
    grid-template-columns: 340px minmax(0, 1fr);
  }
  .product-sidebar { width: min(340px, 92vw); }
  body.has-product-sidebar .preview-stage {
    padding-right: calc(22px + min(340px, 92vw));
  }
}

@media (max-width: 1280px) {
  .workspace {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .product-sidebar { width: min(300px, 90vw); }
  body.has-product-sidebar .preview-stage {
    padding-right: calc(16px + min(300px, 90vw));
  }
  .product-sidebar-content { padding: 12px; gap: 9px; }
}

/* Telas pequenas (~1100px ou menos): sidebar de produto bem compacta pra sobrar
   o máximo de espaço pro preview. */
@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .product-sidebar { width: min(270px, 88vw); }
  body.has-product-sidebar .preview-stage {
    padding-right: calc(12px + min(270px, 88vw));
  }
  .product-sidebar-content { padding: 10px; gap: 8px; }
  .product-sidebar-head { padding: 10px 12px; }
  .product-sidebar-head h3 { font-size: 13px; }
}

@media (max-width: 860px) {
  .topbar {
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .brand {
    min-width: auto;
  }

  .topnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .preview-stage,
  .editor-panel {
    grid-column: 1;
  }

  .sidebar {
    max-height: none;
  }

  .theme-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-toolbar {
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .product-editor-inner,
  .editor-grid,
  .price-options {
    grid-template-columns: 1fr;
  }

  .image-preview {
    max-width: 110px;
  }
}

/* ============================================================================
   CAPA do encarte — página opcional com destaque + logo (escondida por padrão)
   ============================================================================ */
.poster-capa {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;   /* agrupa destaque + logo no centro (logo cola embaixo do destaque) */
  align-items: center;
  padding: 6% 6% 5%;
  box-sizing: border-box;
  z-index: 5;
}
.poster.is-capa .poster-header,
.poster.is-capa .product-grid,
.poster.is-capa .poster-footer {
  display: none !important;
}
.poster.is-capa .poster-capa {
  display: flex;
}
.poster-capa-destaque {
  flex: 0 1 auto;       /* tamanho do conteúdo (não estica) → logo cola logo abaixo */
  max-height: 52%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.poster-capa-destaque img {
  max-width: 95%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
  cursor: grab;
  transition: filter 0.15s;
}
.poster-capa-destaque img:hover {
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.4)) brightness(1.05);
}
.poster.poster-element-dragging .poster-capa-destaque img,
.poster.poster-element-dragging .poster-capa-logo img {
  cursor: grabbing;
}
.poster-capa-destaque:empty::before {
  content: "Escolha um destaque pra aparecer aqui";
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 20px;
}
.poster-capa-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 0 0 auto;
  max-height: 40%;       /* logo ~3x maior que antes (era 22%) */
  padding-top: 0;
  margin-top: 1.5%;      /* gap mínimo: logo quase colada ao destaque */
}
.poster-capa-logo img {
  width: 100%;           /* preenche a largura (antes ficava no tamanho natural, pequeno) */
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
  cursor: grab;
  transition: filter 0.15s;
}
.poster-capa-logo img:hover {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.35)) brightness(1.05);
}
.poster-capa-logo:empty::before {
  content: "Adicione a logo da loja";
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  padding: 8px;
}

/* Garante que o .poster funciona como container relativo pro capa absoluto */
.poster {
  position: relative;
}

/* Ajuste do badge "Capa" no contador de páginas */
.page-note.is-capa-page::after {
  content: " · CAPA";
  color: var(--brand-blue);
  font-weight: 800;
}

/* ============================================================================
   AUTH — overlay de login, menu do usuário, badge de trial, locks premium
   ============================================================================ */

/* Trava o body quando overlay aberto */
body.auth-locked {
  overflow: hidden;
}
body.auth-locked .app-shell {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

/* Overlay full-screen */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #16243d;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.auth-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.4px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}
.auth-overlay[hidden] { display: none; }

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 18px;
  padding: 30px 30px 32px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 16px;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #ffd400;
  border-radius: 18px 18px 0 0;
}
.auth-card-head {
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.auth-card-logo {
  height: 132px;
  width: auto;
  max-width: 78%;
}
.auth-card-head h1 {
  font-size: 22px;
  margin: 0;
  color: #16243d;
}
.auth-card-head p {
  margin: 0;
  font-size: 14px;
  color: #5a6573;
  line-height: 1.5;
}
.auth-card-head p strong {
  background: #ffd400;
  color: #5a4200;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f0f3f7;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.auth-tab {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #5a6573;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active {
  background: #fff;
  color: #d65b15;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-form {
  display: grid;
  gap: 12px;
}
.auth-form[hidden] { display: none; }

.auth-field {
  display: grid;
  gap: 4px;
}
.auth-field span {
  font-size: 12px;
  font-weight: 700;
  color: #5a6573;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-field input {
  border: 1.5px solid #d6dde6;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.auth-field input:focus {
  border-color: #f26c1f;
  box-shadow: 0 0 0 3px rgba(242, 108, 31, 0.15);
}

.auth-submit {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
}

.auth-link {
  text-align: center;
  font-size: 13px;
  color: #1e5ba6;
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }

.auth-fineprint {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: #5a6573;
  line-height: 1.4;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9aa3b0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e1e6ed;
}

.auth-google {
  width: 100%;
  background: #fff;
  border: 1.5px solid #d6dde6;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #20242a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.auth-google:hover {
  background: #f7f9fc;
  border-color: #1e5ba6;
}
.auth-google-icon { flex: none; }

.auth-message {
  min-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.auth-message.error   { color: #c40010; }
.auth-message.success { color: #1a8b3a; }
.auth-message.info    { color: #5a6573; }

/* ----------------------------------------------------------------------------
   Tela "Cheque seu email" — aparece depois do cadastro
   ---------------------------------------------------------------------------- */
.auth-check-email {
  display: grid;
  gap: 14px;
  text-align: center;
}
.auth-check-email[hidden] { display: none; }

.auth-check-email-icon {
  font-size: 64px;
  line-height: 1;
  margin: 8px 0;
  animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.auth-check-email h2 {
  margin: 0;
  color: #1e5ba6;
  font-size: 22px;
  font-weight: 800;
}

.auth-check-email-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #20242a;
}
.auth-check-email-body strong {
  color: #1e5ba6;
  word-break: break-all;
}

.auth-check-email-instructions {
  margin: 0;
  padding: 14px;
  background: #d4e7ff;
  border: 1.5px solid #1e5ba6;
  border-radius: 10px;
  font-size: 14px;
  color: #1e5ba6;
  line-height: 1.4;
}

.auth-check-email-tips {
  background: #fff8d9;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  font-size: 13px;
  color: #5a6573;
}
.auth-check-email-tips p {
  margin: 0 0 6px;
  font-weight: 600;
}
.auth-check-email-tips ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.auth-check-email-tips li {
  margin: 4px 0;
  line-height: 1.4;
}
.auth-check-email-tips code {
  background: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid #e1e6ed;
}

#authResendEmailButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   Menu do usuário no topbar
   ---------------------------------------------------------------------------- */
.user-menu-slot {
  position: relative;
  display: flex;
  align-items: center;
}
.user-menu {
  position: relative;
}
.user-menu-trigger {
  background: transparent;
  border: 0;
  padding: 2px 6px 2px 2px;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* Badge premium em imagem (vire premium / conta premium) no topbar */
.user-premium-badge {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.12s;
}
.user-premium-badge.is-cta { cursor: pointer; }
.user-premium-badge.is-cta:hover { transform: scale(1.06); }
/* Imagem premium dentro do menu dropdown */
.user-menu-premium-img {
  display: block;
  height: 34px;
  width: auto;
  margin: 6px 0 6px;
}
/* Texto com status/dias do trial no menu */
.user-menu-trial {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.user-avatar-letter {
  background: #ffd400;
  color: #1e5ba6;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.user-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 8px;
  display: grid;
  gap: 4px;
  z-index: 200;
}
.user-menu-pop[hidden] { display: none; }
.user-menu-email {
  padding: 8px 10px 4px;
  font-size: 13px;
  font-weight: 700;
  color: #20242a;
  word-break: break-all;
}
.user-menu-status {
  margin: 0 10px 8px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  width: fit-content;
}
.user-menu-cta {
  background: linear-gradient(135deg, #ffd400 0%, #ffb500 100%);
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  color: #1e5ba6;
  cursor: pointer;
  text-align: center;
}
.user-menu-cta:hover {
  filter: brightness(1.05);
}
.user-menu-item {
  background: transparent;
  border: 0;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: #20242a;
}
.user-menu-item:hover { background: #f0f3f7; }

/* ----------------------------------------------------------------------------
   Badge de trial (no trigger e no popover)
   ---------------------------------------------------------------------------- */
.trial-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.trial-badge.dev      { background: #e4e8ee; color: #5a6573; }
.trial-badge.active   { background: #d6eedb; color: #1a8b3a; }
.trial-badge.urgent   { background: #ffe9b3; color: #8a5a00; }
.trial-badge.expired  { background: #ffd6d8; color: #c40010; }
.trial-badge.premium  { background: linear-gradient(135deg, #ffd400, #ffb500); color: #1e5ba6; }

/* ----------------------------------------------------------------------------
   Locks premium — botões/elementos bloqueados ganham 🔒 e tooltip
   ---------------------------------------------------------------------------- */
.premium-locked {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
}
.premium-locked::after {
  content: "🔒";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
button.premium-locked,
.toolbar-button-img.premium-locked {
  pointer-events: auto;
}

/* ----------------------------------------------------------------------------
   Modal de upgrade
   ---------------------------------------------------------------------------- */
.upgrade-dialog {
  max-width: 460px;
}
.upgrade-body {
  padding: 8px 24px 24px;
}
.upgrade-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.upgrade-features li {
  font-size: 14px;
  color: #20242a;
  padding: 8px 12px;
  background: #f7f9fc;
  border-radius: 8px;
  font-weight: 600;
}
.upgrade-cta-wrap {
  text-align: center;
}
.upgrade-soon {
  font-size: 13px;
  color: #5a6573;
  background: #fff8d9;
  padding: 12px;
  border-radius: 8px;
  margin: 0;
  border: 1px solid #ffe9b3;
}

/* ----------------------------------------------------------------------------
   Painel de DEV — testar trial sem mexer no console
   Aparece só quando a URL tem #dev ou ?dev=1
   ---------------------------------------------------------------------------- */
.trial-dev-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: #1a1f2b;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  padding: 12px;
  min-width: 220px;
  font-size: 12px;
  border: 1px solid #2d3548;
}
.trial-dev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.trial-dev-head strong {
  font-size: 13px;
  color: #ffd400;
}
.trial-dev-close {
  background: transparent;
  border: 0;
  color: #9aa3b0;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.trial-dev-close:hover { color: #fff; }
.trial-dev-current {
  font-size: 11px;
  color: #9aa3b0;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #0e1219;
  border-radius: 6px;
  font-family: monospace;
}
.trial-dev-buttons {
  display: grid;
  gap: 4px;
}
.trial-dev-buttons button {
  background: #2d3548;
  border: 0;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  transition: background 0.15s;
}
.trial-dev-buttons button:hover { background: #3d4863; }
.trial-dev-buttons button[data-trial-force="trial-active"]:hover  { background: #1a8b3a; }
.trial-dev-buttons button[data-trial-force="trial-expired"]:hover { background: #c40010; }
.trial-dev-buttons button[data-trial-force="premium"]:hover       { background: #b8860b; }
.trial-dev-buttons #trialDevTestDB:hover                          { background: #1e5ba6; }

/* ============================================================================
   MEUS ENCARTES — seletor no topbar + modal de listagem
   ============================================================================ */

/* Botão no topbar */
/* Aba "Meus Encartes" — mesmo visual das app-tabs, com subtítulo discreto
   mostrando o nome do encarte atualmente carregado. */
.app-tab-encartes {
  position: relative;
  padding-right: 18px;
}
.app-tab-encartes .encarte-tab-current {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.7;
  margin-top: 1px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-tab-encartes .encarte-tab-current:empty { display: none; }

/* Modal */
.encartes-dialog {
  max-width: 720px;
  min-height: 400px;
}
.encartes-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}
.encartes-count {
  font-size: 13px;
  color: #5a6573;
  font-weight: 600;
}
.encartes-list {
  padding: 16px 24px 24px;
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.encartes-loading,
.encartes-empty {
  text-align: center;
  padding: 40px 20px;
  color: #5a6573;
  font-size: 14px;
}
.encartes-empty {
  background: #f7f9fc;
  border-radius: 12px;
  border: 2px dashed #d6dde6;
}

.encarte-card {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.encarte-card:hover {
  border-color: var(--brand-blue);
  background: #f7fbff;
}
.encarte-card.current {
  border-color: var(--brand-blue);
  background: linear-gradient(135deg, #f7fbff 0%, #fff 100%);
}
.encarte-card.current::before {
  content: "● Atual";
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-blue);
  background: #d4e7ff;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 4px;
}
.encarte-card-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.encarte-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #20242a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font-family: inherit;
  padding: 2px 0;
}
.encarte-card-title:focus {
  background: #fff8d9;
  outline: 1px solid #ffd400;
  border-radius: 4px;
  padding: 2px 4px;
}
.encarte-card-meta {
  font-size: 11px;
  color: #5a6573;
  font-weight: 500;
}
.encarte-card-meta strong { color: #1e5ba6; }

.encarte-card-button {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #5a6573;
  transition: background 0.15s, color 0.15s;
}
.encarte-card-button:hover {
  background: #f0f3f7;
  color: #1e5ba6;
}
.encarte-card-button.danger:hover {
  background: #fdecea;
  color: #c40010;
}
.encarte-card-button.primary {
  background: var(--brand-blue);
  color: #fff;
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}
.encarte-card-button.primary:hover {
  background: #164a8a;
  color: #fff;
}

@media (max-width: 720px) {
  .app-tab-encartes .encarte-tab-current { max-width: 100px; }
  .encartes-dialog { max-width: 95vw; }
  .encarte-card { grid-template-columns: 1fr auto auto; }
  .encarte-card .encarte-card-button.primary { grid-column: 1 / -1; margin-top: 4px; }
}
.trial-dev-log {
  margin: 8px 0 0;
  padding: 8px;
  background: #0e1219;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  color: #d6dde6;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #2d3548;
}

/* ----------------------------------------------------------------------------
   MODO LIVRE — sistema de seleção com alças (portado do gerador de cartazes)
   Aplica-se aos elementos arrastáveis do encarte: logo, header art,
   capa destaque, capa logo. NÃO afeta o sistema atual quando desligado.
   ---------------------------------------------------------------------------- */

/* Hover affordance subtil — só ativa quando NÃO há nada selecionado, pra
   não competir com a borda forte da seleção. O contorno tracejado aparece
   só no hover pra indicar "esse elemento é clicável pra editar". */

/* ── Marca d'água (posicionada sobre o rodapé do encarte) ── */
.poster-watermark {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  height: 72px;
  width: auto;
  opacity: 0.65;
  mix-blend-mode: multiply; /* elimina fundo branco da imagem */
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
.poster-watermark[hidden] { display: none !important; }
.poster:not(.has-free-selection) [data-free-type]:hover {
  outline: 1.5px dashed rgba(242, 108, 31, 0.55);
  outline-offset: 4px;
}
/* O elemento selecionado não precisa de outline próprio — o overlay já desenha */
.poster [data-free-type].is-free-selected {
  outline: none !important;
}

/* Overlay flutuante de seleção: posicionado por JS sobre o elemento ativo.
   Fica DENTRO do .poster e usa coords em px (não-escalado) porque o poster
   tem transform-origin top center e o overlay herda a mesma escala visual. */
.free-selection {
  position: absolute;
  pointer-events: none;       /* só os filhos capturam eventos */
  z-index: 9500;
  outline: 2px solid #f26c1f;
  outline-offset: 0;
  box-sizing: border-box;
  /* left/top/width/height definidos por JS */
}
.free-selection[hidden] { display: none; }

/* Esconde o overlay laranja do modo livre quando qualquer modal de seleção está
   aberto (Destaque, Logo, Cenário, Etiqueta, Fundo, etc.) — evita o quadrado
   atrapalhar a visão do modal por cima. */
body:has(.image-picker-modal:not([hidden])) .free-selection {
  display: none !important;
}

/* Botão circular "✥ Mover" — fica CENTRALIZADO sobre o elemento selecionado.
   Clique e arraste a partir dele pra mover. */
.free-move-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #f26c1f;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08);
  transition: background 0.15s, transform 0.1s;
  z-index: 2;
}
.free-move-button:hover { background: #ff7d33; }
.free-move-button:active {
  cursor: grabbing;
  background: #d65b15;
  transform: translate(-50%, -50%) scale(0.94);
}
.free-move-icon { font-size: 22px; line-height: 1; font-weight: 700; }

/* Estado DESTRAVADO: botão fica verde, sinalizando que direct drag tá ativo.
   Outline da seleção também muda pra verde pra reforçar visualmente. */
.poster.is-free-unlocked .free-selection { outline-color: #16a34a; }
.poster.is-free-unlocked .free-move-button { background: #16a34a; }
.poster.is-free-unlocked .free-move-button:hover { background: #22c55e; }
.poster.is-free-unlocked .free-move-button:active { background: #15803d; }
.poster.is-free-unlocked .free-resize-handle { border-color: #16a34a; }

/* 8 alças de redimensionamento — quadradinhos brancos com borda laranja */
.free-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #f26c1f;
  border-radius: 3px;
  pointer-events: auto;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  touch-action: none;
}
.free-resize-handle.nw { top: -7px;  left: -7px;  cursor: nw-resize; }
.free-resize-handle.n  { top: -7px;  left: 50%; transform: translateX(-50%); cursor: n-resize; }
.free-resize-handle.ne { top: -7px;  right: -7px; cursor: ne-resize; }
.free-resize-handle.e  { top: 50%;   right: -7px; transform: translateY(-50%); cursor: e-resize; }
.free-resize-handle.se { bottom: -7px; right: -7px; cursor: se-resize; }
.free-resize-handle.s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.free-resize-handle.sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.free-resize-handle.w  { top: 50%;   left: -7px; transform: translateY(-50%); cursor: w-resize; }

/* Enquanto arrasta/redimensiona, suprime outline tracejado do hover pra não piscar */
.poster.is-free-busy [data-free-type]:hover { outline: none; }
.poster.is-free-busy { cursor: grabbing; }

/* Esconde o overlay no canvas/export — só visual em tela */
@media print { .free-selection { display: none !important; } }

/* ----------------------------------------------------------------------------
   Responsivo
   ---------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .auth-card { padding: 24px 20px; }
  .auth-card-head h1 { font-size: 19px; }
  .user-menu-trigger .trial-badge { display: none; }
}

/* ============================================================================
   MOBILE PANEL — interface simplificada para celulares (≤768px)
   No desktop fica oculto. No mobile, esconde sidebar/editor-panel/toolbar
   e mostra cards verticais com inputs simples. Reusa o poster do desktop
   como preview escalado.
   ============================================================================ */
.mobile-panel,
.mobile-bottombar {
  display: none;
}

@media (max-width: 768px) {
  /* ── Layout geral ── */
  body { background: #f4f6fa; }
  /* padding-bottom: 72px (botão) + safe-area-inset-bottom (Safari URL bar / notch)
     pra garantir que o último card não fique escondido atrás da bottombar. */
  .app-shell {
    min-height: 100vh;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar compacta */
  .topbar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
  }
  .brand-logo { height: 36px; }
  .topnav-spacer { display: none; }
  .top-actions {
    margin-left: auto;
    gap: 6px;
  }
  .top-actions .save-status,
  .top-actions #resetButton,
  .top-actions #downloadButton {
    display: none; /* mobile usa o botão grande de baixo */
  }

  /* Tabs ficam compactas */
  .app-tabs {
    width: 100%;
    order: 5;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px 0;
  }
  .app-tab {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  .app-tab .tab-icon { font-size: 14px; }
  .encarte-tab-current { max-width: 90px; font-size: 11px; }

  /* Esconde sidebar e editor panel do desktop */
  .workspace > .sidebar,
  .workspace > .editor-panel {
    display: none !important;
  }

  /* Esconde toolbar de preview (grade, colunas, zoom, pickers) */
  .preview-toolbar { display: none !important; }

  /* Esconde sidebar lateral de edição rápida de produto */
  .product-sidebar { display: none !important; }

  /* Esconde model-picker (tamanhos) — sempre exporta no padrão */
  .model-picker-section { display: none !important; }

  /* Workspace vira coluna única, preview centralizado */
  .workspace {
    display: block !important;
    padding: 0;
  }
  .preview-stage {
    padding: 12px !important;
    min-height: auto;
  }

  /* ARTBOARD FIXO no mobile também: NÃO sobrescrever a largura do .poster.
     O pôster mantém a largura canônica do formato (--artboard-w) e o encaixe
     na tela é feito SÓ pelo display (zoom/scale aplicado ao .poster-wrap por
     updatePreviewZoom). Assim o layout interno — fontes cqw, etiquetas, grade —
     fica IDÊNTICO ao desktop, e o PNG (fotocópia do DOM) também. */
  .poster-wrap {
    margin: 0 auto;
    min-height: 0;
  }

  /* Esconde controles de página/setas no mobile (export já gera todas as páginas) */
  .page-controls { padding: 8px 0; font-size: 13px; }

  /* Esconde overlay de modo livre no mobile (não tem touch handler ainda) */
  .free-selection { display: none !important; }

  /* ── Painel mobile ── */
  .mobile-panel {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #f4f6fa;
  }

  .mobile-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .mobile-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2a3a;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mobile-count {
    color: #6f7886;
    font-weight: 400;
    font-size: 13px;
  }

  /* Botão picker de destaque */
  .mobile-destaque-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #f4f6fa;
    border: 1px dashed #1e5ba6;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
  }
  .mobile-destaque-button:active { background: #e7ecf3; }
  .mobile-destaque-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: #fff center / contain no-repeat;
    border: 1px solid #d4d8de;
    flex-shrink: 0;
  }
  .mobile-destaque-label {
    flex: 1;
    font-size: 14px;
    color: #1e2a3a;
    font-weight: 500;
  }
  .mobile-destaque-arrow {
    font-size: 24px;
    color: #6f7886;
    line-height: 1;
  }

  /* Campos de busca de produtos */
  .mobile-card-search textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #d4d8de;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  .mobile-card-search textarea:focus { border-color: #1e5ba6; }

  /* Botões */
  .mobile-primary-btn,
  .mobile-secondary-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
  }
  .mobile-primary-btn {
    background: #1e5ba6;
    color: #fff;
  }
  .mobile-primary-btn:active { background: #18497f; }
  .mobile-secondary-btn {
    background: #f4f6fa;
    color: #1e5ba6;
    border: 1px dashed #1e5ba6;
    margin-top: 8px;
  }
  .mobile-primary-btn.is-loading {
    background: #5a83bb;
    cursor: wait;
  }

  /* Lista de produtos */
  .mobile-products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-product-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: #f4f6fa;
    border-radius: 8px;
  }
  .mobile-product-thumb {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #fff center / contain no-repeat;
    border: 1px solid #d4d8de;
    cursor: pointer;
  }
  .mobile-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .mobile-product-info input {
    border: 0;
    background: transparent;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
  }
  .mobile-product-info input:focus {
    background: #fff;
    outline: 1px solid #1e5ba6;
  }
  .mobile-product-info .mpname {
    font-weight: 600;
    color: #1e2a3a;
  }
  .mobile-product-info .mpprice {
    color: #1e5ba6;
    font-size: 13px;
    font-weight: 600;
  }
  .mobile-product-row .mpdelete {
    background: transparent;
    border: 0;
    color: #d63333;
    font-size: 22px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
  }
  .mobile-product-row .mpdelete:active {
    background: rgba(214, 51, 51, 0.12);
  }

  /* Campos de informações */
  .mobile-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .mobile-field:last-child { margin-bottom: 0; }
  .mobile-field > span {
    font-size: 12px;
    color: #5d6878;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .mobile-field input {
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #d4d8de;
    border-radius: 8px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
  }
  .mobile-field input:focus { border-color: #1e5ba6; }

  /* Card de dica */
  .mobile-card-tip {
    background: #fff8e1;
    border: 1px solid #ffe39a;
  }
  .mobile-card-tip p {
    margin: 0;
    font-size: 13px;
    color: #6b5a14;
    line-height: 1.4;
  }

  /* Barra inferior fixa com download.
     padding-bottom usa env(safe-area-inset-bottom) pra respeitar a barra do
     Safari iOS / notch — sem isso o botão de baixar fica escondido atrás
     da URL bar do Safari. Adiciona 12px de folga visual mínima. */
  .mobile-bottombar {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e6e9ee;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
  }
  .mobile-download-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-download-btn:active { background: var(--accent-strong); }
  .mobile-download-btn.is-loading {
    background: #f4a06a;
    cursor: wait;
  }

  /* ARTBOARD INVARIÁVEL: o interior do pôster (tiles, nome, etiquetas, grade,
     footer, selo, watermark) NÃO é reestilizado no mobile. O pôster é montado
     idêntico ao desktop e só encolhe pelo display (zoom). Assim o PNG mobile
     === PNG desktop por construção. As únicas regras mobile aqui são de SHELL
     e de affordance de toque — nada que relayoute o pôster. */

  /* Esconde modal de cartaz A4 no mobile (não faz sentido pra mobile) */
  #appTabCartaz { display: none !important; }
  /* E esconde o botão da aba também pra não confundir o usuário */
  .app-tab[data-app-tab="cartaz"] { display: none !important; }

  /* Indica que o tile é clicável (abre o editor de tile no mobile) */
  .offer-tile { cursor: pointer; }
  .offer-tile:active { transform: scale(0.98); }
}

/* ════════════════════════════════════════════════════════════════════
   MODAL DE AJUSTE DO TILE (mobile) — abre ao tocar num produto
   Bottom sheet com preview do tile + sliders pra escala/posição
   ════════════════════════════════════════════════════════════════════ */
/* Cor do rodapé no painel mobile: amostra de cor + botão "Usar do tema" lado a lado */
.mobile-footer-color-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-footer-color-controls input[type="color"] {
  width: 52px;
  height: 42px;
  padding: 2px;
  border: 1px solid #d4d8de;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.mobile-footer-color-controls .mobile-secondary-btn {
  flex: 1 1 auto;
  margin: 0;
}

.tile-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tile-editor-modal[hidden] { display: none; }

.tile-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  backdrop-filter: blur(2px);
}

.tile-editor-sheet {
  position: relative;
  background: #fff;
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: tileEditorSlideUp 0.25s ease-out;
}

@keyframes tileEditorSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.tile-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid #e6e9ee;
  position: relative;
}
.tile-editor-grip {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: #d4d8de;
  border-radius: 2px;
}
.tile-editor-head h3 {
  margin: 8px 0 0;
  font-size: 15px;
  color: #1e2a3a;
}
.tile-editor-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: #6f7886;
  padding: 4px 8px;
  margin-top: 4px;
}

/* Preview do tile com largura maior pra fácil visualização.
   flex:0 0 auto = não encolhe nem cresce (fica fixo no topo); o formulário
   abaixo é quem rola. */
.tile-editor-preview {
  flex: 0 0 auto;
  padding: 16px;
  background: #f4f6fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
/* tile-editor-tile herda TODOS os estilos do .offer-tile (mesma class)
   e do CSS mobile (nome em cima, etiqueta no canto, padding, etc).
   Só forçamos dimensão fixa 260×260 + interação touch. */
.tile-editor-tile {
  width: 260px !important;
  height: 260px !important;
  position: relative !important;
  overflow: hidden !important;
  /* Interação: touch arrasta no container, não no img */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tile-editor-tile:active { cursor: grabbing; }
.tile-editor-tile .product-art,
.tile-editor-tile img {
  pointer-events: none; /* touch sempre pega no container */
}
.tile-editor-preview::after {
  content: "👆 Arraste a imagem · 👆👆 Pinça pra zoom";
  display: block;
  font-size: 11px;
  color: #6f7886;
  text-align: center;
  margin-top: 8px;
  width: 100%;
}

/* Formulário completo (mesmos campos do desktop). É a região do MEIO que ROLA:
   flex:1 + min-height:0 + overflow-y:auto. O preview (topo) e as ações (rodapé)
   ficam fixos; só o formulário rola quando os campos não cabem na tela. */
.tile-editor-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
/* No celular, inputs com fonte < 16px fazem o Safari dar zoom ao focar.
   Força 16px nos campos do sheet pra evitar o "pulo" de zoom irritante. */
.tile-editor-form .sidebar-field > input {
  height: 44px;
  font-size: 16px;
}
.tile-editor-form .sidebar-copy-chip { min-height: 42px; font-size: 15px; }
.tile-editor-form .sidebar-reorder-btn { min-height: 44px; font-size: 18px; }
.tile-editor-form .sidebar-actions .primary-button,
.tile-editor-form .sidebar-actions .text-tool-button,
.tile-editor-form .sidebar-actions .danger-button {
  min-height: 46px;
  font-size: 15px;
}

/* Ações no rodapé: 3 botões em grid (Resetar img, Fundo, Pronto) */
.tile-editor-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e6e9ee;
}
.tile-editor-action-btn,
.tile-editor-done-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d4d8de;
  background: #f4f6fa;
  color: #1e2a3a;
}
.tile-editor-action-btn:active { background: #e7ecf3; transform: scale(0.97); }
.tile-editor-action-icon {
  font-size: 20px;
  line-height: 1;
}
.tile-editor-action-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tile-editor-done-btn {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}
.tile-editor-done-btn:active { background: #12833a; transform: scale(0.97); }

@media (max-width: 768px) {
  /* Estende dentro do @media o cursor pointer (já está acima na seção mobile). */

  /* ── Card de grade/colunas ── */
  .mobile-card-layout select,
  .mobile-card-layout input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #d4d8de;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
  }
  .mobile-card-layout select:focus,
  .mobile-card-layout input:focus { border-color: #1e5ba6; }

  /* ── Card de tamanhos ── */
  .mobile-size-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-size-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #f4f6fa;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
  }
  .mobile-size-card:active {
    background: #e7ecf3;
  }
  .mobile-size-card.active {
    background: #eaf2fc;
    border-color: #1e5ba6;
  }
  .mobile-size-thumb {
    width: 36px;
    background: linear-gradient(180deg, #1e5ba6 0 30%, #fff 30%);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    justify-self: center;
  }
  .mobile-size-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mobile-size-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e2a3a;
  }
  .mobile-size-desc {
    font-size: 12px;
    color: #6f7886;
  }
  .mobile-size-check {
    color: #1e5ba6;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }

  /* ── Card de tema (cores) — tira horizontal rolável ── */
  .mobile-theme-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .mobile-theme-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
    padding: 6px;
    background: #f4f6fa;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
  }
  .mobile-theme-card:active { background: #e7ecf3; }
  .mobile-theme-card.active {
    background: #eaf2fc;
    border-color: #1e5ba6;
  }
  .mobile-theme-card .theme-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  .mobile-theme-name {
    font-size: 11px;
    font-weight: 600;
    color: #1e2a3a;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TOUR GUIADO de primeira visita (#msTour) — overlay + spotlight + card
   ════════════════════════════════════════════════════════════════════════ */
.ms-tour {
  position: fixed;
  inset: 0;
  z-index: 9600; /* acima dos modais (9500), abaixo do painel dev (9999) */
  pointer-events: none; /* O guia não pode interceptar os controles do editor. */
}
.ms-tour[hidden] { display: none; }
.ms-tour-spotlight {
  position: fixed;
  border-radius: 10px;
  /* A sombra gigante escurece todo o resto da tela — o "buraco" é o alvo. */
  box-shadow: 0 0 0 9999px rgba(13, 18, 25, 0.55);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.ms-tour-card {
  position: fixed;
  pointer-events: auto;
  width: min(380px, calc(100vw - 24px));
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-height:calc(100dvh - 24px); overflow-y:auto; outline:none;
}
.ms-tour-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #20242a;
}
.ms-tour-card p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #444c57;
}
.ms-tour-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}
.ms-tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6dde6;
}
.ms-tour-dot.active { background: var(--brand-blue); }
.ms-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ms-tour-skip {
  background: transparent;
  border: 0;
  color: #5a6573;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}
.ms-tour-skip:hover { color: #20242a; text-decoration: underline; }
.ms-tour-next {
  background: var(--brand-blue);
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
}
.ms-tour-next:hover { background: #164a8a; }

/* ════════════════════════════════════════════════════════════════════════
   AJUDAS CONTEXTUAIS "?" (.help-dot) + balão compartilhado (#helpBubble)
   ════════════════════════════════════════════════════════════════════════ */
.help-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #bcd0e8;
  background: #fff;
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  margin-left: 6px;
  flex: 0 0 auto;
}
.help-dot:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
/* Variante pra fundos escuros (card de busca da sidebar é azul) */
.product-search-card .help-dot {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.product-search-card .help-dot:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: #fff;
}

.help-bubble {
  position: fixed;
  z-index: 9700; /* acima de qualquer modal (9500) */
  max-width: 260px;
  background: #1a1f2b;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.help-bubble[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   CONFERÊNCIA ANTES DE BAIXAR (#exportCheckModal)
   ════════════════════════════════════════════════════════════════════════ */
.export-check-dialog {
  width: min(640px, 100%);
  max-height: 90dvh;
}
.export-check-list {
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 16px 24px;
  display: grid;
  gap: 10px;
}
.export-check-list li {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 14px;
  line-height: 1.4;
  color: #20242a;
  border-left: 4px solid #d6dde6;
}
.export-check-list li.warn { border-left-color: #f59e0b; background: #fff8eb; }
.export-check-list li.info { border-left-color: var(--brand-blue); background: #f3f8ff; }
.export-check-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px 20px;
}
body.studio-retail .export-check-footer .ghost-button {
  width: auto;
  padding: 0 16px;
  height: 38px;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
}

.product-import-dialog { padding:0; border:1px solid #dbe1e8; border-radius:18px; width:min(980px,calc(100vw - 24px)); max-height:92dvh; color:var(--ink,#20242a); background:#fff; box-shadow:0 24px 80px #14243b40; }
.product-import-dialog::backdrop { background:#15233588; backdrop-filter:blur(3px); }
.product-import-dialog[open] { display:flex; flex-direction:column; }
.product-import-dialog h2 { font-size:21px; margin:0 0 6px; }
.product-import-dialog .image-picker-head { flex-shrink:0; }
.product-import-body { padding:20px 24px; overflow:auto; }
.product-import-body label { display:grid; gap:6px; font-weight:700; font-size:13px; }
.product-import-body input[type=file],.product-import-body select { width:100%; min-height:40px; padding:8px; border:1px solid #cbd3de; border-radius:7px; background:#fff; color:#20242a; font:inherit; }
.product-import-body .import-header-option { display:flex; align-items:center; margin:16px 0; font-weight:500; }
.import-hint { font-size:12px; line-height:1.5; color:#596579; }
#productImportStatus { border-left:3px solid #1762a6; padding:10px 12px; background:#f0f6fc; font-size:14px; line-height:1.5; }
.import-mapping { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.import-table-wrap { max-height:32dvh; overflow:auto; border:1px solid #dbe1e8; border-radius:8px; }
.import-table { border-collapse:collapse; width:100%; font-size:12px; line-height:1.5; }
.import-table th { position:sticky; top:0; background:#edf3fa; color:#1a426a; text-align:left; }
.import-table :is(th,td) { padding:10px; border-bottom:1px solid #e3e8ee; min-width:70px; overflow-wrap:anywhere; }
.import-table td:nth-child(2) { min-width:160px; }
.import-table td:last-child { min-width:180px; }
.import-row-error { background:#fff4ec; }
.product-import-dialog .export-check-footer { flex-shrink:0; border-top:1px solid #e3e8ee; }
.import-products-button { margin-top:8px; }
.product-import-dialog :focus-visible { outline:3px solid #1762a6; outline-offset:2px; }
@media(max-width:600px) {
  .import-mapping { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-import-body { padding:14px; }
  .product-import-dialog .image-picker-head { padding:16px; }
  .product-import-dialog h2 { font-size:18px; }
  .product-import-dialog .export-check-footer,.export-check-footer { flex-wrap:wrap; padding:12px 16px; }
  .product-import-dialog .export-check-footer button { flex:1; min-height:44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CENTRAL DE AJUDA — botão flutuante (#helpFabButton) + modal com FAQ
   ════════════════════════════════════════════════════════════════════════ */
.help-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--brand-blue);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 8900; /* abaixo dos modais (9500) e do overlay de login */
  display: grid;
  place-items: center;
  transition: transform 0.15s, background 0.15s;
}
.help-fab:hover {
  background: #164a8a;
  transform: scale(1.06);
}
/* Some na tela de login e no demo embutido da landing */
body.auth-locked .help-fab,
body.demo-mode .help-fab {
  display: none;
}

.help-center-dialog {
  width: min(520px, 100%);
}
.help-center-body {
  padding: 16px 24px 24px;
  display: grid;
  gap: 12px;
  max-height: 65vh;
  overflow-y: auto;
}
.help-replay-tour {
  border: 1.5px solid var(--brand-blue);
  background: #f3f8ff;
  color: var(--brand-blue);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.help-replay-tour:hover { background: #e3efff; }
.help-faq {
  display: grid;
  gap: 8px;
}
.help-faq details {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
}
.help-faq summary {
  font-weight: 700;
  font-size: 14px;
  color: #20242a;
  cursor: pointer;
}
.help-faq details[open] { border-color: var(--brand-blue); }
.help-faq details p {
  margin: 8px 0 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #444c57;
}
.help-wa-button {
  display: block;
  text-align: center;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
}
.help-wa-button:hover { background: #128a3e; }

@media (max-width: 768px) {
  .help-fab {
    width: 44px;
    height: 44px;
    right: 12px;
    /* Acima da barra fixa de download (~72px + safe area), com folga */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE (auditoria web-interface-guidelines)
   ════════════════════════════════════════════════════════════════════════ */

/* Foco de teclado VISÍVEL: vários inputs zeram o outline no :focus (ok pro
   clique de mouse), mas quem navega por teclado ficava sem indicação. Este
   anel só aparece no foco por TECLADO (:focus-visible) — clique de mouse
   segue limpo. !important pra vencer os outline:none espalhados. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-blue, #1e5ba6) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Respeita "reduzir movimento" do sistema: corta animações/transições pra
   quem ativou essa preferência (acessibilidade + conforto). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Guia alinhado à identidade atual do Mercado Studio. */
.ms-tour-card { border:1px solid #e2e5e9; border-top:4px solid var(--studio-red,#d71920); padding:20px; border-radius:14px; }
.ms-tour-eyebrow { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; color:#69727d; font-size:10px; font-weight:800; letter-spacing:.04em; }
#msTourCounter { white-space:nowrap; letter-spacing:0; color:#af1218; }
.ms-tour-card h3 { font-size:20px; line-height:1.15; margin-bottom:9px; }
.ms-tour-dot.active { background:var(--studio-red,#d71920); }
.ms-tour-next { background:var(--studio-red,#d71920); padding-inline:18px; }
.ms-tour-next:hover { background:var(--studio-red-dark,#af1218); }
.ms-tour-back { margin-left:auto; background:#fff; border:1px solid #d5dbe2; border-radius:8px; padding:8px 12px; color:#26323f; cursor:pointer; font-weight:700; }
.ms-tour-back:disabled { opacity:.4; cursor:default; }
.ms-tour-card button:focus-visible { outline:3px solid #1a66ba; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .ms-tour-spotlight { transition:none; } }

.image-search-refine { padding:16px 20px; border-bottom:1px solid #e2e5e9; background:#fafbfc; }
.image-search-refine label { display:block; font-size:13px; font-weight:800; margin-bottom:7px; }
.image-search-refine > div { display:flex; gap:8px; }
.image-search-refine input { flex:1; min-width:0; padding:10px 12px; border:1px solid #cbd3dd; border-radius:8px; font:inherit; font-size:14px; }
.image-search-refine p { margin:8px 0 0; font-size:12px; line-height:1.4; color:#596574; }
.image-search-refine .image-search-review { color:#80551d; }
.image-choice > span { white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
@media(max-width:480px) { .image-search-refine { padding:12px; } .image-search-refine > div { flex-wrap:wrap; } .image-search-refine input { flex-basis:100%; } .image-search-refine button { width:100%; } }

.image-picker-status { margin:0; padding:10px 20px 0; color:#596574; font-size:12px; }