/* ==========================================================================
   CATÁLOGO DE CESTINHAS — folha de estilo única
   Tudo comentado em português. Mobile-first: o padrão é o celular,
   e no final do arquivo estão os ajustes para telas maiores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PALETA DA LOJA
   --------------------------------------------------------------------------
   Verde-garrafa sobre um fundo quase branco, e UMA cor só. Saiu de uma
   pesquisa em nove lojas brasileiras de cestas e box de presente
   (30/09/2026): todas usam fundo branco, e o verde é uma das cores de marca
   que mais se repetem (InterCestas, Presente na Cesta, Espaço Nuvem).
   Botões, preço e selo de destaque são do mesmo verde. (Um vinho no preço
   foi testado e saiu: com duas cores, a loja parecia ter duas identidades.)

   PARA DAR A COR DE OUTRA CLIENTE: troque as linhas deste bloco. Os fundos
   translúcidos são calculados a partir delas (color-mix). Só três desenhos
   pequenos levam a cor escrita dentro deles, porque desenho embutido não lê
   variável de CSS — procure por "COR ESCRITA NO DESENHO" neste arquivo.
   -------------------------------------------------------------------------- */
:root {
  --cor-fundo: #f5f6f1;           /* quase branco, puxado para o verde — fundo da página */
  --cor-superficie: #ffffff;      /* cards das cestinhas, cabeçalho */
  --cor-capa: #e4ebe0;            /* fundo do topo da vitrine */
  --cor-primaria: #3e5b43;        /* verde-garrafa — marca, ícones, detalhes */
  --cor-primaria-escura: #2e4533; /* botões com texto branco */
  --cor-primaria-hover: #22362a;  /* o mesmo botão com o mouse em cima */
  --cor-primaria-suave: #dfe7da;  /* etiquetas, fundos de destaque */
  --cor-texto: #26302a;           /* quase preto, puxado para o verde — texto de leitura */
  --cor-texto-suave: #5b665e;     /* texto secundário, legendas */
  --cor-borda: #d9dfd3;

  /* Botões cheios (o principal, o chip escolhido, o selo de destaque). Numa
     paleta de botão escuro, o texto é branco; numa de botão pastel, o texto
     é escuro — por isso as três andam juntas. Contraste do texto sobre o
     botão: no mínimo 4,5:1. */
  --cor-botao: var(--cor-primaria-escura);
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: var(--cor-primaria-hover);

  /* Cores de estado (painel). A cor NUNCA vai sozinha: sempre acompanha
     sinal, ícone ou palavra. */
  --cor-positivo: #3f7a3a;
  --cor-negativo: #6b2419;

  /* Cantos arredondados */
  --raio: 16px;
  --raio-p: 10px;

  /* Sombras na cor do texto, com opacidade baixa — nunca cinza-azulado */
  --sombra: 0 1px 2px rgba(38, 48, 42, .05), 0 6px 18px rgba(38, 48, 42, .07);
  --sombra-forte: 0 10px 34px rgba(38, 48, 42, .16);

  /* Tipografia: fonte com personalidade nos títulos, legível no corpo.
     Sempre com fallback do sistema, caso o Google Fonts não carregue. */
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --largura: 1080px;

  /* Tema claro único — sem modo escuro. */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2) RESET E BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--cor-primaria-escura); }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-texto);
  line-height: 1.2;
  margin: 0 0 .4em;
  font-weight: 700;
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 18px;
}

.escondido { display: none !important; }

/* Texto visível só para leitores de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3) CABEÇALHO
   -------------------------------------------------------------------------- */
.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 30;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  text-decoration: none;
  color: var(--cor-texto);
  min-width: 0;
}

.marca__logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-primaria-suave);
  flex: 0 0 auto;
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cor-primaria);   /* nome da loja em verde: título grande, 6:1 ou mais */
  line-height: 1.15;
  /* Deixa o nome quebrar em até 2 linhas em vez de cortar com "..."
     (min-width:0 é o que permite ao flex encolher o bloco e quebrar a linha) */
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu { display: flex; gap: 6px; flex: 0 0 auto; }

/* padding generoso: no celular o dedo precisa de pelo menos 44px de altura */
.menu a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 999px;
}

.menu a:hover { background: var(--cor-primaria-suave); color: var(--cor-texto); }
.menu a[aria-current="page"] { background: var(--cor-primaria-suave); color: var(--cor-texto); }

/* --------------------------------------------------------------------------
   5) BUSCA E FILTROS
   -------------------------------------------------------------------------- */
.filtros {
  display: grid;
  gap: 10px;
  margin: 22px 0 8px;
}

.campo-busca { position: relative; }

.campo-busca svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--cor-primaria);
  pointer-events: none;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="search"] { padding-left: 42px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}

textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

/* Campo de subir foto. Sem isto o navegador desenha um controle cru de 21px
   de altura — dificil de acertar no celular e destoando do resto do painel. */
input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 11px 12px;
}

input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--cor-botao-texto);
  background: var(--cor-botao);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  margin-right: 12px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--cor-botao-hover); }

/* COR ESCRITA NO DESENHO: a setinha usa a --cor-primaria (%233e5b43 = #3e5b43). */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5b43' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

/* Chips de categoria */
.categorias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}

.chip:hover { border-color: var(--cor-primaria); color: var(--cor-texto); }

.chip[aria-pressed="true"] {
  background: var(--cor-botao);
  border-color: var(--cor-botao);
  color: var(--cor-botao-texto);
}

.contagem {
  color: var(--cor-texto-suave);
  font-size: .85rem;
  margin: 4px 0 14px;
}

/* --------------------------------------------------------------------------
   6) GRADE DE CESTINHAS
   -------------------------------------------------------------------------- */
.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 0 40px;
  list-style: none;
  margin: 0;
}

/* Faz o cartão ocupar toda a altura da linha, para os preços ficarem
   alinhados mesmo quando um nome ocupa duas linhas e o outro só uma. */
.grade > li { display: flex; }
.grade > li > .cartao { width: 100%; }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.cartao:active { transform: translateY(0); }

/* Proporção fixa: a vitrine nunca desalinha, mesmo com fotos de tamanhos diferentes */
.cartao__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cor-primaria-suave);
  overflow: hidden;
}

.cartao__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cartao__corpo {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.cartao__categoria {
  font-size: .75rem;   /* 12px: abaixo disso fica dificil de ler no celular */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.cartao__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

.cartao__preco {
  margin-top: auto;
  padding-top: 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-primaria-escura);   /* preço em destaque: verde, grande e negrito */
  font-family: var(--fonte-titulo);
}

.cartao__preco small {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .68rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Selo de destaque */
.selo {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 4px;
}

/* Foto ausente: placeholder bonito na paleta da marca (nunca imagem quebrada).
   COR ESCRITA NO DESENHO: a cestinha usa a --cor-primaria (%233e5b43). */
.foto-vazia {
  width: 100%; height: 100%;
  background-color: var(--cor-primaria-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233e5b43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
}

/* Esqueleto enquanto os dados e as fotos carregam */
.esqueleto {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-p);
  position: relative;
  overflow: hidden;
}

.esqueleto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: brilho 1.4s infinite;
}

@keyframes brilho { 100% { transform: translateX(100%); } }

.cartao-esqueleto { pointer-events: none; }
.cartao-esqueleto .linha { height: 12px; margin-bottom: 8px; }
.cartao-esqueleto .linha.curta { width: 55%; }

@media (prefers-reduced-motion: reduce) {
  .esqueleto::after { animation: none; }
  .cartao { transition: none; }
}

/* Estado vazio (busca sem resultado) */
.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
}

.vazio strong { display: block; color: var(--cor-texto); font-size: 1.05rem; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   7) BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  line-height: 1.2;
}

/* Botão principal: fundo e texto vêm das variáveis de botão do :root, que
   garantem juntas o contraste (botão escuro + texto branco, ou botão pastel +
   texto escuro). */
.botao--principal {
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  box-shadow: var(--sombra);
}
.botao--principal:hover { background: var(--cor-botao-hover); }
.botao--principal:active { transform: scale(.985); }

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}
.botao--secundario:hover { border-color: var(--cor-primaria); }

