/* ============================================================
   ADAPTATIVO v8 — modo celular controlado por UMA chave:
   a classe .adapt-mobile no <body>, colocada pelo adaptativo.js.
   Assim CSS e JS NUNCA discordam (o bug do emulador).
   Sem a classe, nada aqui existe -> desktop 100% intacto.
   ============================================================ */

body.adapt-mobile { overflow: hidden; height: 100%; }

body.adapt-mobile main {
  display: flex !important;
  flex-direction: column !important;
  height: calc(var(--vph, 100vh) - 56px) !important;
  max-width: 100% !important;
  padding: 0 0 84px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* ---- header compacto ---- */
body.adapt-mobile .header-inner { display: flex !important; align-items: center; justify-content: space-between; padding: 0 12px !important; gap: 10px; }
body.adapt-mobile .header-col-canvas { height: 56px; }
body.adapt-mobile .header-col-canvas .hcenter { display: none !important; }
body.adapt-mobile .hr { gap: 8px !important; flex-wrap: nowrap; }
body.adapt-mobile .live { display: none !important; }
body.adapt-mobile .bytag { display: none !important; }
body.adapt-mobile .adapt-hbtn { padding: 6px 12px !important; font-size: 12px !important; white-space: nowrap; }

/* ---- foto em tela cheia ---- */
body.adapt-mobile .stage { order: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.adapt-mobile .canvas-card { flex: 1; min-height: 0; display: flex; flex-direction: column; height: auto !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; }
body.adapt-mobile .canvas-body { position: relative; flex: 1; min-height: 0; }

/* ---- rodapé: menu escrito, fixo ---- */
body.adapt-mobile .canvas-footer {
  position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--line, #e2e4e8);
  display: flex !important; flex-wrap: wrap; align-items: center;
  justify-content: flex-start !important; gap: 10px; row-gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}
body.adapt-mobile .canvas-footer > * { flex: 0 0 auto; }
body.adapt-mobile #btnAntesDepois { margin-left: auto !important; }
body.adapt-mobile #paredeCtl, body.adapt-mobile #adaptParedePh { margin: 0 18px !important; gap: 11px !important; }
body.adapt-mobile #paredeCtl .pw-lbl { margin-right: 4px; }
body.adapt-mobile .pw-dot { width: 28px; height: 28px; margin: 0 2px; }
body.adapt-mobile .cf-btn { font-size: 12.5px !important; padding: 8px 12px !important; }
body.adapt-mobile .adapt-dis { opacity: .4; pointer-events: none; }

/* celular: só Parede 1 e 2 */
body.adapt-mobile .pw-dot[data-zona="parede3"],
body.adapt-mobile .pw-dot[data-zona="parede4"] { display: none !important; }

/* ---- some o que não é do mobile ---- */
body.adapt-mobile #btnSugestaoAmbientes { display: none !important; }
body.adapt-mobile .catalog > .cat-box:not(.cat-box-grid) { display: none !important; }

/* ---- CATÁLOGO: folha por cima ---- */
body.adapt-mobile .catalog {
  position: fixed; left: 0; right: 0; bottom: 78px; top: auto; z-index: 890;
  height: calc(var(--vph, 100vh) * 0.70); background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  display: none; flex-direction: column; padding: 10px 12px 12px;
  width: 100% !important; transform: none;
}
body.adapt-mobile.adapt-cat-open .catalog { display: flex !important; }
body.adapt-mobile .catalog .cat-card.cat-box-grid { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden; width: 100% !important; }
body.adapt-mobile .catalog .cat-grid { overflow-y: auto; }

/* coleções compactas (~3 por tela) */
body.adapt-mobile .colecao-card { border-radius: 10px; }
body.adapt-mobile .colecao-img { height: 130px !important; max-height: 130px !important; object-fit: cover; object-position: left bottom; width: 100%; display: block; }

/* produtos: 3 por linha, menores */
body.adapt-mobile .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
body.adapt-mobile .prod-thumb { aspect-ratio: 1 / 0.85 !important; }
body.adapt-mobile .prod-info { padding: 5px 7px 7px !important; }
body.adapt-mobile .prod-name { font-size: 11px !important; line-height: 1.15 !important; }
body.adapt-mobile .prod-line { font-size: 9px !important; }

/* ---- SLIDERS / REJUNTE: faixa inferior ---- */
body.adapt-mobile .col-esq {
  order: 2; display: none; width: 100%;
  position: fixed; left: 0; right: 0; bottom: 78px; z-index: 880;
  background: #fff; border-top: 1px solid #e2e4e8; box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  height: auto !important; max-height: calc(var(--vph, 100vh) * 0.46); overflow: hidden !important;
  padding: 4px 0 8px;
}
body.adapt-mobile.adapt-sliders-open .col-esq,
body.adapt-mobile.adapt-rej-open .col-esq { display: block !important; }
body.adapt-mobile .col-esq .c3d-panel-slot { height: auto !important; border: none !important; border-radius: 0 !important; }
body.adapt-mobile .col-esq .c3d-panel-slot .c3d-head { display: none !important; }
body.adapt-mobile .col-esq .c3d-panel-slot .c3d-ctrls { max-height: calc(var(--vph, 100vh) * 0.40) !important; overflow-y: auto !important; padding: 4px 16px 8px !important; }
body.adapt-mobile .ajuste-rodape { display: none !important; }

/* paginação 3 em 3 */
body.adapt-mobile.adapt-sliders-open .c3d-panel-slot .c3d-row.adapt-row-off { display: none !important; }
body.adapt-mobile.adapt-rej-open .c3d-panel-slot .c3d-row { display: none !important; }
body.adapt-mobile.adapt-rej-open .c3d-panel-slot .c3d-rejunte-box { display: block !important; margin: 8px 16px !important; }
body.adapt-mobile.adapt-sliders-open .c3d-panel-slot .c3d-rejunte-box { display: none !important; }
body.adapt-mobile.adapt-sliders-open .c3d-panel-slot .c3d-btn-ia,
body.adapt-mobile.adapt-sliders-open .c3d-panel-slot .c3d-btn-dl,
body.adapt-mobile.adapt-rej-open .c3d-panel-slot .c3d-btn-ia,
body.adapt-mobile.adapt-rej-open .c3d-panel-slot .c3d-btn-dl { display: none !important; }

body.adapt-mobile .adapt-pager { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0; gap: 8px; }
body.adapt-mobile .adapt-pager b { font-size: 11.5px; color: #6e6e73; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }

/* foto encolhe quando uma faixa abre */
body.adapt-mobile.adapt-sliders-open .canvas-body,
body.adapt-mobile.adapt-rej-open .canvas-body { max-height: calc(var(--vph, 100vh) - 56px - 78px - calc(var(--vph, 100vh) * 0.46)); }

/* ---- toques ---- */
body.adapt-mobile .rr-pin { transform: scale(1.15); }

/* ---- PIN DE ZONA: alvo grande e sem o "x" que apagava o pin por engano ----
   O x tinha 20x20 num pin de 37x37 (29% da area, canto superior direito) e
   removia o pin de vez. No celular ele nao existe: o pin inteiro abre o catalogo. */
body.adapt-mobile .rr-pin-x { display: none !important; }
body.adapt-mobile .rr-pin {
  width: 52px !important; height: 52px !important;
  display: flex !important; align-items: center; justify-content: center;
}
body.adapt-mobile .rr-pin > img {
  width: 52px !important; height: 52px !important;
  pointer-events: none;                     /* o clique e sempre do pin */
}
body.adapt-mobile .rr-pin-sub { pointer-events: none; }

/* ---- EMPILHAMENTO: as folhas tem que ficar ACIMA do overlay do compositor 3D ----
   Depois que o produto do piso e aplicado, o Compositor3D cria .c3d-overlay /
   .c3d-stage com z-index 9999 cobrindo a foto inteira. O catalogo (890) e a
   coluna de sliders (880) abriam ATRAS dele: abriam de verdade, mas invisiveis.
   Ordem: rodape > catalogo > sliders > overlay 3D. */
body.adapt-mobile .catalog        { z-index: 10050 !important; }
body.adapt-mobile .col-esq        { z-index: 10040 !important; }
body.adapt-mobile .adapt-pager    { z-index: 10045 !important; }
body.adapt-mobile .canvas-footer  { z-index: 10060 !important; }

/* ---- GESTOS NO CELULAR ----
   Sem isto a pinca vaza para o Safari: ele da zoom na PAGINA, o layout fixo
   sai do lugar e o cabecalho some para fora da tela. */
body.adapt-mobile { touch-action: manipulation; overscroll-behavior: none; }
/* separado: um seletor invalido derruba a lista inteira em navegador sem :has() */
body.adapt-mobile { overflow-x: hidden !important; max-width: 100% !important; }
html:has(body.adapt-mobile) { overflow-x: hidden !important; max-width: 100% !important; }
body.adapt-mobile .canvas-card,
body.adapt-mobile .canvas-body,
body.adapt-mobile #fotoView,
body.adapt-mobile #ambImg,
body.adapt-mobile .c3d-overlay { touch-action: none; }
/* sliders continuam arrastando normalmente */
/* slider horizontal: o elemento trata o gesto inteiro. Com pan-y o
   navegador disputa o arrasto e o slider fica intermitente. */
body.adapt-mobile input[type=range] { touch-action: none !important; }
body.adapt-mobile .catalog,
body.adapt-mobile .catalog *,
body.adapt-mobile .col-esq,
body.adapt-mobile .col-esq * { touch-action: pan-y; }

/* ---- PENTE FINO SLIDERS: a foto nao pode virar miniatura ----
   Com o painel aberto o canvas caia para 281px de 768. Agora o painel cede
   espaco: no maximo 40% da tela, e a foto nunca fica abaixo de 42%. */
body.adapt-mobile .col-esq { max-height: calc(var(--vph, 100vh) * 0.40) !important; }
body.adapt-mobile .col-esq .c3d-panel-slot .c3d-ctrls {
  max-height: calc(var(--vph, 100vh) * 0.33) !important;
}
body.adapt-mobile.adapt-sliders-open .canvas-body,
body.adapt-mobile.adapt-rej-open .canvas-body {
  min-height: calc(var(--vph, 100vh) * 0.42) !important;
  max-height: calc(var(--vph, 100vh) - 56px - 78px - calc(var(--vph, 100vh) * 0.40)) !important;
}
/* REVERTIDO: mexer em height/thumb engorda a trilha nativa e muda o visual.
   O slider no celular fica IGUAL ao desktop. */

/* ---- PAGINADOR DOS SLIDERS: cinza escuro ---- */
body.adapt-mobile #adaptPgAnt,
body.adapt-mobile #adaptPgProx {
  background: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #fff !important;
}
body.adapt-mobile #adaptPgAnt:active,
body.adapt-mobile #adaptPgProx:active {
  background: #333 !important;
  border-color: #333 !important;
}
/* tira o anel laranja que fica preso depois do toque */
body.adapt-mobile #adaptPgAnt:focus,
body.adapt-mobile #adaptPgProx:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #4a4a4a !important;
}
body.adapt-mobile #adaptPgAnt:focus-visible,
body.adapt-mobile #adaptPgProx:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -3px !important;
}
body.adapt-mobile .adapt-pager { -webkit-tap-highlight-color: transparent; }