/* ==========================================================================
   componentes.css — peças reutilizáveis (header, botões, cards, formulários,
   rodapé, acordeão, lightbox, notificações)
   ========================================================================== */

/* ---------- Barra de avisos ---------- */
.barra-avisos {
  background: var(--grafite-900); color: #D8DEE8;
  font-size: var(--t-sm); text-align: center; padding: var(--e-2) var(--e-4);
}
.barra-avisos a { text-decoration: underline; text-underline-offset: 3px; }
.barra-avisos strong { color: var(--marca-400); }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
  transition: box-shadow var(--transicao), background var(--transicao);
}
.cabecalho--fixo { box-shadow: var(--sombra-2); }
.cabecalho__interno {
  height: var(--altura-header);
  display: flex; align-items: center; gap: var(--e-5);
  min-width: 0;
}
.cabecalho__logo { display: flex; align-items: center; flex: 0 0 auto; }
.cabecalho__logo img { height: 48px; width: auto; }
.cabecalho__logo .logo-claro { display: none; }
:root[data-tema="escuro"] .cabecalho__logo .logo-claro { display: block; }
:root[data-tema="escuro"] .cabecalho__logo .logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cabecalho__logo .logo-claro { display: block; }
  :root:not([data-tema="claro"]) .cabecalho__logo .logo-escuro { display: none; }
}

.menu { display: flex; gap: var(--e-1); margin-left: auto; }
.menu__link {
  padding: var(--e-2) var(--e-3); border-radius: var(--raio-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave);
  transition: color var(--transicao), background var(--transicao);
}
.menu__link:hover { color: var(--texto); background: color-mix(in srgb, var(--marca-500) 12%, transparent); }
.menu__link[aria-current="page"] { color: var(--texto); background: color-mix(in srgb, var(--marca-500) 18%, transparent); }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e-2); flex: none; }

.botao-icone {
  position: relative; flex: none;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio-pill);
  background: var(--fundo-elevado); cursor: pointer;
  transition: transform var(--transicao), border-color var(--transicao);
}
.botao-icone:hover { transform: translateY(-2px); border-color: var(--marca-500); }
.botao-icone__contador {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--marca-500); color: var(--sobre-marca);
  border-radius: var(--raio-pill); font-size: 11px; font-weight: 800;
}
.botao-menu { display: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 0.85rem 1.6rem; border-radius: var(--raio-pill);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  max-width: 100%; min-height: 44px; text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background var(--transicao), color var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao--primario { background: var(--marca-500); color: var(--sobre-marca); box-shadow: var(--sombra-marca); }
.botao--primario:hover { background: var(--marca-400); }
.botao--secundario { background: var(--fundo-elevado); color: var(--texto); border-color: var(--borda-forte); }
.botao--secundario:hover { border-color: var(--marca-500); }
.botao--fantasma { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.botao--whats { background: #22A45D; color: #fff; }
.botao--whats:hover { background: #1C8C4F; }
.botao--bloco { width: 100%; }
.botao--pequeno { padding: .55rem 1rem; font-size: var(--t-xs); }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  /* Coluna flexível: a imagem em cima e o rodapé (preço/ações) sempre colado
     embaixo, mesmo quando um cartão tem mais texto que o outro. */
  display: flex; flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover {
  /* Mini zoom, sem inclinação: o cartão fica estável para clicar nos botões. */
  transform: scale(1.015);
  border-color: color-mix(in srgb, var(--marca-500) 55%, var(--borda));
  box-shadow: var(--sombra-2);
}
@media (prefers-reduced-motion: reduce) { .cartao:hover { transform: none; } }

/* Cartão de produto */
.produto__midia { position: relative; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grafite-700); }
.produto__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.cartao:hover .produto__midia img { transform: scale(1.035); }
.produto__corpo { padding: var(--e-4); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--e-2); }
.produto__categoria { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marca-600); }
.produto__nome { font-size: var(--t-md); font-weight: 700; font-family: var(--fonte-titulo); }
.produto__desc { font-size: var(--t-sm); color: var(--texto-suave); }
.produto__rodape { margin-top: auto; padding-top: var(--e-3); display: grid; gap: .55rem; }
.produto__unidade { font-size: var(--t-xs); color: var(--texto-suave); }

/* Ações do cartão: botão "Adicionar" OU quantidade + remover */
.produto__acoes { display: flex; align-items: center; gap: var(--e-2); }
.produto__acoes .quantidade {
  flex: 1; justify-content: space-between; gap: 0;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pill); padding: 3px;
  background: var(--fundo);
}
.produto__acoes .quantidade button {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background var(--transicao);
}
.produto__acoes .quantidade button:hover { background: color-mix(in srgb, var(--marca-500) 22%, transparent); }
.produto__acoes .quantidade input {
  flex: 1; width: 100%; min-width: 44px; padding: 0;
  border: 0; background: transparent; text-align: center;
  font-weight: 700; font-size: var(--t-md);
}
.quantidade input::-webkit-outer-spin-button,
.quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantidade input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.botao-remover {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pill);
  background: var(--fundo); color: var(--texto-suave); cursor: pointer;
  transition: all var(--transicao);
}
.botao-remover:hover { color: var(--erro); border-color: var(--erro); background: color-mix(in srgb, var(--erro) 12%, transparent); }