.botao--perigo { background: #fff; color: #8a3324; border-color: #e2c3bb; }
.botao--perigo:hover { background: #8a3324; color: #fff; border-color: #8a3324; }

.botao--bloco { width: 100%; }
.botao--pequeno { font-size: .85rem; padding: 12px 16px; gap: 6px; }

.botao svg { width: 20px; height: 20px; flex: 0 0 auto; }
.botao--pequeno svg { width: 16px; height: 16px; }

.botao[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   8) PÁGINA DA CESTINHA
   -------------------------------------------------------------------------- */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;          /* area de toque confortavel */
  margin: 8px 0 4px;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.voltar:hover { color: var(--cor-primaria-escura); }
.voltar svg { width: 16px; height: 16px; }

/* A folga para a barra fixa do WhatsApp fica no rodapé (.com-barra-fixa),
   não aqui — senão sobra um vazio grande no fim da página no celular. */
.produto { padding-bottom: 28px; }

.produto__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-primaria-suave);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra);
}
.produto__foto img { width: 100%; height: 100%; object-fit: cover; }

.produto__categoria {
  display: inline-block;
  background: var(--cor-primaria-suave);
  color: var(--cor-texto);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 18px 0 10px;
}

.produto h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); margin-bottom: .2em; }

.produto__preco {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cor-primaria-escura);   /* preço em verde, como no card da vitrine */
  margin: 6px 0 14px;
}
.produto__preco span {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: -2px;
}

.produto__descricao { color: var(--cor-texto-suave); font-size: 1.03rem; }



/* Lista do que vem dentro */
.bloco {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 20px;
  margin: 22px 0;
  box-shadow: var(--sombra);
}

.bloco h2 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.bloco h2 svg { width: 22px; height: 22px; color: var(--cor-primaria); flex: 0 0 auto; }

.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.itens li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 1rem;
  color: var(--cor-texto);
}

/* COR ESCRITA NO DESENHO: o tique usa a --cor-primaria-escura (%232e4533). */
.itens li::before {
  content: "";
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--cor-primaria-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4533' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* Botão do WhatsApp que aparece só no computador, junto do preço */
.cta-computador { display: none; margin: 24px 0 6px; }

/* Barra fixa do WhatsApp no celular */
.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--cor-fundo);   /* navegador sem color-mix: fundo cheio */
  background: color-mix(in srgb, var(--cor-fundo) 93%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cor-borda);
}
.barra-fixa .container { padding: 0; }

/* --------------------------------------------------------------------------
   9) PÁGINA DE REGRAS
   -------------------------------------------------------------------------- */
.texto-longo { max-width: 62ch; padding-bottom: 50px; }
.texto-longo h2 { font-size: 1.2rem; margin-top: 28px; color: var(--cor-primaria); }
.texto-longo p { color: var(--cor-texto-suave); }
.texto-longo ul { padding-left: 20px; color: var(--cor-texto-suave); }
.texto-longo li { margin-bottom: 7px; }

.destaque-horario {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cor-primaria-suave);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin: 22px 0;
}
.destaque-horario svg { width: 24px; height: 24px; color: var(--cor-primaria-escura); flex: 0 0 auto; margin-top: 2px; }
.destaque-horario strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); }

/* --------------------------------------------------------------------------
   10) RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding: 30px 0 34px;
  margin-top: 30px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}
.rodape a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 10px 6px;        /* area de toque confortavel no celular */
}
.rodape a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }
.rodape__links { display: flex; gap: 2px 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.rodape__discreto { font-size: .78rem; opacity: .65; margin-top: 6px; }
.rodape__discreto a { padding: 12px 6px; }

/* Na pagina da cestinha, a barra fixa do WhatsApp flutua por cima de tudo.
   Sem esta folga ela cobria os links e o horario do rodape quando a
   cliente rolava ate o fim. */
.com-barra-fixa .rodape {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   11) AVISOS, TOASTS E MODAL
   -------------------------------------------------------------------------- */

/* Aviso discreto de "modo demonstração" — aparece só para o desenvolvedor */
.aviso-dev {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 35;              /* fica ATRÁS da barra do WhatsApp (z-index 40) */
  pointer-events: none;     /* nunca rouba o toque de um botão */
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: .75rem;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: var(--sombra-forte);
  opacity: .9;
  max-width: calc(100vw - 24px);
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: 90;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: var(--sombra-forte);
  font-weight: 600;
  font-size: .93rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.aparece { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--erro { background: #8a3324; color: #fff; }

/* Modal de confirmação (usado antes de excluir) */
.fundo-modal {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(38, 48, 42, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  padding: 26px 22px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--sombra-forte);
  text-align: center;
}
.modal h3 { font-size: 1.2rem; }
.modal p { color: var(--cor-texto-suave); margin-bottom: 20px; }
.modal__acoes { display: flex; gap: 10px; }
.modal__acoes .botao { flex: 1; }

/* --------------------------------------------------------------------------
   12) ADMIN
   -------------------------------------------------------------------------- */
.painel { padding-top: 24px; padding-bottom: 70px; }
/* Só em cima e embaixo: o respiro dos lados é o do .container (18px no
   celular, 24px a partir de 640px). O "padding: 24px 0 70px" que estava
   aqui zerava os lados, e no celular o painel inteiro encostava na borda. */

.login-caixa {
  max-width: 400px;
  margin: 40px auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 30px 24px;
  box-shadow: var(--sombra);
}
.login-caixa h1 { font-size: 1.5rem; text-align: center; }
.login-caixa > p { text-align: center; color: var(--cor-texto-suave); margin-top: 0; font-size: .95rem; }

.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cor-texto);
  margin-bottom: 5px;
}
.campo .ajuda { font-size: .78rem; color: var(--cor-texto-suave); margin: 5px 0 0; font-weight: 400; }

.mensagem-erro {
  background: #f7e7e3;
  color: #7d2f21;
  border-radius: var(--raio-p);
  padding: 11px 14px;
  font-size: .9rem;
  margin-bottom: 14px;
}

.link-texto {
  background: none; border: none;
  color: var(--cor-primaria-escura);
  font-family: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; padding: 11px 10px; text-decoration: underline;
}

/* Abas do painel */
.abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 22px;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
  padding: 11px 13px;
  cursor: pointer;
}
.aba[aria-selected="true"] { color: var(--cor-primaria-escura); border-bottom-color: var(--cor-primaria); }

.barra-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.barra-topo h2 { margin: 0; font-size: 1.3rem; }

/* Lista de cestinhas no admin */
.lista-admin { display: grid; gap: 10px; margin: 16px 0; }

.item-admin {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 10px;
  box-shadow: var(--sombra);
}
.item-admin.inativa { opacity: .58; }

.item-admin__foto {
  width: 58px; height: 58px;
  border-radius: 9px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--cor-primaria-suave);
}
.item-admin__foto img { width: 100%; height: 100%; object-fit: cover; }

.item-admin__info { flex: 1; min-width: 0; }
.item-admin__info strong { display: block; font-size: .98rem; line-height: 1.25; }
.item-admin__info span { font-size: .85rem; color: var(--cor-texto-suave); }

.item-admin__acoes { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* Celular: os botões descem para uma linha própria, embaixo do nome. Com
   foto + nome + cinco botões na mesma linha, sobravam ~27px para o nome, que
   virava uma palavra por linha, e a etiqueta "destaque" ia parar em cima de
   um botão. */
@media (max-width: 639px) {
  .item-admin { flex-wrap: wrap; row-gap: 10px; }
  .item-admin__info { flex: 1 1 calc(100% - 70px); }
  .item-admin--capa .item-admin__info { flex-basis: calc(100% - 90px); }
  .item-admin__info + .item-admin__acoes { flex: 1 1 100%; }
}

/* Lista das fotos do topo: miniatura no formato do cartão do site (4:5), e
   a foto que está na caixinha de enquadrar fica marcada. */
.item-admin--capa .item-admin__foto { width: 48px; height: 60px; }
.item-admin--capa[aria-current="true"] {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 1px var(--cor-primaria);
}

.botao-icone {
  /* 40px e o minimo para o dedo acertar. Vale para o admin inteiro:
     subir, descer, olhinho, editar, excluir e os meses do financeiro. */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 9px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 0;
}
.botao-icone svg { width: 17px; height: 17px; }
.botao-icone:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }
.botao-icone[disabled] { opacity: .35; cursor: not-allowed; }

.etiqueta {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-primaria-suave);
  color: var(--cor-texto);
  margin-left: 6px;
}
.etiqueta--off { background: var(--cor-fundo); color: var(--cor-texto-suave); box-shadow: inset 0 0 0 1px var(--cor-borda); }

/* Lista de itens da cestinha (dentro do formulário) */
.itens-editaveis { display: grid; gap: 7px; margin-bottom: 10px; }

.item-editavel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 8px 8px 8px 13px;
  font-size: .95rem;
}
.item-editavel span { flex: 1; min-width: 0; word-break: break-word; }

.linha-dupla { display: flex; gap: 8px; align-items: flex-start; }
.linha-dupla > *:first-child { flex: 1; }

