/*
  GN Home Decor: tokens e layout.

  As cores verde/dourado/creme vêm da logo real da marca (assets/logo.jpg
  e assets/logo-mark.svg) e por isso são fixas em todo o site, loja e
  painel. Na LOJA (seções acima do painel administrativo neste arquivo) a
  regra é editorial: sem eyebrow em caixa alta, sem cards idênticos com
  sombra igual em tudo, sem botão em gradiente. O motivo do herói (os aros
  sobrepostos) é literalmente o produto: argolas de guardanapo vistas de
  cima, sobre a mesa.

  No PAINEL ADMINISTRATIVO (seção "Painel administrativo" mais abaixo) a
  regra é outra, de propósito: o layout segue o molde de um dashboard com
  sidebar fixa, cards com sombra suave e tabela de resumo -- só que com as
  mesmas cores e tipografia da marca, nunca uma paleta nova.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Cores de marca (fixas -- vêm da logo) */
  --cream: #fdf8ef;
  --cream-2: #f6efe2;
  --ink: #18181b;
  --ink-dim: #6b6558;
  --border: #e7dfcd;
  --gold: #c99a3b;
  --gold-deep: #a97f2c;
  --green: #1f4d3a;
  --green-deep: #16362a;
  --green-tint: #e7efe9;
  --charcoal: #1c1b19;
  --charcoal-2: #26241f;
  --ok: #3a7d44;
  --danger: #b6473f;

  /* Acentos vívidos -- usados em botões, badges e destaques (mesma família, mais vida) */
  --green-vivid: #12915f;
  --green-vivid-deep: #0d6e48;
  --gold-vivid: #e2a52e;
  --berry: #ab2f56;
  --berry-deep: #841f40;

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala de espaçamento */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 72px;
  --sp-8: 104px;

  --radius-sm: 6px;
  --radius-md: 14px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* overflow-x: hidden na raiz -- rede de segurança contra qualquer elemento
   que acabe mais largo que a tela no celular (empurrando a página inteira
   pro lado, o efeito de "arrastar" a tela). Não afeta rolagem horizontal
   proposital de nenhum componente (.table-scroll, .card-carousel etc. já
   controlam o próprio overflow-x em si mesmos, não no body). */
html { scroll-behavior: smooth; color-scheme: light; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-vivid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-4); }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--sp-4); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  border: 1.5px solid transparent;
  border-radius: 9px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--ease) .15s, border-color var(--ease) .15s, color var(--ease) .15s, transform var(--ease) .1s, box-shadow var(--ease) .15s;
}
.btn-primary {
  background: var(--green-vivid);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(13,60,40,.35), 0 10px 22px -6px rgba(18,145,95,.55);
  transform: translateY(0) scale(1);
}
.btn-primary:hover {
  background: var(--green-vivid-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(13,60,40,.4), 0 14px 28px -6px rgba(18,145,95,.6);
}
.btn-primary:active { transform: scale(.97); box-shadow: inset 0 1px 4px rgba(0,0,0,.25); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-line:hover { border-color: var(--green-vivid); color: var(--green-vivid-deep); background: rgba(18,145,95,.06); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
/* Editar (dourado) e Excluir (vermelho) precisam ser reconhecíveis pela cor
   sozinha, sem precisar ler o rótulo -- evita clique errado numa lista longa. */
.btn-edit-ghost { background: transparent; color: var(--gold-deep); border-color: var(--gold); }
.btn-edit-ghost:hover { background: var(--gold-vivid); color: #fff; border-color: var(--gold-vivid); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--border);
  transition: border-color var(--ease) .15s;
}
.text-link:hover { border-color: var(--gold); }

/* ---------- Cabeçalho da loja ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 248, 239, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); }
.brand img.brand-photo { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--gold); object-fit: cover; }
.brand-name { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.brand-tag { display: block; font-size: 11px; color: var(--ink-dim); }
.site-nav { display: flex; gap: var(--sp-5); }
.site-nav a {
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--ease) .15s, border-color var(--ease) .15s;
}
.site-nav a:hover { color: var(--ink); border-color: var(--gold); }

/* Botão hambúrguer + painel: só existem de verdade abaixo de 900px (ver
   media query no fim do arquivo) -- acima disso .site-nav já mostra os
   links direto no cabeçalho e esses dois ficam ocultos. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--ease) .15s, background var(--ease) .15s;
}
.nav-toggle:hover { border-color: var(--gold); background: var(--cream-2); }
.nav-toggle svg { width: 19px; height: 19px; }

.mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--border); }
.mobile-nav a {
  padding: 14px var(--sp-4);
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { background: var(--cream-2); color: var(--green-vivid-deep); }

/* ---------- Herói ---------- */
/* Etiqueta (kicker) em letras miúdas maiúsculas acima do título de cada
   seção -- reforça a hierarquia editorial sem precisar aumentar o
   título em si. Ideia trazida de um teste de redesign feito em cima de
   um protótipo do base44; a cor dourada e a tipografia continuam sendo
   as da marca. */
.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
}
.kicker-on-dark { color: var(--gold-vivid); }

/* Entrada suave (fade + leve deslocamento) só no hero e no título de
   cada seção -- de propósito poucos elementos por página, não em cada
   card/ícone, pra não atrasar a percepção do conteúdo. O reset global de
   "prefers-reduced-motion" no topo deste arquivo já cuida de neutralizar
   a transição pra quem pediu menos movimento. */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.hero {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-6);
  padding-top: clamp(56px, 7vw, 112px);
  padding-bottom: clamp(56px, 7vw, 112px);
}
.hero h1 {
  font-size: clamp(36px, 3.2vw + 22px, 64px);
  line-height: 1.06;
  letter-spacing: -.015em;
  max-width: 15ch;
}
.hero p.lede {
  max-width: 42ch;
  margin: var(--sp-4) 0 var(--sp-5);
  color: var(--ink-dim);
  font-size: 16.5px;
}
.hero-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Motivo do herói: argolas de guardanapo vistas de cima, sobre a mesa */
.hero-visual { position: relative; width: min(100%, 460px); margin-left: auto; margin-right: 0; }
.hero-photo-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 32px 56px -20px rgba(24, 24, 27, .32);
}
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ring {
  position: absolute;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  animation: ring-settle .7s var(--ease) forwards;
}
.ring-1 { width: 66%; height: 66%; border: 20px solid var(--green-vivid); left: 38%; top: 46%; transform: translate(-50%, -50%) rotateX(58deg); animation-delay: .05s; }
.ring-2 { width: 47%; height: 47%; border: 14px solid var(--gold-vivid); left: 66%; top: 36%; transform: translate(-50%, -50%) rotateX(58deg) rotate(18deg); animation-delay: .2s; }
.ring-3 { width: 37%; height: 37%; border: 3px solid var(--berry); left: 54%; top: 70%; transform: translate(-50%, -50%) rotateX(58deg) rotate(-12deg); animation-delay: .35s; }
@keyframes ring-settle {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) rotateX(58deg); }
  to   { opacity: 1; }
}

