@charset "UTF-8";
/*!
 * Unbox Store — sistema visual da Acorde Perfumes
 *
 * Os valores deste arquivo não são preferência: são o contrato visual extraído
 * do protótipo aprovado. Cores, tamanhos de fonte, alturas de cabeçalho,
 * espaçamentos de seção e curvas de animação vieram medidos de lá.
 *
 * Organização, de cima para baixo:
 *   1. fontes locais       6. cabeçalho e navegação
 *   2. tokens              7. componentes comerciais
 *   3. reset com escopo    8. telas
 *   4. tipografia          9. sobreposições (busca, drawer, quiz)
 *   5. layout             10. responsivo
 *
 * Tudo vive sob `.ac-store`. O tema ativo continua dono do resto da página, e
 * a loja não depende de nada que ele defina.
 */

/* =========================================================================
 * 1. Fontes
 *
 * Só os subsets latin e latin-ext, que é o que o português usa. As faces são
 * variáveis: um arquivo cobre 300–600, então não há uma requisição por peso.
 * ====================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
 * 2. Tokens
 *
 * A paleta é a do PRD §9.1, sem acréscimos. Nada de azul de interface, de
 * gradiente ou de sombra pesada: a marca é feita de superfícies retangulares,
 * linhas de 1px e contraste editorial.
 * ====================================================================== */

.ac-store {
  --ac-bg: #f9f6f1;
  --ac-ink: #1c1a17;
  --ac-ink-soft: #2a2620;
  --ac-gold: #a9853f;
  --ac-gold-2: #c9a961;
  --ac-gold-soft: #e4c98a;
  --ac-surface: #f3ede3;
  --ac-surface-2: #ede5d8;
  --ac-muted: #8a8378;
  --ac-white: #fff;
  --ac-border: rgba(28, 26, 23, 0.1);
  --ac-border-soft: rgba(28, 26, 23, 0.08);
  --ac-border-strong: rgba(28, 26, 23, 0.2);
  --ac-border-field: rgba(28, 26, 23, 0.24);
  --ac-on-dark: rgba(249, 246, 241, 0.09);

  /* Estados de sistema. Herdam a paleta em vez de trazer vermelho e verde
     genéricos — um alerta que não parece da marca lê como erro do site. */
  --ac-danger: #8c3a2c;
  --ac-danger-bg: #f6ece9;
  /* O ponto de aviso (D-275): vermelho vivo, porque ele existe para ser
     visto de relance. `--ac-danger` e um tom de texto, e nao pisca. */
  --ac-alerta: #d92d20;
  --ac-success: #4a6b45;
  --ac-success-bg: #eef2ec;

  --ac-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ac-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ac-container: 1280px;
  --ac-gutter: 40px;
  --ac-section: 88px;

  /* A curva e a duração do protótipo. O cabeçalho compacto usa exatamente
     estas — trocá-las muda o "peso" percebido da marca. */
  --ac-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ac-transition: 0.46s var(--ac-ease);

  /* O cabeçalho v2 responde mais rápido que o resto: ele encolhe 28px, e não
     80px, e a curva antiga fazia um movimento curto parecer arrastado. Altura,
     espaçador, logotipo e recolhimento do nome usam esta e só esta — em tempos
     diferentes, a soma do espaçador passaria por valores intermediários e o
     conteúdo tremeria durante o movimento. */
  --ac-header-transition: 0.34s var(--ac-ease);

  /*
   * QUANTO DO PÉ DA JANELA JÁ ESTÁ OCUPADO.
   *
   * Três coisas flutuam ali — a tarja de aviso, o botão de WhatsApp e o botão
   * de consentimento, que é de outro plugin — e as três precisavam da mesma
   * medida. Ela estava escrita à mão em cada uma (88 aqui, 96 ali), e número
   * copiado é número que fica para trás na primeira mudança de altura.
   *
   * `--unbox-fab-bottom` é outra pergunta — quanto do CANTO INFERIOR DIREITO
   * já está tomado — e ele é PUBLICADO: quem flutuar naquele canto o lê com
   * queda para zero. O prefixo é neutro de propósito; um `--ac-*` obrigaria o
   * vizinho a ler o prefixo da loja, e o §7 não permite.
   */
  --unbox-fab-bottom: 0px;

  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: var(--ac-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* =========================================================================
 * 3. Reset com escopo
 *
 * Reset dentro de `.ac-store` e não global. O tema pode ter regras agressivas
 * para `button` e `img`; neutralizamos dentro da loja sem tocar no resto do
 * site — e sem `!important`, que só adia a briga.
 * ====================================================================== */

.ac-store *,
.ac-store *::before,
.ac-store *::after {
  box-sizing: border-box;
}

/*
 * `hidden` precisa vencer.
 *
 * O atributo vem da folha do navegador como `display: none`, e qualquer regra
 * de autor com `display` passa por cima dela — não por especificidade, mas
 * porque estilo de autor sempre vence estilo do navegador. Foi assim que o
 * modal do quiz, que tem `display: flex`, apareceu aberto no carregamento da
 * página e sem forma de fechar.
 *
 * Este é o caso em que `!important` é a solução certa e não um remendo: o
 * atributo precisa valer inclusive contra `style=""` inline, e é o que a
 * marcação inteira assume ao usar `hidden` como interruptor.
 */
.ac-store [hidden] {
  display: none !important;
}

/*
 * `:where()` também aqui, e este cortava imagem.
 *
 * `.ac-store img { height: auto }` tem peso (0,1,1) e vencia
 * `.ac-card__img { height: 80% }` (0,1,0). A foto passava a ter a altura
 * natural do arquivo em vez dos 80% da moldura — e como a moldura tem
 * `overflow: hidden`, o que sobrava era CORTADO.
 *
 * No catálogo o defeito não aparecia: a moldura é quadrada, a foto é
 * quadrada, e 80% da largura dá a mesma altura por coincidência. Bastou a
 * miniatura da busca deixar de ser quadrada para o corte ficar visível.
 */
.ac-store :where(img),
.ac-store :where(svg) {
  max-width: 100%;
}

.ac-store :where(img) {
  height: auto;
  display: block;
}

/*
 * Mesmo motivo do reset de botão logo abaixo: `:where()`.
 *
 * `.ac-store a` (0,1,1) vencia `.ac-card__link` (0,1,0), então o nome do
 * produto e o preço saíam DOURADOS em vez da tinta escura do desenho — e
 * nenhuma declaração de cor no componente conseguia corrigir isso.
 */
.ac-store :where(a) {
  color: var(--ac-gold);
  text-decoration: none;
}

.ac-store :where(a:hover) {
  color: var(--ac-ink);
}

/*
 * `:where()` e proposital, não enfeite.
 *
 * `.ac-store button` tem especificidade (0,1,1) e vencia QUALQUER componente
 * de uma classe só — (0,1,0). Todo botão com `.ac-btn`, `.ac-size`,
 * `.ac-card__add`, `.ac-faq__q` ou `.ac-shortcut--gold` saía sem fundo, sem
 * borda e sem espaçamento, enquanto o mesmo componente escrito como `<a>`
 * aparecia certo. `:where()` não conta para a especificidade: o reset continua
 * valendo para botão sem componente, e o componente volta a mandar no seu
 * próprio visual.
 */
.ac-store :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ac-store input,
.ac-store select,
.ac-store textarea {
  font: inherit;
  color: inherit;
}

.ac-store ::selection {
  background: var(--ac-gold-soft);
  color: var(--ac-ink);
}

/* Foco visível e com contraste (§27.1). `:focus-visible` para não desenhar
   anel em clique de mouse, e um fallback para navegador sem suporte. */
.ac-store :focus {
  outline: 2px solid var(--ac-gold);
  outline-offset: 2px;
}

.ac-store :focus:not(:focus-visible) {
  outline: none;
}

.ac-store :focus-visible {
  outline: 2px solid var(--ac-gold);
  outline-offset: 2px;
}

.ac-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O "pular para o conteúdo" fica invisível até receber foco. */
.ac-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--ac-ink);
  color: var(--ac-bg);
  padding: 14px 20px;
  font: 500 12px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ac-skip:focus {
  left: 12px;
  top: 12px;
  color: var(--ac-bg);
}

/* =========================================================================
 * 4. Tipografia
 *
 * A escala do §9.2. Os títulos usam `clamp()` entre o valor mobile e o
 * desktop medidos — os dois extremos são exatamente os do protótipo, e o meio
 * interpola.
 * ====================================================================== */

/*
 * `:where()` de novo, e este era o mais caro dos três.
 *
 * `.ac-store p { margin: 0 }` e o mesmo para os títulos têm especificidade
 * (0,1,1). Toda regra de componente que ajustava margem num `<p>` ou num
 * `<h3>` — e são dezenas — tinha peso (0,1,0) e era descartada em silêncio.
 * O efeito prático: mexer em `margin-top` de `.ac-card__brand`,
 * `.ac-card__meta` ou `.ac-card__price` não mudava NADA na tela, três
 * rodadas seguidas, sem nenhum aviso de que a declaração fora ignorada.
 *
 * Zerar a especificidade do reset devolve a decisão ao componente, que é
 * quem sabe o espaçamento que aquele bloco precisa. O reset continua valendo
 * para todo parágrafo e título que não têm componente nenhum.
 */
.ac-store :where(h1, h2, h3) {
  font-family: var(--ac-serif);
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.005em;
}

.ac-store :where(p) {
  margin: 0;
}

.ac-h-hero {
  font: 300 clamp(38px, 5.2vw, 66px) / 1.04 var(--ac-serif);
}

.ac-h-page {
  font: 300 clamp(32px, 4vw, 48px) / 1.05 var(--ac-serif);
}

.ac-h-section {
  font: 300 clamp(27px, 3.2vw, 40px) / 1.1 var(--ac-serif);
}

.ac-h-block {
  font: 300 clamp(24px, 2.6vw, 32px) / 1.15 var(--ac-serif);
}

.ac-eyebrow {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-label {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ac-label--muted {
  color: var(--ac-muted);
}

.ac-lede {
  font: 400 clamp(14.5px, 1.2vw, 17.5px) / 1.65 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-text {
  font: 400 14.5px/1.7 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-meta {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-rating__stars {
  color: var(--ac-gold-2);
  letter-spacing: 0.04em;
}

/* =========================================================================
 * 5. Layout
 * ====================================================================== */

.ac-wrap {
  max-width: var(--ac-container);
  margin: 0 auto;
  padding-left: var(--ac-gutter);
  padding-right: var(--ac-gutter);
}

.ac-wrap--narrow {
  max-width: 1140px;
}

.ac-wrap--tight {
  max-width: 820px;
}

.ac-section {
  padding-top: var(--ac-section);
}

.ac-section--ruled {
  border-top: 1px solid rgba(28, 26, 23, 0.12);
  margin-top: var(--ac-section);
  padding-top: 56px;
}

.ac-rule {
  height: 1px;
  background: var(--ac-border);
  border: 0;
  margin: 0;
}

.ac-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.ac-section-head__title {
  margin-top: 14px;
}

/* Link editorial com o filete dourado do protótipo. */
.ac-link-rule {
  font: 500 12px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-ink);
  border-bottom: 1px solid var(--ac-gold-2);
  padding-bottom: 6px;
  white-space: nowrap;
}

.ac-link-rule:hover {
  color: var(--ac-gold);
}

/* =========================================================================
 * 6. Botões e campos
 *
 * Área de toque: o desenho tem 16–18px, mas o alvo tem 44px (§9.4). Isso é
 * feito com padding e `min-height`, não com escala — aumentar o ícone
 * descaracterizaria a linha fina da marca.
 * ====================================================================== */

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 18px 34px;
  border: 1px solid transparent;
  font: 500 12.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ac-btn--primary {
  background: var(--ac-gold-2);
  color: var(--ac-ink);
}

.ac-btn--primary:hover {
  background: var(--ac-gold-soft);
  color: var(--ac-ink);
}

.ac-btn--dark {
  background: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-btn--dark:hover {
  background: var(--ac-ink-soft);
  color: var(--ac-bg);
}

.ac-btn--ghost {
  border-color: var(--ac-ink);
  color: var(--ac-ink);
}

.ac-btn--ghost:hover {
  background: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-btn--quiet {
  border-color: var(--ac-border-strong);
  color: var(--ac-ink);
  padding: 12px 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.ac-btn--quiet:hover {
  border-color: var(--ac-ink);
}

.ac-btn--block {
  display: flex;
  width: 100%;
}

.ac-btn--tall {
  height: 58px;
  padding-top: 0;
  padding-bottom: 0;
}

.ac-btn[disabled],
.ac-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Estado de envio: o texto some e o spinner entra SEM alterar a largura, para
   o botão não pular sob o dedo do cliente (§20.7). */
.ac-btn.is-busy {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ac-btn.is-busy::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ac-spin 0.7s linear infinite;
  color: var(--ac-ink);
}

.ac-btn--dark.is-busy::after {
  color: var(--ac-bg);
}

@keyframes ac-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Alvo de 44px que NÃO ocupa 44px na linha.
 *
 * Com `min-width: 44px`, um ícone de 17px carrega 13,5px de vazio de cada
 * lado. Some o `gap` e a distância entre dois desenhos vira 47px — o bloco
 * parece esparramado mesmo com o espaçamento certo no CSS, e mexer no `gap`
 * não resolve porque o problema está dentro das caixas, não entre elas.
 *
 * O retângulo invisível centrado sobre o ícone dá a mesma área para o dedo
 * sem roubar espaço do layout. É a técnica que o coração do cartão já usava.
 */
.ac-icon-btn,
.ac-badge-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-ink);
}

.ac-icon-btn::before,
.ac-badge-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/*
 * A CONTA: permanente no cabeçalho, à esquerda da lupa.
 *
 * Ela morava na faixa escura e voltou para cá.
 *
 * ## O NOME NÃO RECOLHE AO ROLAR
 *
 * Ele recolhia por `max-width`, e a razão era espaço que o cabeçalho compacto
 * não tinha quando ainda havia uma linha de categorias. Sem elas, a faixa tem
 * o logotipo à esquerda e quatro ações à direita: sobra largura, e o
 * cumprimento é a única coisa da barra que diz quem está do outro lado.
 *
 * O teto de 220px fica, e agora ele guarda outra coisa — um nome longo. Sem
 * ele, "Olá, Bartolomeu" empurraria os três ícones para a esquerda, e a régua
 * do cabeçalho passaria a depender de quem está logado. O rótulo corta com
 * reticências, que é o que faz o corte parecer decisão e não defeito.
 *
 * `min-height` é o alvo do dedo: sem ela a caixa teria a altura do texto, 12px.
 * O `::before` dos irmãos não serve aqui — `overflow: hidden` o recortaria.
 */
/*
 * Resposta ao toque do mouse e ao foco do teclado: dourado e um crescimento
 * discreto.
 *
 * `:focus-visible` entra junto porque quem navega por teclado precisa do
 * mesmo sinal — e ele não é redundante com o anel de foco: o anel diz "está
 * aqui", a cor diz "isto reage".
 *
 * Quem cresce é o SVG, não o link. Escalar o link levaria junto o contador da
 * sacola, que é posicionado a partir da borda dele e sairia do lugar.
 */
.ac-icon-btn .ac-icon,
.ac-badge-link .ac-icon {
  transition: transform 0.22s var(--ac-ease);
}

.ac-icon-btn:hover,
.ac-badge-link:hover,
.ac-icon-btn:focus-visible,
.ac-badge-link:focus-visible {
  color: var(--ac-gold);
}

.ac-icon-btn:hover .ac-icon,
.ac-badge-link:hover .ac-icon,
.ac-icon-btn:focus-visible .ac-icon,
.ac-badge-link:focus-visible .ac-icon {
  transform: scale(1.14);
}

.ac-field {
  display: block;
}

.ac-field__label {
  display: block;
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-bottom: 8px;
}

.ac-field__input,
.ac-store select.ac-field__input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--ac-border-strong);
  background: none;
  padding: 14px;
  font: 400 14.5px/1 var(--ac-sans);
  color: var(--ac-ink);
  outline-offset: -2px;
  border-radius: 0;
  appearance: none;
}

/*
 * A SETA DO SELETOR, que o `appearance: none` acima tinha levado junto.
 *
 * Sem ela, um `<select>` é indistinguível de um campo de texto: nada na tela
 * diz que ali existem outros endereços, e a pessoa lê o primeiro como se fosse
 * o único. Foram quatro seletores nessa situação — o endereço do carrinho, a UF
 * do cadastro e os dois da devolução —, e a correção mora na regra que os
 * quatro compartilham.
 *
 * ## Por que `background-image`, e não `::after`
 *
 * O conteúdo de um `<select>` é substituído pelo navegador: pseudo-elemento
 * nele não é desenhado de forma confiável, e a alternativa seria um `<div>` em
 * volta de cada seletor — mais marcação para desenhar um triângulo.
 *
 * O SVG vai embutido como `data:`: um arquivo a mais é uma requisição a mais
 * para 300 bytes, e um ícone que falha ao carregar deixa o seletor sem o único
 * sinal de que ele é uma lista.
 *
 * O recuo à direita é o que impede o texto de passar por baixo da seta — sem
 * ele, um endereço longo termina embaixo dela.
 *
 * ## A cor está DUPLICADA aqui, e não há como não estar
 *
 * `%238a8378` é o `--ac-muted` e `%231c1a17` é o `--ac-ink`, escritos à mão:
 * um `data:` não lê variável de CSS. Mudar um dos dois tokens exige mudar o
 * hex daqui junto — está escrito para que a próxima pessoa saiba, em vez de
 * descobrir por uma seta que ficou da cor antiga.
 */
.ac-store select.ac-field__input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238a8378' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Aberto ou em foco, a seta acompanha a borda: é o mesmo sinal de que o
   controle está ativo. */
.ac-store select.ac-field__input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231c1a17' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ac-field__input:focus {
  border-color: var(--ac-gold-2);
}

.ac-field__input[aria-invalid='true'] {
  border-color: var(--ac-danger);
}

.ac-field__error {
  display: block;
  font: 400 12.5px/1.5 var(--ac-sans);
  color: var(--ac-danger);
  margin-top: 8px;
}

.ac-field__help {
  display: block;
  font: 400 12.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 8px;
}

/* ---------- Frete no carrinho ---------- */

.ac-cart-ship {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-border);
}

.ac-cart-ship .ac-label {
  display: block;
  margin-bottom: 14px;
}

/* A entrega escolhida mostra o preço da transportadora; o desconto do frete
 * grátis entra na tela de pagamento (D-343). Sem `display`: <p> já é bloco,
 * e a guarda de [hidden] continua vencendo (D-33). */
.ac-cart-ship__gratis {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--ac-success);
  background: var(--ac-success-bg);
  color: var(--ac-ink);
  font-size: 13px;
  line-height: 1.45;
}

.ac-cart-ship__gratis strong {
  color: var(--ac-success);
}

.ac-cart-ship .ac-inline-field {
  margin-bottom: 14px;
}

.ac-ship-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * Sem opção nenhuma o bloco some, em vez de deixar um vazio entre o campo e o
 * recado: um espaço reservado para o que ainda não foi calculado se lê como
 * algo que falhou.
 */
.ac-ship-options:empty {
  display: none;
}

/*
 * A LISTA DO CARRINHO É MAIS COMPACTA QUE A DO CHECKOUT, e de propósito.
 *
 * `.ac-option` é o mesmo componente nos dois lugares, mas o gesto é outro: no
 * checkout são duas ou três escolhas numa coluna larga, lidas com calma; aqui
 * são cinco ou seis numa barra estreita, VARRIDAS. Com a altura de lá, a
 * última entrega fica abaixo da dobra e o botão de fechar pedido some junto —
 * e a mais barata costuma ser justamente a que não cabe na tela.
 *
 * A compactação é escopada para não encurtar os cartões de pagamento, onde a
 * altura é o que dá peso a uma decisão que se toma uma vez.
 */
.ac-cart-ship .ac-option {
  gap: 12px;
  padding: 9px 14px;
  margin-bottom: 0;
  min-height: 0;
}

.ac-cart-ship .ac-option__label {
  font-size: 13.5px;
  line-height: 1.25;
}

/* O prazo é o segundo dado da linha, e não um subtítulo com respiro próprio. */
.ac-cart-ship .ac-option .ac-meta {
  font-size: 11.5px;
  line-height: 1.25;
  margin-top: 1px;
}

.ac-cart-ship .ac-option__note {
  font-size: 12.5px;
  white-space: nowrap;
}

.ac-cart-ship .ac-ship-options {
  gap: 6px;
}

/*
 * VER AS OUTRAS — um botão de TEXTO, e não de ação.
 *
 * A coluna tem uma ação primária só, "Fechar pedido". Um botão cheio aqui
 * faria a pessoa ler duas decisões de mesmo peso onde só uma conclui a compra,
 * e ele fica a dois dedos dela.
 *
 * Ele some pela guarda de `[hidden]` do topo da folha: o script o revela com a
 * contagem, e nada de `display` na classe pode vencer o atributo (D-33).
 */
.ac-ship-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ac-muted);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ac-ship-more:hover,
.ac-ship-more:focus-visible {
  color: var(--ac-ink);
}

/* ---------- Pedido do cliente ---------- */

/*
 * O cabeçalho põe número e situação NA MESMA LINHA.
 *
 * Empilhados, a situação fica abaixo da data e se lê como mais um detalhe do
 * pedido — quando ela é a primeira coisa que a pessoa veio conferir.
 */
.ac-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

/* Recado do pagamento: instrução do gateway, e não estado da loja. */
.ac-note {
  border-left: 2px solid var(--ac-gold-2);
  padding: 12px 16px;
  margin-bottom: 26px;
  background: var(--ac-surface);
}

.ac-note__title {
  font-weight: 500;
  margin: 0 0 4px;
}

.ac-note p {
  margin: 0;
  font-size: 13.5px;
}

/* ---------- Acompanhamento da entrega ---------- */

.ac-track {
  margin-bottom: 30px;
}

.ac-track__item {
  border: 1px solid var(--ac-border);
  padding: 16px 18px;
  margin-top: 10px;
}

.ac-track__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.ac-track__status {
  font: 500 14px/1.2 var(--ac-sans);
}

/*
 * O CÓDIGO precisa poder ser selecionado com um duplo clique.
 *
 * Ele é copiado e colado no site da transportadora dezenas de vezes; em fonte
 * proporcional, `OM123456789BR` tem caracteres que se confundem — zero e O,
 * um e I — e o erro só aparece do outro lado, como "objeto não encontrado".
 */
.ac-track__code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.ac-track__code code {
  font: 500 14px/1 var(--ac-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  letter-spacing: 0.06em;
  padding: 5px 9px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  user-select: all;
}

.ac-track__code-label {
  font: 400 11px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-track__link {
  font-size: 13px;
}

.ac-track__done {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--ac-ok, #2f6f4f);
}

/*
 * A LINHA DO TEMPO DA ENTREGA
 *
 * Ela responde "onde está agora" dentro do site — o link para a
 * transportadora continua ali para o dia em que ela souber algo que a nossa
 * fila ainda não trouxe.
 *
 * A linha vertical é `::before` do ITEM, e não uma borda da lista: como borda
 * ela desceria abaixo do último evento e sobraria um traço apontando para
 * nada. Assim, o último simplesmente não a desenha.
 */
.ac-entrega {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ac-entrega__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  font: 400 13px/1.5 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-entrega__item::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--ac-border);
}

.ac-entrega__item:last-child {
  padding-bottom: 0;
}

.ac-entrega__item:last-child::before {
  display: none;
}

.ac-entrega__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border: 1px solid var(--ac-border);
  border-radius: 50%;
  background: var(--ac-bg);
}

/* Só o mais recente é cheio: numa lista de doze eventos, é ele que responde
   a pergunta que fez a pessoa abrir a janela. */
.ac-entrega__item.is-now .ac-entrega__dot {
  border-color: var(--ac-ink);
  background: var(--ac-ink);
}

.ac-entrega__item.is-now strong {
  color: var(--ac-ink);
}

.ac-entrega__item strong {
  display: block;
  font-weight: 500;
}

.ac-entrega__desc,
.ac-entrega__meta {
  display: block;
}

.ac-entrega__meta {
  margin-top: 2px;
  font-size: 12px;
}

/* ---------- Histórico do pedido ---------- */

/*
 * O HISTÓRICO é o mesmo na conta e na confirmação do pedido.
 *
 * Dois desenhos para o mesmo dado divergem no primeiro evento novo — e foi
 * assim que a confirmação acabou com uma trilha numerada que prometia etapas
 * futuras onde o conteúdo era o passado.
 */
.ac-history {
  margin-bottom: 30px;
}

.ac-history .ac-label {
  display: block;
  margin-bottom: 4px;
}

.ac-history__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.ac-history__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ac-border);
}

.ac-history__item:last-child {
  border-bottom: 0;
}

.ac-history__label {
  font-size: 13.5px;
}

/* ---------- Itens e resumo ---------- */

.ac-order-items {
  margin-bottom: 30px;
}

.ac-order-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ac-border);
}

.ac-order-item:last-child {
  border-bottom: 0;
}

.ac-order-item__name .ac-meta {
  display: block;
  margin-top: 2px;
}

.ac-order-item__qty {
  color: var(--ac-muted);
  font-variant-numeric: tabular-nums;
}

.ac-order-item__price {
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  text-align: right;
}

/*
 * O PEDIDO COMO DOCUMENTO (D-265): uma folha branca com moldura sobre o fundo
 * creme da conta, como um PDF. As margens internas são as de uma página —
 * largas — e cada bloco tem o rótulo em versalete e o conteúdo abaixo.
 */
