/* ============================================================================
   VITRINE MADRI - FRONTEND CUSTOM CSS
   Versao otimizada aprofundada: v1.2 - 2026-08-15
   Base validada em producao: v1.1.

   Revisao: escopo de header, responsividade da ordenacao, transicoes especificas,
   animacoes sem layout, breakpoint desktop coerente e estabilidade mobile/CLS.
   A Montserrat remota e os !important dependentes da plataforma foram mantidos
   quando a remocao nao podia ser comprovada como segura.
============================================================================ */

/* -----------------------------------------------------------------------------
   FONTE
----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* -----------------------------------------------------------------------------
   VARIÁVEIS / ROOT
----------------------------------------------------------------------------- */
:root {
  --checkout-color-default: #0587ff !important;
  --checkout-color-green: #1B7A45 !important;
  --vm-brand-blue: #2685d3;
  --vm-brand-pink: #ff72b9;
  --vm-font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* -----------------------------------------------------------------------------
   RESETS / BASE
----------------------------------------------------------------------------- */
.container { background-color: rgba(0, 0, 0, 0) !important; }
header { background-color: #fff; }


/* -----------------------------------------------------------------------------
   BOTÕES (GENÉRICOS)
----------------------------------------------------------------------------- */
.button.button.button-primary { background: #1b1b1b; border-color: #1b1b1b; }
.button.button.button-primary:hover { background: #333333; border-color: #333333; }
 /* newsletter ajuste */

.button.button.button-success { background: #2685d3; border-color: #2685d3; color: #fff; box-shadow: 0 0 23px 0 rgb(0 0 0 / 18%); transition: background-color .1s linear, border-color .1s linear, box-shadow .1s linear; }
.button.button.button-success:hover { background: #FF72B9; border-color: #FF72B9; color: #fff; }


.button-base.button-outline:hover { background: #FF72B9; box-shadow: #0000001a 0 5px 10px !important; }

/* -----------------------------------------------------------------------------
   SWEETALERT / TOASTS
----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   NEWSLETTER (WIDGET 2)
----------------------------------------------------------------------------- */
.widget-newsletter-2 { padding: 25px 0 !important; margin-top: 20px; background: #2685D3 !important; }


.widget-newsletter-2 .news-area .field-email input {
  height: 35px !important; width: 260px; border-radius: 3px !important; padding: 8px 10px;
  font-size: 15px !important;
  transition: box-shadow .1s linear;
}

.widget-newsletter-2 .news-area button {
  height: 35px !important; min-width: 80px !important; border-radius: 5px !important;
  background: #2685d3 !important; border: 1px solid rgba(255,255,255,.2); font-size: 13px !important;
  transition: background-color .3s ease-in-out; align-items: center; margin-bottom: 8px;
}


/* -----------------------------------------------------------------------------
   AVALIAÇÕES (PÁGINA / FORM)
----------------------------------------------------------------------------- */

#main-area .page-avaliacao { background: #FFFFFF !important; font-family: var(--vm-font-family) !important; }

#main-area .button-avaliacao,
#main-area .button-avaliacao:hover {
  width: 200px; padding: 10px 18px; gap: 6px; color: #fff; border-radius: 8px; border: 0;
  transition: background-color .2s ease; font-weight: bold !important;
}
#main-area .button-avaliacao { background: #0086d7 !important; }


#form-avaliacao .submit button:hover { background: #ff72b9 !important; color: #fff; font-weight: bold !important; }


/* -----------------------------------------------------------------------------
   PÁGINA DE PESQUISA (ESTRUTURA)
----------------------------------------------------------------------------- */
.descricao-pesquisa .container { max-width: 1420px !important; }
.descricao-pesquisa .conteudo-adicional-topo { height: auto !important; border-bottom: 0; }
#main-area .container.conteudo-adicional { margin-bottom: 0; }


#main-area .descricao-pesquisa > .container { padding: 0; margin-bottom: 18px; }
.descricao-pesquisa h1 { display: none; }

.search-page.container { padding: 0 !important; }
#search-area .pesquisa-produtos { max-width: 1420px; margin: 0 auto; }
.brand-filtros a { cursor: pointer; }


.pesquisa-produtos.is-tablet-mobile .ordenacao { margin: 10px; }

.pesquisa-produtos.is-tablet-mobile .ordenacao .info-filtro .filtro-avancado { border-radius: 7px; margin-top: -4px; background: #373737; }

/* Barra/filtros */

#search-area .filtros .filtro-container .label_check { align-items: center; font-size: 13px; }
#search-area .filtros .filtro-container .label_check .filtro-pretty-check {
  min-width: 28px !important; min-height: 28px !important; overflow: hidden; border: 1px solid #ccc !important;
  margin: 0 5px 0 0 !important; border-radius: 4px !important;
}
#search-area .filtros .filtro-container a:hover .filtro-pretty-check { background: transparent !important; border-color: #000 !important; }
#search-area .filtros .filtro-container.filtro-tamanho .label_check .cardesc { position: absolute; width: 28px; text-align: center; font-size: 13px; }
#search-area .filtros .filtro-preco-container button#filtrar-preco { border-radius: 5px; }
#search-area .filtros .filtros-selecionados p .count { border-radius: 100%; font-weight: bold; }

/* Página de pesquisa com tema cupom */
.pesquisa-cupom-page,
.pesquisa-cupom-page .area-breadcrumb,
.pesquisa-cupom-page .breadcrumb-area { background: #000; }
.pesquisa-cupom-page div#search-area { background: #fff; }
.pesquisa-cupom-page .area-breadcrumb .breadcrumb,
.pesquisa-cupom-page .breadcrumb-area .breadcrumb,
.pesquisa-cupom-page .area-breadcrumb .breadcrumb a,
.pesquisa-cupom-page .breadcrumb-area .breadcrumb a { color: #fff; }

body.device-desktop .pesquisa-produtos ul.product-list li { border: 0; margin: 12px 15px; }

/* -----------------------------------------------------------------------------
   VITRINE / LISTAGEM DE PRODUTOS
----------------------------------------------------------------------------- */
ul.product-list li:hover a figure > img { opacity: 1; }

.tipo-vitrine-11 { padding: 15px 0 0; display: flex; flex-direction: column; max-width: 290px; margin: 0 auto; }
.tipo-vitrine-11 .product-name,
.pesquisa-produtos ul.product-list .product-name,
.ra-vitrine .tipo-vitrine-11 .product-name {
  font-size: 13px !important; text-transform: uppercase; color: #000; font-weight: 600; margin: 0 20px;
  line-height: 18px; min-height: 36px; max-height: 36px; display: flex; justify-content: center;
}
.pesquisa-produtos ul.product-list .product-name,
.pesquisa-produtos .ra-vitrine ul.product-list .product-name { margin-bottom: 0 !important; }

.tipo-vitrine-11 .rating, .ra-vitrine .tipo-vitrine-11 .rating { margin-top: 3px; display: flex; align-items: center; justify-content: center; order: 1; }
.tipo-vitrine-11 .rating .qtd-aval { display: initial; font-size: 12px; padding-left: 2px; }
.tipo-vitrine-11 .detalhes-valor-produto, .ra-vitrine .tipo-vitrine-11 .detalhes-valor-produto { order: 3; }
.tipo-vitrine-11 .price-content, .ra-vitrine .tipo-vitrine-11 .price-content { margin-top: 3px; }
.tipo-vitrine-11 .price-content .price-content-items .preco-de { color: #777; font-size: 11px; }
.tipo-vitrine-11 .price-content .price-content-items .price-big { font-weight: 800; color: #5e9941; font-size: 15px; padding: 0 8px; }

ul.product-list li .derivacoes-hover .deriva.tamanho {
  font-size: 12px; margin: 2px; margin-top: 2px; box-shadow: 0 0 0 1px #ddd; line-height: 80%;
  background: #fff; border: 0; border-radius: 0; font-weight: bold; display: inline-grid;
  width: 32px; height: 32px; align-items: center; justify-content: center;
}
ul.product-list li .derivacoes-hover .deriva.out-of-stock .icon-out-stock {
  top: -5px; left: 19px; background: #fff; border-radius: 50%; display: flex;
  width: 15px; height: 15px; justify-content: center; align-items: center;
}
/* Regra inválida removida: display:center era ignorado pelo navegador. */
ul.product-list li .derivacoes-hover .deriva.deriva-adicional { display: inline-grid !important; }

/* -----------------------------------------------------------------------------
   PÁGINA DE PRODUTO
----------------------------------------------------------------------------- */
.variacao-area.variacao-tipo-box .variacao-lista ul li { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
.variacao-area.variacao-tipo-box .variacao-lista ul li .variacao-img { width: 36px; height: 36px; }
.variacao-area.variacao-tipo-box .variacao-lista ul li.out-of-stock .icon { top: -7px; }
.variacao-area.variacao-tipo-box .variacao-lista ul li.selected,
.variacao-area.variacao-tipo-box .variacao-lista ul li:hover { box-shadow: 0 0 0 2px #252525; font-weight: bold; }

.tag-area .tag-produto .tag-value { font-weight: bold; padding: 2px 4px; font-size: 10px; line-height: 12px; text-align: center; border-radius: 6px; }

/* Frete / CEP */
.calculo-frete .label-frete .cep-label { font-size: 13px; color: #000; font-weight: 300; }
.calculo-frete .area-calculo .cep-field { padding: 10px 15px; margin: 0 5px 0 0; font-size: 13px; }
.calculo-frete .area-calculo .btn-calcula-frete { font-size: 14px; font-weight: 600; }
.calculo-frete .icon-truck { display: flex; align-items: center; justify-content: center; }
.calculo-frete .icon-truck svg { height: 24px; width: 24px; }
.calculo-frete .icon-truck svg path { fill: #999999 !important; }

/* -----------------------------------------------------------------------------
   POPUPS / LGPD
----------------------------------------------------------------------------- */
.mensagem-pop-up { border-radius: 10px; }
.mensagem-pop-up .title .text { font-size: 20px; text-align: center; display: block; }
.mensagem-pop-up .title .close { background: #2685d3; transition: background-color .1s linear, box-shadow .1s linear; box-shadow: 0 0 23px 0 rgb(0 0 0 / 18%); }
.mensagem-pop-up .title .close:hover { background: #FF72B9; box-shadow: 0 0 23px 0 rgb(0 0 0 / 18%); }

.informativo-lgpd { border-radius: 10px; }
.informativo-lgpd .botao-continuar-fechar { border-radius: 6px; }

/* Popup “adicionado ao carrinho” */
.swal2-popup.swal2-modal.popup-adicionado-ao-carrinho button.botao-finalizar-compra { background-color: #2685d3 !important; transition: background-color .1s linear; }
.swal2-popup.swal2-modal.popup-adicionado-ao-carrinho button.botao-finalizar-compra:hover { background-color: #ff72b9 !important; }
.swal2-popup.swal2-modal.popup-adicionado-ao-carrinho .titulo-adicionado-ao-carrinho { color: #2685d3 !important; }
.swal2-popup.swal2-modal.popup-adicionado-ao-carrinho .icone-adicionado-ao-carrinho { background: #2685d3 !important; }

/* Botões genéricos de popup */
.button-ok,
.mensagem-pop-up:not(.popup-forma-pagto-multiplos) .footer .button:nth-child(1) { background: #ff72b9; border-color: #ff72b9; font-weight: bold; }
.button-ok,
.mensagem-pop-up:not(.popup-forma-pagto-multiplos) .footer .button:nth-child(1):hover { background: #d25e98; border-color: #d25e98; font-weight: bold; }
.button-cancel,
.mensagem-pop-up:not(.popup-forma-pagto-multiplos) .footer .button:nth-child(2) { background: #2685d3; border-color: #2685d3; font-weight: bold; }
.button-cancel,
.mensagem-pop-up:not(.popup-forma-pagto-multiplos) .footer .button:nth-child(2):hover { background: #257ec6; border-color: #257ec6; font-weight: bold; }


/* -----------------------------------------------------------------------------
   ESTADOS / MENSAGENS / TOAST CUSTOM
----------------------------------------------------------------------------- */
/* Versão base (mantida por histórico; sobrescrita abaixo) */
.pesquisa-sem-registros {
  width: 100%; border: 1px solid #3a97d2; text-align: center; border-radius: 2px;
  font-size: .875em; margin: 20px 0; color: #ffffff; padding: 10px; font-family: var(--vm-font-family);
}
/* Override visual final */
.pesquisa-sem-registros {
  width: 100%; border: 2px solid #3a97d2; text-align: center; border-radius: 2px; background: #3a97d2;
  font-size: .875em; margin: 20px 0; box-shadow: 0 7px 12px 5px #00001114; font-weight: bold; color: #ffffff; padding: 10px;
}

.toast-error {
  position: relative; margin: 0 auto; padding: 5px 15px; border: 1px #a80400 solid; background: #c61e1b;
  box-shadow: 5px 5px 10px 2px #0000001f; color: #fff; font-weight: bold; border-radius: 7px;
}

/* -----------------------------------------------------------------------------
   ÍCONES / BUSCA / HEADER (GERAL)
----------------------------------------------------------------------------- */
.search-area input[type="search"] { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
.search-area { border-radius: 8px !important; }
.search-area button { width: 50px; height: 40px; margin-left: 1px; transition: background-color linear .2s; border-bottom-right-radius: 7px !important; border-top-right-radius: 7px !important; }
.search-area button:hover { background: #ddd; }
.search-area button svg,
.search-area button img { display: none; }
.search-area button:after {
  background: url('https://magazord-public.s3.amazonaws.com/vitrinemadri/img/2024/07/derivacao/13501/search.svg') no-repeat center center !important;
  width: 20px; height: 20px; content: '';
}

.login-cadastro .icon-user svg { display: none; width: 0; height: 0; }
.login-cadastro .icon-user {
  background: url('https://magazord-public.s3.amazonaws.com/vitrinemadri/img/2024/07/derivacao/13500/user-vm.svg') no-repeat center center !important;
  width: 29px; height: 29px;
}

.icon-user img.lazyload-svg.lazyloaded { display: none; }

/* -----------------------------------------------------------------------------
   MENU MOBILE
----------------------------------------------------------------------------- */
.menu-mobile-ctn .info-user { height: 74px; padding: 30px; }
.menu-mobile-ctn .info-user .text-usuario { color: var(--color-white); font-size: 18px; font-weight: bold; }
.menu-mobile-ctn .info-user .text-usuario-link { font-size: 15px; }
#menu-mobile li a { color: #000; font-size: 15px; font-weight: bold; padding: 14px !important; }
#menu-mobile > li > a { display: block; padding: 8px !important; }
#menu-mobile li .menu-icon { padding: 19px; width: 46px; }
#menu-mobile li .menu-level-2 > .has-childs > a { padding: 7px 10px; font-size: 14px; }
#menu-mobile li.has-childs .menu-icon:after { width: 9px; height: 9px; border-right: 2.5px solid #000 !important; border-bottom: 2.5px solid #000 !important; }

/* -----------------------------------------------------------------------------
   FORMULÁRIOS / LOGIN / CADASTRO / CONSULTA PEDIDO
----------------------------------------------------------------------------- */
.consultar-pedido.v3 form .line.submit .button-login { background-color: #2685d3; }
.consultar-pedido.v3 form .line.submit .button-login:hover { background-color: #ff72b9; }

#register-form .button-login { background-color: #2685d3; }
#register-form .button-login:hover { background-color: #fd72b7; }

.holder-input .button-send { background: #2685d3; box-shadow: 3px 7px 10px 1px #0000001c; }
.holder-input .button-send:hover { background: #ff72b9; box-shadow: 3px 7px 10px 1px #0000001c; }

.window-wrapper .window-ctn .logged-ctn { border-radius: 9px; margin-bottom: 7px; }
.window-wrapper .window-ctn .logged-ctn button {
  border-radius: 5px !important; background: #2685d3 !important; border-color: #2685d3 !important;
  transition: background-color .1s linear, border-color .1s linear, box-shadow .1s linear;
}
.window-wrapper .window-ctn .logged-ctn button:hover {
  background: #ff72b9 !important; border-color: #ff72b9 !important; box-shadow: 0 0 4px rgba(0,0,0,.2);
}

/* -----------------------------------------------------------------------------
   CARRINHO / CHECKOUT
----------------------------------------------------------------------------- */
.header-checkout.is-tablet-mobile { padding: 7px; }
.header-checkout .container { min-height: 87px; }

#cart-area .cart-item { border-radius: 10px; }
#cart-area .cart-item .box-cart-item { padding: 10px; }
#cart-area .column-cart { font-weight: bold; }
#cart-area .column-valor-produto .valor { font-size: 16px !important; }
#cart-area .column-valor-produto .sub-valor { font-size: 15px; }
#cart-area .column-quantidade .qnt { font-size: 15px; }
#cart-area .column-quantidade .cart-button-qtde .qtd-item { font-size: 14.5px; }
/* Declaração morta removida: font-size:12px nunca vencia o 16px !important. */
#cart-area .cart-button-qtde { width: 93px; height: 32px; }
#cart-area .cart-button-qtde input { text-align: center; font-size: 13px; }
#cart-area .cart-button-qtde button, #cart-area .cart-button-qtde input { font-size: 13px; }

#resumo-compra .conteudo-resumo { border-radius: 14px; }
#resumo-compra .frete-calculado .mais-opcoes,
#resumo-compra .frete-calculado .info-frete-selec { font-weight: bold !important; }
#resumo-compra .frete-calculado .info-frete-selec { color: #565656 !important; }
#resumo-compra .proxima-etapa button:hover { background: #1B603A; border-color: #1B603A; }

.resumo-valores .label-content { font-weight: bold; }
.valor-total-pagar .formas-pag-link { font-size: 13px; }
.area-frete .frete-location a, .valor-total-pagar .formas-pag-link { font-weight: bold; }

.forma-pagto-area .payment-content .submit .button-success { background: #2685d3 !important; transition: background-color .1s linear; }
.forma-pagto-area .payment-content .submit .button-success:hover { background: #ff72b9 !important; }

.opcoes-entrega-area .checkout-box { width: 98%; margin-left: 3px; }

.falta-x-frete { font-weight: bold; }
.falta-x-frete .barra-porcentagem { height: 18px; background: #e2e2e2; margin-top: 10px; }
.falta-x-frete .barra-porcentagem .percentual { height: 18px; background: #2685d3; }

/* -----------------------------------------------------------------------------
   COMPONENTES EXTRAS (Topo/Whats/Popups Filtro)
----------------------------------------------------------------------------- */
.back-to-top { border-radius: 124px; }
.back-to-top .icon { margin: 13px auto; margin-left: 12.6px; }

#popup-msg-whats {
  background: #4BC95B; box-shadow: 0 1px 12px rgb(0 0 0 / 15%);
  transition: background-color .1s linear, box-shadow .1s linear; margin-left: 10px; margin-bottom: 10px;
}
#popup-msg-whats:hover { background: #3aa346; box-shadow: 0 1px 12px rgb(0 0 0 / 15%); }

.popup-filtro-avancado { margin-top: 80px; border-radius: 10px; }


/* -----------------------------------------------------------------------------
   PÁGINA VAZIA (CARRINHO)
----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   LGPD / DIVERSOS
----------------------------------------------------------------------------- */
.header-bottom { background: #ffffff; box-shadow: 0 4px 5px rgba(0,0,0,.1); }
.mensagem-compra-segura .icon-shield { margin-right: 5px !important; margin-left: -3px !important; margin-top: -1px; }
.footer-middle { padding: 29px 0; }
.footer-middle h3.section-title { font-weight: bold !important; }
.footer-middle h3.section-title .expander-icon { display: none !important; }

.accordion .title-ctn h2.bg-title:last-of-type,
.accordion h2.bg-title:last-of-type { font-weight: bold; }

.page-login .social-login-area .btn-login-social { margin-top: 20px; }

#app-overlay { display: none; } /* visível apenas em >=1024 dentro do bloco abaixo; mantido para compatibilidade */

/* -----------------------------------------------------------------------------
   MEDIA QUERIES (>= 1024px) – Barra de filtros desktop
----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #search-area .filtros .filtro-preco-container { display: none !important; }
  #search-area .filtros { height: 118px; justify-content: center; padding: 0 !important; }
  #search-area .filtros form { gap: 0 !important; align-items: stretch !important; }
  #search-area .filtros .filtro-container h2 .arrow.down,
  #search-area .filtros .filtro-container h2 .arrow.up { display: none; }
  #search-area .filtros .filtro-container {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-width: 116px; padding: 10px; align-self: stretch !important;
  }
  #search-area .filtros .filtro-container:hover { background: rgba(0,0,0,.1); }
  #search-area .filtros .filtro-container .filtro { padding: 15px !important; top: 109px !important; width: 230px !important; left: 0; }
  #search-area .filtros .filtro-container h2 span { margin-top: 10px; margin-right: 0 !important; }
  #search-area .limpa-filtros-conjunto { display: none; }

  .filtro-container h2 { pointer-events: none; }
  .filtro-container .filtro { top: 100px !important; width: 230px !important; }
  .filtro-container:hover .filtro { display: block !important; }
  #search-area .filtros .filtro-container.filtro-tamanho:hover .filtro { display: flex !important; flex-wrap: wrap; }

  .filtro-container:before {
    display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin: 0 auto;
    content: ''; border-radius: 100%; border: 1px solid #595959;
  }
  .filtro-container.filtro-categorias:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13221/icon-categorias.svg') center center no-repeat; background-size: 27px;
  }
  .filtro-container.filtro-marcas:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13219/marcas.svg') center center no-repeat; background-size: 36px;
  }
  .filtro-container.estacao:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13217/icon-estacao.svg') center center no-repeat; background-size: 35px;
  }
  .filtro-container.filtro-tamanho:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13220/icon-tamanho.svg') center center no-repeat; background-size: 27px;
  }
  .filtro-container.filtro-caracteristicas.genero:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13218/icon-genero.svg') center center no-repeat; background-size: 27px;
  }
  .filtro-container.filtro-caracteristicas.colecao:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13219/marcas.svg') center center no-repeat; background-size: 27px;
  }
  .filtro-container.filtro-caracteristicas.bolso:before {
    background: url('https://vitrinemadri.cdn.magazord.com.br/img/2026/08/banner/21044/bolso.svg') center center no-repeat; background-size: 27px;
  }

  /* Header / Footer desktop refinamentos */
  .mensagem-compra-segura .icon-shield { margin-right: 5px !important; margin-left: -3px !important; margin-top: -1px; }
  .footer-middle { padding: 29px 0; }
  .footer-middle h3.section-title .expander-icon { display: none !important; }
  .footer-middle h3.section-title { font-weight: bold !important; }

  /* Overlay desktop (mantido) */
  #app-overlay { display: none; }
}

/* -----------------------------------------------------------------------------
   VM - BACKGROUND E VISIBILIDADE (BLOCOS AUXILIARES)
----------------------------------------------------------------------------- */
.vm-tabela-background {
  padding: 20px;
  border-radius: 20px;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  background-image: url(https://magazord-public.s3.amazonaws.com/vitrinemadri/img/2025/05/derivacao/16655/background-vm-low.jpg);
  background-size: cover;
  background-position: center;
}

.tabela-container { display: none !important; }
.benefits-block-page { display: none !important; }
div#acompanha-produto { display: none; }

/* -----------------------------------------------------------------------------
   VM - BENEFITS BLOCK (TEXTO + IMAGEM)
----------------------------------------------------------------------------- */
.vm-benefits-block-page { font-family: var(--vm-font-family); max-width: 100%; }
.vm-benefits-block-page .row {
  display: flex; justify-content: center; align-items: center;
  border-radius: 10px; overflow: hidden; margin-top: 20px;
}
.vm-benefits-block-page .column { padding: 20px; }
.with-background { background-color: #0000000a; border-radius: 10px; }
.column-text { padding: 10px; text-align: right; width: 1000px; }

.vm-benefits-block-page h2 { font-size: 21px; line-height: 25px; margin: 0 0 10px; }
.vm-benefits-block-page p  { font-size: 15px; line-height: 25px; }

.vm-benefits-block-page img { max-width: 120px; width: 100%; }
.column-image { padding: 5px; margin-right: 10px; width: 400px; }
.column-image img { border-radius: 100%; }

/* responsivo do bloco de benefícios */
@media (max-width: 768px) {
  .benefits-block-page h2 { font-size: 20px; }
  .vm-benefits-block-page p { font-size: 12px; }
}

/* -----------------------------------------------------------------------------
   VM - AJUSTES GERAIS (ACCORDION / TABELAS)
----------------------------------------------------------------------------- */
.accordion .content { border-bottom: none !important; }

.tabela th,
.tabela td { border: none !important; } /* base zerada; linhas reaplicadas abaixo */

/* -----------------------------------------------------------------------------
   VM - TABELA DE COMPARAÇÃO
----------------------------------------------------------------------------- */
.vm-tabela-container {
  width: 100%; background-color: #f0f0f0; border-radius: 15px; margin-top: 50px;
  box-sizing: border-box; border: none; padding: 85px 0 20px;
}

.tabela-container table { width: 100% !important; border: 0 !important; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px !important; text-align: center; }

.tabela th {
  width: 38%; font-size: 16px; font-weight: bold; color: #000;
}
.tabela td {
  font-size: 13px; border-bottom: 1px solid #ddd; background: #f0f0f0;
}
.tabela tr { background-color: #f0f0f0; }

.tabela .icone-verde {
  background: url(https://vitrinemadri.cdn.magazord.com.br/img/2024/08/derivacao/13818/verifica.png);
  color: green; font-size: 24px; width: 37px; height: 37px; display: inline-block; background-size: 37px;
}
.tabela .icone-vermelho {
  background: url(https://vitrinemadri.cdn.magazord.com.br/img/2024/08/derivacao/13817/rejeitar.png);
  color: green; font-size: 24px; width: 37px; height: 37px; display: inline-block; background-size: 37px;
}

.tabela .highlight {
  background-color: #2685d345; display: flex; flex-direction: column;
  align-items: center; width: 100%;
}

.tabela .highlight .circulo {
  width: 80px; height: 80px; background: #fff; position: absolute;
  border-radius: 100%; z-index: 1; margin-top: 35px;
}
.tabela .highlight .case-highlight {
  display: flex; flex-direction: column; align-content: center; align-items: center;
  width: 100%; height: 106px;
}
.tabela .highlight .teste {
  position: absolute; display: flex; flex-direction: column;
  align-content: center; align-items: center; margin-top: -72px;
}
.tabela .highlight img { width: 130px; height: auto; border-radius: 50%; z-index: 2; }

#descricao-produto .content table,
#descricao-produto .content tr { border: 0 !important; }
.tabela td { border-bottom: 1px solid #cccccc !important; }

.highlight-info,
.highlight-info-base { background-color: #2685d345 !important; }
.highlight-info-base { height: 25px; border-radius: 0 0 15px 15px; }

#descricao-produto .content table tr:first-of-type td { font-weight: 400 !important; }
.tabela tr.ultima-tr td { border-bottom: none !important; }

/* mobile: tabela/descrição */
@media (max-width: 768px) {
  #descricao-produto .content table,
  #descricao-produto .content tr {
    border: 0; border-collapse: collapse; text-align: center; padding: 5px;
  }
  .tabela td { border-bottom: 1px solid #cccccc !important; }

  .descricaoNova .feature-item h2 {
    align-items: center; justify-content: center; width: 50%;
    text-align: center; margin-left: 15px; font-size: 16px !important;
  }

  .tabela .highlight {
    background-color: #2685d345;
    /* display: flex; */ /* mantido como comentário do original */
    flex-direction: column; align-items: center; width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   VM - FAQ / PERGUNTAS FREQUENTES
----------------------------------------------------------------------------- */
/* remover marcadores padrão do <details>/<summary> */
.faq-question { list-style: none; }
.faq-question::-webkit-details-marker { display: none; } /* WebKit */
.faq-question::marker { display: none; }                  /* Firefox */

/* container */
.faq-section {
  width: 100%; margin: 30px auto; background-color: #fff; border-radius: 16px;
  display: none; /* versão atual oculta o bloco */
}
.faq-title {
  text-align: center; font-size: 28px; font-weight: 700; padding: 30px 0 10px; color: #333;
}
.faq-list { display: flex; flex-direction: column; gap: 10px; padding: 20px; }

.faq-item {
  border-radius: 12px; background-color: #f9f9f9; overflow: hidden;
  border: 1px solid #e0e0e0; transition: box-shadow .3s ease;
}
.faq-item[open] { box-shadow: 0 4px 16px rgba(0,0,0,.05); }

.faq-question {
  font-size: 16px; font-weight: 600; padding: 18px 20px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; position: relative;
}
/* ícone setinha (estado final) */
.faq-question::after {
  content: "›"; font-size: 18px; transition: transform .3s ease; margin-left: auto;
}
.faq-item[open] .faq-question::after { transform: rotate(90deg); }

.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease;
  padding: 0 20px; opacity: 0; font-size: 15px; color: #555; line-height: 1.6;
  animation: fadeIn .3s ease;
}
.faq-item.opening .faq-answer,
.faq-item.open .faq-answer {
  max-height: fit-content; padding: 15px 20px; opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* responsivo FAQ */
@media (max-width: 600px) {
  .faq-title   { font-size: 22px; }
  .faq-question{ font-size: 15px; padding: 16px; }
  .faq-answer  { font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   VM - CARTÕES DE CUIDADOS (CARE INSTRUCTIONS)
----------------------------------------------------------------------------- */
.care-instructions {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 !important; background: #F7F7F7; border-radius: 10px; margin-top: 15px;
}
.care-item {
  display: flex; align-items: center; background: #fff; padding: 12px;
  border: 1px solid #ddd; border-radius: 6px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.care-item img { width: 40px; height: 40px; margin-right: 15px; }
.care-item h3 { font-size: 16px; margin-bottom: 4px; }
.care-item p  { font-size: 14px; color: #555; }
.care-item:hover { transform: scale(1.02); box-shadow: 0 5px 12px rgba(0,0,0,.05); }

/* -----------------------------------------------------------------------------
   PESQUISA / CONTEÚDO ADICIONAL – LAYOUT
----------------------------------------------------------------------------- */
.container.conteudo-adicional.conteudo-adicional-topo { height: auto !important; }

#main-area .descricao-pesquisa > .container { margin-bottom: 0 !important; }
.descricao-pesquisa { padding: 0 !important; }

#main-area .container.conteudo-adicional {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none;
  display: flex !important;
}

#main-area .container.conteudo-adicional-topo .exibir-mais-conteudo-adicional { display: none; }
.descricao-pesquisa .conteudo-adicional-topo { border-bottom: 0; }
#main-area .container { padding: 0; }

div.conteudo-adicional .exibir-mais-conteudo-adicional {
  position: absolute; right: 20px; bottom: 9px; font-size: .8125em; color: #fff !important;
  font-weight: bold !important; background: #2685d3 !important; border-radius: 10px; padding: 5px 10px; cursor: pointer;
}

.descricao-pesquisa .descricao { padding-bottom: 0; border-bottom: 0; }
h1.title-pesquisa { display: none; }
#search-area .filtros { margin-top: 15px; }

/* -----------------------------------------------------------------------------
   BREADCRUMB / ÁREA DE TÍTULO
----------------------------------------------------------------------------- */
.area-breadcrumb,
.breadcrumb-area {
  padding: 0 !important;
  background: var(--color-white);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   BLOCO PROMOCIONAL – VITRINE MADRI / DESCRIÇÃO DE DESCONTO
----------------------------------------------------------------------------- */
.content-vitrine-madri {
  padding: 20px 10px; background: #2685D3; color: #fff; margin-left: 8px; margin-right: 8px;
}

.descricao-desconto .title {
  display: block; font-size: 20px; text-transform: uppercase; line-height: 30px;
  position: relative; margin-bottom: 25px; text-align: center; color: #fff;
}
.descricao-desconto .title:before {
  content: ""; position: absolute; bottom: -13px; background-color: #fff; padding: 3px 60px;
  border-radius: 10px; width: 75px; margin: auto; left: 0; right: 0; color: #fff;
}
.descricao-desconto div {
  display: block; font-size: 30px; text-transform: uppercase; font-weight: bold;
  text-align: center; color: #fff !important;
}
.descricao-desconto p.obs { color: #ffffff !important; margin-top: 25px; font-size: 16px; text-align: center; }

@media (max-width: 800px) {
  .content-vitrine-madri { text-align: center; }
  .descricao-desconto, .aplicar-desconto { width: 100%; }
  .descricao-desconto div, .descricao-desconto .title { text-align: center; font-size: 17px; }
  .descricao-desconto p.obs { font-size: .7125em; line-height: 15px; margin: 10px 0; }
  .descricao-desconto div { display: inline-block; }
  .descricao-desconto .title:before { margin: auto; left: 0; right: 0; }
}

.mensagem-desconto { color: #000; margin-top: 15px; }

/* -----------------------------------------------------------------------------
   FILTROS – ANIMAÇÕES, CHECKS E ESTADO
----------------------------------------------------------------------------- */
#search-area .filtros .filtro-container .filtro { animation: vmFilterReveal .18s ease-out both; }
#search-area .filtros .filtro-container { transition: background-color .1s linear; }

/* Check genérico marcado */
#search-area .filtros .filtro-container .label_check .filtro-pretty-check.checked {
  background: transparent !important; border: 1px solid #2685d3 !important;
}
#search-area .filtros .filtro-container .filtro-pretty-check:before {
  content: ""; position: relative; top: 5px; left: 10px; width: 7px; height: 13px;
  border-right: 2px solid #2685D3; border-bottom: 2px solid #2685D3; transform: rotate(45deg);
  display: none;
}
#search-area .filtros .filtro-container .filtro-pretty-check.checked:before { display: block; float: initial; }

/* Check para filtro de tamanho (aparência destacada e sem “tick”) */
#search-area .filtros .filtro-container.filtro-tamanho .label_check .filtro-pretty-check.checked {
  border: 3px solid #2685d3 !important; color: #fff; box-shadow: 0 2px 4px #00000038; font-weight: bold !important;
}
#search-area .filtros .filtro-container.filtro-tamanho .label_check .filtro-pretty-check.checked .cardesc {
  color: #fff; font-weight: bold !important;
}
#search-area .filtros .filtro-container.filtro-tamanho .filtro-pretty-check.checked:before { display: none; }

/* -----------------------------------------------------------------------------
   ÁREA PRINCIPAL / LISTAGEM – COMPLEMENTOS
----------------------------------------------------------------------------- */
#main-area.container { background: var(--color-white); max-width: inherit; margin-top: 20px; }

.pesquisa-produtos .ordenacao-content .registros-numero { display: none !important; }
.pesquisa-produtos .ordenacao-content .ordenacao select#ordem { height: 35px; width: 180px; text-transform: initial; }


.filtro-container.filtro-marcas { display: none !important; }

/* -----------------------------------------------------------------------------
   CÁLCULO DE FRETE – POPUP/RESPOSTA CEP
----------------------------------------------------------------------------- */
#cep-response { border-radius: 7px; position: relative; }
#cep-response h5 { font-size: 14px; margin-bottom: 10px; text-align: left; font-weight: bold; }
#cep-response .tipo-entrega {
  text-align: left; font-size: 14px; font-weight: 100; display: flex;
  border-top: 1.3px solid #ededed; padding: 3px;
}
#cep-response .fechar {
  position: absolute; top: 10px; right: 10px; display: block !important; width: 22px; height: 22px;
  font-size: 13px; background: #666; color: #fff; text-align: center; border-radius: 50%; cursor: pointer;
}

/* -----------------------------------------------------------------------------
   ALERTAS / BACKGROUND GERAL / TOPO AVALIAÇÃO LOJA
----------------------------------------------------------------------------- */
.alert.alert-type-3,
.alert.alert-type-danger {
  color: #ffffff; border-radius: 10px; background: #398dd2;
  box-shadow: 5px 3px 11px 0px #00000029; font-weight: bold; border-color: #398dd2;
}

body { background-color: #fff; background-repeat: no-repeat; background-position: center 0; }

#main-area .topo-avaliacao-loja {
  background: #0088dc; padding: 40px 0; margin-top: 15px; margin-bottom: -18px;
}

/* -----------------------------------------------------------------------------
   OUTROS AJUSTES DA PÁGINA DE PESQUISA (legados mantidos)
----------------------------------------------------------------------------- */
#main-area .descricao-pesquisa > .container { padding: 0; } /* margin-bottom já definido acima */
/* Ordenacao responsiva: elimina offset fixo de 721px. */
.ordenacao select#ordem { margin-top: 10px; margin-left: auto; max-width: 100%; }
@media (max-width: 1023px) {
  .pesquisa-produtos.is-tablet-mobile .ordenacao select#ordem { margin-left: 0; }
}
#search-area .filtros h2 { font-size: 16px; font-weight: bold; }
.ordenacao .registros-numero { display: none; }

.pesquisa-produtos.is-tablet-mobile .ordenacao select#ordem { margin-right: 5px; margin-top: -4px; text-align: center; }
.popup-filtro-avancado .popup-filtro-topo { background: #2685d3; border-radius: 10px 10px 0 0; }
.popup-filtro-avancado { border-radius: 10px; }

.button-success { border-color: #21262d; background: #21262d; transition: background-color .1s linear, border-color .1s linear; }
.button-success:hover { border-color: #00a441; background: #00a441; }

.pesquisa-produtos.is-tablet-mobile .ordenacao {
  margin: 10px; box-shadow: 0 0 7px rgb(0 0 0 / 18%);
}

/* -----------------------------------------------------------------------------
   LAYOUT / ORDEM DE ELEMENTOS (HEADER / CARRINHO / FOOTER)
----------------------------------------------------------------------------- */
.box-frete.group.mt-space-12.rounded-sm { order: 5; }
.carrinho-container.flex.justify-around.cart-02 { z-index: 3; }

/* Header desktop: regras antes globais agora ficam restritas ao header. */
@media (min-width: 1024px) {
  header .logo { order: 2 !important; display: block; }
  header .search-area {
    order: 1 !important;
    width: clamp(320px, 31vw, 409px) !important;
    max-width: 409px;
  }
  header .login-cadastro.flex.center.justify-center { order: 3 !important; }
  header div#cart-preview-area { order: 4 !important; }
}

.header-middle { padding: 15px 0; border-width: 0px; }
.footer-middle { padding: 29px 0; margin-top: -35px; }
.footer-middle h3.section-title { margin-bottom: 20px; }

.ra-footer .max-w-\[1350px\] { max-width: 1350px; }
.ra-footer a { color: inherit; text-decoration: inherit; transition: color .05s linear; }
.ra-footer a:hover { color: inherit; font-weight: 700; text-decoration: inherit; }

/* -----------------------------------------------------------------------------
   BOTÕES / ESTADOS
----------------------------------------------------------------------------- */
.button-base { transition: background-color .1s linear, border-color .1s linear, box-shadow .1s linear; border-radius: 10px !important; }
.button-base:hover {
  background: #FF72B9 !important;
  border: 1px solid #FF72B9 !important;
  border-radius: 10px !important;
}

/* -----------------------------------------------------------------------------
   MENU PRINCIPAL (#nav-root) – APARÊNCIA E SUBMENUS
----------------------------------------------------------------------------- */
ul#nav-root { background-color: #fff; }
ul#nav-root > li > a { color: #000000; font-weight: bold; }
ul#nav-root > li:hover > a { background: transparent; }
ul#nav-root > li:hover > a::after { border-right: 2px solid #000; border-bottom: 2px solid #000; }
ul#nav-root > li:hover.has-childs > a:before { display: none; }
.titulo-conjuntos-mobile { display: none !important; }

/* Destaque alternado por posição */
.header-bottom ul#nav-root > li:nth-child(1n) { border-bottom: 4px solid #FF73BD; padding: 8px; }
.header-bottom ul#nav-root > li:nth-child(2n) { border-bottom: 4px solid #03aafa; }
.header-bottom ul#nav-root > li:hover { background: #00000012; cursor: pointer; transition: background-color .15s linear; }

.header-bottom ul#nav-root > li > a { font-size: 13px !important; padding-top: 11px; padding-bottom: 11px; }
.header-bottom ul#nav-root > li > .container-menu {
  justify-content: space-between; position: absolute; right: 0; min-width: 200px; width: 200px;
  top: 100%; padding: 5px; z-index: 10 !important; border-radius: 0; border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.header-bottom ul#nav-root > li:hover > .container-menu { top: 39px; }
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 { padding: 0; }
.header-bottom ul#nav-root > li:hover > .container-menu,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li:hover .container-menu,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu .menu-level-3 > li:hover .container-menu { border-radius: 0; }

.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > a,
.header-bottom ul#nav-root > li > .container-menu .menu-level-3 > li > a,
.header-bottom ul#nav-root > li > .container-menu .menu-level-4 > li > a {
  padding: 8px; font-size: 12.5px !important; display: flex; color: #222;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > a .menu-icon,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > .container-menu .menu-level-3 > li.has-childs a .menu-icon {
  display: flex; background: url('https://vitrinemadri.cdn.magazord.com.br/img/2024/04/banner/13225/arrow-right.svg') no-repeat center center;
  width: 8px; height: 8px;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > a.has-childs,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > .container-menu .menu-level-3 > li a.has-childs {
  flex-direction: row-reverse; justify-content: space-between; align-items: center;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li .container-menu,
.header-bottom ul#nav-root > li > .container-menu .menu-level-3 > li .container-menu {
  background: #fff; padding: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.15); min-width: 200px; z-index: 10;
  border: 1px solid #ddd; display: none; position: absolute;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li,
.header-bottom ul#nav-root > li > .container-menu .menu-level-3 > li,
.header-bottom ul#nav-root > li > .container-menu .menu-level-4 > li {
  padding: 0; width: 100%; border-bottom: 1px solid #f2f2f2; position: relative;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-3 > li:last-of-type,
.header-bottom ul#nav-root > li > .container-menu .menu-level-4 > li:last-of-type,
.header-bottom ul#nav-root > li > .container-menu .menu-level-1 > li:last-of-type,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li:last-of-type { border-bottom: none; }

.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu .menu-level-3 .container-menu { display: none; }
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li:hover .container-menu,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu .menu-level-3 > li:hover .container-menu {
  display: block; top: -6px; left: 170px !important;
}
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 > li > a:hover .menu-text,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu .menu-level-3 > li > a:hover .menu-text,
.header-bottom ul#nav-root > li > .container-menu .menu-level-2 .container-menu .menu-level-4 > li > a:hover .menu-text {
  text-decoration: none; color: #2685d3; cursor: pointer;
}
ul#nav-root .menu-level-2 > li ul a:before { display: none; }

/* -----------------------------------------------------------------------------
   HEADER (React) – AJUSTES
----------------------------------------------------------------------------- */
header#header-react-app .header-bottom ul#nav-root > li > a { padding: 0 !important; }
header#header-react-app .header-bottom ul#nav-root > li { height: 100%; }
header#header-react-app .header-bottom ul#nav-root > li > a svg { display: none; }
@media (min-width: 1024px) {
  header#header-react-app .search-area { order: -2 !important; }
  header#header-react-app .logo { order: -1 !important; }
}
header#header-react-app .header-bottom ul#nav-root .container-menu ul { margin-top: 0; }
header#header-react-app .header-bottom ul#nav-root li .container-menu a { gap: 0; }
header#header-react-app .header-bottom ul#nav-root li .container-menu a.not-has-childs .menu-icon { display: none !important; }
header#header-react-app .header-bottom ul#nav-root li .container-menu a svg { display: none; }

/* -----------------------------------------------------------------------------
   BLOCO GERAL – CORES, TEXTOS E DIVERSOS
----------------------------------------------------------------------------- */
.bg-light-color { background-color: #ffffff !important; }
.mensagem-desconto {
  color: #000; margin-left: auto; margin-right: auto; margin-top: 15px; justify-content: center; max-width: 1700px;
}
.h-space-48 { font-weight: 600; }
.produto.clearfix { margin-top: -25px; }
.ra-vitrine .leading-\[22px\] { line-height: 17px !important; }

.informativo-lgpd .botao-continuar-fechar { background: #2685d3; font-weight: bold; }
.filtro-container.marca { display: none; }

.icon-social { transition: transform .2s linear; }
.icon-social:hover { transform: scale(1.07); }

h3.pb-space-8.text-secondary-1000.dark\:text-secondary-50.text-center.text-xl.font-semibold { font-weight: 700; }

.magazord-logo-container { filter: opacity(.5); transition: filter .2s linear, transform .2s linear; }
.magazord-logo-container:hover { filter: opacity(1); transform: scale(1.03); }

.ra-footer img { transition: transform .3s ease; }
.ra-footer img:hover { transform: scale(1.07); }

.flex.flex-wrap.gap-space-16,
.box-selos.gap-space-16.flex.flex-wrap { justify-content: center; }

.last\:pb-space-16:last-child { padding-bottom: .5rem; }
span.termo { margin-top: 14px; }
.btn-cat { background-color: #ffffff !important; }
.acoes-lista-presentes.flex.column.center.justify-center { display: none; }

.swal2-popup.swal2-modal.popup-adicionado-ao-carrinho .titulo-adicionado-ao-carrinho { text-align: center; font-weight: bold; }
.swal2-popup .swal2-title { border-bottom: 0; }

.recovery-password-area { margin-left: auto; margin-right: auto; }

/* -----------------------------------------------------------------------------
   VITRINE – BOTÃO COMPRAR / DERIVAÇÕES / HOVERS (templates excluídos)
----------------------------------------------------------------------------- */
.pesquisa-produtos ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li {
  border: 0 solid #efefef;
}

ul.product-list li .btn-comprar-vitrine { background: #2685d3; border-radius: 5px !important; }
ul.product-list li .btn-comprar-vitrine:hover { background: #ff72b9; border-radius: 5px !important; }

ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .btn-comprar-vitrine {
  background: #2685D3; color: var(--color-white); border: none;
}
ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .btn-comprar-vitrine:hover {
  background: #FF72B9; color: var(--color-white); border: none;
}
ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li:hover a figure > img { opacity: 1; }

ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .derivacoes-hover .deriva { display: none; }
ul.product-list li .derivacoes-hover .deriva.cor { width: 25px; display: none; }
ul.product-list li .derivacoes-hover .deriva.tamanho { margin-bottom: 7px; }

ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .derivacoes-hover .deriva.tamanho {
  font-size: 12px; margin: 2px; margin-top: 2px; box-shadow: 0 0 0 1px #ddd; line-height: 80%;
  background: #fff; border: 0; border-radius: 0; font-weight: bold; display: inline-grid; width: 32px; height: 32px;
  align-items: center; justify-content: center;
}
ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .derivacoes-hover .deriva.out-of-stock .icon-out-stock {
  top: -5px; left: 19px; background: #fff; border-radius: 50%; display: flex; width: 15px; height: 15px; justify-content: center; align-items: center;
}
ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li .derivacoes-hover { padding-bottom: 8px; }
ul.product-list:not(.template-14):not(.template-15):not(.template-16):not(.template-17):not(.template-18):not(.template-19):not(.template-20):not(.template-21):not(.template-22):not(.template-23):not(.template-24):not(.template-25):not(.template-26):not(.template-27):not(.template-28) li:hover .derivacoes-hover { display: block; }

.tipo-vitrine-11 .price-content .price-content-items .percentual-desc { display: none; }

/* -----------------------------------------------------------------------------
   BANNERS / TEXTOS PROMOCIONAIS
----------------------------------------------------------------------------- */
.titulo-secao .descricao { visibility: hidden; position: relative; margin: 12px 0 0; height: 90px; text-align: center; width: 350px; }
.titulo-secao .descricao:after {
  visibility: visible; position: absolute; top: 0; left: 0;
  content: "Acompanhe o Instagram da Vitrine Madri! Siga o perfil para conferir todas as novidades 💖";
}

.content-vitrine,
.content-coruja { padding: 20px 55px; background: #2685D3; color: #fff; margin-left: 8px; margin-right: 8px; }

/* -----------------------------------------------------------------------------
   FOOTER / SOBRE / LINKS
----------------------------------------------------------------------------- */
.footer-about .informacao-empresa p { font-size: .55em !important; }
.ra-footer .md\:p-space-24 { padding: 12px; background: #fff; } /* corrige valor inválido anterior */

/* -----------------------------------------------------------------------------
   APP / WHATS / CAROUSELS
----------------------------------------------------------------------------- */
#baixe-app .dados-app figure img { padding: 0 !important; }
#baixe-app .dados-app p,
#baixe-app .ver-no-app a { font-weight: bold; }
#baixe-app .ver-no-app { background: #29c249; }

#popup-msg-whats.posicao-bottom-left { z-index: 10; }

.vitrine .swiper-button-next,
.vitrine .swiper-button-prev,
.widget-avaliacao .swiper-button-prev,
.widget-avaliacao .swiper-button-next { display: flex; }

header.is-tablet-mobile .logo { max-width: 200px; margin-top: 6px; }

/* -----------------------------------------------------------------------------
   BUSCA / SUGESTÕES / PÁGINAS ESPECIAIS
----------------------------------------------------------------------------- */
.suggest-search ul li .number { margin: 13px 10px 0 10px !important; }
.footer-middle .footer-mobile-tablet .paginas-especiais { width: 100% !important; }
#suggest-pesquisa li > a { display: flex; align-items: initial; justify-content: initial; }

.botao-comprar-fixo { display: none; }
#menu-mobile li a { font-weight: 600 !important; }

/* -----------------------------------------------------------------------------
   PRODUTO / AVISE-ME / AVALIAÇÕES / BLOG
----------------------------------------------------------------------------- */
.produto-sem-estoque #form-avise-me .linha-avise-me button.button-darken { background: #2685D3 !important; }
.avaliacoes-carousel .avaliacoes-carousel-each { text-align: center; }

#main-area .conteudo-maior .vitrine-blog { width: 100%; margin: 39px auto 30px; }
.rrssb-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  margin: 25px 0 !important; font-size: 12px;
}
#main-area .conteudo-maior .title-ctn-blog { margin-bottom: 28px; font-weight: bold; font-size: 20px; }
#main-area .conteudo-maior .title-ctn-blog .texto:after { height: 2.5px; width: 34px; }

.lateral-info-posts .title-ctn-blog span { font-weight: bold !important; }
.conteudo-adicional .description h2 { font-weight: bold; }
.container-row .descricao-rodape .description p { color: #858a92; }

/* ============================================================================
   BUSCA (MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  header.is-tablet-mobile .header-search-full .search-area {
    border-radius: 10px !important;
  }
  header.is-tablet-mobile .header-search-full .search-area #frm-search {
    height: 37px;
    border-radius: 10px !important;
  }
}

/* ============================================================================
   BUSCA (GERAL)
   -------------------------------------------------------------------------- */
header.is-tablet-mobile .header-search-full .search-area input {
  width: 100% !important;
  border-radius: 7px;
}

header#header-react-app .search-area {
  border: 1px solid #e1e1e1 !important;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 8px;
  margin: 0 auto;
}

.border-border-color {
  border: none !important;
}

.search-input {
  width: 100%;
  font-size: 14px;
  border-radius: 8px;
  font-family: var(--vm-font-family);
  outline: none;
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 55px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  transform: translateY(-50%);
  transition: background-color .2s linear;
}
.search-icon:hover { background: #ddd; }
.search-icon img { width: 20px; height: 20px; }

/* ============================================================================
   SUGESTÕES DA BUSCA
   -------------------------------------------------------------------------- */
.suggestions-box {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  margin-top: 5px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.suggestions-box.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.suggestion-title {
  font-weight: bold;
  padding: 12px 16px 8px;
  font-size: 14px;
  color: #444;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s ease;
}
.suggestion-item:hover { background: #f9f9f9; }
.suggestion-item span {
  margin-left: 5px;
  font-size: 12px;
}

.circle-number {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 26px;
  font-size: 13px;
  font-weight: bold;
  margin-right: 10px;
}

.result-image {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 10px;
}

/* ============================================================================
   LOADING / SKELETON
   -------------------------------------------------------------------------- */
.loading-skeleton {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  animation: pulse 1.5s infinite;
}
.skeleton-img {
  width: 40px; height: 40px;
  background: #ccc;
  border-radius: 4px;
  margin-right: 10px;
}
.skeleton-text {
  flex: 1;
  height: 12px;
  background: #ccc;
  border-radius: 4px;
}
@keyframes pulse {
  0% { background-color: #eee; }
  50% { background-color: #ddd; }
  100% { background-color: #eee; }
}

/* ============================================================================
   CTA “VER TODOS”
   -------------------------------------------------------------------------- */
.ver-todos {
    text-align: center;
    /* color: #2685d3 !important; */
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    margin-top: 5px;
    padding-left: 15px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    background: #2685d3;
    /* border-top: 1px solid #ddd; */
    position: sticky;
    border-radius: 10px;
    bottom: 0;
    z-index: 10;
  transition: background-color .3s linear;
}
.ver-todos:hover {
  background: #ff72b9;
}

/* ============================================================================
   UTILITÁRIOS
   -------------------------------------------------------------------------- */
.pl-space-16 { padding-left: 0; }

/* ============================================================================
   BLOCOS GERAIS / BLOG / SZB
   -------------------------------------------------------------------------- */
#szb-container { margin-top: 10px; }

.blog-content { font-family: var(--vm-font-family); }

.buy-area .card .price-big { font-weight: bold !important; }

/* ============================================================================
   DESTAQUE – SOBREPOSIÇÃO E TÍTULO
   -------------------------------------------------------------------------- */
.tipo-destaque-01 .conteudo-postagem {
  position: absolute; top: 0; width: 100%; height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 6%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.87) 74%
  );
}

.tipo-destaque-01 .conteudo-postagem .info-postagem-topo h2 {
  font-size: 1.125em; color: #fff; line-height: 22px; font-weight: 500;
  margin-top: 10px; padding-right: 20px;
}

/* ============================================================================
   PÁGINA DE PRODUTO – ORDENAÇÃO / AÇÕES / FRETE
   -------------------------------------------------------------------------- */
.quantidade-comprar.area-comprar.flex.space-between { order: 5; }

.area-buy-product .acoes-produto .action { display: none; }
.mensagem-compra-segura { display: none; }

.area-buy-product #button-measure-table { order: 2; margin-bottom: 14px !important; }

.calculo-frete.flex.center.column { order: 10; }

/* Quantidade – espaçamentos (consolidado) */
.area-buy-product .quantidade-comprar {
  margin-top: 7px !important;
  margin-bottom: 4px;
}

/* Derivações – ajuste de espaçamento abaixo */
.derivacoes-produto { margin-bottom: -25px; }

/* Mensagens de estoque/erro */
.ra-produto .text-\[\#32BCAD\] {
  --tw-text-opacity: 1;
  font-weight: bold;
  color: rgb(50 188 173 / var(--tw-text-opacity, 1));
}
.ra-produto .text-error-700 {
  --tw-text-opacity: 1;
  margin-left: auto;
  color: rgb(186 24 18 / var(--tw-text-opacity, 1));
}

/* ============================================================================
   CAMPOS PERSONALIZÁVEIS / FRETE – LAYOUT
   -------------------------------------------------------------------------- */
.field-content.input-personaliza.flex.items-center.justify-between { width: 70%; }

@media (max-width: 767px) {
  .flex.content-frete.items-center.gap-space-10 {
    display: flex; flex-direction: column; gap: 1px !important;
  }
  .field-content.input-personaliza.flex.items-center.justify-between { width: 100%; }
}

/* ============================================================================
   UTILITÁRIOS DE VISIBILIDADE / TRANSIÇÃO
----------------------------------------------------------------------------- */
.visivel { opacity: 1; transform: translateY(0); transition: opacity .6s ease-in-out, transform .6s ease-in-out; }
.oculto  { opacity: 0; transform: translateY(-10px); }

/* ============================================================================
   HEADER / BARRA DE BUSCA (MOBILE)
----------------------------------------------------------------------------- */
header.is-tablet-mobile .header-search-full {
  background: #ffffff;
  padding: 10px;
  border-bottom: 0;
}
.swiper-slide.aviso-importante-header { padding: 7px !important; }
a.logo-preview { display: grid; }

/* ============================================================================
   MENU (DESKTOP ≥ 1024px)
----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  ul#nav-root { height: 3rem; }
  span.menu-text {
    font-family: var(--vm-font-family);
    font-weight: 600 !important;
    font-size: 12.5px !important;
    color: #000 !important;
    text-decoration: none;
    letter-spacing: -0.36px;
    text-transform: uppercase;
    transition: color .1s linear;
  }
}
#nav-root > li { display: flex; justify-content: center; align-items: center; width: 11em; }
ul#nav-root > li > a { padding: 4px 11px !important; }
ul#nav-root > li > a .menu-icon { display: none; }
ul#nav-root > li > a::after,
ul#nav-root > li:hover > a::after { display: none; }

ul#nav-root > li > .container-menu {
  animation: vmMenuReveal .22s ease-out both;
  margin-top: -4px;
}

/* Reveal por transform/opacity: sem animar top/layout. */
@keyframes vmMenuReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vmFilterReveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   FOOTER
----------------------------------------------------------------------------- */
.footer-middle h4 { display: none; }

footer .footer-menu ul.links a {
  font-weight: 400;
  color: var(--footer-color-secundary, #555);
  text-decoration: none;
}

.footer-middle h3.section-title {
  color: #555;
  text-transform: uppercase;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
}

.ra-footer .leading-3 {
    line-height: 1.35rem !important;
}

.footer-middle .list-menu-default li a:hover { text-decoration: none; }

.ra-footer .md\:p-space-24 {
    padding: 12px !important;
}

/* ============================================================================
   CHECKOUT / FORMAS DE PAGAMENTO / CTA
----------------------------------------------------------------------------- */
.forma-pagto-area .payment-options .icon { width: 35px; height: 25px; }

#resumo-compra .proxima-etapa button {
  background: #1B7A45 !important;
  border-color: #1B7A45 !important;
  transition: background-color .1s linear, border-color .1s linear;
}
#resumo-compra .proxima-etapa button:hover {
}

/* Atendimento (página de conteúdo) */
.content-page #atendimento-form form button {
  border-radius: 7px;
  font-weight: bold;
  background: #2685D3;
  transition: background-color .1s linear;
}
.content-page #atendimento-form form button:hover {
  background: #ff73bd;
}

/* Compre Junto */
.compre-junto-1 .oferta-total .botao-comprar-junto button {
  background: #2c9f2c !important;
  border-color: #2c9f2c !important;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color .1s linear, border-color .1s linear;
}
.compre-junto-1 .oferta-total .botao-comprar-junto button:hover {
  background: #217a21 !important;
  border-color: #217a21 !important;
  border-radius: 5px;
  font-weight: bold;
}

/* ============================================================================
   SEÇÕES RELACIONADAS (RESPONSIVO)
----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .accordion.produtos-relacionados,
  .accordion.compre-junto {
    margin-top: 0;
    margin-bottom: 18px;
  }
}

/* ============================================================================
   ESPAÇAMENTO UTILITÁRIO
----------------------------------------------------------------------------- */
.px-space-16 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* ============================================================================
   BOTÕES / ESTADOS
----------------------------------------------------------------------------- */
.button.button.button-primary { border-color: #ffffff21 !important; }

.button.button.button-success {
  color: #fff;
  font-weight: bold;
  font-family: var(--vm-font-family);
}

.button-base.button-outline {
  border-color: #ffffff;
  background: #0086d7;
  color: #ffffff;
  font-weight: bold;
}
.button-base.button-outline:hover {
  background: #ff72b9;
  box-shadow: 0 5px 10px #0000001a !important;
}

/* Avaliações – CTA principal */
#main-area .button-avaliacao {
  width: 200px;
  padding: 10px 18px;
  gap: 6px;
  background: #0086d7 !important;
  color: #fff;
  border-radius: 8px;
  border: 0;
  transition: background-color .2s ease;
  font-weight: bold !important;
}
#main-area .button-avaliacao:hover {
  background: #ff72b9 !important;
}

/* Botão "mais avaliações" */
#main-area .avaliacoes-gerais .content-page-tab .mais-avaliacoes button {
  border-radius: 10px;
  padding: 7px 23px;
}

/* ============================================================================
   TOAST / POPUPS / TÍTULOS
----------------------------------------------------------------------------- */
body.swal2-toast-shown > .swal2-container.mz-toast-container > .swal2-popup.swal2-toast.mz-toast-popup {
  width: 100% !important;
  max-width: 450px;
  padding: 16px 24px !important;
  border-radius: 8px;
  font-family: var(--vm-font-family);
  position: relative;
}

.popup-site-adicional.cupom-desconto .titulo-newsletter {
  text-transform: none !important;
  font-size: 20px;
  font-weight: bold;
}

/* ============================================================================
   AVALIAÇÕES – FORM / PÁGINA
----------------------------------------------------------------------------- */
#main-area .avaliacoes-gerais ul.tabs-avaliacoes { margin-top: 0 !important; }
#main-area .avaliacao { font-weight: bold !important; }
#main-area .page-avaliacao {
  background: #fff !important;
  font-family: var(--vm-font-family) !important;
}

/* Formulário de avaliação */
#form-avaliacao {
  text-align: start;
  font-family: var(--vm-font-family);
  gap: 32px;
}
#form-avaliacao .submit button {
  background: #0086d7 !important;
  font-size: .9375em;
  color: #fff;
  font-weight: bold !important;
}
#form-avaliacao .submit button:hover { background: #ff72b9 !important; }
#form-avaliacao .info-avaliado-ctn { gap: 14px; width: 100%; height: 100%; }
#form-avaliacao .info-avaliado-ctn img {
  width: 100%;
  max-width: 70%;
  height: auto;
}

/* ============================================================================
   ESTADOS / LISTAGENS
----------------------------------------------------------------------------- */
.pesquisa-sem-registros {
  width: 100%;
  border: 1px solid #3a97d2;
  text-align: center;
  border-radius: 2px;
  font-size: .875em;
  margin: 20px 0;
  color: #ffffff;
  padding: 10px;
}

/* Carrinho vazio */
.empty-cart h2 {
  font-size: 2em;
  font-family: var(--vm-font-family);
  font-weight: bold;
  color: #2685d3;
}
.empty-cart .txt-empty {
  color: var(--checkout-color-texto-secondary, #737373);
  font-size: .875em;
  font-weight: 600;
  padding: 0 10px;
  font-family: var(--vm-font-family);
}

/* ============================================================================
   NEWSLETTER (widget-newsletter-2)
----------------------------------------------------------------------------- */
.widget-newsletter-2 {
  padding: 25px 0 !important;
  margin-top: 20px;
  background: #2685d3 !important;
}
.widget-newsletter-2 .container { justify-content: space-between; }

/* Títulos / subtítulos */
.widget-newsletter-2 .news-area .sub-title,
.widget-newsletter-2 .redes-sociais .title-redes {
  font-size: 15px !important;
  margin: 0 0 5px 0;
  font-weight: bolder;
}
.widget-newsletter-2 .news-area {
  order: -1;
  align-items: center;
  font-size: 20px !important;
}

/* Campos */
.widget-newsletter-2 .news-area .field-email input {
  height: 35px !important;
  width: 260px;
  border-radius: 3px !important;
  padding: 8px 10px;
  font-size: 15px !important;
  transition: box-shadow .1s linear;
}
.widget-newsletter-2 .news-area .field-email input:hover {
  box-shadow: 0 0 6px rgba(0,0,0,.2);
}

/* Botão */
.widget-newsletter-2 .news-area button {
  height: 35px !important;
  min-width: 80px !important;
  border-radius: 5px !important;
  background: #2685d3 !important;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 13px !important;
  transition: background-color .3s ease-in-out;
  align-items: center;
  margin-bottom: 8px;
}
.widget-newsletter-2 .news-area button:hover {
  background: #ff72b9 !important;
  border: 1px solid rgba(255,114,185,.2);
  box-shadow: 0 0 4px rgba(0,0,0,.2);
}

/* Redes sociais */
.widget-newsletter-2 .redes-sociais { width: 100% !important; }
.widget-newsletter-2 .news-social,
.widget-newsletter-2 .news-social .lista-redes { justify-content: center; }
.widget-newsletter-2 .news-social .icon-social { display: none; }
.widget-newsletter-2 .news-social .lista-redes li,
.widget-newsletter-2 .redes-sociais .title-redes {
  padding: 0 8px;
  font-size: 13px;
  text-align: center;
}

/* Mobile (apenas para o widget) */
body.device-mobile .widget-newsletter-2 { padding: 20px 0 !important; }
body.device-mobile .widget-newsletter-2 .news-area .field-email input {
  width: 100% !important;
  align-items: center;
}

/* ============================================================================
   FOOTER – AJUSTES FINOS
----------------------------------------------------------------------------- */
.ra-footer .px-space-20 {
  padding-left: 1px;
  padding-right: 1px;
}

/* ============================================================================
   VM SAFE PATCH v1.2 - HEADER MOBILE / CORE WEB VITALS
   --------------------------------------------------------------------------
   O HTML mobile possui tres filhos diretos: menu, logo e carrinho.
   Esta camada limita a ordenacao ao header mobile e evita que as regras
   globais de .logo, .search-area e #cart-preview-area reorganizem o topo
   durante a renderizacao/hidratacao do header React.
============================================================================ */
@media (max-width: 1023px) {
  header.is-tablet-mobile .cart-01 {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 0 !important;
    min-height: 60px;
  }

  header.is-tablet-mobile .cart-01 > .header-menu-button-ctn {
    grid-column: 1;
    order: 1 !important;
    width: 56px;
    min-width: 56px;
    justify-self: start;
  }

  header#header-react-app.is-tablet-mobile .cart-01 > .logo,
  header.is-tablet-mobile .cart-01 > .logo {
    grid-column: 2;
    order: 2 !important;
    justify-self: center;
    width: auto;
    max-width: min(150px, calc(100vw - 132px));
    margin: 0 !important;
  }

  header.is-tablet-mobile .cart-01 > .logo .logo-preview,
  header.is-tablet-mobile .cart-01 > .logo .logo-preview > img,
  header.is-tablet-mobile .cart-01 > .logo .logo-preview > svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  header.is-tablet-mobile .cart-01 > .carrinho-container {
    grid-column: 3;
    order: 3 !important;
    width: 56px;
    min-width: 56px;
    justify-self: end;
  }

  header.is-tablet-mobile .cart-01 > .carrinho-container #cart-preview-area {
    order: initial !important;
    width: 56px;
    min-width: 56px;
  }

  header.is-tablet-mobile .cart-01 > .carrinho-container #cart-preview-area .content {
    width: 56px;
    min-width: 56px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* A busca mobile deve ocupar o container, sem herdar width/order desktop. */
  header#header-react-app.is-tablet-mobile .header-search-full .search-area,
  header.is-tablet-mobile .header-search-full .search-area {
    order: initial !important;
    width: 100% !important;
    max-width: none;
  }
}

/* Touch: evita escala de hover persistente apos toque. */
@media (hover: none), (pointer: coarse) {
  .care-item:hover,
  .icon-social:hover,
  .magazord-logo-container:hover,
  .ra-footer img:hover { transform: none; }
}

/* Acessibilidade e menor trabalho de animacao para quem solicita movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}