/* ---------- Sobre ---------- */
.about { padding: clamp(80px, 10vw, 160px) 0; border-bottom: 1px solid var(--border); }
.about .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-6); align-items: start; }
.about-visual { display: flex; flex-direction: column; gap: var(--sp-5); }
.about-photo {
  aspect-ratio: 4 / 4.3;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-caption { font-size: 12px; color: var(--ink-dim); margin-top: var(--sp-2); }
.about-photo-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: var(--sp-4);
}
.about-photo-placeholder svg { width: 36px; height: 36px; color: var(--gold-deep); opacity: .75; }
.about-photo-title { font-size: 12.5px; font-weight: 700; color: var(--ink-dim); }
.about-photo-hint { font-size: 12px; color: var(--ink-dim); max-width: 26ch; line-height: 1.5; }
.about blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
  color: var(--green-deep);
}
.about-body h2 { font-size: clamp(28px, 1.6vw + 20px, 40px); margin-bottom: var(--sp-3); }
.about-body p { color: var(--ink-dim); font-size: 15px; max-width: 60ch; }
.materials-list { margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.materials-list > div {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.materials-list dt { font-weight: 700; color: var(--ink); }
.materials-list dd { margin: 0; color: var(--ink-dim); }

/* ---------- Vitrine ---------- */
.shelf { padding: clamp(80px, 10vw, 160px) 0; }
.shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.shelf-head h2 { font-size: clamp(28px, 1.6vw + 20px, 40px); }
.shelf-head p { color: var(--ink-dim); font-size: 14px; max-width: 40ch; }

.category-intros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.category-intros h3 { font-size: 16px; margin-bottom: 6px; }
.category-intros p { font-size: 13.5px; color: var(--ink-dim); max-width: 42ch; }

/* Abas de categoria acima da vitrine: filtram por cima da grade já
   carregada (sem nova chamada ao servidor), gerado dinamicamente em
   js/loja.js a partir das categorias que existem de verdade no
   catálogo. */
.category-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-5); }
.category-tabs button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.category-tabs button:hover { border-color: var(--gold); color: var(--ink); }
.category-tabs button.is-active { background: var(--green); border-color: var(--green); color: var(--cream); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }
.product-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff;
  transition: box-shadow var(--ease) .2s, transform var(--ease) .2s;
}
/* Leve elevação no hover -- sombra na mesma família verde dos botões, não uma
   cor nova -- pra dar peso de "vitrine de verdade" sem exagerar no efeito. */
.product-card:hover { box-shadow: 0 20px 36px -22px rgba(31,77,58,.4); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
}
.product-card .photo-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-2); }
.product-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .photo-wrap img { transform: scale(1.045); }

/* Produto com mais de 1 foto: mini-carrossel por arraste/swipe nativo (scroll-
   snap, sem JS de drag) + pontinhos indicando a posição atual. Produto com 0
   ou 1 foto continua sendo só a <img> de sempre, sem nada disso. */
