:root{
  --bg:#fff;
  --fg:#111;

  /* Flecha de contorno (marcador de seleção) */
  --marker-size: 26px;      /* tamanho geral da flecha */
  --marker-stroke: #fff;    /* cor do traço */
  --marker-thickness: 2.5;  /* espessura em px */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.montagem-layout{
  display:grid;
  grid-template-columns:1fr;
  min-height:100vh;
}

.montagem-preview{
  position:relative;
  min-height:100vh;
}

/* Centraliza o preview; o JS define o tamanho CSS do canvas */
.preview-wrap{
  display:flex;               /* novo */
  align-items:center;         /* novo */
  justify-content:center;     /* novo */
  padding:8px 0;              /* novo */
}

/* Como o JS define width/height do canvas, não deixe o CSS forçar 100% */
#stage{
  display:block;
  outline:0;
  background:#f7f7f7;
  width:auto;   /* novo: deixa o JS controlar */
  height:auto;  /* novo: deixa o JS controlar */
}

.preview-loading{
  position:absolute;
  inset:auto 12px 12px auto;
  background:rgba(0,0,0,.8);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
}

.preview-error{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  font-weight:700;
}

.montagem-aside{display:none !important}
#mobilePanel{display:none !important}
#mobilePreviewAnchor{display:none !important}

.qty-overlay{position:fixed;inset:0;z-index:2147483647;background:#f7dcc2 url("https://y1nrmnwgpdmg1oxw.public.blob.vercel-storage.com/Folders/GIF/load.gif") center/cover no-repeat;display:grid;place-items:center}
.qty-wrap{width:min(1200px,94vw);display:grid;grid-template-columns:1fr;gap:24px}
.qty-left{max-width:560px}
.qty-title{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:40px;line-height:1.04;color:#111;margin:0 0 10px}
.qty-sub{font-size:14px;color:#333;margin:0 0 28px}
.qty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:18px}
.qty-btn{display:grid;gap:6px;align-content:center;justify-items:center;height:92px;background:#000;color:#fff;border:0;border-radius:6px;cursor:pointer;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.qty-btn .n{font-weight:800;font-size:18px;line-height:1}
.qty-btn .lbl{font-size:14px}
.qty-btn .pr{font-weight:700;font-size:14px}
.qty-btn.cancel{background:#fff;color:#111;border:1px solid #111}
.qty-btn.cancel .lbl{text-decoration:underline}
@media (max-width:960px){
  .qty-wrap{width:min(680px,94vw)}
  .qty-title{font-size:32px}
  .qty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Oculta a navegação por setas (‹ ›) */
#pickOverlay{ display:none !important; }

/* ===== Flecha de contorno (marcador do item selecionado no preview) =====
/* ===== Flecha de contorno (marcador do item selecionado no preview) =====
   Ponta voltada para a ESQUERDA; o JS posiciona levemente à direita do alvo. */
#selDot{
  position: fixed;
  z-index: 60;

  width: var(--marker-size);
  height: var(--marker-size);

  /* Faz a cor do traço vir da variável */
  color: var(--marker-stroke);

  /* SVG só com contorno, usando currentColor para pegar a cor acima */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
  <path d='M34 8 L18 24 L34 40'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;

  filter: drop-shadow(0 -120px 6px rgba(0,0,0,.5));
  transform: translate(0,-50%);
  pointer-events: none;           /* não intercepta cliques no preview */
  will-change: transform;         /* animações/posicionamento mais suaves */
}
#selDot[hidden]{ display:none !important; }


/* (Removido o fantasminha #thumbFly por solicitação) */