/* CASTOR BEZERRA — ajustes de SITE (todas as páginas), HOME V3 2026-08-17.
   1) menu do topo: dropdown com muitas filhas em 2 colunas; item "Ofertas" em
      dourado; item "Tudo de X" separado por fio.
   Publicar = bump do ?v= no layout.tpl (CDN cacheia por nome). */
.dt-nav__sub--cols{ min-width:460px; column-count:2; column-gap:6px; }
.dt-nav__sub--cols > li{ break-inside:avoid; -webkit-column-break-inside:avoid; }
.dt-nav__sub--cols::before{ column-span:all; }
.dt-nav__sub-item--all > .dt-nav__sub-link{ font-weight:700; color:#0F3D9C; }
.dt-nav__sub-item--all + .dt-nav__sub-item{ border-top:1px solid #E2E8F0; margin-top:4px; padding-top:4px; }
.dt-nav__item--ofertas > .dt-nav__link{ color:#9A6B00; }
.dt-nav__item--ofertas > .dt-nav__link::after{ transform:scaleX(1); background:#F2C14E; }
.dt-nav__item--more > .dt-nav__link{ opacity:.92; }

/* menu do topo mais compacto entre 1024 e 1440px pra caber Início + 5 departamentos + Mais + Guias + Rastreio numa linha */
@media (min-width:1024px) and (max-width:1440px){
    .dt-nav__link{ padding:14px 11px; font-size:11.5px; letter-spacing:.06em; }
    .dt-nav__link::after{ left:12px; right:12px; }
}
.dt-nav__sub--cols > .dt-nav__sub-item--all{ column-span:all; -webkit-column-span:all; }

/* 2026-08-17 MODA-ARVORE: arvore de categorias com 3+ niveis (Moda > Infantil > Roupas > Jaquetas) */
.dt-nav__sub-item--group > .dt-nav__sub-link{ font-weight:800; color:#0F3D9C; }
.dt-nav__sub3{ list-style:none; margin:0 0 6px; padding:0 0 0 12px; }
.dt-nav__sub3-link{ display:block; padding:4px 10px; font-size:12.5px; color:#334155; border-radius:8px; text-decoration:none; }
.dt-nav__sub3-link:hover{ background:#EEF3FF; color:#1E5FD8; }

/* 2026-08-19 MEGA-MAIS v2 (CASCATA DE COLUNAS estilo Finder/Miller): o painel
   "Mais" NUNCA estoura a tela. Coluna 1 = departamentos; ao passar o mouse num
   item com filhos abre a PRÓXIMA coluna (à ESQUERDA, pois "Mais" fica na direita
   da barra) com os filhos, e assim até a folha. Só o caminho em foco aparece.
   Altura travada na viewport; cada coluna rola por dentro (overflow-y:auto).
   Mecânica anti-recorte: o "frame" de cada coluna é POSICIONADO e SEM overflow
   (não recorta a coluna filha), enquanto a lista interna (.dt-mc__col) é ESTÁTICA
   e rola. Assim uma coluna que rola não corta a coluna seguinte. */
/* Especificidade alta + !important pra vencer a base (.dt-nav__sub min-width/padding)
   e ZERAR o padding do wrapper — era esse padding-left de 8px que criava o vão
   entre a coluna 1 e a coluna 2 e quebrava o hover. */
.dt-nav__item--more > .dt-mc{
    left:auto; right:0;                 /* ancora sob o "Mais"; cascata cresce p/ esquerda */
    width:214px !important; min-width:0 !important; max-width:214px !important;
    padding:0 !important; box-sizing:border-box;
    height:min(440px, calc(100vh - 240px));
    background:transparent; border:0; box-shadow:none; overflow:visible;
}
/* Abertura por JS (hover-intent com delay); mantem :hover como fallback sem JS. */
.dt-nav__item--more.dt-mc-open > .dt-mc{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.dt-mc__col{
    list-style:none; margin:0; padding:6px;
    width:214px; height:100%;
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    background:#fff; border:1px solid #E2E8F0; border-radius:10px;
    box-shadow:0 14px 36px -14px rgba(15,42,102,.30), 0 2px 6px -3px rgba(15,42,102,.18);
}
.dt-mc__branch{ position:static; }      /* NAO posicionado: o colframe ancora no frame/pai */
.dt-mc__colframe{
    position:absolute; top:0; bottom:0; right:100%;
    width:214px; z-index:1;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease, visibility .15s;
}
.dt-mc__branch.is-open > .dt-mc__colframe,
.dt-mc__branch:hover > .dt-mc__colframe,
.dt-mc__branch:focus-within > .dt-mc__colframe{ opacity:1; visibility:visible; pointer-events:auto; }
.dt-mc__link{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:7px;
    font-size:12.5px; font-weight:600; color:#334155; text-decoration:none;
}
.dt-mc__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-mc__link:hover,
.dt-mc__link:focus-visible,
.dt-mc__branch.is-open > .dt-mc__link,
.dt-mc__branch:hover > .dt-mc__link{ background:#EEF3FF; color:#1E5FD8; }
.dt-mc__link--branch{ color:#0F3D9C; font-weight:700; }
.dt-mc__chev{ flex:0 0 auto; color:#94A3B8; }
.dt-mc__branch.is-open > .dt-mc__link .dt-mc__chev,
.dt-mc__branch:hover > .dt-mc__link .dt-mc__chev{ color:#1E5FD8; }
.dt-mc__link--all{ font-weight:800; color:#0F3D9C; }
.dt-mc__all{ border-bottom:1px solid #E2E8F0; margin:0 4px 4px; padding-bottom:2px; }
.dt-mc__all .dt-mc__link--all{ padding-left:6px; padding-right:6px; }
@media (max-width:1280px){
    .dt-mc, .dt-mc__col, .dt-mc__colframe{ width:190px; }
}
@media (max-width:1040px){
    .dt-mc, .dt-mc__col, .dt-mc__colframe{ width:172px; }
    .dt-mc__link{ font-size:12px; padding:7px 9px; }
}
.dt-drawer__sub3{ list-style:none; margin:0 0 4px; padding:0 0 0 14px; }
.dt-drawer__sub3link{ display:block; padding:6px 10px; font-size:14px; color:#475569; text-decoration:none; }
.ttd-cat-subs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.ttd-cat-sub{ display:inline-block; padding:8px 14px; border-radius:999px; background:#fff; border:1.5px solid #CBD5E1; color:#0F3D9C; font-weight:800; font-size:13px; text-decoration:none; }
.ttd-cat-sub:hover{ border-color:#1E5FD8; background:#EEF3FF; color:#1E5FD8; }
.ttd-cat-hero.has-image .ttd-cat-sub{ background:rgba(255,255,255,.92); }

/* 2026-08-19 NAV-CATEGORIA: troca de subcategoria na propria pagina (irmas +
   atual destacada + subir de nivel). Chips roláveis no mobile. */
.ttd-cat-nav--siblings{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:14px 0 6px; }
.ttd-cat-nav__up{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; font-weight:800; font-size:13px; color:#0F3D9C; text-decoration:none; padding:8px 13px 8px 10px; border-radius:999px; background:#EEF3FF; border:1.5px solid transparent; }
.ttd-cat-nav__up:hover{ background:#E0EAFF; color:#1E5FD8; }
.ttd-cat-nav__up svg{ width:15px; height:15px; flex:0 0 auto; }
.ttd-cat-nav__chips{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.ttd-cat-sub--current{ background:#1E5FD8; border-color:#1E5FD8; color:#fff; cursor:default; }
.ttd-cat-sub--current:hover{ background:#1E5FD8; border-color:#1E5FD8; color:#fff; }
.ttd-cat-hero.has-image .ttd-cat-sub--current{ background:#1E5FD8; color:#fff; }
.ttd-cat-subs__label{ align-self:center; margin-right:2px; font-weight:700; font-size:12.5px; color:#64748B; }
.ttd-cat-hero.has-image .ttd-cat-subs__label{ color:#E8EEFF; }
.ttd-cat-hero.has-image .ttd-cat-nav__up{ background:rgba(255,255,255,.92); }
@media (max-width:768px){
    .ttd-cat-nav__chips, .ttd-cat-subs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
    .ttd-cat-nav__chips::-webkit-scrollbar, .ttd-cat-subs::-webkit-scrollbar{ display:none; }
    .ttd-cat-nav__chips .ttd-cat-sub, .ttd-cat-subs .ttd-cat-sub{ flex:0 0 auto; white-space:nowrap; }
}

/* ==== CB Lightbox (2026-08-21): visualizador proprio da galeria do produto.
   O tema tinha data-fancybox mas a pagina nao carrega o Fancybox -> a foto
   abria e nao fechava. Ver static/js/cb-lightbox.js. ==================== */
html.cb-lb-open, html.cb-lb-open body { overflow: hidden; }
.cb-lb {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center;
  background: rgba(11, 17, 25, .92);
  padding: 56px 12px; -webkit-tap-highlight-color: transparent;
}
.cb-lb.is-open { display: flex; }
.cb-lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
.cb-lb__img {
  max-width: min(1100px, 94vw); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.cb-lb__close {
  position: absolute; top: 14px; right: 16px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cb-lb__close:hover, .cb-lb__close:focus-visible { background: rgba(255,255,255,.28); }
.cb-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 62px; border: 0; border-radius: 10px; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,.12); color: #fff; font-size: 22px;
}
.cb-lb__nav:hover { background: rgba(255,255,255,.24); }
.cb-lb__prev { left: 10px; }
.cb-lb__next { right: 10px; }
.cb-lb__count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; letter-spacing: .04em;
  background: rgba(0,0,0,.4); border-radius: 20px; padding: 5px 14px;
}
@media (max-width: 720px) {
  .cb-lb { padding: 64px 6px; }
  .cb-lb__img { max-height: 78vh; }
  .cb-lb__nav { width: 40px; height: 54px; }
}