/* ================================================
   PROTÓTIPO NEUTRO — cópia estrutural da página de referência
   Tema verde dark premium • estilo 100% bubble
   Base estrutural: Estilos.css (Seven Link)
   ================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
}

:root {
  /* ── Paleta verde ── */
  --gb-bg-1:      #04140b;
  --gb-bg-2:      #06210f;
  --gb-bg-3:      #0a2e16;
  --gb-dark:      #051a0e;
  --gb-border:    rgba(134,239,172,0.14);
  --gb-text:      #eafff2;
  --gb-muted:     rgba(200,255,220,0.45);
  --gb-accent:    #22c55e;
  --gb-accent2:   #16a34a;
  --gb-accent3:   #4ade80;
  --gb-accent4:   #86efac;
  --gb-lime:      #a3ff5e;
  --nb-panel-w:   400px;
  --gb-font-head: 'Baloo 2', sans-serif;
  --gb-font-bubble:'Bubblegum Sans', 'Baloo 2', cursive;
  --gb-font-body: 'Fredoka', sans-serif;
  --gb-ease:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* aliases pra manter compatibilidade com seletores antigos */
  --nb-dark:      var(--gb-dark);
  --nb-border:    var(--gb-border);
  --nb-text:      var(--gb-text);
  --nb-muted:     var(--gb-muted);
  --nb-accent:    var(--gb-accent);
  --nb-accent2:   var(--gb-accent2);
  --nb-font-head: var(--gb-font-head);
  --nb-font-body: var(--gb-font-body);
  --nb-ease:      var(--gb-ease);
}

body {
  background: #4eab78;
  color: var(--gb-text);
  font-size: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* ================================================
   FUNDO — bolhas flutuantes (troca as .circle)
   ================================================ */
.tech-circle { display: none; }

.circle {
  position: absolute;
  border-radius: 50%;
  border: none;
  background: #22c55e;
  opacity: 0.75;
  animation: floatBubble 11s infinite ease-in-out;
}

/* brilho de bolha — desligado */
.circle::after {
  display: none;
  content: "";
  position: absolute;
  top: 14%;
  left: 20%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  filter: blur(1px);
  opacity: 0.65;
}

.circle:nth-child(1) { width: 120px; height: 120px; top: 15%; left: 10%; }
.circle:nth-child(2) { width: 80px;  height: 80px;  top: 37%; left: 75%; animation-duration: 13s; }
.circle:nth-child(3) { width: 150px; height: 150px; top: 25%; left: 55%; animation-duration: 15s; }
.circle:nth-child(4) { width: 60px;  height: 60px;  top: 60%; left: 60%; animation-duration: 9s; }
.circle:nth-child(5) { width: 100px; height: 100px; top: 80%; left: 15%; animation-duration: 12s; }
.circle:nth-child(6) { width: 100px; height: 100px; top: 95%; left: 80%; animation-duration: 14s; }
.circle:nth-child(7) { width: 100px; height: 100px; top: 8%;  left: 92%; animation-duration: 10s; }

@keyframes floatBubble {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 0.6; }
  50%      { transform: translateY(-26px) scale(1.12); opacity: 0.95; }
}

@media (max-width: 600px) {
  .circle:nth-child(2) { width: 60px; height: 60px; top: 100%; left: 100%; }
}

/* ================================================
   FOGUETE / METEORO
   ================================================ */
.rocket {
  position: fixed;
  width: 50px;
  cursor: pointer;
  bottom: -100px;
  left: 10%;
  animation: fly 10s linear infinite;
  z-index: 995;
}

.rocket::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 160px;
  background: #4ade80;
  border-radius: 50%;
  opacity: 0.95;
  animation: trail 8s linear infinite;
}

@keyframes fly {
  0%   { bottom: -100px; left: 10%; transform: rotate(0deg); }
  50%  { bottom: 50%;    left: 50%; transform: rotate(15deg); }
  100% { bottom: 110%;   left: 90%; transform: rotate(-10deg); }
}

@keyframes trail {
  0%   { height: 120px; opacity: 1; }
  100% { height: 250px; opacity: 0; }
}

@media (max-width: 600px) {
  .rocket { content: url("../imglink/meteoros.png"); z-index: 995; }
}

/* ================================================
   LOGO + GIF
   ================================================ */
.Logos {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: -110px;
  position: relative;
}

.Logos img {
  width: 340px;
  height: 340px;
  object-fit: contain;
}

.Atualiza {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: -50px;
}

.Atualiza img { width: 300px; height: auto; }

/* ================================================
   BOTÕES BUBBLE (mantém .button2)
   ================================================ */
.container-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: -26%;
}

.button2 {
  display: block;
  align-items: center;
  margin-bottom: -10px;
  margin-top: 8%;
  height: 50px;
  width: 255px;
  cursor: pointer;
  gap: 20px;
  transition: all 0.25s var(--gb-ease);
  position: relative;
  overflow: hidden;
  z-index: 999;
  color: #097e3e;
  padding: 0.7em 3.3em 0.7em 1.7em;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  background: #ffffff;
  border: none;
}

.button2 img {
  width: 22px;
  height: 22px;
  position: absolute;
  padding: 0px 10px;
  margin-top: -2px;
  /* ícone tingido de verde (#097e3e) */
  filter: brightness(0) saturate(100%) invert(39%) sepia(28%) saturate(1045%) hue-rotate(94deg) brightness(95%) contrast(112%);
}

.button2 > svg {
  height: 30px;
  position: absolute;
  padding: 0px 5px;
  margin-top: -4px;
}

.button2:active { transform: scale(0.97); }

/* sem efeitos de bolha atrás dos botões */
.button2:before,
.button2:after { display: none; }

.button2:hover {
  color: #097e3e;
  border: none;
  transform: translateY(-2px);
}

/* rótulos dos botões (mantidos) */
.button2.instagram .text::after { content: "Instagram"; }
.button2.instagram:hover .text::after { content: "Segue Aí !!"; }
.button2 .icon { transition: 0.3s; }
.button2:hover .icon { content: url("../imglink/instagram\ \(8\).png"); }

.button2.whatsapp .text::after { content: "Whatsapp"; }
.button2.whatsapp:hover .text::after { content: "Mandou Bem"; }
.button2.whatsapp .icon { transition: 0.3s; }
.button2.whatsapp { z-index: 994; animation: shake 5s infinite; }
.button2.whatsapp:hover .icon { content: url("../imglink/whatsapp\ \(11\).png"); }

@keyframes shake {
  0%  { transform: translateX(0) rotate(0); }
  2%  { transform: translateX(-10px) rotate(-3deg); }
  4%  { transform: translateX(10px)  rotate(3deg); }
  6%  { transform: translateX(-10px) rotate(-3deg); }
  8%  { transform: translateX(10px)  rotate(3deg); }
  10% { transform: translateX(-8px)  rotate(-2deg); }
  12% { transform: translateX(8px)   rotate(2deg); }
  14% { transform: translateX(-5px)  rotate(-1deg); }
  16% { transform: translateX(5px)   rotate(1deg); }
  18% { transform: translateX(0) rotate(0); }
  100%{ transform: translateX(0) rotate(0); }
}

.button2.site .text::after { content: "Ver Site"; }
.button2.site:hover .text::after { content: "Pronto?"; }
.button2.site .icon { transition: 0.3s; }
.button2.site:hover .icon { content: url("../imglink/click\ \(1\).png"); }

.button2.cardapio .icon { transition: 0.3s; }
.button2.cardapio .text::after { content: "Cardápio"; }
.button2.cardapio:hover .text::after { content: "Ver Cardápio"; }
.button2.cardapio:hover .icon { content: url("../imglink/menu\ \(10\).png"); }

.button2.github .text::after { content: "GitHub"; }
.button2.github:hover .text::after { content: "Vamos Lá!!"; }
.button2.github .icon { transition: 0.3s; }
.button2.github:hover .icon { content: url("../imglink/github\ \(1\).png"); }

.button2.google .text::after { content: "Avaliar"; }
.button2.google:hover .text::after { content: "Obrigado"; }
.button2.google .icon { transition: 0.3s; }
.button2.google:hover .icon { content: url("../imglink/star\ \(3\).png"); }

.button2.instagram { z-index: 996; }
.button2.site      { z-index: 996; }
.button2.cardapio  { z-index: 994; }

/* ================================================
   FOOTER + BADGE
   ================================================ */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 100px 0;
  color: var(--gb-text);
}

.copyright-badge {
  padding: 10px 20px;
  font-family: var(--gb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-text);
  border: 1px solid var(--gb-border);
  border-radius: 999px;
  transition: 0.3s ease;
}

.copyright-badge:hover {
  transform: scale(1.05);
}
.copyright-badge { display: none; }

/* ================================================
   NAVBAR — painel lateral bubble
   ================================================ */
.nb-header *, .nb-header *::before, .nb-header *::after,
.nb-panel  *, .nb-panel *::before,  .nb-panel *::after,
.nb-hamburger *, .nb-overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.nb-hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 8000;
  width: 46px;
  height: 46px;
  background: #6cf57c;
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.nb-hamburger:hover {
  border-color: var(--gb-accent);
  background: #4ade80;
  transform: translateY(-1px);
}

.nb-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gb-accent4);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--gb-ease), opacity 0.25s, width 0.25s;
}

.nb-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nb-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nb-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nb-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(2,12,7,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--gb-ease);
}

.nb-overlay.open { opacity: 1; pointer-events: all; }

.nb-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nb-panel-w);
  max-width: 100vw;
  height: 100dvh;
  z-index: 9000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0 28px 28px 0;
  transform: translateX(-100%);
  transition: transform 0.4s var(--gb-ease);
}

.nb-panel.open { transform: translateX(0); }

.nb-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gb-bg-2);
}

.nb-panel-bg-img { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nb-panel-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.9; }

.nb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 34px;
  height: 34px;
  background: rgba(134,239,172,0.08);
  border: 1px solid var(--gb-border);
  border-radius: 50%;
  color: var(--gb-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nb-close:hover { background: var(--gb-accent2); color: #fff; border-color: transparent; transform: rotate(90deg); }

.nb-logo-wrap {
  position: relative;
  z-index: 2;
  padding: 36px 28px 20px;
  border-bottom: 1px solid var(--gb-border);
  width: 60%;
}

.nb-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nb-logo-img { height: 88px; width: auto; object-fit: contain; }

.nb-search { position: relative; z-index: 2; padding: 18px 28px; width: 60%; }

.nb-search-icon {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gb-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.nb-search-input {
  width: 100%;
  height: 42px;
  background: rgba(134,239,172,0.07);
  border: 1px solid var(--gb-border);
  border-radius: 999px;
  padding: 0 16px 0 38px;
  color: var(--gb-text);
  font-family: var(--gb-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
}

.nb-search-input::placeholder { color: var(--gb-muted); }
.nb-search-input:focus { border-color: rgba(34,197,94,0.55); background: rgba(134,239,172,0.12); }

.nb-search-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 28px;
  right: 28px;
  background: var(--gb-bg-3);
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  overflow: hidden;
  display: none;
  z-index: 999;
}

.nb-search-results.open { display: block; }

.nb-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--gb-text);
  font-size: 14px;
  font-family: var(--gb-font-body);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--gb-border);
  transition: background 0.18s;
}

.nb-result-item:last-child { border-bottom: none; }
.nb-result-item:hover, .nb-result-item.focused { background: rgba(34,197,94,0.12); }

.nb-result-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; }
.nb-result-icon img { width: 18px; height: 18px; object-fit: contain; }
.nb-result-label strong { color: var(--gb-accent); font-weight: 600; }

.nb-no-results { padding: 14px 16px; color: var(--gb-muted); font-size: 13px; font-family: var(--gb-font-body); text-align: center; }

.nb-nav { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 8px 0 32px; width: 60%; scrollbar-width: none; }
.nb-nav::-webkit-scrollbar { display: none; }

.nb-links { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }

.nb-item { opacity: 0; transform: translateX(-16px); transition: opacity 0.3s ease, transform 0.3s ease; }
.nb-panel.open .nb-item:nth-child(1) { opacity:1; transform:none; transition-delay:.08s; }
.nb-panel.open .nb-item:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.nb-panel.open .nb-item:nth-child(3) { opacity:1; transform:none; transition-delay:.16s; }
.nb-panel.open .nb-item:nth-child(4) { opacity:1; transform:none; transition-delay:.20s; }
.nb-panel.open .nb-item:nth-child(5) { opacity:1; transform:none; transition-delay:.24s; }
.nb-panel.open .nb-item:nth-child(6) { opacity:1; transform:none; transition-delay:.28s; }
.nb-panel.open .nb-item:nth-child(7) { opacity:1; transform:none; transition-delay:.32s; }
.nb-panel.open .nb-item:nth-child(8) { opacity:1; transform:none; transition-delay:.36s; }

.nb-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--gb-text);
  font-family: 'Chango', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s, gap 0.2s;
  position: relative;
}

.nb-link::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 20%;
  height: 60%;
  width: 0;
  background: var(--gb-accent);
  border-radius: 999px;
  transition: width 0.25s var(--gb-ease);
}

.nb-link:hover { background: rgba(34,197,94,0.10); color: var(--gb-accent4); gap: 16px; }
.nb-link:hover::before { width: 4px; }

.nb-link-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; }
.nb-link:hover .nb-link-icon { opacity: 1; }
.nb-link-icon img { width: 22px; height: 22px; object-fit: contain; }

@media (max-width: 480px) {
  :root { --nb-panel-w: 70vw; }
  .nb-panel { border-radius: 0; }
  .nb-logo-wrap, .nb-search, .nb-nav { width: 70%; }
  .nb-panel-bg {
    background: var(--gb-bg-2);
  }
}

@media (max-width: 350px) {
  .nb-logo-wrap { padding: 28px 18px 16px; }
  .nb-search    { padding: 14px 18px; }
  .nb-links     { padding: 0 10px; }
  .nb-link      { font-size: 14px; padding: 10px 12px; }
}

/* ================================================
   BOTÕES FLUTUANTES (share / promo / google)
   ================================================ */
.share-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(134,239,172,0.25);
  background: #6cf57c;
  color: var(--gb-accent4);
  cursor: pointer;
  transition: 0.3s ease;
}

.share-btn:hover { transform: scale(1.08); }
.share-btn svg { width: 20px; height: 20px; }

body.nb-open .share-btn { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ================================================
   SLIDER
   ================================================ */
.slider {
  position: relative;
  width: min(739px, 100%);
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 28px;
  z-index: 999;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  border: 2px solid rgba(134,239,172,0.18);
}

.slider.grabbing { cursor: grabbing; }
.slider-track { display: flex; will-change: transform; }
.slide { flex: 0 0 100%; aspect-ratio: 2 / 1; background: rgba(134,239,172,0.05); }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; z-index: 999; position: relative; }
.slider-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(134,239,172,0.3); cursor: pointer; transition: 0.3s ease; }
.slider-dots button.active { width: 24px; border-radius: 999px; background: var(--gb-accent3); }

/* ================================================
   BOLHA DE COMPARTILHAMENTO
   ================================================ */
.share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(2,12,7,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.share-backdrop.show { opacity: 1; pointer-events: all; }

.share-bubble {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10600;
  width: 100%;
  max-width: 100%;
  padding: 20px clamp(14px, 4vw, 40px) max(22px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #0a3d18;
  overflow: visible;
  transform-origin: 50% 100%;
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
}

.share-bubble.show { transform: translateY(0); opacity: 1; pointer-events: all; }

.share-head { display: flex; align-items: center; justify-content: space-between; margin: 0 auto 16px; max-width: 900px; padding: 0 4px; }
.share-head-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gb-font-head); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.share-title-svg { width: 17px; height: 17px; color: #ffffff; }

.share-close {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 1px solid var(--gb-border);
  background: rgba(134,239,172,0.06);
  color: rgba(234,255,242,0.7);
  font-size: 18px;
  cursor: pointer;
  transition: 0.25s ease;
}
.share-close:hover { background: rgba(34,197,94,0.2); color: #fff; }

.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  max-width: 900px;
  margin: 0 auto;
  gap: 12px;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: none;
  color: rgba(234,255,242,0.82);
  font-family: var(--gb-font-body);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-14px) scale(0.9);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.share-bubble.show .share-item { opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.45s var(--gb-ease); }
.share-bubble.show .share-item:nth-child(1) { transition-delay: .10s; }
.share-bubble.show .share-item:nth-child(2) { transition-delay: .14s; }
.share-bubble.show .share-item:nth-child(3) { transition-delay: .18s; }
.share-bubble.show .share-item:nth-child(4) { transition-delay: .22s; }
.share-bubble.show .share-item:nth-child(5) { transition-delay: .26s; }
.share-bubble.show .share-item:nth-child(6) { transition-delay: .30s; }
.share-bubble.show .share-item:nth-child(7) { transition-delay: .34s; }
.share-bubble.show .share-item:nth-child(8) { transition-delay: .38s; }
.share-bubble.show .share-item:nth-child(9) { transition-delay: .42s; }

.share-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: var(--c, #fff);
  transition: transform 0.3s var(--gb-ease), filter 0.3s ease;
}
.share-ico svg { width: 29px; height: 29px; }

.share-item:hover .share-ico { transform: scale(1.28) translateY(-2px); }
.share-item:active .share-ico { transform: scale(1.05); }
.share-item:hover, .share-item:focus-visible { background: none; border-color: transparent; transform: none; }

.share-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translate(-50%, 8px);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gb-accent3);
  color: #04140b;
  font-family: var(--gb-font-head);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }

.share-btn.active { background: rgba(34,197,94,0.3); transform: rotate(90deg) scale(1.05); }

/* Borda superior animada verde */
.share-border {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  padding: 0;
  border-radius: 28px 28px 0 0;
  background: #22c55e;
  pointer-events: none;
}

.share-border::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 22px;
  border-radius: 0;
  display: none;
}

@media (max-width: 520px) { .share-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .share-ico svg { width: 26px; height: 26px; } }

/* ================================================
   ALERT DE CUPOM + CONFETE
   ================================================ */
.confetti-canvas { position: fixed; inset: 0; z-index: 11200; pointer-events: none; display: none; }
.confetti-canvas.on { display: block; }

.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,12,7,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cp-overlay.show { opacity: 1; pointer-events: all; }

.cp-box {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 22px 20px 20px;
  border-radius: 28px;
  background: var(--gb-bg-3);
  border: 1px solid var(--gb-border);
  text-align: center;
  transform: translateY(16px) scale(0.94);
  transition: transform 0.45s cubic-bezier(.22,1,.36,1);
}
.cp-overlay.show .cp-box { transform: none; }

.cp-close { position: absolute !important; top: 14px; right: 14px; }

.cp-title {
  font-family: var(--gb-font-head);
  font-size: clamp(16px, 4.2vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 2px 34px 4px;
}

.cp-sub {
  font-family: var(--gb-font-body);
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 400;
  color: var(--gb-muted);
  margin-bottom: 12px;
}

.cp-img {
  width: 80%;
  max-width: 260px;
  margin: 0 auto 14px;
  aspect-ratio: 1920 / 1080;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(134,239,172,0.05);
}
.cp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: clamp(42px, 5.4svh, 48px);
  margin: 0 auto;
  padding: 0 1em;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-weight: 700;
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s var(--gb-ease);
}

.cp-cta-icon { width: clamp(19px, 4.8vw, 22px); height: clamp(19px, 4.8vw, 22px); color: currentColor; }
.cp-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cp-cta:active { transform: scale(0.97); }
.cp-cta.copiado {
  background: #22c55e;
  border-color: #22c55e;
  color: #04140b;
}

.cp-hl {
  color: #22c55e;
  font-weight: 800;
}

.promo-btn { top: 72px; }
@media (max-width: 400px) { .promo-btn { top: 68px; } }