/* Cartão que já está na lista */
.cartao--na-lista { border-color: var(--marca-500); }

/* Botão sem ação disponível (ex.: enviar lista vazia) */
.botao--desativado { opacity: .45; pointer-events: none; box-shadow: none; }

.selo {
  /* Fica embaixo porque as fotos do catálogo têm o nome do produto no topo. */
  position: absolute; bottom: var(--e-3); left: var(--e-3);
  padding: .3rem .7rem; border-radius: var(--raio-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--marca-500); color: var(--sobre-marca);
}
.selo--neutro { background: rgba(255,255,255,.9); color: var(--grafite-800); }
.selo--lista { left: auto; right: var(--e-3); background: var(--sucesso); color: #fff; }
.selo--neutro { bottom: auto; top: var(--e-3); }

/* Cartão de categoria */
.categoria {
  position: relative; display: block; padding: var(--e-5);
  border-radius: var(--raio-lg); background: var(--fundo-elevado);
  border: 1px solid var(--borda); overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.categoria::after {
  content: ""; position: absolute; inset: auto -40% -60% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--cor-categoria, var(--marca-500)) 0%, transparent 70%);
  opacity: .18; transition: transform var(--transicao-lenta);
}
.categoria:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); }
.categoria:hover::after { transform: scale(1.35); }
.categoria__icone {
  width: 52px; height: 52px; border-radius: var(--raio); display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor-categoria, var(--marca-500)) 18%, transparent);
  color: var(--cor-categoria, var(--marca-500)); margin-bottom: var(--e-4);
}
.categoria__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--e-2); }
.categoria__resumo { font-size: var(--t-sm); color: var(--texto-suave); }
.categoria__link { margin-top: var(--e-4); font-size: var(--t-sm); font-weight: 700; color: var(--marca-600); }

/* Cartão de serviço */
.servico { padding: var(--e-5); border-radius: var(--raio-lg); background: var(--fundo-elevado); border: 1px solid var(--borda); }
.servico__icone { font-size: 28px; margin-bottom: var(--e-3); }
.servico h3 { margin-bottom: var(--e-2); }
.servico ul { margin-top: var(--e-3); display: grid; gap: var(--e-2); }
.servico li { font-size: var(--t-sm); color: var(--texto-suave); padding-left: 1.3rem; position: relative; }
.servico li::before { content: "✓"; position: absolute; left: 0; color: var(--marca-500); font-weight: 800; }