/* Interruptor ativar/desativar
   ATENÇÃO ao seletor: a regra ".campo label" (display:block) lá em cima tem
   especificidade (0,1,1) e vencia ".interruptor" sozinha, que é (0,1,0).
   O label virava block, o trilho virava um span inline — e largura/altura não
   se aplicam a span inline, então o trilho sumia e sobrava só a bolinha.
   Por isso o seletor abaixo repete ".campo": assim ele ganha a disputa. */
.interruptor,
.campo label.interruptor {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
  position: relative;        /* segura o checkbox escondido dentro do label */
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 0;
}

.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

/* O texto ao lado do interruptor quebra linha em vez de estourar */
.interruptor > span:last-child { min-width: 0; }

.interruptor__trilho {
  display: block;            /* nunca inline: largura e altura precisam valer */
  width: 46px; height: 27px;
  border-radius: 999px;
  background: var(--cor-borda);
  position: relative;
  transition: background .18s ease;
  flex: 0 0 auto;
}
.interruptor__trilho::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(38, 48, 42, .3);
  transition: transform .18s ease;
}
.interruptor input:checked + .interruptor__trilho { background: var(--cor-primaria-escura); }
.interruptor input:checked + .interruptor__trilho::after { transform: translateX(19px); }
.interruptor input:focus-visible + .interruptor__trilho { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }

/* Pré-visualização */
.previa {
  background: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 16px;
}
.previa > h3 {
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cor-texto-suave);
  margin-bottom: 12px;
}
.previa .cartao { max-width: 230px; }

.previa-mensagem {
  background: #dcf8c6;
  color: #1b2a1b;
  border-radius: 12px 12px 12px 3px;
  padding: 11px 14px;
  font-size: .93rem;
  line-height: 1.45;
  max-width: 340px;
  box-shadow: var(--sombra);
  word-break: break-word;
}

.aviso-caixa {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-p);
  padding: 14px 16px;
  font-size: .9rem;
  color: var(--cor-texto);
  margin-bottom: 18px;
}
/* Só o PRIMEIRO negrito é título do aviso (fica na linha de cima). Um
   negrito no meio da frase continua no meio da frase — antes todo negrito
   caía numa linha sozinho e quebrava o texto. */
.aviso-caixa strong { display: inline; }
.aviso-caixa > strong:first-child { display: block; margin-bottom: 3px; }

.grupo-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.carregando-foto { font-size: .85rem; color: var(--cor-texto-suave); }

/* Celular bem estreito (iPhone SE e afins): 4px a menos de margem de cada
   lado fazem a diferença entre caber e rolar para o lado. */
@media (max-width: 359px) {
  .container { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   12.44) GRUPO RECOLHIVEL — os blocos que abrem e fecham no painel
   --------------------------------------------------------------------------
   Empilhados abertos, os assuntos do painel viravam uma rolagem sem fim.
   Cada um vira um grupo que mostra o titulo e um resumo; a dona abre so o
   que quer ver.
   -------------------------------------------------------------------------- */
.grupo {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-bottom: 12px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.grupo__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: 54px;
}
.grupo__topo::-webkit-details-marker { display: none; }
.grupo__topo:hover { background: var(--cor-fundo); }

.grupo__seta {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--cor-texto-suave);
  transition: transform .18s ease;
}
.grupo[open] > .grupo__topo .grupo__seta { transform: rotate(90deg); }

/* Titulo e resumo dividem a mesma linha. Se nao couber, o resumo cai para
   a linha de baixo — melhor que espremer o titulo em tres linhas. */
.grupo__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  flex-wrap: wrap;
}

.grupo__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
}

.grupo__resumo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cor-primaria);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grupo__resumo:empty { display: none; }

.grupo__corpo {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--cor-borda);
}

@media (prefers-reduced-motion: reduce) {
  .grupo__seta { transition: none; }
}

/* --------------------------------------------------------------------------
   12.46) ETIQUETAS DE CATEGORIA (painel)
   --------------------------------------------------------------------------
   Etiquetas que fluem lado a lado. Em linhas de largura inteira, sete
   categorias tomavam a tela toda. */
.tipos { display: flex; flex-wrap: wrap; gap: 8px; }

.tipo-chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;        /* o dedo precisa de 40px; sobra folga */
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
}

.tipo-chip__nome {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cor-texto);
  background: none;
  border: none;
  padding: 11px 6px 11px 15px;
  cursor: pointer;
  border-radius: 999px 0 0 999px;
}
.tipo-chip__nome:hover { color: var(--cor-primaria-escura); }

.tipo-chip__x {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  min-width: 40px;
  align-self: stretch;
  padding: 0 13px 0 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 0 999px 999px 0;
}
.tipo-chip__x svg { width: 13px; height: 13px; }
.tipo-chip__x:hover { color: var(--cor-negativo); }

/* Etiqueta virada em campo de texto, enquanto renomeia */
.tipo-chip--editando { padding: 3px; gap: 5px; border-color: var(--cor-primaria); }
.tipo-chip--editando input {
  width: 150px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--cor-superficie);
}
.tipo-chip--editando input:focus { box-shadow: none; }

.tipo-chip__ok {
  border: none;
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.tipo-chip__ok svg { width: 15px; height: 15px; }

/* A ultima etiqueta e o campo de adicionar: flui junto, sem linha extra */
.tipo-chip--novo { padding: 3px; gap: 5px; border-style: dashed; }
.tipo-chip--novo input {
  width: 128px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: .88rem;
  border-radius: 999px;
  background: var(--cor-superficie);
}
.tipo-chip--novo input:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   12.47) CAIXA DE AVISO (aba Backup)
   --------------------------------------------------------------------------
   O nome veio da calculadora de preço, que saiu com o estoque; a caixa ficou
   porque o backup usa. */
.calc-alerta {
  background: #f7e7e3;
  color: #7d2f21;
  border-radius: var(--raio-p);
  padding: 14px 16px;
  font-size: .92rem;
}

/* --------------------------------------------------------------------------
   12.5) AJUSTES DE CELULAR ESTREITO (ate 430px)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  /* O nome da loja JA leva para a vitrine. No celular estreito o link
     repetido do menu so roubava espaco e espremia o nome em 53px.
     Some com ele — "Como funciona" continua ali, que e o que nao tem
     outro caminho. No admin o menu e outro, entao nao e afetado. */
  .menu__vitrine { display: none; }

  .cabecalho__interno { gap: 8px; }
  .menu a { padding: 11px 10px; }
}

/* --------------------------------------------------------------------------
   13) TELAS MAIORES (tablet e computador)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .container { padding: 0 24px; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .filtros { grid-template-columns: 1fr 240px; align-items: center; }
  .categorias { grid-column: 1 / -1; }
  .marca__nome { font-size: 1.3rem; }
  .menu a { font-size: .95rem; padding: 8px 14px; }
  .bloco { padding: 26px; }
}

@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(4, 1fr); }

  /* Na página da cestinha, foto à esquerda e informações à direita */
  .produto {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-bottom: 60px;
  }
  .produto__coluna-foto { position: sticky; top: 90px; }
  .produto__categoria { margin-top: 0; }

  /* No computador, some a barra fixa e aparece o botão ao lado do preço */
  .barra-fixa { display: none; }
  .com-barra-fixa .rodape { padding-bottom: 34px; }   /* sem barra, sem folga */

  .cta-computador { display: block; }
  .cta-computador .botao { min-width: 290px; }

  .painel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
  .previa { position: sticky; top: 90px; }
}

/* --------------------------------------------------------------------------
   14) CELULAR: A PÁGINA DA CESTINHA CABENDO NA TELA
   --------------------------------------------------------------------------
   A foto era 4/5 ocupando a largura inteira: num celular de 390px isso dá
   437px de altura, mais de metade da tela só de foto, e o preço e o botão
   ficavam abaixo da dobra.

   O conserto NÃO é cortar mais a foto (recortar 4/5 em 4/3 comeria a cesta).
   É limitar a LARGURA a partir da altura que eu quero: com aspect-ratio 4/5,
   largura = altura x 0,8. Assim a foto encolhe inteira, centralizada, sem
   perder enquadramento nenhum.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .produto__foto {
    max-width: calc(42vh * 0.8);
    margin-inline: auto;
  }

  /* O resto da página também estava largo demais para a tela. */
  .produto__categoria { margin: 14px 0 8px; padding: 4px 10px; font-size: .72rem; }
  .produto h1 { font-size: clamp(1.35rem, 5.4vw, 1.75rem); }
  .produto__preco { font-size: 1.6rem; margin: 4px 0 10px; }
  .produto__descricao { font-size: .96rem; }
  .bloco { padding: 16px 14px; }
  .produto { padding-bottom: 18px; }
}

