@charset "UTF-8";
/* =========================================================================
   YLLIME — Folha global
   Carregada em todas as páginas. Extras entram por arquivo condicional
   (home.css, shop.css, account.css) para não pesar onde não é usado.

   Sumário
   01. Tokens
   02. Reset
   03. Tipografia
   04. Layout
   05. Botões
   06. Formulários
   07. Cabeçalho
   08. Rodapé
   09. Utilitários
   ========================================================================= */


/* =========================================================================
   01. TOKENS
   Fonte única de verdade. Nenhum valor de cor, corpo de texto ou
   espaçamento deve ser escrito solto fora daqui.
   ========================================================================= */
:root{

  /* ---- Marca -------------------------------------------------------- */
  --c-green-900:#16210F;   /* reserva: hover mais escuro                 */
  --c-green-700:#34432B;   /* PRIMÁRIA — botões, títulos, barra do topo  */
  --c-green-500:#4C6139;   /* estado hover da primária                   */
  --c-green-300:#63794E;   /* verde para TEXTO — 4.8:1 no branco         */
  --c-green-200:#ABC69B;   /* DECORATIVO — filetes. Nunca em texto.      */
  --c-green-50:#F8FBF6;    /* fundo do rodapé                            */

  /* ---- Neutros ------------------------------------------------------ *
   * Viés levemente esverdeado para conversar com a marca.               *
   * Substituem os 12 cinzas soltos do site atual.                       */
  --c-ink:#1C1B19;         /* títulos, texto forte                       */
  --c-body:#4A4744;        /* corpo de texto                             */
  --c-muted:#5F6A5C;       /* apoio, legendas, menu                      */
  --c-faint:#8A8E87;       /* só decorativo ou desabilitado              */
  --c-line:#E6EAE4;        /* filetes e bordas                           */
  --c-line-soft:#F0F2EE;   /* separadores internos                       */
  --c-surface:#FFFFFF;     /* fundo padrão                               */
  --c-canvas:#FAFAFA;      /* seções alternadas                          */

  /* ---- Semânticos --------------------------------------------------- */
  --c-sale:var(--c-green-300); /* desconto — ver nota sobre contraste    */
  --c-sale-decor:#ABC69B;  /* o verde original, para uso não textual     */
  --c-warn:#8A6410;         /* aviso — 5.4:1 no branco                    */
  --c-error:#A33A2E;
  --c-success:#4A6B3D;
  --c-focus:#34432B;

  /* ---- Tipografia --------------------------------------------------- *
   * acumin-pro vem do kit Adobe Fonts. A pilha de fallback é métrica-    *
   * mente próxima para o texto não pular quando a fonte chegar.          */
  --f-sans:"acumin-pro","Acumin Pro",-apple-system,BlinkMacSystemFont,
           "Segoe UI","Helvetica Neue",Arial,sans-serif;

  --t-xs:0.75rem;          /* 12px — rótulos, migalha                    */
  --t-sm:0.875rem;         /* 14px — apoio, botões                       */
  --t-base:1rem;           /* 16px — corpo                               */
  --t-md:1.125rem;         /* 18px — corpo em destaque                   */
  --t-lg:1.375rem;         /* 22px — título de card  (degrau que faltava)*/
  --t-xl:clamp(1.5rem,2.4vw,2rem);        /* 24→32 — título de seção     */
  --t-2xl:clamp(2rem,4.4vw,3.25rem);      /* 32→52 — hero                */

  --lh-tight:1.12;
  --lh-snug:1.35;
  --lh-base:1.6;
  --lh-loose:1.8;

  --ls-tight:-0.022em;     /* títulos grandes                            */
  --ls-snug:-0.008em;
  --ls-wide:0.08em;        /* caixa alta pequena                         */
  --ls-wider:0.14em;       /* rótulos e sobrelinhas                      */

  /* ---- Espaçamento — escala de 4px ---------------------------------- */
  --s-1:0.25rem;  --s-2:0.5rem;   --s-3:0.75rem;  --s-4:1rem;
  --s-5:1.5rem;   --s-6:2rem;     --s-7:3rem;     --s-8:4rem;
  --s-9:6rem;     --s-10:8rem;

  /* Ritmo vertical único entre seções. Corrige a irregularidade
     de 90px vs 150px do site atual. */
  --section-y:clamp(3.5rem,8vw,5rem);

  /* ---- Layout ------------------------------------------------------- */
  --container:1280px;
  --container-narrow:820px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --grid-gap:clamp(1rem,2vw,1.5rem);

  /* Altura única de todo controle de formulário. Input e select precisam
     bater no pixel — 4px de diferença entre eles já se enxerga. */
  --control-h:52px;

  /* ---- Traços e sombras --------------------------------------------- */
  --radius:0;              /* canto vivo é decisão do projeto            */
  --radius-sm:2px;         /* só onde canto vivo atrapalha o toque       */
  --hairline:1px solid var(--c-line);
  --shadow-drawer:0 0 40px rgba(28,27,25,.14);

  /* ---- Movimento ---------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms;
  --dur:240ms;
  --dur-slow:420ms;

  /* ---- Camadas ------------------------------------------------------ */
  --z-header:100;
  --z-drawer:200;
  --z-overlay:190;
}