.ac-doc {
  max-width: 820px;
  margin: 8px 0 40px;
  padding: 44px 48px 36px;
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04), 0 24px 48px -32px rgba(28, 26, 23, 0.4);
}

.ac-doc__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--ac-ink);
}

.ac-doc__loja {
  margin: 0 0 18px;
  font: 400 13px/1 var(--ac-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-doc__tipo,
.ac-doc__rotulo {
  margin: 0 0 8px;
  font: 500 10.5px/1.2 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-doc__numero {
  margin: 0;
  font: 400 30px/1.1 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-doc__data {
  margin: 8px 0 0;
  font: 400 13px/1.4 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-doc__cab-dir {
  display: grid;
  justify-items: end;
  gap: 14px;
  text-align: right;
}

.ac-doc__total-cab {
  margin: 0;
  font: 400 26px/1.1 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-doc__total-cab span {
  display: block;
  margin-bottom: 4px;
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-doc__quadro {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ac-border);
}

.ac-doc__texto {
  margin: 0;
  font: 400 14px/1.6 var(--ac-sans);
  font-style: normal;
  color: var(--ac-ink);
}

.ac-doc__itens {
  margin: 0;
  padding: 26px 0 8px;
}

.ac-doc__itens-cab {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ac-border);
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-doc__itens-cab span:last-child {
  min-width: 84px;
  text-align: right;
}

.ac-doc .ac-order-item {
  align-items: center;
  padding: 14px 0;
}

.ac-doc .ac-order-item:last-of-type {
  border-bottom: 1px solid var(--ac-border);
}

.ac-doc .ac-order-item__name {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 14.5px/1.35 var(--ac-sans);
}

.ac-doc__foto {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--ac-surface);
  border-radius: 2px;
}

.ac-doc__totais {
  width: min(320px, 100%);
  margin: 18px 0 0 auto;
  font: 400 14px/1.4 var(--ac-sans);
}

.ac-doc__totais > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}

.ac-doc__totais dt {
  color: var(--ac-muted);
}

.ac-doc__totais dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ac-doc__total {
  margin-top: 8px;
  padding-top: 12px !important;
  border-top: 2px solid var(--ac-ink);
}

.ac-doc__total dt,
.ac-doc__total dd {
  color: var(--ac-ink);
  font-weight: 500;
  font-size: 16px;
}

.ac-doc .ac-track,
.ac-doc .ac-history {
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ac-border);
  margin-top: 26px;
}

.ac-doc .ac-track .ac-label,
.ac-doc .ac-history .ac-label {
  font-size: 10.5px;
  color: var(--ac-muted);
}

.ac-doc .ac-track__item {
  background: var(--ac-surface);
  border-color: transparent;
}

.ac-doc__rodape {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--ac-border);
  font: 400 12.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  text-align: center;
}

@media (max-width: 720px) {
  .ac-doc {
    padding: 28px 20px 24px;
  }

  .ac-doc__cab {
    flex-direction: column;
  }

  .ac-doc__cab-dir {
    justify-items: start;
    text-align: left;
  }

  .ac-doc__quadro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .ac-order-item {
    grid-template-columns: 1fr auto;
  }

  .ac-order-item__price {
    grid-column: 2;
  }
}

/* ---------- Devoluções ---------- */

.ac-back {
  font: 400 12.5px/1 var(--ac-sans);
  margin: 0 0 22px;
}

.ac-return {
  position: relative;
  border: 1px solid var(--ac-border);
  padding: 22px 24px;
  margin-bottom: 16px;
}

/* O cartão inteiro abre: o link cobre a área e fica ATRÁS do conteúdo. */
.ac-return__open {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ac-return__open:hover {
  background: var(--ac-surface);
}

.ac-return > *:not(.ac-return__open) {
  position: relative;
  z-index: 1;
}

.ac-return__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ac-return__head strong {
  display: block;
  font: 500 14px/1.3 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-return__items-line {
  margin: 16px 0 0;
}

.ac-return__block {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--ac-border);
}

.ac-return__block .ac-label {
  display: block;
  margin-bottom: 14px;
}

.ac-return__items {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 13.5px/1.9 var(--ac-sans);
}

.ac-return__pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- A trilha ---------- */

/*
 * Os cinco degraus vêm do MOTOR. A linha que os liga é um pseudo-elemento do
 * item, e não uma régua atrás de tudo: assim ela acompanha a quebra em telas
 * estreitas em vez de atravessar o vazio.
 */
.ac-trail {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac-trail__step {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-top: 20px;
  text-align: center;
}

.ac-trail__step::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--ac-border-strong);
}

.ac-trail__step:first-child::before {
  display: none;
}

.ac-trail__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  border: 1px solid var(--ac-border-strong);
  background: var(--ac-bg);
}

.ac-trail__label {
  display: block;
  font: 400 11px/1.3 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-trail__step.is-feito .ac-trail__dot,
.ac-trail__step.is-atual .ac-trail__dot {
  border-color: var(--ac-gold-2);
  background: var(--ac-gold-2);
}

.ac-trail__step.is-atual .ac-trail__label {
  color: var(--ac-ink);
  font-weight: 500;
}

/* Parada é fim de linha, e não etapa cumprida: o vermelho diz que ninguém vai
   fazer as seguintes. */
.ac-trail__step.is-parada .ac-trail__dot {
  border-color: var(--ac-danger);
  background: var(--ac-danger);
}

.ac-trail__step.is-parada .ac-trail__label {
  color: var(--ac-danger);
}

.ac-trail__step.is-cancelado .ac-trail__label {
  opacity: .45;
}

/* ---------- Fotos ---------- */

.ac-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ac-shots.is-mini {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}

.ac-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--ac-border);
  object-fit: cover;
}

/* ---------- A conversa ---------- */

.ac-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--ac-border-strong);
  font: 400 13.5px/1.7 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/*
 * Quem falou se lê pelo LADO e pelo fundo, não por um rótulo: numa conversa de
 * dez mensagens, dez rótulos "loja" são dez leituras desperdiçadas.
 */
.ac-bubble {
  max-width: 86%;
  padding: 12px 14px;
  background: var(--ac-surface);
}

.ac-bubble.is-mine {
  align-self: flex-end;
  background: var(--ac-gold-soft, var(--ac-surface));
  border: 1px solid var(--ac-border);
}

.ac-bubble header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.ac-bubble header strong {
  font: 500 12px/1.3 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-bubble header em {
  font: 400 11px/1.3 var(--ac-sans);
  font-style: normal;
  color: var(--ac-muted);
}

.ac-bubble p {
  margin: 0;
  font: 400 13.5px/1.6 var(--ac-sans);
  white-space: pre-wrap;
}

.ac-reply {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-reply__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ac-reply__foot .ac-btn {
  margin-left: auto;
}

/*
 * O campo de arquivo some, mas continua alcançável pelo teclado: escondê-lo com
 * `display:none` o tiraria da ordem de tabulação.
 */
.ac-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-gold-2);
  text-decoration: underline;
}

.ac-attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ac-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13.5px/1.5 var(--ac-sans);
}

.ac-modal__form {
  display: contents;
}

.ac-modal__body .ac-field + .ac-field {
  margin-top: 20px;
}

/* ---------- Obrigatório ---------- */

/*
 * O asterisco é decorativo (`aria-hidden` na marcação): o `required` do input
 * já anuncia "obrigatório" ao leitor de tela, e ler "asterisco" no meio do
 * rótulo seria a mesma informação duas vezes.
 */
.ac-field__req {
  color: var(--ac-gold-2);
  margin-left: 3px;
}

.ac-field__legend {
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin: 0 0 20px;
}

/* ---------- Quem processa o pagamento ---------- */

.ac-payment-by {
  font: 400 12px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  margin: 16px 0 0;
}

/* ---------- Janela ---------- */

/*
 * `<dialog>` nativo. A camada superior é do navegador, então não há `z-index`
 * a resolver aqui — e é justamente o que se perde ao recriar isto à mão.
 */
.ac-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 1px solid var(--ac-border-strong);
  background: var(--ac-bg);
  color: var(--ac-ink);
  overflow: hidden;
}

.ac-modal::backdrop {
  background: rgb(20 16 12 / 45%);
}

/*
 * Grade de três faixas: só o corpo rola. Com a página inteira rolando, o botão
 * de aceitar sai da tela e a pessoa precisa voltar ao fim do texto para
 * encontrá-lo.
 */
/*
 * A JANELA É UMA COLUNA, e não uma grade de três linhas.
 *
 * `grid-template-rows: auto minmax(0,1fr) auto` presumia exatamente TRÊS
 * filhos, na ordem cabeçalho–corpo–rodapé. A janela de entrega tem um quarto —
 * o endereço para o qual as opções foram cotadas — e ele caiu na linha
 * flexível: o endereço esticou, a lista foi para a linha `auto` e transbordou
 * por cima dele.
 *
 * É o D-21 outra vez: uma grade posicional que conta filhos quebra em silêncio
 * quando alguém acrescenta um. A coluna NOMEIA o que rola — `__body` — em vez
 * de contar posições, e passa a aceitar qualquer número de irmãos.
 */
.ac-modal[open] {
  display: flex;
  flex-direction: column;
}

.ac-modal__head,
.ac-modal__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

.ac-modal__head {
  border-bottom: 1px solid var(--ac-border);
}

/*
 * Onde a entrega vai — leitura, dentro da janela de troca.
 *
 * Sem ela, a lista de preços aparece sem dizer para qual endereço foi cotada, e
 * quem abriu a janela justamente para conferir isso fica sem resposta.
 */
/*
 * O DOCUMENTO DO PEDIDO, dentro da janela.
 *
 * Blocos separados por espaço em vez de linha: um documento com régua entre
 * cada seção compete com a tabela de valores, que é a única parte que precisa
 * de alinhamento forte.
 */
.ac-doc__bloco {
  margin-top: 22px;
}

.ac-doc__bloco:first-child {
  margin-top: 0;
}

.ac-doc__titulo {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
  margin: 0 0 8px;
}

.ac-doc__bloco p {
  margin: 0 0 4px;
  font: 400 13.5px/1.5 var(--ac-sans);
}

.ac-doc__linha {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ac-border);
  font: 400 13.5px/1.4 var(--ac-sans);
}

.ac-doc__rotulo {
  color: var(--ac-muted);
}

.ac-modal__where {
  margin: 0;
  padding: 14px 24px 0;
  font: 400 12.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
}

/* ---------- A entrega escolhida, no checkout ---------- */

/*
 * UMA LINHA, e não a lista.
 *
 * Dez transportadoras abertas no meio do checkout são dez decisões pedidas de
 * novo a quem já escolheu no carrinho — e empurram o botão de concluir para
 * fora da tela. Aqui o checkout confirma; trocar é a exceção, e tem botão.
 */
.ac-ship-chosen {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--ac-gold-2);
  background: var(--ac-surface);
}

.ac-ship-chosen__what {
  flex: 1;
  min-width: 0;
}

.ac-ship-chosen__label {
  display: block;
  font: 400 14.5px/1.25 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-ship-chosen__price {
  font: 500 14px/1 var(--ac-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * O AVISO DA RETIRADA, no lugar do endereço.
 *
 * Sem moldura de cartão: ele é informação, e a decisão mora na linha da
 * entrega logo abaixo — com a mesma borda dourada, as duas disputariam a
 * leitura e a que responde "o que eu escolhi?" perderia.
 *
 * O respiro abaixo dele vem do bloco da entrega, que já o declara. Uma margem
 * própria aqui somaria com aquela e abriria um vão que nenhuma das duas telas
 * pediu.
 */
.ac-pickup-note {
  margin: 0;
  font: 400 14.5px/1.5 var(--ac-sans);
  color: var(--ac-ink);
}

/*
 * `display: block` para a segunda linha existir: `.ac-meta` é inline, e as
 * duas frases sairiam coladas numa só.
 */
.ac-pickup-note .ac-meta {
  display: block;
  margin-top: 4px;
}

/*
 * O endereço da unidade de retirada (§9). Um bloco discreto — não é erro, nem
 * destaque de preço — então ele usa a borda esquerda que o resto da loja já
 * reserva para "informação acompanhando uma decisão" (`ac-callout`), e não a
 * moldura inteira dos avisos de erro.
 */
.ac-pickup-address {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 2px solid var(--ac-gold-2);
  background: var(--ac-surface);
  font-size: 13.5px;
  line-height: 1.5;
}

.ac-pickup-address .ac-meta {
  margin-top: 0;
}

.ac-pickup-route {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ac-gold);
  text-decoration: underline;
}

/*
 * O AVISO DE DISTÂNCIA. A unidade de retirada é longe do endereço resolvido
 * pelo CEP (`Support\Region::is_near_pickup()`, fora da RMBH).
 *
 * As cores de erro (`--ac-danger`), e não as neutras: isto é uma decisão com
 * CUSTO real se ignorada — quem mora longe e escolhe retirar vai ter que
 * viajar para buscar o produto —, e precisa se destacar de "você retira na
 * loja", que é só informação.
 */
.ac-pickup-warning {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ac-danger);
  background: var(--ac-danger-bg);
  color: var(--ac-danger);
  font-size: 13px;
  line-height: 1.5;
}

/* Enquanto recota, a linha esmaece — sem sumir, para a tela não saltar. */
.ac-ship-chosen[aria-busy='true'] {
  opacity: 0.55;
}

.ac-btn--mini {
  padding: 7px 14px;
  font-size: 12px;
}

@media (max-width: 560px) {
  .ac-ship-chosen {
    flex-wrap: wrap;
  }

  .ac-ship-chosen__what {
    flex-basis: 100%;
  }
}

.ac-modal__title {
  flex: 1;
  min-width: 0;
  font: 400 20px/1.3 var(--ac-serif);
  margin: 0;
}

.ac-modal__close {
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 24px/1 var(--ac-sans);
  color: var(--ac-muted);
  padding: 0 4px;
}

.ac-modal__close:hover {
  color: var(--ac-ink);
}

/*
 * SÓ O CORPO ROLA.
 *
 * Com a janela inteira rolando, o cabeçalho e o botão de fechar saem da tela —
 * e a pessoa precisa voltar ao fim da lista para achar a saída.
 *
 * `min-height: 0` é o que faz isso valer: um filho flex não encolhe abaixo do
 * conteúdo sem ele, e a barra de rolagem apareceria na janela em vez de aqui.
 */
.ac-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

/* O que não rola tem tamanho próprio, qualquer que seja a ordem. */
.ac-modal__head,
.ac-modal__where,
.ac-modal__foot {
  flex: 0 0 auto;
}

.ac-modal__foot {
  border-top: 1px solid var(--ac-border);
  justify-content: space-between;
}

.ac-modal__link {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-modal__link:hover {
  color: var(--ac-ink);
}

/* Campo com botão colado, como o do cupom. */
.ac-inline-field {
  display: flex;
  border: 1px solid var(--ac-border-strong);
}

.ac-inline-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  padding: 14px;
  font: 400 13.5px/1 var(--ac-sans);
}

.ac-inline-field button {
  border-left: 1px solid var(--ac-border-strong);
  padding: 0 16px;
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

/* =========================================================================
 * 7. Mensagens
 * ====================================================================== */

.ac-notice {
  border: 1px solid var(--ac-border-strong);
  padding: 16px 18px;
  font: 400 14px/1.6 var(--ac-sans);
  margin-bottom: 16px;
}

.ac-notice--error {
  border-color: var(--ac-danger);
  background: var(--ac-danger-bg);
  color: var(--ac-danger);
}

.ac-notice--success {
  border-color: var(--ac-success);
  background: var(--ac-success-bg);
  color: var(--ac-success);
}

.ac-notice--info {
  border-color: rgba(201, 169, 97, 0.5);
  background: var(--ac-surface);
  color: var(--ac-ink);
}

/* `changes[]` do carrinho. Nunca é escondido: é o aviso que evita "o valor
   mudou sozinho na hora de pagar". */
.ac-changes {
  border: 1px solid rgba(201, 169, 97, 0.6);
  background: var(--ac-surface);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.ac-changes__title {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac-gold);
  margin-bottom: 12px;
}

.ac-changes__item {
  font: 400 13.5px/1.6 var(--ac-sans);
  padding: 5px 0;
}

.ac-toasts {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 320;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ac-toast {
  background: var(--ac-ink);
  color: var(--ac-bg);
  padding: 14px 20px;
  font: 400 13.5px/1.4 var(--ac-sans);
  box-shadow: 0 12px 34px rgba(28, 26, 23, 0.22);
  animation: ac-fade-in 0.24s ease;
  border-left: 3px solid transparent;
}

/*
 * OS TRÊS TONS EXISTIAM NO JAVASCRIPT E NÃO NA FOLHA.
 *
 * `toast(msg, 'error')` já escrevia a classe desde sempre, e as três não
 * tinham regra nenhuma: um erro saía idêntico a uma confirmação, no mesmo tom
 * de tinta. Um aviso que não distingue as duas coisas é pior que nenhum — ele
 * ensina a não ler.
 *
 * A cor mora na FAIXA, e não no fundo: fundo inteiro colorido compete com a
 * página atrás e derruba o contraste do texto. É a mesma decisão do toast do
 * painel (D-32).
 */
.ac-toast--success {
  border-left-color: var(--ac-success);
}

.ac-toast--error {
  border-left-color: var(--ac-danger);
}

.ac-toast--info {
  /* Era `--ac-line`, um token que nunca foi declarado (D-115): a cor caía
     no valor herdado e a faixa saía transparente. O dourado é o acento da
     casa, visível sobre a tinta e distinto do verde e do vermelho. */
  border-left-color: var(--ac-gold-2);
}

.ac-empty {
  border: 1px solid rgba(28, 26, 23, 0.14);
  padding: 64px 40px;
  text-align: center;
}

.ac-empty__icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(28, 26, 23, 0.16);
  align-items: center;
  justify-content: center;
  color: var(--ac-muted);
}

.ac-empty__title {
  font: 300 34px/1.12 var(--ac-serif);
  margin-top: 24px;
}

.ac-empty__text {
  margin: 14px auto 0;
  max-width: 440px;
  font: 400 14.5px/1.7 var(--ac-sans);
  color: var(--ac-muted);
}

/* Esqueleto com a mesma proporção do card, para a lista não pular. */
.ac-skeleton {
  background: linear-gradient(90deg, var(--ac-surface) 25%, #f7f2ea 37%, var(--ac-surface) 63%);
  background-size: 400% 100%;
  animation: ac-shimmer 1.4s ease infinite;
}

@keyframes ac-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@keyframes ac-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ac-drop-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ac-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* =========================================================================
 * Saída das sobreposições
 *
 * Cada uma volta por onde entrou: a busca sobe, a gaveta e a sacola vão para a
 * direita, o quiz sobe. `forwards` segura o último quadro até
 * o JavaScript aplicar `hidden` — sem ele, o painel voltaria ao lugar por um
 * quadro antes de sumir, que é justamente o piscar que se quer evitar.
 *
 * 240ms contra os 300–340ms da entrada: sair é mais rápido do que chegar, e
 * um fechamento lento parece que o clique não pegou.
 * ====================================================================== */

@keyframes ac-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes ac-drop-out {
  to {
    transform: translateY(-100%);
  }
}

@keyframes ac-drawer-out {
  to {
    transform: translateX(100%);
  }
}

@keyframes ac-cart-drawer-out {
  to {
    transform: translateX(100%);
  }
}

.is-closing .ac-overlay__scrim {
  animation: ac-fade-out 0.24s ease forwards;
}

.ac-overlay.is-closing .ac-search,
.ac-quiz.is-closing .ac-quiz__panel {
  animation: ac-drop-out 0.24s var(--ac-ease) forwards;
}

.ac-drawer.is-closing .ac-drawer__panel {
  animation: ac-drawer-out 0.24s var(--ac-ease) forwards;
}

.ac-cart-drawer.is-closing .ac-cart-drawer__panel {
  animation: ac-cart-drawer-out 0.24s var(--ac-ease) forwards;
}

@keyframes ac-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.04);
  }
}

/* =========================================================================
 * 8. Barra promocional, cabeçalho e navegação
 * ====================================================================== */

/*
 * Sem a conta dentro dela, a faixa voltou a ser só aviso — e aviso se lê
 * centralizado. Alinhá-la ao container do cabeçalho fazia sentido enquanto
 * havia um link à direita para casar com a sacola; com um bloco só, o
 * `space-between` o encostaria na borda esquerda.
 */
.ac-announce {
  background: var(--ac-ink);
  min-height: 40px;
  display: flex;
  align-items: center;
}

/*
 * D-281: os avisos à ESQUERDA, alinhados à marca do cabeçalho logo abaixo, e a
 * CONTA à direita, alinhada à sacola. Tudo em branco: o dourado suave sobre a
 * tinta se lia como enfeite, e a conta é um link que precisa ser achado.
 */
.ac-announce__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ac-announce__list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 34px;
  min-width: 0;
  overflow: hidden;
}

.ac-announce__item {
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-white);
  white-space: nowrap;
}

.ac-announce__dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
  flex: none;
}

/* A saudação é texto, não link (D-282). Sem aviso ela continua à direita:
   `margin-left: auto` a empurra para lá mesmo sozinha no `space-between`.
   O `display` fica atrás de `:not([hidden])` (D-33). */
.ac-announce__greeting:not([hidden]) {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-white);
}

.ac-announce__greeting-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A porta da conta no cabeçalho, à esquerda da lupa: ícone e "Minha conta". */
.ac-header__account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  white-space: nowrap;
  font: 400 12px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-ink);
  transition: color 0.2s ease;
}

.ac-header__account .ac-icon {
  flex: none;
}

.ac-header__account:hover,
.ac-header__account:focus-visible {
  color: var(--ac-gold);
}

/* --- Cabeçalho desktop (Header v2) ---------------------------------------
 * UMA FAIXA SÓ. As categorias saíram daqui e vivem na barra de navegação.
 *
 * Duas alturas: 96px em repouso, 68px depois de 24px de rolagem. A troca
 * acontece por classe, e um limite ÚNICO governa as três reações — altura,
 * escala do logotipo e recolhimento do nome da conta. Limites separados
 * fariam o cabeçalho estalar em três tempos durante a mesma rolagem.
 * ------------------------------------------------------------------------ */

.ac-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--ac-bg);
  border-bottom: 1px solid var(--ac-border);
  height: 96px;
  transition: height var(--ac-header-transition), box-shadow var(--ac-header-transition);
}

/*
 * O ESPAÇADOR DEVOLVE AO FLUXO EXATAMENTE O QUE O CABEÇALHO TIRA.
 *
 * Compactar levava do FLUXO do documento a diferença entre as duas alturas, e
 * a página encolhia junto. O navegador corrigia a rolagem para manter o
 * conteúdo visível no lugar — e a correção era MAIOR que a faixa de histerese
 * do gatilho: a rolagem caía abaixo do limite de reabertura, o cabeçalho
 * reabria, a página crescia de volta, e ele compactava outra vez. Um
 * pisca-pisca sem fim, sem ninguém tocar em nada.
 *
 * A SOMA TEM DE FECHAR NOS DOIS ESTADOS: 96 + 0 e 68 + 28. O fluxo tem a mesma
 * altura nos dois, e a rolagem não se mexe. A regra é a de sempre — UM GATILHO
 * NÃO PODE MEXER NO QUE ELE MEDE.
 *
 * Ele acompanha a mesma transição: em tempos diferentes, a soma passaria por
 * valores intermediários e o conteúdo tremeria durante o movimento.
 */
.ac-header__spacer {
  height: 0;
  transition: height var(--ac-header-transition);
}

.ac-header.is-stuck + .ac-header__spacer {
  height: 28px;
}

.ac-header.is-stuck {
  height: 68px;
  box-shadow: 0 10px 30px rgba(28, 26, 23, 0.1);
}

.ac-header__inner {
  position: relative;
  max-width: var(--ac-container);
  margin: 0 auto;
  height: 100%;
  /*
   * UMA LINHA (D-374): marca, menu e ações lado a lado, centrados na altura
   * da faixa. O menu ocupa o que sobra ENTRE a marca e as ações e centra os
   * itens ali — a mesma distância dos dois lados. Antes os três eram
   * posicionados à parte, e o menu ficava no meio da PÁGINA: com as ações mais
   * largas que a marca, ele encostava nelas.
   *
   * O centro vertical acompanha a altura da faixa sozinho, nos dois estados.
   */
  display: flex;
  align-items: center;
  padding: 0 var(--ac-gutter);
  box-sizing: border-box;
}

/*
 * Os dois blocos são posicionados a partir do CENTRO da faixa, e o centro
 * muda com a altura: 48px em repouso, 34px compacto. Sem a segunda linha, não
 * há mais nada entre eles — a navegação que dividia a vertical saiu.
 */
.ac-header__logo {
  flex: none;
  transform-origin: left center;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform var(--ac-header-transition);
}

.ac-header.is-stuck .ac-header__logo {
  /*
   * A assinatura tem 64px de altura e o cabeçalho encolhido tem 68 — ela caberia
   * inteira, e mesmo assim encolhe: o cabeçalho compacto existe para devolver
   * tela à página, e uma marca do mesmo tamanho nos dois estados faz a
   * compactação parecer que não aconteceu.
   *
   * 0.76 a deixa em 49px, com 9,5px de respiro. Escalar em vez de trocar a largura
   * mantém a transição contínua: mudar `width` reflui a barra a cada pixel de
   * rolagem, que é como nasce o pisca-pisca do D-79.
   */
  transform: scale(0.76);
}