/* Celular deitado (ou tela baixa): 42vh vira quase nada. Aí mando pela
   largura mesmo, senão a foto some. */
@media (max-width: 899px) and (max-height: 520px) {
  .produto__foto { max-width: 220px; }
}

/* --------------------------------------------------------------------------
   15) A FOTO QUE ABRE
   --------------------------------------------------------------------------
   A foto da cestinha virou botão: tocar abre ela grande. Um <button> traz
   padding, borda e cor de fundo do navegador, e cada um alinha diferente —
   zerado aqui para ele ocupar exatamente o lugar da foto de antes.
   -------------------------------------------------------------------------- */

.produto__foto--abre {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  position: relative;
}

/* A dica de que dá para tocar. Pequena e no canto: grande, ela cobriria
   justamente a cestinha que a cliente quer ver. */
.produto__lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-superficie);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  color: var(--cor-texto);
  box-shadow: 0 2px 8px rgba(38, 48, 42, .18);
  pointer-events: none;
}
.produto__lupa svg { width: 17px; height: 17px; }

.produto__foto--abre:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
}

/* A foto grande por cima de tudo. */
.foto-grande {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 56px 12px 24px;
  background: rgba(16, 24, 19, .94);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .2s ease;
}
.foto-grande.aberta { opacity: 1; }

/* contain, não cover: aqui o ponto é ver a cestinha INTEIRA, sem corte. */
.foto-grande__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--raio-p);
}

.foto-grande__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.foto-grande__fechar svg { width: 22px; height: 22px; }
.foto-grande__fechar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .foto-grande { transition: none; }
}

/* --------------------------------------------------------------------------
   16) VÁRIAS FOTOS, ENQUADRAMENTO E VERSÕES DA CESTINHA
   --------------------------------------------------------------------------
   Desde 10/10/2026. As cores e as letras aqui são as do tema da loja
   (css/temas.css), então cada
   paleta e cada dupla de fonte vale para isto também.
   - Uma foto: igual a antes (tocar abre grande).
   - Duas ou mais: a cliente passa com o dedo (a rolagem do próprio navegador,
     que encaixa uma foto por vez), pelas miniaturas na LATERAL ou, no
     computador, pelas setas. Nada passa sozinho. Miniaturas, não bolinhas
     (Baymard: com bolinhas, metade das pessoas não percebe que há mais fotos).
     Na lateral porque embaixo elas empurrariam o preço para trás da barra do
     WhatsApp no celular.
   - O enquadramento que a dona escolhe no painel (o ponto e o quanto
     aproxima) vira duas variáveis: --foco e --zoom (js/util.js, estiloDaFoto).
   -------------------------------------------------------------------------- */

img.foto-enq {
  object-position: var(--foco, 50% 50%);
  transform-origin: var(--foco, 50% 50%);
  transform: scale(var(--zoom, 1));
}
/* O cartão da vitrine aproxima a foto quando o mouse passa (css/novo.css,
   1,05): aqui o aumento MULTIPLICA o zoom da dona, em vez de apagá-lo. Com
   "reduzir movimento", sai só o aumento; o enquadramento dela fica. */
.cartao__foto img.foto-enq { transform: scale(var(--zoom, 1)); }
.cartao:hover .cartao__foto img.foto-enq { transform: scale(calc(var(--zoom, 1) * 1.05)); }
@media (prefers-reduced-motion: reduce) {
  .cartao:hover .cartao__foto img.foto-enq { transform: scale(var(--zoom, 1)); }
}

.galeria {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}
.galeria .produto__foto { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.galeria__palco { position: relative; min-width: 0; grid-column: 2; grid-row: 1; }

.galeria__trilho {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  background: var(--cor-primaria-suave);
  box-shadow: var(--sombra);
}
.galeria__trilho::-webkit-scrollbar { display: none; }

.galeria__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* O trilho corta o que passa da borda, inclusive o contorno do foco: por
   padrão o anel vai por DENTRO da foto; onde existe :has(), vai para fora. */
.galeria .produto__foto--abre:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: -3px;
}
@supports selector(:has(a)) {
  .galeria .produto__foto--abre:focus-visible { outline: none; }
  .galeria__palco:has(.produto__foto--abre:focus-visible) {
    outline: 2px solid var(--cor-primaria-escura);
    outline-offset: 3px;
    border-radius: var(--raio);
  }
}

/* As setas: só onde existe mouse. No celular a cliente arrasta. */
.galeria__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  cursor: pointer;
  transition: opacity .25s ease;
}
.galeria__seta svg { width: 20px; height: 20px; }
.galeria__seta--antes { left: 10px; }
.galeria__seta--depois { right: 10px; }
/* Sem ter para onde ir, a seta some, mas continua botão (aria-disabled):
   quem chegou nela pelo teclado não perde o lugar. */