/*  NOTA SOBRE CONTRASTE
    Três tokens saíram diferentes do site atual, por causa da auditoria:

      texto de apoio   #8A8E87 → --c-muted  #5F6A5C   (3.3:1 → 6.1:1)
      selo de desconto #ABC69B → --c-sale   #63794E   (1.9:1 → 4.8:1)
      preço riscado    #B8BDB6 → --c-muted  #5F6A5C   (1.9:1 → 6.1:1)

    Os valores originais continuam disponíveis em --c-green-200 e
    --c-sale-decor para uso decorativo (filetes, fundos), onde não há
    exigência de contraste. Para reverter, troque só estes tokens.        */


/* =========================================================================
   02. RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}

/*
 * O [hidden] do navegador é só `display:none` sem prioridade nenhuma, então
 * qualquer classe com `display` o anula em silêncio. Era o caso da gaveta do
 * carrinho e do menu (display:flex) e do formulário de cupom: ficavam na
 * árvore de acessibilidade, focáveis pelo teclado, mesmo "fechados".
 */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--c-surface);
  color:var(--c-body);
  font-family:var(--f-sans);
  font-size:var(--t-base);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;              /* substitui o hidden que travava sticky */
}
/*
 * O reset vai dentro de :where() para ter especificidade zero.
 * Sem isso, `ul[class]` (0,1,1) vence `.container` (0,1,0) e zera o padding
 * lateral de qualquer lista que também seja container — foi o que fez a
 * faixa de garantias furar a margem do site.
 */
:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0}
:where(ul[class],ol[class]){list-style:none;margin:0;padding:0}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
::selection{background:var(--c-green-200);color:var(--c-ink)}
::placeholder{color:var(--c-faint);opacity:1}


/* =========================================================================
   03. TIPOGRAFIA
   ========================================================================= */
h1,h2,h3,h4{
  color:var(--c-ink);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-snug)}
h4{font-size:var(--t-base);line-height:var(--lh-snug);letter-spacing:normal}

p{max-width:68ch}
p + p{margin-top:1em}

strong,b{font-weight:600;color:var(--c-ink)}
small{font-size:var(--t-xs)}

/* Sobrelinha — o rótulo curto acima de um título de seção */
.eyebrow{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-3);
}

/* Rótulo em caixa alta — usado em títulos de card e legendas de campo */
.label{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}

.lead{font-size:var(--t-md);color:var(--c-muted);line-height:var(--lh-base)}
.muted{color:var(--c-muted)}
.ink{color:var(--c-ink)}

/* Filete curto sob o cabeçalho de seção — o detalhe verde da marca */
.rule{
  display:block;
  width:44px;
  height:2px;
  background:var(--c-green-200);
  border:0;
  margin:var(--s-4) 0 0;
}

/* Link de texto com sublinhado discreto */
.link{
  color:var(--c-ink);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
  text-decoration-color:var(--c-line);
  transition:text-decoration-color var(--dur-fast) var(--ease);
}
.link:hover{text-decoration-color:currentColor}

/* Números alinhados em coluna (preços, tabelas) */
.tnum{font-variant-numeric:tabular-nums}


/* =========================================================================
   04. LAYOUT
   ========================================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow)}
.container--flush{padding-inline:0}

.section{padding-block:var(--section-y)}
.section--canvas{background:var(--c-canvas)}
.section--tight{padding-block:calc(var(--section-y) * .55)}

/*
 * Seções fora da tela não são renderizadas até chegarem perto dela.
 * Em página longa isso corta boa parte do trabalho de layout na abertura —
 * o ganho aparece justamente nos aparelhos mais fracos.
 *
 * O contain-intrinsic-size é obrigatório: sem ele o navegador trata a seção
 * como se tivesse altura zero e a barra de rolagem pula.
 *
 * Seções com id ficam de fora: elas são alvo de âncora, e a posição de
 * rolagem é calculada a partir de alturas ainda estimadas — o link pode
 * parar longe do lugar certo. Vale mais a âncora acertar do que economizar
 * layout em três seções.
 */
.section:not(:first-of-type):not([id]){
  content-visibility:auto;
  contain-intrinsic-size:auto 640px;
}

/* O cabeçalho é fixo: sem isto a âncora esconde o título da seção atrás dele. */
.section[id]{scroll-margin-top:100px}
@media (max-width:900px){
  .section[id]{scroll-margin-top:80px}
}

/* Cabeçalho de seção. Um padrão só para o site inteiro — o site atual
   tem dois (carrossel alinhado à esquerda, FAQ centralizado). */
.section-head{margin-bottom:var(--s-7)}
/*
 * :is(h1,h2,h3), e não só h2.
 *
 * O cabeçalho aceita a tag pelo argumento, e as páginas institucionais usam
 * h1 — nelas a regra não pegava e a linha de apoio encostava no título, sem
 * folga nenhuma. Media zero pixels entre o fim de "Rastreamento" e o começo
 * de "Acompanhe a entrega".
 */
