.pagina-personalizar {
  background: #fff;
}

body.preview-aberto {
  overflow: hidden;
}

body.preview-aberto header,
body.preview-aberto .editor {
  visibility: hidden;
}

.pagina-personalizar header {
  position: sticky;
}

.editor {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px);
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 18px;
  background: #ececec;
  color: #111;
}

.editor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #111;
  color: #fff;
}

.editor-topo strong {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.editor-topo small {
  color: #888;
  font-size: 11px;
}

.editor-voltar,
.editor-ok {
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.editor-voltar {
  display: grid;
  place-items: center;
  background: #c0392b;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.editor-ok {
  background: #1f6feb;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.editor-canvas {
  position: relative;
  display: block;
  background: #fff;
}

.editor-acoes {
  position: absolute;
  left: 4px;
  top: 50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 4px;
  background: transparent;
  transform: translateY(-50%);
}

.editor-acoes button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.editor-palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  padding: 8px 12px;
  background: #fff;
}

.palco-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 56px;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

#vista-prev,
#vista-next {
  display: none;
}

.camisa-mock {
  position: relative;
  width: min(320px, 100%);
  margin: 0 auto;
  aspect-ratio: 1105 / 1309;
}

.camisa-foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.area-costas {
  position: absolute;
  left: 25%;
  top: 26%;
  width: 48%;
  height: 50%;
}