.galeria__seta[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.galeria__seta[aria-disabled="true"]:focus-visible { opacity: .55; }
@media (hover: none), (pointer: coarse) {
  .galeria__seta { display: none; }
}

/* As miniaturas: a escolhida ganha um anel por FORA, na cor da marca. A fila
   tem a altura da foto: com mais fotos do que cabem, ela rola. */
.galeria__miniaturas { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
.galeria__fila {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.galeria__fila::-webkit-scrollbar { display: none; }
.galeria__mini {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .2s ease;
}
.galeria__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__mini[aria-current="true"] { outline-color: var(--cor-primaria-escura); }
.galeria__mini:focus-visible { outline: 3px solid var(--cor-texto); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .galeria__mini:not([aria-current="true"]):hover { outline-color: var(--cor-borda); }
}

/* Celular: a foto com o mesmo tamanho de antes (38% da altura da tela, em
   4:5) e o par (miniaturas + foto) no meio da tela. */
@media (max-width: 899px) {
  .galeria {
    grid-template-columns: 52px minmax(0, calc(38vh * .8));
    justify-content: center;
  }
}
@media (max-width: 899px) and (max-height: 520px) {
  .galeria { grid-template-columns: 52px minmax(0, 220px); }
}
/* Computador: a coluna da foto ganha a largura das miniaturas, para a foto
   continuar com os 420 px de sempre (sem :has(), fica um pouco menor). */
@media (min-width: 900px) {
  .produto:has(.galeria) { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .galeria { grid-template-columns: 72px minmax(0, 420px); }
}

/* A FOTO GRANDE com várias fotos: um trilho de tela inteira. A grade com
   minmax(0, 1fr) impede a foto em pé de passar da janela no computador
   (conserto de 08/10/2026). */
.foto-grande { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.foto-grande--varias { padding: 0; place-items: stretch; }
.foto-grande__trilho {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.foto-grande__trilho::-webkit-scrollbar { display: none; }
.foto-grande__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 60px 12px 64px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.foto-grande__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Escuro: por cima de foto branca a seta clara sumiria. */
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
}
.foto-grande__seta svg { width: 24px; height: 24px; }
.foto-grande__seta--antes { left: 14px; }
.foto-grande__seta--depois { right: 14px; }
.foto-grande__seta[aria-disabled="true"] { opacity: .25; cursor: default; }
.foto-grande__seta[aria-disabled="true"]:focus-visible { opacity: .6; }
.foto-grande__seta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: none), (pointer: coarse) {
  .foto-grande__seta { display: none; }
}
.foto-grande__contador {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* AS VERSÕES (a mesma cestinha em outra cor de laço, outras flores): rádios
   de verdade por baixo, escondidos mas focáveis pelo teclado. O produto é a
   referência de posição da troca cruzada das fotos.
   "overflow-anchor: none": trocar a versão NÃO pode mexer na rolagem. Ao
   trocar as fotos, a âncora de rolagem do Chrome (o recurso que tenta segurar
   a página no lugar quando o conteúdo muda) mexia na posição: a página pulava
   uns 320 px e as versões iam parar atrás do cabeçalho. Medido em 11/10/2026
   no Chrome do computador, com a janela do tamanho de um celular: de 245 para
   568 px a cada troca; com esta regra, fica em 245. A regra só na coluna de
   fotos não resolveu; tem de ser no bloco inteiro. (Em celular Android e no
   Safari do iPhone NÃO CONFERI.) */
.produto { position: relative; overflow-anchor: none; }
.versoes { border: 0; margin: 14px 0 6px; padding: 0; min-width: 0; }
.versoes__rotulo {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--fonte-corpo);
  font-size: .92rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}
.versoes__rotulo strong { color: var(--cor-texto); font-weight: 700; }
.versoes__lista { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.versao__escolha {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
.versao {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  width: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.versao__foto {
  width: 56px;
  height: 56px;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
  box-shadow: 0 0 0 1px var(--cor-borda);
  transition: box-shadow .2s ease;
}
.versao__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.versao__nome {
  max-width: 100%;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  color: var(--cor-texto-suave);
  overflow-wrap: anywhere;
}
.versao__escolha:checked + .versao .versao__foto {
  box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 4px var(--cor-primaria);
}
.versao__escolha:checked + .versao .versao__nome { color: var(--cor-texto); font-weight: 700; }
.versao__escolha:focus-visible + .versao .versao__foto {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .versao__escolha:not(:checked) + .versao:hover .versao__foto { box-shadow: 0 0 0 1px var(--cor-primaria); }
}
.versoes__nota { margin: 10px 0 0; font-size: .9rem; color: var(--cor-texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .galeria__seta,
  .galeria__mini,
  .versao__foto { transition: none; }
}

/* --------------------------------------------------------------------------
   17) FILTRO DE PREÇO E MINIATURAS DAS VERSÕES NO CARTÃO
   --------------------------------------------------------------------------
   Desde 10/10/2026, com a cara da loja (as variáveis do tema, o mesmo campo
   e a mesma seta da seção 5).
   - O filtro: o funil na frente e a frase "Filtrar por preço" dizem o que
     ele é. Por baixo continua o select do navegador: no iPhone abre a roda
     do próprio aparelho. Ligado, a borda e o funil escurecem e aparece o
     "Limpar". As faixas vêm do js/vitrine.js (montarFaixas).
   - As miniaturas: a primeira foto de cada versão, redonda, no canto de
     baixo da foto do cartão, uma encostada na outra, com um aro da cor do
     cartão para descolar da foto.
   -------------------------------------------------------------------------- */
.filtro-preco {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.filtro-preco__campo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.filtro-preco select {
  padding-left: 42px;          /* o lugar do funil, como a lupa na busca */
  cursor: pointer;
  text-overflow: ellipsis;
}
.filtro-preco__icone {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--cor-primaria);
  pointer-events: none;
}
.filtro-preco--ligado select {
  border-color: var(--cor-primaria-escura);
  font-weight: 600;
}
.filtro-preco--ligado .filtro-preco__icone { color: var(--cor-primaria-escura); }
.filtro-preco__limpar {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: var(--raio-p);
  color: var(--cor-primaria-escura);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.filtro-preco__limpar:focus-visible {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}
/* Escondido de verdade: um "display" qualquer do CSS venceria o hidden. */
.filtro-preco__limpar[hidden] { display: none; }
/* No computador o filtro fica ao lado da busca, do tamanho do que ele diz
   (a coluna fixa de 240 px da seção 13 cortaria a frase com o
   "Limpar" do lado). */
@media (min-width: 640px) {
  .filtros { grid-template-columns: minmax(0, 1fr) auto; }
  .filtro-preco__campo { min-width: 240px; }
}

/* As regras do cartão ("a foto enche o cartão" e "aproxima com o mouse")
   pegariam estas imagens também: por isso os seletores mais compridos. */
.cartao__foto .versoes-pilha {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.cartao__foto .versoes-pilha img,
.cartao__foto .versoes-pilha__vazia,
.cartao__foto .versoes-pilha__mais {
  width: 30px;
  height: 30px;
  border: 2px solid var(--cor-superficie);
  border-radius: 50%;
  background: var(--cor-primaria-suave);
  object-fit: cover;
  transform: none;
  transition: none;
}
.cartao__foto .versoes-pilha > * + * { margin-left: -10px; }
.cartao__foto .versoes-pilha__mais {
  display: inline-grid;
  place-items: center;
  font-family: var(--fonte-corpo);
  font-size: .66rem;
  font-weight: 700;
  color: var(--cor-texto);
}
.cartao:hover .cartao__foto .versoes-pilha img { transform: none; }
@media (min-width: 700px) {
  .cartao__foto .versoes-pilha { left: 12px; bottom: 12px; }
  .cartao__foto .versoes-pilha img,
  .cartao__foto .versoes-pilha__vazia,
  .cartao__foto .versoes-pilha__mais { width: 32px; height: 32px; }
  .cartao__foto .versoes-pilha > * + * { margin-left: -11px; }
}

/* --------------------------------------------------------------------------
   18) PAINEL: FOTOS DA CESTINHA, ENQUADRAMENTO E VERSÕES
   --------------------------------------------------------------------------
   Desde 10/10/2026; as cores são as do tema.
   - As fotos numa fila (a primeira com a etiqueta "Capa") e, embaixo, o
     enquadramento da foto escolhida: a foto inteira com a moldura por cima
     (o mesmo gesto da foto do topo do site), a prévia do jeito que a cliente
     vê e a régua de aproximar.
   - As versões: uma aba por versão em cima das fotos (a miniatura da
     primeira foto e o nome; a aberta com um fio embaixo) e, logo abaixo, o
     nome e a frase da versão aberta. Tudo dentro do grupo "Fotos", sem caixa
     dentro de caixa.
   -------------------------------------------------------------------------- */
.fotos-cestinha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px;
  margin: -4px;
}
.fotos-cestinha__vazio { margin: 0; }

.foto-cesta {
  position: relative;
  width: 64px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .25s ease;
}
.foto-cesta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A escolhida: um anel por fora, na cor escura da marca. */
.foto-cesta[aria-current="true"] { outline-color: var(--cor-primaria-escura); }
.foto-cesta:focus-visible { outline: 3px solid var(--cor-texto); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .foto-cesta:not([aria-current="true"]):hover { outline-color: var(--cor-borda); }
}
.foto-cesta__capa {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--cor-texto);
  color: var(--cor-superficie);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
}

.enquadrar {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}
.enquadrar > .ajuda { margin: 0; }
.enquadrar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.enquadrar__topo strong { font-weight: 700; color: var(--cor-texto); }
.enquadrar__ordem { display: flex; gap: 6px; }
.enquadrar__ordem .botao-icone { width: 44px; height: 44px; }
.enquadrar__ordem .botao-icone svg { width: 20px; height: 20px; }
.enquadrar__ordem .botao-icone:disabled { opacity: .35; cursor: default; }

.enquadrar__area {
  display: grid;
  grid-template-columns: minmax(0, 340px) 112px;
  gap: 16px;
  align-items: start;
}

/* A foto inteira, com a moldura por cima: o que fica de fora escurece. */
.enquadrar__alvo {
  position: relative;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.enquadrar__alvo.arrastando { cursor: grabbing; }
.enquadrar__alvo:focus-visible { outline: 3px solid var(--cor-primaria-escura); outline-offset: 3px; }
.enquadrar__alvo img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: opacity .3s ease;
}
.enquadrar__alvo img.trocando { opacity: .35; }
.enquadrar__zona {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .52);
  outline: 2px solid #fff;
  outline-offset: -1px;
}
/* Os terços, bem finos: ajudam a pôr a cesta no lugar sem medir. */
.enquadrar__zona::before,
.enquadrar__zona::after {
  content: "";
  position: absolute;
  border: 0 solid rgba(255, 255, 255, .5);
}
.enquadrar__zona::before { inset: 0 33.333%; border-left-width: 1px; border-right-width: 1px; }
.enquadrar__zona::after  { inset: 33.333% 0; border-top-width: 1px; border-bottom-width: 1px; }

.enquadrar__previa {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}
.enquadrar__moldura {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.enquadrar__moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enquadrar__previa figcaption { font-size: .8rem; color: var(--cor-texto-suave); text-align: center; }

.enquadrar__zoom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 12px;
  max-width: 468px;
}
.enquadrar__zoom label { margin: 0; font-weight: 600; }
.enquadrar__zoom input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--cor-primaria-escura);
}
.enquadrar__zoom output {
  text-align: right;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
#enq-nitidez { margin: 0; color: var(--cor-primaria-escura); }

.enquadrar__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.enquadrar__acoes .link-texto { min-height: 44px; }

.fotos-adicionar { margin-top: 18px; margin-bottom: 0; }

.versoes-painel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.versoes-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.versao-aba {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  max-width: 100%;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.versao-aba:hover { color: var(--cor-texto); }
.versao-aba[aria-pressed="true"] {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-primaria);
}
.versao-aba:disabled { opacity: .5; cursor: default; }
.versao-aba:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
.versao-aba__foto {
  flex: none;
  width: 32px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.versao-aba__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.versao-aba__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Quando os dois campos quebram em duas linhas (celular), o espaço entre eles
   é o mesmo do resto do formulário: com "gap: 0" o rótulo de baixo ficaria
   colado no campo de cima. */
.versoes-campos { flex-wrap: wrap; gap: 14px; }
.versoes-campos > .campo { flex: 1 1 220px; margin-bottom: 0; }
.opcional { font-weight: 400; color: var(--cor-texto-suave); }
.versoes-painel > .link-texto { justify-self: start; min-height: 44px; }

/* "+ Nova versão" no fim da fileira de abas: um contorno tracejado, o jeito
   conhecido de "pôr mais uma aba". */
.versao-aba--nova {
  min-height: 44px;
  align-self: center;
  padding: 0 14px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-p);
  color: var(--cor-primaria-escura);
}
.versao-aba--nova:hover { color: var(--cor-texto); border-color: var(--cor-texto-suave); }
.versoes-abas__limite { align-self: center; font-size: .85rem; color: var(--cor-texto-suave); }

/* O convite, quando a cestinha ainda não tem versões: no começo do grupo
   Fotos, onde a dona olha. */
.versoes-convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.versoes-convite .ajuda { flex: 1 1 260px; margin: 0; }
.versoes-convite .botao { min-height: 44px; }

/* "Esta foto é de outra versão?" embaixo das ações da foto. */
.enquadrar__mover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.enquadrar__mover label { margin: 0; font-weight: 600; }
.enquadrar__mover select { width: auto; max-width: 100%; min-height: 44px; }

@media (max-width: 559px) {
  .enquadrar__area { grid-template-columns: minmax(0, 1fr) 86px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .foto-cesta,
  .versao-aba,
  .enquadrar__alvo img { transition: none; }
}

/* --------------------------------------------------------------------------
   19) A DATA ESPECIAL  (14/10/2026)
   --------------------------------------------------------------------------
   As cesteiras vendem muito em épocas do ano (Dia dos Professores, Natal,
   Dia das Mães). A dona cria a data no painel (aba Datas especiais) e liga;
   ligada, o bloco aparece logo depois da capa (index.html, #data-especial;
   quem preenche é o js/vitrine.js). Desligada, ou sem nenhuma cestinha à
   vista, a página fica exatamente como era.

   O DESENHO ("Cartaz"): o nome da data em letra enorme, a frase e o prazo
   embaixo, e as cestas da data numa fileira sobre uma faixa da cor da capa,
   a prateleira. Tudo no mesmo eixo, no meio da tela; as fotos todas do mesmo
   tamanho, na mesma altura, e a cesta da vez SEMPRE no centro. A fileira dá
   a volta (depois da última vem a primeira), então as vizinhas aparecem por
   igual dos dois lados: no celular um pedaço igual de cada uma, no
   computador três inteiras. Uma cesta fica sozinha no meio; duas, lado a
   lado; no computador, até três, paradas.

   AS CORES SÃO AS DA PALETA ESCOLHIDA (seção 1 e css/temas.css), nenhuma
   escrita aqui: o fundo é o da página (a capa já termina nele), o
   título e o prazo vão na cor primária escura, o resto na cor de texto, e o
   botão é o botão principal da loja. Contraste medido nas 5 paletas
   (14/10/2026): o título e o prazo passam de 5,7:1 sobre o fundo (o menor é
   o da areia); o nome e o preço, na faixa, passam de 10:1.

   O QUE SE MEXE (só "transform", "opacity" e "clip-path"):
   - a chegada, uma vez, quando o bloco aparece: o título sobe palavra por
     palavra de dentro de uma janela, a frase e o prazo acendem, o
     sublinhado do prazo cresce do meio para os lados, as fotos abrem de
     baixo para cima (a do meio primeiro, as duas vizinhas juntas);
   - o título anda um pouco mais devagar que a página (uns 20 px);
   - a fileira desliza devagar a cada 6 s, segue o dedo, e a foto aproxima
     de leve com o mouse em cima;
   - com "reduzir movimento" (ou ?mov=0) nada disso: tudo já nasce no lugar,
     a troca é sem deslize e só acontece pelas setas.
   -------------------------------------------------------------------------- */

.data-especial {
  --data-curva: cubic-bezier(.22, 1, .36, 1);   /* sai rápido e pousa devagar */
  --data-fio: color-mix(in srgb, var(--cor-texto) 30%, transparent);
  position: relative;
  padding: 40px 0 54px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  /* "clip", e não só "hidden": as cestas que esperam fora da tela não abrem
     uma rolagem escondida, e o Tab até uma delas não empurra a seção de lado
     (o js/vitrine.js traz a cesta focada para o meio). "hidden" fica para o
     navegador que ainda não conhece o "clip". */
  overflow: hidden;
  overflow: clip;
}
.data-especial[hidden] { display: none; }
.data-especial__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 34px;
  text-align: center;
}
/* Sem isto, a fileira alargaria a coluna da grade. */
.data-especial__grade > * { min-width: 0; }

.data-especial__texto {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}
/* O nome da data é o cartaz. O tamanho vem daqui; se a palavra mais comprida
   não couber na largura (Professores, Namorados), o js/vitrine.js diminui a
   letra até caber, em vez de quebrar a palavra no meio. */
.data-especial__titulo {
  max-width: 100%;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  /* O teto (6rem) emenda com o do computador (5,5rem aos 700 px): sem ele,
     um tablet em pé tinha o título maior que um deitado. */
  font-size: clamp(3.4rem, 19vw, 6rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--cor-primaria-escura);
  text-wrap: balance;
}
/* Cada palavra numa janela: na chegada ela sobe de dentro dela. A folga em
   volta guarda o acento de cima (Mães, Páscoa) e a perna de baixo do "g". */
.data-especial__palavra {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: .12em .03em .16em;
  margin: -.12em -.03em -.16em;
}
.data-especial__palavra > span { display: inline-block; }

.data-especial__frase {
  max-width: 34ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cor-texto);
  text-wrap: balance;               /* linhas do mesmo tamanho, sem palavra sozinha */
  overflow-wrap: anywhere;
}
/* O prazo: a data-limite é o que faz a cliente decidir hoje. Na cor
   primária escura, com um sublinhado na primária que cresce do meio na
   chegada. */
.data-especial__prazo {
  max-width: 40ch;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cor-primaria-escura);
  overflow-wrap: anywhere;
}
.data-especial__prazo span {
  padding-bottom: 3px;
  background: linear-gradient(var(--cor-primaria), var(--cor-primaria)) no-repeat 50% 100% / 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;      /* em duas linhas, cada uma com o seu traço */
}
.data-especial__frase[hidden],
.data-especial__prazo[hidden] { display: none; }

/* O botão é o principal da loja (seção 7), com a altura das teclas. */
.data-especial__botao {
  min-height: 48px;
  padding: 13px 30px;
}
.data-especial :is(a, button) { -webkit-tap-highlight-color: transparent; }
/* O cabeçalho gruda no topo (seção 3): a mesma folga para o foco daqui. */
.data-especial :is(a, button) { scroll-margin-top: 88px; }

/* ---------- a fileira das cestas ---------- */

.data-especial__vitrine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}
/* Parada (até três no computador, uma ou duas no celular): as cestas lado a
   lado, no meio. Rodando, a fileira vira o LAÇO logo abaixo. */
.data-especial__trilho {
  --data-w: min(64vw, 300px);       /* a largura de cada cesta: no celular sobra um pedaço igual de cada lado para as vizinhas */
  order: 1;
  position: relative;
  isolation: isolate;               /* a faixa fica atrás das fotos, não atrás da página */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 28px;
  list-style: none;
}
/* A faixa na cor da capa, de ponta a ponta da tela, atrás da metade de baixo
   das fotos e dos nomes: a prateleira das cestas. O js/vitrine.js mede onde
   fica o meio da foto (--data-faixa). A cor entra e sai em degradê, sem
   aresta reta (o Pedro não gosta de "recorte seco" de cor, 15/10/2026). */
.data-especial__trilho::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--data-faixa, 50%) - 48px);
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(180deg, transparent 0, var(--cor-capa) 96px, var(--cor-capa) calc(100% - 44px), transparent 100%);
}
.data-especial__item {
  flex: 0 1 var(--data-w);
  min-width: 0;
}
/* O LAÇO: todas as cestas no mesmo lugar, no meio, e o js/vitrine.js empurra
   cada uma para o lado dela ("transform"). A da vez fica no centro; as
   vizinhas, a uma largura de distância, uma de cada lado. */