.section-head :is(h1,h2,h3){margin-bottom:var(--s-3)}

/*
 * A linha de apoio é uma frase curta, não um parágrafo de leitura.
 *
 * Com a medida larga do corpo de texto, ela cabia quase inteira numa linha
 * e sobrava uma palavra sozinha embaixo. A medida mais estreita força uma
 * quebra de verdade, e o text-wrap:balance reparte as linhas em tamanhos
 * parecidos em vez de encher a primeira e largar o resto.
 */
.section-head p{
  color:var(--c-muted);
  max-width:46ch;
  line-height:1.5;
  text-wrap:balance;
}

.section-head .rule{margin-top:var(--s-5)}

.section-head--center{text-align:center}
.section-head--center p{margin-inline:auto}
.section-head--center .rule{margin-inline:auto}

/* Cabeçalho com ação à direita (ex.: setas do carrossel) */
.section-head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-5);
  flex-wrap:wrap;
}

.stack > * + *{margin-top:var(--s-4)}
.stack-lg > * + *{margin-top:var(--s-6)}

.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}


/* =========================================================================
   05. BOTÕES
   Caixa alta aplicada por CSS, não digitada no conteúdo.
   ========================================================================= */
.btn{
  --btn-bg:var(--c-green-700);
  --btn-fg:#FFFFFF;
  --btn-bd:var(--c-green-700);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:48px;
  padding:0 var(--s-6);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn:hover{--btn-bg:var(--c-green-500);--btn-bd:var(--c-green-500)}
.btn:active{--btn-bg:var(--c-green-900);--btn-bd:var(--c-green-900)}
.btn[disabled],.btn[aria-disabled="true"]{
  --btn-bg:var(--c-line);--btn-bd:var(--c-line);--btn-fg:var(--c-faint);
  cursor:not-allowed;
}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-green-700);--btn-bd:var(--c-green-700)}
.btn--ghost:hover{--btn-bg:var(--c-green-700);--btn-fg:#FFFFFF}

.btn--quiet{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-bd:var(--c-line)}
.btn--quiet:hover{--btn-bg:transparent;--btn-bd:var(--c-ink)}

.btn--block{display:flex;width:100%}
.btn--sm{min-height:40px;padding:0 var(--s-4);font-size:var(--t-xs)}

/* Botão de ícone — busca, conta, carrinho, setas */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;   /* alvo de toque mínimo */
  color:var(--c-ink);
  border-radius:var(--radius);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.icon-btn:hover{color:var(--c-green-700)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}


/* =========================================================================
   06. FORMULÁRIOS
   ========================================================================= */
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field > label{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.input,
input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="search"],input[type="number"],
input[type="url"],input[type="date"],textarea,select{
  width:100%;
  /* Altura fixa, não mínima: com min-height o input cresce até 52px pelo
     conteúdo e o select para em 48, e os dois ficam desalinhados. */
  height:var(--control-h);
  padding:0 var(--s-4);
  background:var(--c-surface);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  font-size:var(--t-base);   /* 16px evita o zoom automático no iOS */
  transition:border-color var(--dur-fast) var(--ease);
}
textarea{height:auto;min-height:132px;padding-block:var(--s-4);resize:vertical}
.input:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--c-green-700);
  outline:none;
}
.input:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:2px;
}
select{
  appearance:none;
  padding-right:var(--s-7);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235F6A5C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:12px 8px;
}
.field-error{color:var(--c-error);font-size:var(--t-sm)}
.field-hint{color:var(--c-muted);font-size:var(--t-sm)}


/* =========================================================================
   07. CABEÇALHO
   ========================================================================= */
.announce{
  background:var(--c-green-700);
  color:#FFFFFF;
  text-align:center;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  padding:var(--s-2) var(--gutter);
}
.announce strong{color:inherit;font-weight:600}
.announce a{text-decoration:underline;text-underline-offset:.2em}

/* ---- Suave e Deslizar --------------------------------------------------
 * Todas as mensagens ficam empilhadas na mesma célula do grid, então a
 * barra tem a altura da maior e nada salta quando a mensagem troca.
 * Sem JavaScript, a primeira continua visível.
 */
.announce__viewport{display:grid;align-items:center;overflow:hidden}
.announce__item{
  grid-area:1/1;
  margin:0;
  max-width:none;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur) var(--ease),
             visibility var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.announce__item[data-current]{opacity:1;visibility:visible}

/* Deslizar: a atual sai por cima, a próxima entra por baixo. */
.announce--slide .announce__item{transform:translateY(110%)}
.announce--slide .announce__item[data-current]{transform:translateY(0)}
.announce--slide .announce__item[data-leaving]{transform:translateY(-110%);opacity:0;visibility:visible}

