/* Topo, menu lateral, abas e rodapé comuns (includes/layout.php).
   Todas as regras ficam presas a essas classes para não mexer no resto das páginas. */
:root {
  --marrom: #5c3a28;
  --marrom-medio: #7a4a32;
  --terracota: #b5573a;
  --coral: #e2725b;
  --dourado: #c49a45;
  --creme: #fcf7f2;
  --creme-2: #f9ece2;
  --rosado: #f9e1d6;
  --borda: #ecdcd1;
  --texto: #2e1c12;
  --texto-suave: #8a6552;
  --claro: #f6e7cf;
}

.aviso-pedido, .aviso-pedido *, .topo-wrap, .topo-wrap *, .menu-lateral, .menu-lateral *,
.abas, .abas *, .rodape, .rodape * { box-sizing: border-box; }

/* ── Aviso "pedido confirmado" ───────────────────────────── */
.aviso-pedido {
  background: var(--marrom); color: #fff; padding: 10px 40px 10px 16px;
  text-align: center; font-family: 'Jost', sans-serif; font-size: 12.5px; position: relative;
}
.aviso-pedido[hidden] { display: none; }
.aviso-pedido-lista { display: flex; flex-direction: column; gap: 4px; }
.aviso-pedido-fechar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
}

/* ── Topo ────────────────────────────────────────────────── */
.topo-wrap { position: relative; z-index: 20; font-family: 'Jost', sans-serif; }
.topo {
  background: var(--marrom); color: var(--claro);
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  padding: 14px 14px 26px;
  clip-path: ellipse(120% 100% at 50% 0%); /* curva suave embaixo */
}
.topo-logo { justify-self: center; line-height: 0; }
.topo-logo img { width: clamp(150px, 46vw, 230px); height: auto; display: block; }
.topo-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: none; color: inherit; cursor: pointer; border-radius: 12px;
}
.topo-btn:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.topo-sacola { position: relative; justify-self: end; }
.sacola-qtd {
  position: absolute; top: 2px; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; font-family: 'Jost', sans-serif;
}
.sacola-qtd.vazia { background: rgba(246, 231, 207, .25); }
.sacola-escolha {
  position: absolute; right: 12px; top: calc(100% - 22px); z-index: 30;
  background: #fff; color: var(--texto); border-radius: 14px; padding: 12px;
  box-shadow: 0 10px 30px rgba(46, 28, 18, .18); min-width: 240px;
  display: flex; flex-direction: column; gap: 4px;
}
.sacola-escolha[hidden] { display: none; }
.sacola-escolha-titulo { font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
.sacola-escolha a {
  text-decoration: none; color: var(--texto); padding: 10px 12px; border-radius: 10px; font-size: 14px;
  display: flex; justify-content: space-between; gap: 10px; background: var(--creme);
}
.sacola-escolha a span { color: var(--coral); font-weight: 600; }

/* ── Menu lateral ────────────────────────────────────────── */
.menu-lateral { position: fixed; inset: 0; z-index: 1000; font-family: 'Jost', sans-serif; }
.menu-lateral[hidden] { display: none; }
.menu-fundo { position: absolute; inset: 0; background: rgba(46, 28, 18, .45); }
.menu-painel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(300px, 82vw);
  background: var(--creme); padding: 64px 12px 24px;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  box-shadow: 4px 0 24px rgba(46, 28, 18, .2);
}
.menu-painel a {
  text-decoration: none; font-size: 16px; padding: 13px 14px; border-radius: 12px; color: var(--texto);
}
.menu-painel a:hover, .menu-painel a:focus-visible { background: var(--rosado); outline: none; }
.menu-fechar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  background: none; border: none; font-size: 28px; color: var(--texto-suave); cursor: pointer;
}