.data-especial--laco .data-especial__trilho {
  display: grid;
  justify-items: center;
  touch-action: pan-y;              /* de cima para baixo é a página; de lado, a fileira */
  -webkit-user-select: none;
  user-select: none;
}
.data-especial--laco .data-especial__item {
  grid-area: 1 / 1;
  width: var(--data-w);
}
/* A volta da fileira e o "Ver todas" pelo Tab: a que está escondida não
   recebe toque nem clique (js/vitrine.js, desenharFileira). */
.data-especial__item--longe { pointer-events: none; }

.data-especial__cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--cor-texto);
  text-align: center;
  text-decoration: none;
}
/* O anel do teclado contorna a cesta inteira (foto, nome e preço). O
   contorno comum ficava por baixo da foto e só aparecia em volta do nome. */
.data-especial__cartao:focus-visible { outline: none; }
.data-especial__cartao:focus-visible::after {
  content: '';
  position: absolute;
  inset: -5px;                      /* na moldura de 5 px: mais para fora, a vizinha (12 px) cobriria */
  border: 2px solid var(--cor-primaria-escura);
  border-radius: calc(var(--raio-p) + 5px);
  pointer-events: none;
}
.data-especial__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;              /* a mesma moldura da grade: o enquadramento da dona vale igual */
  overflow: hidden;
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-p);
  /* A moldura de papel: sobre a faixa, a foto se solta com uma borda da cor
     do fundo. */
  box-shadow: 0 0 0 5px var(--cor-fundo);
}
.data-especial__foto img,
.data-especial__foto .foto-vazia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.data-especial__foto img {
  -webkit-user-drag: none;          /* arrastar a fileira não arrasta a foto */
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* O nome tem sempre o lugar de duas linhas e encosta no preço: lado a lado,
   os preços ficam na mesma altura (um nome de uma linha e outro de duas
   deixavam os preços desencontrados), e no laço a altura não pula quando a
   cesta da vez troca. */
.data-especial__legenda {
  --data-nome: 1.12rem;
  display: grid;
  grid-template-rows: minmax(calc(var(--data-nome) * 1.22 * 2), auto) auto;
  justify-items: center;
  align-items: end;
  gap: 4px;
  margin-top: 16px;
  transition: opacity .45s ease;
}
.data-especial__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;            /* no máximo duas linhas: as fotos ficam na mesma altura */
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--data-nome);
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.data-especial__preco {
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .data-especial__cartao:hover .data-especial__foto img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
}
/* No celular aparece uma cesta por vez, com um pedaço igual das vizinhas:
   só a da vez mostra o nome e o preço (o da vizinha sairia cortado). */