.ac-header__actions {
  flex: none;
  /* Sem o menu (telas de tarefa), as ações continuam na borda direita. */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

/*
 * O MENU DA LOJA (D-281), no centro da faixa, entre a marca e as ações.
 *
 * Ele segue o centro vertical da faixa como os outros dois blocos (48px em
 * repouso, 34px compacto), e é centrado pela metade da largura: com a marca
 * à esquerda e três ícones à direita, sobra espaço dos dois lados.
 *
 * O item atual ganha o filete dourado embaixo; Promoções, o dourado no texto
 * — é o destaque que quem monta o menu escolheu (`ac-destaque`).
 */
.ac-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  white-space: nowrap;
  transition: transform var(--ac-header-transition);
}

/* No cabeçalho compacto a marca encolhe por `scale`, e continua ocupando os
   190px na linha: a borda visível dela recua 46px. O menu recua a metade, e
   volta a ficar no meio do espaço que se vê. */
.ac-header.is-stuck .ac-header__nav {
  transform: translateX(-23px);
}

/* Com seis itens o menu tem 622px. Em janela estreita ele encostaria na marca
   e nas ações: os itens se aproximam antes disso. */
@media (max-width: 1240px) {
  .ac-header__nav {
    gap: 20px;
  }

  .ac-header__nav-item {
    letter-spacing: 0.12em;
  }
}

.ac-header__nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-ink);
  transition: color 0.2s ease;
}

.ac-header__nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--ac-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.ac-header__nav-item:hover,
.ac-header__nav-item:focus-visible,
.ac-header__nav-item[aria-current='page'] {
  color: var(--ac-gold);
}

.ac-header__nav-item:hover::after,
.ac-header__nav-item:focus-visible::after,
.ac-header__nav-item[aria-current='page']::after {
  transform: scaleX(1);
}

.ac-header__nav-item--featured {
  color: var(--ac-gold);
}

/* Entre 901 e 1100px os cinco itens encostariam na marca: o espaço entre
   eles encolhe antes de qualquer coisa sumir. */
@media (max-width: 1100px) {
  .ac-header__nav {
    gap: 20px;
  }

  .ac-header__nav-item {
    letter-spacing: 0.12em;
  }

  /* E o rotulo "Minha conta" vira so o icone: com ele, o menu encosta nas
     acoes. O texto continua para o leitor de tela, e o title o mostra. */
  .ac-header__account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* O botão de WhatsApp ocupa o canto; quem vier depois se empilha acima dele. */
.ac-store--whats {
  --unbox-fab-bottom: 68px;
}

/*
 * O RESPIRO QUE O RODAPÉ DAVA.
 *
 * `.ac-footer` abre com 96px de margem, e era ele que separava o fim do
 * conteúdo da borda da janela. Nas cinco telas que ficaram sem rodapé o
 * último botão encostava na base — que se lê como conteúdo cortado, e não
 * como decisão.
 *
 * A decisão é a de `TemplateLoader::sem_moldura`, a mesma que tira o
 * rodapé e o menu do cabeçalho.
 */
.ac-store--sem-rodape {
  padding-bottom: 96px;
}

.ac-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ac-ink);
}

.ac-logo__word {
  display: block;
  font: 400 25px/1 var(--ac-serif);
  letter-spacing: 0.3em;
  color: var(--ac-ink);
  white-space: nowrap;
}

.ac-logo__sub {
  display: block;
  font: 400 8.5px/1 var(--ac-sans);
  letter-spacing: 0.52em;
  color: var(--ac-gold);
  margin-top: 5px;
  padding-left: 3px;
}





.ac-badge {
  position: absolute;
  top: -11px;
  right: -13px;
  min-width: 19px;
  height: 19px;
  background: var(--ac-gold-2);
  box-shadow: 0 0 0 2px var(--ac-bg);
  color: #fff;
  font: 600 11.5px/19px var(--ac-sans);
  text-align: center;
  border-radius: 10px;
  padding: 0 5px;
}

.ac-badge[hidden] {
  display: none;
}

/* --- Cabeçalho mobile --------------------------------------------------- */

.ac-mheader {
  display: none;
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ac-bg);
  border-bottom: 1px solid var(--ac-border);
}

/*
 * Logotipo à esquerda, ações à direita — a mesma composição do cabeçalho
 * largo, na altura do desenho. A grade de três colunas existia para centralizar
 * o logotipo entre o menu e a sacola; sem o botão de menu, que desceu para a
 * barra, não há o que centralizar.
 */
.ac-mheader__bar {
  height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ac-mheader__actions {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: none;
}

/* =========================================================================
 * Índice de taxonomia: marcas, famílias olfativas, ocasiões
 *
 * Uma grade de alvos largos, e não uma lista de links de texto. São dezenas de
 * termos curtos: em coluna única eles ocupam três telas para dizer o que cabe
 * em meia, e cada linha vira um alvo de 14px de altura no celular.
 * ====================================================================== */

.ac-termos {
  list-style: none;
  margin: 0 0 var(--ac-section);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--ac-border);
}

.ac-termo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 18px 20px;
  background: var(--ac-bg);
  color: var(--ac-ink);
  transition: background 0.18s ease, color 0.18s ease;
}

.ac-termo:hover,
.ac-termo:focus-visible {
  background: var(--ac-surface);
  color: var(--ac-gold);
}

.ac-termo__nome {
  font: 400 17px/1.3 var(--ac-serif);
  min-width: 0;
}

/* Tabular para os números ficarem alinhados de uma linha para a outra: numa
   grade, algarismos de larguras diferentes fazem a coluna da direita serrilhar. */
.ac-termo__conta {
  flex: none;
  font: 400 12px/1 var(--ac-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ac-muted);
}

/* =========================================================================
 * 9. Rodapé
 * ====================================================================== */

.ac-footer {
  margin-top: 96px;
  background: var(--ac-ink);
  color: var(--ac-muted);
}

.ac-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 72px;
}

/*
 * A ASSINATURA, em qualquer lugar que ela apareça.
 *
 * As medidas vão nos atributos `width` e `height` do `<img>` — é o que impede a
 * barra de pular enquanto o arquivo carrega. O teto aqui é para a coluna
 * estreita: no rodapé do celular ela tem menos que os 190px pedidos, e sem o
 * limite a marca sairia por baixo do texto ao lado. `height: auto` é o que faz
 * a proporção acompanhar em vez de a marca achatar.
 */
.ac-logo__lockup {
  display: block;
  max-width: 100%;
  height: auto;
}

/* A marca quadrada — hoje sem nenhum uso na loja, e ainda do desenho antigo. */
.ac-mark {
  display: block;
  max-width: 100%;
  height: auto;
}

.ac-footer__about {
  margin: 26px 0 0;
  font: 400 14.5px/1.7 var(--ac-sans);
  color: var(--ac-muted);
  max-width: 290px;
}

/*
 * O BLOCO LEGAL do rodapé — razão social, CNPJ, endereço e contato.
 *
 * Ele é um `<address>`, que é o elemento que descreve quem publica a página, e
 * o navegador o desenha em ITÁLICO por padrão. Um CNPJ em itálico se lê como
 * citação, e não como identificação: `font-style: normal` é o que desfaz isso.
 *
 * O `font` abreviado NÃO resolve sozinho — ele reinicia `font-style` para
 * `normal` porque a forma curta zera o que não é declarado, mas depender disso
 * é depender de um efeito colateral. Declarado, ele sobrevive a alguém trocar
 * a abreviação por `font-size` e `line-height` soltos.
 */
.ac-footer__legal {
  font: 400 13.5px/1.8 var(--ac-sans);
  font-style: normal;
  color: var(--ac-muted);
  margin-top: 22px;
}

/*
 * O contato é a única coisa clicável do bloco, e por isso ele se distingue —
 * mas por SUBLINHADO, e não por cor: no rodapé escuro, um dourado no meio de
 * três linhas cinzas puxaria o olho para o telefone e não para o endereço, e
 * as quatro linhas têm o mesmo peso legal.
 */
.ac-footer__contato a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-footer__contato a:hover,
.ac-footer__contato a:focus-visible {
  color: var(--ac-gold-2);
}

.ac-footer__title {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold-2);
  margin-bottom: 22px;
}

.ac-footer__link {
  display: block;
  font: 400 14.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  padding: 10px 0;
}

.ac-footer__link:hover {
  color: var(--ac-bg);
}

