/* R39 — rolagem estável em notebook/desktop e iPhone/mobile + cabeçalho por categoria */

/* Desktop/notebook: a página inteira rola normalmente. */
@media(min-width:821px){
  html,body{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    height:auto!important;
    max-height:none!important;
  }
  body.r27-browse-mode #publicApp,
  body.r27-browse-mode #catalogo,
  body.r27-browse-mode #ggCatalogBrowse,
  body.r27-browse-mode .r27-results,
  body.r27-browse-mode .r27-results .grid{
    overflow:visible!important;
    height:auto!important;
    max-height:none!important;
  }
}

/* iPhone/mobile: um único scroller vertical, o #publicApp.
   Isso evita a disputa entre body/window/Safari que travava o gesto. */
@media(max-width:820px){
  html{
    height:100%!important;
    overflow:hidden!important;
  }
  body.r27-browse-mode{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    position:relative!important;
    touch-action:auto!important;
  }
  body.r27-browse-mode #publicApp{
    display:block!important;
    height:calc(100dvh - var(--r27-header-h,68px))!important;
    max-height:calc(100dvh - var(--r27-header-h,68px))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    position:relative!important;
    padding-top:0!important;
  }
  body.r27-browse-mode #publicApp>.wrap{
    min-height:auto!important;
    overflow:visible!important;
  }
  body.r27-browse-mode #catalogo,
  body.r27-browse-mode #ggCatalogBrowse,
  body.r27-browse-mode .r27-results,
  body.r27-browse-mode .r27-results .grid{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    position:relative!important;
    touch-action:pan-y!important;
  }
  /* trilhos horizontais aceitam gesto vertical também */
  .r27-chip-scroll,.r29-category-shell,#r27CategoryChips{
    touch-action:pan-x pan-y!important;
    scroll-behavior:auto!important;
  }
  #ggCatalogBrowse{padding-bottom:120px!important}
}

/* A área superior do catálogo acompanha a identidade da categoria. */
#ggCatalogBrowse{
  --r39-cat-bg:linear-gradient(105deg,#faf7f1,#fff);
  --r39-cat-border:#e7dfd5;
}
#ggCatalogBrowse .r27-browse-hero{
  margin:0 calc(-1 * clamp(18px,3vw,58px)) 14px!important;
  padding:28px clamp(18px,3vw,58px) 20px!important;
  background:var(--r39-cat-bg)!important;
  border-bottom:1px solid var(--r39-cat-border)!important;
}
#ggCatalogBrowse[data-r39-category="PERFUMARIA"]{
  --r39-cat-bg:linear-gradient(105deg,#f8e6ed 0%,#fff7fa 65%,#fff 100%);
  --r39-cat-border:#e3c2cd;
}
#ggCatalogBrowse[data-r39-category="SKINCARE"]{
  --r39-cat-bg:linear-gradient(105deg,#e7f0ea 0%,#f7fbf8 65%,#fff 100%);
  --r39-cat-border:#bfd1c5;
}
#ggCatalogBrowse[data-r39-category="HAIR & BEAUTY"]{
  --r39-cat-bg:linear-gradient(105deg,#f5e4ea 0%,#fcf4f7 65%,#fff 100%);
  --r39-cat-border:#ddbdc8;
}
#ggCatalogBrowse[data-r39-category="TECNOLOGIA"]{
  --r39-cat-bg:linear-gradient(105deg,#e7edf4 0%,#f5f8fa 65%,#fff 100%);
  --r39-cat-border:#bdcad7;
}
#ggCatalogBrowse[data-r39-category="CASA INTELIGENTE"]{
  --r39-cat-bg:linear-gradient(105deg,#edf0e3 0%,#fafbf6 65%,#fff 100%);
  --r39-cat-border:#ccd2b8;
}
#ggCatalogBrowse[data-r39-category="IMAGEM & CONTEÚDO"]{
  --r39-cat-bg:linear-gradient(105deg,#f3e8e1 0%,#fbf6f2 65%,#fff 100%);
  --r39-cat-border:#dac1b5;
}
#ggCatalogBrowse[data-r39-category="GAMES"]{
  --r39-cat-bg:linear-gradient(105deg,#ece7f1 0%,#f8f6fa 65%,#fff 100%);
  --r39-cat-border:#cbbfd3;
}
#ggCatalogBrowse[data-r39-category="ÁUDIO & FONES"]{
  --r39-cat-bg:linear-gradient(105deg,#e6efef 0%,#f5fafa 65%,#fff 100%);
  --r39-cat-border:#bdd0d0;
}
#ggCatalogBrowse[data-r39-category="INFORMÁTICA"]{
  --r39-cat-bg:linear-gradient(105deg,#eceff1 0%,#f8f9fa 65%,#fff 100%);
  --r39-cat-border:#c8ced2;
}
#ggCatalogBrowse[data-r39-category="PERFUMARIA"][data-r39-profile="Feminino"]{
  --r39-cat-bg:linear-gradient(105deg,#f6dce6 0%,#fff2f7 65%,#fff 100%);
  --r39-cat-border:#dfafc0;
}
#ggCatalogBrowse[data-r39-category="PERFUMARIA"][data-r39-profile="Masculino"]{
  --r39-cat-bg:linear-gradient(105deg,#e1eaf2 0%,#f2f7fa 65%,#fff 100%);
  --r39-cat-border:#b8cbd8;
}