/* R36 — ficha de produto sem faixa cinza, rolagem estável e logos clicáveis */

/* Modal de produto ocupa a tela inteira: sem espaço/faixa cinza externa. */
#detailModal,
#detailModal.open{
  inset:0!important;
  padding:0!important;
  margin:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  background:#fff!important;
}
#detailModal.open .modal-card,
#detailModal .modal-card{
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

/* VOLTAR e X ficam no topo da ficha, enquanto o conteúdo rola normalmente. */
#detailModal .close-row{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:80!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:14px clamp(18px,3vw,52px)!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #ece7e1!important;
  box-shadow:0 4px 16px rgba(45,33,23,.05)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
#detailModal #detailBack,
#detailModal #detailClose{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
}

/* Conteúdo respira abaixo do cabeçalho e usa a largura inteira disponível. */
#detailModal #detailBody{
  width:min(1600px,100%)!important;
  max-width:1600px!important;
  margin:0 auto!important;
  padding:22px clamp(18px,3vw,52px) 64px!important;
}
#detailModal .detail{
  min-height:0!important;
  align-items:start!important;
}

/* No desktop, a imagem permanece ancorada enquanto as informações da direita rolam. */
@media(min-width:901px){
  #detailModal .r30-detail>div:first-child{
    position:sticky!important;
    top:84px!important;
    align-self:start!important;
  }
  #detailModal .r30-gallery{
    margin-top:0!important;
  }
}
@media(max-width:900px){
  #detailModal .r30-detail>div:first-child{
    position:static!important;
    top:auto!important;
  }
}

/* Evita que estilos antigos criem novamente um espaço superior no modal. */
body:has(#detailModal.open) .top{z-index:50!important}
#detailModal.open{padding-top:0!important}
#detailModal.open .modal-card{max-height:100dvh!important}

/* Logos do topo e do admin são ações claras de retorno ao início. */
.brand,
.gg-enhanced-brand,
.r22-admin-brand,
.r34-admin-brand{
  cursor:pointer!important;
  user-select:none;
}
.brand:focus-visible,
.gg-enhanced-brand:focus-visible,
.r22-admin-brand:focus-visible,
.r34-admin-brand:focus-visible{
  outline:2px solid #c99a1c!important;
  outline-offset:4px!important;
  border-radius:10px!important;
}

/* Tema escuro mantém o cabeçalho da ficha coerente. */
body.dark #detailModal,
body.dark #detailModal.open,
body.dark #detailModal .modal-card{
  background:#11100f!important;
}
body.dark #detailModal .close-row{
  background:rgba(17,16,15,.98)!important;
  border-bottom-color:#3b332b!important;
  box-shadow:0 4px 16px rgba(0,0,0,.24)!important;
}