.card-carousel {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* touch-action: pan-x -- diz pro navegador que ESTE elemento só lida com
     arraste horizontal, resolvendo de cara pra que lado vai um toque que
     começa meio na diagonal. Sem isso, num celular, o navegador as vezes
     fica em dúvida se o gesto é pra rolar o carrossel ou a página (o dedo
     arrasta a foto um pouco e ela "volta", em vez de trocar de foto). */
  touch-action: pan-x;
}
.card-carousel::-webkit-scrollbar { display: none; }
.card-carousel img {
  flex: 0 0 100%; scroll-snap-align: start;
  /* Sem isso, o próprio navegador tenta iniciar o "arrastar imagem" nativo
     (a pré-visualização fantasma de arrastar uma foto pra outra aba/app)
     assim que o dedo toca a imagem -- e esse gesto nativo "ganha" do
     scroll do carrossel, dando a sensação de a foto "querer ir mas não
     ir". Desligando o arraste nativo e a seleção de texto, o toque sobra
     inteiro pro scroll-snap de verdade. */
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
/* Pontinhos clicáveis (antes eram só decoração, pointer-events:none --
   quem usa mouse não tinha NENHUM jeito de trocar de foto sem arrastar, e
   arrastar com o botão do mouse não rola um overflow:auto sozinho, só
   toque/trackpad fazem isso nativamente). Cada pontinho é um <button> com
   área de toque de 16px, maior que o miolo visível de 5px (::before) --
   pra não exigir mira certeira num alvo pequeno. */
/* pointer-events: none no contêiner -- mesmo a caixa já abraçando só os
   pontinhos (width: max-content, ver abaixo), mantido como rede de
   segurança pra nunca voltar a roubar clique do botão de tela cheia/
   contador no modal "Ver peça" (mesma faixa de altura). Cada pontinho
   reativa o próprio clique (pointer-events:auto). */
/* left:50% + translateX (em vez de left:0;right:0) -- referência visual
   trazida de um template do 21st.dev (carrossel com cápsula translúcida
   atrás dos pontinhos, pílula alongada na foto atual): a faixa original
   era 100% de largura só pra centralizar via justify-content, o que
   fazia o fundo/borda novos da cápsula esticarem de ponta a ponta do
   card em vez de abraçar só os pontinhos -- width:max-content resolve
   isso, testado antes em teste carrossel produto/. */
.photo-dots {
  position: absolute; left: 50%; right: auto; bottom: 7px; z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  display: flex; justify-content: center; pointer-events: none;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 1px;
}
/* Botão do pontinho: área de toque de 16px (miolo visível bem menor, via
   ::before) -- ainda dá pra mirar sem exigir precisão, sem inflar o
   tamanho da cápsula. */
.photo-dots .dot {
  width: 16px; height: 16px; margin: 0; padding: 0;
  background: transparent; background-clip: border-box;
  border: none; border-radius: 999px; box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
}
.photo-dots .dot::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 999px;
  background-color: rgba(255, 255, 255, .6);
  transition: width var(--ease) .2s, background-color var(--ease) .15s;
}
.photo-dots .dot.is-active { transform: none; }
.photo-dots .dot.is-active::before { width: 12px; background-color: #fff; }

/* Setas de avançar/voltar foto -- sobre o canto do quadro, sempre visíveis
   (não só no hover: em touch não existe hover, e o pedido foi por um jeito
   de clicar de verdade, não só arrastar). Círculo branco (era escuro
   semitransparente) + estado desabilitado nas pontas do carrossel --
   mesma referência do 21st.dev citada acima em .photo-dots. */
.carousel-arrow {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  font-size: 16px; line-height: 1; cursor: pointer;
  opacity: .82;
  transition: opacity var(--ease) .15s, transform var(--ease) .15s, box-shadow var(--ease) .15s;
}
.carousel-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.12); box-shadow: 0 4px 14px rgba(0, 0, 0, .24); }
.carousel-arrow:disabled { opacity: .35; box-shadow: none; cursor: not-allowed; }
.carousel-arrow:disabled:hover { transform: translateY(-50%) scale(1); }
.carousel-arrow-prev { left: 8px; }
.carousel-arrow-next { right: 8px; }
.discount-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--berry); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
/* Selo "Foto ilustrativa": só aparece em produtos sem foto própria
   cadastrada (o card ainda mostra o placeholder) -- ver
   temFotoPropria em js/loja.js. Fica no canto oposto ao selo de
   desconto pra nunca colidir com ele. */
.illustrative-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(24, 24, 27, .65);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 999px;
}
.product-card .body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
/* .tag e .discount-pill não são exclusivos do card da loja -- a lista do
   painel reaproveita as duas pra mostrar categoria e desconto do mesmo
   jeito que a vitrine, em vez de inventar um estilo novo pro admin. */
.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--gold-vivid);
  font-weight: 700;
  margin-bottom: 6px;
}
.product-card h3 { font-size: 17px; line-height: 1.3; margin-bottom: var(--sp-2); }
/* flex-wrap: wrap -- quando o produto tem preço promocional, a linha
   (preço novo + preço riscado + "· Disponível") pode não caber numa
   coluna estreita do card. Sem isso, o texto de "Disponível" quebrava
   NO MEIO da palavra (o item flex espremia até ficar mais estreito que
   o próprio texto); com o wrap na linha toda + white-space:nowrap no
   status, ele desce inteiro pra uma segunda linha em vez de partir. */
.product-card .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-3); }
.price { font-family: var(--font-display); font-weight: 600; color: var(--green-vivid-deep); white-space: nowrap; }
.product-card .price { font-size: 20px; }
.price-old { color: var(--ink-dim); text-decoration: line-through; white-space: nowrap; }
.product-card .price-old { font-size: 13px; }
/* "/un" ao lado do preço -- produto vendido por peça avulsa (ex: um kit
   de argolas onde o preço mostrado é de 1 unidade, não do kit todo). */
