.elementor-21 .elementor-element.elementor-element-7a17ed6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}@media(min-width:768px){.elementor-21 .elementor-element.elementor-element-7a17ed6{--content-width:1060px;}}@media(max-width:1366px){.elementor-21 .elementor-element.elementor-element-7a17ed6{--padding-top:2rem;--padding-bottom:0rem;--padding-left:3rem;--padding-right:3rem;}}@media(max-width:767px){.elementor-21 .elementor-element.elementor-element-7a17ed6{--padding-top:0.5rem;--padding-bottom:1.25rem;--padding-left:1.25rem;--padding-right:1.25rem;}}/* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-3f82809 */.elementor-21 .elementor-element.elementor-element-3f82809 .woocommerce-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12.5px;
  color: #70757C;
  margin: 0;
  padding: 16px 0;
}
.elementor-21 .elementor-element.elementor-element-3f82809 .woocommerce-breadcrumb a{
  color: #70757C;
  text-decoration: none;
  transition: color .2s cubic-bezier(.16,1,.3,1);
}
.elementor-21 .elementor-element.elementor-element-3f82809 .woocommerce-breadcrumb a:hover{ color: #0367B8; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-355d4d3 */.elementor-21 .elementor-element.elementor-element-355d4d3{ margin-bottom: 26px !important; }

.elementor-21 .elementor-element.elementor-element-355d4d3 .tc-mc-cab h1{
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(22px, 2.8vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #16181C !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-355d4d3 .tc-mc-cab p{
  max-width: 62ch;
  margin: 0;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
line-height: 1.5;
    text-wrap: balance;
  color: #70757C;
}/* End custom CSS */
/* Start custom CSS for woocommerce-my-account, class: .elementor-element-5245b2d *//* ==========================================================
   TECHCELL · MINHA CONTA
   Escrito sobre os seletores nativos do WooCommerce sempre
   que possível. Onde aparece classe do Elementor
   (.e-my-account-tab*) é porque a peça só existe no widget.
   ========================================================== */

.elementor-21 .elementor-element.elementor-element-5245b2d{
  color: #55585E;

  /* os ícones, todos por máscara: vetorial, sem biblioteca carregada e
     imune à re-renderização do widget. Mesma técnica dos ícones da
     caixa de frete da página de produto. */
  --tc-i-painel:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  --tc-i-pedidos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5L12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5L12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E");
  --tc-i-end:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 10-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --tc-i-dados:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0115 0'/%3E%3C/svg%3E");
  --tc-i-sair:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5h3a2 2 0 012 2v11a2 2 0 01-2 2h-3'/%3E%3Cpath d='M9 8l-4 4 4 4M5 12h9'/%3E%3C/svg%3E");
  --tc-i-whats:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0012.04 2zm5.8 14.16c-.25.69-1.43 1.31-1.99 1.4-.51.07-1.15.1-1.86-.12-.43-.13-.98-.32-1.68-.62-2.96-1.28-4.89-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.06s.76-2.17 1.03-2.47c.27-.3.59-.37.79-.37h.57c.18 0 .43-.07.67.51.25.6.85 2.06.92 2.21.08.15.13.32.02.52-.1.2-.15.32-.3.5l-.45.52c-.15.15-.3.31-.13.61.18.3.78 1.29 1.67 2.08 1.15 1.03 2.12 1.35 2.42 1.5.3.15.47.13.65-.08.18-.2.75-.87.95-1.17.2-.3.4-.25.67-.15.27.1 1.73.82 2.03.97.3.15.5.22.57.35.07.12.07.72-.18 1.41z'/%3E%3C/svg%3E");
  --tc-i-check:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --tc-i-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --tc-i-alerta:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.1'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   0 · FONTE
   🔴 O widget imprime `.woocommerce { font-family: Roboto }`.
   Como é regra direta no filho, ela ganha da fonte herdada do
   wrapper por mais específico que ele seja. A única saída é
   declarar no mesmo lugar, e o `*` alcança tudo que já tenha
   família própria. Mesma armadilha do carrinho.
   O código de rastreio vem depois de propósito: é o único
   monoespaçado da tela, e monoespaçado aqui não é estilo, é
   função (`0` e `O` precisam ser diferentes num código que o
   cliente vai conferir com o do e-mail).
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce *{
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-cod{
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
}

/* ----------------------------------------------------------
   1 · O LAYOUT: DE FLOAT PRA GRID

   🔴 AS DUAS PRIMEIRAS LINHAS SÃO O CONSERTO MAIS IMPORTANTE
   DESTA PÁGINA, e sem elas o layout inteiro sai trocado.

   `.woocommerce-account .woocommerce::after, ::before
   { content:" "; display:table }` está no woocommerce.css. É o
   clearfix de 2013, escrito pra segurar os floats do widget.

   Num grid, pseudo com `content` vira ITEM DE GRID DE VERDADE.
   Resultado com as duas colunas ligadas: o `::before` toma a
   célula 1 (240px), o MENU cai na célula 2 (a larga), e o
   CONTEÚDO é empurrado pra linha 2 coluna 1, que é a estreita.
   Na tela isso aparece como menu largo em cima e conteúdo
   espremido embaixo, e não parece nem de longe um problema de
   pseudo-elemento.

   Mesma armadilha do `ul.order_details` na tela de pedido
   recebido, e ela se repete três vezes nesta página: aqui, no
   `#customer_login` (bloco 7) e no título do endereço (bloco 9).
   Toda vez que transformar um elemento do WooCommerce em grid
   ou flex, procure o clearfix dele ANTES.

   O `!important` no `float` também não é preguiça: a regra do
   Elementor pesa (0,4,0), igual à nossa, e empate quem decide é
   a ordem dos arquivos.

   O `:has()` é o que impede o grid de valer na tela de login,
   onde não existe menu nenhum e uma coluna de 240px vazia
   empurraria o formulário pro canto.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab .woocommerce::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab .woocommerce::after{ content: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab .woocommerce:has(.woocommerce-MyAccount-navigation){
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation{
  float: none !important;
  width: auto !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-content{
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-content-wrapper{
  padding: 0 !important;
  border: 0 !important;
  font-size: 15px !important;
}

/* ----------------------------------------------------------
   2 · O MENU LATERAL
   Mesma caixa das páginas institucionais: borda, raio 14,
   item ativo em azul claro. O site inteiro fala a mesma língua.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation{
  position: sticky;
  top: 180px;
  padding: 8px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}
/* o `gap` mora no `<ul>`, não como margem em cada `<li>`.
   O widget entrega os itens colados, e margem no item obrigaria
   a zerar a do primeiro e a do último. Com flex em coluna, o
   intervalo é uma linha só e não sobra respiro nas pontas. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li::after{ display: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li a{
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #55585E !important;
  text-decoration: none;
  transition: background .18s cubic-bezier(.4,0,.2,1),
              color .18s cubic-bezier(.4,0,.2,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li a:hover{
  background: #F4F6F8 !important;
  color: #16181C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.is-active a,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{
  background: #E8F1FA !important;
  color: #024E8C !important;
  font-weight: 600 !important;
}

/* os ícones. `::before` com máscara: a cor vem de `background`,
   então ele acompanha o `currentColor` do item ativo sozinho.

   🔴 AS QUATRO TROCAS DE ÍCONE REPETEM O CAMINHO INTEIRO
   (`.woocommerce-MyAccount-navigation ul li…`), e isso não é
   verbosidade: a regra base pesa (0,4,4) porque tem quatro
   elementos no caminho (`ul li a ::before`). Uma troca escrita
   como `.elementor-21 .elementor-element.elementor-element-5245b2d li.woocommerce-…--orders a::before` pesa
   (0,4,3): empata nas classes e PERDE no desempate de elementos.
   O sintoma é os cinco itens do menu saírem com o mesmo ícone do
   Painel, que foi o que aconteceu na primeira montagem.
   Com o caminho completo elas viram (0,5,4) e ganham. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li a::before{
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--tc-i-painel) center / contain no-repeat;
          mask: var(--tc-i-painel) center / contain no-repeat;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before{
  -webkit-mask-image: var(--tc-i-pedidos); mask-image: var(--tc-i-pedidos);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before{
  -webkit-mask-image: var(--tc-i-end); mask-image: var(--tc-i-end);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before{
  -webkit-mask-image: var(--tc-i-dados); mask-image: var(--tc-i-dados);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before{
  -webkit-mask-image: var(--tc-i-sair); mask-image: var(--tc-i-sair);
}

/* "Sair" é a única ação destrutiva da lista. Separador em cima e
   nada de azul: ela não deve competir com "Meus pedidos". */
.elementor-21 .elementor-element.elementor-element-5245b2d li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin: 0 !important;
  padding-top: 4px !important;
  border-top: 1px solid #F0F2F4;
}
/* o `margin-top` vai no `<a>` e não no `<li>` de propósito: no
   `<li>` ele empurraria a linha do separador junto, e o respiro
   tem que ficar ENTRE o traço e o botão. */
.elementor-21 .elementor-element.elementor-element-5245b2d li.woocommerce-MyAccount-navigation-link--customer-logout a{
  color: #70757C !important;
  margin-top: 4px !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{
  background: #FBEBEA !important;
  color: #B3261E !important;
}

/* ----------------------------------------------------------
   3 · O PAINEL
   🔴 Os dois parágrafos nativos ("Olá Fulano (não é Fulano?
   Sair)" e o texto de ajuda) não têm classe, não têm hook e o
   único jeito de tirá-los por PHP seria sobrescrever
   `dashboard.php` dentro do tema. `> p:not([class])` é o
   seletor que os pega sem pegar mais nada: tudo que o snippet
   imprime está dentro de `<div>`, de propósito.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__dashboard .woocommerce-MyAccount-content-wrapper > p:not([class]){
  display: none !important;
}

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-painel{ display: grid; gap: 16px; }

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card{
  padding: 20px 22px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-topo{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-eyebrow{
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9AA0A8;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-titulo{
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-titulo span{ color: #CFD5DC; font-weight: 400; }

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-bts{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-nota{
  margin: 12px 0 0 !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: #70757C !important;
}

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-vazio{ text-align: center; padding: 44px 22px; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-vazio b{
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-vazio p{
  max-width: 42ch;
  margin: 0 auto 18px !important;
  font-size: 14px;
  color: #55585E !important;
}

/* ----------------------------------------------------------
   3B · A ETIQUETA DE SITUAÇÃO
   Uma cor por família de status. `is-{status}` vem do PHP e é
   a chave interna do WooCommerce, não o nome traduzido: se
   alguém mudar a tradução, a cor continua certa.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill{
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #F0F2F4;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  color: #55585E;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-processing{ background: #E8F1FA; color: #0367B8; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-completed { background: #E7F4EE; color: #0B7A4B; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-pending,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-on-hold  { background: #FDF6E8; color: #8A5C05; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-failed,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-cancelled,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-pill.is-refunded { background: #FBEBEA; color: #B3261E; }

/* ----------------------------------------------------------
   3C · AS ETAPAS
   O mesmo desenho da tela de pedido recebido, e é de propósito:
   quem comprou viu esta régua uma vez e reencontra a mesma
   aqui. O `gap: 1px` com fundo cinza no pai é o que desenha as
   divisórias sem `border`, que quebraria na quebra de linha.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid #E3E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #E3E7EB;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 15px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa-ico{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #F0F2F4;
  position: relative;
}
/* 🔴 O TEXTO É MIRADO PELO `.tc-mc-etapa-txt`, NÃO POR
   `.tc-mc-etapa span`. O ícone também é `<span>`, e o seletor
   genérico pesaria (0,4,1) contra os (0,4,0) do específico:
   empatam nas classes e o elemento desempata a favor do
   genérico. Nomear o wrapper custa uma classe e resolve sem
   `!important`. Mesma pegadinha da tela de pedido recebido. */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa-ico::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: #9AA0A8;
  -webkit-mask: var(--tc-i-relogio) center / contain no-repeat;
          mask: var(--tc-i-relogio) center / contain no-repeat;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa-txt b{
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa-txt span{
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #70757C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-feita .tc-mc-etapa-ico{ background: #E7F4EE; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-feita .tc-mc-etapa-ico::after{
  background: #0B7A4B;
  -webkit-mask-image: var(--tc-i-check); mask-image: var(--tc-i-check);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-agora{ background: #F5F9FD; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-agora .tc-mc-etapa-ico{ background: #0367B8; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-agora .tc-mc-etapa-ico::after{ background: #fff; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-erro .tc-mc-etapa-ico{ background: #FBEBEA; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapa.is-erro .tc-mc-etapa-ico::after{
  background: #B3261E;
  -webkit-mask-image: var(--tc-i-alerta); mask-image: var(--tc-i-alerta);
}
/* uma etapa só (pedido cancelado): ela ocupa a linha inteira */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapas:has(.tc-mc-etapa:only-child){ grid-template-columns: 1fr; }

/* na tela do pedido a régua respira mais */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapas-larga{ margin: 0 0 16px; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapas-larga .tc-mc-etapa{ padding: 16px 18px; }

/* ----------------------------------------------------------
   3D · A CAIXA DO CÓDIGO DE RASTREIO
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #E3E7EB;
  border-left: 3px solid #0367B8;
  border-radius: 12px;
  background: #F5F9FD;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-rot{
  flex: 0 0 100%;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #70757C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-cod{
  padding: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #16181C;
}
/* 🔴 `button` NASCE ROSA. O reset.css do Hello Elementor traz
   `button{border:1px solid #c36;color:#c36}` e
   `button:focus,button:hover{background-color:#c36}`. A segunda
   pesa (0,1,1) e ganha de qualquer classe sozinha, e `:focus`
   dispara sozinho depois do clique. Por isso os três estados
   levam `!important`, não só o padrão. */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar:focus{
  padding: 6px 12px !important;
  border: 1px solid #CFD5DC !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #16181C !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar:hover{ border-color: #0367B8 !important; color: #0367B8 !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar.is-feito,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar.is-feito:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-copiar.is-feito:focus{
  border-color: #0B7A4B !important;
  background: #E7F4EE !important;
  color: #0B7A4B !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-link{
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #0367B8 !important;
  text-decoration: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-link:hover{ text-decoration: underline; }

/* ----------------------------------------------------------
   3E · OS ATALHOS DO PAINEL

   🔴 QUATRO COLUNAS FIXAS, NÃO `auto-fit`. Com
   `repeat(auto-fit, minmax(215px, 1fr))` a conta que o navegador
   faz é 4 × 215 + 3 × 12 = 896px, e a coluna de conteúdo tem
   790px: não cabendo o quarto, ele cai sozinho pra linha de
   baixo e fica um card órfão embaixo de três. `auto-fit` é ótimo
   quando a quantidade de itens varia; aqui são quatro fixos e
   desenhados pra ficarem na mesma linha.

   O cartão passou a ser VERTICAL (ícone em cima, texto embaixo)
   porque a 187px de largura o texto ao lado do ícone sobraria
   com 115px e "WhatsApp (11) 97635-4823" quebraria em três
   linhas. Empilhado, o texto usa a largura toda do cartão.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalhos{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-atalho{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
  text-decoration: none !important;
  transition: border-color .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-atalho:hover{
  border-color: #0367B8;
  box-shadow: 0 6px 20px rgba(6,43,77,.08);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho-ico{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E8F1FA;
  position: relative;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho-ico::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 19px;
  height: 19px;
  background: #0367B8;
  -webkit-mask: var(--tc-i-pedidos) center / contain no-repeat;
          mask: var(--tc-i-pedidos) center / contain no-repeat;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho--endereco .tc-mc-atalho-ico::after{
  -webkit-mask-image: var(--tc-i-end); mask-image: var(--tc-i-end);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho--dados .tc-mc-atalho-ico::after{
  -webkit-mask-image: var(--tc-i-dados); mask-image: var(--tc-i-dados);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho--whats .tc-mc-atalho-ico{ background: #E7F4EE; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho--whats .tc-mc-atalho-ico::after{
  background: #1B7A43;
  -webkit-mask-image: var(--tc-i-whats); mask-image: var(--tc-i-whats);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho-txt b{
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalho-txt span{
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #70757C;
}

/* ----------------------------------------------------------
   4 · A LISTA DE PEDIDOS: DE TABELA PRA CARDS
   O cabeçalho da tabela sai inteiro: cada card já diz o que é
   cada coisa, e uma linha de cabeçalho sobre cards soltos é
   ruído. Mesma decisão da lista do carrinho.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-orders-table{
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-orders-table thead{ display: none !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-orders-table tbody{ display: block; }

.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "num  sit"
    "rast rast"
    "tot  act";
  align-items: center;
  margin: 0 0 12px;
  padding: 16px 18px;
  border: 1px solid #E3E7EB !important;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell{
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
  font-size: 14px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-number { grid-area: num; }
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-status { grid-area: sit; justify-self: end; }
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-rastreio{ grid-area: rast; }
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-total  { grid-area: tot; }
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions{ grid-area: act; justify-self: end; }

/* o modo responsivo do WooCommerce imprime o nome da coluna
   antes do valor com `content: attr(data-title)`. Nos cards
   isso vira "Pedido#1234", tudo grudado. */
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell::before{ display: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-ped-num{
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C !important;
  text-decoration: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-ped-num:hover{ color: #0367B8 !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-ped-meta{
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #70757C;
}

/* a situação vira etiqueta. A cor vem da classe do `<tr>`, que
   o WooCommerce escreve como `--status-processing`. É a chave
   interna, não o nome traduzido. */
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-status{
  padding: 5px 12px !important;
  border-radius: 999px;
  background: #F0F2F4 !important;
  font-size: 12.5px !important;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  color: #55585E !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status{
  background: #E8F1FA !important; color: #0367B8 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status{
  background: #E7F4EE !important; color: #0B7A4B !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status,
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status{
  background: #FDF6E8 !important; color: #8A5C05 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status,
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
.elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status{
  background: #FBEBEA !important; color: #B3261E !important;
}

/* 🔴 A CÉLULA DE RASTREIO VAZIA SOME COM `:not(:has(*))`, NÃO
   COM `:empty`. O `<td>` é impresso pelo template do WooCommerce
   com quebras de linha dentro dele, então ele NUNCA está vazio
   pro `:empty`: espaço em branco é conteúdo. `:not(:has(*))` lê
   "nenhum filho que seja elemento", que é exatamente o caso
   quando a função do 4C não imprime nada. */
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-rastreio:not(:has(*)){ display: none; }
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-rastreio{
  margin-top: 14px;
  padding-top: 14px !important;
  border-top: 1px solid #F0F2F4 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-rastreio .tc-mc-rastreio{ margin-top: 0; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-ped-espera{
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: #70757C;
}

.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-total,
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions{
  margin-top: 14px;
  padding-top: 14px !important;
  border-top: 1px solid #F0F2F4 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-total{
  font-size: 15px;
  font-weight: 700;
  color: #16181C !important;
}

/* os botões de ação nativos ("Ver", "Pagar", "Cancelar") */
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions a.woocommerce-button{
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-left: 8px;
  padding: 0 16px !important;
  border: 1.5px solid #CFD5DC !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #16181C !important;
  text-decoration: none;
  transition: border-color .2s cubic-bezier(.16,1,.3,1), color .2s cubic-bezier(.16,1,.3,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover{
  border-color: #0367B8 !important;
  color: #0367B8 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.pay{
  border-color: #0367B8 !important;
  background: #0367B8 !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   4B · OS DOIS AVISOS DA ABA DE PEDIDOS

   São dois, e é fácil achar que é um:

   1. "Você ainda não fez nenhum pedido por aqui" + Ver produtos
   2. "Confirme seu endereço de e-mail para procurar pedidos
      anteriores e vinculá-los à sua conta" + botão

   O segundo é do WooCommerce novo e serve exatamente pra esta
   loja: quem comprou como visitante pode puxar aqueles pedidos
   pra dentro da conta. Vale manter. Ele nasce em inglês porque a
   tradução pt_BR ainda não cobre essas strings, e quem traduz é
   o bloco 8 do snippet.

   🔴 O `order: 2` NO BOTÃO É O QUE ARRUMA A ORDEM. Nos dois
   avisos o WooCommerce monta a string do jeito dele, e num
   deles o `<a class="button">` vem ANTES do texto, o que
   desenha o botão em cima da frase que o explica. Texto puro
   dentro de um flex vira item anônimo com `order: 0`, então
   basta mandar o botão pro fim. Sem flex, `order` não faz nada.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-info::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-info::after,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-message::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-message::after{ content: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-info,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-message{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px !important;
  padding: 40px 22px !important;
  border: 1px dashed #CFD5DC !important;
  border-left: 1px dashed #CFD5DC !important;
  border-radius: 14px;
  background: #fff !important;
  font-size: 14px;
  line-height: 1.6;
  color: #55585E !important;
  text-align: center;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-info a.button,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-message a.button{
  order: 2;
  display: inline-flex !important;
  align-items: center;
  float: none !important;
  height: 46px;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #0367B8 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s cubic-bezier(.16,1,.3,1);
}
/* 🔴 SEM ESTA REGRA OS DOIS BOTÕES NÃO TÊM HOVER NENHUM.
   Eles são `<a class="button">`, não `<button>`, e o grupo de
   três estados do bloco 8 mira `button.button` e
   `input[type=submit]`. Nenhum dos dois alcança um link, então
   esses dois botões ficavam parados no mouse enquanto todo o
   resto da página reagia. */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-info a.button:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__orders .woocommerce-message a.button:hover{
  background: #024E8C !important;
  color: #fff !important;
}

/* a paginação, quando passar de 10 pedidos */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-pagination{ margin-top: 18px; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-pagination a.button,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-pagination .button{
  height: 40px;
  padding: 0 16px !important;
  border: 1.5px solid #CFD5DC !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #16181C !important;
}

/* ----------------------------------------------------------
   5 · A TELA DE UM PEDIDO
   O parágrafo nativo ("O pedido #1234 foi feito em … e está
   atualmente …") sai: o H1 já diz número e data, e o herói diz
   a situação melhor. Mesmo seletor `> p:not([class])` do painel,
   e pela mesma razão: ele não tem classe nem hook.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__view-order .woocommerce-MyAccount-content-wrapper > p:not([class]){
  display: none !important;
}

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid #B8DFCB;
  border-left: 3px solid #0B7A4B;
  border-radius: 14px;
  background: #E7F4EE;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi-ico{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #0B7A4B;
  position: relative;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi-ico::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 19px;
  height: 19px;
  background: #fff;
  -webkit-mask: var(--tc-i-check) center / contain no-repeat;
          mask: var(--tc-i-check) center / contain no-repeat;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi b{
  display: block;
  margin-bottom: 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi > div > span{
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #3C4149;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--espera{
  border-color: #F0DCB0;
  border-left-color: #B4780A;
  background: #FDF6E8;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--espera .tc-mc-heroi-ico{ background: #B4780A; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--espera .tc-mc-heroi-ico::after{
  -webkit-mask-image: var(--tc-i-relogio); mask-image: var(--tc-i-relogio);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--erro{
  border-color: #F2C9C6;
  border-left-color: #B3261E;
  background: #FBEBEA;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--erro .tc-mc-heroi-ico{ background: #B3261E; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-heroi--erro .tc-mc-heroi-ico::after{
  -webkit-mask-image: var(--tc-i-alerta); mask-image: var(--tc-i-alerta);
}

/* as tabelas do pedido: mesmo desenho da tela de pedido recebido */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-order-details,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-customer-details{
  margin: 18px 0 0;
  padding: 20px 22px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-order-details h2,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-customer-details h2,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-column__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: #16181C !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details{
  width: 100%;
  border: 0 !important;
  border-collapse: separate;
  font-size: 14px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details th,
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details td{
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #F0F2F4 !important;
  background: none !important;
  text-align: left;
  vertical-align: top;
}
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details thead th{
  font-size: 12px;
  font-weight: 600;
  color: #70757C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details thead th.product-total{ text-align: right; }
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details td.woocommerce-table__product-total,
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details tfoot td{ text-align: right; }
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details tfoot th{
  font-weight: 400;
  color: #55585E !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details tfoot tr:last-child th,
.elementor-21 .elementor-element.elementor-element-5245b2d table.woocommerce-table--order-details tfoot tr:last-child td{
  border-bottom: 0 !important;
  font-size: 16px;
  font-weight: 700;
  color: #16181C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-order-details a{
  color: #16181C !important;
  text-decoration: none;
  font-weight: 500;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-order-details a:hover{ color: #0367B8 !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d address{
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: #55585E !important;
  height: auto !important;
}

/* as notas do pedido, quando o Tiago escreve alguma */
.elementor-21 .elementor-element.elementor-element-5245b2d ul.woocommerce-OrderUpdates{
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d li.woocommerce-OrderUpdate{
  margin: 0 0 10px !important;
  padding: 14px 16px;
  border: 1px solid #E3E7EB;
  border-left: 3px solid #0367B8;
  border-radius: 12px;
  background: #F5F9FD;
  font-size: 13.5px;
}

.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-acoes{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ----------------------------------------------------------
   6 · OS BOTÕES DO SNIPPET
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s cubic-bezier(.16,1,.3,1),
              border-color .2s cubic-bezier(.16,1,.3,1),
              color .2s cubic-bezier(.16,1,.3,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-azul{
  background: #0367B8;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(6,43,77,.05);
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-azul:hover{ background: #024E8C; color: #fff !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-linha{
  background: #fff;
  color: #16181C !important;
  border: 1.5px solid #CFD5DC;
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-linha:hover{ border-color: #0367B8; color: #0367B8 !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-wpp{
  background: #fff;
  border: 1.5px solid #25A65B;
  color: #1B7A43 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-bt-wpp:hover{ background: #EFFAF3; border-color: #1B7A43; }

/* ----------------------------------------------------------
   7 · ENTRAR E CRIAR CONTA
   As duas colunas do WooCommerce viram grid. Sem registro
   habilitado o `#customer_login` nem existe, e o formulário de
   login sai sozinho, centrado, com no máximo 460px.

   🔴 O `#customer_login` também carrega a classe `col2-set`, e
   `.woocommerce .col2-set::after, ::before{content:" ";
   display:table}` está no woocommerce-layout.css. Sem matar os
   dois, o `::before` toma a primeira célula do grid, "Entrar"
   vai pra segunda (a direita) e "Criar conta" cai na linha de
   baixo à esquerda. É o mesmo clearfix do bloco 1, a segunda
   das três vezes que ele morde nesta página.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login.u-columns::before,
.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login.u-columns::after{ content: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login.u-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 !important;
  align-items: start;
}
.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login .u-column1,
.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login .u-column2{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d #customer_login h2{
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: #16181C !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
}
/* sem registro habilitado, o formulário de login vem solto */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce > form.woocommerce-form-login{
  max-width: 460px;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid #E3E7EB !important;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-form-login,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-form-register{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 🔴 O "PÉ MAIOR QUE A CABEÇA" DOS TRÊS CARDS.
   O último `<p>` de cada formulário carrega os 14px de margem
   inferior que a regra genérica de `.form-row` dá a todos. Eles
   somam com o `padding: 24px` do card e o rodapé fica 38px
   contra 24px do topo. Zerar só o último resolve, e `:last-of-type`
   é o seletor certo porque depois dele ainda vem o campo oculto
   do nonce, que `:last-child` pegaria em vez do parágrafo. */
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-form-login > p:last-of-type,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-form-register > p:last-of-type,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-ResetPassword > p:last-of-type{
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------
   7B · RECUPERAR SENHA
   `form.woocommerce-ResetPassword` não tinha regra nenhuma, e
   por isso a caixa herdava a borda e o padding do Elementor,
   sem raio de canto. Ela é o mesmo card do login.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-ResetPassword{
  max-width: 460px;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid #E3E7EB !important;
  border-radius: 14px !important;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-ResetPassword > p:first-of-type{
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 1.6;
  color: #55585E !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-ResetPassword p.form-row-first{
  width: 100% !important;
  float: none !important;
}

/* o `<div class="clear">` que o WooCommerce ainda imprime entre
   os campos pra fechar float. Em grid e em flex ele vira item e
   abre um vão do nada. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .clear{ display: none !important; }

/* ----------------------------------------------------------
   8 · TODOS OS FORMULÁRIOS
   Login, cadastro, endereço, dados da conta e o formulário de
   rastreio do visitante usam a mesma linguagem de campo do
   checkout: 46px de altura, raio 10, foco azul com anel.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-row,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce p.form-row,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields p.form-row{
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce label,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .form-row label{
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #16181C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce label .required{ color: #B3261E; text-decoration: none; border: 0; }

/* 🔴 `form-row-first` E `form-row-last` VALEM 47% DA LARGURA.
   `.woocommerce form .form-row-first{ width:47%; float:left }`
   está no woocommerce-layout.css, e é o layout de duas colunas
   por float que o WooCommerce usa desde sempre.

   Dentro de um grid o `float` é ignorado, mas a **largura não**:
   o campo continua ocupando 47% da célula que já era estreita, e
   o resto vira espaço vazio. É por isso que o e-mail da caixa de
   rastreio saía com metade do tamanho e o placeholder cortado no
   meio da palavra.

   A regra vale pro widget inteiro de uma vez: rastreio, endereço,
   dados da conta e recuperar senha usam as mesmas classes. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce p.form-row-first,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce p.form-row-last,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce p.form-row-wide,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields p.form-row-first,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields p.form-row-last{
  width: 100% !important;
  float: none !important;
}

/* ⚠️ `select:not(.select2-hidden-accessible)`, e não só `select`.
   Onde o Select2 age, o `<select>` original continua no HTML,
   escondido, e é ele que carrega o valor enviado no formulário.
   Miralo junto com os campos visíveis é pedir para um dia
   alguma propriedade nossa tirá-lo do lugar onde o Select2 o
   escondeu. Regra do projeto, já anotada no CLAUDE.md.

   O `.select2-selection--single` entra na MESMA lista dos
   campos de texto de propósito: é ele que o cliente vê no lugar
   do `<select>`, e ele tem que nascer com a mesma altura, a
   mesma borda e o mesmo raio, senão o campo Estado fica com
   dois dedos de diferença dos vizinhos. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input.input-text,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="text"],
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="email"],
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="tel"],
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="password"],
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce select:not(.select2-hidden-accessible),
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce textarea,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .select2-selection--single{
  width: 100%;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1.5px solid #E3E7EB !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14.5px !important;
  color: #16181C !important;
  box-shadow: none !important;
  transition: border-color .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce textarea{ height: auto !important; padding: 12px 14px !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input.input-text:focus,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce select:not(.select2-hidden-accessible):focus,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce textarea:focus,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .select2-container--focus .select2-selection--single,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .select2-container--open .select2-selection--single{
  border-color: #0367B8 !important;
  box-shadow: 0 0 0 3px rgba(3,103,184,.12) !important;
  outline: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input.input-text::placeholder{ color: #9AA0A8; opacity: 1; }

/* 🔴 O TEXTO DO ESTADO SAÍA TORTO POR CAUSA DESTAS TRÊS LINHAS,
   e o `padding: 0` é a mais importante das três.

   O Select2 desenha o valor escolhido num `<span
   class="select2-selection__rendered">` DENTRO do
   `.select2-selection--single`. O padding de 14px já está no
   pai (regra acima); deixar o padding do Select2 valendo aqui
   dentro soma duas vezes e empurra o texto.

   E a altura: o Select2 de fábrica manda `line-height: 28px`,
   calculado pro campo de 28px do tema padrão dele. Num campo de
   46px isso deixa o texto colado no topo. Como o `<span>` não
   tem altura própria, quem centraliza é a entrelinha, e ela tem
   que ser 46 menos as duas bordas de 1,5 = 44. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .select2-selection__rendered{
  line-height: 44px !important;
  padding: 0 !important;
  color: #16181C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .select2-selection__arrow{ height: 44px !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .woocommerce-invalid .select2-selection--single{
  border-color: #C8342A !important;
}

/* cidade e estado trancados quando o CEP resolve.
   O estado é trancado por CLASSE e não por `disabled`: campo
   desabilitado não é enviado no formulário e o endereço
   salvaria sem UF. */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado{ opacity: .72; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado .select2-container,
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado select:not(.select2-hidden-accessible){ pointer-events: none; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado .select2-selection--single{
  background: #F4F6F8 !important;
  border-color: #E3E7EB !important;
  color: #55585E !important;
  box-shadow: none !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado .select2-selection__arrow{ opacity: .35; }
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado input[readonly],
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-travado input{ background: #F4F6F8 !important; cursor: default; }

/* ----------------------------------------------------------
   8C · O "S/N" DENTRO DO CAMPO NÚMERO

   🔴 O CASO EM QUE `!important` NÃO GANHA. Mesmo defeito já
   resolvido no checkout (bloco 5 de
   pagina-checkout-elementor.md), e ele reaparece aqui porque o
   formulário de endereço da conta usa o mesmo campo do mesmo
   plugin.

   O "S/N" não vem no HTML: quem monta é o
   `…PublicShortNumberField.COMPILED.js` da Link Nacional,
   depois que a página carrega, e ele escreve os estilos **no
   atributo `style` de cada peça, com `!important`**. Uma delas é
   `width: auto !important` no checkbox.

   Estilo em linha com `!important` ganha de folha de autor com
   `!important`. Não é especificidade, é origem na cascata: o
   atributo `style` é ordenado depois de todas as regras de
   autor. Por isso o `width: 18px !important` do bloco 8B perde,
   e com `appearance: none` (que não tem largura intrínseca) o
   checkbox colapsa pra zero. O que sobra na tela é um tracinho
   de 1,5px: as duas bordas laterais encostadas.

   A saída é atacar por outra propriedade. `min-width` e
   `max-width` não estão no atributo `style` e clampam a largura
   usada mesmo com `width: auto`.

   🔴 E A CAIXA AQUI É DE 14px, NÃO 18px COMO AS OUTRAS. O
   wrapper é `inline-flex` com `align-items: flex-end` inline: a
   caixa é o item mais alto, então ELA define a altura da linha e
   já nasce centrada no campo. Quem fica baixo é o texto "S/N",
   alinhado pela base. Não dá pra levantar o texto (margem e
   padding também são inline), então o conserto é igualar as
   alturas: com a caixa em 14px a diferença cai de 3px pra 1px.
   Empurrar a caixa com `transform` "alinha os dois" e tira do
   centro justamente o que se queria centrar. */
.elementor-21 .elementor-element.elementor-element-5245b2d #lkn_billing_checkbox,
.elementor-21 .elementor-element.elementor-element-5245b2d #lkn_shipping_checkbox{
  min-width: 14px !important;
  max-width: 14px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d #lkn_billing_checkbox:checked::after,
.elementor-21 .elementor-element.elementor-element-5245b2d #lkn_shipping_checkbox:checked::after{
  -webkit-mask-size: 10px !important;
          mask-size: 10px !important;
}
/* o script escreve `padding-right: 72px` no campo pra abrir
   espaço pro S/N, e a nossa regra de campo (com `!important`)
   apaga isso, porque atributo `style` SEM `!important` perde pra
   folha com `!important`. É a mesma cascata da regra de cima, só
   que agora a favor. Devolver o espaço à mão é o que impede o
   número digitado de passar por baixo do "S/N". */
.elementor-21 .elementor-element.elementor-element-5245b2d #billing_number,
.elementor-21 .elementor-element.elementor-element-5245b2d #shipping_number{ padding-right: 76px !important; }
/* com o S/N marcado o script põe `readonly` e opacidade no
   campo. O fundo cinza é o mesmo do `.tc-travado`, pra "campo
   que não se digita" ter uma aparência só na página. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input.input-text[readonly]{
  background: #F4F6F8 !important;
  border-color: #E3E7EB !important;
}

/* ----------------------------------------------------------
   8D · A LISTA ABERTA DO SELECT2

   🔴 ESTE BLOCO NÃO USA `.elementor-21 .elementor-element.elementor-element-5245b2d`, E ISSO É DE PROPÓSITO.
   Quando o campo Estado abre, o Select2 não mostra a lista
   dentro do formulário: ele cria um `<span>` novo e pendura
   como **filho direto de `<body>`**:

     body
       └ span.select2-container.select2-container--default
           └ span.select2-dropdown.select2-dropdown--below
               ├ span.select2-search--dropdown > input.select2-search__field
               └ span.select2-results > ul.select2-results__options
                                          └ li.select2-results__option

   Como ele nasce fora do widget, tudo que começa com `.elementor-21 .elementor-element.elementor-element-5245b2d`
   (que vira `.elementor-21 .elementor-element-XXXX`) passa
   longe. É por isso que o campo já estava estilizado e a lista
   continuava com a cara de fábrica: o campo está dentro, a
   lista está fora.

   **E não vaza pro resto do site.** Este CSS mora no campo do
   widget, então o Elementor compila ele dentro de `post-21.css`,
   que só carrega em `/minha-conta/`. O `>` importa: sem ele o
   seletor alcançaria também o container que fica ao lado do
   campo, no meio do formulário.

   Bloco idêntico ao 5B do checkout, de propósito: a mesma lista
   com a mesma cara nas duas páginas.

   ⚠️ `font-family` aparece repetido em cada seletor. Não é
   descuido: herança **perde** de regra explícita, sempre, e o
   Kit do Elementor declara `Roboto` direto em cada `<li>` da
   página. Declarar só no `.select2-dropdown` e esperar que desça
   por herança não funciona. */
body > .select2-container .select2-dropdown{
  margin-top: 8px;
  border: 1px solid #E3E7EB !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 14px 40px rgba(6,43,77,.12);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* quando não cabe embaixo, o Select2 joga a lista pra cima:
   o respiro tem que ir pro outro lado */
body > .select2-container .select2-dropdown--above{ margin-top: -8px; }

/* a busca. O ícone de lupa é SVG nosso, em `background` e
   `padding-left` juntos, pra não precisar de elemento extra. */
body > .select2-container .select2-search--dropdown{ padding: 0 !important; }
body > .select2-container .select2-search__field{
  height: 40px;
  padding: 0 14px 0 36px !important;
  border: 0 !important;
  border-bottom: 1px solid #E3E7EB !important;
  border-radius: 0 !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 12px center / 14px !important;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 40px !important;
  color: #16181C !important;
  box-shadow: none !important;
  outline: none !important;
}
body > .select2-container .select2-search__field::placeholder{ color: #9AA0A8; opacity: 1; }
body > .select2-container .select2-search__field:focus{ background-color: #F4F6F8 !important; }

/* a lista */
body > .select2-container .select2-results__options{
  max-height: 240px !important;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #CFD5DC transparent;
}
body > .select2-container .select2-results__options::-webkit-scrollbar{ width: 10px; }
body > .select2-container .select2-results__options::-webkit-scrollbar-track{ background: transparent; }
body > .select2-container .select2-results__options::-webkit-scrollbar-thumb{
  background: #CFD5DC;
  border: 3px solid #fff;
  border-radius: 999px;
}
body > .select2-container .select2-results__option{
  padding: 9px 12px !important;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  color: #16181C !important;
}

/* `--highlighted` é a linha sob o cursor (mouse ou seta do
   teclado). O azul chapado de fábrica é `#0073AA`, o do painel
   do WordPress, com texto cinza por cima: é o contraste ruim
   que aparece antes deste bloco. */
body > .select2-container .select2-results__option--highlighted{
  background: #F4F6F8 !important;
  color: #16181C !important;
}

/* 🔴 O item já escolhido vem DEPOIS de propósito, e com mais
   peso. Ao abrir, o Select2 marca o escolhido como
   `--highlighted` também: se as duas regras empatassem, o "Rio
   de Janeiro" que já está selecionado apareceria igual a
   qualquer outro. Os três seletores cobrem as duas versões do
   Select2 que circulam no WooCommerce (4.0 usa `aria-selected`,
   4.1 usa `data-selected` e a classe `--selected`). */
body > .select2-container .select2-results__option[aria-selected="true"],
body > .select2-container .select2-results__option[data-selected="true"],
body > .select2-container .select2-results__option--selected{
  background: #E8F1FA !important;
  color: #062B4D !important;
  font-weight: 600;
}
body > .select2-container .select2-results__message,
body > .select2-container .select2-results__option[role="alert"]{
  padding: 12px !important;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  color: #70757C !important;
}

/* celular: a lista encolhe pra caber acima do teclado, que
   ocupa metade da tela quando a busca recebe o foco */
@media (max-width: 560px){
  body > .select2-container .select2-results__options{ max-height: 180px !important; }
}

/* ----------------------------------------------------------
   8B · A CAIXA DE MARCAR
   A mesma do checkout (bloco 4B de
   pagina-checkout-elementor.md), palavra por palavra, pra o
   "Continuar conectado" daqui ser o mesmo desenho do "Criar uma
   conta?" de lá.

   `accent-color` não serve: ele só pinta o quadradinho que o
   sistema operacional desenha, e no Windows sai um azul chapado
   de canto reto. Com `appearance: none` a caixa passa a ser
   desenhada aqui e o check vem de máscara SVG.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #CFD5DC !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer;
  vertical-align: -3px;
  transition: border-color .18s cubic-bezier(.16,1,.3,1),
              background .18s cubic-bezier(.16,1,.3,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d input[type="checkbox"]:hover{ border-color: #0367B8 !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d input[type="checkbox"]:checked{
  border-color: #0367B8 !important;
  background: #0367B8 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.3'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.3'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.elementor-21 .elementor-element.elementor-element-5245b2d input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(3,103,184,.13);
}

/* 🔴 `display: flex` NA LABEL PRECISA DE `!important`, e é a
   causa do "Continuar conectado" sair desalinhado. A regra
   genérica de rótulo deste bloco é `.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce label`,
   que pesa (0,4,1) por causa do elemento `label`, e manda
   `display: block`. A regra da caixa de marcar é
   `.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-login__rememberme`, uma classe só,
   (0,4,0): perde no desempate de elemento e o flex nunca entra.

   O `.form-row` também traz o clearfix
   (`.woocommerce form .form-row::after, ::before`), que viraria
   dois itens de flex e comeria dois `gap` de 8px. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-login__rememberme::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-login__rememberme::after{ content: none !important; }
.elementor-21 .elementor-element.elementor-element-5245b2d label.woocommerce-form__label-for-checkbox,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-login__rememberme{
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #55585E !important;
  cursor: pointer;
}

/* 🔴 O QUE DE FATO DESALINHA O TEXTO DA CAIXA.
   O rótulo mora num `<span>` dentro da label, e alguma folha do
   WooCommerce empurra esse span com `position: relative; top: 2px`.
   É um ajuste ótico que faz sentido quando o par é `inline` e se
   alinha pela linha de base; dentro de um flex com
   `align-items: center` ele vira desalinhamento puro, porque o
   flex já centralizou e o `top` desloca depois.

   Nem `align-items`, nem `vertical-align`, nem `!important` na
   label alcançam isso: o deslocamento acontece no filho, depois
   do layout. Medido no checkout em 10/08/2026. */
.elementor-21 .elementor-element.elementor-element-5245b2d label.woocommerce-form__label-for-checkbox > span,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-form-login__rememberme > span{
  position: static !important;
  top: auto !important;
  line-height: 1.4;
}

/* 🔴 OS BOTÕES DE ENVIAR SÃO `<button>` E NASCEM ROSA.
   Mesma regra do reset.css do Hello Elementor do bloco 3D:
   `button:focus, button:hover { background-color: #c36 }` pesa
   (0,1,1) e o `:focus` dispara sozinho depois do clique.
   Os três estados, sempre. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce button.button,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce button.button:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce button.button:focus,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="submit"],
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="submit"]:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="submit"]:focus{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 46px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #0367B8 !important;
  background-image: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .2s cubic-bezier(.16,1,.3,1);
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce button.button:hover,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce input[type="submit"]:hover{ background: #024E8C !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-LostPassword{
  margin: 12px 0 0 !important;
  font-size: 13px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-LostPassword a{
  color: #0367B8 !important;
  font-weight: 500;
  text-decoration: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-LostPassword a:hover{ text-decoration: underline; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-privacy-policy-text p{
  margin: 12px 0 0 !important;
  font-size: 12.5px;
  line-height: 1.6;
  color: #70757C !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-privacy-policy-text a{ color: #0367B8 !important; }

/* o olho de mostrar senha, que o WooCommerce já entrega.

   🔴 O NATIVO É `top: .7em`, QUE NÃO CENTRALIZA NADA. Ele foi
   calculado pro campo baixo do tema padrão; num campo de 46px
   ele encosta na borda de cima. E não adianta trocar por um
   número fixo nosso: no dia que a altura do campo mudar, o
   desalinho volta. `top: 50%` com `translateY(-50%)` centraliza
   sozinho, seja qual for a altura.

   O `line-height: 0` é o que impede a caixa do ícone de herdar
   a entrelinha do parágrafo e ficar mais alta que o desenho,
   que é o que faz "centralizado" parecer um pouco pra baixo. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .password-input{ display: block; position: relative; }
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce .show-password-input{
  position: absolute !important;
  right: 12px;
  top: 50% !important;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  color: #9AA0A8;
}

/* ----------------------------------------------------------
   9 · ENDEREÇO E DADOS DA CONTA

   🔴 O "EDITAR" EM CIMA DO TÍTULO NÃO É O CLEARFIX, É
   `position: absolute` DO ELEMENTOR. Medido no CSS dele:

     .elementor-widget-woocommerce-my-account
     .e-my-account-tab:not(.e-my-account-tab__dashboard--custom)
     .woocommerce-Address .edit{
       float: inline-start;
       margin-inline-start: var(--edit-link-margin-start, 30px);
       margin-top: var(--edit-link-margin-top, 10px);
       position: absolute;
     }

   Elemento absoluto **não é item de flex**: ele sai do fluxo,
   ignora `justify-content` e ancora na posição estática dele,
   que é logo abaixo do título. Nenhum `display: flex` no pai ia
   consertar isso, e foi por acreditar nisso que a primeira
   tentativa não mudou nada. O conserto é devolver o link pro
   fluxo com `position: static` e zerar as duas margens dele.

   O `address` também vem com `padding: 45px 30px 16px 30px` do
   Elementor, que é o vão morto no topo da caixa do endereço.

   E o clearfix do `.title` continua valendo pra quando o
   cabeçalho virar flex, então ele também morre aqui.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title::after,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Addresses::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Addresses::after{ content: none !important; }

/* a frase "Os endereços a seguir serão usados…", que nasce como
   parágrafo solto acima do card */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__edit-address .woocommerce-MyAccount-content-wrapper > p:not([class]){
  max-width: 62ch;
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 1.6;
  color: #70757C !important;
}

.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Addresses{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address{
  width: auto !important;
  float: none !important;
  padding: 20px 22px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .title,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title{
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .title h2,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .title h3,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title h2,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title h3{
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: #16181C !important;
}

/* 🔴 As três primeiras linhas desfazem o `position: absolute` do
   Elementor. Sem elas o link fica fora do fluxo e cai por cima
   do título, e nenhum ajuste no pai alcança ele. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .edit,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title a.edit{
  position: static !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #0367B8 !important;
  text-decoration: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .edit:hover{ text-decoration: underline; }

/* o rótulo longo que existe só pro leitor de tela ("Editar
   Endereço de entrega e cobrança"). Quem costuma escondê-lo é o
   tema, e o Hello não esconde dentro do widget. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .screen-reader-text,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .edit .screen-reader-text{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* o `padding: 45px 30px 16px 30px` do Elementor vira o vão morto
   no topo do endereço */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address address{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ⚠️ `woocommerce-address-fields` É CLASSE DE UMA `<div>` DENTRO
   DO FORM, NÃO DO `<form>`. O `<form method="post">` do
   `form-edit-address.php` não tem classe nenhuma. Escrever
   `form.woocommerce-address-fields` não casa com nada, e foi por
   isso que a caixa do formulário de endereço saiu sem raio de
   canto enquanto a de "Meus dados" (que é
   `form.woocommerce-EditAccountForm`, aí sim um form com classe)
   saiu certa. */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm{
  padding: 22px;
  border: 1px solid #E3E7EB;
  border-radius: 14px;
  background: #fff;
}

/* o título do formulário de edição, que nasce fora da caixa.
   ⚠️ É `<h2>`, não `<h3>`. Medido no HTML do site:
   `<form method="post" novalidate><h2>Endereço de entrega e
   cobrança</h2>`. Escrito só como `h3`, ele ficava com a
   tipografia crua do Kit do Elementor, do tamanho de um título
   de página. */
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__edit-address form h2,
.elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab__edit-address form h3{
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
  color: #16181C !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm fieldset{
  margin: 22px 0 0 !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #F0F2F4 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm legend{
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields p.form-row-first,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields p.form-row-last,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-EditAccountForm p.form-row-first,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-EditAccountForm p.form-row-last{
  width: 100% !important;
  float: none !important;
}
/* duas colunas onde couber, sem float */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields__field-wrapper,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm > fieldset,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm > p.woocommerce-form-row--wide,
.elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm > p:last-of-type,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields__field-wrapper > p.form-row-wide{
  grid-column: 1 / -1;
}

/* ----------------------------------------------------------
   10 · A CAIXA DE RASTREIO DO VISITANTE
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-guest{
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #E3E7EB;
  border-left: 3px solid #0367B8;
  border-radius: 14px;
  background: #F5F9FD;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-guest > b{
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #16181C;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-guest > p{
  max-width: 60ch;
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 1.6;
  color: #55585E !important;
}
/* 🔴 O FORMULÁRIO TEM DOIS FILHOS A MAIS DO QUE PARECE, e eram
   eles que embaralhavam o grid. O `form-tracking.php` imprime,
   nesta ordem:

     <p>            ← instrução longa, sem classe
     <p class="form-row form-row-first">   ID do pedido
     <p class="form-row form-row-last">    E-mail
     <div class="clear">
     <p class="form-row">                  o botão
     <input type="hidden">                 nonce

   Num grid de 3 colunas, a instrução tomava a célula 1, o ID a
   2, o e-mail a 3, e o resto descia. Daí o rótulo "E-mail de
   cobrança" espremido em duas linhas e o botão solto.

   A instrução some porque ela **repete o parágrafo que o snippet
   já escreveu** logo acima, com o dobro de palavras. O `.clear`
   some pela regra do bloco 7B. Sobram três itens e três colunas. */
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order > p:not([class]){ display: none !important; }

/* as colunas não são iguais de propósito: o número do pedido são
   4 ou 5 dígitos e o e-mail é a coisa mais longa da linha */
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr) auto;
  gap: 14px;
  align-items: end;
  margin: 0 !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order p.form-row,
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order p:last-of-type{ margin: 0 !important; }

/* 🔴 O BOTÃO ENCOLHIA NO HOVER. A culpa era de um `width: 100%`
   aqui: ele pesa (0,5,2) e o grupo de três estados dos botões
   (bloco 8) pesa (0,6,1) e redeclara `width: auto`. Passar o
   mouse trocava a largura no meio da animação.

   Sem largura declarada os dois estados batem, e a coluna `auto`
   do grid já dá ao botão a largura do texto dele. */
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order p.form-row:last-of-type{
  display: flex;
  align-items: flex-end;
}
.elementor-21 .elementor-element.elementor-element-5245b2d form.track_order button.button{ flex-shrink: 0; }

/* ----------------------------------------------------------
   11 · AVISOS
   O clearfix mora aqui também
   (`.woocommerce-info::after, ::before`), e por isso os pseudos
   levam `content: none` e não `display: none`: `display` some
   com a caixa mas o pseudo continua existindo, e no dia que
   alguém transformar o aviso em flex ele volta a contar como
   item. `content: none` desliga o pseudo de vez.
   ---------------------------------------------------------- */
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-message::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-message::after,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-error::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-error::after,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-info::before,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-info::after{ content: none !important; }

.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-message,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-error,
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-info{
  margin: 0 0 16px !important;
  padding: 14px 18px !important;
  border: 1px solid #E3E7EB !important;
  border-left: 3px solid #0367B8 !important;
  border-radius: 12px;
  background: #F5F9FD !important;
  font-size: 13.5px !important;
  line-height: 1.6;
  color: #16181C !important;
  list-style: none;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-message{
  border-left-color: #0B7A4B !important;
  background: #E7F4EE !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-error{
  border-left-color: #B3261E !important;
  background: #FBEBEA !important;
}
.elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-error li{ margin: 0 !important; padding: 0 !important; }

/* ----------------------------------------------------------
   12 · CELULAR
   🔴 O widget já vira uma coluna só abaixo de 1024px por conta
   própria (o CSS dele tem media query em 1024). O nosso grid
   precisa acompanhar na MESMA largura: em 1023px o dele já
   soltou o float e o nosso ainda pediria 240px de menu, e o
   resultado seria o menu espremido com o conteúdo.
   ---------------------------------------------------------- */
@media (max-width: 1024px){
  .elementor-21 .elementor-element.elementor-element-5245b2d .e-my-account-tab .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* 🔴 O MENU CONTINUA SENDO A MESMA LISTA VERTICAL DO DESKTOP.
     A primeira versão virava fila de pílulas que quebrava em
     duas ou três linhas, com "Sair" jogado pra direita, e o
     resultado é um amontoado sem hierarquia: nada indica onde a
     lista começa e termina, e o item ativo não se destaca porque
     está no meio de uma sopa de retângulos.

     Aqui a decisão é a mesma das páginas institucionais
     (paginas-institucionais.md, "Por que o mobile é só isso"):
     a caixa fica idêntica ao desktop, só deixa de ser grudenta e
     passa a ocupar a largura toda. Lá são NOVE itens e a decisão
     se sustenta; aqui são cinco, ocupam uns 220px de altura, e o
     site inteiro passa a se comportar do mesmo jeito no celular. */
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-MyAccount-navigation{ position: static; width: 100%; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalhos{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 780px){
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-etapas{ grid-template-columns: 1fr; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalhos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor-21 .elementor-element.elementor-element-5245b2d #customer_login.u-columns{ grid-template-columns: 1fr; }
  .elementor-21 .elementor-element.elementor-element-5245b2d form.track_order{ grid-template-columns: 1fr; }
  .elementor-21 .elementor-element.elementor-element-5245b2d form.track_order p.form-row:last-of-type button.button{ width: 100%; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields__field-wrapper,
  .elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm{ grid-template-columns: 1fr; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields,
  .elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-ResetPassword{ padding: 18px !important; }

  /* o card do endereço: título e "Editar" um embaixo do outro.
     Lado a lado, "Endereço de entrega e cobrança" quebrava em
     quatro linhas de duas palavras pra caber ao lado do link. */
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address .title,
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-Address-title{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 560px){
  .elementor-21 .elementor-element.elementor-element-5245b2d tr.woocommerce-orders-table__row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "sit"
      "rast"
      "tot"
      "act";
    padding: 15px 16px;
  }
  .elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-status{ justify-self: start; margin-top: 8px; }
  .elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions{ justify-self: stretch; }
  .elementor-21 .elementor-element.elementor-element-5245b2d td.woocommerce-orders-table__cell-order-actions a.woocommerce-button{
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-atalhos{ grid-template-columns: 1fr; }
  .elementor-21 .elementor-element.elementor-element-5245b2d a.tc-mc-atalho{ flex-direction: row; align-items: center; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card,
  .elementor-21 .elementor-element.elementor-element-5245b2d #customer_login .u-column1,
  .elementor-21 .elementor-element.elementor-element-5245b2d #customer_login .u-column2,
  .elementor-21 .elementor-element.elementor-element-5245b2d .woocommerce-address-fields,
  .elementor-21 .elementor-element.elementor-element-5245b2d form.woocommerce-EditAccountForm{ padding: 18px !important; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-topo{ flex-direction: column; gap: 8px; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-rastreio-link{ margin-left: 0; }
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-acoes .tc-mc-bt,
  .elementor-21 .elementor-element.elementor-element-5245b2d .tc-mc-card-bts .tc-mc-bt{ flex: 1 1 100%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0d1923c */.elementor-21 .elementor-element.elementor-element-0d1923c{ display: none; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a17ed6 */.elementor-21 .elementor-element.elementor-element-7a17ed6{
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: clamp(48px, 6vw, 88px);
}/* End custom CSS */