/* ── Seções em cards com foto (como na página inicial, versão baixa) ── */
.secoes, .secoes * { box-sizing: border-box; }
.secoes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 10px 12px; font-family: 'Jost', sans-serif;
}
.secoes-5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 4.3); overflow-x: auto; scrollbar-width: none; }
.secoes-5::-webkit-scrollbar { display: none; }
.secao {
  text-decoration: none; background: #fff8f3; border: 1px solid var(--borda);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.secao:hover, .secao:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(92, 58, 40, .15); outline: none; }
.secao-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rosado); }
.secao-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.secao-nome {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 7px 4px; font-size: 12px; font-weight: 500; line-height: 1.15; color: var(--texto); min-height: 42px;
}
.secao-nome span { color: var(--terracota); font-size: 15px; }
.secao.ativa { border: 2px solid var(--marrom); }
.secao.ativa .secao-nome { background: var(--marrom); color: #fff; }
.secao.ativa .secao-nome span { color: var(--claro); }
.secao-evento:not(.ativa) .secao-nome { background: var(--ev, var(--dourado)); color: #fff; }
.secao-evento:not(.ativa) .secao-nome span { color: #fff; }

/* ── Data especial: cores do tema, faixa com contagem e enfeite do topo ──
   Enfeites são imagens SVG no próprio CSS (sem JS). Gerado para os temas de EVENTO_TEMAS (includes/layout.php). */
.tema-natal { --ev: #a8322d; --ev-escuro: #7f2420; }
.tema-pascoa { --ev: #8e6bb8; --ev-escuro: #6f4f99; }
.tema-namorados { --ev: #c23b5a; --ev-escuro: #9c2c47; }
.tema-maes { --ev: #c76b98; --ev-escuro: #a3527a; }
.tema-halloween { --ev: #c8641e; --ev-escuro: #9f4d14; }
.tema-aniversario { --ev: #e2725b; --ev-escuro: #c0583f; }
.tema-inauguracao { --ev: #9b2c3e; --ev-escuro: #74202f; }
.tema-outro { --ev: #c49a45; --ev-escuro: #a88136; }

.faixa-evento {
  display: block; text-align: center; text-decoration: none; font-family: 'Jost', sans-serif;
  background: var(--ev); color: #fff; padding: 9px 14px; font-size: 13px; font-weight: 500; line-height: 1.35;
}
.faixa-evento-ver { text-decoration: underline; font-weight: 600; white-space: nowrap; }
a.faixa-evento:hover { background: var(--ev-escuro); }

/* Enfeite pendurado no alto do topo (todos os temas menos "outra data") */
.topo-wrap.tema-natal .topo, .topo-wrap.tema-pascoa .topo, .topo-wrap.tema-namorados .topo, .topo-wrap.tema-maes .topo, .topo-wrap.tema-halloween .topo, .topo-wrap.tema-aniversario .topo { position: relative; padding-top: 26px; }
.topo-wrap.tema-natal .topo::before, .topo-wrap.tema-pascoa .topo::before, .topo-wrap.tema-namorados .topo::before, .topo-wrap.tema-maes .topo::before, .topo-wrap.tema-halloween .topo::before, .topo-wrap.tema-aniversario .topo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none;
  background-repeat: repeat-x; background-position: center top;
}
.topo-wrap.tema-natal .topo::before { background-size: 192px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' viewBox='0 0 192 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3 T192 3' fill='none' stroke='%232f4a2a' stroke-width='1.5' opacity='1'/%3E%3Crect x='30' y='6' width='4' height='3' fill='%23c49a45'/%3E%3Ccircle cx='32' cy='13' r='4' fill='%23e2433b'/%3E%3Crect x='94' y='6' width='4' height='3' fill='%23c49a45'/%3E%3Ccircle cx='96' cy='13' r='4' fill='%23f2c14e'/%3E%3Crect x='158' y='6' width='4' height='3' fill='%23c49a45'/%3E%3Ccircle cx='160' cy='13' r='4' fill='%234caf6a'/%3E%3C/svg%3E"); }
.topo-wrap.tema-pascoa .topo::before { background-size: 256px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='24' viewBox='0 0 256 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3 T192 3 T256 3' fill='none' stroke='%23f6e7cf' stroke-width='1.5' opacity='0.6'/%3E%3Cellipse cx='32' cy='13' rx='4.5' ry='6' fill='%23f6c6d8'/%3E%3Cellipse cx='96' cy='13' rx='4.5' ry='6' fill='%23c9b6e8'/%3E%3Cellipse cx='160' cy='13' rx='4.5' ry='6' fill='%23bfe3cf'/%3E%3Cellipse cx='224' cy='13' rx='4.5' ry='6' fill='%23f9e3a3'/%3E%3C/svg%3E"); }
.topo-wrap.tema-namorados .topo::before { background-size: 128px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='24' viewBox='0 0 128 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3' fill='none' stroke='%23f6e7cf' stroke-width='1.5' opacity='0.5'/%3E%3Cpath d='M32 19 C26 14 26 8 29.5 8 C31 8 32 9.5 32 10 C32 9.5 33 8 34.5 8 C38 8 38 14 32 19 Z' fill='%23e2433b'/%3E%3Cpath d='M96 19 C90 14 90 8 93.5 8 C95 8 96 9.5 96 10 C96 9.5 97 8 98.5 8 C102 8 102 14 96 19 Z' fill='%23f6a5b8'/%3E%3C/svg%3E"); }
.topo-wrap.tema-maes .topo::before { background-size: 128px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='24' viewBox='0 0 128 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3' fill='none' stroke='%23f6e7cf' stroke-width='1.5' opacity='0.5'/%3E%3Ccircle cx='32' cy='9' r='2.8' fill='%23f6a5c8'/%3E%3Ccircle cx='35.8' cy='11.8' r='2.8' fill='%23f6a5c8'/%3E%3Ccircle cx='34.4' cy='16.2' r='2.8' fill='%23f6a5c8'/%3E%3Ccircle cx='29.6' cy='16.2' r='2.8' fill='%23f6a5c8'/%3E%3Ccircle cx='28.2' cy='11.8' r='2.8' fill='%23f6a5c8'/%3E%3Ccircle cx='32' cy='13' r='2' fill='%23f9e3a3'/%3E%3Ccircle cx='96' cy='9' r='2.8' fill='%23c9b6e8'/%3E%3Ccircle cx='99.8' cy='11.8' r='2.8' fill='%23c9b6e8'/%3E%3Ccircle cx='98.4' cy='16.2' r='2.8' fill='%23c9b6e8'/%3E%3Ccircle cx='93.6' cy='16.2' r='2.8' fill='%23c9b6e8'/%3E%3Ccircle cx='92.2' cy='11.8' r='2.8' fill='%23c9b6e8'/%3E%3Ccircle cx='96' cy='13' r='2' fill='%23f9e3a3'/%3E%3C/svg%3E"); }
.topo-wrap.tema-halloween .topo::before { background-size: 128px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='24' viewBox='0 0 128 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3' fill='none' stroke='%232b1a10' stroke-width='1.5' opacity='1'/%3E%3Crect x='31' y='6' width='2' height='4' fill='%234c7a3a'/%3E%3Cellipse cx='32' cy='14' rx='6.5' ry='5.5' fill='%23e8862e'/%3E%3Cpath d='M32 9 V19' stroke='%23c4651a' stroke-width='1'/%3E%3Crect x='95' y='6' width='2' height='4' fill='%234c7a3a'/%3E%3Cellipse cx='96' cy='14' rx='6.5' ry='5.5' fill='%23e8862e'/%3E%3Cpath d='M96 9 V19' stroke='%23c4651a' stroke-width='1'/%3E%3C/svg%3E"); }
.topo-wrap.tema-aniversario .topo::before { background-size: 256px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='24' viewBox='0 0 256 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3 T192 3 T256 3' fill='none' stroke='%23f6e7cf' stroke-width='1.5' opacity='0.6'/%3E%3Cpolygon points='24,5 40,5 32,19' fill='%23e2725b'/%3E%3Cpolygon points='88,5 104,5 96,19' fill='%23f2c14e'/%3E%3Cpolygon points='152,5 168,5 160,19' fill='%234caf6a'/%3E%3Cpolygon points='216,5 232,5 224,19' fill='%239b7bc4'/%3E%3C/svg%3E"); }
/* Inauguração: mesmas bandeirinhas do Aniversário */
.topo-wrap.tema-inauguracao .topo { position: relative; padding-top: 26px; }
.topo-wrap.tema-inauguracao .topo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none; background-repeat: repeat-x; background-position: center top; }
.topo-wrap.tema-inauguracao .topo::before { background-size: 256px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='24' viewBox='0 0 256 24'%3E%3Cpath d='M0 3 Q32 13 64 3 T128 3 T192 3 T256 3' fill='none' stroke='%23f6e7cf' stroke-width='1.5' opacity='0.6'/%3E%3Cpolygon points='24,5 40,5 32,19' fill='%23e2725b'/%3E%3Cpolygon points='88,5 104,5 96,19' fill='%23f2c14e'/%3E%3Cpolygon points='152,5 168,5 160,19' fill='%234caf6a'/%3E%3Cpolygon points='216,5 232,5 224,19' fill='%239b7bc4'/%3E%3C/svg%3E"); }

/* Natal: luzinhas acendendo e apagando devagar (duas camadas de brilho, fora de fase) */
.topo-wrap.tema-natal .topo::after, .topo-wrap.tema-natal::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none;
  background-repeat: repeat-x; background-position: center top; background-size: 192px 24px;
  animation: pisca-pisca 2.6s ease-in-out infinite alternate;
}
.topo-wrap.tema-natal .topo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' viewBox='0 0 192 24'%3E%3Ccircle cx='32' cy='13' r='8' fill='%23ff5a4f' opacity='.45'/%3E%3Ccircle cx='160' cy='13' r='8' fill='%236fdc8c' opacity='.45'/%3E%3C/svg%3E"); }
.topo-wrap.tema-natal::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' viewBox='0 0 192 24'%3E%3Ccircle cx='96' cy='13' r='8' fill='%23ffd666' opacity='.45'/%3E%3C/svg%3E"); animation-delay: -1.3s; z-index: 1; }
@keyframes pisca-pisca { from { opacity: .1; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .topo-wrap.tema-natal .topo::after, .topo-wrap.tema-natal::after { animation: none; opacity: .6; }
}

/* Página do evento: estoque baixo e compartilhar */
.stock-pill.ultimas, .pcard-stock.ultimas {
  background: #a8322d; color: #fff; border-color: #a8322d; font-weight: 600;
}
.pcard-stock.ultimas { display: inline-block; padding: 2px 8px; border-radius: 8px; margin-top: 4px; }
.btn-compartilhar {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; text-decoration: none;
  padding: 8px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--borda);
  color: #1f7a3d; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
}
.btn-compartilhar:hover { background: #eafaf1; }

/* Barra de informações das páginas de computador: link de consulta no lugar das abas */
.info-consulta {
  margin-left: auto; text-decoration: none; white-space: nowrap; font-family: 'Jost', sans-serif;
  padding: 8px 16px; border-radius: 12px; font-size: 13px; font-weight: 500;
  background: #fff8f3; border: 1px solid var(--borda); color: var(--texto-suave);
}

/* ── Botões no estilo do modelo (marrom arredondado, como "Fazer meu pedido") ──
   Só aparência: as classes e ids continuam os mesmos, o JS de cada página não muda.
   :not(:disabled) mantém o visual de botão desativado de cada página. */
.btn-primary:not(:disabled), .btn-checkout:not(:disabled), .btn-pagseguro:not(:disabled),
.btn-whatsapp:not(:disabled), .btn-wpp:not(:disabled), .cart-bar {
  background: var(--marrom-medio); color: #fff; border: none; border-radius: 14px;
  font-family: 'Jost', sans-serif; font-weight: 500;
  box-shadow: 0 6px 18px rgba(92, 58, 40, .25);
}
.btn-primary:not(:disabled):hover, .btn-checkout:not(:disabled):hover, .btn-pagseguro:not(:disabled):hover,
.btn-whatsapp:not(:disabled):hover, .btn-wpp:not(:disabled):hover { background: var(--marrom); }
.btn-wpp svg { display: none; } /* ícone do WhatsApp sobrou no botão "Adicionar ao carrinho" */
.btn-add:not(:disabled), .pcard-add:not(:disabled) {
  background: var(--marrom-medio); color: #fff; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(92, 58, 40, .22);
}
.btn-add:not(:disabled):hover, .pcard-add:not(:disabled):hover { background: var(--marrom); }
.qty-ctrl { border-color: var(--borda); border-radius: 12px; }
.btn-close-modal { border-color: var(--borda); border-radius: 14px; color: var(--texto-suave); }
.cart-count { color: var(--marrom-medio); }
.badge-chip, .hero-badge { background: #fff8f3; border-color: var(--borda); color: var(--texto-suave); }

@media (min-width: 900px) {
  .secoes { max-width: 1100px; margin: 0 auto; gap: 16px; padding: 16px 40px 8px; }
  .secoes-5 { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .secao-foto { aspect-ratio: 16 / 9; }
  .secao-nome { font-size: 14px; min-height: 46px; }
}

/* Páginas de computador: a barra de informações (aberto, cidade, abas) vem logo
   abaixo do topo; sem fundo branco nem linha, ela continua o fundo creme. */
.topo-wrap ~ .info-bar { background: transparent; border-top: 0; }

/* ── Rodapé ──────────────────────────────────────────────── */
.rodape {
  /* display/border: as páginas de computador têm uma regra antiga footer{display:flex;...} */
  display: block; border-top: 0;
  background: var(--marrom-medio); color: var(--claro); font-family: 'Jost', sans-serif;
  margin-top: 28px; padding: 44px 24px 22px;
  clip-path: ellipse(130% 100% at 50% 100%);
}
.rodape-conteudo { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; }
.rodape h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0 0 10px; color: var(--claro); }
.rodape a { color: var(--claro); }
.rodape-insta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; }
.rodape-redes { display: flex; align-items: center; gap: 12px; }
.rodape-redes a {
  width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--claro);
  display: grid; place-items: center; text-decoration: none;
}
.rodape-redes a:hover { background: rgba(246, 231, 207, .12); }
.rodape-divisor { width: 1px; height: 36px; background: rgba(246, 231, 207, .45); }
.rodape-links {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; font-size: 12px; opacity: .8;
}
.rodape-links a { text-decoration: none; }

@media (min-width: 900px) {
  .topo { grid-template-columns: 56px 1fr 56px; padding: 18px 40px 34px; }
  .topo-logo img { width: 240px; }
  .rodape { padding: 56px 40px 26px; }
  .rodape h2 { font-size: 32px; }
}