.price-unit { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.discount-pill { display: inline-flex; align-items: center; background: var(--berry); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
/* Status junto do preço, tipo "R$ 249,90 · Disponível". */
.stock-status { font-size: 12.5px; color: var(--green-vivid-deep); font-weight: 600; white-space: nowrap; }
/* "Ver peça" (abre a pré-visualização) e "Pedir pelo WhatsApp" lado a
   lado, do mesmo tamanho (grid 1fr 1fr, não flex 0/1 -- senão o texto
   do WhatsApp quebra em 2 linhas e o botão fica bem mais "pesado" que
   o outro). */
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.card-actions .btn { white-space: nowrap; }
.empty-state { text-align: center; color: var(--ink-dim); padding: var(--sp-6) 0; font-size: 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }

/* ---------- Contato ---------- */
.contact { padding: clamp(80px, 10vw, 160px) 0; }
.contact .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); align-items: start; }
.contact h2 { font-size: clamp(28px, 1.6vw + 20px, 40px); margin-bottom: var(--sp-2); }
.contact p { color: var(--ink-dim); font-size: 14.5px; max-width: 38ch; }

/* Cartão em vez de texto solto no fundo da página -- e cada linha usa uma
   coluna de rótulo com largura fixa (mesmo padrão de .materials-list), não
   "justify-content: space-between" esticado pela largura toda da coluna,
   que era o que abria aquele vão de espaço vazio entre rótulo e valor. */
.contact-rows {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0 var(--sp-4);
}
.contact-row { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.contact-row:last-child { border-bottom: none; }
.contact-row .label { font-size: 12px; color: var(--ink-dim); text-transform: none; }
.contact-row .value { font-size: 15px; font-weight: 600; }

/* Bloco de Instagram: vira uma seção de largura cheia (não segue a
   grade "rótulo | valor" de 2 colunas das outras linhas -- é isso que
   deixaria um vazio grande do lado esquerdo, já que o conteúdo à
   direita é bem mais alto que um rótulo sozinho) com ícone, handle,
   frase de contexto, a grade de fotos (só quando existe alguma
   cadastrada no painel, em Redes sociais) e um botão de verdade. */
.contact-row-insta { display: block; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.insta-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.insta-icon { width: 22px; height: 22px; color: var(--gold-deep); flex-shrink: 0; }
.insta-head .label { display: block; font-size: 12px; color: var(--ink-dim); }
.insta-handle { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.insta-context { font-size: 13.5px; color: var(--ink-dim); max-width: 42ch; margin: 0 0 var(--sp-3); }
.insta-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; margin-bottom: var(--sp-3); }
.insta-preview-grid a { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--cream-2); }
.insta-preview-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
.insta-preview-grid a:hover img { transform: scale(1.06); filter: brightness(1.06); }
.insta-preview-grid a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.insta-cta { display: inline-flex; }

/* ================= Painel administrativo =================
   Layout no molde de um dashboard interno de verdade: sidebar fixa +
   conteúdo, cards com sombra suave, tabela de resumo -- só que com a
   paleta da GN (verde/dourado/creme) no lugar de azul/cinza genérico.
   Sim, aqui os cards TÊM sombra e borda colorida -- diferente da loja
   de propósito: um painel é usado, não lido, e pede mais sinalização
   visual de estado/hierarquia do que uma página editorial. */
.admin-shell { background: var(--cream-2); }

/* Tipografia do painel: sans-serif em tudo, igual ao template base44 (que
   usa só a fonte do sistema, sem serifada nenhuma) -- diferente da loja,
   que usa a Fraunces serifada nos títulos de propósito. Aqui reaproveita a
   Instrument Sans que o site já carrega, então nenhuma fonte nova entra. */
.admin-shell h1, .admin-shell h2, .admin-shell h3,
.admin-shell .stat-value, .admin-shell .sidebar-brand strong,
.admin-shell .price {
  font-family: var(--font-body);
  letter-spacing: -.01em;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 272px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--green-deep);
  color: var(--cream);
  transform: translateX(-100%);
  transition: transform var(--ease) .25s;
}
.admin-shell.sidebar-open .admin-sidebar { transform: translateX(0); }

.sidebar-brand { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(253,248,239,.14); }
.sidebar-brand img { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--gold-vivid); object-fit: cover; flex-shrink: 0; }
.sidebar-brand strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; }
.sidebar-brand span { display: block; font-size: 11.5px; color: rgba(253,248,239,.6); margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; border: none; background: transparent; cursor: pointer;
  padding: 11px 14px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: rgba(253,248,239,.72); text-align: left;
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(253,248,239,.08); color: var(--cream); }
.sidebar-link.is-active { background: var(--cream); color: var(--green-deep); box-shadow: 0 4px 14px -4px rgba(0,0,0,.3); }

.sidebar-foot { margin-top: auto; border: 1px solid rgba(253,248,239,.14); background: rgba(253,248,239,.05); border-radius: var(--radius-md); padding: var(--sp-3); }
.sidebar-foot-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-vivid); }
.sidebar-foot-text { margin: 6px 0 0; font-size: 12.5px; color: rgba(253,248,239,.7); line-height: 1.5; }
.sidebar-foot-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--cream); text-decoration: none; border-bottom: 1.5px solid rgba(253,248,239,.35); }
.sidebar-foot-link:hover { border-color: var(--gold-vivid); }

.sidebar-toggle {
  position: fixed; top: 16px; left: 16px; z-index: 41;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: var(--green-deep); color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.35);
}
.sidebar-toggle svg { width: 19px; height: 19px; }
/* Com a sidebar aberta, o botão fica escondido atrás dela mesma -- some pra
   não sobrepor a logo; fechar é tocar fora (no scrim) ou escolher um item. */