/* Números / indicadores */
.indicador { text-align: center; }
.indicador__valor { font-family: var(--fonte-titulo); font-size: var(--t-2xl); font-weight: 700; color: var(--marca-500); line-height: 1; }
.indicador__rotulo { font-size: var(--t-sm); color: var(--texto-suave); margin-top: var(--e-2); }

/* Depoimentos */
.depoimento { padding: var(--e-5); border-radius: var(--raio-lg); background: var(--fundo-elevado); border: 1px solid var(--borda); }
.depoimento__texto { font-size: var(--t-md); font-style: italic; }
.depoimento__autor { margin-top: var(--e-4); font-weight: 700; font-size: var(--t-sm); }
.depoimento__papel { font-size: var(--t-xs); color: var(--texto-suave); }

/* ---------- Filtros / chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  padding: .5rem 1rem; border-radius: var(--raio-pill);
  border: 1px solid var(--borda-forte); background: var(--fundo-elevado);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: all var(--transicao);
}
.chip:hover { border-color: var(--marca-500); }
.chip[aria-pressed="true"] { background: var(--marca-500); border-color: var(--marca-500); color: var(--sobre-marca); }

/* ---------- Formulários ---------- */
.campo { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--fundo-elevado); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--marca-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-500) 20%, transparent);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo__ajuda { font-size: var(--t-xs); color: var(--texto-suave); }
.campo__erro { font-size: var(--t-xs); color: var(--erro); font-weight: 600; }
.campo--invalido input, .campo--invalido textarea, .campo--invalido select { border-color: var(--erro); }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.mel { position: absolute; width: 1px; height: 1px; overflow: hidden;
       clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; } /* honeypot antispam */

/* ---------- Acordeão (FAQ) ---------- */
.acordeao { border-bottom: 1px solid var(--borda); }
.acordeao__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-md); text-align: left;
}
.acordeao__sinal { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borda-forte); transition: transform var(--transicao), background var(--transicao); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal { transform: rotate(45deg); background: var(--marca-500); color: var(--sobre-marca); }
.acordeao__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transicao-lenta); }
.acordeao__painel > div { overflow: hidden; }
.acordeao__botao[aria-expanded="true"] + .acordeao__painel { grid-template-rows: 1fr; }
.acordeao__painel p { padding-bottom: var(--e-4); color: var(--texto-suave); max-width: var(--largura-texto); }

/* ---------- Lightbox da galeria ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: var(--e-5);
  background: rgba(8, 10, 14, .9); backdrop-filter: blur(6px);
}
.lightbox[open], .lightbox.ativo { display: grid; }
.lightbox img { max-height: 82vh; border-radius: var(--raio); box-shadow: var(--sombra-3); }
.lightbox__legenda { color: #fff; text-align: center; margin-top: var(--e-3); font-size: var(--t-sm); }
.lightbox__fechar { position: absolute; top: var(--e-5); right: var(--e-5); }

/* ---------- Painel de orçamento (drawer) ---------- */
.painel {
  position: fixed; top: 0; right: 0; z-index: 150;
  width: min(420px, 100%); height: 100dvh;
  background: var(--fundo-elevado); border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform var(--transicao-lenta);
}
.painel.aberto { transform: none; }
.painel__topo { display: flex; align-items: center; justify-content: space-between; padding: var(--e-4); border-bottom: 1px solid var(--borda); }
.painel__lista { flex: 1; overflow-y: auto; padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.painel__rodape { padding: var(--e-4); border-top: 1px solid var(--borda); display: grid; gap: var(--e-2); }
.item-orcamento { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e-3); align-items: center; }
.item-orcamento img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--raio-sm); }
.item-orcamento__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.item-orcamento__unidade { font-size: var(--t-xs); color: var(--texto-suave); }
.quantidade { display: flex; align-items: center; gap: var(--e-1); }
.quantidade button { width: 28px; height: 28px; border-radius: var(--raio-sm); border: 1px solid var(--borda-forte); background: var(--fundo); cursor: pointer; }
.quantidade input { width: 46px; text-align: center; padding: .25rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--fundo); }
.cortina { position: fixed; inset: 0; z-index: 140; background: rgba(8,10,14,.5); opacity: 0; pointer-events: none; transition: opacity var(--transicao); }
.cortina.ativa { opacity: 1; pointer-events: auto; }