/* ---- Corrida contínua ---------------------------------------------------
 * Duas cópias da fila, lado a lado, deslocadas em 50%: quando a primeira
 * termina de passar, a segunda ocupa o lugar dela e o ciclo reinicia sem
 * emenda. A duração vem do JavaScript, calculada pela largura real, para a
 * velocidade não mudar com a quantidade de mensagens.
 */
.announce--marquee{padding-inline:0;overflow:hidden}
.announce__marquee{display:flex;width:max-content}
.announce__run{
  display:flex;
  align-items:center;
  flex:none;
  margin:0;
  padding:0 0 0 var(--s-6);   /* respiro antes da primeira mensagem */
  list-style:none;
  animation:yllime-run var(--yl-run,28s) linear infinite;
}
/*
 * O item NÃO pode ser flex: o <strong> dentro da mensagem viraria um item
 * de flex e o gap abriria um buraco no meio da própria frase — o ponto
 * separador acabava entre "Parcele em" e "até 6x sem juros".
 * Layout em linha, e o espaçamento simétrico vem das margens do ponto.
 */
.announce__unit{white-space:nowrap}
.announce__unit::after{
  content:"";
  display:inline-block;
  width:3px;height:3px;
  margin-inline:var(--s-6);
  border-radius:50%;
  background:currentColor;
  opacity:.45;
  vertical-align:middle;
}
@keyframes yllime-run{to{transform:translateX(-100%)}}

/* Parar ao passar o mouse: ninguém deve perder a mensagem no meio. */
.announce--marquee:hover .announce__run,
.announce--marquee:focus-within .announce__run{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .announce__item{transition:none}
  .announce--slide .announce__item{transform:none}
  /* A corrida vira uma fila parada, rolável com o dedo. */
  .announce--marquee{overflow-x:auto;scrollbar-width:none}
  .announce--marquee::-webkit-scrollbar{display:none}
  .announce__run{animation:none}
  .announce__marquee > .announce__run:last-child{display:none}
}

.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:var(--c-surface);
  border-bottom:var(--hairline);
}
.site-header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s-4);
  min-height:84px;
}
.site-header__nav{justify-self:start}
.site-header__brand{justify-self:center}
.site-header__tools{justify-self:end;display:flex;align-items:center;gap:var(--s-1)}

.site-header__brand img,.site-header__brand svg{width:auto;height:44px}

.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav a{
  font-size:var(--t-sm);
  letter-spacing:0;          /* sem entreletras no menu — decisão do projeto */
  text-transform:uppercase;
  color:var(--c-muted);
  padding-block:var(--s-2);
  transition:color var(--dur-fast) var(--ease);
}
.nav a:hover,.nav .current-menu-item > a{color:var(--c-green-700)}

/* Contador do carrinho em vermelho: é a única cor de alerta do cabeçalho,
   e é ela que faz o número ser notado. O tom é o --c-error da paleta, não o
   vermelho do Bootstrap que vinha do tema antigo. */
.cart-btn{position:relative}
.cart-btn__count{
  position:absolute;top:4px;right:2px;
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--c-error);
  color:#FFFFFF;
  font-size:10px;line-height:1;font-weight:600;
  border-radius:9px;
  font-variant-numeric:tabular-nums;
}
.cart-btn__count[data-count="0"]{display:none}

/*
 * Favoritos e comparação usam o mesmo desenho de contador do carrinho, mas
 * em verde: vermelho no cabeçalho é sinal de "tem coisa esperando pagamento",
 * e três selos vermelhos lado a lado tirariam o peso do que importa.
 */
.list-btn{position:relative}
.list-btn__count{
  position:absolute;top:4px;right:2px;
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-size:10px;line-height:1;font-weight:600;
  border-radius:9px;
  font-variant-numeric:tabular-nums;
}
.list-btn__count[data-count="0"]{display:none}

/* Atalhos das listas dentro da gaveta do celular */
.drawer__links{
  list-style:none;
  margin:var(--s-5) 0 0;
  padding:var(--s-5) 0 0;
  border-top:var(--hairline);
  display:flex;flex-direction:column;gap:var(--s-1);
}
.drawer__links a{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) 0;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.drawer__links a:hover{color:var(--c-green-700)}
.drawer__links-count{
  margin-left:auto;
  min-width:20px;height:20px;padding:0 6px;
  display:grid;place-items:center;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-size:10px;line-height:1;font-weight:600;
  border-radius:10px;
}

/* -------------------------------------------------------------------------
   Aviso flutuante
   Confirma uma ação que aconteceu longe do olhar — o coração no card, o
   contador lá no cabeçalho. Sai sozinho; não pede nada de volta.
   ------------------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%;bottom:var(--s-6);
  z-index:var(--z-drawer);
  translate:-50% 12px;
  max-width:min(92vw,26rem);
  padding:var(--s-3) var(--s-5);
  background:var(--c-ink);
  color:#FFFFFF;
  font-size:var(--t-sm);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease),translate var(--dur) var(--ease);
}
.toast[data-open]{opacity:1;translate:-50% 0}

@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity var(--dur) var(--ease);translate:-50% 0}
}

/* -------------------------------------------------------------------------
   Acordeão

   Nasceu nas perguntas frequentes da home e virou componente compartilhado:
   a página do produto usa o mesmo desenho para descrição, ficha técnica e
   trocas. Mudou de home.css para cá porque estava estilizado só numa página
   — na outra saía com o triângulo cru do navegador.
   ------------------------------------------------------------------------- */
   ------------------------------------------------------------------------- */