.admin-shell.sidebar-open .sidebar-toggle { display: none; }
.sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(24,24,27,.4); }

/* ---- Área principal ---- */
.admin-main { min-height: 100vh; }
.admin-main-top { display: flex; justify-content: flex-end; padding: var(--sp-3) var(--sp-4) 0; }
.admin-wrap { max-width: 1160px; margin: 0 auto; padding: var(--sp-2) var(--sp-4) var(--sp-8); }

.admin-view .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gold-deep); margin-bottom: 6px; }
.admin-view h1 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.admin-view .view-sub { color: var(--ink-dim); font-size: 14px; max-width: 60ch; margin-bottom: var(--sp-5); }

/* Cards de estatística no molde do dashboard -- ícone com selo colorido,
   número grande, sombra suave (aqui, diferente da loja, isso é intencional). */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: 0 8px 26px -18px rgba(23,61,43,.35); }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; margin-bottom: var(--sp-3); }
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon-green { background: var(--green-tint); color: var(--green-vivid-deep); }
.stat-icon-berry { background: #f6e3ea; color: var(--berry-deep); }
.stat-icon-gold { background: #f8ecd2; color: var(--gold-deep); }
.stat-card .stat-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-dim); margin: 0; }
.stat-value { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.15; }

/* Card de estatística que também é botão (hoje só "Produtos em promoção"):
   mesmo cartão de sempre, só com affordance de clique -- borda dourada no
   hover (mesmo padrão de .product-row) e uma setinha que "acorda" no hover. */
.stat-card-clickable { position: relative; display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer; padding-right: 46px; transition: border-color var(--ease) .15s, box-shadow var(--ease) .15s, transform var(--ease) .1s; }
.stat-card-clickable:hover { border-color: var(--gold); box-shadow: 0 12px 32px -16px rgba(23,61,43,.45); }
.stat-card-clickable:active { transform: scale(.99); }
.stat-card-arrow { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 16px; height: 16px; color: #8b968e; transition: color var(--ease) .15s, transform var(--ease) .15s; }
.stat-card-clickable:hover .stat-card-arrow { color: var(--green-vivid-deep); transform: translate(2px, -2px); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.section-head h2 { font-size: 18px; margin-bottom: 2px; }
.section-head p { margin: 0; font-size: 13px; color: var(--ink-dim); }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill-promo { background: #f6e3ea; color: var(--berry-deep); }
.pill svg { width: 12px; height: 12px; }

/* Tabela-resumo da vitrine (só leitura -- editar continua na aba Produtos) */
.table-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 26px -18px rgba(23,61,43,.35); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }
.data-table thead { background: var(--cream-2); }
.data-table th { padding: 13px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.data-table td { padding: 13px 18px; border-top: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.data-table tbody tr { transition: background var(--ease) .1s; }
.data-table tbody tr:hover { background: var(--cream-2); }
.dt-product { display: flex; align-items: center; gap: var(--sp-3); }
.dt-product img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--cream-2); flex-shrink: 0; }
.dt-product span { font-weight: 700; }
.dt-dim { color: var(--ink-dim); font-size: 13.5px; }
.dt-dim-sm { color: #8b968e; font-size: 12.5px; }
.dt-price-old { font-size: 11.5px; margin-top: 2px; }
.dt-loading { text-align: center; padding: var(--sp-6) !important; color: var(--ink-dim); font-size: 13px; border-top: none !important; }
.dt-actions { display: flex; gap: 6px; }

.panel-card-narrow { max-width: 480px; }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--ink-dim); pointer-events: none; }
.input-icon input { width: 100%; padding-left: 38px !important; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Cabeçalho da aba Produtos: título à esquerda, "Novo produto" à direita. */
.view-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.view-head-row .view-sub { margin-bottom: 0; }
.view-head-row .btn { flex-shrink: 0; white-space: nowrap; }

/* Formulário de produto (dentro do modal): fotos+promoção à esquerda,
   informações+preço+pré-visualização à direita. */
.product-form-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-4); }
.product-form-grid > * { min-width: 0; }

.panel-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: 0 8px 26px -18px rgba(23,61,43,.35); }
.panel-card h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: 16px; margin-bottom: var(--sp-4); }
.card-icon { width: 18px; height: 18px; color: var(--gold-deep); flex-shrink: 0; }

/* ---------- Busca + abas de categoria (aba Produtos) ----------
   Um cartão só (sombra + borda, igual aos outros cartões do painel) reúne
   busca e categorias -- antes eram 2 elementos soltos direto no fundo
   creme da página, sem nenhuma moldura os unindo. */
.produtos-toolbar {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 26px -18px rgba(23,61,43,.35);
  margin-bottom: 2px;
}

/* Busca no formato pill -- rima de propósito com as abas de categoria logo
   abaixo dela (mesmo raio 999px), formando uma família visual só, em vez de
   um campo retangular solto ao lado de pills redondas. */
.search-bar { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 15px; width: 17px; height: 17px; color: var(--ink-dim); pointer-events: none; transition: color var(--ease) .15s; }
.search-bar input {
  width: 100%;
  padding: 12px 40px 12px 42px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--cream);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--ease) .15s, background var(--ease) .15s, box-shadow var(--ease) .15s;
}
/* Esconde o "x" nativo do input[type=search] (só existe no Chrome/Edge) --
   o botão de limpar customizado abaixo cobre isso de um jeito consistente
   entre navegadores, e sem duplicar o "x" no Chrome. */
