/* MU – HTML Block Panel (v2.2.0 — abertura suavizada, JS intacto) */

/* ---------- VARS GLOBAIS ---------- */
:root {
  --htmlbp-scroll-offset: 0; /* usado no JS para alinhar o topo com espaço */
}

/* ---------- BASE ---------- */
.htmlbp-wrap { position: relative; }

/* Painel base (fechado por omissão no desktop) */
.htmlbp-panel{
  --htmlbp-h: 50vh;          /* altura padrão desktop */
  --htmlbp-bg: transparent;  /* fundo padrão */
  position: relative;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px); /* ligeiramente menor para abrir mais “leve” */
  /* apenas suavizei a transição; resto igual */
  transition:
	  max-height .60s cubic-bezier(.22,1,.36,1),
	  transform  .60s cubic-bezier(.22,1,.36,1),
	  opacity    .45s ease-out;
  background: var(--htmlbp-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  will-change: max-height, transform, opacity;
}

/* Header — só visível em 'sheet-mode' (mobile) */
.htmlbp-header{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border-bottom: none;
  padding: 12px 16px;
  position: sticky;
  top: 0; z-index: 2;
}
.htmlbp-title{
  font-family: 'Lato', sans-serif;
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color:#000;
}
.htmlbp-close{
  border: 0; background: transparent; cursor: pointer; color:#777;
  width: 40px; height:40px; display:flex; align-items:center; justify-content:center;
  font-size: 28px; line-height: 1;
}

/* Corpo com scroll interno */
.htmlbp-inner{
  height: var(--htmlbp-h);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
.htmlbp-inner::-webkit-scrollbar{ width:4px; height:4px; }
.htmlbp-inner::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,.25); border-radius:2px; }
.htmlbp-inner::-webkit-scrollbar-track{ background: transparent; }

/* ---------- ESTADOS (DESKTOP INLINE) ---------- */
.htmlbp-wrap.is-open-inline .htmlbp-panel{
  max-height: var(--htmlbp-h);
  opacity: 1;
  transform: translateY(0);
}

/* Suporte a height="auto" (sem max-height no aberto) */
.htmlbp-wrap.h-auto .htmlbp-inner{
  height: auto;
  max-height: none;
}
.htmlbp-wrap.h-auto.is-open-inline .htmlbp-panel{
  max-height: none; /* deixa o conteúdo expandir naturalmente */
}

/* ---------- SHEET (MOBILE) ---------- */
/* controlado por classe, não por media-query */
.htmlbp-wrap.sheet-mode .htmlbp-panel{
  position: fixed; left:0; right:0; bottom:0; top:auto;
  height: 100vh; max-height: none;
  border-radius: 0 !important;
  transform: translateY(100%); /* fechado: fora do ecrã */
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  z-index: 9999;
  background: var(--htmlbp-bg) !important;
  opacity: 1; /* visível quando em sheet-mode (mesmo fechado) */
}
.htmlbp-wrap.sheet-mode .htmlbp-header{ display: flex; }
/* 56px ~ altura da header do sheet */
.htmlbp-wrap.sheet-mode .htmlbp-inner{ height: calc(100vh - 56px); padding:16px; }

/* Sheet aberto */
.htmlbp-wrap.sheet-mode.is-open-sheet .htmlbp-panel{ transform: translateY(0); }
.htmlbp-wrap.sheet-mode.is-open-sheet .htmlbp-backdrop{ opacity:1; visibility:visible; }

/* Backdrop */
.htmlbp-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 9998;
}

/* Botão maior para touch no sheet */
.htmlbp-wrap.sheet-mode .htmlbp-close{ font-size:30px; width:44px; height:44px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .htmlbp-panel,
  .htmlbp-wrap.sheet-mode .htmlbp-panel,
  .htmlbp-backdrop{
    transition: none !important;
  }
}


/* --- PATCH: scroll interno no sheet (mobile) --- */

/* Torna o painel um container flex vertical a ocupar o ecrã todo */
.htmlbp-wrap.sheet-mode .htmlbp-panel{
  display: flex;
  flex-direction: column;

  /* viewport units modernos para evitar saltos de barra e iOS */
  height: 100vh;   /* fallback */
  height: 100svh;  /* small viewport height */
  height: 100dvh;  /* dynamic viewport height */
}

/* A header fica no topo; o conteúdo passa a flexível e rolável */
.htmlbp-wrap.sheet-mode .htmlbp-inner{
  flex: 1 1 auto;     /* ocupar o espaço restante */
  min-height: 0;      /* IMPORTANTE: permite overflow dentro de flex item */
  overflow-y: auto;   /* ativa scroll interno */
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  overscroll-behavior: contain;      /* evita “varrer” o body por baixo */
}





/* Mostra ícone só quando data-toggle-icon="1" no próprio botão */
.htmlbp-toggle[data-toggle-icon="1"]::after{
  margin-left: 4px;
  padding-top: 2px;
  font-weight: normal;
  font-style: normal;
  font-size: 9px;
  content: "\f129";              /* glifo do woodmart-font (chevron) */
  font-family: "woodmart-font";
  display: inline-block;
  line-height: 1;
  transition: transform .3s ease;
}

/* Se o ícone estiver desligado neste botão */
.htmlbp-toggle[data-toggle-icon="0"]::after{
  content: none;
}

/* — Direção por botão —
   Fechado=UP (default): aponta para cima quando fechado, para baixo quando aberto */
.htmlbp-toggle[data-arrow-closed="up"]::after{
  transform: rotate(180deg); /* up (fechado) */
}
.htmlbp-toggle[data-arrow-closed="up"].is-active::after{
  transform: rotate(0deg);   /* down (aberto) */
}

/* Fechado=DOWN: aponta para baixo quando fechado, para cima quando aberto */
.htmlbp-toggle[data-arrow-closed="down"]::after{
  transform: rotate(0deg);   /* down (fechado) */
}
.htmlbp-toggle[data-arrow-closed="down"].is-active::after{
  transform: rotate(180deg); /* up (aberto) */
}






@media (max-width: 768px) {
  /* dentro do painel em modo mobile */
  .htmlbp-wrap.sheet-mode .sitemap_block .vc_column_container:first-of-type > .vc_column-inner {
    padding-top: 0 !important;
  }

  /* todas as outras colunas seguintes */
  .htmlbp-wrap.sheet-mode .sitemap_block .vc_column_container:not(:first-of-type) > .vc_column-inner {
    padding-top: 30px !important;
  }
}