.ac-footer__bottom {
  margin-top: 56px;
  border-top: 1px solid var(--ac-on-dark);
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ac-footer__copy {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-paybadges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-paybadge {
  border: 1px solid rgba(249, 246, 241, 0.16);
  color: var(--ac-muted);
  font: 400 10.5px/1 var(--ac-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 9px;
}

/* Rodapé reduzido do checkout: sem distração, sem links de saída. */
/* A barra de quem desenvolveu, abaixo do rodapé (D-322). Preto puro, um tom
 * abaixo do rodapé, para se ler como outra faixa e não como parte dele. */
.ac-credito {
  background: #000;
}

.ac-credito__wrap {
  display: flex;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

.ac-credito__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
}

.ac-credito__por {
  font: 500 11.5px/1 var(--ac-sans);
  letter-spacing: 0.02em;
}

.ac-credito__logo {
  display: block;
  width: auto;
  height: 26px;
}

.ac-credito__link:hover .ac-credito__logo,
.ac-credito__link:focus-visible .ac-credito__logo {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .ac-credito__wrap {
    justify-content: center;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

.ac-footer--checkout {
  margin-top: 64px;
  background: none;
}

.ac-footer--checkout .ac-footer__bottom {
  margin-top: 0;
  border-top: 1px solid rgba(28, 26, 23, 0.12);
}

.ac-footer--checkout .ac-paybadge {
  border-color: rgba(28, 26, 23, 0.16);
}

/* =========================================================================
 * 10. Cartão de produto
 *
 * A estrutura semântica separa o que é NAVEGAÇÃO do que é AÇÃO. O link cobre
 * imagem, marca e nome; favorito, seletor de tamanho e "adicionar" ficam fora
 * dele. Botão dentro de link é inoperável por teclado e ambíguo por leitor de
 * tela (§10.4).
 * ====================================================================== */

.ac-grid {
  display: grid;
  gap: 20px;
}

/*
 * Seis colunas: a grade de Favoritos.
 *
 * Ela cabe porque o cartão de la e o minimo -- sem marca, sem resumo e sem os
 * filetes. Com o cartão inteiro, seis colunas dariam um resumo de duas linhas
 * em 150px, e o nome quebraria em tres.
 */
.ac-grid--6 {
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.ac-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.ac-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/*
 * AS FAIXAS DA HOME SEM BURACO (D-375).
 *
 * Cada faixa recebe até SEIS produtos. Na tela larga aparecem os que cabem
 * numa fileira (cinco, ou quatro em Lançamentos); com três ou duas colunas,
 * os seis — duas ou três fileiras cheias, em vez de uma fileira e um cartão
 * sozinho.
 *
 * E com duas colunas, se a faixa tem um número ímpar de produtos, o último
 * não aparece: um cartão sozinho na última fileira é o buraco que isto veio
 * tirar. Quem tem um produto só continua vendo ele.
 */
@media (min-width: 1024px) {
  .ac-grid--5.ac-grid--par > :nth-child(n + 6),
  .ac-grid--4.ac-grid--par > :nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 599px) {
  .ac-grid--par > :last-child:nth-child(odd):not(:first-child) {
    display: none;
  }
}

/*
 * A lista de desejos da conta usa o gap de 16 da página Favoritos, e não
 * o de 20 da grade comum: é o mesmo cartão, e um respiro maior aqui faria
 * a mesma lista parecer duas listas.
 */
.ac-grid--desejos {
  gap: 16px;
}

.ac-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ac-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/*
 * O link é uma COLUNA que ocupa o que sobra do cartão. Numa fileira os cartões
 * têm a mesma altura, e é isso que deixa o bloco de dentro crescer — a lista
 * do kit, em `.ac-card__kit` — e o preço parar na mesma linha em todos.
 */
.ac-card__link {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  color: var(--ac-ink);
}

.ac-card__media {
  position: relative;
  /* Item de uma coluna flex: a foto não cede altura a ninguém. */
  flex: none;
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid rgba(28, 26, 23, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.ac-card__link:hover .ac-card__media {
  border-color: var(--ac-gold-2);
}

.ac-card__img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ac-card--capa-cheia .ac-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

.ac-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ac-ink);
  color: var(--ac-gold-soft);
  font: 500 9.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 10px;
}

/*
 * Zero: no desenho a coluna de texto alinha com a borda da imagem, e essa
 * linha vertical única é o que segura a grade. A variável fica para quem
 * quiser recuar o texto sem mexer em seis regras.
 */
.ac-card {
  --ac-card-pad: 0px;
}

.ac-card__brand,
.ac-card__name,
.ac-card__meta,
.ac-card__price,
.ac-card__row,
.ac-card__actions {
  padding-inline: var(--ac-card-pad);
}

/*
 * AS TRÊS FAIXAS DO CARTÃO TÊM ALTURA RESERVADA: marca, nome e resumo.
 *
 * Numa fileira, "Scandal" ocupa uma linha e "Scandal Pour Homme Le Parfum"
 * ocupa duas — e sem altura reservada o nome mais longo empurra o resumo e o
 * preço do cartão dele para baixo, enquanto os vizinhos ficam onde estavam. O
 * olho lê a fileira na horizontal, e cada cartão respondendo numa altura
 * diferente é o que faz uma grade parecer desalinhada.
 *
 * Reservar é melhor que empurrar tudo para o rodapé com `margin-top: auto`:
 * mantém o preço logo abaixo do nome, como o desenho pede, e ainda assim na
 * mesma linha em todos.
 *
 * O recorte é a rede de segurança do caso extremo — dois dos 117 produtos têm
 * nome de três linhas —, e o `title` do cartão leva o nome inteiro.
 */
.ac-card__brand {
  font: 500 10.5px/1.4 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
  margin-top: 18px;
  min-height: 1.4em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ac-card__name {
  font: 400 21px/1.25 var(--ac-serif);
  margin-top: 9px;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * `line-height: 1` funcionava enquanto o resumo cabia numa linha. Em tela
 * larga ele quebra em duas — "Eau de Parfum · Floral Amadeirado / · Masculino"
 * — e as duas linhas encostavam uma na outra.
 */
/*
 * Altura reservada de DUAS linhas, sempre.
 *
 * O resumo tem uma linha em "Eau de Parfum · Cítrico · Masculino" e duas em
 * "Eau de Parfum · Floral Amadeirado · Masculino". Sem altura reservada, o
 * preço de cada cartão para numa altura diferente e a fileira inteira perde o
 * alinhamento — o cartão de uma linha fica com o preço colado no resumo.
 *
 * Reservar é melhor do que empurrar o preço para o rodapé do cartão: mantém o
 * preço logo abaixo do nome, como no desenho, e ainda assim na mesma linha em
 * todos.
 *
 * O recorte em duas linhas é a rede de segurança para um resumo mais longo do
 * que o previsto; o texto completo continua na ficha do produto.
 */
/*
 * OS DOIS FILETES que cercam o resumo.
 *
 * Eles separam três coisas de naturezas diferentes que estavam empilhadas sem
 * pausa nenhuma: o que o produto É (marca e nome), como ele é (concentração e
 * família) e quanto custa. A leitura de um cartão é uma varredura vertical, e
 * sem a pausa os três blocos se leem como um parágrafo só.
 *
 * `--ac-border-soft` é o mais leve da paleta — 8% de tinta. Uma linha mais
 * escura viraria uma grade dentro da grade, e o cartão já tem a moldura da
 * imagem competindo por atenção.
 *
 * O respiro é assimétrico de propósito: 10px acima do texto e 12px abaixo. O
 * resumo é a linha mais leve do cartão, e um filete colado nele o empurra
 * visualmente para o bloco de cima.
 *
 * ## Por que no `border-top` de cada um, e não num `<hr>`
 *
 * Um separador de verdade seria mais um elemento por cartão, e ele se
 * desalinharia do resumo no dia em que alguém mudasse a margem de um dos dois.
 * A borda pertence ao bloco que ela delimita.
 */
.ac-card__meta {
  font: 400 12.5px/1.25 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-border-soft);
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O que vem no kit, no lugar do resumo do cartão (D-366). */
.ac-card__kit {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--ac-border-soft);
  display: grid;
  gap: 6px;
  /*
   * A lista cresce, e os itens ficam no topo dela: um kit de dois perfumes ao
   * lado de um de três fica com o vão ENTRE a lista e o preço, e o preço dos
   * dois para na mesma linha.
   */
  flex: 1 0 auto;
  align-content: start;
}

.ac-card__kit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 400 12.5px/1.25 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-card__kit-img {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: cover;
  background: var(--ac-white);
  border: 1px solid var(--ac-border-soft);
}

.ac-card__kit-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-card__kit-tam,
.ac-card__kit-mais {
  flex: none;
  color: var(--ac-muted);
}

.ac-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

/* Também com altura própria: um cartão sem "a partir de" não pode encolher a
   linha e desalinhar os botões de volume ao lado.

   O segundo filete fecha o bloco do resumo — ver o comentário em
   `.ac-card__meta`, que é onde a decisão está escrita. */
.ac-card__price {
  /* 1.4, e não 1: "Kit completo por R$ 155,80 R$ 149,90" quebra em duas
     linhas num cartão estreito, e elas encostavam uma na outra. */
  font: 400 15.5px/1.4 var(--ac-sans);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ac-border-soft);
}

.ac-card__price strong {
  font-weight: 500;
}

/* Um valor não quebra no meio: "R$" numa linha e "199,70" na outra. */
.ac-card__price strong,
.ac-card__price-de {
  white-space: nowrap;
}

/* D-286: o "de" em cinza, riscado; o "por" em negrito ao lado. */
.ac-card__price-de {
  color: var(--ac-muted);
  font-size: 13px;
  margin-right: 4px;
}

.ac-card__price-de + strong {
  font-weight: 700;
  color: var(--ac-ink);
}

/*
 * O selo de desconto sobre a foto (D-286), no canto de baixo — o de cima é do
 * selo de destaque, e o coração mora no canto direito.
 */
.ac-card__desconto {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: var(--ac-gold-2);
  color: var(--ac-ink);
  font: 600 11px/1 var(--ac-sans);
  letter-spacing: 0.04em;
}

.ac-card__price-muted {
  color: var(--ac-muted);
}

.ac-card__actions {
  margin-top: auto;
}

/* =========================================================================
 * Cartao minimo: imagem, nome, preco, tamanhos e o botão.
 *
 * Ele e o cartão de Favoritos. Marca e resumo não são IMPRESSOS la (ver o
 * `product-card.php`), e o que sobra aqui e desfazer o que existe para
 * cerca-los: os dois filetes e a altura de faixa.
 *
 * ## Por que os filetes saem
 *
 * Eles separam tres blocos de naturezas diferentes -- o que o produto E, como
 * ele e, e quanto custa. Sem o bloco do meio não ha o que separar: o de cima
 * pairaria sobre nada e o de baixo colaria no nome, que e o vao que a tela de
 * Favoritos mostrava.
 *
 * ## O nome continua com duas linhas reservadas
 *
 * "Donna Born in Roma" cabe em uma e "Scandal Pour Homme Le Parfum" ocupa
 * duas. Sem a reserva, o preco de cada cartão para numa altura diferente e a
 * fileira inteira perde o alinhamento -- e numa grade de SEIS isso aparece
 * seis vezes por linha, em vez de quatro (D-129).
 *
 * ## E tudo encolhe, porque a coluna encolheu
 *
 * De quatro para seis colunas a largura cai um terco. O nome de 21px passaria
 * a quebrar em tres linhas no primeiro produto de nome longo; o botão de
 * adicionar, com 0.18em de espacamento entre letras, estouraria a coluna.
 * ====================================================================== */

.ac-card--min .ac-card__name {
  font-size: 15px;
  margin-top: 12px;
}

.ac-card--min .ac-card__price {
  font-size: 13.5px;
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.ac-card--min .ac-sizes {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.ac-card--min .ac-size {
  flex: 1 0 auto;
  min-width: 40px;
  padding: 6px 4px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.ac-card--min .ac-card__add {
  margin-top: 6px;
  padding: 10px 0;
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Coração. Alvo de 44px com desenho de 32px: o excedente é a área clicável,
   invisível e centrada. */
.ac-wish {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-muted);
  z-index: 2;
}

.ac-wish::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ac-bg);
  border: 1px solid rgba(28, 26, 23, 0.12);
  transition: border-color 0.2s ease;
}

.ac-wish svg {
  position: relative;
}

.ac-wish:hover::before {
  border-color: var(--ac-gold-2);
}

.ac-wish[aria-pressed='true'] {
  color: var(--ac-gold);
}

/* Seletor de volume no card. É um grupo de rádio de verdade — o leitor de
   tela anuncia "2 de 5, selecionado", que é a informação que o desenho passa
   visualmente pelo preenchimento escuro. */
.ac-sizes {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.ac-size {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--ac-border-strong);
  background: transparent;
  color: var(--ac-muted);
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.06em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ac-size[aria-checked='true'] {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-size[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.ac-card__add {
  width: 100%;
  margin-top: 8px;
  padding: 13px 0;
  border: 1px solid var(--ac-ink);
  color: var(--ac-ink);
  font: 500 11.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ac-card__add:hover {
  background: var(--ac-ink);
  color: var(--ac-bg);
}

/*
 * O PEDIDO DE AVISO e mais leve que o de comprar, e de proposito.
 *
 * Ele ocupa o mesmo lugar do "Adicionar" -- mesma altura na fileira, mesma
 * largura --, mas não e a mesma acao: nada e comprado ali. Com o mesmo peso
 * visual, uma grade de esgotados pareceria uma grade de compraveis.
 *
 * E o hover não inverte o fundo: preencher de tinta um botão secundario o
 * faria parecer a acao principal justamente no instante em que o olho decide.
 */
/*
 * COMO PAGAR, quando a cobrança não foi gerada.
 *
 * O bloco vive na tela de resultado, entre o cabecalho do pedido e o resumo.
 * Ele só aparece quando ha o que oferecer -- o PHP decide -- e some assim que
 * a cobrança existe.
 */
/* O motivo da recusa, visível só para quem administra a loja. */
.ac-result__motivo {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--ac-gold-2);
  background: rgba(28, 26, 23, 0.04);
  font: 400 13px/1.55 var(--ac-sans);
  color: var(--ac-ink);
}
.ac-result__motivo-dados {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.5 var(--ac-mono, monospace);
  color: var(--ac-muted);
}

/* O detalhe técnico da recusa: uma linha longa, que quebra onde precisar. */
.ac-result__motivo-detalhe {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.5 var(--ac-mono, monospace);
  color: var(--ac-ink);
  overflow-wrap: anywhere;
}

.ac-result__motivo strong {
  display: block;
  margin-bottom: 2px;
  font: 600 11px/1.4 var(--ac-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/*
 * PAGUE SEU PEDIDO (D-265): um cartão centralizado, com um botão por meio.
 * A MARGEM DE BAIXO é a do D-263 — sem ela o cartão encostava no rótulo do
 * histórico, que vem logo depois e não tem margem no topo.
 */
.ac-result__pague {
  max-width: 480px;
  margin: 16px auto 44px;
  padding: 32px 28px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ac-border);
  border-top: 3px solid var(--ac-gold);
  border-radius: 4px;
  box-shadow: 0 18px 40px -28px rgba(28, 26, 23, 0.35);
}

.ac-result__pague-titulo {
  margin: 10px 0 4px;
  font: 400 30px/1.15 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-result__pague-valor {
  margin: 0 0 10px;
  font: 500 20px/1.2 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-result__pague-texto {
  max-width: 340px;
  margin: 0 auto;
}

.ac-result__pague .ac-result__motivo {
  text-align: left;
}

/*
 * Os meios empilham: são escolhas de mesmo peso, e lado a lado numa coluna
 * estreita o rótulo quebraria em duas linhas.
 */
.ac-result__pague-meios {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.ac-result__meio {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 15px 18px;
  text-align: center;
  cursor: pointer;
  background: var(--ac-ink);
  color: #fff;
  border: 1px solid var(--ac-ink);
  border-radius: 3px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ac-result__meio:hover,
.ac-result__meio:focus-visible {
  background: var(--ac-gold);
  border-color: var(--ac-gold);
}

.ac-result__meio + .ac-result__meio {
  background: #fff;
  color: var(--ac-ink);
  border-color: var(--ac-border);
}

.ac-result__meio + .ac-result__meio:hover,
.ac-result__meio + .ac-result__meio:focus-visible {
  background: #fff;
  border-color: var(--ac-ink);
}

.ac-result__meio-nome {
  font: 500 13px/1.2 var(--ac-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ac-result__meio-sub {
  font: 400 12.5px/1.35 var(--ac-sans);
  opacity: 0.75;
}

.ac-card__add--aviso {
  border-color: var(--ac-border);
  color: var(--ac-muted);
}

.ac-card__add--aviso:hover {
  background: transparent;
  border-color: var(--ac-ink);
  color: var(--ac-ink);
}

/* Trilho horizontal do mobile, com encaixe. */
.ac-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.ac-rail > * {
  flex: none;
  width: 214px;
  scroll-snap-align: start;
}

.ac-noscrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ac-noscrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* =========================================================================
 * 11. Home
 * ====================================================================== */

.ac-hero {
  border-bottom: 1px solid var(--ac-border);
}

.ac-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: stretch;
  min-height: 600px;
}

.ac-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 84px 72px 84px 0;
}

.ac-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.ac-hero__eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ac-gold-2);
  flex: none;
}

.ac-hero__title {
  max-width: 9.5em;
}

.ac-hero__text {
  margin-top: 26px;
  max-width: 420px;
}

.ac-hero__ctas {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.ac-hero__proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
  font: 400 13.5px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-hero__media {
  position: relative;
  background: var(--ac-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ac-hero__watermark {
  position: absolute;
  pointer-events: none;
  width: 118%;
  left: -9%;
  bottom: -16%;
  opacity: 0.09;
}

.ac-hero__product {
  position: relative;
  width: 72%;
  mix-blend-mode: multiply;
}

/*
 * O link da foto (D-321) não entra no layout: `display: contents` deixa o
 * frasco ser o filho que o slide centraliza, como era, e o clique nele ainda
 * sobe até o link.
 */
.ac-hero__foto {
  display: contents;
}

.ac-hero__card {
  position: absolute;
  z-index: 1;
  left: 40px;
  bottom: 64px;
  background: var(--ac-bg);
  border: 1px solid rgba(28, 26, 23, 0.12);
  padding: 18px 22px;
  min-width: 216px;
}

/*
 * As quatro linhas do cartão eram `style=""` no template.
 *
 * Com um produto só isso passava. Com três slides passariam a ser doze
 * declarações repetidas na marcação, e a primeira revisão de tipografia
 * acertaria duas delas — as outras dez ficariam para trás, num cartão que
 * ninguém abre para conferir porque ele só aparece no terceiro giro.
 */
.ac-hero__card-rotulo {
  font-size: 10.5px;
  letter-spacing: 0.22em;
}

.ac-hero__card-nome {
  display: block;
  margin-top: 10px;
  font: 400 20px/1.2 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-hero__card-marca {
  display: block;
  margin-top: 6px;
  font: 400 13px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-hero__card-preco {
  display: block;
  margin-top: 14px;
  font: 400 16px/1 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-hero__card-preco strong {
  font-weight: 500;
}

/*
 * O CARROSSEL do hero: um trilho que DESLIZA.
 *
 * Os slides ficam lado a lado — `flex: 0 0 100%` num trilho que transborda —,
 * e trocar de destaque é mover o trilho em múltiplos da largura da faixa.
 *
 * ## Por que não esmaecer
 *
 * A primeira versão trocava por `opacity`, e o frasco aparecia com um quadrado
 * BRANCO em volta durante a troca. A causa não é a esmaecida: é que
 * `.ac-hero__product` usa `mix-blend-mode: multiply` — é ele que faz o fundo
 * branco da foto sumir contra o creme da faixa —, e `opacity` menor que 1 cria
 * um grupo de composição ISOLADO. Dentro dele o `multiply` não tem com o que
 * misturar, e o branco da foto volta. Ao chegar em 1 o grupo se desfaz e o
 * branco "some" — que é exatamente o que se via.
 *
 * O `transform` do trilho também isola, e por isso o FUNDO e a marca d'água
 * moram dentro de cada slide: com eles ali, a mistura tem contra o que
 * acontecer, e o branco não volta em momento nenhum.
 *
 * ## Quem esconde o slide parado
 *
 * `visibility`, com atraso igual ao da deslizada. O cartão de cada slide é um
 * LINK: os que estão fora da tela continuariam na ordem do teclado, e o
 * navegador ROLA a caixa de `overflow` para revelar o que recebeu foco — o que
 * desalinharia o trilho de vez, e sem nada na tela explicando por quê.
 */
.ac-hero__carrossel {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.ac-hero__trilho {
  display: flex;
  height: 100%;
  transition: transform 0.55s var(--ac-ease);
}

.ac-hero__slide {
  flex: 0 0 100%;
  position: relative;
  padding-bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ac-surface);
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

.ac-hero__slide.is-atual {
  visibility: visible;
  transition: visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ac-hero__trilho,
  .ac-hero__slide,
  .ac-hero__slide.is-atual {
    transition: none;
  }
}

/*
 * Setas e pontos num canto só.
 *
 * O grupo nasce com `hidden` e o script o revela: sem JavaScript nenhum dos
 * três trocaria de slide, e um controle inerte é pior que um controle a menos.
 * Quem o esconde é a guarda de `[hidden]` no topo da folha, que vale com
 * `!important` — por isso o `display: flex` daqui não precisa de guarda própria.
 */
.ac-hero__controles {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
}

.ac-hero__seta {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ac-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.24s var(--ac-ease);
}

.ac-hero__seta:hover {
  color: var(--ac-ink);
}

.ac-hero__pontos {
  display: flex;
  gap: 0;
}

/*
 * O BOTÃO tem 22px; o ponto que se vê tem 9px e é desenhado por dentro.
 *
 * Um alvo de 9px é menor que a ponta de um dedo, e no celular os pontos ficam
 * no pé da faixa, que é onde o polegar chega torto. O espaço em volta não é
 * margem: ele é parte do botão, e é ele que faz o toque pegar.
 *
 * Por isso o `gap` é zero — a distância entre os pontos já vem das caixas.
 */
.ac-hero__ponto {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ac-hero__ponto::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 1px solid var(--ac-muted);
  border-radius: 50%;
  transition: background 0.24s var(--ac-ease), border-color 0.24s var(--ac-ease);
}

.ac-hero__ponto:hover::before {
  border-color: var(--ac-ink);
}

.ac-hero__ponto.is-atual::before {
  background: var(--ac-gold-2);
  border-color: var(--ac-gold-2);
}

.ac-trust {
  border-bottom: 1px solid var(--ac-border);
}

/*
 * Colunas: quantas houver.
 *
 * A faixa foi desenhada com quatro itens e a grade dizia `repeat(4, 1fr)`.
 * Só que o conteúdo é do gestor: ele escreve três, ou o quarto cai sozinho
 * porque depende de uma regra do motor que ainda não existe — e sobra uma
 * coluna vazia empurrando tudo para a esquerda.
 *
 * `--ac-cols` é escrito pelo template, que é quem sabe quantos itens foram
 * de fato renderizados. O número do desenho fica como reserva.
 */
.ac-trust__grid {
  display: grid;
  grid-template-columns: repeat(var(--ac-cols, 4), 1fr);
}

.ac-trust__item {
  padding: 32px 26px 32px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ac-trust__mark {
  font: 400 15px/1 var(--ac-serif);
  color: var(--ac-gold-2);
  padding-top: 2px;
}

.ac-trust__title {
  display: block;
  font: 500 12px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ac-trust__sub {
  display: block;
  font: 400 13.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 8px;
}

.ac-shortcuts {
  display: grid;
  grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
  gap: 20px;
}

.ac-shortcut {
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  min-height: 236px;
  color: var(--ac-ink);
  transition: background-color 0.2s ease;
}

.ac-shortcut__title {
  font: 400 32px/1.15 var(--ac-serif);
  margin-top: auto;
}

.ac-shortcut__text {
  font: 400 14.5px/1.55 var(--ac-sans);
  margin-top: 12px;
  max-width: 270px;
}

.ac-shortcut--gold {
  background: var(--ac-gold-2);
}

.ac-shortcut--gold:hover {
  background: var(--ac-gold-soft);
  color: var(--ac-ink);
}

.ac-shortcut--gold .ac-shortcut__text {
  color: rgba(28, 26, 23, 0.72);
}

.ac-shortcut--dark {
  background: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-shortcut--dark:hover {
  background: var(--ac-ink-soft);
  color: var(--ac-bg);
}

.ac-shortcut--dark .ac-shortcut__text,
.ac-shortcut--soft .ac-shortcut__text {
  color: var(--ac-muted);
}

.ac-shortcut--soft {
  background: var(--ac-surface);
}

.ac-shortcut--soft:hover {
  background: var(--ac-surface-2);
  color: var(--ac-ink);
}

.ac-club {
  margin-top: 96px;
  background: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-club__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 78px 0;
}

.ac-club__title {
  color: var(--ac-bg);
  max-width: 12em;
}

.ac-club__text {
  margin: 22px 0 34px;
  font: 400 16.5px/1.7 var(--ac-sans);
  color: var(--ac-muted);
  max-width: 440px;
}

.ac-club__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 30px;
}

.ac-club__amount {
  font: 300 44px/1 var(--ac-serif);
  color: var(--ac-gold-2);
}

.ac-club__steps {
  border-left: 1px solid rgba(201, 169, 97, 0.28);
  padding-left: 56px;
}

.ac-club__step {
  padding: 26px 0;
  border-bottom: 1px solid var(--ac-on-dark);
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.ac-club__n {
  font: 400 30px/1 var(--ac-serif);
  color: var(--ac-gold-2);
  min-width: 38px;
}

.ac-occasions {
  display: grid;
  grid-template-columns: repeat(var(--ac-cols, 4), 1fr);
  gap: 20px;
}

.ac-occasion {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(28, 26, 23, 0.09);
  color: var(--ac-ink);
  transition: border-color 0.2s ease;
}

.ac-occasion:hover {
  border-color: var(--ac-gold-2);
  color: var(--ac-ink);
}

.ac-occasion__title {
  font: 400 26px/1.15 var(--ac-serif);
}

.ac-occasion__sub {
  font: 400 13.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 10px;
}

/* --- Ocasião com foto de fundo -------------------------------------------
 *
 * A foto e a cortina são PSEUDOELEMENTOS, e não `background` na âncora. São
 * três razões, e cada uma sozinha já bastaria:
 *
 *   1. a cortina precisa ficar ENTRE a foto e o texto. Somada à imagem no
 *      mesmo `background`, ela seria uma camada acima de tudo — inclusive do
 *      título;
 *   2. o avanço no hover é da FOTO. Escalando a âncora, o texto e a borda iam
 *      junto, e é o texto que precisa ficar parado para ser lido;
 *   3. a cor alternada do desenho continua embaixo, e é ela que se vê
 *      enquanto a imagem carrega e para onde o card volta se o anexo sumir.
 * ------------------------------------------------------------------------ */

.ac-occasion--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ac-occasion-foto);
  background-size: cover;
  /* O recorte é pelo CENTRO: o card é mais alto que largo, e uma foto de
     ocasião tem o assunto no meio, não no topo. */
  background-position: center;
  transition: transform 0.6s var(--ac-ease);
}

/*
 * A CORTINA existe para o texto ser legível sobre QUALQUER foto.
 *
 * Ela é um gradiente, e não um véu chapado: o texto mora no pé do card, então
 * é lá que a escuridão precisa estar. Chapada, ela apagaria a foto inteira
 * para resolver um problema que só existe no terço de baixo.
 */
.ac-occasion--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 26, 23, 0.82) 0%,
    rgba(28, 26, 23, 0.45) 42%,
    rgba(28, 26, 23, 0.06) 100%
  );
}

/* Sem isto o texto fica ATRÁS da cortina, que é o que a cortina existe para
   evitar. */
.ac-occasion--foto .ac-occasion__title,
.ac-occasion--foto .ac-occasion__sub {
  position: relative;
  z-index: 1;
}

.ac-occasion--foto .ac-occasion__title {
  color: var(--ac-white);
}

/* O cinza de texto secundário some sobre foto escura; sobre a cortina, o
   creme da marca é o que continua sendo subordinado sem desaparecer. */
.ac-occasion--foto .ac-occasion__sub {
  color: rgba(249, 246, 241, 0.82);
}

.ac-occasion--foto:hover::before {
  transform: scale(1.06);
}

.ac-steps {
  display: grid;
  grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
  gap: 34px;
}

.ac-step__n {
  font: 300 40px/1 var(--ac-serif);
  color: var(--ac-gold-2);
}

.ac-step__rule {
  height: 1px;
  background: rgba(28, 26, 23, 0.14);
  margin: 20px 0 18px;
}

.ac-step__title {
  font: 400 19px/1.3 var(--ac-serif);
}

.ac-step__sub {
  font: 400 14px/1.65 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 10px;
}

.ac-newsletter {
  background: var(--ac-surface);
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.ac-newsletter__field {
  display: flex;
  border-bottom: 1px solid var(--ac-ink);
  padding-bottom: 10px;
}

.ac-newsletter__field input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font: 400 16px/1 var(--ac-sans);
  color: var(--ac-ink);
  min-height: 44px;
}

.ac-newsletter__field button {
  font: 500 12px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-gold);
  min-height: 44px;
  padding: 0 4px;
}

/* =========================================================================
 * 11b. Página institucional
 *
 * Texto longo escrito no editor do WordPress. As regras abaixo alcançam o que
 * o editor produz — parágrafo, título, lista, citação, tabela — sem exigir que
 * quem escreve conheça uma única classe.
 *
 * É o único lugar do arquivo com seletores de elemento, e eles vivem dentro de
 * `.ac-prose` justamente para não vazarem para o resto da loja.
 * ====================================================================== */

.ac-page {
  padding-bottom: 88px;
}

.ac-prose {
  padding-top: 40px;
  /* Medida de leitura: entre 60 e 75 caracteres é onde o olho não se perde
     ao voltar para a linha seguinte. */
  max-width: 68ch;
  font: 400 16.5px/1.75 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-prose > * + * {
  margin-top: 1.4em;
}

.ac-prose h2 {
  font: 300 clamp(26px, 3vw, 34px) / 1.15 var(--ac-serif);
  margin-top: 2.2em;
}

.ac-prose h3 {
  font: 400 clamp(20px, 2.2vw, 24px) / 1.25 var(--ac-serif);
  margin-top: 1.8em;
}

.ac-prose h2 + *,
.ac-prose h3 + * {
  margin-top: 0.8em;
}

.ac-prose a {
  color: var(--ac-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ac-prose a:hover {
  color: var(--ac-ink);
}

.ac-prose ul,
.ac-prose ol {
  padding-left: 1.3em;
}

.ac-prose li + li {
  margin-top: 0.5em;
}

.ac-prose blockquote {
  margin-left: 0;
  padding-left: 24px;
  border-left: 1px solid var(--ac-gold-2);
  font: 400 18px/1.7 var(--ac-serif);
  color: var(--ac-muted);
}

.ac-prose img {
  height: auto;
}

.ac-prose hr {
  border: 0;
  height: 1px;
  background: var(--ac-border);
  margin: 2.4em 0;
}

/* Tabela do editor: rola dentro de si em vez de esticar a página. */
.ac-prose figure.wp-block-table,
.ac-prose .wp-block-table {
  overflow-x: auto;
}

.ac-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.ac-prose th,
.ac-prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ac-border);
}

.ac-prose th {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/* =========================================================================
 * 12. Catálogo
 * ====================================================================== */

/*
 * A MIGALHA COMEÇA NA MESMA VERTICAL DO LOGOTIPO E DO "FILTRAR".
 *
 * Ela é um `<ol>`, e a folha do navegador dá 40px de `padding-inline-start` a
 * toda lista ordenada. `padding-top` é longhand e não toca nisso — o recuo
 * sobrevivia, e a trilha aparecia deslocada para dentro em relação a tudo o que
 * está acima e abaixo dela. `list-style: none` tira o marcador; não tira o
 * espaço que existia para ele.
 */
.ac-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0 0;
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  list-style: none;
  margin: 0;
}

.ac-breadcrumb a {
  color: var(--ac-muted);
}

.ac-breadcrumb a:hover {
  color: var(--ac-gold);
}

.ac-breadcrumb li:last-child {
  color: var(--ac-ink);
}

.ac-breadcrumb__sep {
  color: var(--ac-muted);
}

/*
 * O título ocupa o que precisar; o ORDENAR fica no canto, alinhado pela BASE.
 *
 * Era uma grade de duas colunas fixas, e a segunda existia para a introdução —
 * que só aparece em coleção e taxonomia com descrição. Nas outras páginas ela
 * ficava vazia, e o resultado era um vão do tamanho de meia tela ao lado de um
 * título de uma linha.
 *
 * `flex-end` alinha o controle com a CONTAGEM, e não com o topo do título: os
 * dois são a mesma informação de serviço, e um controle pendurado na altura de
 * um título de 52px flutua sem referência.
 */
.ac-listing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 34px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--ac-border);
}

.ac-listing__head-text {
  min-width: 0;
}

/* `flex: none` porque o seletor tem largura de conteúdo: deixá-lo encolher
   cortaria "Melhor avaliados" no meio quando o título fosse longo. */
.ac-listing__sort {
  flex: none;
  padding-bottom: 4px;
}

.ac-listing__body {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 56px;
  align-items: start;
}

/*
 * A LATERAL NÃO ACOMPANHA A ROLAGEM.
 *
 * Ela era `sticky`. Com quatro facetas a coluna passa de uma tela: presa no
 * topo, a lista de marcas fica cortada e o que está embaixo dela vira
 * inalcançável — a coluna não rola sozinha, e a página já rolou. Uma coluna que
 * desce com o resto é sempre inteira.
 */
.ac-filters {
  padding: 38px 0 60px;
}

.ac-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

/*
 * O RODAPÉ DA GAVETA NÃO EXISTE NA TELA LARGA.
 *
 * Ele só tinha regra dentro do `@media` da tela estreita — e uma regra que só
 * existe lá dentro não esconde o elemento aqui fora: ele vinha como dois
 * blocos empilhados no pé da coluna, com um "Ver 0 produtos" que não fecha
 * gaveta nenhuma porque não há gaveta aberta.
 */
.ac-filters__apply {
  display: none;
}

.ac-facet {
  border-top: 1px solid rgba(28, 26, 23, 0.12);
  padding: 22px 0;
}

.ac-facet__title {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
  margin-bottom: 14px;
}

.ac-facet__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  min-height: 34px;
  color: var(--ac-ink);
}

.ac-facet__option:hover {
  color: var(--ac-gold);
}

.ac-facet__box {
  width: 13px;
  height: 13px;
  flex: none;
  border: 1px solid rgba(28, 26, 23, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-bg);
  font: 500 10px/1 var(--ac-sans);
}

.ac-facet__option[aria-pressed='true'] .ac-facet__box,
.ac-facet__option.is-on .ac-facet__box {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
}

.ac-facet__label {
  font: 400 14px/1.3 var(--ac-sans);
  flex: 1;
}

.ac-facet__count {
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-facet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ac-facet__chip {
  padding: 9px 12px;
  border: 1px solid var(--ac-border-strong);
  background: transparent;
  color: var(--ac-muted);
  font: 400 12px/1 var(--ac-sans);
  min-height: 34px;
}

.ac-facet__chip.is-on {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-listing__results {
  padding: 38px 0 60px;
}

/*
 * Ela é sempre desenhada — a troca sem recarregar substitui elementos e não
 * sabe inserir um que não estava lá —, mas só ocupa espaço quando tem chip.
 * Uma faixa com borda e 20px de respiro sem nada dentro é uma linha a mais
 * entre o título e a grade, sem dizer nada.
 */
.ac-listing__toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ac-border);
  flex-wrap: wrap;
}

.ac-listing__toolbar.is-empty {
  display: none;
}

.ac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: var(--ac-ink);
  color: var(--ac-bg);
  font: 400 12px/1 var(--ac-sans);
  min-height: 34px;
}

.ac-chip:hover {
  color: var(--ac-bg);
  background: var(--ac-ink-soft);
}

.ac-chip__x {
  color: var(--ac-gold-2);
}

.ac-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ac-sort select {
  border: 0;
  border-bottom: 1px solid var(--ac-border-field);
  background: none;
  padding: 6px 2px;
  font: 400 13.5px/1 var(--ac-sans);
  color: var(--ac-ink);
  min-height: 44px;
  border-radius: 0;
}

.ac-listing__grid {
  margin-top: 34px;
}

.ac-pagination {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.ac-pagination__meter {
  width: 220px;
  height: 2px;
  background: rgba(28, 26, 23, 0.12);
}

.ac-pagination__meter span {
  display: block;
  height: 2px;
  background: var(--ac-gold-2);
}

.ac-pagination__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.ac-pagination__link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ac-border-strong);
  color: var(--ac-ink);
  font: 400 13px/1 var(--ac-sans);
}

.ac-pagination__link[aria-current='page'] {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-bg);
}

/* Botão de filtros do mobile: some no desktop, onde a barra lateral já está
   visível. */
.ac-filters-toggle {
  display: none;
}

/* =========================================================================
 * 13. Página de produto
 * ====================================================================== */

.ac-pdp__top {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 72px;
  align-items: stretch;
  padding-top: 34px;
}

.ac-gallery {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/*
 * A GALERIA NÃO ESTICA com a coluna de compra (D-372).
 *
 * A foto é um quadrado (`aspect-ratio`). Esticada até a altura da coluna de
 * compra, a altura virava largura: a galeria alargava, a coluna de compra
 * ficava com 228px numa janela de 1100, o botão quebrava em duas linhas, e o
 * quadro passava 48px do bloco, por cima do título seguinte. Com a galeria
 * no topo, a altura da foto sai só da largura dela.
 *
 * Só na tela larga: abaixo de 900px a galeria é uma coluna, e ali
 * `flex-start` encolheria a foto na largura.
 */
@media (min-width: 901px) {
  .ac-gallery {
    align-self: start;
    min-width: 0;
  }

  .ac-gallery__main {
    align-self: flex-start;
  }

  .ac-pdp__buy {
    min-width: 0;
  }
}

.ac-gallery__thumbs {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.ac-gallery__thumb {
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid rgba(28, 26, 23, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  transition: border-color 0.2s ease;
}

.ac-gallery__thumb[aria-current='true'],
.ac-gallery__thumb:hover {
  border-color: var(--ac-gold-2);
}

.ac-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ac-gallery__main {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid rgba(28, 26, 23, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ac-gallery__img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* A capa de um kit é uma arte pronta: ocupa o quadro inteiro, sem a moldura
   branca que a foto de um frasco precisa (D-366). Só a capa — as fotos dos
   perfumes, nas miniaturas seguintes, voltam à moldura. */
.ac-gallery--capa-cheia .ac-gallery__img.is-capa {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

.ac-pdp__buy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.ac-pdp__brand {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

/* A marca e o compartilhar na mesma linha: marca à esquerda, botão à
   direita, alinhados pelo centro. A linha tem altura fixa de 32px para o
   título não mudar de lugar quando o botão aparece — ele nasce escondido e
   o script o revela depois. */
.ac-pdp__marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}

.ac-share {
  position: relative;
  flex: 0 0 auto;
}

.ac-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: 400 13.5px/1 var(--ac-sans);
  color: var(--ac-ink);
  cursor: pointer;
}

.ac-share__btn svg {
  flex: 0 0 auto;
}

.ac-share__btn:hover span,
.ac-share__btn[aria-expanded="true"] span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ac-share__btn:focus-visible {
  outline: 1px solid var(--ac-gold);
  outline-offset: 4px;
}

.ac-share__menu:not([hidden]) {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  background: var(--ac-white);
  border: 1px solid var(--ac-border);
  box-shadow: 0 18px 40px -18px rgba(28, 26, 23, 0.35);
}

.ac-share__menu a,
.ac-share__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: none;
  font: 400 14px/1.2 var(--ac-sans);
  color: var(--ac-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ac-share__menu a:hover,
.ac-share__menu button:hover,
.ac-share__menu a:focus-visible,
.ac-share__menu button:focus-visible {
  background: var(--ac-surface);
  outline: none;
}

.ac-pdp__title {
  margin-top: 14px;
  font: 300 clamp(34px, 3.6vw, 46px) / 1.06 var(--ac-serif);
}

.ac-pdp__attrs {
  font: 400 14.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 14px;
}

.ac-pdp__resumo {
  margin-top: 18px;
  max-width: 60ch;
  font: 400 14.5px/1.65 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-pdp__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font: 400 13.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  flex-wrap: wrap;
}

/* Cartões de volume da PDP. Grupo de rádio, como no card, mas com preço e
   preço por ml — que é a comparação que o §15.4 pede. */
.ac-variants {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.ac-variant {
  position: relative;
  text-align: left;
  padding: 16px 12px 14px;
  border: 1px solid var(--ac-border-strong);
  background: transparent;
  color: var(--ac-ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ac-variant[aria-checked='true'] {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-bg);
}

.ac-variant[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.ac-variant__ml {
  display: block;
  font: 400 21px/1 var(--ac-serif);
}

.ac-variant__price {
  display: block;
  font: 500 13px/1 var(--ac-sans);
  margin-top: 10px;
}

.ac-variant__unit {
  display: block;
  font: 400 10.5px/1 var(--ac-sans);
  opacity: 0.62;
  margin-top: 6px;
}

.ac-variant__tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--ac-gold-2);
  color: var(--ac-ink);
  font: 500 8.5px/1 var(--ac-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 5px;
}

.ac-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.ac-price__value {
  font: 300 40px/1 var(--ac-serif);
}

/* D-286: o preço de tabela riscado antes do preço com desconto. */
.ac-price__de {
  font: 300 22px/1 var(--ac-serif);
  color: var(--ac-muted);
}

.ac-price__note {
  font: 400 14px/1.4 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-buy {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.ac-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--ac-border-field);
}

.ac-qty button {
  width: 44px;
  height: 56px;
  font: 400 19px/1 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-qty input {
  width: 44px;
  height: 56px;
  border: 0;
  background: none;
  text-align: center;
  font: 400 15px/1 var(--ac-sans);
  -moz-appearance: textfield;
}

.ac-qty input::-webkit-outer-spin-button,
.ac-qty input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.ac-buy__add {
  flex: 1;
  min-width: 200px;
  height: 56px;
}

.ac-buy__wish {
  width: 56px;
  height: 56px;
  border: 1px solid var(--ac-border-field);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-ink);
}

.ac-buy__wish[aria-pressed='true'] {
  color: var(--ac-gold);
}

.ac-columns-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-top: 44px;
}

/*
 * O bloco "Sobre este produto" abre o corpo da ficha, com o mesmo respiro das
 * três colunas que vêm depois — os dois são faixas irmãs da mesma página.
 *
 * `.ac-prose` traz `padding-top: 40px` de fábrica, porque em toda outra tela
 * ela abre a página sozinha. Aqui ela vem logo abaixo de um título, e 40px
 * entre os dois separaria o texto do assunto dele.
 */
.ac-pdp__sobre {
  padding-top: 44px;
}

.ac-pdp__sobre .ac-prose {
  padding-top: 16px;
}

.ac-block__title {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac-ink);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(28, 26, 23, 0.14);
}

.ac-pyramid__row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--ac-border-soft);
}

.ac-pyramid__stage {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-pyramid__notes {
  font: 400 16px/1.5 var(--ac-serif);
}

.ac-bars__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--ac-border-soft);
}

.ac-bars__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font: 400 13px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-bars__value {
  color: var(--ac-ink);
  font-size: 12.5px;
}

.ac-bars__cells {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.ac-bars__cell {
  flex: 1;
  height: 5px;
  background: rgba(28, 26, 23, 0.12);
}

.ac-bars__cell.is-on {
  background: var(--ac-gold-2);
}

.ac-perk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  /* Sem filete entre os itens (D-372): são três frases curtas, e uma linha
     depois de cada uma fazia a lista parecer uma tabela. */
  padding: 7px 0;
  font: 400 13.5px/1.55 var(--ac-sans);
}

/* "O que você recebe" ocupa a largura da página (D-368): numa coluna de um
   terço, cada frase quebrava em duas linhas com a página vazia ao lado. */
.ac-perks {
  grid-column: 1 / -1;
}

.ac-perks .ac-block__title {
  margin-bottom: 10px;
}

/* A comparação de tamanhos vem logo depois da ficha: o respiro de uma seção
   inteira, somado ao do filete, abria um vão entre as duas. */
.ac-section--curta {
  padding-top: 40px;
}

.ac-perk::before {
  content: '◆';
  font: 400 12px/1.4 var(--ac-serif);
  color: var(--ac-gold-2);
  min-width: 14px;
}

.ac-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: start;
}

/* Tabela de comparação de tamanhos. No mobile ela vira cartão (ver §16). */
.ac-compare {
  width: 100%;
  border-collapse: collapse;
}

.ac-compare th {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-muted);
  text-align: left;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ac-border-strong);
}

.ac-compare td {
  padding: 17px 0;
  border-bottom: 1px solid var(--ac-border-soft);
  font: 400 14px/1.4 var(--ac-sans);
  color: var(--ac-muted);
  vertical-align: middle;
}

.ac-compare tr.is-current td {
  background: var(--ac-surface);
}

.ac-compare__ml {
  font: 400 17px/1 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-compare__price {
  font: 500 14px/1 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-reviews__score {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
}

.ac-reviews__avg {
  font: 300 56px/1 var(--ac-serif);
}

.ac-reviews__bar {
  display: grid;
  grid-template-columns: 34px 1fr 44px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-reviews__track {
  height: 4px;
  background: rgba(28, 26, 23, 0.1);
  display: block;
}

.ac-reviews__fill {
  display: block;
  height: 4px;
  background: var(--ac-gold-2);
}

.ac-review {
  padding: 26px 0;
  border-bottom: 1px solid var(--ac-border);
}

.ac-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ac-review__author {
  font: 500 12.5px/1 var(--ac-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ac-review__text {
  margin-top: 12px;
  font: 400 15px/1.7 var(--ac-sans);
  max-width: 620px;
}

/* Accordion de FAQ. `<button>` com `aria-expanded`, região associada. */
.ac-faq__item {
  border-bottom: 1px solid var(--ac-border);
}

.ac-faq__q {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--ac-ink);
  font: 400 19px/1.35 var(--ac-serif);
  min-height: 44px;
}

.ac-faq__sign {
  font: 400 21px/1 var(--ac-sans);
  color: var(--ac-gold-2);
  flex: none;
}

.ac-faq__q[aria-expanded='true'] .ac-faq__sign::before {
  content: '−';
}

.ac-faq__q[aria-expanded='false'] .ac-faq__sign::before {
  content: '+';
}

.ac-faq__a {
  padding: 0 0 24px;
  font: 400 15px/1.75 var(--ac-sans);
  color: var(--ac-muted);
  max-width: 620px;
}

.ac-faq__a[hidden] {
  display: none;
}

/* Barra de compra fixa do mobile. */
.ac-sticky-buy {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 55;
  background: var(--ac-bg);
  border-top: 1px solid rgba(28, 26, 23, 0.12);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

/* =========================================================================
 * 14. Sacola, checkout e resultado
 * ====================================================================== */

.ac-cart__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  padding-top: 44px;
}

.ac-line {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ac-border);
  align-items: start;
}

.ac-line__media {
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid rgba(28, 26, 23, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ac-line__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ac-line__name {
  font: 400 23px/1.2 var(--ac-serif);
  margin-top: 8px;
}

.ac-line__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/*
 * O SELETOR DE TAMANHO na linha da sacola.
 *
 * Ele ocupa o lugar do rótulo de leitura, e por isso é discreto: uma caixa de
 * seleção com borda forte competiria com o nome do produto, que é o que se lê
 * primeiro. A borda aparece no foco e no hover, onde ela informa.
 */
.ac-line__variant {
  margin-top: 7px;
}

.ac-line__variant select {
  font: 400 12.5px/1.4 var(--ac-sans);
  color: var(--ac-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 3px 24px 3px 6px;
  margin-left: -6px;
  max-width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ac-line__variant select:hover,
.ac-line__variant select:focus-visible {
  border-color: var(--ac-border-strong);
  color: var(--ac-ink);
}

/* Enquanto a troca vai e volta, a linha esmaece — sem sumir, para a página
   não saltar debaixo do cursor. */
[data-ac-line][aria-busy='true'] {
  opacity: 0.55;
}

.ac-line__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--ac-border-strong);
}

.ac-line__qty button {
  width: 40px;
  height: 40px;
  font: 400 16px/1 var(--ac-sans);
}

.ac-line__qty input {
  width: 36px;
  height: 40px;
  border: 0;
  background: none;
  text-align: center;
  font: 400 13.5px/1 var(--ac-sans);
  -moz-appearance: textfield;
}

.ac-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ac-muted);
}

.ac-line__remove:hover,
.ac-line__remove:focus-visible {
  color: var(--ac-danger);
}

.ac-line__total {
  text-align: right;
  font: 500 18px/1 var(--ac-sans);
}

.ac-line__unit {
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 8px;
}

.ac-summary {
  position: sticky;
  top: 96px;
  border: 1px solid rgba(28, 26, 23, 0.14);
  padding: 32px;
}

.ac-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font: 400 14.5px/1 var(--ac-sans);
}

.ac-summary__label {
  color: var(--ac-muted);
}

/*
 * O nome da entrega escolhida, embaixo do rótulo "Frete".
 *
 * Ele é um SEGUNDO nível de leitura: quem varre o resumo lê o valor, e quem
 * quer conferir a escolha lê o nome. Com o mesmo tamanho do rótulo, os dois
 * competiriam — e a linha do frete ficaria mais pesada que a do total.
 *
 * `line-height: 1` na linha do resumo não deixa espaço para dois textos: o
 * `align-items` sobe para o topo e a linha ganha a altura de que precisa.
 */
.ac-summary__row:has(.ac-summary__sub) {
  align-items: flex-start;
}

.ac-summary__sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ac-ink);
}

.ac-summary__discount {
  color: var(--ac-gold);
}

.ac-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.ac-summary__total-value {
  font: 300 32px/1 var(--ac-serif);
}

.ac-freeship {
  border: 1px solid rgba(201, 169, 97, 0.5);
  background: var(--ac-surface);
  padding: 20px 24px;
  margin-top: 34px;
}

.ac-freeship__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 400 14px/1.5 var(--ac-sans);
  flex-wrap: wrap;
}

.ac-freeship__meter {
  height: 3px;
  background: rgba(28, 26, 23, 0.12);
  margin-top: 16px;
}

.ac-freeship__fill {
  display: block;
  height: 3px;
  background: var(--ac-gold-2);
  transition: width 0.4s var(--ac-ease);
}

.ac-upsell {
  margin-top: 44px;
  background: var(--ac-surface);
  padding: 34px;
}

.ac-upsell__grid {
  display: grid;
  grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
  gap: 14px;
}

.ac-upsell__item {
  background: var(--ac-bg);
  border: 1px solid rgba(28, 26, 23, 0.09);
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.ac-upsell__media {
  width: 58px;
  height: 58px;
  flex: none;
  background: var(--ac-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* --- Checkout ----------------------------------------------------------- */

.ac-checkout__header {
  border-bottom: 1px solid var(--ac-border);
  background: var(--ac-bg);
}

.ac-checkout__header-inner {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ac-checkout__header-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.ac-checkout__back {
  font: 400 13px/1 var(--ac-sans);
  color: var(--ac-muted);
  white-space: nowrap;
}

.ac-checkout__back:hover {
  color: var(--ac-ink);
}

@media (max-width: 559px) {
  .ac-checkout__back-text {
    display: none;
  }
}

.ac-checkout__secure {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 386px;
  gap: 60px;
  align-items: start;
  padding-top: 52px;
}

.ac-step {
  border-top: 1px solid rgba(28, 26, 23, 0.14);
  padding: 30px 0;
}

.ac-step__head {
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 24px;
}

.ac-step__index {
  font: 400 26px/1 var(--ac-serif);
  color: var(--ac-gold-2);
}

.ac-step__label {
  font: 500 11.5px/1 var(--ac-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-top: 6px;
}

.ac-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Formulário de "Meus dados". Ocupa a coluna inteira: o limite é a grade da
   conta, não um teto escrito no template. */
.ac-profile-form {
  max-width: 100%;
}

.ac-profile-form__consent {
  border: 0;
  padding: 0;
  margin: 34px 0 0;
}

.ac-profile-form__consent .ac-label {
  display: block;
  padding: 0;
  margin-bottom: 14px;
}

.ac-fields--address {
  grid-template-columns: 1fr 2fr 1fr;
}

.ac-fields__full {
  grid-column: 1 / -1;
}

/* Opção de frete e de pagamento: mesma composição, papel de rádio. */
.ac-option {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 8px;
  background: transparent;
  border: 1px solid var(--ac-border-strong);
  min-height: 60px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ac-option[aria-checked='true'] {
  background: var(--ac-surface);
  border-color: var(--ac-gold-2);
}

.ac-option__dot {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ac-border-strong);
}

.ac-option[aria-checked='true'] .ac-option__dot {
  border-color: var(--ac-gold-2);
  background: var(--ac-gold-2);
}

.ac-option__label {
  flex: 1;
  font: 400 14.5px/1.3 var(--ac-sans);
  color: var(--ac-ink);
}

.ac-option__note {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-gold);
}

.ac-option__eta {
  font: 400 13px/1 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-option__price {
  font: 500 14px/1 var(--ac-sans);
  color: var(--ac-ink);
  min-width: 78px;
  text-align: right;
}

/*
 * A COLUNA NÃO ACOMPANHA MAIS A ROLAGEM.
 *
 * Ela era `sticky`. Com os campos do cartão dentro dela — e o botão de
 * concluir abaixo deles — a coluna passa da altura da janela, e uma caixa
 * presa que não cabe corta o próprio fim: o que some é justamente o botão
 * e o copia-e-cola do Pix. É o mesmo que o D-121 encontrou na lateral do
 * catálogo, e o motivo por que o D-186 já a soltava depois do pedido.
 */
.ac-order-summary {
  border: 1px solid rgba(28, 26, 23, 0.14);
  padding: 30px;
}

/*
 * A CAIXA DE PAGAMENTO.
 *
 * Uma vaga só para os dois meios: os campos do cartão e o QR do Pix. Ela
 * fica no pé do resumo, separada por um filete — sem ele, os campos do
 * cartão se leriam como mais uma linha do total.
 */
/* --- O passo travado ----------------------------------------------------
 *
 * Ele fica À VISTA e inerte: escondê-lo faria a numeração saltar de 02 para
 * 04 e a pessoa procurar o passo que sumiu. `pointer-events` sozinho não
 * basta — o teclado atravessa —, e por isso o script também desabilita os
 * controles; isto aqui é o sinal visual da mesma decisão.
 * -------------------------------------------------------------------- */
.ac-step--travado [data-ac-payment],
.ac-step--travado [data-ac-payment-by] {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.ac-step__trava {
  font: 400 13px/1.6 var(--ac-sans);
  color: var(--ac-muted);
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 2px solid var(--ac-gold-2);
  background: rgba(28, 26, 23, 0.03);
}

/*
 * O PAINEL DENTRO DA JANELA nao leva moldura propria: ela ja e a moldura.
 * Duas bordas concentricas com 22px entre elas se leem como caixa dentro de
 * caixa (D-207).
 */
.ac-modal--pay .ac-payment-panel {
  border: none;
  background: none;
  padding: 0;
  margin-top: 0;
}

/*
 * A CONFIRMACAO no lugar do codigo, dentro da janela (D-208).
 *
 * O verde e o TOKEN da paleta, e nao um verde generico: um estado que nao
 * parece da loja se le como erro do site. `--ac-ok` nao existe -- um `var()`
 * que aponta para token inexistente cai no valor herdado, sem avisar (D-145).
 */
.ac-pay-done {
  margin: 0;
  padding: 30px 8px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ac-success);
}

/* O botao que abre a janela, na tela do que ja aconteceu. */
/* ---------- Alterar a senha em Meus dados (D-264) ---------- */

.ac-senha-form {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--ac-border-soft);
}

.ac-senha-form__titulo {
  margin: 0 0 16px;
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ac-senha-form__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.ac-senha-form__login {
  max-width: 420px;
  margin-bottom: 14px;
}

.ac-senha-form__login .ac-field__input[readonly] {
  background: var(--ac-surface);
  color: var(--ac-muted);
}

.ac-senha-form__gerar {
  align-self: flex-start;
  margin-top: 6px;
  padding: 2px 0;
  font: 400 13px/1.4 var(--ac-sans);
  color: var(--ac-gold);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.ac-senha-form__esqueci {
  font: 400 13px/1.4 var(--ac-sans);
  color: var(--ac-gold);
}

/* ---------- "Pagar agora" na conta (D-263) ---------- */

.ac-modal--pagar {
  width: min(560px, calc(100vw - 32px));
}

.ac-paynow__numero {
  margin: 0 0 12px;
}

.ac-paynow__itens {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
  border-bottom: 1px solid var(--ac-border-soft);
}

.ac-paynow__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font: 400 14px/1.35 var(--ac-sans);
}

.ac-paynow__item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--ac-surface);
}

.ac-paynow__item-nome small {
  display: block;
  color: var(--ac-muted);
  font-size: 12.5px;
}

.ac-paynow__item-valor {
  font-weight: 500;
}

.ac-paynow__totais {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  font: 400 13.5px/1.4 var(--ac-sans);
}

.ac-paynow__totais > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ac-paynow__totais dt {
  color: var(--ac-muted);
}

.ac-paynow__totais dd {
  margin: 0;
}

.ac-paynow__total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-border-soft);
}

.ac-paynow__total dt,
.ac-paynow__total dd {
  color: var(--ac-ink);
  font-weight: 500;
  font-size: 15px;
}

.ac-paynow__titulo {
  margin: 24px 0 12px;
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ac-paynow__metodos {
  display: grid;
  gap: 8px;
}

.ac-paynow__cartao {
  margin-top: 16px;
}

.ac-paynow__pagar {
  width: 100%;
  margin-top: 18px;
}

.ac-paynow__pix .ac-payment-panel {
  margin-top: 0;
}

/*
 * O QR DA JANELA É MENOR (D-265). O painel compacto ocupa a largura da coluna
 * do checkout; numa janela de 560px isso dá um quadrado de 500px, e a pessoa
 * precisava rolar para ver o código. 190px lê bem no celular e cabe inteiro.
 */
.ac-modal--pagar .ac-payment-panel--compacto .ac-payment-panel__qr {
  width: min(190px, 60vw);
  margin: 0 auto;
  padding: 10px;
}

.ac-paynow__trocar {
  display: block;
  margin: 14px auto 0;
  padding: 4px 0;
  font: 400 13px/1.4 var(--ac-sans);
  color: var(--ac-gold);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.ac-paynow__ok {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 0 6px;
  text-align: center;
}

.ac-paynow__ok-titulo {
  margin: 6px 0 0;
  font: 400 26px/1.2 var(--ac-serif);
}

.ac-paybox {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(28, 26, 23, 0.14);
}

.ac-outro-pagador {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
  font: 400 13px/1.5 var(--ac-sans);
  color: var(--ac-ink);
  cursor: pointer;
}
.ac-outro-pagador input {
  margin-top: 2px;
  flex: 0 0 auto;
}
.ac-outro-pagador small {
  display: block;
  margin-top: 3px;
  font: 400 12px/1.5 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-paybox__aviso {
  font: 400 13px/1.6 var(--ac-sans);
  color: var(--ac-muted);
}

/* O detalhe técnico da recusa no checkout, só para quem administra (D-204). */
.ac-paybox__diagnostico {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.5 var(--ac-mono, monospace);
  color: var(--ac-ink);
  overflow-wrap: anywhere;
}

.ac-order-line {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ac-border-soft);
}

.ac-order-line__media {
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid var(--ac-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.ac-order-line__name {
  font: 400 15px/1.2 var(--ac-serif);
}

.ac-order-line__meta {
  font: 400 11.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 5px;
}

/* Resumo de erros no topo do formulário, com foco no primeiro campo. */
.ac-error-summary {
  border: 1px solid var(--ac-danger);
  background: var(--ac-danger-bg);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.ac-error-summary__title {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-danger);
  margin-bottom: 12px;
}

.ac-error-summary ul {
  margin: 0;
  padding-left: 18px;
}

.ac-error-summary a {
  color: var(--ac-danger);
  text-decoration: underline;
}

/* --- Resultado do pagamento --------------------------------------------- */

.ac-result {
  text-align: center;
  padding-top: 72px;
}

.ac-result__icon {
  display: inline-flex;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--ac-gold-2);
  align-items: center;
  justify-content: center;
  color: var(--ac-gold);
}

.ac-result--error .ac-result__icon {
  border-color: var(--ac-danger);
  color: var(--ac-danger);
}

.ac-result__title {
  margin-top: 30px;
  font: 300 clamp(36px, 4vw, 52px) / 1.05 var(--ac-serif);
}

.ac-result__text {
  margin: 20px auto 0;
  max-width: 520px;
  font: 400 16.5px/1.7 var(--ac-sans);
  color: var(--ac-muted);
}

/*
 * O PAINEL E CLARO, e nao um bloco escuro no meio da pagina.
 *
 * Ele nasceu escuro na tela de agradecimento, onde ocupa a largura toda e
 * funciona como destaque. Na coluna do resumo do checkout o mesmo bloco vira
 * um retangulo preto ao lado de um resumo claro, e o QR -- que e branco --
 * passa a ser a unica coisa luminosa da tela.
 *
 * A cor e das DUAS telas, e nao do contexto: as cores dos botoes e do campo
 * de codigo estavam escritas na marcacao (`style=` inline), e duas paletas
 * para a mesma parte e exatamente a divergencia que ela existe para evitar
 * (§9, D-34, D-206).
 */
.ac-payment-panel {
  background: var(--ac-surface, #fff);
  color: var(--ac-ink);
  border: 1px solid var(--ac-border);
  padding: 38px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 44px;
}

/*
 * O MESMO painel, numa coluna de um terco da largura.
 *
 * Em duas colunas sobram uns cento e quarenta pixels para o texto, e o
 * titulo quebra em quatro linhas. A margem do topo sai porque aqui quem
 * separa e o filete da caixa.
 */
.ac-payment-panel--compacto {
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 26px 22px;
  margin-top: 0;
}

/*
 * O QR OCUPA A LARGURA DA COLUNA.
 *
 * Em 148px fixos ele ficava perdido no meio de um painel de 300, e a leitura
 * pelo celular e mais facil quanto maior o codigo. O `aspect-ratio` mantem o
 * quadrado sem depender da altura da imagem.
 */
.ac-payment-panel--compacto .ac-payment-panel__qr {
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 18px;
}

/*
 * As acoes empilham e ocupam a largura: o botao de copiar fica do tamanho do
 * campo que ele copia. Lado a lado, numa coluna estreita, os dois se espremem
 * e o rotulo quebra.
 */
.ac-payment-panel--compacto .ac-payment-panel__actions {
  flex-direction: column;
  gap: 8px;
}

.ac-payment-panel--compacto .ac-payment-panel__actions > * {
  width: 100%;
}

.ac-payment-panel--compacto .ac-payment-panel__title {
  font-size: 21px;
}

.ac-payment-panel__qr {
  width: 132px;
  height: 132px;
  background: var(--ac-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
}

.ac-payment-panel__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ac-payment-panel__label {
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold-2);
}

.ac-payment-panel__title {
  font: 400 27px/1.2 var(--ac-serif);
  color: var(--ac-ink);
  margin-top: 14px;
}

.ac-payment-panel__text {
  font: 400 13.5px/1.6 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 10px;
}

.ac-payment-panel__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/*
 * UMA LINHA, TRUNCADA. O codigo tem uns duzentos caracteres e ninguem o le:
 * quem o usa aperta o botao abaixo. A barra de rolagem convidava a rolar o
 * que nao se confere no olho, e comia a altura da coluna (§9, D-206).
 */
.ac-payment-panel__code {
  margin-top: 14px;
  width: 100%;
  border: 1px solid var(--ac-border);
  background: var(--ac-bg);
  color: var(--ac-ink);
  padding: 12px;
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
 * 15. Área do cliente
 * ====================================================================== */

.ac-account__head {
  position: relative;
  padding-top: 44px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ac-border);
}

/* O saldo da conta (D-341): à direita do "Olá", no espaço que o cabeçalho
   deixava vazio. Crédito em dourado; valor a pagar no tom de alerta. Só
   existe quando o saldo não é zero. */
/* O grupo (D-342): saldo e descontos lado a lado, à direita do "Olá". */
.ac-account__destaques {
  position: absolute;
  right: 0;
  top: 44px;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ac-account__saldo {
  display: block;
  min-width: 200px;
  padding: 16px 22px;
  border: 1px solid var(--ac-gold-2);
  background: var(--ac-surface);
  text-align: right;
}

/* O desconto é um link para "Meus cupons": os três textos dentro dele são
   `span`, e viram linhas aqui. */
.ac-account__saldo.is-cupom {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.ac-account__saldo.is-cupom > span {
  display: block;
}

.ac-account__saldo.is-cupom:hover,
.ac-account__saldo.is-cupom:focus-visible {
  border-color: var(--ac-gold);
  background: var(--ac-surface-2);
}

.ac-account__saldo.is-devido {
  border-color: var(--ac-danger);
  background: var(--ac-danger-bg);
}

.ac-account__saldo-rotulo {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-account__saldo.is-devido .ac-account__saldo-rotulo,
.ac-account__saldo.is-devido .ac-account__saldo-valor {
  color: var(--ac-danger);
}

.ac-account__saldo-valor {
  margin: 4px 0 2px;
  font-family: var(--ac-serif);
  font-size: 34px;
  line-height: 1.1;
  color: var(--ac-ink);
}

.ac-account__saldo-nota {
  margin: 0;
  font-size: 12px;
  color: var(--ac-muted);
}

@media (max-width: 767px) {
  .ac-account__destaques {
    position: static;
    margin-top: 18px;
    flex-wrap: wrap;
  }

  .ac-account__saldo {
    flex: 1 1 160px;
    text-align: left;
  }
}

.ac-account__grid {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 56px;
  align-items: start;
}

.ac-account__nav {
  padding: 38px 0 60px;
  position: sticky;
  top: 96px;
}

.ac-account__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 2px solid transparent;
  padding: 14px 16px;
  font: 400 13.5px/1 var(--ac-sans);
  letter-spacing: 0.06em;
  color: var(--ac-muted);
  min-height: 44px;
}

.ac-account__link[aria-current='page'] {
  background: var(--ac-surface);
  border-left-color: var(--ac-gold-2);
  color: var(--ac-ink);
}

.ac-account__link:hover {
  color: var(--ac-ink);
}

/* Mensagem da loja sem ler (§9, D-275). */
.ac-account__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ac-alerta);
  vertical-align: middle;
}

.ac-account__badge {
  background: var(--ac-gold-2);
  color: var(--ac-ink);
  font: 600 10.5px/1 var(--ac-sans);
  padding: 4px 7px;
  border-radius: 9px;
}

.ac-account__body {
  padding: 38px 0 60px;
}

.ac-account__tabs {
  display: none;
}

.ac-order {
  border: 1px solid rgba(28, 26, 23, 0.14);
  margin-bottom: 16px;
}

.ac-order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  background: var(--ac-surface);
  flex-wrap: wrap;
}

.ac-order__facts {
  display: flex;
  gap: 32px;
  align-items: baseline;
  flex-wrap: wrap;
}

.ac-order__fact-label {
  display: block;
  font: 500 10px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-order__fact-value {
  display: block;
  font: 400 14px/1 var(--ac-sans);
  margin-top: 7px;
}

.ac-order__status {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
  border: 1px solid var(--ac-border-strong);
  padding: 8px 12px;
}

/*
 * TRÊS TONS DE SITUAÇÃO, e a divisão é pelo que a pessoa precisa fazer.
 *
 * Antes eram todos cinza, e "Confirmado" e "Cancelado" se liam igual — numa
 * lista de onze pedidos era preciso parar em cada linha para diferenciar.
 *
 * Os tons herdam a paleta da marca em vez de trazer verde e vermelho genéricos:
 * um estado que não parece da loja se lê como erro do site.
 */
.ac-order__status.is-ok {
  color: var(--ac-success);
  border-color: var(--ac-success);
  background: var(--ac-success-bg);
}

.ac-order__status.is-aguarda {
  color: var(--ac-gold);
  border-color: var(--ac-gold-2);
}

.ac-order__status.is-ruim {
  color: var(--ac-danger);
  border-color: var(--ac-danger);
  background: var(--ac-danger-bg);
}

/*
 * A RETIRADA é um fato do pedido, não uma ação.
 *
 * Ela ocupa o lugar do botão de rastrear — que não existe aqui, porque o pacote
 * não sai da loja — e por isso é texto, sem borda de botão: uma pílula com
 * cara de botão convida ao clique que não leva a lugar nenhum.
 */
.ac-order__flag {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  padding: 8px 0;
}

.ac-order__body {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ac-order__thumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ac-order__thumb {
  width: 58px;
  height: 58px;
  background: var(--ac-white);
  border: 1px solid rgba(28, 26, 23, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.ac-order__summary {
  font: 400 13px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  max-width: 230px;
}

/* O código de rastreio na lista de pedidos (D-300). */
.ac-order__rastreio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  font-size: 12px;
  color: var(--ac-muted);
}

.ac-order__rastreio code {
  font: 600 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
  color: var(--ac-ink);
  user-select: all;
}

.ac-order__rastreio-rotulo {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ac-order__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ac-address {
  border: 1px solid rgba(28, 26, 23, 0.14);
  padding: 24px;
}

.ac-address--default {
  border-color: var(--ac-gold-2);
}

.ac-address__label {
  font: 500 10.5px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-address__text {
  font: 400 14px/1.8 var(--ac-sans);
  margin-top: 16px;
}

/* ---------- Endereço salvo, no carrinho ---------- */

/*
 * Seletor, e não cartões como no checkout: a coluna do resumo tem um terço da
 * largura, e três cartões empurrariam a lista de fretes para fora da tela —
 * que é justamente o que o D-69 corrigiu ali.
 *
 * Ele nasce escondido no HTML e o script o revela: sem JavaScript o campo de
 * CEP fica à vista, que é o caminho de quem não tem conta.
 */
.ac-ship-saved {
  margin-bottom: 10px;
}



/* ---------- Cadastro pronto, no checkout ---------- */

/*
 * O cartão nasce escondido no HTML e o script o revela — sem JavaScript os
 * campos ficam à vista, preenchidos pelo servidor. Comprar não pode depender de
 * um script (D-49).
 */
.ac-card-dados {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
  margin-bottom: 22px;
}

.ac-card-dados__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ac-card-dados__nome {
  font: 500 15px/1.3 var(--ac-sans);
}

.ac-card-dados__linha {
  font: 400 13.5px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  overflow-wrap: anywhere;
}

/* Falta um obrigatório: o cartão DIZ isso em vez de esconder a ausência. Sem a
   frase, a recusa aparece só no envio, apontando um campo que a tela não
   mostrou (D-77). */
.ac-card-dados__falta {
  font: 400 13px/1.5 var(--ac-sans);
  color: var(--ac-danger);
}

@media (max-width: 520px) {
  .ac-card-dados {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Endereços salvos, no checkout ---------- */

/*
 * A lista nasce escondida no HTML e o script a revela.
 *
 * Sem JavaScript ela não aparece e o formulário fica à vista, preenchido pelo
 * servidor: comprar não pode depender de um script. É a mesma regra dos termos
 * no D-49.
 */
.ac-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

/*
 * Mais baixo que a opção de frete: aqui são dois ou três endereços lidos de
 * relance, e não uma decisão de preço tomada com calma. A compactação é
 * escopada — encurtar `.ac-option` levaria junto os cartões de pagamento.
 */
.ac-option--address {
  padding: 12px 14px;
}

.ac-option--address .ac-option__meta {
  margin-top: 3px;
}

/* "Outro endereço" é a última opção da mesma lista, e não um botão solto: ela
   concorre com as outras pela mesma escolha. O tracejado diz que ali não há
   endereço ainda. */
.ac-option--outro {
  border-style: dashed;
}

/*
 * A linha do endereço escolhido (D-344): o mesmo desenho da entrega, com o
 * respiro que a lista tinha antes dos campos. Dentro da janela, a lista não
 * precisa dele — o corpo da janela já tem o seu.
 */
.ac-address-chosen {
  margin-bottom: 22px;
}

.ac-modal .ac-saved {
  margin-bottom: 0;
}

.ac-saved__flag {
  margin-left: 8px;
  font: 400 9.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/* ---------- Endereços da conta ---------- */

/*
 * O título e a ação na MESMA linha.
 *
 * A ação empilhada acima do título flutua sem nada em comum com ele; ao lado,
 * a linha diz "isto é o assunto, e isto é o que dá para fazer com ele". É a
 * mesma decisão do D-47 no painel.
 */
.ac-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.ac-block-head .ac-h-block {
  margin: 0;
}

.ac-addresses {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Grade vazia não deixa buraco: ela existe sempre, para receber o primeiro
   endereço sem recarregar a página. */
.ac-addresses:empty {
  display: none;
}

.ac-address__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ac-address__flag {
  font: 400 9.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-address__actions {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

/* Botão que se lê como link: a ação é secundária e não deve competir com o
   endereço, que é o conteúdo do cartão. */
.ac-linkish {
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
}

.ac-linkish:hover {
  color: var(--ac-ink);
}

/* ---------- Formulário dentro de janela ---------- */

.ac-fields--modal {
  grid-template-columns: 1fr 1fr;
}

.ac-field--wide {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .ac-fields--modal {
    grid-template-columns: 1fr;
  }
}

.ac-modal__body .ac-check {
  margin-top: 18px;
}

.ac-field__help--error {
  color: var(--ac-danger);
}

.ac-field__help--error:empty {
  display: none;
}

/* O campo qué o servidor recusou. Sem o destaque, "confira os dados" manda
   procurar o que já está à vista (D-77). */
.ac-field__input.is-invalid {
  border-color: var(--ac-danger);
}

.ac-coupon {
  border: 1px solid rgba(201, 169, 97, 0.6);
  background: var(--ac-surface);
  padding: 26px;
}

.ac-coupon__code {
  font: 400 26px/1 var(--ac-serif);
  letter-spacing: 0.1em;
}

.ac-coupon__desc {
  font: 400 14px/1.6 var(--ac-sans);
  margin-top: 12px;
}

.ac-coupon__valid {
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 14px;
}

.ac-coupon.is-spent {
  opacity: 0.55;
}

/* =========================================================================
 * 16. Sobreposições
 * ====================================================================== */

.ac-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
}

.ac-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, 0.55);
  animation: ac-fade-in 0.26s ease;
}

.ac-search {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ac-bg);
  box-shadow: 0 24px 60px rgba(28, 26, 23, 0.22);
  animation: ac-drop-in 0.3s var(--ac-ease);
  max-height: 100vh;
  overflow-y: auto;
}

.ac-search__inner {
  max-width: var(--ac-container);
  margin: 0 auto;
  padding: 44px var(--ac-gutter) 40px;
}

.ac-search__field {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--ac-ink);
  padding-bottom: 16px;
  color: var(--ac-gold);
}

.ac-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 300 clamp(20px, 2.4vw, 30px) / 1.2 var(--ac-serif);
  color: var(--ac-ink);
}

/*
 * O "limpar" que o NAVEGADOR desenha em `input[type=search]`.
 *
 * Ele vinha no azul do sistema, que é a única cor da loja inteira que não sai
 * da paleta — e ficava a dois centímetros do X de "Fechar", em tinta escura,
 * fazendo os dois parecerem coisas diferentes por serem de cores diferentes.
 * Aqui ele é redesenhado com o mesmo traço, na mesma tinta.
 *
 * Só o WebKit desenha esse botão; o Firefox não tem um, e nada muda por lá.
 */
.ac-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5 L19 19M19 5 L5 19'/%3E%3C/svg%3E");
}

.ac-search__input::-webkit-search-cancel-button:hover {
  opacity: 1;
}

.ac-search__close {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-muted);
  min-height: 44px;
}

/*
 * Um bloco de cada vez, os dois começando na MESMA vertical.
 *
 * Era uma grade de duas colunas — buscas populares na estreita, resultados na
 * larga. Como o JavaScript esconde as buscas assim que alguém digita, os dois
 * nunca aparecem juntos: a coluna larga só servia para empurrar o rótulo
 * "Resultados" para o meio da tela enquanto não havia busca, e devolvê-lo à
 * esquerda depois. O rótulo não pulava — a coluna é que mudava debaixo dele.
 */
.ac-search__body {
  margin-top: 36px;
}

.ac-search__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ac-search__term {
  padding: 10px 14px;
  border: 1px solid rgba(28, 26, 23, 0.18);
  font: 400 12.5px/1 var(--ac-sans);
  color: var(--ac-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.ac-search__term:hover {
  border-color: var(--ac-gold-2);
  color: var(--ac-gold);
}

/*
 * Quatro colunas, ocupando a largura toda.
 *
 * Eram três com teto de 862px, e o teto fazia sentido quando os resultados
 * dividiam a linha com as buscas populares. Agora que um bloco de cada vez
 * ocupa a sobreposição, o teto só deixava uma quarta coluna vazia à direita —
 * e a fileira de três parecia incompleta, porque estava mesmo.
 *
 * Quatro colunas em 1200px dão 282px cada: praticamente a mesma largura de
 * cartão que as três com teto davam (270px), sem a faixa morta ao lado.
 */
.ac-search__results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/*
 * Resultado de busca é PRÉVIA, não vitrine.
 *
 * As classes do cartão são as mesmas do catálogo — o que evita um segundo
 * componente para dizer a mesma coisa —, mas ali o nome tem 21px e a foto é
 * quadrada. Numa sobreposição, isso vira um cartão de 340px de altura para
 * mostrar três resultados. A miniatura ganha altura fixa e a tipografia
 * encolhe; a identidade continua a mesma.
 */
.ac-search__results .ac-card__media {
  aspect-ratio: auto;
  height: 150px;
}

.ac-search__results .ac-card__brand {
  font-size: 9.5px;
  margin-top: 14px;
}

.ac-search__results .ac-card__name {
  font-size: 16px;
  line-height: 1.2;
  margin-top: 7px;
}

.ac-search__results .ac-card__price {
  font-size: 13.5px;
  margin-top: 9px;
}

/* Drawer mobile. Entra pela esquerda, com foco preso e scroll travado. */
.ac-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
}

/*
 * Ancorado à DIREITA, com a sombra projetada para dentro da tela — quem o
 * chamou foi o botão de menu no canto inferior direito.
 *
 * Quem rola é o MIOLO, não o painel: com o painel inteiro rolando, o botão
 * dourado do pé desce junto com a lista, e é preciso ir até o fim dela para
 * achar a entrada da conta. `min-height: 0` no miolo é o que faz isso valer —
 * sem ele, um filho flex não encolhe abaixo do próprio conteúdo, e a barra de
 * rolagem volta para o painel.
 */
.ac-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(320px, 82vw);
  background: var(--ac-bg);
  box-shadow: -24px 0 60px rgba(28, 26, 23, 0.34);
  display: flex;
  flex-direction: column;
  animation: ac-drawer-in 0.32s var(--ac-ease);
}

.ac-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--ac-border);
}

.ac-drawer__eyebrow {
  font: 500 9.5px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ac-drawer__foot {
  flex: none;
  border-top: 1px solid var(--ac-border);
  padding: 16px 20px 20px;
}

.ac-drawer__account {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 15px;
  background: var(--ac-gold-2);
  color: var(--ac-ink);
  font: 500 11.5px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ac-drawer__account:hover,
.ac-drawer__account:focus-visible {
  background: var(--ac-gold-soft);
  color: var(--ac-ink);
}

.ac-drawer__section {
  padding: 22px 22px 0;
}

.ac-drawer__title {
  font: 500 10px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold);
  margin-bottom: 6px;
}

.ac-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.09);
  font: 400 21px/1.2 var(--ac-serif);
  color: var(--ac-ink);
  min-height: 44px;
}

.ac-drawer__link:hover {
  color: var(--ac-gold);
}

/*
 * O item da página atual: a barra dourada à esquerda é o que se lê de relance
 * numa lista de nove — a cor sozinha some quando a tela está no sol.
 *
 * A margem negativa faz a barra encostar na borda do painel; sem ela, ela
 * ficaria recuada com o resto do texto e pareceria mais um traço da lista.
 */
.ac-drawer__link[aria-current='page'] {
  color: var(--ac-gold);
  background: var(--ac-surface);
  border-left: 2px solid var(--ac-gold-2);
  margin: 0 -22px;
  padding-left: 20px;
  padding-right: 22px;
}

/* O item em destaque (Promoções), dourado como no cabeçalho. */
.ac-drawer__link--destaque {
  color: var(--ac-gold);
}

.ac-drawer__link--small {
  font: 400 13.5px/1 var(--ac-sans);
  border-bottom-color: rgba(28, 26, 23, 0.07);
  padding: 13px 0;
}

.ac-drawer__promo {
  margin: 26px 22px 22px;
  background: var(--ac-ink);
  color: var(--ac-bg);
  padding: 20px;
}

.ac-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-ink);
  position: relative;
}

.ac-close::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ac-border-strong);
}

.ac-close svg {
  position: relative;
}

.ac-close:hover::before {
  border-color: var(--ac-gold-2);
}

.ac-close:hover {
  color: var(--ac-gold);
}

/* --- Quiz --------------------------------------------------------------- */

.ac-quiz {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
}

.ac-quiz__panel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  background: var(--ac-bg);
  box-shadow: 0 30px 80px rgba(28, 26, 23, 0.34);
  animation: ac-drop-in 0.34s var(--ac-ease);
}

.ac-quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--ac-border);
}

.ac-quiz__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 10px/1 var(--ac-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ac-gold);
}

.ac-quiz__landing {
  padding: 56px 40px 52px;
  text-align: center;
}

.ac-quiz__landing h2 {
  margin: 20px auto 0;
  font: 300 clamp(34px, 4vw, 52px) / 1.04 var(--ac-serif);
  max-width: 16em;
}

.ac-quiz__progress {
  padding: 26px 28px 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ac-quiz__track {
  display: block;
  height: 3px;
  background: rgba(28, 26, 23, 0.12);
  margin-top: 9px;
}

.ac-quiz__fill {
  display: block;
  height: 3px;
  background: var(--ac-gold-2);
  transition: width 0.4s var(--ac-ease);
}

.ac-quiz__question {
  padding: 34px 28px 40px;
}

.ac-quiz__title {
  font: 300 clamp(26px, 3vw, 38px) / 1.12 var(--ac-serif);
  max-width: 20em;
}

.ac-quiz__hint {
  font: 400 13.5px/1.6 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 12px;
}

.ac-quiz__options {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.ac-quiz__options--image,
.ac-quiz__options--text {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ac-quiz__options--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ac-quiz__options--scale {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(28, 26, 23, 0.16);
}

.ac-quiz__opt {
  text-align: left;
  border: 1px solid var(--ac-border-strong);
  background: transparent;
  color: var(--ac-ink);
  transition: border-color 0.2s ease, background-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
}

.ac-quiz__opt:hover {
  border-color: var(--ac-gold-2);
}

.ac-quiz__opt[aria-pressed='true'],
.ac-quiz__opt[aria-checked='true'] {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-bg);
}

/* O CARTÃO EMPILHA DE CIMA PARA BAIXO, e isso precisa ser dito.

   Ele é um `<button>`, e o navegador CENTRALIZA verticalmente o conteúdo
   de um botão. Como os cartões de uma fileira esticam para a altura do
   mais alto, o de título curto ficava com a foto e o texto no meio da
   caixa — a foto começava mais abaixo que a dos vizinhos, e nada na regra
   dizia por quê.

   Com a coluna declarada, a foto encosta no topo em todos, e é isso que
   alinha as imagens e os títulos entre cartões de alturas diferentes. */
.ac-quiz__opt--image,
.ac-quiz__opt--text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.ac-quiz__opt--image {
  padding: 0;
  overflow: hidden;
}

.ac-quiz__tone {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 150px;
  /* Numa coluna flex a altura é ponto de partida, não promessa: sem isto
     a faixa encolheria para caber o texto de um cartão mais alto, e as
     fotos da fileira sairiam de tamanhos diferentes. */
  flex: 0 0 150px;
  padding: 12px;
  font: 500 10px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  color: var(--ac-gold);
  /* A foto é posicionada dentro dele, e o `overflow` é o que a recorta na
     altura do cartão em vez de deixá-la estourar por baixo do rótulo. */
  position: relative;
  overflow: hidden;
}

/* A FOTO COBRE O TOM, e não o substitui.

   `absolute` a tira do fluxo para que o padding do tom continue valendo para
   qualquer coisa que venha a ser escrita por cima dela; `object-fit: cover`
   recorta pelo centro, que é onde a pessoa enquadra o assunto ao fotografar —
   `contain` deixaria duas faixas do tom nas laterais de uma foto vertical. */
.ac-quiz__tone-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A opção ESCOLHIDA escurece o cartão inteiro, e a foto acompanha: sem isso
   ela continuaria clara sobre o fundo tinta e a seleção sumiria justamente no
   cartão que a pessoa acabou de escolher. */
.ac-quiz__opt[aria-checked='true'] .ac-quiz__tone-img,
.ac-quiz__opt[aria-pressed='true'] .ac-quiz__tone-img {
  filter: brightness(0.72);
}

.ac-quiz__opt-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.ac-quiz__opt-label {
  display: block;
  font: 400 22px/1.2 var(--ac-serif);
}

.ac-quiz__opt--text .ac-quiz__opt-label {
  font-size: 26px;
}

.ac-quiz__opt-sub {
  display: block;
  font: 400 12.5px/1.5 var(--ac-sans);
  opacity: 0.72;
  margin-top: 8px;
}

/* A LEGENDA DESCE PARA O PÉ do cartão de imagem.

   Os títulos já alinham pelo topo, porque a foto tem altura fixa; o que
   ainda desalinhava era a legenda, que subia junto num título de uma
   linha só. `margin-top: auto` a leva ao pé de todos — e é melhor que
   reservar duas linhas no título, que deixaria uma linha em branco em
   toda pergunta cujos rótulos cabem em uma (D-129 escolheu reservar
   porque lá o preço precisa ficar colado no nome; aqui não há isso).

   O recuo continua sendo o mínimo entre os dois quando não há folga. */
.ac-quiz__opt--image .ac-quiz__opt-sub {
  margin-top: auto;
  padding-top: 8px;
}

.ac-quiz__opt--text,
.ac-quiz__opt--scale {
  padding: 24px 24px 26px;
}

.ac-quiz__opt--scale {
  border: 0;
  border-right: 1px solid var(--ac-border);
}

.ac-quiz__opt--chip {
  padding: 13px 16px;
}

.ac-quiz__opt--chip .ac-quiz__opt-label {
  font: 400 14px/1 var(--ac-sans);
}

.ac-quiz__opt--chip .ac-quiz__opt-sub {
  font-size: 11px;
  margin-top: 7px;
}

.ac-quiz__processing {
  padding: 96px 40px 100px;
  text-align: center;
}

.ac-quiz__pulse {
  animation: ac-pulse 1.4s ease-in-out infinite;
  opacity: 0.5;
  margin: 0 auto;
}

.ac-quiz__result-head {
  padding: 44px 28px 20px;
  text-align: center;
  border-bottom: 1px solid var(--ac-border);
}

.ac-quiz__attrs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.ac-quiz__attr {
  border: 1px solid var(--ac-gold-2);
  color: var(--ac-gold);
  font: 500 10px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 13px;
}

.ac-quiz__composition {
  padding: 34px 28px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.ac-quiz__family {
  padding: 14px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.07);
}

.ac-quiz__family-head {
  display: flex;
  justify-content: space-between;
  font: 400 13px/1 var(--ac-sans);
}

.ac-quiz__family-track {
  height: 4px;
  background: rgba(28, 26, 23, 0.1);
  margin-top: 9px;
}

.ac-quiz__family-fill {
  display: block;
  height: 4px;
  background: var(--ac-gold-2);
}

.ac-quiz__note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.07);
}

.ac-quiz__note-name {
  font: 400 17px/1.2 var(--ac-serif);
}

.ac-quiz__best {
  border: 1px solid var(--ac-gold-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 20px;
}

.ac-quiz__best-media {
  background: var(--ac-white);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ac-quiz__best-media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ac-quiz__best-body {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A FAIXA ESCURA DOS KITS DA LOJA.

   Ela era uma grade de duas colunas — a apresentação de um lado, a lista
   dos três decants do outro. A lista saiu com o kit fabricado; o que
   entrou no lugar é uma grade de cartões, e ela precisa da largura toda.
   Em duas colunas, dois cartões de 260px espremidos em metade da faixa
   cortariam o nome de cada kit. */
.ac-quiz__kit {
  margin: 40px 28px 0;
  background: var(--ac-ink);
  color: var(--ac-bg);
  padding: 34px 30px;
}

/* O CARTÃO DE PRODUTO NASCEU PARA FUNDO CLARO.

   `.ac-card__link` fixa `--ac-ink`, que sobre esta faixa é tinta escura
   sobre tinta escura — o cartão apareceria com a foto e mais nada. O
   mesmo vale para o filete do preço, que é o `--ac-border-soft` claro. */
.ac-quiz__kit .ac-card__link {
  color: var(--ac-bg);
}

.ac-quiz__kit .ac-card__brand {
  color: var(--ac-gold-2);
}

.ac-quiz__kit .ac-card__price {
  border-top-color: var(--ac-on-dark);
}

.ac-quiz__save {
  padding: 36px 28px 44px;
  text-align: center;
  border-top: 1px solid var(--ac-border);
  margin-top: 40px;
}

/*
 * Botão flutuante de WhatsApp.
 *
 * Ele NÃO lê `--unbox-fab-bottom`: essa variável já conta o espaço que ele
 * mesmo ocupa, e lê-la o empurraria para cima da própria reserva. Quem ele
 * precisa desviar é a barra, e só onde ela vai de borda a borda — a regra
 * está no `@media` de 900px.
 */
.ac-whats {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /*
   * A VARIAVEL vem primeiro, o token da loja e a queda.
   *
   * Sem cor escolhida a variavel não e emitida, e o botão segue a paleta --
   * inclusive quando ela mudar. Escrever a cor escolhida direto no `style`
   * congelaria o botão no tom de hoje, e ele ficaria para trás sem ninguém
   * entender por que só ele não acompanhou.
   */
  background: var(--ac-whats-bg, var(--ac-gold-2));
  color: var(--ac-whats-ink, var(--ac-ink));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(28, 26, 23, 0.2);
}

/*
 * No hover a cor escolhida CLAREIA em vez de trocar de tom.
 *
 * `--ac-gold-soft` e a versão clara do dourado da loja; para uma cor
 * arbitraria não existe equivalente, e usa-la faria o botão verde do WhatsApp
 * virar dourado ao passar o mouse. `color-mix` resolve com a própria cor, e o
 * `@supports` garante que quem não o tem simplesmente não ganha o realce.
 */
.ac-whats:hover {
  background: var(--ac-whats-bg, var(--ac-gold-soft));
  color: var(--ac-whats-ink, var(--ac-ink));
}

@supports (background: color-mix(in oklab, red, white)) {
  .ac-whats:hover {
    background: color-mix(in oklab, var(--ac-whats-bg, var(--ac-gold-2)) 82%, white);
  }
}

/*
 * Trava de rolagem enquanto uma sobreposição está aberta.
 *
 * Vale para as três gavetas E para as janelas `<dialog>`: o modal nativo deixa
 * a página inerte ao clique e ao teclado, e mesmo assim ela continua ROLANDO
 * atrás. Quem gira a roda para ler a lista dentro da janela vê o site inteiro
 * passar por baixo — e ao fechar não está mais onde estava.
 *
 * `scrollbar-gutter` reserva a faixa da barra nos dois estados: sem ela, o
 * conteúdo salta alguns pixels para o lado no instante em que a janela abre.
 */
html {
  scrollbar-gutter: stable;
}

.ac-locked {
  overflow: hidden;
}

/* =========================================================================
 * 17. Responsivo
 *
 * O protótipo tem DUAS composições, não uma encolhida. Os pontos abaixo
 * reproduzem a composição mobile: hero em bloco único, vitrines em trilho,
 * filtros em gaveta, tabela em cartão, compra fixa embaixo.
 * ====================================================================== */

@media (max-width: 1279px) {
  .ac-store {
    --ac-gutter: 28px;
    --ac-section: 64px;
  }

  .ac-grid--6 {
    grid-template-columns: repeat(5, 1fr);
  }

  .ac-grid--5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1023px) {
  .ac-listing__body,
  .ac-account__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* `position` saiu daqui junto com o `sticky` que ele desfazia. */
  .ac-filters {
    padding-bottom: 0;
  }

  .ac-cart__grid,
  .ac-checkout__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ac-summary,
  .ac-order-summary {
    position: static;
  }

  .ac-grid--6 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ac-grid--4,
  .ac-grid--5,
  .ac-search__results {
    grid-template-columns: repeat(3, 1fr);
  }

  /*
   * Aqui a barra lateral da conta JÁ saiu do caminho — ela vira uma linha
   * acima do conteúdo neste ponto —, então a coluna é a página inteira e
   * cabem quatro. Sem esta linha a lista de desejos cairia para três com
   * mais espaço do que antes.
   */
  .ac-grid--desejos {
    grid-template-columns: repeat(4, 1fr);
  }

  .ac-club__grid,
  .ac-newsletter,
  .ac-split,
  .ac-search__body {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ac-club__steps {
    border-left: 0;
    padding-left: 0;
  }

  .ac-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  /*
   * O espaçador acompanha o cabeçalho que ele reserva.
   *
   * Sozinho, ele deixaria uma faixa sem nada no topo do celular sempre que a
   * classe `is-stuck` tivesse ficado no elemento escondido.
   */
  .ac-header,
  .ac-header__spacer {
    display: none;
  }

  /* A conta já tem o boneco no cabeçalho estreito; sem aviso, a faixa preta
     ficaria vazia no topo da tela pequena. */
  .ac-announce__greeting:not([hidden]),
  .ac-announce--sem-aviso {
    display: none;
  }

  .ac-announce__list {
    justify-content: center;
    width: 100%;
  }

  .ac-mheader {
    display: block;
  }

  /* D-285: 34px entre seções colava um bloco no outro no celular — o
     "Acabaram de chegar" começava encostado no último passo de "Como
     funciona". */
  .ac-store {
    --ac-gutter: 20px;
    --ac-section: 46px;
  }

  .ac-hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /*
   * Mobile abre pela imagem, como no protótipo: o frasco é o argumento.
   *
   * E a faixa vira COLUNA, porque o cartão desce para dentro dela. Como linha
   * — que é o padrão herdado da base — o cartão virava o segundo item AO LADO
   * do frasco, e o `overflow: hidden` comia o nome do perfume e o preço.
   *
   * A altura deixa de ser fixa pela mesma razão: com 326px o cartão não teria
   * onde caber, e recortá-lo seria o defeito de novo com outra roupa.
   */
  .ac-hero__media {
    order: -1;
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 24px 18px 18px;
  }

  .ac-hero__product {
    width: auto;
    height: 240px;
  }

  .ac-hero__watermark {
    width: 130%;
    left: -15%;
    bottom: -22%;
  }

  .ac-hero__content {
    padding: 30px 0 34px;
    border-bottom: 1px solid var(--ac-border);
  }

  .ac-hero__ctas {
    flex-direction: column;
    gap: 8px;
  }

  .ac-hero__ctas .ac-btn {
    width: 100%;
  }

  /*
   * `align-self: stretch` é o que o faz ocupar a largura da faixa: ela
   * centraliza os filhos, e sem isso o cartão encolhe para o `min-width` de
   * 216px e o nome longo volta a quebrar.
   */
  .ac-hero__card {
    position: relative;
    left: auto;
    bottom: auto;
    align-self: stretch;
    min-width: 0;
    margin-top: 18px;
  }

  /*
   * O slide vira COLUNA pelo mesmo motivo que a faixa virou: é dentro dele que
   * o cartão desce para baixo do frasco. Como linha, o cartão voltaria a ser o
   * segundo item AO LADO da imagem, e o `overflow: hidden` da faixa comeria o
   * nome do perfume e o preço.
   */
  .ac-hero__slide {
    flex-direction: column;
    padding-bottom: 0;
  }

  /*
   * Os controles descem para o fluxo, centrados abaixo do cartão. No canto,
   * eles cairiam EM CIMA do cartão — que aqui ocupa a largura inteira da
   * faixa.
   */
  .ac-hero__controles {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 14px;
  }

  .ac-trust__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ac-trust__item {
    padding: 18px 16px;
    border-right: 1px solid var(--ac-border-soft);
    border-bottom: 1px solid var(--ac-border-soft);
  }

  .ac-trust__sub {
    display: none;
  }

  .ac-shortcuts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Os passos empilhados precisam de mais ar que os atalhos: sem ele, o
     número do passo seguinte colava na explicação do anterior. */
  .ac-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ac-shortcut {
    min-height: 0;
    padding: 26px 22px;
  }

  .ac-shortcut__title {
    margin-top: 22px;
    font-size: 27px;
  }

  .ac-occasions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ac-occasion {
    min-height: 132px;
    padding: 18px;
  }

  .ac-grid--6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .ac-grid--3,
  .ac-grid--4,
  .ac-grid--5,
  .ac-search__results,
  .ac-upsell__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* D-285: o cabeçalho é FLEX, e não grade. Trocar colunas não fazia nada,
     e o `gap: 0` logo abaixo fazia título e apresentação se sobreporem em
     Marcas e Família olfativa. */
  .ac-listing__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 22px;
  }

  /*
   * O ORDENAR do topo sai: a barra fixa logo abaixo já tem o dele, e dois
   * seletores da mesma coisa na mesma tela é uma pergunta a mais para quem
   * clica — os dois fazem o mesmo?
   */
  .ac-listing__sort {
    display: none;
  }

  /* D-285: 38px de recuo mais 34px de margem da grade deixavam 72px vazios
     entre "Filtrar" e o primeiro produto. */
  .ac-listing__results {
    padding-top: 18px;
  }

  .ac-listing__grid {
    margin-top: 16px;
  }

  /* Barra fixa de filtro e ordenação, como no protótipo.
     `top` acompanha o cabeçalho estreito, que tem 64px desde o Header v2 —
     118px era a altura do cabeçalho antigo, e sobrava uma faixa de 54px entre
     um e outro. */
  .ac-filters-toggle {
    display: flex;
    gap: 8px;
    position: sticky;
    top: 64px;
    z-index: 50;
    background: var(--ac-bg);
    border-bottom: 1px solid var(--ac-border);
    padding: 12px 0;
  }

  .ac-filters-toggle > * {
    flex: 1;
  }

  /* A barra lateral vira gaveta. Fechada, sai do fluxo E da ordem de foco. */
  .ac-filters {
    display: none;
  }

  .ac-filters.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 260;
    background: var(--ac-bg);
    overflow-y: auto;
    padding: 20px 20px calc(90px + env(safe-area-inset-bottom));
  }

  /* Lado a lado: "Limpar" com a largura do texto, e "Ver N produtos" ficando
     com o resto. Empilhados, a barra fixa comeria metade da gaveta. */
  .ac-filters__apply {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 8px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--ac-bg);
    border-top: 1px solid var(--ac-border);
  }

  .ac-filters__limpar {
    flex: none;
  }

  /* A ação principal fica com o espaço que sobra — e com a gaveta inteira
     quando não há filtro para limpar. */
  .ac-filters__apply .ac-btn--primary {
    flex: 1;
  }

  .ac-pdp__top {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }

  .ac-gallery {
    flex-direction: column-reverse;
    gap: 6px;
  }

  .ac-gallery__thumbs {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .ac-gallery__thumb {
    width: 84px;
    flex: none;
  }

  .ac-variants {
    grid-template-columns: repeat(3, 1fr);
  }

  .ac-columns-3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Compra fixa embaixo; o preço fica visível junto com o botão. */
  .ac-sticky-buy {
    display: flex;
  }

  /* D-285: o botão quebrava em duas linhas no celular estreito. */
  .ac-sticky-buy .ac-btn {
    white-space: nowrap;
    letter-spacing: 0.14em;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* D-285: a barra de compra fica presa no pé da tela em toda a página do
     produto, e o botão do WhatsApp caía em cima do "Adicionar à sacola".
     Ele sobe a altura da barra; o botão de consentimento, que lê
     `--unbox-fab-bottom`, sobe junto. */
  .ac-store--product {
    --ac-buybar: calc(78px + env(safe-area-inset-bottom, 0px));
    --unbox-fab-bottom: var(--ac-buybar);
  }

  .ac-store--product.ac-store--whats {
    --unbox-fab-bottom: calc(var(--ac-buybar) + 68px);
  }

  .ac-store--product .ac-whats {
    bottom: calc(var(--ac-buybar) + 14px);
  }

  .ac-pdp__buy .ac-buy {
    display: none;
  }

  /* Tabela vira cartão sem perder o cabeçalho: cada célula anuncia o seu. */
  .ac-compare thead {
    display: none;
  }

  .ac-compare,
  .ac-compare tbody,
  .ac-compare tr,
  .ac-compare td {
    display: block;
    width: 100%;
  }

  .ac-compare tr {
    border: 1px solid var(--ac-border);
    padding: 12px 14px;
    margin-bottom: 6px;
  }

  .ac-compare td {
    border: 0;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
  }

  .ac-compare td::before {
    content: attr(data-label);
    font: 500 10.5px/1.6 var(--ac-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-muted);
  }

  .ac-line {
    grid-template-columns: 76px 1fr;
    gap: 16px;
  }

  .ac-line__total {
    grid-column: 2;
    text-align: left;
  }

  .ac-fields,
  .ac-fields--address {
    grid-template-columns: 1fr;
  }

  .ac-payment-panel {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .ac-payment-panel__qr {
    margin: 0 auto;
    width: 112px;
    height: 112px;
  }

  /* Abas horizontais da conta, roláveis, como no protótipo. */
  .ac-account__nav {
    display: none;
  }

  .ac-account__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0;
    align-items: center;
  }

  .ac-account__tab {
    flex: none;
    padding: 12px 14px;
    border: 1px solid var(--ac-border-strong);
    font: 400 12px/1 var(--ac-sans);
    color: var(--ac-muted);
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .ac-account__tab[aria-current='page'] {
    background: var(--ac-surface);
    border-color: var(--ac-gold-2);
    color: var(--ac-ink);
  }

  .ac-account__body {
    padding-top: 22px;
  }

  .ac-order__head,
  .ac-order__body {
    padding: 14px 16px;
  }

  .ac-order__actions {
    width: 100%;
  }

  .ac-order__actions .ac-btn {
    flex: 1;
  }

  .ac-footer {
    margin-top: 40px;
    padding-bottom: 12px;
  }

  /* O mesmo respiro que o rodapé dá aqui — 40px, e não os 96 do desktop. */
  .ac-store--sem-rodape {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  .ac-footer__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 34px;
  }

  .ac-footer__col {
    border-top: 1px solid var(--ac-on-dark);
    margin-top: 22px;
    padding-top: 18px;
  }

  /* D-285: cada link passa a ter ~33px de altura para o dedo; o espaço
     entre linhas sai do próprio link, e não do `gap`. */
  .ac-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }

  .ac-footer__link {
    padding: 9px 0;
  }

  .ac-newsletter {
    padding: 28px 22px;
  }

  .ac-quiz {
    padding: 0;
  }

  .ac-quiz__panel {
    min-height: 100%;
    max-width: none;
  }

  .ac-quiz__options--scale {
    grid-template-columns: 1fr;
  }

  .ac-quiz__opt--scale {
    border-right: 0;
    border-bottom: 1px solid var(--ac-border);
  }
}

/* =========================================================================
 * TABLET (600–900px) · D-285
 *
 * Abaixo de 900px a loja inteira caía no layout de celular, e num tablet de
 * 768px isso vira duas colunas de produto com 356px cada, botões de 730px de
 * largura e a página do produto com a foto ocupando a tela antes do nome.
 * Aqui o cabeçalho, a gaveta e os filtros continuam os do celular; o que muda
 * é a DENSIDADE do conteúdo.
 * ====================================================================== */
@media (min-width: 600px) and (max-width: 900px) {
  .ac-grid--3,
  .ac-grid--4,
  .ac-grid--5,
  .ac-search__results,
  .ac-upsell__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .ac-grid--6,
  .ac-grid--desejos {
    grid-template-columns: repeat(4, 1fr);
  }

  /* A faixa de confiança volta a ter uma coluna por item, com o texto. */
  .ac-trust__grid {
    grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
  }

  .ac-trust__sub {
    display: block;
  }

  .ac-steps {
    grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
    gap: 24px;
  }

  /* Botões do topo lado a lado, do tamanho do texto: 730px de botão não é
     uma decisão, é um bloco. */
  .ac-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .ac-hero__ctas .ac-btn {
    width: auto;
  }
}

/* O produto em duas colunas a partir de 700px: a foto ao lado do nome, do
   preço e dos tamanhos, e não uma tela de foto antes deles. */
@media (min-width: 700px) and (max-width: 900px) {
  .ac-pdp__top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-top: 12px;
  }

  .ac-variants {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Os três atalhos da home lado a lado quando cabem. */
@media (min-width: 720px) and (max-width: 900px) {
  .ac-shortcuts {
    grid-template-columns: repeat(3, 1fr);
  }

  .ac-shortcut__title {
    font-size: 24px;
  }
}

/* D-285: abaixo de 600px, duas colunas na faixa de confiança deixavam o
   terceiro item sozinho numa linha e os títulos espremidos em três. */
@media (max-width: 599px) {
  .ac-trust__grid {
    grid-template-columns: 1fr;
  }

  .ac-trust__item {
    border-right: 0;
    padding: 14px 0;
  }
}

@media (max-width: 479px) {
  /* D-285: num card de 150px "Avise-me quando voltar" quebrava em duas
     linhas ao lado de botões de uma linha. Menos espaço entre letras o faz
     caber; se ainda não couber, quebra sem cortar. */
  .ac-card__add--aviso {
    letter-spacing: 0.06em;
    padding-left: 6px;
    padding-right: 6px;
  }

  .ac-grid--3,
  .ac-grid--4,
  .ac-grid--5,
  .ac-grid--6,
  .ac-search__results {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ac-upsell__grid,
  .ac-occasions {
    grid-template-columns: 1fr;
  }

  .ac-variants {
    grid-template-columns: repeat(2, 1fr);
  }

  .ac-card__name {
    font-size: 17px;
  }

  .ac-sizes {
    flex-wrap: wrap;
  }

  .ac-size {
    flex: 1 0 28%;
  }
}

/* =========================================================================
 * Gaveta da sacola
 *
 * Entra pela DIREITA, do mesmo lado do ícone que a abriu — o movimento sai de
 * onde o dedo tocou, e não do lado oposto da tela. A gaveta de navegação vem
 * da esquerda pelo mesmo motivo.
 * ====================================================================== */

@keyframes ac-cart-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.ac-cart-drawer {
  z-index: 300;
}

.ac-cart-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(408px, 92vw);
  background: var(--ac-bg);
  box-shadow: -24px 0 60px rgba(28, 26, 23, 0.28);
  display: flex;
  flex-direction: column;
  animation: ac-cart-drawer-in 0.34s var(--ac-ease);
}

.ac-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ac-border);
}

/* A CONFIRMAÇÃO DA ADIÇÃO, dentro da sacola.

   Branco sobre verde escuro, e o verde é o `--ac-success` da paleta — um
   verde genérico não pareceria desta loja, e um estado que não parece da
   casa se lê como erro do site.

   Ela ocupa a faixa inteira entre o título e a lista: é o primeiro bloco
   que o olho encontra ao a gaveta abrir, e some junto com ela. */
.ac-cart-drawer__feito {
  background: var(--ac-success);
  color: var(--ac-white);
  padding: 13px 26px;
  font: 500 12.5px/1.4 var(--ac-sans);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* O visto é desenho, e não texto: `::before` não entra no nome acessível,
   e o leitor de tela anuncia a frase sem um caractere solto na frente. */
.ac-cart-drawer__feito::before {
  content: '';
  flex: none;
  width: 15px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

.ac-cart-drawer__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 24px/1 var(--ac-serif);
}

.ac-cart-drawer__count {
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/* O corpo rola; cabeçalho e rodapé ficam. Uma sacola de doze itens não pode
   empurrar o botão de finalizar para fora da tela. */
.ac-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 26px 26px;
}

.ac-cart-drawer__loading,
.ac-cart-drawer__empty {
  font: 400 14px/1.6 var(--ac-sans);
  color: var(--ac-muted);
  padding: 26px 0;
}

.ac-cart-drawer__empty strong {
  display: block;
  font: 400 21px/1.25 var(--ac-serif);
  color: var(--ac-ink);
  margin-bottom: 10px;
}

.ac-cart-line {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ac-border-soft);
}

.ac-cart-line[aria-busy='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.ac-cart-line__media {
  aspect-ratio: 1 / 1;
  background: var(--ac-white);
  border: 1px solid var(--ac-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ac-cart-line__media img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ac-cart-line__brand {
  font: 500 9.5px/1 var(--ac-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-cart-line__name {
  display: block;
  font: 400 16px/1.25 var(--ac-serif);
  color: var(--ac-ink);
  margin-top: 6px;
}

.ac-cart-line__variant {
  font: 400 12px/1 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 7px;
}

/* A lixeira abaixo do valor (D-340): só o ícone, com a área de toque inteira. */
.ac-cart-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 8px -8px 0 auto;
  color: var(--ac-muted);
  border-radius: 50%;
}

.ac-cart-line__remove:hover,
.ac-cart-line__remove:focus-visible {
  color: var(--ac-danger);
  background: var(--ac-surface);
}

.ac-cart-line__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Esvaziar / limpar a sacola (D-340): discreto, sublinhado ao passar. */
.ac-cart-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font: 400 11.5px/1 var(--ac-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-cart-clear:hover,
.ac-cart-clear:focus-visible {
  color: var(--ac-danger);
}

.ac-cart-drawer__foot .ac-cart-clear {
  margin: -8px 0 12px;
}

.ac-cart-clear__linha {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}

.ac-cart-line__price {
  text-align: right;
  font: 400 15px/1.3 var(--ac-sans);
  white-space: nowrap;
}

.ac-cart-line__unit {
  display: block;
  font-size: 11.5px;
  color: var(--ac-muted);
  margin-top: 6px;
}

.ac-cart-drawer__foot {
  border-top: 1px solid var(--ac-border);
  padding: 22px 26px;
  background: var(--ac-surface);
}

.ac-cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 400 13px/1 var(--ac-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ac-cart-drawer__total strong {
  font: 500 21px/1 var(--ac-sans);
  letter-spacing: 0;
}

.ac-cart-drawer__note {
  font: 400 12px/1.5 var(--ac-sans);
  color: var(--ac-muted);
  margin-top: 10px;
}

.ac-cart-drawer__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 420px) {
  /* Numa tela estreita os dois botões lado a lado quebram o rótulo em duas
     linhas cada. Empilhados, o que avança fica em cima, ao alcance do polegar. */
  .ac-cart-drawer__actions {
    grid-template-columns: 1fr;
  }

  .ac-cart-drawer__actions .ac-btn--primary {
    order: -1;
  }
}

/* =========================================================================
 * 18. Preferências do sistema
 * ====================================================================== */

/*
 * `prefers-reduced-motion`: some o DESLOCAMENTO, fica o feedback de estado.
 * Zerar tudo tiraria o spinner e o cliente perderia o único sinal de que o
 * pagamento está sendo processado (§9.5).
 */
@media (prefers-reduced-motion: reduce) {
  .ac-store *,
  .ac-store *::before,
  .ac-store *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* O crescimento do ícone é deslocamento pelo deslocamento: sem ele a cor
     ainda diz tudo o que precisa ser dito. */
  .ac-icon-btn:hover .ac-icon,
  .ac-badge-link:hover .ac-icon,
  .ac-icon-btn:focus-visible .ac-icon,
  .ac-badge-link:focus-visible .ac-icon {
    transform: none;
  }

  .ac-occasion--foto:hover::before {
    transform: none;
  }

  .ac-btn.is-busy::after,
  .ac-quiz__pulse,
  .ac-skeleton {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }

  .ac-rail {
    scroll-snap-type: none;
  }
}

@media (forced-colors: active) {
  .ac-size[aria-checked='true'],
  .ac-variant[aria-checked='true'],
  .ac-option[aria-checked='true'] {
    forced-color-adjust: none;
    border: 2px solid SelectedItem;
  }
}

@media print {
  .ac-header,
  .ac-mheader,
  .ac-footer,
  .ac-whats,
  .ac-sticky-buy,
  .ac-toasts {
    display: none !important;
  }
}

/* =========================================================================
 * Oferta de saída
 *
 * O modal é criado pelo JavaScript e só existe quando o motor autoriza. Não há
 * estado "fechado" para estilizar: quando o elemento está na página, ele está
 * aberto.
 * ====================================================================== */

.ubs-saida {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 26, 23, 0.42);
  backdrop-filter: blur(3px);
  animation: ubs-saida-fundo 0.18s ease-out;
}

.ubs-saida__caixa {
  width: min(420px, 100%);
  padding: 36px 32px 28px;
  text-align: center;
  background: var(--ac-bg);
  border: 1px solid var(--ac-border);
  box-shadow: 0 24px 64px -28px rgba(28, 26, 23, 0.45);
  animation: ubs-saida-caixa 0.24s var(--ac-ease);
}

.ubs-saida__caixa h2 {
  margin: 0 0 10px;
  font-family: var(--ac-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ac-ink);
}

.ubs-saida__caixa p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-ink-soft);
}

/* O código é para ser lido e digitado: monoespaçado não, mas espaçado sim. */
.ubs-saida__codigo {
  padding: 12px 16px;
  font-family: var(--ac-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ac-gold);
  background: var(--ac-surface);
  border: 1px dashed var(--ac-gold-soft);
}

.ubs-saida__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

/*
 * A CONDIÇÃO e o AVISO não declaram `display`.
 *
 * Os dois são escondidos por `hidden` a partir do script, e `<p>` já é bloco:
 * uma declaração aqui teria a mesma especificidade da folha do navegador e
 * venceria o atributo, deixando na tela um texto que ninguém pediu.
 */
.ubs-saida__regra {
  margin: -8px 0 16px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-gold-2);
}

.ubs-saida__nota {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-ink-soft);
}

.ubs-saida__erro {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-danger);
}

.ubs-saida__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* O campo alinha ao centro porque a caixa inteira é centrada: alinhado à
   esquerda, ele seria o único elemento fora do eixo. */
.ubs-saida__form .ac-field__input {
  text-align: center;
}

/*
 * O ACEITE é uma LINHA, e não um bloco centrado.
 *
 * Centralizado, um texto de duas linhas deixa a caixa de seleção flutuando no
 * meio da segunda; alinhada ao topo, ela fica ao lado da primeira palavra, que
 * é onde se procura por ela.
 */
.ubs-saida__aceite {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ac-muted);
  cursor: pointer;
}

.ubs-saida__aceite input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--ac-gold-2);
}

/* No formulário as ações já vêm dentro dele, com o mesmo respiro das outras. */
.ubs-saida__form .ubs-saida__acoes {
  margin-top: 8px;
}

@keyframes ubs-saida-fundo {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ubs-saida-caixa {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Quem pediu menos movimento continua vendo a oferta — ela só aparece. */
@media (prefers-reduced-motion: reduce) {
  .ubs-saida,
  .ubs-saida__caixa {
    animation: none;
  }
}

/* Pix por chave, com conferência manual ---------------------------------- */

.ac-pix {
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ac-pix__titulo {
  font: 300 26px/1.2 var(--ac-serif);
  margin: 0;
}

.ac-pix__nota {
  margin: 8px 0 0;
  font: 400 13px/1.6 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-pix__corpo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.ac-pix__qr {
  background: var(--ac-white);
  padding: 10px;
  border: 1px solid var(--ac-border);
  line-height: 0;
}

.ac-pix__chave {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
  flex: 1;
}

.ac-pix__rotulo {
  font: 400 10px/1 var(--ac-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/*
 * A CHAVE É MONOESPAÇADA e quebra em qualquer ponto: uma chave aleatória tem
 * 36 caracteres sem espaço, e sem `break-all` ela estoura a coluna. Em fonte
 * proporcional, zero e O se confundem — e o erro só aparece do outro lado,
 * como um Pix que não cai.
 */
.ac-pix__valor {
  font: 500 15px/1.5 var(--ac-mono, ui-monospace, monospace);
  word-break: break-all;
  padding: 12px 14px;
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-border);
  user-select: all;
}

.ac-pix__titular,
.ac-pix__instrucoes,
.ac-pix__ajuda,
.ac-pix__feedback {
  font: 400 12.5px/1.6 var(--ac-sans);
  color: var(--ac-muted);
  margin: 0;
}

.ac-pix__envio {
  border-top: 1px solid var(--ac-border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-pix__subtitulo {
  font: 500 13px/1.4 var(--ac-sans);
  margin: 0;
}

.ac-pix__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ac-pix__linha .ac-field__input {
  flex: 1;
  min-width: 220px;
}

.ac-pix__enviados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 400 12.5px/1.6 var(--ac-sans);
}

.ac-pix__enviados li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.ac-pix__enviados time {
  color: var(--ac-muted);
  font-size: 11.5px;
}

/* Nota da avaliação e o item único da devolução (D-108) ------------------ */

/*
 * A NOTA É UM GRUPO DE RÁDIOS, e não estrelas de JavaScript. Rádio nativo
 * funciona com teclado, com leitor de tela e sem script — estrelas desenhadas
 * com `<span>` e um `click` são bonitas e inalcançáveis para quem navega por
 * Tab, e a nota é o único campo obrigatório da janela.
 *
 * A ordem no HTML é de 5 para 1, e `row-reverse` a exibe de 1 para 5: assim o
 * primeiro do documento — o que o Tab alcança primeiro — é a nota mais alta,
 * que é a mais dada.
 */
.ac-rating-pick {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.ac-rating-pick__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--ac-border);
  background: var(--ac-white);
  font: 400 12.5px/1 var(--ac-sans);
  cursor: pointer;
}

.ac-rating-pick__opt:has(input:checked) {
  border-color: var(--ac-gold);
  background: var(--ac-surface);
}

/*
 * O ITEM ÚNICO da devolução é TEXTO, e não uma caixa marcada. Uma caixa que a
 * pessoa precisa marcar quando só existe uma opção é um passo que só serve
 * para ela esquecer.
 */
.ac-return__unico {
  margin: 0;
  font: 400 14px/1.5 var(--ac-sans);
}

.ac-return__unico .ac-meta {
  margin-left: 6px;
}

/* -------------------------------------------------------------------------
 * O que vem no kit
 *
 * Uma lista de links, e não cartões: o item é uma REFERÊNCIA — quem quer saber
 * do perfume abre a página dele. Cartões competiriam com o produto que está à
 * venda nesta página, que é o kit.
 * ---------------------------------------------------------------------- */

.ac-kit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}

/* Na coluna de compra a lista é uma coluna só: ali ela ocupa o lugar da
   escolha de tamanho, e duas colunas estreitas cortariam os nomes. */
.ac-kit--compra .ac-kit__list {
	grid-template-columns: 1fr;
}

.ac-kit__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.ac-kit__link:hover,
.ac-kit__link:focus-visible {
	border-color: var(--ac-border-strong);
	background: var(--ac-surface-2);
}

.ac-kit__img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--ac-surface-2);
}

/* Componente sem foto ganha a inicial: um quadrado vazio se lê como imagem que
   não carregou, e manda investigar o que não está quebrado. */
.ac-kit__img--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ac-serif);
	font-size: 20px;
	color: var(--ac-muted);
}

.ac-kit__nome {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ac-kit__nome em { font-style: normal; font-size: 13px; color: var(--ac-muted); }

.ac-kit__qtd {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--ac-muted);
}


/* =========================================================================
   Duvidas frequentes na página de ajuda

   O acordeao fica FORA do `.ac-prose`: a tipografia de texto corrido aplica
   margem a todo `h3` e a todo `div`, e o botão da pergunta herdaria um recuo
   que o desalinha do filete. Aqui ele fica com o espacamento da seção.
   ========================================================================= */

.ac-page__faq {
  margin-top: 54px;
  padding-top: 40px;
  border-top: 1px solid var(--ac-border);
}

.ac-page__faq > h2 {
  margin: 0 0 8px;
}

/* =========================================================================
   Capa e galeria da pagina (D-222)

   A capa ocupa a largura da coluna e tem teto de altura: uma foto vertical
   sem teto empurraria o texto para a terceira dobra. A galeria e uma grade
   quadrada com recorte pelo centro, que e onde o assunto de uma foto costuma
   estar.
   ========================================================================= */

.ac-page__capa {
  margin: 40px 0 0;
}

.ac-page__capa-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  background: var(--ac-surface);
}

.ac-page__galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.ac-page__galeria a {
  display: block;
  overflow: hidden;
  background: var(--ac-surface);
}

.ac-page__galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--ac-transition);
}

.ac-page__galeria a:hover img,
.ac-page__galeria a:focus-visible img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ac-page__galeria img {
    transition: none;
  }
}