/* ---------- Notificação (toast) ---------- */
.aviso-flutuante {
  position: fixed; left: 50%; bottom: 28px; z-index: 300;
  transform: translate(-50%, 140%);
  background: var(--grafite-800); color: #fff;
  padding: .9rem 1.4rem; border-radius: var(--raio-pill);
  font-size: var(--t-sm); font-weight: 600; box-shadow: var(--sombra-3);
  transition: transform var(--transicao-lenta);
}
.aviso-flutuante.visivel { transform: translate(-50%, 0); }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whats-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #22A45D; color: #fff;
  box-shadow: 0 12px 30px rgba(34,164,93,.4);
  transition: transform var(--transicao);
}
.whats-flutuante:hover { transform: scale(1.08) translateY(-2px); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite-900); color: #B9C0CC; padding-top: var(--e-8); }
.rodape a:hover { color: var(--marca-400); }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--e-6); padding-bottom: var(--e-7); }
.rodape__titulo { color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--e-4); }
.rodape__lista { display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.rodape__logo img { height: 46px; margin-bottom: var(--e-4); }
.rodape__base {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--e-4);
  display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between;
  font-size: var(--t-xs); color: #7F8899;
}
.redes { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.redes a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); transition: all var(--transicao); }
.redes a:hover { background: var(--marca-500); color: var(--sobre-marca); border-color: var(--marca-500); }

/* ---------- Trilha (breadcrumb) ---------- */
.trilha { font-size: var(--t-xs); color: var(--texto-suave); padding-top: var(--e-5); }
.trilha a:hover { color: var(--marca-600); }
.trilha span { margin-inline: .4rem; }

/* ---------- Responsivo ---------- */
/* O menu completo só cabe ao lado da marca e dos botões a partir de ~1180px.
   Abaixo disso ele vira menu sanfona, senão o cabeçalho estoura a largura. */