.data-especial--uma .data-especial__item:not(.data-especial__item--vez) .data-especial__legenda { opacity: 0; }
/* O nome da que chega aparece na segunda metade do deslize, com a foto já
   perto do meio: antes ele surgia cortado na beirada da tela. O atraso é a
   metade do tempo do deslize (js/vitrine.js); o da que sai some na hora. */
.data-especial--uma .data-especial__item--vez .data-especial__legenda { transition-delay: var(--nome-atraso, 0ms); }

/* O último cartão, quando a data tem mais cestas do que a fileira leva: a
   mesma moldura, em branco, com o convite escrito dentro. */
.data-especial__todas .data-especial__foto {
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--data-fio), 0 0 0 5px var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--cor-texto);
  text-wrap: balance;
  transition: background-color .45s ease;
}
.data-especial__todas .data-especial__foto > span {
  display: grid;
  justify-items: center;
  gap: 12px;
  transition: opacity .45s ease;
}
/* No celular o convite segue a regra do nome: só a da vez escreve. Na
   vizinha sobrava o "tas" cortado na beirada. */
.data-especial--uma .data-especial__item:not(.data-especial__item--vez) .data-especial__todas .data-especial__foto > span { opacity: 0; }
.data-especial--uma .data-especial__item--vez .data-especial__todas .data-especial__foto > span { transition-delay: var(--nome-atraso, 0ms); }
/* A seta diz que o cartão leva a outro lugar. */
.data-especial__todas svg {
  width: 26px;
  height: 26px;
  color: var(--cor-primaria-escura);
  transition: transform .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .data-especial__todas:hover .data-especial__foto { background: var(--cor-primaria-suave); }
  .data-especial__todas:hover svg { transform: translateX(4px); }
}

/* ---------- os traços e as teclas ---------- */

/* Embaixo das fotos: os traços no meio e, embaixo deles, [anterior] [pausar]
   [próxima], também no meio. As setas ficam à vista no celular: arrastar é o
   controle que menos gente usa. No HTML o botão de pausar vem antes
   (teclado, W3C APG); a grade o põe entre as setas. */
.data-especial__controles {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 44px) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 20px;
  width: 100%;
}
.data-especial__controles[hidden] { display: none; }
.data-especial__passos {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  gap: 6px;
  max-width: 100%;
}
#data-antes { grid-row: 2; grid-column: 2; }
.data-especial__pausa { grid-row: 2; grid-column: 3; }
#data-depois { grid-row: 2; grid-column: 4; }

/* A largura vai em "width", e não em "flex-basis": a fileira de traços se
   mede pelo conteúdo (com "flex-basis" o traço vazio contava como 8 px).
   Com muitas cestas na tela estreita, cada traço encolhe até 8 px. */
.data-especial__passo {
  flex: 0 1 auto;
  width: 26px;
  min-width: 8px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cor-texto) 18%, transparent);
  overflow: hidden;
}
.data-especial__passo i {
  display: block;
  height: 100%;
  background: var(--cor-primaria-escura);
  transform: scaleX(0);
  transform-origin: left center;
}
/* As que já passaram ficam cheias; a da vez, parada, também (mostra onde está). */
.data-especial__passo--feito i,
.data-especial__passo--vez i { transform: scaleX(1); }
/* Rodando, o traço da vez enche no tempo da cesta: é o relógio da troca (o
   js/vitrine.js anda a fileira quando esta animação termina). */
.data-especial--rodando .data-especial__passo--vez i {
  animation: data-enche var(--data-tempo, 6s) linear both;
}
.data-especial--espera .data-especial__passo--vez i { animation-play-state: paused; }
@keyframes data-enche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* As teclas: redondas, com um fio em volta (o mesmo jeito dos botões da loja). */
.data-especial__tecla {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;                     /* o mínimo de toque */
  padding: 0;
  border: 1px solid var(--data-fio);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .2s ease;
}
.data-especial__tecla svg { width: 18px; height: 18px; }
.data-especial__pausa svg { width: 14px; height: 14px; }
.data-especial__tecla:active { transform: scale(.94); }
.data-especial__tecla:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .data-especial__tecla:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }
}
.data-especial__pausa-toca { display: none; }
/* Parada, o botão mostra o "tocar". (O nome que o leitor de tela lê muda
   junto, "Pausar…" / "Ligar…", como pede o W3C APG para o botão de pausar
   carrossel; por isso sem aria-pressed, que diria "Ligar, pressionado".) */
.data-especial__pausa[data-parada] .data-especial__pausa-pausa { display: none; }
.data-especial__pausa[data-parada] .data-especial__pausa-toca { display: block; }

/* ---------- a chegada (uma vez, quando o bloco aparece) ----------
   O js/vitrine.js liga o "--anima" ao montar (só com movimento liberado),
   o "--entrou" quando o título aparece, o "--fotos" quando a fileira
   aparece, e tira os três quando a chegada acaba: daí em diante valem só
   as regras de cima. */
.data-especial--anima .data-especial__palavra > span { transform: translate3d(0, 112%, 0); }
.data-especial--anima.data-especial--entrou .data-especial__palavra > span {
  transform: none;
  transition: transform 1.1s var(--data-curva) calc(var(--w, 0) * 90ms);
}
.data-especial--anima :is(.data-especial__frase, .data-especial__prazo, .data-especial__legenda, .data-especial__controles, .data-especial__botao) { opacity: 0; }
.data-especial--anima.data-especial--entrou :is(.data-especial__frase, .data-especial__prazo) {
  opacity: 1;
  transition: opacity .9s ease var(--data-atraso, 0ms);
}
/* A parte de baixo conta o tempo a partir das fotos, não do título. O
   --data-depois (js/vitrine.js) é a espera quando as duas chegam juntas. */
.data-especial--anima.data-especial--fotos :is(.data-especial__legenda, .data-especial__controles, .data-especial__botao) {
  opacity: 1;
  transition: opacity .9s ease calc(var(--data-atraso, 0ms) + var(--data-depois, 0ms));
}
.data-especial__frase { --data-atraso: 380ms; }
.data-especial__prazo { --data-atraso: 500ms; }
.data-especial__legenda { --data-atraso: 700ms; }
.data-especial__controles { --data-atraso: 850ms; }
.data-especial__botao { --data-atraso: 950ms; }
.data-especial--anima .data-especial__prazo span { background-size: 0% 2px; }
.data-especial--anima.data-especial--entrou .data-especial__prazo span {
  background-size: 100% 2px;
  transition: background-size 1s var(--data-curva) 900ms;
}
/* A foto abre de baixo para cima. A janela vai 6 px além da foto: senão ela
   cortaria a moldura (box-shadow) depois de aberta. */