.area-camadas {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.area-texto {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.area-texto .camada {
  pointer-events: auto;
  z-index: 5;
}

.camisa-mock[data-vista="frente"] .area-texto {
  visibility: hidden;
  pointer-events: none;
}

.camisa-mock[data-vista="frente"] .area-costas {
  visibility: hidden;
  pointer-events: none;
}

.logo-peito {
  display: none;
  position: absolute;
  left: 58.5%;
  top: 28%;
  width: 7.5%;
  height: auto;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: lighten;
}

.camisa-mock[data-vista="frente"] .logo-peito {
  display: block;
}

.camada {
  position: absolute;
  left: 50%;
  top: 40%;
  min-width: 40px;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.camada.camada-imagem {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.camada.camada-imagem:active {
  cursor: grabbing;
}

.camada-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camada.ativa {
  outline: 2px dashed #1f6feb;
  outline-offset: 3px;
}

.camada img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.camada-imagem .camada-clip img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

.camada-texto {
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.camada-alca {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #1f6feb;
  cursor: pointer;
}

.camada-alca.resize {
  right: -11px;
  bottom: -11px;
  cursor: nwse-resize;
}

.camada-alca.resize.sw {
  right: auto;
  left: -11px;
  cursor: nesw-resize;
}

.camada-alca.resize.ne {
  bottom: auto;
  top: -11px;
  cursor: nesw-resize;
}

.camada-alca.resize.nw {
  right: auto;
  left: -11px;
  bottom: auto;
  top: -11px;
  cursor: nwse-resize;
}

.camada-alca.rotate {
  top: -28px;
  left: 50%;
  cursor: grab;
  transform: translateX(-50%);
}

.editor-vistas {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: #fff;
}

.editor-vistas button {
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}

.editor-vistas button.ativo {
  border-color: #1f6feb;
  color: #1f6feb;
  font-weight: 700;
}

.editor-painel {
  min-height: 118px;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
}

.painel-titulo {
  margin: 0 0 10px;
  color: #666;
  font-size: 12px;
}

.painel-info {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.cor-swatch {
  width: 36px;
  height: 36px;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}

.cor-swatch.ativo {
  border-color: #111;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f6feb;
}

.galeria-dtf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.galeria-dtf button {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.galeria-dtf button.ativo,
.galeria-dtf button:hover {
  border-color: #1f6feb;
}

.galeria-dtf img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #111;
}

.galeria-dtf span {
  display: block;
  padding: 4px 5px 6px;
  font-size: 11px;
  line-height: 1.2;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.galeria-vazia {
  grid-column: 1 / -1;
  padding: 18px 8px;
  color: #777;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.painel-texto input,
.painel-fonte select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.lista-fontes,
.estilo-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lista-fontes button,
.estilo-linha button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.lista-fontes button.ativo,
.estilo-linha button.ativo {
  border-color: #1f6feb;
  color: #1f6feb;
}

.cores-texto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.editor-tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-top: 1px solid #e5e5e5;
}

.editor-tools button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: #444;
  font-size: 10px;
  cursor: pointer;
}

.editor-tools button.ativo {
  color: #1f6feb;
  font-weight: 700;
}

.editor-tools span {
  font-size: 18px;
}

.editor-pedido {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 16px;
  background: #111;
}

.pedido-tamanhos span {
  display: block;
  margin-bottom: 8px;
  color: #888;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pedido-tamanhos div {
  display: flex;
  gap: 8px;
}

.pedido-tamanhos button {
  flex: 1;
  min-height: 40px;
  border: 1px solid #333;
  border-radius: 8px;
  background: #181818;
  color: #fff;
  cursor: pointer;
}

.pedido-tamanhos button.ativo {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.posicao-texto {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.posicao-texto button {
  flex: 1;
  min-height: 36px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.posicao-texto button.ativo {
  border-color: #1f6feb;
  color: #1f6feb;
}

.pedido-preco {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.btn-enviar-pedido {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #080808;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.preview-360 {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: #fff;
}

.preview-360.hidden {
  display: none;
}

.preview-360-caixa {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 18px 18px;
  border-radius: 20px;
  background: #fff;
  color: #111;
  text-align: center;
}

.preview-360-caixa strong {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.preview-360-caixa > p {
  margin: 6px 0 16px;
  color: #666;
  font-size: 13px;
}

.preview-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  float: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.preview-palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-palco > button {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 56px;
  border: 0;
  background: transparent;
  color: #333;
  font-size: 42px;
  cursor: pointer;
  transform: translateY(-50%);
}

.preview-palco > button:first-of-type {
  left: 0;
}

.preview-palco > button:last-of-type {
  right: 0;
}

.preview-flip {
  width: min(280px, 72vw);
  padding: 8px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.preview-flip:active {
  cursor: grabbing;
}

.preview-flip img {
  -webkit-user-drag: none;
  pointer-events: none;
  user-select: none;
}

.preview-card,
.preview-face {
  position: relative;
  width: 100%;
  touch-action: none;
}

.preview-face .camisa-mock {
  width: 100%;
}

.preview-face.costas {
  display: none;
}

.preview-card.verso .preview-face.frente {
  display: none;
}

.preview-card.verso .preview-face.costas {
  display: block;
}

.preview-palco,
.preview-flip,
.preview-card,
.preview-face,
.preview-face .camisa-mock {
  background: #fff;
}

.preview-face .camisa-foto {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.preview-face .area-costas {
  visibility: visible;
  pointer-events: none;
}

.preview-face.frente .logo-peito {
  display: block;
}

.preview-face.frente .area-costas,
.preview-face.frente .area-texto,
.preview-face.costas .logo-peito {
  display: none;
}

.preview-face.costas .area-texto {
  display: block;
  pointer-events: none;
}

.preview-face .camada,
.preview-face .camada.ativa {
  outline: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.preview-face .camada-alca {
  display: none;
}

.preview-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.preview-acoes span {
  font-size: 20px;
  font-weight: 800;
  color: #111;
}

.preview-360 .btn-enviar-pedido {
  background: #111;
  color: #fff;
}

.aviso-loja {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: grid;
  place-items: center;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(8, 8, 8, 0.62);
}

.aviso-loja.hidden {
  display: none;
}

.aviso-loja-caixa {
  width: min(340px, 100%);
  padding: 28px 22px 22px;
  border-radius: 20px;
  background: #fff;
  color: #111;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.aviso-loja-caixa strong {
  display: block;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.aviso-loja-caixa p {
  margin: 10px 0 20px;
  color: #555;
  font-size: 14px;
  line-height: 1.45;
}

.aviso-loja-ok {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 759px) {
  .pagina-personalizar header {
    display: none;
  }

  .editor {
    min-height: 100dvh;
    max-width: none;
    padding-bottom: 0;
  }

  .editor-topo {
    padding: 8px 10px;
  }

  .editor-voltar,
  .editor-ok {
    min-width: 38px;
    height: 38px;
  }

  .editor-canvas {
    display: block;
  }

  .editor-acoes {
    gap: 6px;
    padding: 10px 4px;
  }

  .editor-acoes button {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .editor-palco {
    min-height: min(46dvh, 380px);
    padding: 8px 10px;
  }

  .camisa-mock {
    width: min(300px, 92%);
  }

  .editor-vistas {
    padding: 8px 12px;
  }

  .editor-vistas button {
    min-height: 36px;
  }

  .editor-painel {
    min-height: 0;
    padding: 10px 12px;
  }

  .galeria-dtf {
    max-height: min(32dvh, 240px);
    grid-template-columns: repeat(3, 1fr);
  }

  .editor-tools {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.08);
  }

  .editor-tools button {
    padding: 8px 2px 10px;
    font-size: 9px;
  }

  .editor-pedido {
    padding: 10px 12px 12px;
  }

  .preview-360 {
    padding: 10px;
    background: #fff;
  }

  .preview-360-caixa {
    width: 100%;
    min-height: 100%;
    padding: 48px 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    background: #fff;
    color: #111;
  }

  .preview-flip {
    width: min(240px, 70vw);
  }

  .preview-palco > button {
    width: 28px;
    font-size: 32px;
  }
}

@media (min-width: 760px) {
  .editor {
    margin: 24px auto 40px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  }

  .editor-palco {
    min-height: 460px;
  }

  .camisa-mock {
    width: 360px;
  }
}