.search-bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-bar input::placeholder { color: #a19b8a; }
.search-bar input:hover { border-color: #d9d0ba; }
.search-bar input:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201,154,59,.15);
}
.search-bar:focus-within .search-icon { color: var(--gold-deep); }

/* Dica de atalho de teclado: só aparece com o campo vazio e sem foco --
   some assim que a pessoa começa a digitar ou clica no campo, então nunca
   atrapalha o texto ou o botão de limpar. Ativada em wireProdutosToolbar()
   no painel.js (tecla "/" foca a busca de qualquer lugar da tela). */
.search-kbd {
  display: none; position: absolute; right: 13px;
  min-width: 18px; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--cream-2);
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--ink-dim);
  line-height: 1.4; text-align: center;
}
.search-bar input:placeholder-shown:not(:focus) ~ .search-kbd { display: block; }

.search-clear {
  display: none; position: absolute; right: 8px;
  width: 26px; height: 26px; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; color: var(--ink-dim);
  cursor: pointer; transition: background var(--ease) .15s, color var(--ease) .15s;
}
.search-clear svg { width: 13px; height: 13px; }
.search-clear:hover { background: var(--cream-2); color: var(--ink); }
.search-bar input:not(:placeholder-shown) ~ .search-clear { display: flex; }

.category-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.category-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); background: var(--cream); color: var(--ink-dim);
  border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: border-color var(--ease) .15s, background var(--ease) .15s, color var(--ease) .15s;
}
.category-pill:hover { border-color: var(--gold); background: #fff; color: var(--ink); }
.category-pill.is-active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.category-pill-count { font-size: 11px; font-weight: 700; opacity: .75; }
.produtos-found-count { font-size: 12.5px; color: var(--ink-dim); margin: var(--sp-3) 0 var(--sp-2); }

/* ---------- Modal genérico (hoje: atalho "Produtos em promoção") ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); overflow-y: auto;
  background: rgba(24,24,27,.5);
  animation: modal-fade-in .15s var(--ease);
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  background: #fff; border-radius: var(--radius-md); width: 100%; max-width: 640px;
  max-height: 85vh; overflow-y: auto; padding: var(--sp-5);
  box-shadow: 0 30px 60px -20px rgba(23,61,43,.45);
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.modal-header h2 { font-size: 20px; }
.modal-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gold-deep); margin-bottom: 4px; }
.modal-close {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center;
  border: none; border-radius: 8px; background: transparent; color: var(--ink-dim); cursor: pointer;
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.modal-close:hover { background: var(--cream-2); color: var(--ink); }
.modal-close svg { width: 16px; height: 16px; }
.modal-panel-wide { max-width: 860px; }

/* Modal "Ver peça" da loja: foto à esquerda, e à direita uma hierarquia de
   leitura de cima pra baixo -- título, descrição, preço + status,
   botão de compra (nessa ordem, de propósito: título e descrição vêm
   antes do preço porque é assim que se decide "isso é o que eu quero"
   antes de "quanto custa"). Reaproveita as classes de modal genérico já
   existentes (overlay/panel/eyebrow/close), sem duplicar CSS pra isso.
   O botão de fechar vira posição absoluta no canto do painel (antes
   vivia dentro de um .modal-header que ocupava a largura toda acima das
   2 colunas -- tirar esse header deixa o título de verdade dentro do
   fluxo da coluna de texto, não separado dela). */
.quickview-panel { max-width: 980px; position: relative; }
.quickview-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  background: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.25);
}
.quickview-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); align-items: start; }
.quickview-body h2 { font-size: 26px; line-height: 1.2; margin: 2px var(--sp-6) var(--sp-2) 0; }
/* Contêiner da foto -- não é mais só uma <img>: um produto com várias
   fotos recebe o mesmo mini-carrossel por arraste dos cards da vitrine
   (.card-carousel/.photo-dots, ver productPhotosHtml em js/loja.js), por
   isso position:relative + overflow:hidden aqui (o mesmo papel que
   .product-card .photo-wrap cumpre nos cards). */
.quickview-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md); background: var(--cream-2); }
.quickview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quickview-desc { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }

/* Contador "N / total" (canto inferior esquerdo da foto) e botão de tela
   cheia (inferior direito) -- ideia trazida de uma referência do base44
   (honored-canvas-home-edit.base44.app). O contador só aparece com mais
   de 1 foto; o botão de tela cheia aparece sempre (útil mesmo com 1 foto
   só, pra ver em tamanho grande). */
.quickview-counter {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  background: rgba(24, 24, 27, .6); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
}
.quickview-expand {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(24, 24, 27, .55); color: #fff; cursor: pointer;
  transition: background var(--ease) .15s;
}
.quickview-expand:hover { background: rgba(24, 24, 27, .8); }
.quickview-expand svg { width: 15px; height: 15px; }

/* Tira de miniaturas clicáveis abaixo da foto grande -- outro jeito de
   pular direto pra uma foto específica, além das setas/pontinhos. */
.quickview-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.quickview-thumb {
  flex: 0 0 auto; width: 56px; height: 56px;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; padding: 0; background: var(--cream-2); cursor: pointer;
  opacity: .6; transition: opacity var(--ease) .15s, border-color var(--ease) .15s;
}
.quickview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quickview-thumb:hover { opacity: .85; }
.quickview-thumb.is-active { opacity: 1; border-color: var(--gold); }