@media (max-width: 1180px) {
  .botao-menu { display: grid; }
  .menu {
    /* Ancorado no próprio cabeçalho (e não no topo da janela): assim abre
       logo abaixo dele, com ou sem a barra de avisos na frente. */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: var(--e-4);
    background: var(--fundo-elevado); border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-2);
    max-height: calc(100svh - var(--altura-header)); overflow-y: auto;
    clip-path: inset(0 0 100% 0); transition: clip-path var(--transicao-lenta);
  }
  .menu.aberto { clip-path: inset(0 0 0 0); }
  .menu__link { padding: var(--e-3); border-radius: var(--raio-sm); min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 960px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* No celular a barra de avisos fica só com o essencial */
  .oculto-mobile { display: none; }
  .barra-avisos { font-size: 0.78rem; padding-inline: var(--e-3); line-height: 1.4; }
  /* Área de toque: botões principais com 44px, links de apoio com no mínimo
     os 24px que a WCAG 2.2 pede. */
  .redes a { width: 44px; height: 44px; }
  .rodape__lista { gap: var(--e-1); }
  .rodape__lista a, .rodape__lista span { display: flex; align-items: center; min-height: 40px; }
  .barra-avisos a, .rodape__base a { display: inline-block; padding-block: .35rem; }
  .acordeao__botao { min-height: 52px; }
  .chip { min-height: 40px; }
  .filtros__opcao { min-height: 36px; }
  .filtros__opcao input { width: 18px; height: 18px; }
  .trilha a { display: inline-block; padding-block: .3rem; }
}
@media (max-width: 560px) {
  .rodape__grade { grid-template-columns: 1fr; }
  .campo-duplo { grid-template-columns: 1fr; }
  .cabecalho__interno { gap: var(--e-2); }
  .cabecalho__logo img { height: 40px; }
  /* O botão de orçamento sai do topo: o ícone de lista e o botão flutuante
     do WhatsApp já cobrem essa ação em telas pequenas. */
  .cabecalho__acoes .botao--primario { display: none; }
  .botao-icone { width: 44px; height: 44px; }
  .painel { width: 100%; }
  .item-orcamento { grid-template-columns: 48px 1fr; row-gap: var(--e-2); }
  .item-orcamento img { width: 48px; height: 48px; }
  .item-orcamento .quantidade { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  /* Telas bem pequenas (iPhone SE e afins): tipografia dos avisos encolhe
     para a barra do topo e o selo do herói caberem numa linha só. */
  .barra-avisos { font-size: 0.7rem; }
  .heroi__selo { font-size: 0.68rem; padding-inline: .7rem; }
}
@media (max-width: 420px) {
  /* Cabeçalho: a marca encolhe para os três botões caberem com área de toque. */
  .cabecalho__logo img { height: 28px; }
  .cabecalho__acoes { gap: var(--e-1); }
  /* Rótulos longos passam a quebrar em vez de estourar a largura da tela. */
  .botao { white-space: normal; padding-inline: 1.15rem; }
  .aviso-flutuante { width: calc(100% - 2rem); text-align: center; }
  .whats-flutuante { right: 14px; bottom: 14px; }
}

/* Logo da Guslim (horizontal, proporção ~5,3:1): o maior tamanho que ainda
   deixa os três botões do topo com 44px de toque em cada largura de iPhone. */
@media (max-width: 420px) { .cabecalho__logo img { height: 34px; } }
@media (min-width: 380px) and (max-width: 420px) { .cabecalho__logo img { height: 38px; } }
@media (max-width: 359px) { .cabecalho__logo img { height: 26px; } }


/* ==========================================================================
   Grade de produtos no celular: 2 cards pequenos por linha (estilo loja/app).
   Antes era 1 card por linha e a foto ocupava a tela inteira do iPhone.
   ========================================================================== */
.grade--produtos { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
@media (max-width: 700px) {
  .grade--produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade--produtos .cartao { border-radius: 14px; }
  .grade--produtos .produto__corpo { padding: 9px 10px 10px; gap: 3px; }
  .grade--produtos .produto__categoria { font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grade--produtos .produto__nome {
    font-size: 13.5px; line-height: 1.25; min-height: 2.5em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .grade--produtos .produto__desc { display: none; }
  .grade--produtos .produto__rodape { padding-top: 4px; gap: 8px; }
  .grade--produtos .produto__unidade { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grade--produtos .produto__acoes { gap: 5px; }
  .grade--produtos .produto__acoes .botao { min-height: 42px; padding-inline: .5rem; font-size: 13px; gap: 5px; white-space: nowrap; }
  .grade--produtos .produto__acoes .quantidade { padding: 2px; }
  .grade--produtos .produto__acoes .quantidade button { width: 30px; height: 36px; font-size: 18px; }
  .grade--produtos .produto__acoes .quantidade input { min-width: 22px; font-size: 15px; }
  .grade--produtos .botao-remover { width: 36px; height: 36px; }
  .grade--produtos .selo { bottom: 6px; left: 6px; padding: .2rem .5rem; font-size: 9px; }
  .grade--produtos .selo--lista { left: auto; right: 6px; }
  .grade--produtos .selo--neutro { bottom: auto; top: 6px; }
  .so-tela-larga { display: none; }
}

/* Rótulo da categoria no tema escuro: vermelho claro para dar leitura. */
:root[data-tema="escuro"] .produto__categoria { color: var(--marca-400); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .produto__categoria { color: var(--marca-400); }
}