/* ================================================
   LIGHTBOX DO SLIDE
   ================================================ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 11400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  padding-top: max(clamp(12px, 4vw, 40px), calc(env(safe-area-inset-top) + 60px));
  background: rgba(2,12,7,0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lb-overlay.show { opacity: 1; pointer-events: all; }

.lb-close { position: absolute !important; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; }

.lb-frame {
  width: 100%;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.lb-overlay.show .lb-frame { transform: none; }
.lb-frame img { max-width: 100%; max-height: calc(100svh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 20px; display: block; }
.slide img { cursor: zoom-in; }

/* ================================================
   BOTÃO GOOGLE + HORÁRIO
   ================================================ */
.google-btn { top: 126px; }
.google-btn svg { width: 20px; height: 20px; }
@media (max-width: 400px) { .google-btn { top: 118px; } }

.horario { display: none; }

.nb-logo-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.nb-horario {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  align-items: flex-end;
  text-align: right;
  flex: 0 0 auto;
  font-family: var(--gb-font-body);
}
.nb-horario-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gb-muted); }
.nb-horario-hora { font-size: 14px; font-weight: 600; color: var(--gb-text); white-space: nowrap; }

/* ================================================
   MENU — itens extras + ícones SVG
   ================================================ */
.nb-link-icon svg { width: 20px; height: 20px; color: var(--gb-accent4); }
.nb-panel.open .nb-item:nth-child(9)  { opacity:1; transform:none; transition-delay:.40s; }
.nb-panel.open .nb-item:nth-child(10) { opacity:1; transform:none; transition-delay:.44s; }
.nb-panel.open .nb-item:nth-child(11) { opacity:1; transform:none; transition-delay:.48s; }
.nb-panel.open .nb-item:nth-child(12) { opacity:1; transform:none; transition-delay:.52s; }

.nb-nav { max-height: calc(100svh - 260px); overflow-y: auto; scrollbar-width: thin; }

/* ================================================
   TÍTULO DO SLIDER — fonte bubble
   ================================================ */
.slider-title {
  /* flex pra encaixar as linhas onduladas dos dois lados */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 16px);
  margin: clamp(6px, 1.6svh, 16px) 0 clamp(2px, 0.6svh, 6px);
  font-family: var(--gb-font-bubble);
  font-size: clamp(18px, 5.4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #eafff2;
  text-align: center;
  line-height: 1.2;
}

/* ================================================
   RESPONSIVIDADE GLOBAL + LAYOUT ÚNICO
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden !important; }

body {
  height: 100svh;
  min-height: 100svh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
}

body > header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  justify-content: center;
  height: 100svh;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: clamp(10px, 2.2svh, 24px);
  overflow: hidden;
}

.Logos, .Atualiza { margin: 0 !important; width: 100%; }

.Logos img {
  width: clamp(152px, 26svh, 280px) !important;
  height: auto !important;
  margin-top: 5% !important;
}

.Atualiza img {
  width: clamp(165px, 52vw, 250px) !important;
  height: auto !important;
  margin: 0 !important;
}

.container-btns {
  --gcb: clamp(6px, 1.2svh, 12px);
  position: static;
  transform: none;
  align-items: center;
  margin: 0 !important;
  gap: var(--gcb);
  width: 100%;
}

.Atualiza {
  margin-top: calc(var(--gcb) * -0.488) !important;
  margin-bottom: calc(var(--gcb) * -0.875) !important;
}

.button2 {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 !important;
  width: clamp(196px, 71.4vw, 255px) !important;
  max-width: 100%;
  height: clamp(46px, 6.8svh, 56px) !important;
  padding: 0 1.2em !important;
  font-size: clamp(20px, 5.4vw, 26px) !important;
  line-height: 1;
}

.button2 .text { display: inline-flex; align-items: center; line-height: 1; order: 1; }

.button2 img.icon {
  position: static !important;
  left: auto; top: auto;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 0;
  width: clamp(22px, 5.6vw, 28px) !important;
  height: clamp(22px, 5.6vw, 28px) !important;
  flex: 0 0 auto;
  object-fit: contain;
}

.slider {
  margin-top: 0 !important;
  width: min(686px, 100%, calc(30.36svh * 16 / 9)) !important;
  max-width: 100%;
  flex: 0 0 auto;
}

.slide { aspect-ratio: 1920 / 1080; height: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-dots { margin-top: clamp(6px, 1.2svh, 12px); }

/* Landscape baixo */
@media (orientation: landscape) and (max-height: 560px) {
  body > header { max-width: 760px; padding-top: 2.6svh; gap: 4px; }
  .slider-title { font-size: 15px; margin: 4px 0 2px; }
  .Logos img    { width: clamp(120px, 26svh, 200px) !important; }
  .Atualiza img { width: clamp(140px, 28vw, 200px) !important; }
  .button2      { height: 44px !important; font-size: 19px !important; }
  .slider       { width: min(528px, 100%, calc(25.08svh * 16 / 9)) !important; }
  .share-bubble { width: 100%; }
  .share-grid   { grid-template-columns: repeat(5, 1fr); }
}

/* Tablets */
@media (min-width: 700px) and (max-width: 1100px) {
  body > header { max-width: 739px; }
  .button2 { width: 289px !important; }
  .slider  { width: min(818px, 100%) !important; }
}

/* Desktop grande */
@media (min-width: 1400px) {
  body > header { max-width: 720px; }
  .Logos img { width: 300px !important; }
  .button2   { width: 289px !important; }
}

@media (max-width: 340px) {
  .button2 { width: 81.6vw !important; font-size: 18px !important; }
  .share-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .share-border, .share-border::before, .button2.whatsapp, .circle, .rocket {
    animation: none !important;
  }
}


/* =============================================
   FONTE CHANGO — botões e sidebar
   Precisa de !important porque o seletor global `*`
   (topo do arquivo) aplica Fredoka direto nos spans
   internos (.text / .nb-link-text), matando a herança.
   NÃO REMOVER.
   ============================================= */
.button2,
.button2 .text,
.button2 .text::before,
.button2 .text::after,
.nb-link,
.nb-link .nb-link-text {
  font-family: 'Chango', sans-serif !important;
  font-weight: 400 !important;
}


/* =============================================
   SIDEBAR LÍQUIDA — uma borda ondulada, sólida
   O fundo do painel é o SVG #nbLiquid: um único
   path de forma fixa, que entra deslizando.
   Sem oscilação e sem overshoot — só ida.
   ============================================= */

/* o fundo antigo do painel sai de cena */
.nb-panel-bg { display: none !important; }
.nb-panel    { background: transparent; overflow: hidden; }

/* painel e líquido na mesma curva, sem volta */
.nb-panel {
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}

.nb-liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8700;
  pointer-events: none;
  /* folga extra pra onda sumir por inteiro no mobile */
  transform: translateX(calc(-100% - 260px));
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.nb-liquid.on { transform: translateX(0); }