/* Lista de "informações adicionais" (material, acabamento, dimensões...
   uma por linha no painel) -- fica entre a descrição e o preço. */
.quickview-info { margin: var(--sp-3) 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.quickview-info-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--sp-2); }
.quickview-info ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.quickview-info li { font-size: 13.5px; color: var(--ink); }

/* Foto em tela cheia (botão de expandir) -- overlay simples por cima de
   tudo, sem zoom/arraste, só pra ver a foto grande. */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgba(24, 24, 27, .85);
  animation: modal-fade-in .15s var(--ease);
}
.lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close { position: fixed; top: var(--sp-4); right: var(--sp-4); background: #fff; }

@media (max-width: 640px) {
  .quickview-body { grid-template-columns: 1fr; }
}

/* Card de pré-visualização dentro do modal de produto: mesma cara do card
   da loja, só compacto -- some no bug do template base44 (lá vinha sempre
   com os campos em branco); aqui atualiza a cada tecla digitada. */
.form-preview-card { display: flex; gap: var(--sp-3); align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2); background: var(--cream); }
.form-preview-photo { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--cream-2); flex-shrink: 0; }
.form-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-preview-body { min-width: 0; }
.form-preview-body .tag { display: block; margin-bottom: 3px; }
.form-preview-body strong { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-preview-body .price-row { margin-top: 3px; display: flex; align-items: baseline; gap: 6px; }
.form-preview-body .price { font-size: 15px; }
.form-preview-body .price-old { font-size: 11px; }

@media (min-width: 1024px) {
  .sidebar-toggle, .sidebar-scrim { display: none; }
  .admin-sidebar { transform: translateX(0); }
  .admin-main { margin-left: 272px; }
}
@media (max-width: 1023px) {
  .admin-main-top { padding-top: 72px; }
}

.field-group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.field-group-label:first-child { margin-top: 0; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.field label { font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.field input, .field textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--ease) .15s;
  font-size: 14px;
  font-family: inherit;
  background: var(--cream);
  color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field textarea { resize: vertical; min-height: 70px; }
.field .hint { font-size: 11px; color: var(--ink-dim); }

/* Campo que só existe em função do campo/toggle acima dele (ex: preço
   promocional, que só faz sentido com "em promoção" ligado) -- o friso
   dourado deixa visível essa dependência, evitando confundir com um campo
   solto e igual aos outros. */
.field-nested { border-left: 2px solid var(--gold); padding-left: var(--sp-3); margin-left: 2px; }

/* ---------- Interruptor (produto em promoção ou não) ---------- */
.field-toggle { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.field-toggle-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.switch-label { font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.switch { position: relative; display: inline-flex; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { display: flex; align-items: center; box-sizing: border-box; width: 40px; height: 23px; padding: 3px; border-radius: 999px; background: var(--border); transition: background var(--ease) .15s; }
.switch-thumb { width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--ease) .15s; }
.switch input:checked + .switch-track { background: var(--green-vivid); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold-vivid); outline-offset: 2px; }

.form-actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }

/* ---------- Fotos do produto (galeria de várias imagens) ---------- */
.photo-uploader { border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--cream); overflow: hidden; padding: var(--sp-3); }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.photo-gallery-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.photo-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-gallery-badge {
  position: absolute; top: 5px; left: 5px; z-index: 1;
  background: var(--green-vivid); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
/* A barra de ações fica sempre visível (não só no hover) porque no celular
   não existe hover -- sem isso, mover/remover uma foto ficaria impossível
   de alcançar no touch. */
.photo-gallery-actions {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: space-between; gap: 3px; padding: 5px;
  background: linear-gradient(to top, rgba(24,24,27,.62), transparent);
}
.photo-gallery-btn {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border: none; border-radius: 6px; background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.photo-gallery-btn:disabled { opacity: .35; cursor: default; }
.photo-gallery-btn:not(:disabled):hover { background: #fff; }
.photo-gallery-btn-danger { color: var(--danger); }
.photo-gallery-add {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm); background: var(--cream);
  color: var(--ink-dim); font-size: 10.5px; font-weight: 700; text-align: center; cursor: pointer;
  transition: background var(--ease) .15s, border-color var(--ease) .15s, color var(--ease) .15s;
}
.photo-gallery-add:hover, .photo-gallery-add:focus-visible { background: var(--cream-2); border-color: var(--gold); color: var(--ink); }
.photo-gallery-add.drag-over { background: var(--green-tint); border-color: var(--green-vivid); }
.photo-gallery-add svg { width: 18px; height: 18px; }

.crop-stage {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-2);
  cursor: grab; touch-action: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage canvas { width: 100%; height: 100%; display: block; }
.crop-warning { max-width: 240px; margin: 8px auto 0; font-size: 11.5px; color: var(--danger); text-align: center; }
.crop-controls { max-width: 240px; margin: var(--sp-3) auto 0; }
.crop-zoom-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.crop-zoom-label input[type="range"] { flex: 1; accent-color: var(--green); }
.crop-drag-hint { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 8px 0 0; }
/* Empilhados (não lado a lado): "Escolher outra" e "Usar esta foto" não cabem
   um ao lado do outro nos 240px do quadro sem quebrar o texto em duas linhas. */
.crop-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.crop-actions .btn { width: 100%; }

.photo-tips { margin-top: var(--sp-2); font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); background: var(--cream-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.photo-tips strong { color: var(--ink); }

.status-msg { font-size: 12.5px; margin-top: var(--sp-2); min-height: 16px; }
.status-msg.ok { color: var(--ok); }
.status-msg.err { color: var(--danger); }

/* ---------- Barra de anúncio ---------- */
.announce-bar {
  background: var(--green-deep);
  color: var(--cream);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 9px var(--sp-4);
}

/* Traço curto sob um título -- recurso de hierarquia, não um eyebrow */
.heading-accent { position: relative; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3) !important; }
.heading-accent::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 3px;
  background: var(--gold);
}
/* ---------- Selos de confiança (logo abaixo do herói) ---------- */
.trust-row { border-bottom: 1px solid var(--border); background: var(--cream-2); }
.trust-row .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
}
.trust-item { display: flex; align-items: flex-start; gap: var(--sp-2); }
.trust-item svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--green-vivid); margin-top: 2px; }
.trust-item .t-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.trust-item .t-sub { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 2px; }