.faq{border-top:var(--hairline)}

.faq__item{border-bottom:var(--hairline)}

.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  padding-block:var(--s-5);
  cursor:pointer;
  list-style:none;
  font-size:var(--t-base);
  color:var(--c-ink);
  transition:color var(--dur-fast) var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--c-green-700)}
.faq__q:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}

.faq__mark{
  position:relative;
  flex:none;
  width:16px;height:16px;
}
.faq__mark::before,
.faq__mark::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  translate:-50% -50%;
  background:currentColor;
  transition:opacity var(--dur-fast) var(--ease),rotate var(--dur) var(--ease);
}
.faq__mark::before{width:14px;height:1px}
.faq__mark::after{width:1px;height:14px}
.faq__item[open] .faq__mark::after{opacity:0;rotate:90deg}

.faq__a{padding-bottom:var(--s-5)}
.faq__a p{color:var(--c-muted);max-width:60ch}


/* -------------------------------------------------------------------------
   Cabeçalho reduzido — telas de foco

   Três colunas com as laterais iguais: é isso que mantém a marca no centro
   óptico mesmo com um link de voltar só de um lado.
   ------------------------------------------------------------------------- */
.site-header--bare{
  border-bottom:var(--hairline);
  padding-block:var(--s-5);
}
.site-header--bare__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s-4);
}
.site-header--bare .site-header__brand{justify-self:center}
.site-header--bare .site-header__brand img{height:38px;width:auto}

.bare-back{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.bare-back:hover{color:var(--c-green-700)}

@media (max-width:600px){
  /* Espaço é curto: fica a seta, e o rótulo vira o rótulo acessível. */
  .bare-back span{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);
  }
}


/* -------------------------------------------------------------------------
   Convite do cupom de primeira compra

   Aparece em três telas de larguras muito diferentes — a coluna do resumo do
   produto, o carrinho inteiro e o checkout. Por isso empilha em vez de fixar
   larguras: cabe em 380px e não fica esticado em 1280.
   ------------------------------------------------------------------------- */
.first-coupon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3) var(--s-5);
  margin-block:var(--s-5);
  padding:var(--s-4) var(--s-5);
  background:var(--c-green-50);
  border:1px dashed var(--c-green-200);
}

.first-coupon__text{
  margin:0;
  max-width:52ch;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.first-coupon__text strong{color:var(--c-green-300);font-weight:600}

.first-coupon__action{display:flex;align-items:stretch;flex:none}

.first-coupon__code{
  display:flex;
  align-items:center;
  padding-inline:var(--s-4);
  border:1px solid var(--c-green-200);
  border-right:0;
  background:var(--c-surface);
  font-family:inherit;
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  color:var(--c-ink);
  white-space:nowrap;
}

.first-coupon__btn{
  display:flex;
  align-items:center;
  min-height:40px;
  padding-inline:var(--s-4);
  border:0;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.first-coupon__btn:hover{background:var(--c-ink)}
.first-coupon__btn:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
/* Marca o sucesso da cópia sem trocar a largura do botão e sacudir a linha. */
.first-coupon__btn.is-done{background:var(--c-success)}

/* Na coluna estreita do produto, o cupom ocupa a linha inteira. */
@media (max-width:520px){
  .first-coupon__action{width:100%}
  .first-coupon__code{flex:1}
}


/* -------------------------------------------------------------------------
   Linha legal — empresa e documentos
   ------------------------------------------------------------------------- */
.legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3) var(--s-5);
}
.legal__company{margin:0;max-width:none}
.legal__links{
  display:flex;flex-wrap:wrap;gap:var(--s-5);
  list-style:none;margin:0;padding:0;
}
.legal__links a{color:inherit}
.legal__links a:hover{color:var(--c-green-700)}

/* Rodapé reduzido das telas de foco: uma linha, sem navegação. */
.site-footer--bare{
  background:none;
  border-top:1px solid var(--c-line-soft);
  padding-block:var(--s-5);
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.site-footer--bare .legal{justify-content:center;text-align:center}


/* -------------------------------------------------------------------------
   Aviso de cookies

   Entra por baixo, fixo, e some assim que a escolha é feita. Os dois botões
   têm o mesmo tamanho de propósito — a lei exige que recusar seja tão fácil
   quanto aceitar, e um "só os essenciais" em letra miúda ao lado de um
   "aceitar" grande não é escolha livre.
   ------------------------------------------------------------------------- */
.consent{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-drawer);
  background:var(--c-surface);
  border-top:var(--hairline);
  box-shadow:0 -8px 28px rgb(28 27 25 / .08);
  padding-block:var(--s-4);
  animation:consent-in var(--dur-slow) var(--ease) both;
}
@keyframes consent-in{from{translate:0 100%}to{translate:0 0}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}