.data-especial--anima .data-especial__foto { clip-path: inset(100% -6px -6px -6px round var(--raio-p)); }
.data-especial--anima.data-especial--fotos .data-especial__foto {
  clip-path: inset(-6px round var(--raio-p));
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1) calc(var(--c, 0) * 150ms + 120ms + var(--data-depois, 0ms));
}

/* O botão da data na fileira de categorias: entra logo depois de "Todas",
   com um coração na frente. Mesma cor das outras (uma cor só); o coração é
   o que diz que ela não é uma categoria. */
.chip--data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip--data svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--cor-primaria);
}
.chip--data[aria-pressed="true"] svg { color: currentColor; }

@media (min-width: 700px) {
  .data-especial { padding: 64px 0 88px; }
  .data-especial__grade { gap: 46px; }
  .data-especial__texto { gap: 20px; }
  .data-especial__titulo { font-size: clamp(5.5rem, 12vw, 8.5rem); }
  .data-especial__frase { max-width: 44ch; font-size: 1.06rem; }
  .data-especial__prazo { font-size: .95rem; }
  /* Três cestas inteiras à vista, a da vez no meio. */
  .data-especial__trilho {
    --data-w: clamp(200px, 26vw, 300px);
    column-gap: clamp(24px, 3vw, 40px);
    padding-bottom: 34px;
  }
  .data-especial__legenda { --data-nome: 1.2rem; }
  .data-especial__passo { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .data-especial__botao,
  .data-especial__tecla,
  .data-especial__legenda,
  .data-especial__todas .data-especial__foto,
  .data-especial__todas .data-especial__foto > span,
  .data-especial__todas svg,
  .data-especial__foto img { transition: none; }
  .data-especial__cartao:hover .data-especial__foto img { transform: scale(var(--zoom, 1)); }
  .data-especial__botao:active,
  .data-especial__tecla:active { transform: none; }
}

/* --------------------------------------------------------------------------
   20) PAINEL: DATAS ESPECIAIS  (14/10/2026)
   --------------------------------------------------------------------------
   A aba Datas especiais (admin.html, #painel-datas; quem desenha é o
   js/admin.js, "DATAS ESPECIAIS"). A lista é a mesma das cestinhas: o
   interruptor na frente, o nome, o que a cliente vê agora, e o lápis e a
   lixeira no fim. O formulário troca de lugar com a lista, como o da
   cestinha. A prévia é o bloco da loja (seção 19) em ponto pequeno, com as
   cores e as fontes da paleta escolhida.
   -------------------------------------------------------------------------- */

.datas__explica { max-width: 62ch; margin: 4px 0 0; }
/* O título do formulário recebe o foco ao abrir (para quem ouve a tela); não
   é um botão, então não ganha o anel. */
#data-editor-titulo:focus { outline: none; }
.datas__ver-loja {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 0;
}

/* ---------- a lista ---------- */

.data-linha { flex-wrap: nowrap; }
.data-linha__chave {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 46px;
  min-height: 44px;                /* o toque pega a altura da linha inteira */
}
.data-linha .item-admin__info strong { overflow-wrap: anywhere; }
.data-linha .item-admin__info span {
  display: block;
  margin-top: 2px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.data-linha .item-admin__info .data-linha__alerta { color: var(--cor-negativo); font-weight: 600; }
.data-linha .item-admin__acoes { flex-wrap: nowrap; }
.data-linha .botao-icone { width: 44px; height: 44px; }
/* No celular a lista das cestinhas manda os botões para a linha de baixo
   (seção 12). Aqui são só dois: cabem ao lado do nome. */
@media (max-width: 639px) {
  .data-linha .item-admin__info { flex: 1 1 0; }
  .data-linha .item-admin__info + .item-admin__acoes { flex: 0 0 auto; }
}

/* ---------- os temas: a galeria do formulário e a data pronta da lista ---------- */

.datas-temas {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.datas-temas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.datas-tema {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 6px 9px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  background: var(--cor-superficie);
  cursor: pointer;
  text-align: center;
}
.datas-tema input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.datas-tema__amostra {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
}
.datas-tema__amostra svg { width: 34px; height: 34px; }
.datas-tema__amostra--sem { background: var(--cor-primaria-suave); }
.datas-tema__nome {
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cor-texto);
}
.datas-tema:has(input:checked) {
  border-color: var(--cor-primaria-escura);
  box-shadow: 0 0 0 1px var(--cor-primaria-escura);
}
.datas-tema:has(input:focus-visible) {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

.data-linha__tema {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.data-linha__tema svg { width: 24px; height: 24px; }
.data-linha__tema--sem { background: var(--cor-primaria-suave); }
.data-linha--pronta .item-admin__info span { color: var(--cor-texto-suave); }

/* A prévia com o tema: o fundo da data, com folga dos lados. A faixa atrás
   das fotos fica dentro do bloco (sem o corte, ela passava da borda). */
.datas-previa--tema {
  padding: 18px 14px 16px;
  border-radius: var(--raio-p);
  overflow: hidden;
}

/* ---------- o formulário: as cestinhas da data ---------- */

/* O mesmo desenho do rótulo dos outros campos (.campo label). */
.datas-form__rotulo {
  display: block;
  margin-bottom: 5px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cor-texto);
}
.datas-escolha__busca { margin-bottom: 8px; }

/* A lista inteira numa caixa só, que rola por dentro quando a loja tem
   muitas cestinhas: a busca e o contador ficam sempre perto. */
.datas-escolha {
  max-height: min(430px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
}
/* Cada linha é um label dentro de .campo: o seletor repete .datas-escolha
   para vencer o ".campo label" (display: block, letra miúda e negrito), a
   mesma armadilha anotada no interruptor (seção 12). */
.datas-escolha .datas-escolha__linha {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}
.datas-escolha__linha:first-child { border-top: 0; }
.datas-escolha__linha:hover { background: var(--cor-fundo); }
.datas-escolha__linha:has(input:checked) { background: var(--cor-primaria-suave); }
.datas-escolha__linha input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cor-primaria-escura);
  cursor: pointer;
}
.datas-escolha__linha input:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
.datas-escolha__foto {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.datas-escolha__foto img,
.datas-previa__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.datas-escolha__texto { display: grid; gap: 2px; min-width: 0; }
.datas-escolha__nome {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.datas-escolha__nota {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--cor-texto-suave);
}
.datas-escolha__nota em { font-style: normal; font-weight: 600; color: var(--cor-texto); }
.datas-escolha__vazio { margin: 0; padding: 18px 14px; text-align: center; }
.campo .datas-escolha__conta { font-variant-numeric: tabular-nums; }
.campo .datas-escolha__conta--alerta { color: var(--cor-negativo); font-weight: 600; }

/* ---------- a prévia: o bloco da loja em ponto pequeno ---------- */

.datas-previa {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 0 4px;
  text-align: center;
}
.datas-previa > * { min-width: 0; max-width: 100%; }
.datas-previa__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--cor-primaria-escura);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Ainda sem nome: o lugar dele, mais apagado. */
.datas-previa__titulo.datas-previa--falta { opacity: .45; }
.datas-previa__frase {
  max-width: 30ch;
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--cor-texto);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.datas-previa__prazo {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cor-primaria-escura);
  overflow-wrap: anywhere;
}
.datas-previa__prazo span {
  padding-bottom: 2px;
  background: linear-gradient(var(--cor-primaria), var(--cor-primaria)) no-repeat 50% 100% / 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* As fotos sobre a faixa da cor da capa, a prateleira da loja. A faixa vai
   de uma borda à outra da prévia. */
.datas-previa__fotos {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: calc(100% + 32px);
  max-width: none;
  margin: 8px -16px 0;
  padding: 0 16px 16px;
}
.datas-previa__fotos::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cor-capa);
}
.datas-previa__fotos:empty { display: none; }
.datas-previa__foto {
  width: 31%;
  max-width: 80px;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
  box-shadow: 0 0 0 3px var(--cor-fundo);
}
/* O botão principal da loja (seção 7), em ponto pequeno. É só desenho: a
   prévia inteira é aria-hidden e nada aqui se toca. */
.datas-previa__botao {
  margin-top: 4px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
}