@media (max-width: 600px) {
  .ac-page__galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* =========================================================================
   Formulario de contato

   Mesma moldura da seção de duvidas: filete acima, respiro igual. As duas são
   blocos que a página institucional acrescenta ao texto do gestor, e desenha-
   las diferente faria a de contato parecer de outro site.
   ========================================================================= */

.ac-page__contact {
  margin-top: 54px;
  padding-top: 40px;
  border-top: 1px solid var(--ac-border);
}

.ac-page__contact > h2 {
  margin: 0 0 22px;
}

.ac-contact {
  max-width: 680px;
}

/* A mensagem ocupa a largura toda e cresce. `resize: vertical` e não `both`:
   arrastar na horizontal estoura a coluna e não ha o que ganhar com isso. */
.ac-contact__text {
  min-height: 140px;
  padding: 14px 16px;
  font: 400 14.5px/1.7 var(--ac-sans);
  resize: vertical;
}

/* O botão e a alternativa lado a lado, e empilhados quando não cabem. O
   `mailto` e' o caminho de quem prefere escrever do próprio cliente de
   e-mail -- e o único que existe sem JavaScript. */
.ac-contact__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 22px;
}

.ac-contact__foot .ac-field__help {
  margin: 0;
}

/* =========================================================================
   Redes sociais do rodape
   ========================================================================= */