.lq-front { fill: #ffffff; }


/* =============================================
   ÍCONES BRANCOS — sidebar, flutuantes e share
   Os ícones dos botões brancos seguem verdes,
   senão sumiriam no fundo branco.
   ============================================= */
.nb-link-icon svg    { color: #097e3e; }
/* mesmo filtro calibrado dos botoes: chapa o PNG em #097e3e */
.nb-link-icon img    { filter: brightness(0) saturate(100%) invert(39%) sepia(28%) saturate(1045%) hue-rotate(94deg) brightness(95%) contrast(112%); }
.nb-search-icon      { color: #097e3e; }
.nb-close            { color: #ffffff; border: none; }
.nb-hamburger        { border: none; }
.nb-hamburger span   { background: #097e3e; }
.share-btn           { color: #097e3e; border: none; }
.google-btn svg path { fill: #097e3e; }
.share-ico           { color: #ffffff !important; }
.share-title-svg     { color: #ffffff; }
.share-close         { border: none; }


/* =============================================
   SIDEBAR BRANCA — conteudo em #097e3e
   O fundo e o proprio liquido (.lq-front).
   O #nbClose e mirado pelo id porque a classe
   .nb-close tambem serve ao lightbox, ao cupom
   e ao compartilhar, que seguem em fundo escuro.
   ============================================= */
.nb-logo-wrap     { border-bottom: 1px solid rgba(9,126,62,0.20); }
.nb-horario-label { color: rgba(9,126,62,0.65); }
.nb-horario-hora  { color: #097e3e; }

.nb-link          { color: #097e3e; }
.nb-link::before  { background: #097e3e; }
.nb-link:hover    { background: rgba(9,126,62,0.10); color: #097e3e; }

#nbClose          { color: #097e3e; background: transparent; }
#nbClose:hover    { background: #097e3e; color: #ffffff; }

.nb-search-input               { background: #ffffff; border: 1.5px solid rgba(9,126,62,0.35); color: #097e3e; }
.nb-search-input::placeholder  { color: rgba(9,126,62,0.50); }
.nb-search-input:focus         { background: #ffffff; border-color: #097e3e; }

.nb-search-results             { background: #ffffff; border: 1px solid rgba(9,126,62,0.25); }
.nb-result-item                { color: #097e3e; border-bottom: 1px solid rgba(9,126,62,0.15); }
.nb-result-item:hover,
.nb-result-item.focused        { background: rgba(9,126,62,0.08); }
.nb-result-label strong        { color: #097e3e; }
.nb-no-results                 { color: rgba(9,126,62,0.60); }


/* =============================================
   LOGO DA SIDEBAR — nao pode estourar o painel
   A Greenb.png e 637x268 (2.38:1). Travada em
   88px de altura ela da 209px de largura, mais
   que o .nb-logo-wrap no mobile (137-235px):
   empurrava o horario pra fora da tela com o
   menu fechado. Agora ela encolhe junto.
   ============================================= */
/* wrap: se nao couber lado a lado, o horario desce de linha
   em vez de espremer o logo ate virar um selo ilegivel */
.nb-logo-wrap {
  overflow: hidden;
  flex-wrap: wrap;
  row-gap: 10px;
}

.nb-logo {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
}

.nb-logo-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.nb-horario { flex: 0 0 auto; min-width: 0; }


/* =============================================
   BOTAO DO GOOGLE — expande pra baixo
   Ancorado no topo (justify-content: flex-start):
   os 44x44 de cima ficam identicos ao botao fechado
   e o G nunca sai do lugar quando o botao cresce.
   Centralizar aqui empurrava o icone pra fora do
   circulo, porque o conteudo e mais alto que 44px.
   border-radius 22px = o mesmo circulo quando fechado.
   ============================================= */
.google-btn {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* (44 - 20) / 2 = 12  ->  G centrado nos 44px do topo */
.google-btn > svg {
  flex: 0 0 auto;
  margin-top: 12px;
}

.google-btn.abrindo {
  /* 12 + 20 (G) + 12 + 5x20 + 4x2 (gaps) + 12 de folga */
  height: 164px;
}

.google-btn .gb-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.google-btn.abrindo .gb-stars {
  opacity: 1;
  transform: none;
  transition-delay: 0.14s;
}

/* estrelas no mesmo tamanho do icone */
.google-btn .gb-stars svg {
  width: 20px;
  height: 20px;
  display: block;
}

.google-btn .gb-stars svg path {
  fill: #f6b100;
}


/* =============================================
   LINHAS ONDULADAS AO LADO DO TITULO
   SVG embutido como data URI, repetido no eixo X.
   ============================================= */
.slider-title::before,
.slider-title::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(30px, 10vw, 62px);
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q 5 0.6 10 5 T 20 5 T 30 5 T 40 5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}


/* =============================================
   ONDAS DO RODAPE — 3 camadas solidas
   Mesmo principio da sidebar: a borda de cada
   camada e a soma de senoides de fase fixa,
   desenhada em JS pra nao distorcer conforme a
   largura da tela. Ocupa os 20% de baixo.
   ============================================= */
.gb-waves {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20svh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

.gw-1 { fill: #2f8f5e; }   /* camada do fundo, mais alta */
.gw-2 { fill: #1c8450; }   /* camada do meio */
.gw-3 { fill: #097e3e; }   /* camada da frente */


/* =============================================
   CARDAPIO — tela sobreposta em duas etapas
   Etapa 1: 4 quadrados ocupando a tela inteira.
   Etapa 2: os cards da secao escolhida.
   Tudo solido, sem sombra e sem degrade.
   ============================================= */
.cd-tela {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-tela.aberto {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ── Etapa 1: a grade ── */
.cd-grade {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  /* o topo (voltar + titulo) passa a ter faixa branca propria,
     senao o titulo verde cairia em cima da foto do quadro */
  padding: 68px 20px 20px;
  min-height: 0;
}

.cd-tela.nos-produtos .cd-grade { display: none; }

.cd-quadro {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 10px;
  /* nome ancorado no canto inferior esquerdo do quadro */
  padding: clamp(10px, 3vw, 16px);
  cursor: pointer;
  background: #097e3e;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.cd-quadro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* camada chapada pra garantir leitura do nome sobre a foto */
.cd-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 126, 62, 0.26);
}

.cd-quadro-nome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.4vw, 26px);
  color: #ffffff;
  letter-spacing: 0.4px;
  text-align: left;
  line-height: 1.1;
}

/* seta do grupo: em em, entao acompanha a fonte em qualquer tela */
.cd-seta-grupo {
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  opacity: 0.85;
}

.cd-quadro:active { transform: scale(0.985); }

/* a fileira de baixo so desvia da sacola, que agora
   fica no canto inferior DIREITO */
.cd-quadro:nth-child(4) {
  padding-right: clamp(78px, 20vw, 96px);
}

/* ── Etapa 2: os produtos ── */
.cd-produtos {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 128px clamp(12px, 4vw, 28px) 110px;
  min-height: 0;
}

.cd-tela.nos-produtos .cd-produtos { display: block; }

.cd-lista {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(10px, 3vw, 18px);
  max-width: 900px;
  margin: 0 auto;
}

.cd-lista.ativa { display: grid; }

.cd-card {
  position: relative;
  background: #f2f9f5;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #dff3e6;
}

.cd-card-info {
  /* folga a direita pro botao + nao encostar no texto */
  padding: 9px 42px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cd-card-info h3 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(11.5px, 3.1vw, 14px);
  color: #097e3e;
  line-height: 1.2;
  min-width: 0;
}

/* seta de "ver detalhes" na linha do nome */
.cd-seta {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: rgba(9,126,62,0.55);
}

.cd-preco {
  font-family: var(--gb-font-body);
  font-size: clamp(10.5px, 2.9vw, 12.5px);
  color: rgba(9,126,62,0.75);
}

/* ── Voltar ── */
.cd-voltar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: #6cf57c;
  color: #097e3e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-voltar svg { width: 22px; height: 22px; }

/* ── Titulo no rodape, a 5px das bordas ── */
.cd-titulo {
  margin: 0;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.6vw, 24px);
  color: #ffffff;
  letter-spacing: 0.3px;
  pointer-events: none;
}


/* =============================================
   CARDAPIO — topo, filtros, sacola
   ============================================= */
.cd-topo {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cd-titulo {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 26px);
  color: #097e3e;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* ── Filtros ── */
.cd-filtros {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 clamp(12px, 4vw, 28px);
}

.cd-tela:not(.nos-produtos) .cd-filtros { display: none; }

.cd-filtro {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cd-filtro.ativo {
  background: #097e3e;
  color: #ffffff;
}

/* ── Botao + no card ── */
.cd-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 16px;
  background: #6cf57c;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

.cd-add:active { transform: scale(0.9); }

/* ── Botao da sacola (canto inferior esquerdo) ── */
.cd-sacola-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 7;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 27px;
  background: #6cf57c;
  color: #097e3e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-sacola-btn svg { width: 26px; height: 26px; }

.cd-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: #097e3e;
  color: #ffffff;
  font-family: var(--gb-font-body);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-sacola-btn[data-vazia="sim"] .cd-badge { display: none; }

/* ── Painel da sacola ── */
.cd-sacola {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.cd-sacola.aberta { opacity: 1; pointer-events: auto; }

.cd-sacola-box {
  width: 100%;
  max-height: 82%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 18px clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-sacola.aberta .cd-sacola-box { transform: none; }

.cd-sacola-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.cd-sacola-topo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 20px);
  color: #097e3e;
}

.cd-sacola-fechar {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #eaf7ef;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-sacola-vazia {
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: rgba(9,126,62,0.7);
  padding: 18px 0 22px;
  text-align: center;
}

.cd-sacola-itens {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.cd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(9,126,62,0.12);
}

.cd-item > img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  background: #dff3e6;
  flex: 0 0 auto;
}

.cd-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-item-nome {
  font-family: 'Chango', sans-serif;
  font-size: 14px;
  color: #097e3e;
  line-height: 1.2;
}

.cd-item-preco {
  font-family: var(--gb-font-body);
  font-size: 13px;
  color: rgba(9,126,62,0.75);
}

.cd-qtd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-qtd button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 14px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cd-qtd span {
  min-width: 18px;
  text-align: center;
  font-family: var(--gb-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #097e3e;
}

.cd-sacola-rodape {
  flex: 0 0 auto;
  padding-top: 14px;
}

.cd-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--gb-font-body);
  font-size: 15px;
  color: rgba(9,126,62,0.75);
}

.cd-total strong {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 22px);
  color: #097e3e;
}

.cd-fechar-pedido {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(16px, 4.4vw, 19px);
  cursor: pointer;
  transition: transform 0.18s ease;
}

.cd-fechar-pedido:disabled { opacity: 0.45; cursor: not-allowed; }
.cd-fechar-pedido:active:not(:disabled) { transform: scale(0.98); }


/* =============================================
   CARDAPIO — detalhes do produto e extras
   ============================================= */
.cd-fechar-pedido svg { width: 20px; height: 20px; flex: 0 0 auto; }

.cd-card { cursor: pointer; }

/* ── Extras da sacola ── */
.cd-extras {
  flex: 0 0 auto;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(9,126,62,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: #097e3e;
}

.cd-extra em { font-style: normal; color: rgba(9,126,62,0.55); font-size: 12px; }

.cd-qtd button:disabled { opacity: 0.35; cursor: not-allowed; }

.cd-obs { display: flex; flex-direction: column; gap: 8px; }

.cd-obs-tit {
  font-family: var(--gb-font-body);
  font-size: 14px;
  color: #097e3e;
}

.cd-obs-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cd-chip {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: #eaf7ef;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cd-chip.ativo { background: #097e3e; color: #ffffff; }

#cdObs {
  width: 100%;
  border: 1.5px solid rgba(9,126,62,0.25);
  border-radius: 14px;
  padding: 9px 12px;
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  color: #097e3e;
  resize: none;
  outline: none;
  background: #ffffff;
}

#cdObs::placeholder { color: rgba(9,126,62,0.45); }
#cdObs:focus { border-color: #097e3e; }

/* ── Detalhes do produto: foto em cima, dados abaixo ── */
.cd-det {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.cd-det.aberto { opacity: 1; pointer-events: auto; }

.cd-det-box {
  position: relative;
  width: 100%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-det.aberto .cd-det-box { transform: none; }

.cd-det-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #ffffff;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-det-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: #dff3e6;
  flex: 0 0 auto;
}

.cd-det-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 16px clamp(14px, 4vw, 26px) 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-det-corpo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 22px);
  color: #097e3e;
  line-height: 1.2;
}

.cd-det-preco {
  font-family: var(--gb-font-body);
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 600;
  color: #097e3e;
  margin-top: -6px;
}

.cd-det-desc {
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(9,126,62,0.8);
}

.cd-det-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(9,126,62,0.12);
  font-family: var(--gb-font-body);
  font-size: 13.5px;
  color: rgba(9,126,62,0.65);
}

.cd-det-linha strong {
  font-weight: 600;
  color: #097e3e;
  text-align: right;
}

.cd-det-qtd { padding-bottom: 4px; }

.cd-det-add {
  flex: 0 0 auto;
  margin: 0 clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  height: 52px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.2vw, 18px);
  cursor: pointer;
}

.cd-det-add:active { transform: scale(0.98); }


/* =============================================
   CARDAPIO — sabor adicional + detalhes responsivos
   ============================================= */

/* ── "+" e "-" maiores dentro dos detalhes ── */
.cd-det .cd-qtd { gap: 12px; }

.cd-det .cd-qtd button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 23px;
}

.cd-det .cd-qtd span {
  min-width: 26px;
  font-size: 16px;
}

/* ── Detalhes: responsivo ── */
@media (min-width: 700px) {
  /* em tela larga vira caixa centrada, nao folha colada embaixo */
  .cd-det {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .cd-det-box {
    max-width: 470px;
    max-height: 88%;
    border-radius: 28px;
  }
  .cd-det-foto { aspect-ratio: 16 / 9; }
}

@media (orientation: landscape) and (max-height: 560px) {
  /* deitado e baixo: a foto encolhe pra sobrar leitura */
  .cd-det-box { max-height: 96%; }
  .cd-det-foto { aspect-ratio: 24 / 7; }
  .cd-det-corpo { padding-top: 12px; gap: 7px; }
  .cd-det-add { height: 46px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .cd-det-foto { aspect-ratio: 16 / 8; }
}

/* ── Modal do sabor adicional ── */
.cd-sabor {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(4,40,20,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cd-sabor.aberto { opacity: 1; pointer-events: auto; }

.cd-sabor-box {
  width: 100%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 18px clamp(14px, 4vw, 26px) max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-sabor.aberto .cd-sabor-box { transform: none; }

.cd-sabor-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cd-sabor-topo h3 {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 20px);
  color: #097e3e;
}

.cd-sabor-fechar {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #eaf7ef;
  color: #097e3e;
  font-size: 15px;
  cursor: pointer;
}

.cd-sabor-ops {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.cd-op {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 16px;
  background: #f2f9f5;
  color: #097e3e;
  font-family: var(--gb-font-body);
  font-size: clamp(13px, 3.6vw, 15px);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}

.cd-op-marca {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 10px;
  border: 2px solid rgba(9,126,62,0.35);
  position: relative;
}

.cd-op.ativo { background: #eaf7ef; }
.cd-op.ativo .cd-op-marca { border-color: #097e3e; }

.cd-op.ativo .cd-op-marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: #097e3e;
}

.cd-sabor-ok {
  flex: 0 0 auto;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: 'Chango', sans-serif;
  font-size: clamp(15px, 4.2vw, 18px);
  cursor: pointer;
}

.cd-sabor-ok:disabled { opacity: 0.4; cursor: not-allowed; }

@media (min-width: 700px) {
  .cd-sabor { align-items: center; padding: 24px; }
  .cd-sabor-box { max-width: 430px; border-radius: 28px; }
}


/* =============================================
   MODAL DE OPCOES — multiescolha e remover acucar
   ============================================= */
.cd-sabor-dica {
  flex: 0 0 auto;
  margin: -6px 0 10px;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  color: rgba(9,126,62,0.6);
}

.cd-sabor-dica:empty { display: none; }

.cd-op:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* marca quadrada = multiescolha / acucar; redonda = escolha unica */
.cd-op-acucar {
  margin-top: 6px;
  border-top: 1px solid rgba(9,126,62,0.12);
  border-radius: 0 0 16px 16px;
  padding-top: 16px;
}

.cd-op-acucar .cd-op-marca { border-radius: 6px; }
.cd-op-acucar.ativo .cd-op-marca::after { border-radius: 3px; }


/* =============================================
   CARDAPIO — preco do adicional e pedido enviado
   ============================================= */
.cd-op-preco {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(9,126,62,0.7);
}

.cd-op.ativo .cd-op-preco { color: #097e3e; }

.cd-enviado {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4,40,20,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cd-enviado.aberto { opacity: 1; }

.cd-enviado-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  padding: 26px 24px;
  border-radius: 24px;
  background: #ffffff;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-enviado.aberto .cd-enviado-box { transform: none; }

.cd-enviado-box svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 20px;
  background: #6cf57c;
  color: #097e3e;
}

.cd-enviado-box strong {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #097e3e;
}

.cd-enviado-box span {
  font-family: var(--gb-font-body);
  font-size: 13px;
  color: rgba(9,126,62,0.7);
}


/* =============================================
   ELEMENTOS FLUTUANDO NO FUNDO
   5 SVGs brancos de contorno atravessando a tela.
   Posicao, tamanho, duracao e giro sao sorteados
   em JS a cada volta — nada se repete igual.
   Ficam atras das ondas do rodape (z-index -2).
   ============================================= */
.gb-flut {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.gb-flut-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tam, 64px);
  height: var(--tam, 64px);
  opacity: 0;
  will-change: transform, opacity;
  animation: gbFlutua var(--dur, 24s) linear var(--atraso, 0s) infinite;
}

.gb-flut-item svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes gbFlutua {
  0%   { transform: translate(var(--x0, 0px), 112svh) rotate(0deg);              opacity: 0; }
  12%  { opacity: var(--op, 0.28); }
  88%  { opacity: var(--op, 0.28); }
  100% { transform: translate(var(--x1, 0px), -26svh) rotate(var(--giro, 180deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .gb-flut { display: none; } }


/* =============================================
   COMPARTILHAR — mesmo liquido da sidebar
   Em vez de entrar pela esquerda, a borda solida
   sobe pelo rodape. Fundo branco, elementos
   #097e3e — o mesmo padrao do menu lateral.
   ============================================= */
.sh-liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10550;
  pointer-events: none;
  transform: translateY(calc(100% + 260px));
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sh-liquid.on { transform: translateY(0); }

.shq-front { fill: #ffffff; }

/* o liquido virou o fundo: a folha em si fica transparente */
.share-bubble {
  background: transparent;
  border-radius: 0;
  padding-top: 18px;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              opacity 0.35s ease;
}

/* backdrop mais leve pro liquido aparecer, igual a sidebar */
.share-backdrop { background: rgba(2,12,7,0.22); }

.share-head-title { color: #097e3e; }
.share-title-svg  { color: #097e3e; }
.share-ico        { color: #097e3e !important; }

.share-item {
  border-radius: 999px;
  color: #097e3e;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
}
.share-item:hover,
.share-item:focus-visible { background: rgba(9,126,62,0.10); }

.share-toast {
  background: #097e3e;
  color: #ffffff;
  border: none;
}

/* a barrinha verde do topo da folha sobra agora que
   quem faz a borda e a onda do liquido */
.share-border { display: none; }

/* fechar do compartilhar: circulo verde solido
   (o branco sumia agora que o fundo virou branco) */
.share-close {
  background: #097e3e;
  border: none;
  color: #ffffff;
}
.share-close:hover { background: #0b9a4c; color: #ffffff; }


/* =============================================
   CUPOM — splash de liquido
   O fundo do alert e um respingo solido desenhado
   em JS (mesma ideia das ondas: forma fixa, sem
   degrade). O conteudo fica por cima, centrado.
   ============================================= */
.cp-overlay { padding: 12px; }

.cp-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(420px, calc(100vw - 8px), 82svh);
  aspect-ratio: 1 / 1;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  transform: translateY(18px) scale(0.86);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* o respingo transborda um pouco a caixa: as gotas
   soltas precisam de espaco fora do corpo */
.cp-splash {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  display: block;
}
.cp-splash-corpo,
.cp-splash-gotas circle { fill: #097e3e; }

.cp-conteudo {
  position: relative;
  z-index: 2;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.cp-title {
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 4vw, 19px);
  line-height: 1.28;
  color: #ffffff;
  margin: 0;
}

.cp-hl { color: #6cf57c; font-weight: 400; }

.cp-sub {
  font-family: var(--gb-font-body);
  font-size: clamp(11px, 3.1vw, 13.5px);
  color: rgba(255,255,255,0.88);
  margin: 0;
}

.cp-cta {
  width: auto;
  margin-top: 4px;
  padding: 0 18px;
  height: clamp(38px, 5svh, 46px);
  gap: 9px;
  background: #ffffff;
  color: #097e3e;
  font-family: 'Chango', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 3.4vw, 15px);
}
.cp-cta-text { white-space: nowrap; }
.cp-cta-icon { width: clamp(15px, 3.8vw, 18px); height: clamp(15px, 3.8vw, 18px); }
.cp-cta:hover { transform: translateY(-2px); filter: none; }
.cp-cta.copiado { background: #6cf57c; color: #097e3e; }

/* o botao "estoura" junto com o confete */
.cp-cta.estourou { animation: cpEstoura 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cpEstoura {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  65%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* fechar dentro do respingo, no topo — no canto ele
   batia no texto nas telas estreitas */
.cp-close {
  position: absolute !important;
  top: 11% !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: #097e3e;
}
.cp-close:hover { background: #6cf57c; color: #097e3e; transform: translateX(-50%) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .cp-cta.estourou { animation: none; }
}


/* =============================================
   BOTÃO DE PAGAMENTO — abaixo do hamburguer
   ============================================= */
.gb-pay-btn {
  position: fixed;
  top: 76px;   /* logo abaixo do hamburguer (20 + 46 + 10) */
  left: 20px;
  z-index: 8000;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6cf57c;
  border: none;
  border-radius: 16px;
  color: #097e3e;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.gb-pay-btn:hover { background: #4ade80; transform: translateY(-1px); }
.gb-pay-btn:active { transform: scale(0.94); }
.gb-pay-btn svg { width: 24px; height: 24px; }
/* some junto com o hamburguer quando a sidebar abre */
body.nb-open .gb-pay-btn { opacity: 0; pointer-events: none; transform: scale(0.8); }


/* =============================================
   CARDAPIO — selos de ranking + quantidade no card
   ============================================= */
.cd-card-media {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* Ranking (canto superior esquerdo) */
.cd-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 5px;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.cd-rank svg { width: 14px; height: 14px; }
.cd-rank em {
  font-family: 'Chango', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2px;
}
.cd-rank-1 { background: #d4a017; }   /* ouro   */
.cd-rank-2 { background: #8a9298; }   /* prata  */
.cd-rank-3 { background: #b06b2e; }   /* bronze */

/* Quantidade / recipiente (canto inferior esquerdo) */
.cd-qtd-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: #097e3e;
  color: #ffffff;
  font-family: var(--gb-font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* =============================================
   SACOLA — botão "Remover tudo"
   ============================================= */
.cd-limpar {
  width: 100%;
  height: 44px;
  display: none;               /* JS mostra quando há itens */
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  border: none;
  border-radius: 999px;
  background: #06210f;
  color: #86efac;
  font-family: var(--gb-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s;
}
.cd-limpar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cd-limpar:hover { background: #7a1f1f; color: #ffd9d9; }
.cd-limpar:active { transform: scale(0.98); }


/* =============================================
   GATE DE PAGAMENTO — backend do links.html com
   design Green Burbble (fundos sólidos, verde).
   Tudo escopado em .pay-gate.
   ============================================= */
.pay-gate {
  --bg:#065f2c; --hl:#a3ff5e; --surface:#06622e; --text:#ffffff;
  --muted:#d7f5e3; --border:#1a9a52; --shadow:0 20px 60px rgba(0,0,0,.28);
  position: fixed; inset: 0; z-index: 12000;
  overflow-y: auto; overscroll-behavior: contain;
  background: #097e3e; color: var(--text);
  font-family: var(--gb-font-body);
  color-scheme: dark;
}
.pay-gate .pay-bg { position: absolute; inset: 0; z-index: 0; }
.pay-gate[hidden] { display: none; }
.pay-gate * { box-sizing: border-box; }
.pay-gate svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay-gate button, .pay-gate input, .pay-gate a, .pay-gate textarea { font: inherit; -webkit-tap-highlight-color: transparent; }
.pay-gate button { cursor: pointer; color: inherit; }
.pay-gate a { color: inherit; text-decoration: none; }

.pay-gate .pay-wrap { position: relative; z-index: 1; width: min(100% - 40px, 480px); margin: 24px auto 40px; }
.pay-gate .payment-page { padding: 12px 0 24px; }

.pay-gate .payment-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; }
.pay-gate .payment-back {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  border: none; border-radius: 14px; background: #6cf57c; color: #097e3e;
  box-shadow: var(--shadow); transition: transform .22s, background .22s;
}
.pay-gate .payment-back svg { width: 24px; height: 24px; stroke-width: 2; }
.pay-gate .payment-back:is(:hover, :focus-visible) { transform: translateX(-3px); background: #4ade80; }
.pay-gate .payment-head h1 { display: flex; align-items: center; gap: 10px; font-family: 'Chango', sans-serif; font-weight: 400; font-size: 24px; margin: 0; color: var(--text); }
.pay-gate .payment-head h1 svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--text); }

.pay-gate .payment-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pay-gate .payment-options > p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--text); font-size: clamp(20px, 5vw, 24px); font-weight: 700; line-height: 1.35; text-align: center; }
.pay-gate .payment-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  gap: 8px; min-height: 152px; padding: 14px 10px 16px;
  border: 1px solid transparent; border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow); transition: transform .22s, border-color .22s;
}
.pay-gate a.payment-choice:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: #097e3e; }
.pay-gate .payment-choice-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; overflow: visible; background: transparent; }
.pay-gate .payment-choice-icon img { width: auto; max-width: 100%; height: auto; max-height: clamp(82px, 21vw, 108px); object-fit: contain; display: block; }
.pay-gate .payment-choice strong { display: block; white-space: nowrap; font-size: clamp(10px, 3vw, 15px); line-height: 1.15; color: #097e3e; }
.pay-gate .payment-choice small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: rgba(9,126,62,0.7); }
.pay-gate .payment-choice-unavailable { opacity: .6; }
.pay-gate .pay-arrow { display: none; }

.pay-gate .payment-card { padding: 24px; border-radius: 24px; background: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow); }
.pay-gate .payment-card[hidden] { display: none; }
.pay-gate .payment-card h2 { margin: 0 0 12px; font-family: 'Chango', sans-serif; font-weight: 400; font-size: 22px; color: #097e3e; }
.pay-gate .payment-card p { font-size: 14px; line-height: 1.6; color: rgba(9,126,62,0.72); }
.pay-gate .payment-card label { display: block; margin-top: 24px; font-size: 12px; font-weight: 700; color: #097e3e; }
.pay-gate .pix-recipient { text-align: center; color: #097e3e; }
.pay-gate .pix-qr { display: block; width: min(100%, 264px); height: auto; margin: 20px auto; background: #fff; border-radius: 12px; }
.pay-gate #payPixCode { width: 100%; display: block; resize: vertical; min-height: 76px; margin: 8px 0 14px; padding: 12px; border: 1px solid #cdeede; border-radius: 12px; background: #f2f9f5; color: #0a3d22; font: 12px/1.5 monospace; overflow-wrap: anywhere; }
.pay-gate #payPixKey { display: block; width: 100%; min-width: 0; padding: 16px 12px; margin: 8px 0 14px; border: 3px double #097e3e; border-radius: 12px; background: #f2f9f5; color: #0a3d22; text-align: center; font: 700 22px monospace; }
.pay-gate #payPixStatus { min-height: 22px; color: rgba(9,126,62,0.72); font-size: 14px; }
.pay-gate .payment-note { border-top: 1px solid #d8efe1; padding-top: 16px; }

.pay-gate .link-card {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; border: none; border-radius: 12px;
  background: #097e3e; box-shadow: var(--shadow);
  transition: transform .22s, background-color .22s, color .22s;
}
.pay-gate .coupon-copy { width: 100%; height: 50px; justify-content: center; cursor: pointer; color: #ffffff; }
.pay-gate .coupon-copy strong { font-size: 14px; }
.pay-gate .coupon-copy:is(:hover, :focus-visible) { transform: translateY(-3px); background: #0a9a4b; color: #ffffff; }
.pay-gate .coupon-copy:active { transform: scale(.98); }

@media (max-width: 359px) {
  .pay-gate .payment-card { padding: 18px; }
  .pay-gate .payment-choice { padding: 16px; gap: 10px; }
  .pay-gate .payment-choice strong { font-size: 15px; }
}

.pay-gate .pay-toast {
  position: fixed; z-index: 20; bottom: 20px; left: 50%; transform: translate(-50%, 10px);
  width: max-content; max-width: calc(100% - 32px); border-radius: 16px;
  background: #6cf57c; color: #04140b; padding: 14px 20px;
  font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transition: .2s;
}
.pay-gate .pay-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.pay-gate [hidden] { display: none !important; }
.pay-gate #pay-title:focus, .pay-gate #pay-title:focus-visible { outline: none; }

/* =========================================================
   CAMADA DO PROTÓTIPO
   Mantém a estrutura da referência, remove marca/conteúdo e
   reduz a interface a preto, branco e cinzas.
   ========================================================= */
:root {
  --verde: #111111;
  --verde-escuro: #000000;
  --verde-claro: #ffffff;
  --creme: #ffffff;
  --texto: #111111;
  --shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

html {
  background: #ffffff;
  filter: grayscale(1);
}

body {
  background: #ffffff !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body *,
body *::before,
body *::after {
  background-image: none !important;
}

header,
main,
footer,
.container,
.container-btns,
.slider,
.slider-track,
.nb-panel,
.cp-box,
.share-bubble,
.cd-tela {
  color: #111111 !important;
}

/* Nenhuma imagem ou logotipo da identidade aparece fora de Pagamentos. */
body img:not(.pay-gate img),
.gb-waves,
.gb-flut,
.Logos,
.prototype-mark,
.nb-logo,
.nb-panel-bg,
.tech-circle,
.slider-title,
.slider-dots {
  display: none !important;
}

body button,
body a {
  pointer-events: none;
}

.slider,
.slider-track,
.nb-panel,
.container-btns,
.cp-overlay,
.share-wrap,
.lb-overlay,
.cd-tela {
  pointer-events: none !important;
}

#gbPayBtn,
.pay-gate button,
.pay-gate a {
  pointer-events: auto;
}

.button2,
.share-btn,
.nb-hamburger,
.nb-close,
.cd-filtro,
.cd-quadro {
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

#gbPayBtn {
  background: #111111 !important;
  border: 2px solid #111111 !important;
  color: #ffffff !important;
  box-shadow: 4px 4px 0 #bdbdbd !important;
}

#gbPayBtn svg {
  display: block !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* O slider permanece com a mesma mecânica, mas sem mídia ou texto. */
.slide {
  min-height: 220px;
  background: #ffffff !important;
  border: 2px solid #111111;
  box-shadow: none !important;
}

.slide:nth-child(even) {
  background: #eeeeee !important;
}

/* Pagamentos continua sendo a única área ativa e visível com conteúdo. */
.pay-gate,
.pay-gate .payment-page,
.pay-gate .payment-card,
.pay-gate .payment-choice,
.pay-gate input,
.pay-gate textarea {
  background: #ffffff !important;
  color: #111111 !important;
}

.pay-gate .payment-page,
.pay-gate .payment-card,
.pay-gate .payment-choice,
.pay-gate input,
.pay-gate textarea,
.pay-gate .payment-choice-icon {
  border-color: #111111 !important;
}

.pay-gate .payment-choice-unavailable {
  background: #eeeeee !important;
  opacity: .55;
}

.pay-gate h1,
.pay-gate h2,
.pay-gate p,
.pay-gate label,
.pay-gate strong,
.pay-gate small,
.pay-gate textarea,
.pay-gate input {
  color: #111111 !important;
}

.pay-gate .link-card,
.pay-gate .coupon-copy {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
}

.pay-gate .payment-back,
.pay-gate .pay-toast {
  background: #111111 !important;
  color: #ffffff !important;
}

.pay-gate svg {
  stroke: currentColor !important;
}

.pay-gate img {
  filter: grayscale(1) contrast(1.15);
}

/* =========================================================
   CONFIGURADOR DE ESTRUTURA
   ========================================================= */
#gbPayBtn,
.prototype-bridge {
  display: none !important;
}

#nbHamburger,
#nbClose,
#settingsOpen,
.settings-screen button,
.prototype-action {
  pointer-events: auto !important;
  color: #111111 !important;
  font-size: inherit !important;
}

#nbHamburger > *,
#settingsOpen > *,
.settings-screen button > *,
.prototype-action > * {
  display: flex !important;
}

#nbHamburger {
  display: flex !important;
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

#nbHamburger span {
  display: block !important;
  background: #111111 !important;
}

#nbClose {
  display: grid !important;
  place-items: center;
  color: #111111 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.nb-overlay.open {
  pointer-events: auto !important;
}

.nb-panel.open {
  pointer-events: auto !important;
  background: #ffffff !important;
  border-right: 2px solid #111111;
}

.nb-logo-wrap,
.nb-search,
.nb-item:not(.nb-item-settings) {
  display: none !important;
}

.nb-nav {
  margin-top: 92px;
}

.nb-item-settings {
  opacity: 1 !important;
  transform: none !important;
}

#settingsOpen {
  width: 100%;
  min-height: 58px;
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

#settingsOpen .nb-link-icon,
#settingsOpen .nb-link-text {
  display: flex !important;
  color: #111111 !important;
}

#settingsOpen svg {
  width: 22px;
  height: 22px;
}

.layout-stage {
  width: min(760px, calc(100% - 32px));
  margin: 110px auto 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.container-btns {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  pointer-events: auto !important;
}

.prototype-action {
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid #111111 !important;
  border-radius: 16px;
  background: #ffffff !important;
  box-shadow: 4px 4px 0 #111111 !important;
  font: 700 15px/1.2 Arial, Helvetica, sans-serif !important;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.prototype-action:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #111111 !important;
}

.prototype-action:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #111111 !important;
}

.prototype-action svg {
  display: block !important;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #111111;
}

.prototype-action span {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prototype-slider-wrap {
  width: 100%;
}

.prototype-slider-wrap .slider {
  width: 100% !important;
  margin: 0 !important;
  pointer-events: none !important;
}

body[data-layout="layout-1"] .prototype-slider-wrap {
  display: none;
}

body[data-layout="layout-2"] .container-btns { order: 1; }
body[data-layout="layout-2"] .prototype-slider-wrap { order: 2; }
body[data-layout="layout-3"] .prototype-slider-wrap { order: 1; }
body[data-layout="layout-3"] .container-btns { order: 2; }

.layout-logo {
  position: absolute;
  z-index: 20;
  width: min(180px, 34vw);
  height: 82px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.layout-logo[hidden] {
  display: none !important;
}

body .layout-logo img#layoutLogoImage,
body .logo-editor-preview img#logoPreviewImage {
  display: block !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
}

body .logo-editor-preview img#logoPreviewImage[hidden] {
  display: none !important;
}

body[data-logo-position="header-center"] .layout-logo {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

body[data-logo-position="header-left"] .layout-logo {
  top: 24px;
  left: 28px;
}

body[data-logo-position="header-right"] .layout-logo {
  top: 24px;
  right: 28px;
}

body[data-logo-position="free-center"] .layout-logo {
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
}

body[data-logo-position="free-center"] .layout-stage {
  margin-top: 218px;
}

/* Tela de configurações */
.settings-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: auto;
  background: #f3f3f3 !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  pointer-events: auto !important;
}

.settings-screen[hidden] {
  display: none !important;
}

.settings-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  min-height: 86px !important;
  height: auto !important;
  padding: 16px max(20px, calc((100vw - 1100px) / 2));
  display: grid !important;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 2px solid #111111;
  backdrop-filter: blur(14px);
}

.settings-header h1,
.settings-card h2,
.button-editor-head h3 {
  margin: 0;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.settings-header h1 { font-size: clamp(24px, 4vw, 38px); line-height: 1; }
.settings-kicker { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.settings-save-state { min-width: 140px; font-size: 13px; font-weight: 700; text-align: right; }

.settings-icon-button,
.row-icon-button {
  display: grid !important;
  place-items: center;
  padding: 0;
  border: 2px solid #111111 !important;
  background: #ffffff !important;
  box-shadow: 3px 3px 0 #111111 !important;
  cursor: pointer;
}

.settings-icon-button { width: 44px; height: 44px; border-radius: 12px; }
.settings-icon-button svg,
.row-icon-button svg,
.settings-primary-button svg { display: block !important; width: 20px; height: 20px; }

.settings-content {
  width: min(1100px, calc(100% - 32px));
  margin: 30px auto 120px;
  display: grid;
  gap: 22px;
}

.settings-card {
  padding: clamp(20px, 4vw, 38px);
  background: #ffffff !important;
  border: 2px solid #111111;
  border-radius: 24px;
  box-shadow: 7px 7px 0 #111111;
}

.settings-card-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.settings-step {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 800;
}

.settings-card h2 { font-size: 25px; }
.settings-card-head p,
.button-editor-head p { margin: 5px 0 0; color: #666666; font-size: 14px; }

.logo-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.3fr;
  gap: 24px;
}

.logo-editor-preview {
  min-height: 180px;
  padding: 20px;
  display: grid;
  place-items: center;
  border: 2px dashed #777777;
  border-radius: 18px;
  background: #f7f7f7 !important;
  color: #777777;
  overflow: hidden;
}

.logo-editor-preview img { max-height: 150px; }
.logo-editor-actions { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.logo-editor-actions small { max-width: 480px; color: #666666; line-height: 1.5; }
#logoFile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.settings-file-button,
.settings-primary-button,
.settings-secondary-button {
  min-height: 44px;
  padding: 11px 17px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #111111 !important;
  border-radius: 12px;
  font: 800 13px/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer;
}

.settings-file-button,
.settings-primary-button {
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 3px 3px 0 #a9a9a9 !important;
}

.settings-screen .settings-primary-button,
.settings-screen .row-remove-button {
  color: #ffffff !important;
}

.settings-screen .settings-primary-button {
  font: 800 13px/1 Arial, Helvetica, sans-serif !important;
}

.settings-secondary-button {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 3px 3px 0 #111111 !important;
}

.layout-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.layout-option {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 2px solid #b8b8b8;
  border-radius: 18px;
  background: #ffffff !important;
  cursor: pointer;
}

.layout-option:has(input:checked) {
  border-color: #111111;
  box-shadow: 4px 4px 0 #111111;
}

.layout-option input { position: absolute; top: 14px; right: 14px; accent-color: #111111; }
.layout-option strong { font-size: 15px; }
.layout-option small { color: #666666; line-height: 1.35; }

.layout-option-visual {
  height: 76px;
  margin-bottom: 5px;
  padding: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid #111111;
  border-radius: 9px;
  background: #eeeeee !important;
}

.layout-option-visual i { display: block; height: 10px; align-self: start; border-radius: 4px; background: #111111 !important; }
.layout-option-visual b { display: block; grid-column: 1 / -1; min-height: 36px; align-self: end; border: 1px solid #111111; border-radius: 5px; background: #ffffff !important; }
.layout-option-visual-top b { order: -1; align-self: start; }
.layout-option-visual-top i { align-self: end; }
.layout-option-visual-buttons { grid-template-columns: 1fr 1fr; align-content: center; }
.layout-option-visual-buttons i { height: 14px; }

.settings-field { margin-top: 24px; }
.settings-field label,
.button-config-fields label { display: flex; flex-direction: column; gap: 7px; color: #333333; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.settings-field select,
.button-config-fields select,
.button-config-fields input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid #111111;
  border-radius: 11px;
  background: #ffffff !important;
  color: #111111 !important;
  font: 600 14px/1 Arial, Helvetica, sans-serif;
}
.settings-field select { max-width: 360px; margin-top: 8px; }

.button-editor-head {
  margin: 32px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-top: 26px;
  border-top: 2px solid #111111;
}

.settings-primary-button:disabled,
.row-icon-button:disabled { opacity: .35; cursor: not-allowed; }

.button-config-list { display: grid; gap: 12px; }
.button-config-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 2px solid #111111;
  border-radius: 16px;
  background: #f8f8f8 !important;
}

.button-config-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 800;
}

.button-config-fields { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.button-config-fields input:disabled { background: #dddddd !important; color: #777777 !important; }
.button-config-actions { display: flex; gap: 7px; }
.row-icon-button { width: 38px; height: 38px; border-radius: 10px; box-shadow: none !important; }
.row-remove-button { background: #111111 !important; color: #ffffff !important; }
.button-config-empty { margin: 0; padding: 28px; border: 2px dashed #999999; border-radius: 14px; text-align: center; color: #666666; }

.settings-footer {
  position: fixed !important;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 80px;
  padding: 14px max(20px, calc((100vw - 1100px) / 2));
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(255,255,255,.97) !important;
  border-top: 2px solid #111111;
  backdrop-filter: blur(14px);
}

.settings-save-button { min-width: 170px; }

@media (max-width: 760px) {
  .layout-stage { margin-top: 96px; }
  body[data-logo-position="free-center"] .layout-stage { margin-top: 195px; }
  .container-btns { grid-template-columns: 1fr; }
  .layout-options { grid-template-columns: 1fr; }
  .layout-option { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
  .layout-option-visual { grid-row: 1 / 3; }
  .logo-editor { grid-template-columns: 1fr; }
  .button-config-row { grid-template-columns: 38px 1fr; }
  .button-config-actions { grid-column: 2; }
  .button-config-fields { grid-template-columns: 1fr; }
  .settings-header { grid-template-columns: 44px 1fr; }
  .settings-save-state { display: none; }
}

@media (max-width: 480px) {
  .settings-content { width: min(100% - 20px, 1100px); margin-top: 14px; }
  .settings-card { padding: 18px; border-radius: 18px; box-shadow: 4px 4px 0 #111111; }
  .settings-footer { justify-content: stretch; }
  .settings-footer button { flex: 1; }
  .button-editor-head { align-items: stretch; flex-direction: column; }
  .settings-primary-button { width: 100%; }
  .layout-logo { width: min(150px, 40vw); }
}

/* =========================================================
   TEMA RGB + PADRÃO RESPONSIVO DA LOGO
   ========================================================= */
:root {
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-primary: #111111;
  --theme-text: #111111;
  --theme-accent: #bdbdbd;
  --gb-bg-1: var(--theme-bg);
  --gb-bg-2: var(--theme-surface);
  --gb-bg-3: var(--theme-accent);
  --gb-dark: var(--theme-primary);
  --gb-text: var(--theme-text);
  --gb-accent: var(--theme-primary);
  --gb-accent2: var(--theme-primary);
  --gb-accent3: var(--theme-accent);
  --gb-accent4: var(--theme-accent);
  --layout-logo-size: clamp(86px, 12vw, 124px);
  --layout-logo-width: var(--layout-logo-size);
  --layout-logo-height: var(--layout-logo-size);
}

html {
  filter: none !important;
  background: var(--theme-bg) !important;
}

body {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  transition: background-color .2s ease, color .2s ease;
}

body > header,
body > main,
body > footer {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

#nbHamburger,
.nb-panel.open,
#settingsOpen {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-text) !important;
  box-shadow: 4px 4px 0 var(--theme-primary) !important;
}

#nbHamburger span {
  background: var(--theme-primary) !important;
}

#settingsOpen .nb-link-icon,
#settingsOpen .nb-link-text {
  color: var(--theme-text) !important;
}

.lq-front {
  fill: var(--theme-surface) !important;
}

.prototype-action {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-text) !important;
  box-shadow: 4px 4px 0 var(--theme-accent) !important;
}

.prototype-action:hover {
  box-shadow: 7px 7px 0 var(--theme-accent) !important;
}

.prototype-action svg {
  color: var(--theme-primary) !important;
}

.slide {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
}

.slide:nth-child(even) {
  background: color-mix(in srgb, var(--theme-surface) 78%, var(--theme-accent)) !important;
}

.copyright-badge {
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
}

.pay-gate,
.pay-gate .payment-page,
.pay-gate .payment-card,
.pay-gate .payment-choice,
.pay-gate input,
.pay-gate textarea {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

.pay-gate .payment-page,
.pay-gate .payment-card,
.pay-gate .payment-choice,
.pay-gate input,
.pay-gate textarea,
.pay-gate .payment-choice-icon {
  border-color: var(--theme-primary) !important;
}

.pay-gate h1,
.pay-gate h2,
.pay-gate p,
.pay-gate label,
.pay-gate strong,
.pay-gate small,
.pay-gate textarea,
.pay-gate input {
  color: var(--theme-text) !important;
}

.pay-gate .link-card,
.pay-gate .coupon-copy,
.pay-gate .payment-back,
.pay-gate .pay-toast {
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
}

/* A caixa da logo tem tamanho previsível e a imagem sempre usa contain. */
body[data-layout="layout-1"] {
  --layout-logo-size: clamp(92px, 13vw, 132px);
}

body[data-layout="layout-2"],
body[data-layout="layout-3"] {
  --layout-logo-size: clamp(82px, 11vw, 116px);
}

.layout-logo {
  width: var(--layout-logo-size) !important;
  height: var(--layout-logo-size) !important;
  aspect-ratio: 1;
  padding: 4px;
  box-sizing: border-box;
  border: 3px solid var(--theme-primary);
  border-radius: 50%;
  background: var(--theme-surface) !important;
  box-shadow: 5px 5px 0 var(--theme-accent);
  overflow: hidden;
}

body .layout-logo img#layoutLogoImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50%;
  filter: none !important;
}

.logo-editor-preview {
  position: relative;
}

body .logo-editor-preview img#logoPreviewImage {
  width: 144px !important;
  height: 144px !important;
  max-width: 144px !important;
  max-height: 144px !important;
  aspect-ratio: 1;
  padding: 4px;
  box-sizing: border-box;
  border: 3px solid #111111;
  border-radius: 50%;
  background: #ffffff !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  box-shadow: 5px 5px 0 #bdbdbd;
}

body.has-layout-logo[data-logo-position="header-left"] .layout-logo {
  left: max(88px, calc((100vw - 1120px) / 2)) !important;
}

body.has-layout-logo[data-logo-position="header-right"] .layout-logo {
  right: max(24px, calc((100vw - 1120px) / 2)) !important;
}

body.has-layout-logo[data-logo-position^="header-"] .layout-stage {
  margin-top: max(122px, calc(var(--layout-logo-height) + 48px));
}

body.has-layout-logo[data-logo-position="free-center"] .layout-stage {
  margin-top: calc(128px + var(--layout-logo-height));
}

body.has-layout-logo .layout-stage {
  box-sizing: border-box;
  padding-top: calc(var(--layout-logo-height) + 24px) !important;
}

body:not(.has-layout-logo)[data-logo-position="free-center"] .layout-stage {
  margin-top: 110px;
  padding-top: 0 !important;
}

/* Editor RGB */
.theme-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 24px;
  align-items: start;
}

.theme-color-list {
  display: grid;
  gap: 11px;
}

.theme-color-row {
  display: grid;
  grid-template-columns: 58px minmax(110px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 2px solid #111111;
  border-radius: 15px;
  background: #f8f8f8 !important;
}

.theme-color-picker {
  width: 54px;
  height: 54px;
  padding: 3px;
  border: 2px solid #111111;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.theme-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color-picker::-webkit-color-swatch { border: 0; border-radius: 7px; }

.theme-color-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.theme-color-info strong { font-size: 14px; }
.theme-color-info code { color: #666666; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }

.theme-rgb-fields {
  display: grid;
  grid-template-columns: repeat(3, 68px);
  gap: 7px;
}

.theme-rgb-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #555555;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.theme-rgb-fields input {
  width: 68px;
  min-height: 40px;
  padding: 7px;
  border: 2px solid #111111;
  border-radius: 9px;
  background: #ffffff !important;
  color: #111111 !important;
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  text-align: center;
}

.theme-preview {
  position: sticky;
  top: 112px;
  min-height: 340px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 2px solid var(--preview-primary, #111111);
  border-radius: 20px;
  background: var(--preview-bg, #ffffff) !important;
  color: var(--preview-text, #111111) !important;
  box-shadow: 7px 7px 0 var(--preview-accent, #bdbdbd);
  overflow: hidden;
}

.theme-preview-header { display: flex; justify-content: flex-end; gap: 6px; }
.theme-preview-header i { width: 13px; height: 13px; display: block; border-radius: 50%; background: var(--preview-primary, #111111) !important; }
.theme-preview-logo { height: 62px; display: grid; place-items: center; color: var(--preview-primary, #111111); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.theme-preview-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.theme-preview-buttons span { min-height: 48px; display: grid; place-items: center; border: 2px solid var(--preview-primary, #111111); border-radius: 10px; background: var(--preview-surface, #ffffff) !important; color: var(--preview-text, #111111); font-size: 10px; font-weight: 900; box-shadow: 3px 3px 0 var(--preview-accent, #bdbdbd); }
.theme-preview-slide { flex: 1; min-height: 120px; border: 2px solid var(--preview-primary, #111111); border-radius: 13px; background: color-mix(in srgb, var(--preview-surface, #fff) 75%, var(--preview-accent, #bbb)) !important; }

.theme-preview[data-structure-theme="theme-1"] { box-shadow: none; border-width: 1px; }
.theme-preview[data-structure-theme="theme-1"] .theme-preview-buttons span,
.theme-preview[data-structure-theme="theme-1"] .theme-preview-slide { box-shadow: none; border-width: 1px; }
.theme-preview[data-structure-theme="theme-2"] { background: color-mix(in srgb, var(--preview-surface) 34%, transparent) !important; backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 38px rgba(0,0,0,.25); }
.theme-preview[data-structure-theme="theme-2"] .theme-preview-buttons span,
.theme-preview[data-structure-theme="theme-2"] .theme-preview-slide { background: color-mix(in srgb, var(--preview-surface) 35%, transparent) !important; border-color: rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.theme-preview[data-structure-theme="theme-4"] { border: 0; box-shadow: none; }
.theme-preview[data-structure-theme="theme-4"] .theme-preview-buttons span,
.theme-preview[data-structure-theme="theme-4"] .theme-preview-slide { border: 0; box-shadow: none; background: var(--preview-primary) !important; color: var(--preview-surface); }
.theme-preview[data-structure-theme="theme-5"] { border-radius: 34px 16px 38px 20px; box-shadow: 8px 10px 0 color-mix(in srgb, var(--preview-primary) 60%, transparent); }
.theme-preview[data-structure-theme="theme-5"] .theme-preview-buttons span,
.theme-preview[data-structure-theme="theme-5"] .theme-preview-slide { border: 0; border-radius: 999px 35% 999px 45%; box-shadow: 4px 5px 0 color-mix(in srgb, var(--preview-primary) 55%, transparent); }

@media (max-width: 820px) {
  .theme-editor { grid-template-columns: 1fr; }
  .theme-preview { position: static; min-height: 280px; }
}

@media (max-width: 560px) {
  .theme-color-row { grid-template-columns: 52px 1fr; }
  .theme-rgb-fields { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .theme-rgb-fields input { width: 100%; }
  body.has-layout-logo[data-logo-position="header-left"] .layout-logo { left: 78px !important; }
  body.has-layout-logo[data-logo-position="header-right"] .layout-logo { right: 14px !important; }
}

/* =========================================================
   TEMAS ESTRUTURAIS + MINI-BUTTONS
   ========================================================= */
.mini-buttons-dock {
  position: fixed;
  z-index: 5000;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.mini-buttons-dock .share-btn {
  position: static !important;
  inset: auto !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px;
  min-height: 50px;
  margin: 0 !important;
  padding: 12px !important;
  display: none !important;
  place-items: center;
  border: 2px solid var(--theme-primary) !important;
  border-radius: 50% !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: 4px 4px 0 var(--theme-accent) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer;
}

.mini-buttons-dock .share-btn > svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: none !important;
}

.mini-buttons-dock .google-btn .gb-stars { display: none !important; }
body.mini-share-active #shareBtn,
body.mini-discount-active #promoBtn,
body.mini-qr-active #qrMiniBtn,
body.mini-google-active #googleBtn { display: grid !important; }

.mini-button-editor { margin-top: 26px; }
.mini-button-editor-head { margin-bottom: 14px; }
.mini-button-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.mini-button-option {
  position: relative;
  min-height: 82px;
  padding: 14px 48px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid #aaaaaa;
  border-radius: 15px;
  background: #ffffff !important;
  cursor: pointer;
}

.mini-button-option:has(input:checked) {
  border-color: #111111;
  box-shadow: 4px 4px 0 #111111;
}

.mini-button-option input {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  accent-color: #111111;
}

.mini-button-option-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111111 !important;
  color: #ffffff !important;
}

.mini-button-option-icon svg { width: 21px; height: 21px; }
.mini-button-option > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.mini-button-option strong { font-size: 14px; }
.mini-button-option small { color: #666666; font-size: 12px; line-height: 1.35; }

.structure-theme-options {
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.structure-theme-option {
  position: relative;
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 2px solid #b8b8b8;
  border-radius: 15px;
  background: #ffffff !important;
  cursor: pointer;
}

.structure-theme-option:has(input:checked) {
  border-color: #111111;
  box-shadow: 4px 4px 0 #111111;
}

.structure-theme-option input { position: absolute; top: 9px; right: 9px; accent-color: #111111; }
.structure-theme-option > strong { margin-top: 4px; font-size: 12px; line-height: 1.25; }
.structure-theme-option > small { color: #666666; font-size: 10px; line-height: 1.3; }

.structure-theme-visual {
  height: 78px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border-radius: 10px;
  overflow: hidden;
  background: #eeeeee !important;
}

.structure-theme-visual i { grid-column: 1 / -1; width: 24px; height: 24px; display: block; justify-self: center; border-radius: 50%; background: #111111 !important; }
.structure-theme-visual b { height: 20px; display: block; border: 1px solid #111111; border-radius: 5px; background: #ffffff !important; }
.theme-card-1 .structure-theme-visual b { box-shadow: none; border-width: 1px; }
.theme-card-2 .structure-theme-visual { background: linear-gradient(145deg, #0a0d13, #516070) !important; }
.theme-card-2 .structure-theme-visual i,
.theme-card-2 .structure-theme-visual b { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.theme-card-3 .structure-theme-visual b { border: 2px solid #111111; box-shadow: 3px 3px 0 #999999; }
.theme-card-4 .structure-theme-visual i,
.theme-card-4 .structure-theme-visual b { border: 0; border-radius: 3px; background: #111111 !important; }
.theme-card-5 .structure-theme-visual { border-radius: 22px 8px 24px 10px; background: linear-gradient(145deg, #d9d9d9, #ffffff) !important; }
.theme-card-5 .structure-theme-visual i,
.theme-card-5 .structure-theme-visual b { border: 0; border-radius: 999px 35% 999px 45%; box-shadow: 3px 4px 0 #aaaaaa; }

/* Tema 1 — padrão simples e sofisticado. */
body[data-structure-theme="theme-1"] .prototype-action,
body[data-structure-theme="theme-1"] #nbHamburger,
body[data-structure-theme="theme-1"] #settingsOpen,
body[data-structure-theme="theme-1"] .layout-logo,
body[data-structure-theme="theme-1"] .slide,
body[data-structure-theme="theme-1"] .mini-buttons-dock .share-btn {
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--theme-primary) 28%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body[data-structure-theme="theme-1"] .layout-logo,
body[data-structure-theme="theme-1"] .mini-buttons-dock .share-btn { border-radius: 50% !important; }
body[data-structure-theme="theme-1"] .nb-liquid { display: none !important; }

/* Tema 2 — glassmorphism inspirado na referência enviada. */
body[data-structure-theme="theme-2"] {
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--theme-primary) 55%, transparent), transparent 34%),
    radial-gradient(circle at 85% 78%, color-mix(in srgb, var(--theme-accent) 62%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-bg) 72%, #05070b), color-mix(in srgb, var(--theme-primary) 24%, #090b11)) !important;
  background-attachment: fixed !important;
}

body[data-structure-theme="theme-2"] > header,
body[data-structure-theme="theme-2"] > main,
body[data-structure-theme="theme-2"] > footer { background: transparent !important; }

body[data-structure-theme="theme-2"] .prototype-action,
body[data-structure-theme="theme-2"] #nbHamburger,
body[data-structure-theme="theme-2"] #settingsOpen,
body[data-structure-theme="theme-2"] .layout-logo,
body[data-structure-theme="theme-2"] .slide,
body[data-structure-theme="theme-2"] .mini-buttons-dock .share-btn,
body[data-structure-theme="theme-2"] .nb-panel.open {
  background: color-mix(in srgb, var(--theme-surface) 34%, transparent) !important;
  border: 1px solid color-mix(in srgb, #ffffff 38%, var(--theme-primary)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 45px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

body[data-structure-theme="theme-2"] .prototype-action,
body[data-structure-theme="theme-2"] .slide { border-radius: 20px !important; }
body[data-structure-theme="theme-2"] .layout-logo { border-radius: 50% !important; }
body[data-structure-theme="theme-2"] .nb-liquid { opacity: .45; filter: blur(2px); }

/* Tema 3 — abstrato atual. */
body[data-structure-theme="theme-3"] .prototype-action,
body[data-structure-theme="theme-3"] #nbHamburger,
body[data-structure-theme="theme-3"] #settingsOpen,
body[data-structure-theme="theme-3"] .slide,
body[data-structure-theme="theme-3"] .mini-buttons-dock .share-btn {
  border: 2px solid var(--theme-primary) !important;
  box-shadow: 4px 4px 0 var(--theme-accent) !important;
}

/* Tema 4 — sólido, sem bordas nem sombras. */
body[data-structure-theme="theme-4"] .prototype-action,
body[data-structure-theme="theme-4"] #nbHamburger,
body[data-structure-theme="theme-4"] #settingsOpen,
body[data-structure-theme="theme-4"] .layout-logo,
body[data-structure-theme="theme-4"] .slide,
body[data-structure-theme="theme-4"] .mini-buttons-dock .share-btn,
body[data-structure-theme="theme-4"] .nb-panel.open {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
}

body[data-structure-theme="theme-4"] .prototype-action svg,
body[data-structure-theme="theme-4"] #settingsOpen .nb-link-icon,
body[data-structure-theme="theme-4"] #settingsOpen .nb-link-text { color: var(--theme-surface) !important; }
body[data-structure-theme="theme-4"] .layout-logo { border-radius: 50% !important; padding: 0; }
body[data-structure-theme="theme-4"] .nb-liquid { display: none !important; }

/* Tema 5 — líquido/bubble. */
body[data-structure-theme="theme-5"] {
  background: linear-gradient(155deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 65%, var(--theme-accent))) !important;
}

body[data-structure-theme="theme-5"] .gb-waves,
body[data-structure-theme="theme-5"] .gb-flut { display: block !important; }
body[data-structure-theme="theme-5"] .gw-1 { fill: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-bg)) !important; }
body[data-structure-theme="theme-5"] .gw-2 { fill: color-mix(in srgb, var(--theme-primary) 58%, var(--theme-bg)) !important; }
body[data-structure-theme="theme-5"] .gw-3 { fill: var(--theme-primary) !important; }
body[data-structure-theme="theme-5"] .gb-flut-item svg { stroke: var(--theme-primary) !important; }

body[data-structure-theme="theme-5"] .prototype-action,
body[data-structure-theme="theme-5"] #nbHamburger,
body[data-structure-theme="theme-5"] #settingsOpen,
body[data-structure-theme="theme-5"] .slide,
body[data-structure-theme="theme-5"] .mini-buttons-dock .share-btn {
  border: 0 !important;
  border-radius: 999px 42% 999px 48% !important;
  background: linear-gradient(145deg, var(--theme-surface), color-mix(in srgb, var(--theme-surface) 72%, var(--theme-accent))) !important;
  box-shadow: 7px 9px 0 color-mix(in srgb, var(--theme-primary) 62%, transparent) !important;
}

body[data-structure-theme="theme-5"] .layout-logo {
  border: 5px solid var(--theme-surface) !important;
  border-radius: 50% 46% 54% 48% !important;
  box-shadow: 8px 10px 0 color-mix(in srgb, var(--theme-primary) 62%, transparent) !important;
}

body[data-structure-theme="theme-5"] .layout-logo img { border-radius: inherit !important; }

@media (max-width: 880px) {
  .structure-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mini-button-options { grid-template-columns: 1fr; }
  .structure-theme-options { grid-template-columns: 1fr; }
  .structure-theme-option { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
  .structure-theme-option .structure-theme-visual { grid-row: 1 / 3; }
  .mini-buttons-dock { right: 14px; bottom: 14px; }
  .mini-buttons-dock .share-btn { width: 46px !important; height: 46px !important; min-width: 46px; min-height: 46px; }
}

/* =========================================================
   Header estrutural — menu + logo livre
   ========================================================= */
:root {
  --page-header-height: clamp(76px, 9vw, 94px);
  --page-header-gutter: clamp(14px, 3vw, 34px);
  --header-logo-width: clamp(112px, 18vw, 184px);
}

.page-shell {
  position: relative;
  width: 100%;
  min-height: 100svh;
  margin: 0 auto;
}

.page-header {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 45;
  width: 100vw;
  height: var(--page-header-height);
  padding: 0 var(--page-header-gutter);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 24%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 10%, transparent);
  transform: translateX(-50%);
}

.page-header #nbHamburger {
  position: static !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0 !important;
  transform: none !important;
}

/* O campo existe para dimensionar a imagem, mas não é desenhado. */
body[data-structure-theme] .page-header .layout-logo {
  position: static !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  width: min(100%, var(--header-logo-width)) !important;
  height: calc(var(--page-header-height) - 20px) !important;
  min-width: 0;
  max-width: var(--header-logo-width);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: layout paint;
  line-height: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-structure-theme] .page-header .layout-logo img,
body[data-structure-theme] .page-header .layout-logo img#layoutLogoImage {
  display: block;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-logo-position="header-left"] .page-header .layout-logo {
  justify-self: start;
}

body[data-logo-position="header-center"] .page-header .layout-logo {
  justify-self: center;
}

body[data-logo-position="header-right"] .page-header .layout-logo {
  justify-self: end;
}

body[data-logo-position="free-center"] .page-header .layout-logo {
  position: absolute !important;
  grid-column: 1 / -1;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

/* Regra de segurança contra estilos antigos de foto de perfil. */
body.has-layout-logo .page-header #layoutLogo,
body.has-layout-logo[data-logo-position] .page-header #layoutLogo {
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

body.has-layout-logo .page-header #layoutLogoImage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* O conteúdo sempre começa depois do header, com ou sem logo. */
.page-shell .layout-stage,
body.has-layout-logo .page-shell .layout-stage,
body.has-layout-logo[data-logo-position^="header-"] .page-shell .layout-stage,
body.has-layout-logo[data-logo-position="free-center"] .page-shell .layout-stage,
body:not(.has-layout-logo)[data-logo-position="free-center"] .page-shell .layout-stage {
  margin-top: 0 !important;
  padding-top: calc(var(--page-header-height) + clamp(22px, 4vh, 42px)) !important;
}

/* A miniatura no editor também apresenta a marca sem moldura. */
body .logo-editor-preview img#logoPreviewImage {
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* O próprio header acompanha o tema; a logo permanece sempre neutra. */
body[data-structure-theme="theme-1"] .page-header {
  background: var(--theme-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 20%, transparent);
  box-shadow: none;
}

body[data-structure-theme="theme-2"] .page-header {
  background: color-mix(in srgb, var(--theme-surface) 35%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, #ffffff 38%, var(--theme-primary)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 34px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

body[data-structure-theme="theme-3"] .page-header {
  border-bottom: 2px solid var(--theme-primary);
  box-shadow: 0 5px 0 var(--theme-accent);
}

body[data-structure-theme="theme-4"] .page-header {
  background: var(--theme-primary);
  border: 0;
  box-shadow: none;
}

body[data-structure-theme="theme-4"] .page-header #nbHamburger {
  background: var(--theme-surface) !important;
  color: var(--theme-primary) !important;
}

body[data-structure-theme="theme-4"] .page-header #nbHamburger span {
  background: var(--theme-primary) !important;
}

body[data-structure-theme="theme-5"] .page-header {
  background: linear-gradient(120deg, var(--theme-surface), color-mix(in srgb, var(--theme-surface) 68%, var(--theme-accent)));
  border: 0;
  border-radius: 0 0 clamp(18px, 4vw, 42px) clamp(18px, 4vw, 42px);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--theme-primary) 48%, transparent);
}

@media (max-width: 620px) {
  :root {
    --page-header-height: 76px;
    --page-header-gutter: 12px;
    --header-logo-width: min(42vw, 148px);
  }

  .page-header {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
  }

  body[data-logo-position="header-left"] .page-header .layout-logo {
    margin-left: 8px !important;
  }
}

/* =========================================================
   Editor e conteúdo das imagens do slide
   ========================================================= */
#slideFiles {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.slide-image-editor {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #d7d7d7;
}

.slide-image-editor-head,
.slide-image-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.slide-image-editor-head h3 {
  margin: 0 0 4px;
  font: 800 17px/1.2 Arial, Helvetica, sans-serif;
}

.slide-image-editor-head p,
.slide-image-actions small,
.slide-image-empty {
  margin: 0;
  color: #666666;
  font: 500 12px/1.45 Arial, Helvetica, sans-serif;
}

#slideLimitText {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eeeeee;
  color: #222222;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
}

.slide-image-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.slide-image-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.slide-image-empty {
  grid-column: 1 / -1;
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px dashed #aaaaaa;
  border-radius: 14px;
  background: #f7f7f7;
}

.slide-image-card {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 2px solid #111111;
  border-radius: 14px;
  background: #eeeeee;
}

body .settings-screen .slide-image-card > img {
  width: 100%;
  height: 100%;
  display: block !important;
  object-fit: cover;
}

.slide-image-number {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 28px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,.78);
  color: #ffffff;
  text-align: center;
  font: 800 10px/1 Arial, Helvetica, sans-serif;
}

.slide-image-card-actions {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: flex;
  gap: 5px;
}

.slide-image-action {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 9px;
  background: rgba(0,0,0,.78) !important;
  color: #ffffff !important;
  font: 800 16px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.slide-image-action:disabled { opacity: .35; cursor: default; }
.slide-image-remove { background: #ffffff !important; color: #111111 !important; }

.slide {
  position: relative;
  overflow: hidden;
}

body .prototype-slider-wrap .slide > img {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.slider-is-empty .slider-dots { display: none; }

@media (max-width: 620px) {
  .slide-image-editor-head,
  .slide-image-actions { align-items: flex-start; flex-direction: column; }
  .slide-image-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slide-image-actions small { max-width: 100%; }
}

/* =========================================================
   Formato e alinhamento de botões
   ========================================================= */
.button-style-editor {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #d7d7d7;
}

.button-style-editor-head { margin-bottom: 14px; }

.button-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.button-style-grid .settings-field {
  margin: 0;
}

.button-style-grid .settings-field > span {
  display: block;
  margin-bottom: 7px;
  color: #333333;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

body[data-button-shape="rounded"] .prototype-action { border-radius: 30px !important; }
body[data-button-shape="semi"] .prototype-action { border-radius: 10px !important; }
body[data-button-shape="square"] .prototype-action { border-radius: 0 !important; }

body[data-button-align="left"] .container-btns { justify-items: start; }
body[data-button-align="left"] .prototype-action { justify-content: flex-start; text-align: left; }
body[data-button-align="center"] .container-btns { justify-items: center; }
body[data-button-align="center"] .prototype-action { justify-content: center; text-align: center; }
body[data-button-align="right"] .container-btns { justify-items: end; }
body[data-button-align="right"] .prototype-action { justify-content: flex-end; text-align: right; }

/* Todos os botões usam a mesma caixa, independentemente do texto. */
body[data-button-width="short"] .prototype-action {
  width: min(100%, 220px) !important;
}

body[data-button-width="medium"] .prototype-action {
  width: min(100%, 300px) !important;
}

body[data-button-width="long"] .prototype-action {
  width: 100% !important;
}

body[data-button-height="low"] .prototype-action {
  height: 52px !important;
  min-height: 52px !important;
  padding: 9px 14px !important;
  gap: 10px !important;
  font-size: 13px !important;
}

body[data-button-height="medium"] .prototype-action {
  height: 68px !important;
  min-height: 68px !important;
  padding: 12px 18px !important;
  gap: 14px !important;
  font-size: 15px !important;
}

body[data-button-height="high"] .prototype-action {
  height: 88px !important;
  min-height: 88px !important;
  padding: 16px 22px !important;
  gap: 17px !important;
  font-size: 18px !important;
}

body[data-button-height="low"] .prototype-action svg {
  width: 22px !important;
  height: 22px !important;
  flex-basis: 22px !important;
}

body[data-button-height="medium"] .prototype-action svg {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
}

body[data-button-height="high"] .prototype-action svg {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}

/* Fonte e ícone são independentes da altura escolhida. */
body[data-button-content-size="small"] .prototype-action {
  gap: 10px !important;
  font-size: 13px !important;
}

body[data-button-content-size="medium"] .prototype-action {
  gap: 14px !important;
  font-size: 15px !important;
}

body[data-button-content-size="large"] .prototype-action {
  gap: 17px !important;
  font-size: 18px !important;
}

body[data-button-content-size="small"] .prototype-action svg {
  width: 22px !important;
  height: 22px !important;
  flex-basis: 22px !important;
}

body[data-button-content-size="medium"] .prototype-action svg {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
}

body[data-button-content-size="large"] .prototype-action svg {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}

body[data-button-content-size="small"] .prototype-action { --button-icon-column: 22px; --button-text-column: 46px; }
body[data-button-content-size="medium"] .prototype-action { --button-icon-column: 28px; --button-text-column: 54px; }
body[data-button-content-size="large"] .prototype-action { --button-icon-column: 34px; --button-text-column: 64px; }

.prototype-action > svg,
.prototype-action > span {
  position: relative;
}

.prototype-action > span {
  flex: 1 1 auto;
}

body[data-button-icon-position="left"] .prototype-action {
  flex-direction: row;
}

body[data-button-icon-position="left"] .prototype-action > svg {
  position: static !important;
  order: 0;
  transform: none !important;
}

body[data-button-icon-position="left"] .prototype-action > span {
  order: 1;
}

body[data-button-icon-position="right"] .prototype-action {
  flex-direction: row;
}

body[data-button-icon-position="right"] .prototype-action > svg {
  position: static !important;
  order: 2;
  transform: none !important;
}

body[data-button-icon-position="right"] .prototype-action > span {
  order: 1;
}

/* Coluna fixa: o texto nunca desloca a coordenada horizontal do ícone. */
body[data-button-icon-position="column"] .prototype-action > svg {
  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

body[data-button-icon-position="column"] .prototype-action > span {
  width: 100%;
}

body[data-button-text-align="left"] .prototype-action > span { text-align: left; }
body[data-button-text-align="right"] .prototype-action > span { text-align: right; }
body[data-button-text-align="center"] .prototype-action > span { text-align: center; }

/* O início de todos os textos também pode ocupar uma coluna fixa. */
body[data-button-text-align="column"] .prototype-action > span {
  width: 100%;
  padding-left: var(--button-text-column);
  box-sizing: border-box;
  text-align: left;
}

.prototype-action {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0;
}

.prototype-action > span {
  min-width: 0;
  max-width: 100%;
}

body[data-mini-button-shape="rounded"] .mini-buttons-dock .share-btn { border-radius: 30px !important; }
body[data-mini-button-shape="semi"] .mini-buttons-dock .share-btn { border-radius: 10px !important; }
body[data-mini-button-shape="square"] .mini-buttons-dock .share-btn { border-radius: 0 !important; }

body[data-mini-button-align="left"] .mini-buttons-dock {
  right: auto !important;
  left: 22px !important;
  transform: none;
}

body[data-mini-button-align="center"] .mini-buttons-dock {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

body[data-mini-button-align="right"] .mini-buttons-dock {
  right: 22px !important;
  left: auto !important;
  transform: none;
}

@media (max-width: 620px) {
  .button-style-grid { grid-template-columns: 1fr; }
  body[data-mini-button-align="left"] .mini-buttons-dock { left: 14px !important; }
  body[data-mini-button-align="right"] .mini-buttons-dock { right: 14px !important; }
}

/* =========================================================
   Formato, largura e interação do slide
   ========================================================= */
.slide-settings-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.slide-settings-grid .settings-field { margin: 0; }

.slide-settings-grid .settings-field > span {
  display: block;
  margin-bottom: 7px;
  color: #333333;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

body[data-slide-shape="square"] .prototype-slider-wrap .slider,
body[data-slide-shape="square"] .prototype-slider-wrap .slide { border-radius: 0 !important; }

body[data-slide-shape="semi"] .prototype-slider-wrap .slider,
body[data-slide-shape="semi"] .prototype-slider-wrap .slide { border-radius: 10px !important; }

body[data-slide-shape="rounded"] .prototype-slider-wrap .slider,
body[data-slide-shape="rounded"] .prototype-slider-wrap .slide { border-radius: 30px !important; }

body[data-slide-width="floating"] .prototype-slider-wrap {
  position: relative;
  left: auto;
  width: 100% !important;
  max-width: 100%;
  transform: none;
}

body[data-slide-width="full"] .prototype-slider-wrap {
  position: relative;
  left: auto;
  width: 100dvw !important;
  max-width: none;
  margin-right: calc(50% - 50dvw);
  margin-left: calc(50% - 50dvw);
  transform: none;
}

body[data-slide-width="full"] .prototype-slider-wrap .slider {
  width: 100dvw !important;
  max-width: none !important;
  height: auto;
  aspect-ratio: 16 / 9 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}

body[data-slide-width="full"] .prototype-slider-wrap .slider-track {
  height: 100%;
}

/* No preenchimento inteiro a imagem ocupa realmente toda a caixa. */
body[data-slide-width="full"] .prototype-slider-wrap .slide > img {
  object-fit: cover !important;
  background: var(--theme-surface) !important;
}

body[data-slide-width="full"] .prototype-slider-wrap .slide {
  flex: 0 0 100%;
  height: 100%;
  min-height: 100% !important;
  aspect-ratio: auto;
  border-right: 0 !important;
  border-left: 0 !important;
}

/* Com o scroll travado, o slide usa somente o espaço vertical restante. */
body[data-page-scroll="locked"][data-layout="layout-2"] .layout-stage,
body[data-page-scroll="locked"][data-layout="layout-3"] .layout-stage {
  height: 100svh;
  min-height: 0;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
  overflow: visible;
}

body[data-page-scroll="locked"][data-layout="layout-2"] .prototype-slider-wrap,
body[data-page-scroll="locked"][data-layout="layout-3"] .prototype-slider-wrap {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
}

body[data-page-scroll="locked"][data-layout="layout-2"] .prototype-slider-wrap .slider,
body[data-page-scroll="locked"][data-layout="layout-3"] .prototype-slider-wrap .slider {
  height: min(100%, calc(100dvw * 9 / 16));
  min-height: 0;
  aspect-ratio: 16 / 9 !important;
}

body[data-page-scroll="locked"][data-layout="layout-2"] .prototype-slider-wrap .slide,
body[data-page-scroll="locked"][data-layout="layout-3"] .prototype-slider-wrap .slide {
  height: 100%;
  min-height: 0 !important;
  aspect-ratio: auto;
}

/* Estrutura defensiva: nenhum tema ou proporção de arquivo pode zerar a imagem. */
.prototype-slider-wrap .slider-track {
  min-height: 100%;
  height: 100% !important;
}

.prototype-slider-wrap .slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body .prototype-slider-wrap .slide > img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-slide-touch="yes"] .prototype-slider-wrap .slider,
body[data-slide-modal="yes"] .prototype-slider-wrap .slider {
  pointer-events: auto !important;
}

body[data-slide-touch="yes"] .prototype-slider-wrap .slider { cursor: grab; touch-action: pan-y; }
body[data-slide-touch="yes"] .prototype-slider-wrap .slider.grabbing { cursor: grabbing; }
body[data-slide-touch="no"][data-slide-modal="yes"] .prototype-slider-wrap .slider { cursor: zoom-in; touch-action: auto; }
body[data-slide-touch="no"][data-slide-modal="no"] .prototype-slider-wrap .slider { cursor: default; pointer-events: none !important; touch-action: auto; }

body .lb-frame img#lbImg {
  display: block !important;
  object-fit: contain !important;
}

/* =========================================================
   Scroll da página
   ========================================================= */
.page-behavior-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-behavior-grid .settings-field { margin: 0; }

body[data-page-scroll="locked"] {
  height: 100svh;
  overflow-y: hidden !important;
}

body[data-page-scroll="released"] {
  height: auto;
  min-height: 100svh;
  overflow-y: auto !important;
  align-items: stretch;
}

body[data-page-scroll="released"] .page-shell {
  min-height: 100svh;
  overflow: visible;
}

body.settings-open,
body.nb-open,
body.coupon-open { overflow: hidden !important; }

@media (max-width: 620px) {
  .page-behavior-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Modal de desconto — usa a mesma identidade do tema ativo
   ========================================================= */
.mini-buttons-dock #promoBtn {
  position: static !important;
  inset: auto !important;
}

body .cp-overlay {
  padding: 20px;
  background: color-mix(in srgb, var(--theme-bg) 58%, rgba(0, 0, 0, .72));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body .cp-overlay.show { pointer-events: auto !important; }
body .cp-overlay.show button { pointer-events: auto !important; }

body .cp-box {
  position: relative;
  width: min(390px, 100%);
  aspect-ratio: auto;
  max-height: calc(100svh - 40px);
  min-height: 320px;
  padding: 56px 32px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  border: 2px solid var(--theme-primary);
  border-radius: 30px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 8px 8px 0 var(--theme-accent);
  transform: translateY(18px) scale(.94);
}

body .cp-overlay.show .cp-box { transform: none; }
body .cp-splash { display: none !important; }

body .cp-conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

body .cp-logo {
  width: min(180px, 62%);
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body .cp-logo[hidden] { display: none !important; }

body .cp-logo img#cpLogoImage {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body .cp-title {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 850;
  line-height: 1.12;
  color: var(--theme-text);
  letter-spacing: -.025em;
}

body .cp-cta {
  width: 100%;
  min-height: 56px;
  margin: 2px 0 0;
  padding: 12px 20px;
  gap: 11px;
  border: 2px solid var(--theme-primary);
  border-radius: 14px;
  background: var(--theme-primary);
  color: var(--theme-surface);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 850;
  box-shadow: none;
}

body .cp-cta-icon {
  width: 21px;
  height: 21px;
}

body .cp-cta.copiado {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-text);
}

body .cp-close {
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 32%, transparent) !important;
  border-radius: 50% !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

body .cp-close:hover { transform: rotate(90deg) !important; }

body[data-structure-theme="theme-1"] .cp-box {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--theme-primary) 28%, transparent);
  border-radius: 18px;
  box-shadow: none;
}

body[data-structure-theme="theme-2"] .cp-box {
  background: color-mix(in srgb, var(--theme-surface) 36%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 42%, var(--theme-primary));
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 24px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

body[data-structure-theme="theme-2"] .cp-cta {
  background: color-mix(in srgb, var(--theme-primary) 76%, transparent);
  border-color: color-mix(in srgb, #ffffff 38%, var(--theme-primary));
  backdrop-filter: blur(12px);
}

body[data-structure-theme="theme-3"] .cp-box {
  border: 2px solid var(--theme-primary);
  border-radius: 22px;
  box-shadow: 7px 8px 0 var(--theme-accent);
}

body[data-structure-theme="theme-4"] .cp-box {
  border: 0;
  border-radius: 0;
  background: var(--theme-primary);
  color: var(--theme-surface);
  box-shadow: none;
}

body[data-structure-theme="theme-4"] .cp-title { color: var(--theme-surface); }
body[data-structure-theme="theme-4"] .cp-cta { background: var(--theme-surface); color: var(--theme-primary); border: 0; border-radius: 0; }
body[data-structure-theme="theme-4"] .cp-close { background: var(--theme-surface) !important; color: var(--theme-primary) !important; border: 0 !important; }

body[data-structure-theme="theme-5"] .cp-box {
  border: 0;
  border-radius: 38% 24% 34% 28% / 28% 38% 26% 36%;
  background: var(--theme-surface) !important;
  box-shadow: 9px 11px 0 color-mix(in srgb, var(--theme-primary) 60%, transparent);
}

body[data-structure-theme="theme-5"] .cp-cta {
  border: 0;
  border-radius: 999px 38% 999px 45%;
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--theme-primary) 52%, transparent);
}

@media (max-width: 480px) {
  body .cp-box { min-height: 300px; padding: 54px 24px 28px; }
  body .cp-logo { width: min(150px, 58%); height: 78px; }
}

/* =========================================================
   Altura e cor exclusivas do header
   ========================================================= */
body[data-header-height="low"] {
  --page-header-height: 64px;
  --header-logo-width: clamp(96px, 24vw, 128px);
  --header-control-size: 40px;
  --header-side-slot: 46px;
}

body[data-header-height="medium"] {
  --page-header-height: 84px;
  --header-logo-width: clamp(118px, 30vw, 174px);
  --header-control-size: 48px;
  --header-side-slot: 56px;
}

body[data-header-height="high"] {
  --page-header-height: 116px;
  --header-logo-width: clamp(152px, 38vw, 226px);
  --header-control-size: 58px;
  --header-side-slot: 66px;
}

body[data-header-height] .page-header {
  height: var(--page-header-height) !important;
  grid-template-columns: var(--header-side-slot) minmax(0, 1fr) auto;
  background: var(--header-color, #ffffff) !important;
}

body[data-header-height] .page-header #nbHamburger {
  width: var(--header-control-size) !important;
  height: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
}

body[data-header-height] .page-header .layout-logo {
  height: calc(var(--page-header-height) - 16px) !important;
  max-width: var(--header-logo-width) !important;
}

body[data-header-height="low"] .page-header #nbHamburger span { width: 20px; }
body[data-header-height="medium"] .page-header #nbHamburger span { width: 23px; }
body[data-header-height="high"] .page-header #nbHamburger span { width: 28px; height: 3px; }

.header-color-control {
  min-height: 46px;
  padding: 6px 10px 6px 7px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  background: #ffffff;
}

.header-color-control input[type="color"] {
  width: 42px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

.header-color-control output {
  color: #222222;
  font: 800 12px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

@media (max-width: 620px) {
  .slide-settings-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   BACKGROUNDS ABSTRATOS
   ========================================================= */
.background-design-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.background-design-option {
  position: relative;
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 2px solid #b8b8b8;
  border-radius: 15px;
  background: #ffffff !important;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.background-design-option:hover { transform: translateY(-2px); }
.background-design-option:has(input:checked) {
  border-color: #111111;
  box-shadow: 4px 4px 0 #111111;
}

.background-design-option input {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 17px;
  height: 17px;
  accent-color: #111111;
}

.background-design-option > strong { margin-top: 4px; font-size: 13px; line-height: 1.25; }
.background-design-option > small { color: #666666; font-size: 10px; line-height: 1.35; }

.background-design-visual {
  position: relative;
  height: 118px;
  display: block;
  border: 1px solid #111111;
  border-radius: 11px;
  overflow: hidden;
  isolation: isolate;
}

.background-design-visual::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 18px rgba(255,255,255,.46);
}

.background-card-1 .background-design-visual {
  background:
    radial-gradient(circle at 18% 24%, #ff7ad9 0 15%, transparent 39%),
    radial-gradient(circle at 82% 74%, #6ee7ff 0 16%, transparent 43%),
    linear-gradient(145deg, #24113f, #6955ff 48%, #102c4f) !important;
}
.background-card-1 .background-design-visual i {
  position: absolute; width: 74px; height: 74px; left: 36%; top: 20%; border-radius: 50%;
  background: rgba(255,255,255,.16); filter: blur(8px); transform: rotate(-20deg);
}

.background-card-2 .background-design-visual {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255,255,255,.65) 21% 23%, transparent 24% 36%, rgba(255,255,255,.26) 37% 40%, transparent 41%),
    radial-gradient(circle at 22% 18%, #ffd86f, transparent 35%),
    linear-gradient(135deg, #f35473, #6b4dff 68%, #171742) !important;
}
.background-card-2 .background-design-visual i {
  position: absolute; width: 22px; height: 22px; right: 19%; top: 20%; border-radius: 50%;
  background: #fff7cf; box-shadow: 0 0 22px #fff7cf;
}

.background-card-3 .background-design-visual {
  background:
    linear-gradient(128deg, transparent 0 37%, rgba(255,255,255,.64) 38% 40%, transparent 41%),
    conic-gradient(from 210deg at 28% 70%, #ff725e, #ffd166 22%, #2ec4b6 42%, #3767ff 68%, #7b2cff 82%, #ff725e) !important;
}
.background-card-3 .background-design-visual i,
.background-card-3 .background-design-visual b {
  position: absolute; display: block; width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.72);
  transform: rotate(32deg); background: rgba(255,255,255,.08);
}
.background-card-3 .background-design-visual i { left: -24px; top: -30px; }
.background-card-3 .background-design-visual b { right: -18px; bottom: -38px; }

.background-card-4 .background-design-visual {
  background:
    repeating-linear-gradient(145deg, transparent 0 18px, rgba(255,255,255,.2) 19px 24px, transparent 25px 42px),
    radial-gradient(ellipse at 12% 92%, #87ffb7 0 16%, transparent 46%),
    radial-gradient(ellipse at 90% 8%, #7ce8ff 0 12%, transparent 45%),
    linear-gradient(145deg, #063a55, #007a78 52%, #0d315a) !important;
}
.background-card-4 .background-design-visual i {
  position: absolute; width: 150%; height: 54px; left: -24%; top: 28%; border-radius: 50%;
  border: 10px solid rgba(255,255,255,.2); transform: rotate(-12deg);
}

/* O fundo selecionado usa a paleta RGB ativa e continua independente do tema estrutural. */
body[data-background-design="abstract-1"] {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-primary) 62%, transparent) 0 8%, transparent 32%),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--theme-accent) 68%, transparent) 0 10%, transparent 36%),
    radial-gradient(circle at 52% 44%, color-mix(in srgb, var(--theme-surface) 52%, transparent) 0 7%, transparent 30%),
    linear-gradient(145deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 70%, var(--theme-primary))) !important;
  background-attachment: fixed !important;
}

body[data-background-design="abstract-2"] {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 17%, color-mix(in srgb, var(--theme-accent) 52%, transparent) 17.5% 18.5%, transparent 19% 30%, color-mix(in srgb, var(--theme-primary) 28%, transparent) 30.5% 32%, transparent 32.5%),
    radial-gradient(circle at 15% 14%, color-mix(in srgb, var(--theme-accent) 58%, transparent), transparent 31%),
    radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--theme-primary) 52%, transparent), transparent 34%),
    var(--theme-bg) !important;
  background-attachment: fixed !important;
}

body[data-background-design="abstract-3"] {
  background:
    linear-gradient(128deg, transparent 0 35%, color-mix(in srgb, var(--theme-surface) 46%, transparent) 35.5% 37%, transparent 37.5%),
    linear-gradient(28deg, transparent 0 63%, color-mix(in srgb, var(--theme-accent) 36%, transparent) 63.5% 65%, transparent 65.5%),
    conic-gradient(from 215deg at 27% 72%, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 62%, var(--theme-accent)) 24%, color-mix(in srgb, var(--theme-bg) 56%, var(--theme-primary)) 48%, var(--theme-bg) 76%) !important;
  background-attachment: fixed !important;
}

body[data-background-design="abstract-4"] {
  background:
    repeating-linear-gradient(145deg, transparent 0 42px, color-mix(in srgb, var(--theme-surface) 18%, transparent) 44px 49px, transparent 51px 88px),
    radial-gradient(ellipse at 8% 92%, color-mix(in srgb, var(--theme-accent) 62%, transparent), transparent 42%),
    radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--theme-primary) 52%, transparent), transparent 43%),
    linear-gradient(145deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 74%, var(--theme-primary))) !important;
  background-attachment: fixed !important;
}

.theme-preview[data-background-design="abstract-1"] {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--preview-primary) 62%, transparent), transparent 34%),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--preview-accent) 68%, transparent), transparent 38%),
    var(--preview-bg) !important;
}
.theme-preview[data-background-design="abstract-2"] {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 20%, color-mix(in srgb, var(--preview-accent) 54%, transparent) 21% 23%, transparent 24% 39%, color-mix(in srgb, var(--preview-primary) 30%, transparent) 40% 42%, transparent 43%),
    var(--preview-bg) !important;
}
.theme-preview[data-background-design="abstract-3"] {
  background:
    linear-gradient(128deg, transparent 0 38%, color-mix(in srgb, var(--preview-surface) 48%, transparent) 39% 42%, transparent 43%),
    conic-gradient(from 215deg at 27% 72%, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 62%, var(--preview-accent)) 28%, color-mix(in srgb, var(--preview-bg) 58%, var(--preview-primary)) 55%, var(--preview-bg) 78%) !important;
}
.theme-preview[data-background-design="abstract-4"] {
  background:
    repeating-linear-gradient(145deg, transparent 0 24px, color-mix(in srgb, var(--preview-surface) 24%, transparent) 25px 29px, transparent 30px 52px),
    radial-gradient(ellipse at 8% 92%, color-mix(in srgb, var(--preview-accent) 62%, transparent), transparent 44%),
    linear-gradient(145deg, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 72%, var(--preview-primary))) !important;
}

@media (max-width: 880px) {
  .background-design-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .background-design-options { grid-template-columns: 1fr; }
  .background-design-option { display: grid; grid-template-columns: 118px 1fr; align-items: center; }
  .background-design-option .background-design-visual { grid-row: 1 / 3; height: 88px; }
}

/* =========================================================
   TEXTOS LIVRES E POSICIONAMENTO NO LAYOUT
   ========================================================= */
.prototype-text-zone {
  width: 100%;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.prototype-text-zone[hidden] { display: none !important; }

.prototype-free-text {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-surface) 82%, transparent) !important;
  color: var(--theme-text) !important;
  font: 600 clamp(13px, 2vw, 16px)/1.55 Arial, Helvetica, sans-serif !important;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body[data-layout="layout-1"] .prototype-text-above-buttons { order: 1; }
body[data-layout="layout-1"] .container-btns { order: 2; }
body[data-layout="layout-1"] .prototype-text-below-buttons { order: 3; }
body[data-layout="layout-1"] .prototype-text-above-slide,
body[data-layout="layout-1"] .prototype-text-below-slide { display: none !important; }

body[data-layout="layout-2"] .prototype-text-above-buttons { order: 1; }
body[data-layout="layout-2"] .container-btns { order: 2; }
body[data-layout="layout-2"] .prototype-text-below-buttons { order: 3; }
body[data-layout="layout-2"] .prototype-text-above-slide { order: 4; }
body[data-layout="layout-2"] .prototype-slider-wrap { order: 5; }
body[data-layout="layout-2"] .prototype-text-below-slide { order: 6; }

body[data-layout="layout-3"] .prototype-text-above-slide { order: 1; }
body[data-layout="layout-3"] .prototype-slider-wrap { order: 2; }
body[data-layout="layout-3"] .prototype-text-below-slide { order: 3; }
body[data-layout="layout-3"] .prototype-text-above-buttons { order: 4; }
body[data-layout="layout-3"] .container-btns { order: 5; }
body[data-layout="layout-3"] .prototype-text-below-buttons { order: 6; }

.text-config-list {
  display: grid;
  gap: 14px;
}

.text-config-row {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr);
  gap: 14px;
  align-items: end;
  border: 2px solid #111111;
  border-radius: 16px;
  background: #f7f7f7 !important;
}

.text-config-row .settings-field { margin: 0; }
.text-config-row .settings-field > span {
  display: block;
  margin-bottom: 7px;
  color: #333333;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.text-config-row textarea {
  width: 100%;
  min-height: 86px;
  padding: 12px 14px;
  resize: vertical;
  border: 2px solid #111111;
  border-radius: 11px;
  background: #ffffff !important;
  color: #111111 !important;
  font: 600 14px/1.45 Arial, Helvetica, sans-serif;
}

.text-config-row textarea::placeholder { color: #8a8a8a; }

/* =========================================================
   HEADER TRANSPARENTE
   ========================================================= */
.header-color-control { flex-wrap: wrap; }
.header-color-control input[type="color"]:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.header-transparent-option {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #222222;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.header-transparent-option input {
  width: 17px;
  height: 17px;
  accent-color: #111111;
}

body[data-header-transparent="yes"] .page-header {
  background: transparent !important;
}

/* Layout 3: o slide começa exatamente onde o header termina. */
body[data-layout="layout-3"][data-header-height][data-logo-position] .page-shell .layout-stage,
body[data-layout="layout-3"][data-header-height][data-logo-position].has-layout-logo .page-shell .layout-stage {
  padding-top: var(--page-header-height) !important;
}

body[data-layout="layout-3"][data-page-scroll="locked"] .prototype-slider-wrap {
  min-height: 0;
  flex: 0 0 auto;
}

body[data-layout="layout-3"][data-page-scroll="locked"] .prototype-slider-wrap .slider {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

/* O rodapé não possui conteúdo visível e não pode cobrir os botões no mobile. */
body > footer.footer {
  display: none !important;
}

@media (max-width: 680px) {
  .text-config-row { grid-template-columns: 1fr; align-items: stretch; }
}

/* =========================================================
   MAPA DE POSIÇÕES DOS MINI-BUTTONS
   Slots de conteúdo recebem até 4 atalhos; o header recebe até 2.
   ========================================================= */
.mini-button-slot[hidden],
.mini-below-header-row[hidden] { display: none !important; }

.mini-below-header-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  order: 0;
}

.mini-button-slot.mini-slot-bottom-right,
.mini-button-slot.mini-slot-bottom-left {
  position: fixed !important;
  top: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

.mini-button-slot.mini-slot-bottom-right {
  right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important;
}

.mini-button-slot.mini-slot-bottom-left {
  right: auto !important;
  left: max(16px, env(safe-area-inset-left)) !important;
}

/* Supera o antigo alinhamento global, que não pode reposicionar slots fixos. */
body[data-mini-button-align] .mini-button-slot.mini-slot-bottom-right {
  right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important;
}

body[data-mini-button-align] .mini-button-slot.mini-slot-bottom-left {
  right: auto !important;
  left: max(16px, env(safe-area-inset-left)) !important;
}

.mini-button-slot.mini-slot-header {
  position: static !important;
  inset: auto !important;
  grid-column: 3;
  grid-row: 1;
  width: auto !important;
  height: var(--header-control-size) !important;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transform: none !important;
}

body[data-mini-button-align] .mini-button-slot.mini-slot-header {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.mini-button-slot.mini-slot-header .share-btn {
  width: var(--header-control-size) !important;
  height: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  padding: clamp(8px, 1.4vw, 12px) !important;
}

.mini-button-slot.mini-slot-above-buttons,
.mini-button-slot.mini-slot-below-buttons,
.mini-button-slot.mini-slot-above-slide,
.mini-button-slot.mini-slot-below-slide,
.mini-button-slot.mini-slot-below-header {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  display: flex;
  flex-direction: row;
  transform: none !important;
}

body[data-mini-button-align="left"] .mini-button-slot.mini-slot-below-buttons,
body[data-mini-button-align="left"] .mini-button-slot.mini-slot-below-slide,
body[data-mini-button-align="left"] .mini-button-slot.mini-slot-above-buttons,
body[data-mini-button-align="left"] .mini-button-slot.mini-slot-above-slide {
  right: auto !important;
  left: auto !important;
  justify-content: flex-start;
}

body[data-mini-button-align="center"] .mini-button-slot.mini-slot-below-buttons,
body[data-mini-button-align="center"] .mini-button-slot.mini-slot-below-slide,
body[data-mini-button-align="center"] .mini-button-slot.mini-slot-above-buttons,
body[data-mini-button-align="center"] .mini-button-slot.mini-slot-above-slide {
  right: auto !important;
  left: auto !important;
  justify-content: center;
}

body[data-mini-button-align="right"] .mini-button-slot.mini-slot-below-buttons,
body[data-mini-button-align="right"] .mini-button-slot.mini-slot-below-slide,
body[data-mini-button-align="right"] .mini-button-slot.mini-slot-above-buttons,
body[data-mini-button-align="right"] .mini-button-slot.mini-slot-above-slide {
  right: auto !important;
  left: auto !important;
  justify-content: flex-end;
}

/* As faixas de conteúdo agrupam até quatro atalhos sempre no centro. */
body[data-mini-button-align] .mini-button-slot.mini-slot-above-buttons,
body[data-mini-button-align] .mini-button-slot.mini-slot-below-buttons,
body[data-mini-button-align] .mini-button-slot.mini-slot-above-slide,
body[data-mini-button-align] .mini-button-slot.mini-slot-below-slide {
  right: auto !important;
  left: auto !important;
  margin-inline: auto !important;
  justify-content: center !important;
  transform: none !important;
}

body[data-mini-button-align] .mini-button-slot.mini-slot-below-header-left {
  right: auto !important;
  left: auto !important;
  justify-content: flex-start;
  transform: none !important;
}

body[data-mini-button-align] .mini-button-slot.mini-slot-below-header-right {
  right: auto !important;
  left: auto !important;
  justify-content: flex-end;
  transform: none !important;
}

body:not([data-layout="layout-2"]) .mini-slot-below-header { display: none !important; }
body[data-layout="layout-1"] .mini-slot-above-buttons { order: .5; }
body[data-layout="layout-1"] .mini-slot-below-buttons { order: 3; }
body[data-layout="layout-1"] .mini-slot-above-slide,
body[data-layout="layout-1"] .mini-slot-below-slide { display: none !important; }
body[data-layout="layout-2"] .mini-slot-above-buttons { order: .5; }
body[data-layout="layout-2"] .mini-slot-below-buttons { order: 3; }
body[data-layout="layout-2"] .mini-slot-above-slide { order: 3.5; }
body[data-layout="layout-2"] .mini-slot-below-slide { order: 6; }
body[data-layout="layout-3"] .mini-slot-above-slide { order: .5; }
body[data-layout="layout-3"] .mini-slot-below-slide { order: 3; }
body[data-layout="layout-3"] .mini-slot-above-buttons { order: 3.5; }
body[data-layout="layout-3"] .mini-slot-below-buttons { order: 6; }

.mini-button-option {
  flex-wrap: wrap;
}

.mini-button-option > span:not(.mini-button-option-icon) {
  min-width: 0;
  flex: 1 1 calc(100% - 56px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-button-position {
  width: 100%;
  min-height: 42px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 2px solid #111111;
  border-radius: 10px;
  background: #ffffff !important;
  color: #111111 !important;
  font: 700 12px/1.2 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.mini-button-position option:disabled { color: #888888; }
.mini-button-option.mini-position-unavailable { opacity: .52; }

.mini-position-map-status {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px dashed #888888;
  border-radius: 10px;
  background: #f7f7f7 !important;
  color: #444444;
  font: 700 12px/1.45 Arial, Helvetica, sans-serif;
}

/* =========================================================
   REMODELAÇÃO DOS BACKGROUNDS — mais volume e personalidade
   ========================================================= */
.background-design-visual::after {
  inset: auto !important;
  height: auto;
  border-radius: 50%;
  box-shadow: none;
}

.background-card-1 .background-design-visual {
  background:
    radial-gradient(circle at 12% 16%, #ff4fd8 0 8%, transparent 34%),
    radial-gradient(circle at 86% 24%, #4df4ff 0 7%, transparent 33%),
    radial-gradient(circle at 64% 88%, #8f5bff 0 14%, transparent 46%),
    conic-gradient(from 205deg at 44% 52%, #100525, #5a1ca8, #0b70a0, #150532, #ff329a, #100525) !important;
}
.background-card-1 .background-design-visual::before {
  content: "";
  position: absolute;
  width: 74%;
  height: 88%;
  left: 12%;
  top: 2%;
  border-radius: 62% 38% 54% 46% / 44% 62% 38% 56%;
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.02) 62%) !important;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 26px rgba(255,255,255,.14), 0 18px 34px rgba(18,0,55,.42);
  transform: rotate(18deg);
}
.background-card-1 .background-design-visual::after {
  content: "";
  width: 54px;
  height: 54px;
  right: 9%;
  bottom: 8%;
  border: 10px solid rgba(255,255,255,.16);
  box-shadow: 0 0 26px rgba(89,236,255,.72);
}
.background-card-1 .background-design-visual i {
  width: 18px; height: 18px; left: 14%; top: 17%; border-radius: 50%;
  background: #ffffff !important; box-shadow: 0 0 18px #ff8ce7, 58px 34px 0 -6px rgba(255,255,255,.9), 116px 8px 0 -7px rgba(255,255,255,.75); filter: none;
}
.background-card-1 .background-design-visual b {
  position: absolute; width: 86px; height: 24px; left: 28%; bottom: 14%; display: block;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: rotate(-14deg);
}

.background-card-2 .background-design-visual {
  background:
    radial-gradient(circle at 50% 50%, #ffdc79 0 4%, transparent 5%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(255,255,255,.20) 14px 15px, transparent 16px 27px),
    conic-gradient(from 30deg at 50% 50%, #ff447e, #7c3cff, #23206b, #2dd4bf, #ffd166, #ff447e) !important;
}
.background-card-2 .background-design-visual::before {
  content: "";
  position: absolute;
  width: 128%;
  height: 38%;
  left: -14%;
  top: 31%;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 50%;
  transform: rotate(-14deg);
  box-shadow: 0 0 24px rgba(255,255,255,.24), inset 0 0 18px rgba(255,255,255,.18);
}
.background-card-2 .background-design-visual::after {
  content: "";
  width: 24px;
  height: 24px;
  right: 13%;
  top: 14%;
  background: #f8f1ff !important;
  box-shadow: 0 0 22px #fff, -112px 64px 0 -6px #ffcf69;
}
.background-card-2 .background-design-visual i {
  width: 58px; height: 58px; left: calc(50% - 29px); top: calc(50% - 29px); border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff8cd, #ff916a 32%, #7929a6 78%) !important;
  box-shadow: inset -10px -12px 18px rgba(25,3,61,.38), 0 0 28px rgba(255,198,101,.55);
}
.background-card-2 .background-design-visual b {
  position: absolute; width: 7px; height: 7px; left: 12%; top: 15%; display: block; border-radius: 50%;
  background: #fff !important; box-shadow: 30px 72px 0 #fff, 88px -2px 0 rgba(255,255,255,.8), 142px 62px 0 rgba(255,255,255,.75);
}

.background-card-3 .background-design-visual {
  background:
    linear-gradient(128deg, transparent 0 34%, rgba(255,255,255,.78) 34.5% 36%, transparent 36.5%),
    linear-gradient(34deg, transparent 0 62%, rgba(255,255,255,.36) 62.5% 64%, transparent 64.5%),
    conic-gradient(from 222deg at 28% 72%, #ff4d6d, #ffcf4a 20%, #24d6bd 39%, #2e68ff 61%, #8734d8 81%, #ff4d6d) !important;
}
.background-card-3 .background-design-visual::before,
.background-card-3 .background-design-visual::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 100%, 0 78%);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.55);
  filter: drop-shadow(0 12px 12px rgba(17,11,69,.34));
}
.background-card-3 .background-design-visual::before { width: 92px; height: 92px; left: 9%; top: 6%; transform: rotate(-18deg); }
.background-card-3 .background-design-visual::after { width: 72px; height: 72px; right: 8%; bottom: 2%; transform: rotate(22deg); }
.background-card-3 .background-design-visual i,
.background-card-3 .background-design-visual b {
  width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.08) !important; backdrop-filter: blur(4px);
}

.background-card-4 .background-design-visual {
  background:
    radial-gradient(ellipse at 10% 96%, #6affb5 0 8%, transparent 40%),
    radial-gradient(ellipse at 96% 6%, #60e7ff 0 8%, transparent 38%),
    repeating-radial-gradient(ellipse at -10% 130%, transparent 0 18px, rgba(255,255,255,.22) 20px 25px, transparent 27px 46px),
    linear-gradient(135deg, #031f48, #006b78 48%, #24237a) !important;
}
.background-card-4 .background-design-visual::before,
.background-card-4 .background-design-visual::after {
  content: "";
  position: absolute;
  width: 145%;
  left: -22%;
  border-radius: 50%;
  border: solid rgba(255,255,255,.30);
  background: transparent !important;
  transform: rotate(-9deg);
}
.background-card-4 .background-design-visual::before { height: 76px; top: 8%; border-width: 12px 0 0; }
.background-card-4 .background-design-visual::after { height: 92px; top: 28%; border-width: 8px 0 0; opacity: .62; }
.background-card-4 .background-design-visual i {
  width: 42px; height: 42px; left: 14%; top: 20%; border-radius: 48% 52% 62% 38%;
  background: linear-gradient(135deg, #a4ffd2, #52cbff) !important; filter: blur(1px);
  box-shadow: 0 0 26px rgba(89,255,209,.64);
}
.background-card-4 .background-design-visual b {
  position: absolute; width: 82px; height: 82px; right: -18px; bottom: -30px; display: block; border-radius: 50%;
  border: 14px solid rgba(255,255,255,.14); background: transparent !important;
}

body[data-background-design] .page-shell {
  isolation: isolate;
  z-index: 0;
}

body[data-background-design] .page-shell::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  opacity: .68;
  transform-origin: center;
}

body[data-background-design="abstract-1"] {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--theme-accent) 78%, transparent) 0 5%, transparent 27%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--theme-primary) 64%, transparent) 0 7%, transparent 31%),
    radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--theme-accent) 48%, transparent) 0 12%, transparent 39%),
    conic-gradient(from 218deg at 46% 52%, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 62%, var(--theme-primary)), color-mix(in srgb, var(--theme-bg) 58%, var(--theme-accent)), var(--theme-bg)) !important;
  background-size: 130% 130%, 145% 145%, 125% 125%, 100% 100% !important;
  animation: abstractAurora 18s ease-in-out infinite alternate;
}
body[data-background-design="abstract-1"] .page-shell::before {
  background:
    radial-gradient(ellipse at 28% 42%, color-mix(in srgb, var(--theme-surface) 30%, transparent), transparent 28%),
    radial-gradient(ellipse at 68% 58%, color-mix(in srgb, var(--theme-accent) 26%, transparent), transparent 24%) !important;
  filter: blur(34px) saturate(145%);
  animation: abstractBlob 14s ease-in-out infinite alternate;
}

body[data-background-design="abstract-2"] {
  background:
    repeating-radial-gradient(circle at 52% 48%, transparent 0 8vmin, color-mix(in srgb, var(--theme-accent) 25%, transparent) 8.2vmin 8.5vmin, transparent 8.8vmin 15vmin),
    conic-gradient(from 0deg at 52% 48%, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 58%, var(--theme-primary)), color-mix(in srgb, var(--theme-bg) 60%, var(--theme-accent)), var(--theme-bg)) !important;
  background-attachment: fixed !important;
  animation: abstractOrbit 26s linear infinite;
}
body[data-background-design="abstract-2"] .page-shell::before {
  background:
    radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--theme-surface) 74%, transparent) 0 1.2vmin, transparent 1.4vmin),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--theme-accent) 72%, transparent), transparent 17%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--theme-primary) 54%, transparent), transparent 20%) !important;
  animation: abstractFloat 12s ease-in-out infinite alternate;
}

body[data-background-design="abstract-3"] {
  background:
    linear-gradient(124deg, transparent 0 31%, color-mix(in srgb, var(--theme-surface) 50%, transparent) 31.3% 32.4%, transparent 32.7%),
    linear-gradient(32deg, transparent 0 66%, color-mix(in srgb, var(--theme-accent) 38%, transparent) 66.3% 68%, transparent 68.3%),
    conic-gradient(from 220deg at 24% 76%, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 48%, var(--theme-accent)) 24%, color-mix(in srgb, var(--theme-bg) 42%, var(--theme-primary)) 49%, var(--theme-bg) 76%) !important;
  background-size: 150% 150%, 135% 135%, 100% 100% !important;
  animation: abstractPrism 20s ease-in-out infinite alternate;
}
body[data-background-design="abstract-3"] .page-shell::before {
  background:
    linear-gradient(136deg, transparent 0 41%, color-mix(in srgb, var(--theme-surface) 19%, transparent) 41% 49%, transparent 49%),
    linear-gradient(42deg, transparent 0 54%, color-mix(in srgb, var(--theme-primary) 16%, transparent) 54% 61%, transparent 61%) !important;
  clip-path: polygon(4% 10%, 94% 0, 82% 100%, 18% 90%);
  animation: abstractShard 16s ease-in-out infinite alternate;
}

body[data-background-design="abstract-4"] {
  background:
    repeating-radial-gradient(ellipse at -8% 120%, transparent 0 7vmin, color-mix(in srgb, var(--theme-surface) 22%, transparent) 7.3vmin 8.2vmin, transparent 8.5vmin 15vmin),
    radial-gradient(ellipse at 4% 94%, color-mix(in srgb, var(--theme-accent) 70%, transparent), transparent 38%),
    radial-gradient(ellipse at 96% 4%, color-mix(in srgb, var(--theme-primary) 60%, transparent), transparent 39%),
    linear-gradient(142deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 54%, var(--theme-primary)), var(--theme-bg)) !important;
  background-size: 118% 118%, 132% 132%, 128% 128%, 100% 100% !important;
  animation: abstractFlow 17s ease-in-out infinite alternate;
}
body[data-background-design="abstract-4"] .page-shell::before {
  background: repeating-linear-gradient(148deg, transparent 0 5vmin, color-mix(in srgb, var(--theme-surface) 14%, transparent) 5.2vmin 6vmin, transparent 6.2vmin 12vmin) !important;
  transform: rotate(-4deg) scale(1.08);
  animation: abstractWave 14s ease-in-out infinite alternate;
}

.theme-preview[data-background-design="abstract-1"] {
  background:
    radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--preview-accent) 82%, transparent), transparent 34%),
    radial-gradient(circle at 90% 72%, color-mix(in srgb, var(--preview-primary) 62%, transparent), transparent 38%),
    conic-gradient(from 215deg at 45% 52%, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 52%, var(--preview-primary)), color-mix(in srgb, var(--preview-bg) 54%, var(--preview-accent)), var(--preview-bg)) !important;
}
.theme-preview[data-background-design="abstract-2"] {
  background:
    repeating-radial-gradient(circle at 50% 48%, transparent 0 24px, color-mix(in srgb, var(--preview-accent) 34%, transparent) 25px 27px, transparent 28px 48px),
    conic-gradient(from 15deg, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 50%, var(--preview-primary)), color-mix(in srgb, var(--preview-bg) 55%, var(--preview-accent)), var(--preview-bg)) !important;
}
.theme-preview[data-background-design="abstract-3"] {
  background:
    linear-gradient(128deg, transparent 0 34%, color-mix(in srgb, var(--preview-surface) 58%, transparent) 35% 38%, transparent 39%),
    linear-gradient(34deg, transparent 0 62%, color-mix(in srgb, var(--preview-accent) 45%, transparent) 63% 66%, transparent 67%),
    conic-gradient(from 215deg at 27% 72%, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 48%, var(--preview-accent)) 28%, color-mix(in srgb, var(--preview-bg) 46%, var(--preview-primary)) 55%, var(--preview-bg) 78%) !important;
}
.theme-preview[data-background-design="abstract-4"] {
  background:
    repeating-radial-gradient(ellipse at -8% 120%, transparent 0 26px, color-mix(in srgb, var(--preview-surface) 27%, transparent) 28px 34px, transparent 36px 58px),
    radial-gradient(ellipse at 8% 92%, color-mix(in srgb, var(--preview-accent) 72%, transparent), transparent 44%),
    linear-gradient(145deg, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 52%, var(--preview-primary)), var(--preview-bg)) !important;
}

@keyframes abstractAurora {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, center; }
  100% { background-position: 12% 10%, 88% 18%, 62% 82%, center; }
}
@keyframes abstractBlob { to { transform: translate3d(5vmax, -3vmax, 0) rotate(7deg) scale(1.08); } }
@keyframes abstractOrbit {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.035) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes abstractFloat { to { transform: translate3d(-3vmax, 4vmax, 0) rotate(8deg); } }
@keyframes abstractPrism { to { background-position: 12% 8%, -8% 10%, center; } }
@keyframes abstractShard { to { transform: translate3d(3vmax, -2vmax, 0) rotate(4deg) scale(1.04); } }
@keyframes abstractFlow { to { background-position: 8% -5%, 12% 88%, 86% 10%, center; } }
@keyframes abstractWave { to { transform: translate3d(-4vmax, 3vmax, 0) rotate(1deg) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  body[data-background-design],
  body[data-background-design] .page-shell::before {
    animation: none !important;
  }
}

/* =========================================================
   BIBLIOTECA DE ÍCONES DOS MINI-BUTTONS
   ========================================================= */
.mini-buttons-dock .share-btn {
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.mini-button-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  line-height: 0;
  flex: 0 0 24px;
  transform: none !important;
  transform-origin: center;
  overflow: visible;
}

.mini-button-icon > svg,
.mini-button-icon > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transform: none !important;
  transform-origin: center;
}

.mini-button-icon > svg {
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.mini-button-icon > img {
  object-fit: contain;
  object-position: 50% 50%;
}

.mini-buttons-dock .google-btn > .mini-button-icon,
.mini-buttons-dock .google-btn > .mini-button-icon > svg {
  margin: 0 !important;
}

.mini-button-option-icon .mini-button-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-basis: 22px;
}

.mini-icon-library-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mini-icon-library-open > svg {
  width: 18px;
  height: 18px;
}

.mini-icon-modal[hidden] { display: none !important; }

.mini-icon-modal {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 30px);
}

.mini-icon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mini-icon-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(820px, calc(100svh - 24px));
  padding: clamp(18px, 3vw, 30px);
  overflow-y: auto;
  border: 2px solid #111111;
  border-radius: 24px;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .32);
}

.mini-icon-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.mini-icon-dialog-head h2 {
  margin: 4px 0 6px;
  font: 900 clamp(22px, 4vw, 34px)/1 Arial, Helvetica, sans-serif;
}

.mini-icon-dialog-head p {
  margin: 0;
  color: #666666;
  font: 600 13px/1.45 Arial, Helvetica, sans-serif;
}

.mini-icon-targets {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mini-icon-target,
.mini-icon-choice {
  appearance: none;
  border: 2px solid #b8b8b8;
  background: #ffffff !important;
  color: #111111 !important;
  cursor: pointer;
}

.mini-icon-target {
  min-width: 0;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  font: 800 12px/1.2 Arial, Helvetica, sans-serif;
}

.mini-icon-target[aria-selected="true"] {
  border-color: #111111;
  box-shadow: 3px 3px 0 #111111;
}

.mini-icon-target .mini-button-icon {
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  flex-basis: 21px;
}

.mini-icon-choices {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mini-icon-choice {
  min-height: 132px;
  padding: 18px 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 16px;
}

.mini-icon-choice:hover,
.mini-icon-target:hover { border-color: #555555; }

.mini-icon-choice[aria-checked="true"] {
  border-color: #111111;
  box-shadow: 4px 4px 0 #111111;
}

.mini-icon-choice .mini-button-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-basis: 48px;
  padding: 10px !important;
  border-radius: 14px;
  background: #f2f2f2;
}

.mini-icon-choice strong {
  font: 800 13px/1.2 Arial, Helvetica, sans-serif;
}

.mini-icon-upload {
  margin-top: 22px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px dashed #777777;
  border-radius: 16px;
  background: #f7f7f7 !important;
}

.mini-icon-upload strong,
.mini-icon-upload small { display: block; }
.mini-icon-upload strong { font: 900 14px/1.2 Arial, Helvetica, sans-serif; }
.mini-icon-upload small { margin-top: 5px; color: #666666; font: 600 11px/1.45 Arial, Helvetica, sans-serif; }

#miniIconFile { display: none !important; }
.mini-icon-upload > div:first-child { min-width: 0; }

.mini-icon-upload-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-icon-modal-status {
  min-height: 18px;
  margin: 12px 2px 0;
  color: #333333;
  font: 700 12px/1.4 Arial, Helvetica, sans-serif;
}

body.mini-icon-modal-open { overflow: hidden !important; }

@media (max-width: 680px) {
  .mini-button-editor-head { align-items: stretch; }
  .mini-icon-library-open { width: 100%; }
  .mini-icon-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-icon-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-icon-upload { grid-template-columns: 1fr; }
  #miniIconFile { display: none !important; }
.mini-icon-upload > div:first-child { min-width: 0; }

.mini-icon-upload-actions { justify-content: flex-start; }
}

@media (max-width: 390px) {
  .mini-icon-dialog { padding: 16px; border-radius: 18px; }
  .mini-icon-choice { min-height: 116px; }
}
/* =========================================================
   OPÇÕES DE FONTE E BACKGROUND DOS TEXTOS
   ========================================================= */
@font-face {
  font-family: 'Monday Local';
  src: url('../fonts/MONDAY.woff2') format('woff2'), url('../fonts/MONDAY.TTF') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Azureon Local';
  src: url('../fonts/AZUREON.woff2') format('woff2'), url('../fonts/AZUREON.TTF') format('truetype');
  font-display: swap;
}

.prototype-free-text[data-text-font="arial"] {
  font-family: Arial, Helvetica, sans-serif !important;
}

.prototype-free-text[data-text-font="georgia"] {
  font-family: Georgia, 'Times New Roman', serif !important;
}

.prototype-free-text[data-text-font="trebuchet"] {
  font-family: 'Trebuchet MS', Arial, sans-serif !important;
}

.prototype-free-text[data-text-font="monday"] {
  font-family: 'Monday Local', Arial, sans-serif !important;
  font-weight: 400 !important;
}

.prototype-free-text[data-text-font="azureon"] {
  font-family: 'Azureon Local', Arial, sans-serif !important;
  font-weight: 400 !important;
}

.prototype-free-text[data-text-background="none"] {
  padding: 4px 0;
  border-color: transparent !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.text-config-row {
  align-items: start;
}

.text-config-row .text-content-field {
  grid-row: span 3;
  align-self: stretch;
}

.text-config-row .text-content-field textarea {
  height: calc(100% - 18px);
  min-height: 180px;
}

@media (max-width: 680px) {
  .text-config-row .text-content-field { grid-row: auto; }
  .text-config-row .text-content-field textarea { height: auto; min-height: 100px; }
}
/* =========================================================
   CORREÇÃO DO BOTÃO CONFIGURAÇÕES NA SIDEBAR
   ========================================================= */
.nb-panel .nb-nav {
  width: min(340px, calc(100% - 24px)) !important;
  max-width: 100% !important;
  margin: 88px 0 0 !important;
  padding: 12px !important;
  box-sizing: border-box;
  overflow-x: visible !important;
}

.nb-panel .nb-links {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  box-sizing: border-box;
}

.nb-panel .nb-item-settings {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#settingsOpen {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 58px;
  padding: 12px 15px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 10px !important;
  box-sizing: border-box;
  overflow: visible !important;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(11px, 3.4vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
}

#settingsOpen:hover { gap: 10px !important; }

#settingsOpen .nb-link-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  display: grid !important;
  place-items: center;
  opacity: 1;
}

#settingsOpen .nb-link-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

#settingsOpen .nb-link-text {
  width: 100%;
  min-width: 0;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 380px) {
  .nb-panel .nb-nav {
    width: calc(100% - 14px) !important;
    padding: 7px !important;
  }

  #settingsOpen {
    padding-inline: 11px !important;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px !important;
    font-size: 11px !important;
  }

  #settingsOpen:hover { gap: 7px !important; }
  #settingsOpen .nb-link-icon { width: 24px !important; min-width: 24px; }
  #settingsOpen .nb-link-icon svg { width: 19px !important; height: 19px !important; }
}

/* =========================================================
   BIBLIOTECA DE MODELOS NA SIDEBAR
   ========================================================= */
.nb-panel .nb-item-models {
  display: list-item !important;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  box-sizing: border-box;
  opacity: 1 !important;
  transform: none !important;
}

#modelsOpen {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 58px;
  padding: 12px 15px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  justify-content: stretch;
  gap: 10px !important;
  box-sizing: border-box;
  overflow: visible !important;
  text-align: left;
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(11px, 3.4vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  pointer-events: auto !important;
}

#modelsOpen:hover { gap: 10px !important; }
#modelsOpen .nb-link-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  display: grid !important;
  place-items: center;
  color: #111111 !important;
  opacity: 1;
}
#modelsOpen .nb-link-icon svg { width: 21px !important; height: 21px !important; display: block !important; }
#modelsOpen .nb-link-text {
  width: 100%;
  min-width: 0;
  display: block !important;
  overflow: visible !important;
  color: #111111 !important;
  text-overflow: clip !important;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
#modelsOpen .models-chevron {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  transition: transform .2s ease;
}
#modelsOpen[aria-expanded="true"] .models-chevron { transform: rotate(90deg); }

.models-panel {
  margin-top: 10px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: #ffffff !important;
  border: 2px solid #111111;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #111111;
  font-family: Arial, Helvetica, sans-serif !important;
  pointer-events: auto !important;
}
.models-panel[hidden] { display: none !important; }
.models-name-label { color: #111111; font: 800 11px/1 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.models-name-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 2px solid #111111;
  border-radius: 10px;
  background: #ffffff !important;
  color: #111111 !important;
  font: 600 13px/1.2 Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  pointer-events: auto !important;
}
.models-save-button,
.model-apply-button,
.model-remove-button {
  min-height: 38px;
  padding: 9px 11px;
  border: 2px solid #111111 !important;
  border-radius: 9px;
  font: 800 11px/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer;
  pointer-events: auto !important;
}
.models-save-button,
.model-apply-button { background: #111111 !important; color: #ffffff !important; }
.model-remove-button { background: #ffffff !important; color: #111111 !important; }
.models-status { min-height: 16px; margin: 0; color: #08783a; font: 700 11px/1.35 Arial, Helvetica, sans-serif; }
.models-status.is-error { color: #a31313; }
.models-list { display: grid; gap: 9px; }
.models-empty { margin: 3px 0 0; color: #666666; font: 600 12px/1.4 Arial, Helvetica, sans-serif; }
.model-row { padding-top: 10px; display: grid; gap: 8px; border-top: 1px solid #bdbdbd; }
.model-row-info { min-width: 0; display: grid; gap: 3px; }
.model-row-info strong { overflow: hidden; color: #111111; font: 800 13px/1.25 Arial, Helvetica, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.model-row-info small { color: #666666; font: 600 10px/1.2 Arial, Helvetica, sans-serif; }
.model-row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

@media (max-width: 380px) {
  #modelsOpen {
    padding-inline: 11px !important;
    grid-template-columns: 24px minmax(0, 1fr) 17px;
    gap: 7px !important;
    font-size: 11px !important;
  }
  #modelsOpen:hover { gap: 7px !important; }
  #modelsOpen .nb-link-icon { width: 24px !important; min-width: 24px; }
  #modelsOpen .nb-link-icon svg { width: 19px !important; height: 19px !important; }
}

/* =========================================================
   RESPONSIVIDADE FINAL — viewport móvel, slide, sidebar e lightbox
   Estas regras neutralizam tamanhos antigos conflitantes.
   ========================================================= */
:root {
  --app-height: 100dvh;
  --app-offset-top: 0px;
  --header-content-gap: clamp(22px, 4vh, 42px);
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: var(--app-height);
}

body {
  height: var(--app-height);
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.page-shell {
  width: 100%;
  min-width: 0;
  min-height: var(--app-height);
  overflow-x: clip;
}

.layout-stage,
.layout-stage > *,
.prototype-slider-wrap,
.prototype-slider-wrap .slider,
.prototype-slider-wrap .slider-track,
.prototype-slider-wrap .slide {
  min-width: 0;
  max-width: 100%;
}

.layout-stage {
  width: min(760px, calc(100% - clamp(20px, 5vw, 40px)));
  margin-right: auto;
  margin-left: auto;
}

/* O fundo do header encosta nas bordas; o gutter continua protegendo ícones e logo. */
.page-header {
  left: 0;
  width: 100%;
  transform: none;
}

body[data-header-spacing="none"] { --header-content-gap: 0px; }
body[data-header-spacing="small"] { --header-content-gap: clamp(8px, 2vh, 16px); }
body[data-header-spacing="medium"] { --header-content-gap: clamp(22px, 4vh, 42px); }
body[data-header-spacing="large"] { --header-content-gap: clamp(44px, 7vh, 72px); }
body[data-header-spacing="xlarge"] { --header-content-gap: clamp(72px, 10vh, 112px); }

.page-shell .layout-stage,
body.has-layout-logo .page-shell .layout-stage,
body.has-layout-logo[data-logo-position^="header-"] .page-shell .layout-stage,
body.has-layout-logo[data-logo-position="free-center"] .page-shell .layout-stage,
body:not(.has-layout-logo)[data-logo-position="free-center"] .page-shell .layout-stage,
body[data-layout="layout-3"][data-header-height][data-logo-position] .page-shell .layout-stage,
body[data-layout="layout-3"][data-header-height][data-logo-position].has-layout-logo .page-shell .layout-stage {
  padding-top: calc(var(--page-header-height) + var(--header-content-gap)) !important;
}

/* Textos nunca podem cobrir ou capturar o menu lateral. */
.prototype-text-zone,
.prototype-free-text {
  pointer-events: none !important;
}

.nb-panel.open,
.nb-panel.open #settingsOpen {
  pointer-events: auto !important;
}

body[data-page-scroll="locked"] .layout-stage,
body[data-page-scroll="locked"][data-layout="layout-2"] .layout-stage,
body[data-page-scroll="locked"][data-layout="layout-3"] .layout-stage {
  height: var(--app-height);
  max-height: var(--app-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

body[data-page-scroll="locked"] .layout-stage::-webkit-scrollbar {
  display: none;
}

body[data-page-scroll="released"] .layout-stage {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* Em página travada, o slide mede a área que sobrou depois do header e dos
   botões. Unidades de container permitem manter 16:9 sem estourar a altura. */
body[data-page-scroll="locked"][data-slide-width="floating"][data-layout="layout-2"] .prototype-slider-wrap,
body[data-page-scroll="locked"][data-slide-width="floating"][data-layout="layout-3"] .prototype-slider-wrap {
  container-type: size;
  flex: 1 1 0 !important;
  min-height: clamp(120px, 24vh, 240px);
  display: grid;
  place-items: start center;
}

body[data-page-scroll="locked"][data-slide-width="floating"][data-layout="layout-2"] .prototype-slider-wrap .slider,
body[data-page-scroll="locked"][data-slide-width="floating"][data-layout="layout-3"] .prototype-slider-wrap .slider {
  width: min(100cqw, calc(100cqh * 16 / 9)) !important;
  max-width: 100% !important;
}

.prototype-slider-wrap .slider {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
}

.prototype-slider-wrap .slider-track,
.prototype-slider-wrap .slide {
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body[data-slide-width="full"] .prototype-slider-wrap,
body[data-slide-width="full"] .prototype-slider-wrap .slider {
  width: 100dvw !important;
  max-width: 100dvw !important;
}

body[data-slide-width="full"] .prototype-slider-wrap {
  position: relative;
  left: calc(50% - 50dvw);
  margin-right: 0;
  margin-left: 0;
  flex: 0 0 auto !important;
  transform: none;
}

/* Em largura cheia, o palco acompanha a proporção real da imagem ativa.
   Assim a mídia toca as duas bordas sem corte e sem faixas laterais. */
body[data-slide-width="full"] .prototype-slider-wrap .slider {
  aspect-ratio: var(--active-slide-ratio, 16 / 9) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body[data-slide-width="full"] .prototype-slider-wrap .slider-track,
body[data-slide-width="full"] .prototype-slider-wrap .slide {
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body[data-slide-width="full"] .prototype-slider-wrap .slide > img {
  object-fit: contain !important;
  background: var(--theme-surface) !important;
}

/* O menu usa uma só largura; os filhos não voltam a reduzi-la para 70%. */
.nb-panel {
  top: var(--app-offset-top);
  width: min(400px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  height: var(--app-height);
  max-height: var(--app-height);
}

.nb-panel .nb-logo-wrap,
.nb-panel .nb-search,
.nb-panel .nb-nav {
  width: 100% !important;
  max-width: 100% !important;
}

.nb-panel .nb-nav {
  max-height: calc(var(--app-height) - 100px);
  overflow-x: hidden !important;
  overflow-y: auto;
}

@media (max-width: 480px) {
  :root { --nb-panel-w: min(88vw, 360px); }

  .nb-panel {
    width: var(--nb-panel-w);
    max-width: calc(100vw - 12px);
  }
}

/* O lightbox ocupa só a área visível, recebe os gestos e isola a página de trás. */
.lb-overlay {
  inset: auto 0 auto 0;
  top: var(--app-offset-top);
  width: 100%;
  height: var(--app-height);
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.lb-overlay.show {
  pointer-events: auto !important;
}

.lb-overlay.show .lb-close,
.lb-overlay.show .lb-frame,
.lb-overlay.show .lb-frame img {
  pointer-events: auto !important;
}

.lb-frame {
  width: min(1200px, 100%);
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

body .lb-frame img#lbImg {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body.lightbox-open {
  height: var(--app-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body.lightbox-open .page-shell {
  pointer-events: none !important;
}

@media (orientation: landscape) and (max-height: 560px) {
  .layout-stage {
    width: min(920px, calc(100% - 24px));
  }

  .nb-panel .nb-nav {
    max-height: calc(var(--app-height) - 76px);
    margin-top: 68px !important;
  }
}