/* ---------- Como comprar (processo em 3 passos -- sequência real) ---------- */
.steps { background: var(--green); color: var(--cream); padding: clamp(80px, 10vw, 160px) 0; }
.steps h2 { font-size: clamp(28px, 1.6vw + 20px, 40px); }
.steps .container > p { max-width: 46ch; color: rgba(253,248,239,.82); font-size: 14.5px; margin-top: var(--sp-2); }
.steps-grid { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.step-item { border-top: 1px solid rgba(253,248,239,.25); padding-top: var(--sp-3); }
.step-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(226, 165, 46, .16); color: var(--gold-vivid); }
.step-icon svg { width: 22px; height: 22px; }
.step-item h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: var(--sp-2) 0 6px; }
.step-item p { font-size: 13.5px; opacity: .82; }

/* ---------- Botão do WhatsApp dentro dos CTAs ---------- */
.wa-icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary .wa-icon { color: var(--cream); }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: transform var(--ease) .15s;
}
.whatsapp-fab:hover { transform: translateY(-2px) scale(1.04); }
.whatsapp-fab svg { width: 28px; height: 28px; color: #fff; }

/* ---------- Rodapé ---------- */
/* Fundo verde escuro (--green-deep, a mesma família do verde usado no
   resto do site, só mais escura -- não um preto genérico) com 3
   colunas: marca, navegação ("Navegue") e contato ("Conecte-se") --
   cada uma com seus links empilhados, em vez do rodapé claro de 1
   linha só de antes. */
.site-footer { background: var(--green-deep); color: rgba(253, 248, 239, .75); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-6);
  padding: clamp(56px, 6vw, 88px) var(--sp-4) clamp(40px, 5vw, 64px);
}
.footer-brand .brand-name { display: block; font-size: 22px; font-family: var(--font-display); color: var(--cream); letter-spacing: -.01em; }
.footer-brand p { color: rgba(253, 248, 239, .65); font-size: 13.5px; line-height: 1.6; max-width: 34ch; margin-top: 6px; }

.footer-col .kicker { margin-bottom: var(--sp-3); }
.footer-nav-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-nav-list a { color: rgba(253, 248, 239, .8); text-decoration: none; font-size: 14px; transition: color .15s ease; }
.footer-nav-list a:hover { color: var(--gold-vivid); }

.footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(253, 248, 239, .15);
  font-size: 12px;
  color: rgba(253, 248, 239, .55);
}

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .hero-visual { order: -1; margin: 0 auto var(--sp-4); max-width: 320px; }
  .about .container, .contact .container, .product-form-grid { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav:not([hidden]) { display: flex; }
  .steps-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .category-intros { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; gap: 4px; padding: var(--sp-2) 0; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ---------- Login / configuração ---------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.auth-side {
  position: relative;
  background: var(--green);
  color: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.auth-side-rings {
  position: absolute;
  width: min(60vh, 400px);
  aspect-ratio: 1 / 1;
  bottom: -14%;
  right: -14%;
  opacity: .45;
  z-index: 0;
}
.auth-side-rings .ring-1 { border-color: var(--gold-vivid); }
.auth-side-rings .ring-2 { border-color: var(--cream); }
.auth-side-rings .ring-3 { border-color: var(--berry); }
.auth-side-content { position: relative; z-index: 1; text-align: center; max-width: 360px; }
.auth-side-content .auth-logo { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--gold-vivid); object-fit: cover; margin: 0 auto var(--sp-4); }
.auth-side-content h2 { font-size: 34px; margin-bottom: var(--sp-3); }
.auth-side-content p { font-size: 15.5px; opacity: .85; line-height: 1.6; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: var(--cream-2); }
.auth-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-5);
  max-width: 360px;
  width: 100%;
}
.auth-card h1 { font-size: 24px; margin-bottom: var(--sp-2); }
.auth-card p { color: var(--ink-dim); font-size: 14px; margin-bottom: var(--sp-4); }
.auth-card form { text-align: left; }
.auth-error { color: var(--danger); font-size: 13.5px; margin-bottom: var(--sp-3); }
.auth-hint { font-size: 12px; color: var(--ink-dim); margin-top: var(--sp-3); line-height: 1.5; }
.auth-hint code { background: var(--cream-2); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 800px) {
  .auth-page { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .auth-side { padding: var(--sp-5) var(--sp-4); }
  .auth-side-content h2 { font-size: 26px; }
  .auth-side-content p { display: none; }
  .auth-main { padding-top: var(--sp-6); align-items: flex-start; min-height: calc(100vh - 220px); }
}