.ac-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/*
 * O alvo tem 34px, e não o tamanho do icone.
 *
 * Um icone de 18px e um alvo de 18px: no celular, errar o toque e a regra e
 * não a excecao. O quadrado em volta e o que torna a fileira utilizavel com o
 * polegar, e ele ainda separa visualmente uma rede da seguinte.
 */
.ac-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ac-on-dark);
  color: inherit;
  transition: border-color var(--ac-transition), color var(--ac-transition);
}

.ac-social__link:hover {
  border-color: var(--ac-gold-2);
  color: var(--ac-gold-2);
}

/* =========================================================================
   Loja fechada ao publico

   A tela e um documento inteiro, servido sem o tema e sem `wp_head()`. Ela
   compartilha os tokens e as fontes desta folha de proposito: fechada, a loja
   precisa continuar parecendo a loja.
   ========================================================================= */

.ac-offline {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--ac-bg);
  color: var(--ac-ink);
}

.ac-offline__caixa {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.ac-offline__logo {
  max-width: 220px;
  max-height: 110px;
  height: auto;
  margin: 0 auto 26px;
}

.ac-offline__marca {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
  color: var(--ac-ink);
}

/* A assinatura vem como `<img>` com largura fixa em atributo. O teto relativo
   e o que a segura no celular sem tirar dela a altura reservada. */
.ac-offline__marca img {
  max-width: min(220px, 70vw);
  height: auto;
}

.ac-offline__titulo {
  font-family: var(--ac-serif);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.12;
  margin: 0;
}

.ac-offline__sub {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--ac-muted);
}