.consent__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
}
.consent__text{
  margin:0;
  max-width:70ch;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.consent__text a{color:var(--c-green-700);border-bottom:1px solid currentColor}

.consent__actions{display:flex;gap:var(--s-3);flex:none}
.consent__actions .btn{white-space:nowrap}

@media (max-width:760px){
  .consent__inner{flex-direction:column;align-items:stretch}
  .consent__actions{flex:1}
  .consent__actions .btn{flex:1}
}

.nav-toggle{display:none}

@media (max-width:900px){
  .site-header__inner{grid-template-columns:auto 1fr auto;min-height:68px}
  .site-header__brand{justify-self:center}
  .site-header__brand img,.site-header__brand svg{height:34px}
  .nav-toggle{display:inline-flex}
  .site-header__nav .nav{display:none}

  /* Favoritos e comparação saem do cabeçalho e vão para a gaveta do menu:
     seis ícones numa tela de 320px empurravam a logo para fora. */
  .list-btn{display:none}
}


/* =========================================================================
   08. RODAPÉ
   ========================================================================= */
/*
 * Sem margem no topo: depois de uma faixa de fundo — a dos semelhantes na
 * página do produto — ela virava uma tira branca entre as duas. O rodapé já
 * se separa sozinho pelo filete e pelos 96px de respiro interno.
 */
.site-footer{
  background:var(--c-green-50);
  border-top:var(--hairline);
  padding-block:var(--s-9) var(--s-6);
  margin-top:0;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:var(--s-7) var(--s-6);
}
/* A coluna da marca empilha logo, frase, contato e botão com respiro
   próprio — sem isso os quatro blocos ficam colados. */
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.site-footer__logo{height:44px;width:auto}
.site-footer__brand > .btn{margin-top:var(--s-1)}
.site-footer__contact p{font-size:var(--t-sm);line-height:var(--lh-loose)}

.site-footer h4{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--c-ink);
  margin-bottom:var(--s-4);
}
/* Escopo fechado de propósito: um `.site-footer a` genérico teria
   especificidade maior que `.btn` e pintaria o texto do botão de cinza
   sobre o verde — 1,87:1. */
.site-footer__links a,
.site-footer__contact a,
.site-footer__bottom a{color:var(--c-muted);transition:color var(--dur-fast) var(--ease)}
.site-footer__links a:hover,
.site-footer__contact a:hover,
.site-footer__bottom a:hover{color:var(--c-green-700)}
.site-footer__links{display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--t-sm)}
.site-footer__bottom{
  margin-top:var(--s-8);
  padding-top:var(--s-5);
  border-top:var(--hairline);
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.social{display:flex;gap:var(--s-3)}
.social a{
  display:grid;place-items:center;
  width:38px;height:38px;
  border:1px solid var(--c-line);
  color:var(--c-ink);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.social a:hover{border-color:var(--c-green-700);color:var(--c-green-700)}
.social svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}

@media (max-width:900px){
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .site-footer__grid{grid-template-columns:1fr;gap:var(--s-6)}
}


/* =========================================================================
   09. UTILITÁRIOS
   ========================================================================= */
.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--s-4);top:-100px;
  z-index:calc(var(--z-header) + 1);
  background:var(--c-green-700);color:#FFFFFF;
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--s-4)}

/* Proporção fixa para imagem de produto — evita salto de layout (CLS) */
/* display:block explícito: a proporção é usada em <span> em vários lugares,
   e em elemento inline o aspect-ratio simplesmente não se aplica — a caixa
   colapsa e a foto some. */
.ratio{display:block;position:relative;overflow:hidden;background:var(--c-canvas)}
.ratio > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio--square{aspect-ratio:1/1}
.ratio--portrait{aspect-ratio:4/5}
.ratio--wide{aspect-ratio:16/9}
.ratio--hero{aspect-ratio:1920/760}

.overlay{
  position:fixed;inset:0;
  z-index:var(--z-overlay);
  background:rgba(28,27,25,.38);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
}
.overlay[data-open="true"]{opacity:1;visibility:visible}

/* Trava de rolagem quando drawer/menu está aberto */
body[data-locked="true"]{overflow:hidden}


/* =========================================================================
   AVISOS DO WOOCOMMERCE
   "Produto adicionado", erros de cupom, estoque. Saíam como texto solto.
   ========================================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none;
  margin:0 0 var(--s-5);
  padding:var(--s-4) var(--s-5);
  background:var(--c-canvas);
  border-left:3px solid var(--c-muted);
  font-size:var(--t-sm);
  color:var(--c-body);
}
.woocommerce-message{background:#EDF3E8;border-left-color:var(--c-sale)}
.woocommerce-error{background:#FBF0EE;border-left-color:var(--c-error);color:#6d251c}
.woocommerce-error li + li{margin-top:var(--s-2)}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a{
  color:var(--c-ink);
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* O Woo manda um botão "Ver carrinho" junto do aviso; vira link discreto. */
.woocommerce-message .button,
.woocommerce-info .button{
  float:right;
  margin-left:var(--s-4);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-green-700);
  text-decoration:underline;
}


