/* DoceDoce — tokens e peças comuns (loja, pedido e admin) */
:root {
  /* papel de cada cor (inspirado na linguagem da Olipop, na paleta DoceDoce):
     cacau = tinta principal (texto, botões, barras) · creme = fundo · caramelo/dourado/bege = faixas de cor e selos */
  --cacau: #3a2016;
  --chocolate: #5e3424;
  --chocolate-2: #8a5a3c;
  --caramelo: #c98b4e;
  --bege: #f0dcc3;
  --bege-2: #f8ecdb;
  --creme: #fdf3e3;
  --branco: #fffaf2;
  --dourado: #dcb565;
  --dourado-claro: #f0d9a3;
  --dourado-brilho: linear-gradient(135deg, #f4e2b5 0%, #e0bc6e 55%, #c99a4c 100%);
  --texto: #4a362c;   /* corpo (charcoal quente) */
  --tinta: var(--cacau); /* títulos, botões, faixas escuras */
  --texto-2: #7a5644;
  --linha: #ead6bd;
  --verde: #4f7a4a;
  --vermelho: #b5483a;
  --sombra: 0 1px 2px rgba(59, 36, 24, .06), 0 6px 20px rgba(59, 36, 24, .08);
  --sombra-forte: 0 10px 40px rgba(59, 36, 24, .22);
  --raio: 16px;   /* cards */
  --raio-painel: 24px;
  --raio-p: 16px;
  --brilho-cta: 0 0 24px rgba(58, 32, 22, .18);
  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 {
  font-family: var(--fonte-titulo); font-weight: 900; line-height: 1.05; margin: 0; letter-spacing: -.005em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
a { color: var(--chocolate); }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .8em 1.4em;
  font-weight: 700; letter-spacing: .01em; text-decoration: none;
  background: var(--cacau); color: var(--branco);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--chocolate); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-ouro { background: var(--dourado-brilho); color: var(--cacau); box-shadow: 0 4px 14px rgba(201, 163, 95, .45); }
.btn-ouro:hover { background: var(--dourado-brilho); filter: brightness(1.04); }
.btn-claro { background: var(--bege); color: var(--chocolate); }
.btn-claro:hover { background: var(--dourado-claro); }
.btn-linha { background: transparent; color: var(--chocolate); box-shadow: inset 0 0 0 1.5px var(--linha); }
.btn-linha:hover { background: var(--bege-2); }
.btn-bloco { width: 100%; padding: 1em 1.4em; font-size: 1.05rem; }

.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo > span { font-size: .82rem; font-weight: 800; color: var(--texto-2); }
.input {
  width: 100%; border: 1px solid #d9b98f; background: #fff;
  border-radius: 50px; padding: .8em 1.2em; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--cacau); box-shadow: 0 0 0 4px rgba(201, 163, 95, .2); }
textarea.input { resize: vertical; min-height: 4.5em; border-radius: var(--raio-p); }
select.input { appearance: auto; }

.selo {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .72rem; font-weight: 800; padding: .25em .65em; border-radius: 999px;
  background: var(--bege); color: var(--chocolate); white-space: nowrap;
}
.selo-ouro { background: var(--dourado-brilho); color: var(--cacau); }
.selo-verde { background: #e5efdf; color: var(--verde); }
.selo-vermelho { background: #f6e0dc; color: var(--vermelho); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: var(--cacau); color: var(--branco); padding: .8em 1.2em; border-radius: 999px;
  font-weight: 700; box-shadow: var(--sombra-forte); max-width: calc(100vw - 32px); text-align: center;
  transition: transform .25s ease, opacity .25s ease;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* Interruptor (frete grátis, ativo, loja aberta...) */
.chave { position: relative; display: inline-flex; align-items: center; gap: .6em; cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave i {
  width: 44px; height: 26px; border-radius: 999px; background: #dccbb6; position: relative; flex: none;
  transition: background .2s ease;
}
.chave i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease;
}
.chave input:checked + i { background: var(--dourado); }
.chave input:checked + i::after { transform: translateX(18px); }
.chave input:focus-visible + i { box-shadow: 0 0 0 4px rgba(201, 163, 95, .3); }

.vazio { text-align: center; color: var(--texto-2); padding: 2.5rem 1rem; }
.vazio b { display: block; font-size: 2.4rem; margin-bottom: .3rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}