.ac-offline__texto {
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ac-ink-soft);
}

.ac-offline__texto p { margin: 0 0 12px; }
.ac-offline__texto p:last-child { margin-bottom: 0; }
.ac-offline__texto a { color: var(--ac-gold); }

.ac-offline__prazo {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-border);
}

.ac-offline__quando {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/*
 * `display` ATRAS de `:not([hidden])`.
 *
 * A contagem nasce escondida pelo atributo e o script a revela. Com o
 * `display: flex` solto na classe, as duas regras empatam em especificidade --
 * e o autor vence a folha do navegador, entao o elemento ficaria visivel
 * apesar do atributo. E o D-33, evitado antes de doer: aqui não ha guarda de
 * `[hidden]` no fim da folha para resolver o empate, porque esta tela e
 * servida sem ela.
 */
.ac-offline__contagem:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.ac-offline__bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--ac-surface);
}

.ac-offline__bloco strong {
  font-family: var(--ac-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  /* Tabular: sem ela, o bloco dos segundos muda de largura a cada tique e a
     fileira inteira treme. */
  font-variant-numeric: tabular-nums;
}

.ac-offline__bloco small {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-offline__social {
  justify-content: center;
  margin-top: 30px;
  color: var(--ac-ink-soft);
}

.ac-offline .ac-social__link { border-color: var(--ac-border); }

.ac-offline__entrar {
  margin: 34px 0 0;
  font-size: 12px;
}

.ac-offline__entrar a {
  color: var(--ac-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-offline__entrar a:hover { color: var(--ac-ink); }

@media (max-width: 520px) {
  .ac-offline__bloco {
    min-width: 0;
    flex: 1 1 0;
    padding: 10px 4px;
  }

  .ac-offline__bloco strong { font-size: 22px; }
}

/* =========================================================================
 * Cancelar um pedido
 *
 * A VARIANTE DE RISCO existe para a acao sem volta, e só para ela. Ela não e
 * vermelha em repouso: uma listagem com um botão vermelho em cada linha puxa
 * o olho para o que ninguém veio fazer -- a cor entra na borda, e o
 * preenchimento fica para o toque, que e quando a decisao esta sendo tomada.
 * ====================================================================== */

.ac-btn--danger {
  border-color: var(--ac-danger);
  color: var(--ac-danger);
}

.ac-btn--danger:hover,
.ac-btn--danger:focus-visible {
  background: var(--ac-danger);
  border-color: var(--ac-danger);
  color: #fff;
}

/*
 * O AVISO DO QUE ACONTECE, dentro da janela.
 *
 * Ele não e um erro: e o texto que a decisao exige ler antes de ser tomada, e
 * por isso ele usa o fundo do tom de risco em vez da tinta cheia -- um
 * paragrafo inteiro em vermelho se lê como falha que já aconteceu.
 */
.ac-modal__aviso {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 2px solid var(--ac-danger);
  background: var(--ac-danger-bg);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ac-ink);
}

/*
 * O DESFECHO QUE NAO RECARREGA.
 *
 * Um pedido já pago vira ANALISE, e não cancelamento imediato: recarregar a
 * página mostraria o pedido ainda pendente, e quem acabou de pedir o
 * cancelamento concluiria que nada aconteceu -- que e exatamente o defeito
 * que esta janela veio desfazer.
 */
.ac-modal__feito {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--ac-success);
  background: var(--ac-success-bg);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ac-ink);
}

/* ---------- Diagnostico do pagamento (TEMPORARIO) ---------- */

/*
 * Ele só existe com `UBS_PAY_DEBUG` no wp-config e para quem entra no
 * painel. O desenho e deliberadamente seco: e uma leitura de maquina, e
 * parecer-se com o resto da loja faria alguem confundi-lo com conteúdo.
 *
 * MONOESPACADA porque o que se lê aqui e código de erro e nome de campo,
 * onde zero e O se confundem em fonte proporcional -- a mesma razao do
 * código de rastreio na tela do pedido.
 */
.ac-paydebug {
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--ac-border);
  border-radius: 4px;
  background: var(--ac-surface);
}