/* =========================================================================
   10. PAINÉIS — menu lateral, busca, carrinho
   ========================================================================= */
.drawer{
  position:fixed;
  top:0;bottom:0;
  z-index:var(--z-drawer);
  width:min(400px,86vw);
  display:flex;
  flex-direction:column;
  background:var(--c-surface);
  box-shadow:var(--shadow-drawer);
  transition:transform var(--dur-slow) var(--ease);
}
.drawer--left{left:0;transform:translateX(-100%)}
.drawer--right{right:0;transform:translateX(100%)}
.drawer[data-open="true"]{transform:translateX(0)}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-bottom:var(--hairline);
  min-height:68px;
}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-5)}
.drawer__foot{padding:var(--s-5);border-top:var(--hairline)}

.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  display:block;
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--c-line-soft);
  font-size:var(--t-base);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}
.drawer__nav a:hover{color:var(--c-green-700)}

/* Busca — desce por baixo do cabeçalho */
.search-panel{
  position:absolute;
  left:0;right:0;top:100%;
  background:var(--c-surface);
  border-bottom:var(--hairline);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.search-panel[data-open="true"]{opacity:1;transform:translateY(0)}
.search-panel__form{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding-block:var(--s-5);
  /* O filete é do formulário inteiro, não do campo: o campo é sem borda e a
     linha embaixo é o que diz "escreva aqui". */
  border-bottom:1px solid var(--c-line);
  transition:border-color var(--dur-fast) var(--ease);
}
.search-panel__form > svg{flex:none;color:var(--c-muted)}

.search-panel__form input[type="search"]{
  flex:1;
  border:0;
  min-height:var(--control-h);
  padding-inline:0;
  font-size:var(--t-md);
  background:none;
}
/* O × que o Chrome desenha dentro do campo de busca vem em azul de sistema
   e não combina com nada aqui. O painel já tem botão de fechar. */
.search-panel__form input[type="search"]::-webkit-search-cancel-button,
.search-panel__form input[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none;appearance:none;
}
/*
 * O foco não desenha caixa em volta do campo — num campo sem borda, ocupando
 * a largura toda, aquilo virava um retângulo preto no meio de um cabeçalho
 * que não tem nenhum. Quem acende é o filete de baixo, em verde e com o
 * dobro da espessura: mesma leitura, na linguagem do resto do site.
 */
.search-panel__form input[type="search"]:focus,
.search-panel__form input[type="search"]:focus-visible{border:0;outline:none}
.search-panel__form:focus-within{border-bottom-color:var(--c-green-700);border-bottom-width:2px;padding-bottom:calc(var(--s-5) - 1px)}

@media (max-width:560px){
  .search-panel__form{gap:var(--s-3)}
  .search-panel__form .btn{display:none}
}

/* ---- Resultados instantâneos ----
   O desenho é o do mega menu, classe por classe: é o mesmo painel descendo
   do mesmo cabeçalho. Aqui ficam só a rolagem e os dois estados que o mega
   menu não tem. */
.search-panel__results{
  max-height:min(70vh,560px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.search-panel__results[aria-busy="true"]{opacity:.55}

.search-empty{padding-block:var(--s-7)}
.search-empty p{max-width:none;color:var(--c-ink)}
.search-empty strong{font-weight:500}
.search-empty__hint{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}

.search-term{margin:0;max-width:none;font-size:var(--t-md);color:var(--c-ink)}


/* =========================================================================
   12. MEGA MENU
   O painel é filho do <li>, mas se estica por baixo do cabeçalho inteiro:
   o <li> fica com position:static para o absolute se referir ao cabeçalho.
   ========================================================================= */
.nav .has-mega{position:static}

.mega{
  position:absolute;
  left:0;right:0;top:100%;
  z-index:calc(var(--z-header) - 1);
  background:var(--c-surface);
  border-top:var(--hairline);
  border-bottom:var(--hairline);
  box-shadow:0 18px 34px rgba(28,27,25,.07);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mega[data-open="true"]{opacity:1;transform:translateY(0)}

.mega__inner{
  display:flex;
  gap:var(--s-8);
  padding-block:var(--s-7);
}
.mega__inner--grid{align-items:flex-start}

.mega__col{min-width:0}
.mega__col--wide{flex:1}
/* Largura fixa: com flex livre a lista de categorias encolhia e abria um
   vão entre o rótulo das peças e as peças. */
.mega__inner > .mega__col:first-child{flex:0 0 300px}
.mega__intro{flex:0 0 240px}
.mega__intro p{font-size:var(--t-sm);color:var(--c-muted);margin:var(--s-2) 0 var(--s-4)}

.mega__label{
  display:block;
  margin-bottom:var(--s-4);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--c-muted);
}

.mega__links{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s-7)}
.mega__links li{break-inside:avoid;margin-bottom:var(--s-3)}
.mega__links a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-3);
  font-size:var(--t-sm);
  letter-spacing:normal;
  text-transform:none;
  color:var(--c-ink);
  padding-block:0;
}
.mega__links a:hover{color:var(--c-green-700)}
.mega__count{font-size:var(--t-xs);color:var(--c-faint)}

