/** Shopify CDN: Minification failed

Line 1070:32 Expected ":"
Line 1159:3 Unexpected "/"
Line 1566:0 Unexpected "@media"
Line 1644:0 Unexpected "@media"
Line 1777:0 Expected "}" to go with "{"

**/
@media screen and (min-width: 1025px) {
  .dropdown-menu .subchildmenu > li.menu-link.level-1{
    --tw-translate-x: 20%;
    --transform-logical: 1;
    opacity: 0;
    transform: translate(calc(var(--tw-translate-x)* var(--transform-logical)));
    transition: transform 1s cubic-bezier(.075,.82,.165,1), opacity 1s cubic-bezier(.19,1,.22,1);
    transition-delay: .2s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1{
    --tw-translate-x: 0;
    opacity: 1;
    transition-delay: .25s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:first-child{
    transition-delay: .3s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(2){
    transition-delay: .35s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(3){
    transition-delay: .4s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(4){
    transition-delay: .45s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(5){
    transition-delay: .5s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(6){
    transition-delay: .55s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(7){
    transition-delay: .6s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(8){
    transition-delay: .65s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(9){
    transition-delay: 0.7s;
  }
  .dropdown-menu.visible .subchildmenu > li.menu-link.level-1:nth-child(10){
    transition-delay: 0.8s;
  }

  .mega-menu  .col-mega .grid > *,
  .mega-menu .subchildmenu > li.menu-link.level-1{
    --translate-y: 0;
    --translate-x: 20%;
    opacity: 0;
    transform: translate(var(--translate-x), var(--translate-y));
    transition: transform 1.5s cubic-bezier(.075,.82,.165,1), opacity .9s cubic-bezier(.19,1,.22,1);
    transition-delay: .3s;
  }
  .mega-menu.visible  .col-mega .grid > *{
    --translate-x: 0;
    opacity: 1;
    transition-delay: .3s;
  }
  .mega-menu.visible .subchildmenu > li.menu-link{
    --translate-x: 0;
    opacity: 1;
  }
  .mega-menu.visible .subchildmenu > li.menu-link:first-child{
    transition-delay: .4s;
  }
  .mega-menu.visible .subchildmenu > li.menu-link:nth-child(2){
    transition-delay: .5s;
  }
  .mega-menu.visible .subchildmenu > li.menu-link:nth-child(3){
    transition-delay: .6s;
  }
  .mega-menu.visible .subchildmenu > li.menu-link:nth-child(4){
    transition-delay: .7s;
  }
  .mega-menu.visible .subchildmenu > li.menu-link:nth-child(5){
    transition-delay: .8s;
  }
  .mega-menu.visible  .col-mega .grid > *:first-child{
    transition-delay: .6s;
  }
  .mega-menu.visible  .col-mega .grid > *:nth-child(2){
    transition-delay: 0.7s;
  }
  .mega-menu.visible  .fluid_container .col-mega .grid > *:first-child{
    transition-delay: .8s;
  }

}
@media screen and (min-width: 1024.98px) {
  .submenu{
    transform: translateY(-105%);
  }
  
}

@media screen and (max-width: 1024.98px) {
  .nav-open .navigation.mobile {
    transform: translate(0);
    opacity: 1;
    visibility: visible;
  }
  .mega-menu .subchildmenu > li.menu-link{
     opacity: 1;
  }
  .navigation.mobile {
    background: var(--color-background);
    --menu-mobile-width: 43rem;
    --show-overlay-bg: rgba(255, 255, 255, 0.9);
    width: 100%;
    max-width: var(--menu-mobile-width);
    overflow: hidden;
    transform: translateX(-101%);
    transition: var(--transition-popup);
    z-index: 12;
  }
  .navigation.mobile open-children-toggle {
    color: var(--color-heading);
  }
  .menu-mobile-title a {
    color: var(--color-heading);
    opacity: 0.6;
  }
  .menu-mobile-title a.active {
    opacity: 1;
  }
  .navigation__menu-content {
    height: 100%;
    flex: 1;
    overflow-y: auto;
  }
  .submenu,
  .sub-children-menu {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: var(--menu-mobile-width);
    transform: translateX(100%) !important;
    z-index: 12;
    transition:  var(--transition-popup);
  }
  .is-open + .submenu,
  .is-open + .sub-children-menu {
    transform: translate(0) !important;
    visibility: visible !important;
  }
  .submenu .grid-cols {
    --col-desktop: 1 !important;
  }
  .subchildmenu {
    --col-gap: 0 !important;
  }
  :is(.subchildmenu, .sub-children-menu ul, .horizontal-list) {
    max-height: 100%;
    overflow: auto;
  }
  .touch-target-mb {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  :where(.lang__currency-on-nav, .lang__currency-desktop) .disclosure__list {
    bottom: -3rem;
    padding: 2.5rem 3rem;
    border-radius: var(--rounded-radius) var(--rounded-radius) 0 0;
    position: fixed;
    z-index: 15;
    box-shadow: var(--shadow);
  }
  :where(.lang__currency-on-nav, .lang__currency-desktop) .disclosure__list ul {
    max-height: 50vh;
  }
  .lang__currency-on-nav {
    padding-block: 1rem;
  }
  .lang__currency-on-nav .button-localization {
    padding: 0.5rem 3rem;
  }
  :where(.lang__currency-on-nav, .lang__currency-desktop)
    .button-localization.open
    + .disclosure__list {
    bottom: 0;
    opacity: 1;
    visibility: visible;
  }
  :where(.lang__currency-on-nav, .lang__currency-desktop)
    .disclosure__list
    [aria-current="true"] {
    font-weight: var(--heading-weight);
  }
  :is(.horizontal-list, .categories-list) {
    animation: 0.5s fadeIn;
  }
  .menu_label {
    right: -10px;
  }
  .menu_label:after {
    top: 0;
    bottom: 0;
    left: 0;
    right: 1;
    transform: translateX(-95%);
    -webkit-transform: translateX(-95%);
    border-right-color: var(--menu-label-bg);
    margin: auto;
    border-top-color: transparent;
  }
  .submenu :is(.stretch_width, .fluid_container, .full_width, .container) {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .horizontal-list menu-item.px-15{
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  .navigation {
    --shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
  }
  .mega-menu .submenu {
    max-height: 80vh;
    overflow-y: auto;
  }
  /* .animation-down-to-up :is(.submenu, .dropdown-menu .sub-children-menu) {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
  } */
  .animation-fade-in :is(.submenu, .dropdown-menu .sub-children-menu) {
    transform: translateY(calc(var(--section-pb) * 1px));
    -webkit-transform: translateY(calc(var(--section-pb) * 1px));
  }
  :is(.submenu, .dropdown-menu .sub-children-menu) {
    pointer-events: none;
    box-shadow: var(--shadow);
    border-radius: 0 0 var(--rounded-radius, 0) var(--rounded-radius, 0);
    opacity: 1;
  }

  .dropdown-menu .level-1:hover > .sub-children-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .menu-parent.visible .submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .horizontal-list .level0 > menu-item > a:after {
    content: '';
    position: absolute;
    display: block;
    left: -1px;
    bottom: 12px;
    width: calc(100% + 1px);
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 0;
    transition: transform  .5s cubic-bezier(.3, 1, .3, 1);
  }
  .header__layout-2 .horizontal-list .level0 > menu-item > a:after{
    bottom: 17px;
  }
  .header__layout-2 .min-h-1025-50{
    min-height: 60px;
  }
  .header__layout-2 .menu_label{
    top: 4px;
  }
  .footer__block-info a,
  .newsletter-note a,
  .terms-conditions label a,
  .reversed-links {
    --transform-origin-start: right;
    --transform-origin-end: left;
    --animation-default: .5s cubic-bezier(.3, 1, .3, 1);
    --reversed-link-gap: .1rem;
    background: linear-gradient(to var(--transform-origin-end), currentColor, currentColor) 0 var(--reversed-link-gap) / 0 var(--reversed-link-gap) no-repeat;
    background-position-x: var(--transform-origin-end);
    background-position-y: bottom;
    transition: background-size var(--animation-default);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .content-overview-block.active .reversed-links,
  .footer__block-info a:hover,
  .newsletter-note a:hover,
  .terms-conditions label a:hover,
  .reversed-links:hover {
      background-position-x: var(--transform-origin-start);
      background-size: 100% var(--reversed-link-gap);
      background-position-y: bottom;
  }
}
  .horizontal-list .level0 > menu-item > a:hover:after{
    transform: scaleX(1);
    transform-origin: 0 100%;
  }
  .level0 > menu-item open-children-toggle {
    transition: var(--transition);
  }
  .level0:hover > menu-item > a,
  .level0:hover > menu-item open-children-toggle {
    color: var(--color-link-hover);
  }
  .dropdown-menu .sub-children-menu {
    right: 100%;
    top: -1rem;
  }
  .dropdown-menu .level-1 open-children-toggle {
    position: relative;
  }
  :is(.dropdown-menu .submenu, .dropdown-menu .sub-children-menu) {
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 26rem;
    
  }
  .dropdown-menu .sub-children-menu{
    opacity: 0;
    transform: translateY(20px);
  }
  :is(.dropdown-menu .menu-link) {
    position: relative;
  }
  .dropdown-menu .menu-link:hover open-children-toggle {
    color: var(--color-primary);
  }
  :is(.dropdown-menu .menu_item-link) {
    padding-left: 3rem;
    padding-right: 3rem;
    position: relative;
  }

  .menu-list {
    flex: 0 0 auto;
    width: calc(100% - var(--col-mega-width) - var(--col-gap) * 0.5);
  }
  .col-mega {
    flex: 0 0 auto;
    width: calc(var(--col-mega-width) - var(--col-gap) * 0.5);
  }
  .mega-menu-custom-width {
    width: var(--mega_custom_width);
    max-width: 90vw;
  }
  .submenu .collection-info .bg-white {
    width: 90%;
    max-width: 17rem;
  }
  .submenu .menu_label {
    position: static;
    margin-inline-start: 1rem;
    padding: 3px 8px 2px 8px;
  }
  
  .submenu .menu_label::after {
    display: none;
  }
  .mega-menu .level-1 menu-item > .menu_item-link {
    padding-top: 0;
  }
}
.menu-parent.mega-menu .level-1 > menu-item {
  font-size: calc(var(--body-font-size) + 1px);
}
.submenu .collection-info .bg-white{
  border: 0;
}
.submenu .collection-info .bg-white:hover{
  color: #fff !important;
}

/* .header__action,
.horizontal-list .level0 menu-item{
  position: relative;
  z-index: 2;
} */
/* ===========================
   Mega menu — apenas cards
   =========================== */
.navigation.horizontal .mega-menu .menu-list{
  display: none !important;
}
.navigation.horizontal .mega-menu .col-mega{
  width: 100% !important;
  max-width: none !important;
}

/* ---------------------------
   Grid centralizado e fixo
   (ultima linha fica no meio)
   --------------------------- */
:root{
  --mm-card-w: 130px;   /* largura do card (ajuste se quiser) */
  --mm-gap-x: 24px;
  --mm-gap-y: 4px;
}



.navigation.horizontal .mega-menu .grid.grid-cols{
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--mm-card-w), var(--mm-card-w))
  ) !important;                 /* ignora col-number do tema */
  gap: var(--mm-gap-y) var(--mm-gap-x) !important;
  justify-content: center !important;  /* centra a última linha */
}



/* garante que cada item respeite a largura fixa */
.navigation.horizontal .mega-menu .menu-collection{
  width: var(--mm-card-w) !important;
}

/* mídia ocupa 100% da largura do card */
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  display: block !important;
  width: 100% !important;
}

/* ---------------------------
   Texto ABAIXO da imagem
   --------------------------- */


/* remove a “pílula” e deixa só o texto */
.navigation.horizontal .mega-menu .menu-collection .collection-info .btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  display: inline-block !important;   /* largura só do texto */
  color: #111 !important;
  font-weight: 620 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  pointer-events: none !important;    /* clique fica na imagem (opcional) */
  white-space: normal !important;
}


/* ---------------------------
   Responsividade (opcional)
   --------------------------- */
/* deixar o grid adensável */




/* permite ao grid “reencaixar” itens quando há span */
.navigation.horizontal .mega-menu .grid.grid-cols{
  grid-auto-flow: dense !important;
}

/* 1ª coleção com classe especial = ocupa 2 colunas */
.navigation.horizontal .mega-menu .menu-collection--wide{
  grid-column: span 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
}

/* o bloco da imagem precisa largar junto */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  display: block !important;
  width: 100% !important;
  max-width: none !important;      /* remove limite padrão do tema */
  --aspect-ratio: 2 !important;    /* retangular (mude p/ 2.5, 3, etc. se quiser) */
}

/* imagem preenchendo toda a largura do card */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;               /* use 'contain' se não quiser corte */
}


/* 1) Nada de transições/animations no submenu e filhos */
.navigation.horizontal .submenu,
.navigation.horizontal .submenu * {
  transition: none !important;
  animation: none !important;
}

/* 2) As classes de animação do tema (ex.: animation-fade/zoom/slide) viram NOOP */
.navigation.horizontal [class*="animation-"] {
  transition: none !important;
  animation: none !important;
}

/* 3) Efeitos de hover nos cards/imagens do mega menu */
.navigation.horizontal .menu-collection,
.navigation.horizontal .menu-collection .banner__media,
.navigation.horizontal .menu-collection .banner__media img {
  transform: none !important;
  transition: none !important;
}

/* 4) Ícones/setinhas do toggle sem animação/rotação */
.navigation.horizontal open-children-toggle,
.navigation.horizontal open-children-toggle * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
/* —— DROPDOWN sem animação no hover —— */

/* 1) Remove qualquer transition/animation do submenu e do estado :hover */
.navigation.horizontal .menu-parent > .submenu,
.navigation.horizontal .menu-parent:hover > .submenu,
.navigation.horizontal .menu-parent:focus-within > .submenu,
.navigation.horizontal .dropdown-menu > .submenu,
.navigation.horizontal .dropdown-menu:hover > .submenu {
  transition: none !important;
  animation: none !important;
  transform: none !important;   /* evita “descer” com translate */
  margin-top: 0 !important;     /* alguns temas usam margin-top pra animar */
}

/* 2) Garante que a base do submenu também não tenha transitions */
.navigation.horizontal .submenu,
.navigation.horizontal .submenu * {
  transition: none !important;
  animation: none !important;
}

/* 3) Alguns temas aplicam classes de efeito no hover: neutraliza tudo */
.navigation.horizontal .submenu[class*="fade"],
.navigation.horizontal .submenu[class*="slide"],
.navigation.horizontal .submenu[class*="zoom"],
.navigation.horizontal [class*="animation-"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* 4) Se houver “hover-effect” no wrapper, corta também */
.navigation.horizontal .hover-effect,
.navigation.horizontal .hover-effect * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
/* —— MATA o delay/transition ao FECHAR o dropdown —— */
.navigation.horizontal li.menu-parent > .submenu,
.navigation.horizontal li.menu-parent:hover > .submenu,
.navigation.horizontal li.menu-parent:focus-within > .submenu,
.navigation.horizontal li.menu-parent:not(:hover) > .submenu {
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* Alguns temas colocam transition nos wrappers também — corta tudo no item raiz */
.navigation.horizontal li.menu-parent,
.navigation.horizontal li.menu-parent * {
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}
/* 1) Mata QUALQUER transição/animação do submenu (abrir/fechar) */
.navigation.horizontal li.menu-parent > .submenu,
.navigation.horizontal li.menu-parent:hover > .submenu,
.navigation.horizontal li.menu-parent:focus-within > .submenu,
.navigation.horizontal li.menu-parent:not(:hover) > .submenu {
  transition: none !important;
  transition-property: none !important;
  transition-delay: 0s !important;
  animation: none !important;
  animation-delay: 0s !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* 2) Garante comportamento instantâneo de visibilidade, sem “fade” */
.navigation.horizontal li.menu-parent > .submenu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.navigation.horizontal li.menu-parent:hover > .submenu,
.navigation.horizontal li.menu-parent:focus-within > .submenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3) Neutraliza regras do tema que usam classes utilitárias de animação */
.navigation.horizontal [class*="animation-"],
.navigation.horizontal [class*="anim-"],
.navigation.horizontal .submenu,
.navigation.horizontal .submenu * {
  animation: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}
/* === Submenu: abrir/fechar instantâneo e conteúdo já visível === */
@media (min-width: 1025px) 
{
  
  /* Esconde/mostra pelo display (sem fade) */
  .navigation.horizontal li.menu-parent > .submenu {
    display: none !important;
    opacity: 1 !important;        /* garante sem fade */
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .navigation.horizontal li.menu-parent:hover > .submenu,
  .navigation.horizontal li.menu-parent:focus-within > .submenu {
    display: block !important;
  }

  /* Mata QUALQUER delay/efeito nos filhos (grid, itens, textos, imagens) */
  .navigation.horizontal li.menu-parent > .submenu *,
  .navigation.horizontal li.menu-parent > .submenu {
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Se o tema usa variáveis de tempo, zera também */
  .navigation.horizontal {
    --dropdown-delay: 0s !important;
    --dropdown-duration: 0s !important;
    --animation-delay: 0s !important;
  }
}
/* Links de 1º nível do menu topo */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a,
.navigation.horizontal .horizontal-list > li.level0 > a{
  transition: none !important;
  /* muitos temas fazem o underline com background */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px; /* sem underline por padrão */
}

/* no hover mostra de uma vez (sem transition) */
.navigation.horizontal .horizontal-list > li.level0:hover > menu-item > a,
.navigation.horizontal .horizontal-list > li.level0:hover > a{
  background-size: 100% 2px !important;
}

/* se o tema usa pseudo-elemento para o traço, desliga animação */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::before,
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::after,
.navigation.horizontal .horizontal-list > li.level0 > a::before,
.navigation.horizontal .horizontal-list > li.level0 > a::after{
  transition: none !important;
  transform: none !important;
}
/* ===== Underline estático (sem animação de entrada) ===== */

/* links de 1º nível */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a,
.navigation.horizontal .horizontal-list > li.level0 > a{
  /* mata qualquer transição/efeito do tema */
  transition: none !important;
  background: none !important;          /* desliga underline via background animado */
  text-decoration: none !important;

  /* nosso underline estável */
  border-bottom: 2px solid transparent; /* reserva espaço… */
  padding-bottom: 2px;                  /* …e evita “pulo” no layout */
}

/* no hover: mostra o underline instantaneamente */
.navigation.horizontal .horizontal-list > li.level0:hover > menu-item > a,
.navigation.horizontal .horizontal-list > li.level0:hover > a{
  border-bottom-color: currentColor !important;
}

/* se o tema usa pseudo-elementos pro traço, desligamos a animação deles */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::before,
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::after,
.navigation.horizontal .horizontal-list > li.level0 > a::before,
.navigation.horizontal .horizontal-list > li.level0 > a::after{
  content: none !important;
  transition: none !important;
  transform: none !important;
}
/* ===== Sem underline nos itens do menu ===== */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a,
.navigation.horizontal .horizontal-list > li.level0 > a,
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a:hover,
.navigation.horizontal .horizontal-list > li.level0 > a:hover,
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a:focus,
.navigation.horizontal .horizontal-list > li.level0 > a:focus {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;          /* caso o tema use bg como “underline” */
  transition: none !important;          /* sem animações */
}

/* mata qualquer traço via pseudo-elementos */
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::before,
.navigation.horizontal .horizontal-list > li.level0 > menu-item > a::after,
.navigation.horizontal .horizontal-list > li.level0 > a::before,
.navigation.horizontal .horizontal-list > li.level0 > a::after {
  content: none !important;
  transition: none !important;
}
/* MOBILE: hero (1ª coleção) ocupando a largura toda + duas colunas abaixo */
@media (max-width: 1025px) {
  /* força grid de 2 colunas no container dos cards e centraliza */
  .navigation.horizontal .mega-menu .col-mega .grid.grid-cols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    justify-content: center !important;
    justify-items: center !important;
  }




  /* (se ainda aparecer a coluna de links no mobile) esconde ela */
  .navigation.horizontal.mobile .mega-menu .menu-list{
    display: none !important;
  }






  .navigation.horizontal.mobile .mega-menu .menu-collection .collection-info .btn{
    color: #111 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }






}
/* — ABRIR O MEGA-MENU POR PADRÃO NO MOBILE — */
@media (max-width: 1025px){
  /* 1) Força o submenu a ficar visível e estático */
  .navigation.horizontal.mobile li.menu-parent.mega-menu > .submenu{
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;
    background: transparent !important; /* evita ‘fade/branco’ antes de aparecer */
    box-shadow: none !important;
    padding-top: 0 !important;
  }

  /* 2) Some com a seta de abrir/fechar no mobile */
  .navigation.horizontal.mobile li.menu-parent > menu-item open-children-toggle{
    display: none !important;
  }

  /* 3) Evita qualquer atraso/transition */
  .navigation.horizontal.mobile .submenu,
  .navigation.horizontal.mobile .submenu *{
    transition: none !important;
    animation: none !important;
  }
}
/* ====== MOBILE VERTICAL MENU (submenu aberto + sem bullets/anim) ====== */
@media (max-width: 1025px){

  /* 1) Remove bullet/indent do nível 0 */
  .vertical-menu .verticalmenu-list,
  .vertical-menu .verticalmenu-list > li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .vertical-menu .verticalmenu-list > li.level0::marker { content: none !important; }
  .vertical-menu .verticalmenu-list > li.level0::before { content: none !important; }

  /* 2) Submenus SEMPRE abertos no mobile */
  .navigation.vertical .menu-parent > .submenu{
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 3) some com o header/voltar/fechar e com o toggle */
  .navigation.vertical .submenu .submenu-mobile-title,
  .navigation.vertical .submenu back-menu,
  .navigation.vertical .submenu close-menu,
  .navigation.vertical .open-children-toggle{
    display: none !important;
  }

  /* 4) zera qualquer animação/delay */
  .navigation.vertical [class*="animation-"],
  .navigation.vertical .submenu,
  .navigation.vertical .submenu *{
    transition: none !important;
    animation: none !important;
  }

  /* 5) esconde a lista textual do submenu; deixa só os cards */
  .navigation.vertical .submenu .menu-list{
    display: none !important;
  }




  /* 7) grid bonitinho e centrado; 1ª coleção full width */
  .navigation.vertical .custom-menu-column .row-as-column-gap{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    gap: 24px !important;
    justify-items: center !important;
  }
}
/* MOBILE: tira a barra interna (voltar/fechar) do submenu */
@media (max-width: 1025px){
  /* some com a faixa branca de título dentro do submenu */
  .navigation.horizontal.mobile .submenu > .hidden-1025{
    display: none !important;
  }
  .navigation.horizontal.mobile .submenu back-menu,
  .navigation.horizontal.mobile .submenu close-menu{
    display: none !important;
  }

  /* remove qualquer “bullet” e recuo à esquerda */
  .navigation.horizontal.mobile .horizontal-list,
  .navigation.horizontal.mobile .horizontal-list li{
    list-style: none !important;
  }
  .navigation.horizontal.mobile .horizontal-list{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* garante que não fique espaçamento fantasma no topo do submenu */
  .navigation.horizontal.mobile .submenu{
    padding-top: 0 !important;
  }
}
/* MOBILE: remove completamente o bullet do item do menu */
@media (max-width: 1025px){
  /* tira o estilo de lista do UL e dos LIs */
  .navigation.horizontal.mobile .horizontal-list,
  .navigation.horizontal.mobile .horizontal-list > li{
    list-style: none !important;
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* alguns temas desenham o bullet como pseudo-elemento */
  .navigation.horizontal.mobile .horizontal-list > li::marker,
  .navigation.horizontal.mobile .horizontal-list > li::before{
    content: '' !important;
    display: none !important;
  }

  /* em certos temas o ponto vem em .level0 */
  .navigation.horizontal.mobile .horizontal-list > li.level0::before{
    content: '' !important;
    display: none !important;
  }
}
/* MOBILE — transformar o submenu em parte do fluxo (nada de overlay) */
@media (max-width:1025px){

  /* 1) Submenu sempre visível e estático, ocupando 100% do painel */
  .navigation.horizontal.mobile .level0.menu-parent > .submenu{
    position: static !important;      /* sai do absolute */
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    height: auto !important;
    padding-top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 2) tira a barrinha interna (back/close) e qq header dentro do submenu */
  .navigation.horizontal.mobile .submenu > .hidden-1025,
  .navigation.horizontal.mobile .submenu back-menu,
  .navigation.horizontal.mobile .submenu close-menu{
    display: none !important;
  }

  /* 3) zera indentação/offset do UL e dos LI do nível 0 */
  .navigation.horizontal.mobile .horizontal-list{
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .navigation.horizontal.mobile .horizontal-list > li{
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .navigation.horizontal.mobile .horizontal-list > li::marker,
  .navigation.horizontal.mobile .horizontal-list > li::before,
  .navigation.horizontal.mobile .horizontal-list > li.level0::before{
    content: none !important;
    display: none !important;
  }

  /* 4) alguns temas dão padding lateral só no submenu; zera pra alinhar */
  .navigation.horizontal.mobile .submenu .px-30{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5) garante que o container interno do submenu centralize corretamente */
  .navigation.horizontal.mobile .submenu .full-width,
  .navigation.horizontal.mobile .submenu .mega-menu-fix-width,
  .navigation.horizontal.mobile .submenu .container,
  .navigation.horizontal.mobile .submenu .fluid_container,
  .navigation.horizontal.mobile .submenu .stretch_width{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* MOBILE — menu VERTICAL (off-canvas) */
@media (max-width:1025px){

  /* 1) tira bullet e recuo do item pai */
  .vertical-menu .verticalmenu-list,
  .vertical-menu .verticalmenu-list > li{
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .vertical-menu .verticalmenu-list > li.level0 > a{
    padding-left: 0 !important;
  }

  /* 2) submenu estático e sempre visível, ocupando 100% */
  .vertical-menu .level0 > .submenu{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    height: auto !important;
    padding-top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 3) esconde a barra interna (voltar/fechar) do submenu */
  .vertical-menu .submenu > .hidden-1025,
  .vertical-menu .submenu back-menu,
  .vertical-menu .submenu close-menu{
    display: none !important;
  }

  /* 4) zera paddings internos pra alinhar com o título */
  .vertical-menu .submenu .px-30,
  .vertical-menu .submenu .px-1025-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5) garante que o container do submenu use a largura total */
  .vertical-menu .submenu .full-width,
  .vertical-menu .submenu .mega-menu-fix-width,
  .vertical-menu .submenu .container{
    width: 100% !important;
    margin: 0 auto !important;
  }
}



/* MOBILE — vertical menu: remove bullet e recuo do item pai */
@media (max-width:1025px){

  /* tira qualquer marker nativo e zera recuos */
  .vertical-menu .verticalmenu-list,
  .vertical-menu .verticalmenu-list > li{
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* o tema desenha a bolinha via ::before — apaga */
  .vertical-menu .verticalmenu-list > li.level0::before,
  .vertical-menu .verticalmenu-list > li::before,
  .vertical-menu .verticalmenu-list > li::marker{
    content: none !important;
    display: none !important;
  }

  /* alguns temas deixam espaço para o bullet no link */
  .vertical-menu .verticalmenu-list > li.level0 > a{
    padding-left: 20px !important;
    text-indent: 0 !important;
  }

  /* garante alinhamento do bloco do submenu com o título */
  .vertical-menu .level0 > .submenu{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
}



/* MOBILE – remove o bullet do menu horizontal (overlay) */
@media (max-width:1025px){
  /* zera bullets e recuos do UL do overlay */
  .navigation.horizontal .navigation__menu-content > ul{
    list-style: none !important;
    padding-left: 0 !important;a
    margin-left: 0 !important;
  }

  /* cada item pai (li.level0) vira block em vez de list-item */
  .navigation.horizontal .navigation__menu-content > ul > li.level0{
    display: block !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* mata o marcador nativo e qualquer pseudo-marker */
  .navigation.horizontal .navigation__menu-content > ul > li.level0::marker,
  .navigation.horizontal .navigation__menu-content > ul > li.level0::before{
    content: none !important;
    display: none !important;
  }
}
/* MOBILE – gutters iguais nas laterais do submenu */
@media (max-width: 1025px){
  /* lateral igual p/ tudo que está dentro do submenu */
  .navigation.horizontal.mobile .submenu{
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* já tínhamos tirado o top */
    padding-top: 0 !important;
  }

  /* se o tema injeta paddings extras em wrappers internos, anulamos */
  .navigation.horizontal.mobile .submenu .px-30,
  .navigation.horizontal.mobile .submenu .px-1025-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* o primeiro card (Collection 1) ocupa 100% dentro do gutter */
  .navigation.horizontal.mobile .submenu .menu-collection--wide{
    margin: 0 0 12px 0;      /* só espaçamento embaixo, laterais já vêm do submenu */
    width: 100% !important;  /* garante 100% dentro do gutter */
  }

  /* garante que a imagem/link não estoure */
  .navigation.horizontal.mobile .submenu .menu-collection--wide .banner__media{
    display: block;
    width: 100%;
  }
}
/* ========== MOBILE – MEGA MENU EM 2 COLUNAS COM RESPIRO LATERAL ========== */
@media (max-width: 1025px){

  /* respiro nas laterais do submenu (esquerda/direita) */
  .navigation.horizontal.mobile .submenu{
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 24px !important;
  }

  /* força a grade interna a ser 2 colunas com gap */
  .navigation.horizontal.mobile .submenu .grid.grid-cols,
  .navigation.horizontal.mobile .submenu .row-as-column-gap{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 colunas */
    column-gap: 16px !important;  /* gap horizontal entre os quadrados */
    row-gap: 2px !important;     /* gap vertical entre as linhas */
    justify-content: center !important;
    align-items: start !important;
  }

  /* cada card ocupa 100% da célula da grade */
  .navigation.horizontal.mobile .submenu .menu-collection{
    width: 100% !important;
  }




  /* o PRIMEIRO card (herói) ocupa a linha inteira (full-width) */
  .navigation.horizontal.mobile .submenu .menu-collection--wide{
    grid-column: 1 / -1 !important;
    margin-bottom: 18px !important;   /* espaço entre o herói e a grade 2×2 */
  }

  /* se quiser o herói com proporção diferente (tipo banner), descomente: */
  /* 
  .navigation.horizontal.mobile .submenu .menu-collection--wide .banner__media,
  .navigation.horizontal.mobile .submenu .menu-collection:first-child .banner__media{
    aspect-ratio: 16 / 9 !important;   /* ou 2 / 1 */
  } 
  */
}
/* —— MOBILE: transformar slide lateral em DROP-DOWN —— */
@media (max-width: 1025px){

  /* 1) Estado "fechado": fica acima do topo (pronto para descer) */
  .navigation.horizontal.mobile{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* neutraliza qualquer slide lateral preexistente */
    transform: translateY(-100%) !important;
    transition: transform .28s ease !important;

    /* evita delays por opacidade/visibilidade do tema */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 2) Estado "aberto": desce (dropdown) */
  /* cobre várias classes comuns que o tema pode usar ao abrir */
  body.menu-open .navigation.horizontal.mobile,
  body.nav-open .navigation.horizontal.mobile,
  body.drawer-open .navigation.horizontal.mobile,
  .navigation.horizontal.mobile.menu-open,
  .navigation.horizontal.mobile.active,
  .navigation.horizontal.mobile.open {
    transform: translateY(0) !important;
  }

  /* 3) Mata regras que empurram da direita/esquerda (se existirem) */
  .navigation.horizontal.mobile[style*="translateX"]{
    transform: translateY(-100%) !important;
  }
  /* alguns temas posicionam o drawer à direita; neutraliza */
  .navigation.horizontal.mobile{
    right: auto !important;
  }

  /* (opcional) evita fade-in atrasado no conteúdo interno */
  .navigation.horizontal.mobile .navigation__menu-content{
    opacity: 1 !important;
    transition: none !important;
  }
}
/* MOBILE: trocar slide lateral por DROP-DOWN (de cima p/ baixo) */
@media screen and (max-width: 1024.98px){
  /* estado FECHADO: escondido acima do topo */
  .navigation.mobile,
  .navigation.horizontal.mobile{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    transform: translateY(-100%) !important;
    transition: transform .36s ease !important;

    /* evita “delay” por fade do tema */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* estado ABERTO: desce (dropdown) */
  .nav-open .navigation.mobile,
  .nav-open .navigation.horizontal.mobile{
    transform: translateY(0) !important;
  }

  /* se algum inline/style ainda empurrar lateral, neutraliza */
  .navigation.mobile[style*="translateX"],
  .navigation.horizontal.mobile[style*="translateX"]{
    transform: translateY(-100%) !important;
  }

  /* evita fade atrasado no conteúdo interno */
  .navigation.mobile .navigation__menu-content,
  .navigation.horizontal.mobile .navigation__menu-content{
    opacity: 1 !important;
    transition: none !important;
  }
}
/* — Espaço entre imagem e título: igual para todos — */
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  margin-bottom: 0 !important;        /* zera qualquer margem do tema */
}



/* 1) mata o espaço fantasma abaixo da imagem */
.navigation.horizontal .mega-menu .menu-collection .banner__media img{
  display: block !important;            /* sai do fluxo inline */
  vertical-align: bottom !important;    /* redundância segura */
}
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  line-height: 0 !important;            /* zera a linha do wrapper */
  margin-bottom: 0 !important;          /* garante sem margem extra */
}


/* 3) garante o mesmo comportamento no 1º card (wide/“VER TUDO”) */
.navigation.horizontal .mega-menu .menu-collection--wide,
.navigation.horizontal .mega-menu .grid.grid-cols > .menu-collection:first-child{
  padding-bottom: 0 !important;
}

/* Só o 1º card (wide/“Ver tudo”): zera qualquer espaço e faz a imagem cobrir o wrapper */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  padding: 0 !important;
  margin-bottom: 0 !important;   /* remove gap extra antes do título */
  line-height: 0 !important;     /* mata o espaço de baseline de imagens inline */
  overflow: hidden !important;    /* corta sobras */
}

.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  display: block !important;      /* evita o “gap” de img inline */
  width: 100% !important;
  height: 100% !important;        /* preenche o wrapper */
  object-fit: cover !important;   /* sem distorcer */
}


/* HERO (1º card) com mesma altura dos demais */
.navigation.horizontal .mega-menu .menu-collection--wide{
  grid-column: span 2 !important; /* já tinha, só reforço */
}

.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  /* altura = largura/2  ->  fica igual ao quadrado de 1 coluna */
  aspect-ratio: 2 / 1 !important;

  /* garante que nada “cresça” a caixa */
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* 1) "VER TUDO" ocupa 2 colunas */
.navigation.horizontal .mega-menu .menu-collection--wide{
  grid-column: span 2 !important;
}

/* 2) Força a altura do banner largo para 2:1 (mesma altura dos demais) */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  position: relative !important;
  /* zera qualquer altura mínima que o tema possa aplicar */
  height: auto !important;
  min-height: 0 !important;

  /* se o tema ler a variável, isso já resolve */
  --aspect-ratio: 2 !important;
}

/* se o tema usa padding-bottom via ::before, força 50% (2:1) */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media::before{
  content: "" !important;
  display: block !important;
  padding-bottom: 50% !important; /* 2:1 */
}

/* imagem preenchendo a área */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 3) distância do título igual aos demais */
.navigation.horizontal .mega-menu .menu-collection--wide .collection-info{
  margin-top: 10px !important; /* use o mesmo valor dos outros cards */
}
/* ====== DESKTOP: mesma altura para TODOS os cards ====== */
:root{ --mm-card-h: 130px; }   /* ajuste fino da altura aqui (160–220px, p.ex.) */



/* cada card usa exatamente a altura definida */
.navigation.horizontal .mega-menu .menu-collection{
  height: var(--mm-card-h) !important;
}

/* o bloco da imagem preenche 100% da célula (ignora aspect-ratio do tema) */
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  height: 100% !important;
  aspect-ratio: auto !important;     /* cancela --aspect-ratio injetado pelo tema */
}
.navigation.horizontal .mega-menu .menu-collection .banner__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* “VER TUDO”: ocupa 2 colunas, mas com a MESMA altura */
.navigation.horizontal .mega-menu .menu-collection--wide{
  grid-column: span 2 !important;
}

/* aproxima o texto da imagem (mesmo espaçamento em todos) */
.navigation.horizontal .mega-menu .menu-collection .collection-info{
  margin-top: 8px !important;  /* ajuste fino: 6–12px */
}
:root{
  --mm-card-h: 100px;   /* altura total do card (ajuste fino) */
  --mm-caption: 45px;   /* espaço reservado pro título */
}

/* deixa o card em coluna: imagem em cima, título embaixo */
.navigation.horizontal .mega-menu .menu-collection{
  height: var(--mm-card-h) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* a imagem ocupa (altura do card – altura do título) */
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  height: calc(var(--mm-card-h) - var(--mm-caption)) !important;
  width: 100% !important;
}
.navigation.horizontal .mega-menu .menu-collection .banner__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* texto embaixo, visível e sem “pill” */
.navigation.horizontal .mega-menu .menu-collection .collection-info{
  position: static !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}
.navigation.horizontal .mega-menu .menu-collection .collection-info .btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* ⇢ ajuste global p/ caber 2 linhas de título */
:root{
  /* altura total do card você já tem; só aumente o caption */
  --mm-card-h: 200px;  /* mantenha o valor que você já usa */
  --mm-caption: 60px;  /* 2 linhas (~14–16px * 1.25 * 2) + respiro */
}

/* o bloco do título precisa ter pelo menos essa altura */
.navigation.horizontal .mega-menu .menu-collection .collection-info{
  min-height: var(--mm-caption) !important;
  margin-top: 8px !important;
  text-align: center !important;
  display: block !important; /* ou flex se preferir centralizar vertical */
}

/* trave o título em até 2 linhas (fica padronizado) */
.navigation.horizontal .mega-menu .collection-info .btn,
.navigation.horizontal .mega-menu .collection-info span{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;   /* no máx. 2 linhas */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* a imagem continua ocupando: altura do card - altura do título */
.navigation.horizontal .mega-menu .menu-collection .banner__media{
  height: calc(var(--mm-card-h) - var(--mm-caption)) !important;
  width: 100% !important;
}
.navigation.horizontal .mega-menu .menu-collection .banner__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.grid grid-cols gap-20 px-30 px-1025-0 {
  align-items: center;
}
/* Raio padrão – ajuste aqui se quiser */
:root { --mm-radius: 6px; }

/* WIDE (“VER TUDO”): garante arredondamento em TODOS os cantos */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  position: relative !important;        /* cria contexto p/ clipping */
  overflow: hidden !important;          /* CORTA a imagem nos cantos */
}


/* a imagem preenche e herda o raio (garantia extra) */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* fallback extra para forçar o corte, caso algum style do tema “vaze” */
@supports (clip-path: inset(0 round 10px)) {
  .navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
    clip-path: inset(0 round var(--mm-radius)) !important;
  }
}
/* Teste: desliga o blur-up/lazy-blur do tema */
img.blur-up, img.lazyload, img.lazyloading {
  filter: none !important;
  -webkit-filter: none !important;
}
img.blur-up, img.lazyload, img.lazyloading { filter: none !important; }
/* VER TUDO — usa o mesmo 2:1 do wrapper, sem barras e sem aumentar gaps */
.navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
  height: auto !important;           /* cancela a regra global de altura fixa */
  aspect-ratio: 2 / 1 !important;    /* mantém o retângulo 2:1 */
  overflow: hidden !important;
  background: transparent !important;
}

.navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* com a imagem 2:1 não haverá corte */
  object-position: center center !important;
}
/* ========= MOBILE FIX ========= */
@media (max-width: 768px){
  /* 1) não herdar altura fixa do desktop no mobile */
  .navigation.horizontal .mega-menu .grid.grid-cols{
    grid-auto-rows: auto !important;
  }
  .navigation.horizontal .mega-menu .menu-collection{
    height: auto !important;
  }
  .navigation.horizontal .mega-menu .menu-collection .banner__media{
    height: auto !important;
  }

  /* 2) cards 1:1 continuam quadrados no mobile */
  .navigation.horizontal .mega-menu .menu-collection:not(.menu-collection--wide) .banner__media{
    aspect-ratio: 1 / 1 !important;
  }

  /* 3) VER TUDO (wide) – sem corte no celular */
  .navigation.horizontal .mega-menu .menu-collection--wide .banner__media{
    aspect-ratio: 16 / 9 !important;   /* mais alto que 2:1 para caber melhor no mobile */
    width: 100% !important;
    height: auto !important;
  }
  .navigation.horizontal .mega-menu .menu-collection--wide .banner__media img{
    object-fit: contain !important;    /* não corta a arte no mobile */
  }

  /* 4) título com altura menor e perto da imagem */
  .navigation.horizontal .mega-menu .menu-collection .collection-info{
    margin-top: 8px !important;
    min-height: 48px !important;       /* cabe até 2 linhas confortáveis */
  }
}
/* === MOBILE: encurtar o espaço abaixo do VER TUDO e entre as linhas === */
@media (max-width: 768px){

  /* 1) Menos espaço entre as linhas do grid */
  .navigation.horizontal.mobile .submenu .grid.grid-cols{
    row-gap: 2px !important;          /* era ~20px */
  }

  /* 2) Card largo (VER TUDO): tira/encurta o espaçamento extra */
  .navigation.horizontal.mobile .submenu .menu-collection--wide{
    margin-bottom: 6px !important;      /* use 0–10px conforme o gosto */
  }

  /* 3) Título: reserva menor + margens menores */
  .navigation.horizontal .mega-menu .menu-collection .collection-info{
    min-height: 32px !important;        /* antes 48–60px */
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* (opcional) só para o VER TUDO ainda mais compacto */
  .navigation.horizontal .mega-menu .menu-collection--wide .collection-info{
    min-height: 28px !important;
    margin-top: 6px !important;
  }
}
 @media (max-width:1025px){
  /* devolver o raio só para o card largo */
  .navigation.horizontal.mobile .mega-menu .menu-collection--wide .banner__media{
    position: relative !important;
    overflow: hidden !important;
  }
}



NAO TIRARARRRRRRR
/* MOBILE — devolver o raio no VER TUDO (cobre horizontal e vertical) */
@media (max-width:1025px){           .menu-collection--wide .banner__media{
    border-radius: var(--mm-radius) !important;  /* usa seu --mm-radius (6px) */
  }

}
/* MOBILE — força cantos arredondados no "VER TUDO" (wide) */
@media (max-width:1025px){


  /* a imagem/picture herda o raio e é recortada em iOS */
  .navigation.horizontal.mobile .submenu .menu-collection--wide > a.banner__media img{
    object-fit: cover !important;
  }
}





/* ==== MOBILE: cards menores + mais respiro nas laterais ==== */
@media (max-width: 768px){
  :root{
    --mm-mb-col: 150px;  /* LARGURA de cada card (tente 140–160) */
    --mm-mb-side: 26px;  /* respiro lateral do submenu */
    --mm-mb-gap-x: 14px; /* gap horizontal entre cards */
    --mm-mb-gap-y: 10px; /* gap vertical entre linhas */
  }

  /* mais distância das bordas do painel */
  .navigation.horizontal.mobile .submenu{
    padding-left: var(--mm-mb-side) !important;
    padding-right: var(--mm-mb-side) !important;
  }

  /* 2 colunas FIXAS e centralizadas (cards ficam menores) */
  .navigation.horizontal.mobile .submenu .grid.grid-cols{
    display: grid !important;
    grid-template-columns: repeat(2, var(--mm-mb-col)) !important;
    justify-content: center !important;     /* centra o conjunto de colunas */
    column-gap: var(--mm-mb-gap-x) !important;
    row-gap: var(--mm-mb-gap-y) !important;
  }

  /* cada card ocupa 100% da célula da grade */
  .navigation.horizontal.mobile .submenu .menu-collection{
    width: 100% !important;
  }

  /* “VER TUDO” continua ocupando 2 colunas e fica centrado */
  .navigation.horizontal.mobile .submenu .menu-collection--wide{
    grid-column: 1 / -1 !important;
    margin-bottom: 10px !important; /* ajuste fino do vão abaixo do banner */
  }

  /* (opcional) título um tiquinho menor */

/* ==== RESET do "1º card vira wide" e de qualquer inversão ==== */



.navigation.horizontal .mega-menu .grid.grid-cols > .menu-collection:nth-of-type(1) .banner__media,
.navigation.horizontal.mobile .mega-menu .grid.grid-cols > .menu-collection:nth-of-type(1) .banner__media{
  --aspect-ratio: 1 !important; /* volta a ser quadrado */
}


/* ==== FONTE DA VERDADE: só quem tem .menu-collection--wide é "wide" ==== */
.navigation .menu-collection--wide{
  grid-column: 1 / -1 !important;               /* ocupa a linha toda */
}
.navigation .menu-collection--wide .banner__media{
  --aspect-ratio: 2 / 1 !important;             /* retângulo (2:1) */
}



testes inciandoaaaaaaaaa
/* ===== MOBILE — só a 1ª coleção do 1º menu ocupa 2 colunas ===== */
@media (max-width:1025px){

  /* Base: força 2 colunas e gaps em QUALQUER grid do mega-menu */
  .navigation.horizontal li.level0.menu-parent .submenu .grid.grid-cols,
  .navigation.horizontal li.level0.menu-parent .submenu .grid--mobile-2,
  .navigation.horizontal li.level0.menu-parent .submenu .row-as-column-gap{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
  }

  /* Reset: por padrão, ninguém é "wide" */
  .navigation.horizontal li.level0.menu-parent .submenu .grid.grid-cols .menu-collection--wide,
  .navigation.horizontal li.level0.menu-parent .submenu .grid--mobile-2  .menu-collection--wide,
  .navigation.horizontal li.level0.menu-parent .submenu .row-as-column-gap .menu-collection--wide{
    grid-column: auto !important;
  }

  /* Alvo: SOMENTE o 1º menu do topo (ex.: ARMARINHO) fica "wide" */
  .navigation.horizontal li.level0.menu-parent:first-child
  .submenu .grid.grid-cols .menu-collection--wide,
  .navigation.horizontal li.level0.menu-parent:first-child
  .submenu .grid--mobile-2 .menu-collection--wide,
  .navigation.horizontal li.level0.menu-parent:first-child
  .submenu .row-as-column-gap .menu-collection--wide{
    grid-column: 1 / -1 !important;
  }

  /* Formato: retangular 2:1 só no herói do 1º menu */
  .navigation.horizontal li.level0.menu-parent:first-child
  .submenu .menu-collection--wide .banner__media{
    --aspect-ratio: 2 / 1 !important;
  }

  /* Os demais cards seguem quadrados 1:1 */
  .navigation.horizontal li.level0.menu-parent
  .submenu .menu-collection:not(.menu-collection--wide) .banner__media{
    --aspect-ratio: 1 !important;
  }
}
/* Mobile: encurtar o vão entre um menu e outro */
@media (max-width:1025px){
  /* 1) menos espaço no fim de cada submenu */
  .navigation.horizontal.mobile .submenu{
    padding-bottom: 3px !important;   /* era 24px */
  }

  /* 2) o card "wide" (VER TUDO) com menos margem inferior */
  .navigation.horizontal.mobile .submenu .menu-collection--wide{
    margin-bottom: 8px !important;    /* ajuste fino */
  }

  /* 3) (opcional) um pouco menos de gap entre linhas do grid */
  .navigation.horizontal.mobile .submenu .grid.grid-cols{
    row-gap: 8px !important;          /* ajuste se quiser mais/menos */
  }
}
/* MOBILE – remover a linha padrão que aparece entre os blocos */
@media (max-width: 1025px){
  /* alguns temas colocam a linha nesta faixa interna */
  .navigation.horizontal.mobile .submenu .px-30{
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

/* MOBILE – cria um divisor acima do título (não no primeiro) */
@media (max-width: 1025px){
  .navigation.horizontal.mobile .submenu .heading-style{
    position: relative;
    padding-top: 12px;                 /* espaço para a linha */
  }

  /* aplica a linha só a partir do 2º título */
  .navigation.horizontal.mobile .submenu .heading-style:not(:first-of-type)::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: #e9e9e9;               /* ajuste a cor se quiser */
  }
}
/* MOBILE — aumentar só o texto dos itens de 1º nível ("ARMARINHO", etc.) */
@media (max-width: 1025px){

  /* alvo direto: o <a> que tem as classes do inspetor */
  .navigation.horizontal.mobile a.heading-style.redirect-to-link{
    font-size: 8px !important;   /* ajuste: 19px (+3) ou 20px (+4) */
    line-height: 1.3 !important;
    font-weight: 600;             /* opcional, igual ao que você já usa */
  }

  /* fallback caso o tema envolva em <menu-item> */
  .navigation.horizontal.mobile menu-item > a.heading-style{
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* fallback “bruto” usando o wrapper que você viu (não afeta submenu) */
  .navigation.horizontal.mobile
  .relative.static-1025.flex.justify-between.align-center.header-color.px-15 > a{
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}
/* — Tira de vez a “pílula” do rótulo abaixo da imagem — */
.navigation :is(.mega-menu, .submenu) .menu-collection .collection-info {
  background: transparent !important;
}

/* o elemento que vira “pill” vem com .btn, .bg-white, .rounded, etc.  */
.navigation :is(.mega-menu, .submenu) .menu-collection .collection-info
  :is(.btn, .bg-white, .button) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  display: inline-block !important;
}

/* garante que não haja pseudo-elementos desenhando a cápsula */
.navigation :is(.mega-menu, .submenu) .menu-collection .collection-info
  :is(.btn, .button)::before,
.navigation :is(.mega-menu, .submenu) .menu-collection .collection-info
  :is(.btn, .button)::after {
  content: none !important;
}