.ac-paydebug__titulo {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/*
 * Duas colunas: o rotulo cabe em 190px e o valor fica com o resto. Numa
 * coluna só, um código de erro longo empurraria o rotulo seguinte para
 * fora da leitura.
 */
.ac-paydebug__lista {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.ac-paydebug__lista dt {
  margin: 0;
  color: var(--ac-muted);
}

/*
 * `word-break` porque o valor pode ser uma frase de API sem espaco
 * nenhum, e sem ele ela estoura a coluna e some pela borda.
 */
.ac-paydebug__lista dd {
  margin: 0;
  color: var(--ac-ink);
  word-break: break-word;
}

.ac-paydebug__nota {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ac-muted);
}

@media (max-width: 599px) {
  .ac-paydebug__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ac-paydebug__lista dd {
    margin-bottom: 8px;
  }
}

/*
 * A LINHA DE LEITURA DO CEP (D-257).
 *
 * Com o CEP encontrado, rua, bairro, cidade e UF viram esta linha, e a tela
 * pede só o número e o complemento. Ela ocupa a linha inteira da grade: o
 * endereço é a coisa mais longa do formulário, e espremido numa coluna ele
 * quebra em quatro linhas.
 */
.ac-cep-resumo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 14px;
  background: var(--ac-surface);
  border-left: 2px solid var(--ac-gold);
}

.ac-cep-resumo__texto {
  margin: 0;
  flex: 1 1 220px;
  font: 400 14px/1.45 var(--ac-sans);
  color: var(--ac-ink);
}

/* Um link de texto: a ação primária do formulário é outra. */
.ac-cep-resumo__acao {
  padding: 0;
  border: 0;
  background: none;
  font: 400 12.5px/1.45 var(--ac-sans);
  color: var(--ac-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}


/* ---------- Entrada do cliente (1.87.0) ---------- */

/*
 * A entrada do cliente é UM cartão (D-277): entrar, ou criar a conta, no mesmo
 * lugar. Ele cabe na janela sem rolagem — os espaços são medidos para isso, e
 * a página não leva o respiro de rodapé (ela não tem nada abaixo do cartão).
 */
.ac-entrar {
  padding-top: 72px;
  max-width: 920px;
}

.ac-entrar--cartao {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: none;
  padding-top: 24px;
  padding-bottom: 24px;
}

/*
 * O cabeçalho da entrada é só a marca (D-278), com altura FIXA: é ela que a
 * conta abaixo desconta para o cartão ficar no meio da janela, qualquer que
 * seja a altura da tela. Com pouca altura, o cartão encosta no topo e a
 * página rola — melhor que cortar o formulário.
 */
.ac-entrada__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-bottom: 1px solid var(--ac-border);
  background: var(--ac-bg);
}

.ac-entrada__header .ac-logo {
  justify-content: center;
}

.ac-entrada__header ~ .ac-main .ac-entrar--cartao {
  box-sizing: border-box;
  min-height: calc(100svh - 96px);
}

.ac-store--sem-rodape:has(.ac-entrar--cartao) {
  padding-bottom: 0;
}

.ac-entrar__cartao {
  width: 100%;
  max-width: 420px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--ac-border-soft);
  box-shadow: 0 10px 30px rgba(28, 26, 23, 0.06);
}

.ac-entrar__painel .ac-eyebrow {
  margin: 0 0 6px;
  text-align: center;
}

.ac-entrar__titulo {
  margin: 0;
  font: 400 30px/1.1 var(--ac-serif);
  text-align: center;
}

/* A tela de criar a senha pelo link (D-272) ainda usa o bloco. */
.ac-entrar__bloco .ac-entrar__form {
  margin-top: 22px;
}

.ac-entrar__par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ac-entrar__troca {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ac-border-soft);
  text-align: center;
  font: 400 13.5px/1.5 var(--ac-sans);
}

.ac-entrar__troca p {
  margin: 0 0 2px;
  color: var(--ac-muted);
}

.ac-entrar__troca a {
  font-weight: 500;
  color: var(--ac-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-entrar__aviso {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--ac-gold);
  background: var(--ac-surface);
  font: 400 14px/1.5 var(--ac-sans);
}

/* A conta que nasceu com a compra, na tela de resultado (D-261). */
.ac-result__conta {
  /* Respiro embaixo: o histórico vem logo depois e colava nela (D-291). */
  margin: 22px auto 36px;
  max-width: 520px;
  padding: 12px 16px;
  border-left: 3px solid var(--ac-gold);
  background: var(--ac-surface);
  font: 400 14px/1.5 var(--ac-sans);
  text-align: left;
}

/* O convite do checkout para quem já tem conta (D-261). */
.ac-checkout-conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ac-border-soft);
  background: var(--ac-surface);
}

.ac-checkout-conta__texto {
  display: grid;
  gap: 2px;
  font: 400 13.5px/1.4 var(--ac-sans);
}

.ac-checkout-conta__texto span {
  color: var(--ac-muted);
}

.ac-checkout-conta .ac-btn {
  flex: none;
}

/* Entrar e Cadastrar lado a lado (D-262). */
.ac-checkout-conta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: none;
}

/* O cabeçalho do cadastro, no lugar do convite (D-262). */
.ac-checkout-cadastro__cabeca {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--ac-gold);
  background: var(--ac-surface);
  font: 400 13.5px/1.45 var(--ac-sans);
}

.ac-checkout-cadastro__cabeca span {
  color: var(--ac-muted);
}

.ac-checkout-cadastro__voltar {
  justify-self: start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ac-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* "Pagar depois" pesa menos que copiar o código: é a saída, e não a ação (D-262). */
.ac-payment-panel__depois {
  width: 100%;
}

.ac-payment-panel__depois-nota {
  margin-top: 10px;
  font-size: 12.5px;
}

@media (max-width: 559px) {
  .ac-checkout-conta {
    flex-direction: column;
    align-items: stretch;
  }
}

.ac-checkout-conta__nova {
  margin: 10px 0 18px;
}

@media (max-width: 559px) {
  .ac-entrar--cartao {
    padding-top: 16px;
  }

  .ac-entrada__header {
    height: 72px;
  }

  .ac-entrada__header .ac-logo img {
    width: 130px;
    height: auto;
  }

  .ac-entrada__header ~ .ac-main .ac-entrar--cartao {
    min-height: calc(100svh - 72px);
  }

  .ac-entrar__cartao {
    padding: 22px 18px;
  }
}

.ac-entrar__texto,
.ac-entrar__nota {
  margin: 10px 0 0;
  font: 400 14px/1.55 var(--ac-sans);
  color: var(--ac-muted);
}

.ac-entrar__form {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

/* No cartão os campos ficam mais baixos: é o que o faz caber sem rolagem. */
.ac-entrar__cartao .ac-entrar__form {
  margin-top: 18px;
}

.ac-entrar__cartao .ac-field__input {
  min-height: 44px;
  padding: 12px 14px;
}

.ac-entrar__cartao .ac-field__label {
  margin-bottom: 6px;
}

.ac-entrar__cartao .ac-field__help--error:empty {
  display: none;
}

/* A recusa fica no centro do cartão, e o endereço dela é um link (D-280). */
.ac-entrar__cartao .ac-field__help--error {
  text-align: center;
  line-height: 1.5;
}

.ac-entrar__cartao .ac-field__help--error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.ac-entrar__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ac-entrar__esqueci {
  font: 400 13px/1.4 var(--ac-sans);
  color: var(--ac-gold);
}

.ac-entrar__botao {
  width: 100%;
}

.ac-entrar__nota {
  margin-top: 26px;
  font-size: 13px;
}

/* Criar a senha pelo link do e-mail (D-272): um formulário só, na largura dele. */
.ac-senha-link {
  max-width: 480px;
}

.ac-senha-link .ac-entrar__botao {
  margin-top: 22px;
}

.ac-senha-link .ac-entrar__form .ac-entrar__botao {
  margin-top: 0;
}

/* =========================================================================
 * Conversar (D-271): as conversas por pedido à esquerda e o chat à direita.
 * A loja fala da esquerda e o cliente da direita — quem lê fica do lado de
 * quem escreve. O fio tem altura própria e rola: a página não cresce a cada
 * mensagem, e o campo de escrever continua à vista.
 * ====================================================================== */
.ac-conversa {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ac-conversa__lista {
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--ac-border);
  background: #fff;
}

.ac-conversa__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ac-border);
  color: var(--ac-ink);
  text-decoration: none;
}

.ac-conversa__item:last-child {
  border-bottom: 0;
}

.ac-conversa__item:hover {
  background: var(--ac-surface);
}

.ac-conversa__item[aria-current="page"] {
  background: var(--ac-surface);
  box-shadow: inset 3px 0 0 var(--ac-gold);
}

.ac-conversa__item-topo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.ac-conversa__item-topo time {
  flex: none;
  color: var(--ac-muted);
  font-size: 11.5px;
}

.ac-conversa__item-texto {
  overflow: hidden;
  color: var(--ac-muted);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ac-conversa__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ac-border);
  background: #fff;
}

.ac-conversa__cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ac-border);
  font-size: 14px;
}

.ac-conversa__fio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 420px;
  padding: 16px;
  overflow-y: auto;
  /* Dourado bem claro (D-274): com --ac-bg, o fundo da página, o fio sumia. */
  background: var(--ac-surface);
}

.ac-conversa__vazio {
  margin: auto;
  max-width: 320px;
  color: var(--ac-muted);
  font-size: 13px;
  text-align: center;
}

.ac-balao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.ac-balao.is-loja {
  align-self: flex-start;
  border: 1px solid var(--ac-border);
  border-top-left-radius: 2px;
  background: #fff;
}

.ac-balao.is-cliente {
  align-self: flex-end;
  border-top-right-radius: 2px;
  background: var(--ac-ink);
  color: #fff;
}

.ac-balao__autor {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .75;
}

.ac-balao__texto {
  overflow-wrap: anywhere;
}

.ac-balao__anexo {
  color: inherit;
  font-size: 12.5px;
  text-decoration: underline;
}

.ac-balao__anexo img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
}

.ac-balao__hora {
  align-self: flex-end;
  font-size: 11px;
  opacity: .65;
}

.ac-conversa__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ac-border);
}

.ac-conversa__texto {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  resize: vertical;
}

.ac-conversa__enviar {
  flex: none;
}

.ac-conversa__clipe {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ac-border);
  color: var(--ac-ink);
  cursor: pointer;
}

.ac-conversa__clipe:hover,
.ac-conversa__clipe:focus-within {
  border-color: var(--ac-gold);
  color: var(--ac-gold);
}

.ac-conversa__clipe input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ac-conversa__status {
  margin: 0;
  padding: 0 12px 10px;
}

@media (max-width: 760px) {
  .ac-conversa {
    grid-template-columns: 1fr;
  }

  .ac-conversa__lista {
    max-height: 220px;
  }

  .ac-conversa__fio {
    height: 360px;
  }
}

/* =========================================================================
   Preço sob consulta (D-305)

   A janela de pedir o preço: o produto e o tamanho no topo, o texto, e o
   campo de e-mail só para quem está sem conta.
   ========================================================================= */

/* Pedido de preço por WhatsApp (D-316): o segundo botão, abaixo do e-mail. */
/* Os dois botões do pedido de preço (D-316, D-318): ícone e caminho, lado a
   lado e na mesma altura. */
.ac-consulta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.ac-consulta__btn svg {
	flex: 0 0 auto;
}

.ac-consulta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
}

.ac-consulta__item strong {
  font: 500 19px/1.2 var(--ac-serif);
  color: var(--ac-ink);
}

.ac-consulta__item span {
  font: 500 12px/1.4 var(--ac-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-consulta__texto {
  margin: 0 0 16px;
}

.ac-consulta__conta {
  margin: 0 0 8px;
  color: var(--ac-ink-soft);
}

.ac-consulta__lgpd {
  margin-top: 12px;
}

/* Perfil olfativo na conta (D-332). Reaproveita os blocos do resultado do
   quiz; aqui só o que muda na coluna da conta. */
.ac-perfil__head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ac-border);
}

.ac-perfil__head .ac-quiz__attrs {
  justify-content: flex-start;
}

.ac-perfil__nome {
  margin: 14px 0 0;
  font: 300 clamp(30px, 3.4vw, 44px)/1.05 var(--ac-serif);
}

.ac-perfil__refazer {
  font: inherit;
  color: var(--ac-ink);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ac-quiz__composition.ac-perfil__composicao {
  padding: 28px 0 0;
}

/* -------------------------------------------------------------------------
 * A entrega que o cliente escolhe antes de pagar (D-384): o pedido que a loja
 * criou deixando a escolha para ele. Rádios de verdade, numa lista.
 * ---------------------------------------------------------------------- */
.ac-entrega-opcoes {
  display: grid;
  gap: 10px;
}

.ac-entrega-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ac-border);
  background: var(--ac-white);
  cursor: pointer;
}

.ac-entrega-opcao:has(input:checked) {
  border-color: var(--ac-ink);
}

.ac-entrega-opcao input {
  flex: none;
  accent-color: var(--ac-ink);
}

.ac-entrega-opcao__nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--ac-ink);
}

.ac-entrega-opcao__nome small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ac-muted);
}

.ac-entrega-opcao__preco {
  flex: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ac-ink);
  white-space: nowrap;
}

/* =========================================================================
 * Barra fixa do celular: WhatsApp | Loja (D-390)
 *
 * Ela existe no documento em toda largura e só é desenhada abaixo de 900px,
 * onde o cabeçalho vira o estreito. O corpo reserva a altura dela embaixo,
 * senão o fim da página ficaria atrás da barra, e publica a mesma medida em
 * `--unbox-fab-bottom`: o botão de consentimento, que é de outro plugin,
 * sobe acima dela sem saber que ela existe (D-158).
 *
 * O botão flutuante do WhatsApp some onde a barra aparece: seriam duas
 * portas para a mesma conversa, uma em cima da outra.
 * ========================================================================= */
.ac-mbar {
  display: none;
}

@media (max-width: 900px) {
  .ac-store--mbar {
    --ac-mbar-space: calc(60px + env(safe-area-inset-bottom, 0px));
    --unbox-fab-bottom: calc(var(--ac-mbar-space) + 12px);
    padding-bottom: var(--ac-mbar-space);
  }

  .ac-store--mbar.ac-store--sem-rodape {
    padding-bottom: calc(var(--ac-mbar-space) + 40px);
  }

  .ac-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ac-ink);
    border-top: 1px solid var(--ac-gold-2);
    box-shadow: 0 -8px 24px rgba(28, 26, 23, 0.16);
  }

  .ac-mbar--um {
    grid-template-columns: 1fr;
  }

  .ac-mbar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    color: var(--ac-bg);
    font: 500 12.5px/1 var(--ac-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .ac-mbar__item + .ac-mbar__item {
    border-left: 1px solid rgba(249, 246, 241, 0.18);
  }

  .ac-mbar__item svg {
    flex: none;
    color: var(--ac-gold-2);
  }

  .ac-mbar__item:active,
  .ac-mbar__item[aria-current='page'] {
    color: var(--ac-gold-2);
  }

  .ac-mbar__item:focus-visible {
    outline: 2px solid var(--ac-gold-2);
    outline-offset: -4px;
  }

  .ac-store--mbar .ac-whats {
    display: none;
  }

  .ac-store--mbar .ac-toasts {
    bottom: calc(var(--ac-mbar-space) + 16px);
  }
}

@media print {
  .ac-mbar {
    display: none !important;
  }
}