.mega__all{
  display:inline-block;
  margin-top:var(--s-4);
  font-size:var(--t-sm);
  letter-spacing:normal;
  text-transform:none;
}

/*
 * Colunas de largura fixa, e não fracionária: com 1fr numa coluna larga a
 * peça esticava e o painel passava de 750px de altura. Aqui a miniatura
 * manda no tamanho, não o espaço disponível.
 */
.mega__products{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,168px);
  gap:var(--s-5);
  justify-content:start;
  flex:1;
}
.mega__products--four{grid-template-columns:repeat(4,168px)}

.mega__product{display:flex;flex-direction:column;gap:var(--s-2)}
.mega__product-media{position:relative;background:var(--c-canvas)}
.mega__product-media img{transition:transform var(--dur-slow) var(--ease)}
@media (hover:hover){
  .mega__product:hover .mega__product-media img{transform:scale(1.03)}
}
.mega__product-name{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
  line-height:var(--lh-snug);
}
.mega__product:hover .mega__product-name{color:var(--c-green-700)}
.mega__product-price{font-size:var(--t-xs);color:var(--c-muted)}
.mega__product-price del{opacity:.6}
.mega__product-price ins{text-decoration:none;color:var(--c-sale)}

.mega__product-off{
  position:absolute;
  top:var(--s-2);left:var(--s-2);
  padding:2px 6px;
  background:var(--c-sale);
  color:#fff;
  font-size:10px;
  letter-spacing:.04em;
  line-height:1.6;
}

/* Sem hover — celular e tablet — o mega menu não abre; o link navega. */
@media (max-width:900px),(hover:none){
  .mega{display:none!important}
}


/* =========================================================================
   13. MENU DO USUÁRIO
   ========================================================================= */
.user-wrap{position:relative}

.user-menu{
  position:absolute;
  top:calc(100% + var(--s-2));
  right:0;
  z-index:var(--z-header);
  width:270px;
  padding:var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  box-shadow:0 16px 32px rgba(28,27,25,.10);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.user-menu[data-open="true"]{opacity:1;transform:translateY(0)}

/* Filete separando os atalhos de lista do resto do menu */
.user-menu__links--lists{
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--c-line-soft);
}
.user-menu__n{
  margin-left:auto;
  font-size:var(--t-xs);
  color:var(--c-faint);
  font-variant-numeric:tabular-nums;
}
.user-menu__n[data-count="0"]{display:none}

/* ---- Painel de favoritos ---- */
.list-panel{width:300px}

.list-panel__items{
  list-style:none;margin:0 0 var(--s-4);padding:0;
  display:flex;flex-direction:column;gap:var(--s-3);
}
.list-panel__item{display:flex;align-items:flex-start;gap:var(--s-3)}

.list-panel__link{display:flex;align-items:flex-start;gap:var(--s-3);flex:1;min-width:0}
.list-panel__media{flex:none;width:48px}
.list-panel__text{min-width:0}
.list-panel__name{
  display:block;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  line-height:var(--lh-snug);
  color:var(--c-ink);
}
.list-panel__link:hover .list-panel__name{color:var(--c-green-700)}
.list-panel__price{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--c-muted)}
.list-panel__price del{display:none}   /* na caixinha só cabe o preço que se paga */
.list-panel__price ins{text-decoration:none}
.list-panel__price bdi{font:inherit;color:inherit}

.list-panel__x{
  flex:none;
  display:grid;place-items:center;
  width:24px;height:24px;
  color:var(--c-faint);
  transition:color var(--dur-fast) var(--ease);
}
.list-panel__x:hover{color:var(--c-error)}

.user-menu__hello{font-size:var(--t-sm);color:var(--c-ink);margin-bottom:var(--s-2);max-width:none}
.user-menu__text{font-size:var(--t-xs);color:var(--c-muted);margin-bottom:var(--s-4);max-width:none}

.user-menu__links{
  list-style:none;
  margin:var(--s-3) 0;
  padding:var(--s-3) 0;
  border-block:1px solid var(--c-line-soft);
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}
.user-menu__links a{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-2) 0;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.user-menu__links a:hover{color:var(--c-green-700)}
.user-menu__links svg{flex:none;stroke-width:1.3}

.user-menu .btn + .btn{margin-top:var(--s-2)}

.user-menu__out,
.user-menu__track{
  display:inline-block;
  margin-top:var(--s-3);
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.user-menu__out:hover{color:var(--c-error)}

@media (max-width:560px){
  /* Ancorado à direita da tela para não estourar a largura. */
  .user-menu{right:calc(var(--gutter) * -1);width:min(280px,calc(100vw - var(--s-6)))}
}


/* =========================================================================
   11. SELOS DE PAGAMENTO
   ========================================================================= */
.paylist{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.paylist__item{
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-line);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}