/* ==========================================================================
   TEMAS — as 8 paletas de cor e as 3 duplas de fonte
   --------------------------------------------------------------------------
   O js/tema.js marca no <html> qual tema está valendo:
     <html data-cores="rose" data-fontes="delicada">
   e este arquivo troca as variáveis do :root para aquele tema. Como o site
   inteiro (e os módulos: css/monte.css, css/financeiro.css) só usa as
   variáveis, trocar o tema troca tudo — vitrine, página da cestinha, painel.

   "verde" e "classica" são o visual do css/estilo.css: não precisam de bloco.
   Carrega DEPOIS do enxuto.css (que também mexe nas sombras).

   CONTRASTE MEDIDO na tela de verdade em 30/09/2026, texto por texto: todos
   os temas passam de 4,5:1 no texto de leitura. Em 19/10/2026 saíram rosa
   chá, azul névoa, baunilha e algodão (o Pedro achou pouco feminino) e
   entraram 7 paletas novas, medidas na conta (WCAG): todas passam de 4,5:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CORES
   -------------------------------------------------------------------------- */

/* AREIA — bege quente e limpo. Botão de areia com texto escuro (8,9:1); o
   marrom da marca fica para preço e texto pequeno (5,8:1 no fundo). */
:root[data-cores="areia"] {
  --cor-fundo: #fbf8f4;
  --cor-superficie: #ffffff;
  --cor-capa: #efe6da;
  --cor-primaria: #806146;
  --cor-primaria-escura: #7a5c42;
  --cor-primaria-hover: #634a35;
  --cor-primaria-suave: #f2eadf;
  --cor-texto: #3b3128;
  --cor-texto-suave: #6e6155;
  --cor-borda: #e8ddcf;
  --cor-botao: #d4b995;            /* 1,52:1 contra a capa: o botão principal se destaca do branco */
  --cor-botao-texto: #2b2118;
  --cor-botao-hover: #c8a97f;
  --sombra: 0 1px 2px rgba(59, 49, 40, .04), 0 4px 12px rgba(59, 49, 40, .05);
  --sombra-forte: 0 8px 24px rgba(59, 49, 40, .12);
}

/* ROSÉ NUDE — rosa empoeirado, o mais delicado. Botão nude com texto escuro; o rosa fechado da marca fica para preço e texto pequeno.
   Medido: texto do botão 9,1:1; marca no fundo 6,1:1; o menor de todos 5,2:1. */
:root[data-cores="rose"] {
  --cor-fundo: #fdf8f6;
  --cor-superficie: #ffffff;
  --cor-capa: #f5e6e1;
  --cor-primaria: #8f4a52;
  --cor-primaria-escura: #8a464e;
  --cor-primaria-hover: #6f373e;
  --cor-primaria-suave: #f7e9e5;
  --cor-texto: #3a2829;
  --cor-texto-suave: #735a5b;
  --cor-borda: #eddcd7;
  --cor-botao: #e5b9b0;
  --cor-botao-texto: #2e1d1e;
  --cor-botao-hover: #d9a499;
  --sombra: 0 1px 2px rgba(58, 40, 41, .04), 0 4px 12px rgba(58, 40, 41, .05);
  --sombra-forte: 0 8px 24px rgba(58, 40, 41, .12);
}

/* VINHO — bordô de presente fino. Botão vinho cheio com texto branco.
   Medido: texto do botão 9,9:1; marca no fundo 9,4:1; o menor de todos 5,3:1. */
:root[data-cores="vinho"] {
  --cor-fundo: #fcf8f7;
  --cor-superficie: #ffffff;
  --cor-capa: #f3e5e4;
  --cor-primaria: #7a2338;
  --cor-primaria-escura: #722034;
  --cor-primaria-hover: #5a1829;
  --cor-primaria-suave: #f6e8e7;
  --cor-texto: #33232a;
  --cor-texto-suave: #6e5860;
  --cor-borda: #ead9d9;
  --cor-botao: #7a2338;
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: #611a2c;
  --sombra: 0 1px 2px rgba(51, 35, 42, .04), 0 4px 12px rgba(51, 35, 42, .05);
  --sombra-forte: 0 8px 24px rgba(51, 35, 42, .12);
}

/* AMOOR (só desta loja) — o vinho do logo da Cestas com Amoor (#5B1616) com o rosa claro das letras.
   Uma cor de marca só: botão, preço e selo no vinho; o rosa fica no fundo da capa. */
:root[data-cores="marca"] {
  --cor-fundo: #fdf7f6;
  --cor-superficie: #ffffff;
  --cor-capa: #f9dedb;
  --cor-primaria: #5b1616;
  --cor-primaria-escura: #531414;
  --cor-primaria-hover: #431010;
  --cor-primaria-suave: #f8e6e4;
  --cor-texto: #331f1e;
  --cor-texto-suave: #6c5452;
  --cor-borda: #edd8d6;
  --cor-botao: #5b1616;
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: #431010;
  --sombra: 0 1px 2px rgba(51, 31, 30, .04), 0 4px 12px rgba(51, 31, 30, .05);
  --sombra-forte: 0 8px 24px rgba(51, 31, 30, .12);
}

/* CHOCOLATE E ROSÉ — marrom de bombom com rosé. Botão rosé com texto escuro; o chocolate fica para preço e texto pequeno.
   Medido: texto do botão 8,7:1; marca no fundo 8,4:1; o menor de todos 5,2:1. */
:root[data-cores="chocolate"] {
  --cor-fundo: #fbf7f5;
  --cor-superficie: #ffffff;
  --cor-capa: #f1e4df;
  --cor-primaria: #65403b;
  --cor-primaria-escura: #5f3c37;
  --cor-primaria-hover: #4b2f2b;
  --cor-primaria-suave: #f4e8e3;
  --cor-texto: #33241f;
  --cor-texto-suave: #6c5a54;
  --cor-borda: #e8d9d3;
  --cor-botao: #dcb3a6;
  --cor-botao-texto: #2b1a16;
  --cor-botao-hover: #d0a091;
  --sombra: 0 1px 2px rgba(51, 36, 31, .04), 0 4px 12px rgba(51, 36, 31, .05);
  --sombra-forte: 0 8px 24px rgba(51, 36, 31, .12);
}

/* MALVA — lilás acinzentado, romântico sem ser infantil. Botão malva claro com texto escuro.
   Medido: texto do botão 8,5:1; marca no fundo 6,9:1; o menor de todos 5,2:1. */
:root[data-cores="malva"] {
  --cor-fundo: #fbf8f9;
  --cor-superficie: #ffffff;
  --cor-capa: #efe4e9;
  --cor-primaria: #76495f;
  --cor-primaria-escura: #70445a;
  --cor-primaria-hover: #5a364a;
  --cor-primaria-suave: #f2e8ed;
  --cor-texto: #33262d;
  --cor-texto-suave: #6c5a63;
  --cor-borda: #e6dae0;
  --cor-botao: #d0b2c1;
  --cor-botao-texto: #2a1a22;
  --cor-botao-hover: #c29fb2;
  --sombra: 0 1px 2px rgba(51, 38, 45, .04), 0 4px 12px rgba(51, 38, 45, .05);
  --sombra-forte: 0 8px 24px rgba(51, 38, 45, .12);
}

/* CEREJA — vermelho de laço, o mais forte. Botão vermelho cheio com texto branco.
   Medido: texto do botão 6,4:1; marca no fundo 7,1:1; o menor de todos 5,1:1. */
:root[data-cores="cereja"] {
  --cor-fundo: #fffaf8;
  --cor-superficie: #ffffff;
  --cor-capa: #f9e6e3;
  --cor-primaria: #a1272f;
  --cor-primaria-escura: #9a232b;
  --cor-primaria-hover: #7e1d24;
  --cor-primaria-suave: #fbe9e6;
  --cor-texto: #3a2425;
  --cor-texto-suave: #775a5b;
  --cor-borda: #f0dbd8;
  --cor-botao: #b02d37;
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: #951f29;
  --sombra: 0 1px 2px rgba(58, 36, 37, .04), 0 4px 12px rgba(58, 36, 37, .05);
  --sombra-forte: 0 8px 24px rgba(58, 36, 37, .12);
}

/* TELHA — terracota suave, de cesta rústica. Botão telha claro com texto escuro.
   Medido: texto do botão 7,7:1; marca no fundo 6,3:1; o menor de todos 4,9:1. */
:root[data-cores="telha"] {
  --cor-fundo: #fdf8f4;
  --cor-superficie: #ffffff;
  --cor-capa: #f3e1d7;
  --cor-primaria: #92472f;
  --cor-primaria-escura: #8c432c;
  --cor-primaria-hover: #733623;
  --cor-primaria-suave: #f6e6dd;
  --cor-texto: #3b2a24;
  --cor-texto-suave: #725c52;
  --cor-borda: #ecdcd0;
  --cor-botao: #dba58f;
  --cor-botao-texto: #2c1a13;
  --cor-botao-hover: #cf917a;
  --sombra: 0 1px 2px rgba(59, 42, 36, .04), 0 4px 12px rgba(59, 42, 36, .05);
  --sombra-forte: 0 8px 24px rgba(59, 42, 36, .12);
}

/* OLIVA CLARA — verde oliva claro, de café da manhã e natureza. Botão oliva claro com texto escuro.
   Medido: texto do botão 8,4:1; marca no fundo 5,8:1; o menor de todos 4,7:1. */
:root[data-cores="oliva"] {
  --cor-fundo: #faf9f4;
  --cor-superficie: #ffffff;
  --cor-capa: #e9eadc;
  --cor-primaria: #58673f;
  --cor-primaria-escura: #546239;
  --cor-primaria-hover: #434f2e;
  --cor-primaria-suave: #eff0e3;
  --cor-texto: #2f3427;
  --cor-texto-suave: #626a54;
  --cor-borda: #dfe1d0;
  --cor-botao: #bfc79f;
  --cor-botao-texto: #242a1a;
  --cor-botao-hover: #b0b98c;
  --sombra: 0 1px 2px rgba(47, 52, 39, .04), 0 4px 12px rgba(47, 52, 39, .05);
  --sombra-forte: 0 8px 24px rgba(47, 52, 39, .12);
}

/* Os três desenhos pequenos que levam a cor escrita dentro (desenho embutido
   não lê variável de CSS): a setinha do select, o tique da lista "O que vem
   dentro" e a cestinha da foto que falta. Um jogo por tema. */
:root[data-cores="areia"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806146' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="areia"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c42' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="areia"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23806146' 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");
}
:root[data-cores="rose"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f4a52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="rose"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a464e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="rose"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%238f4a52' 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");
}
:root[data-cores="vinho"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2338' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="vinho"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23722034' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="vinho"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%237a2338' 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");
}
:root[data-cores="marca"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b1616' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="marca"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23531414' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="marca"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%235b1616' 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");
}
:root[data-cores="chocolate"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365403b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="chocolate"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f3c37' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="chocolate"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2365403b' 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");
}
:root[data-cores="malva"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376495f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="malva"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370445a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="malva"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2376495f' 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");
}
:root[data-cores="cereja"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1272f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="cereja"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a232b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="cereja"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23a1272f' 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");
}
:root[data-cores="telha"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392472f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="telha"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c432c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="telha"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2392472f' 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");
}
:root[data-cores="oliva"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358673f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="oliva"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546239' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="oliva"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2358673f' 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");
}

/* --------------------------------------------------------------------------
   2) FONTES
   --------------------------------------------------------------------------
   Nas duas duplas novas, o nome da cestinha e os preços vão para a fonte de
   texto: serifa fina (Cormorant) em letra pequena não se lê no celular, e o
   preço fica mais claro em letra reta. Os títulos grandes seguem na fonte de
   título, que é onde ela brilha. */

:root[data-fontes="delicada"] {
  --fonte-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
:root[data-fontes="suave"] {
  --fonte-titulo: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-corpo: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

:root[data-fontes="delicada"] :is(.cartao__nome, .cartao__preco, .produto__preco, .item-monte__preco, .barra-total__valor, .barra-extras strong, .data-especial__nome, .data-especial__preco),
:root[data-fontes="suave"] :is(.cartao__nome, .cartao__preco, .produto__preco, .item-monte__preco, .barra-total__valor, .barra-extras strong, .data-especial__nome, .data-especial__preco) {
  font-family: var(--fonte-corpo);
  font-weight: 600;
}

/* A Cormorant é fina: nos títulos grandes ela ganha peso. (O nome da loja
   no topo já é grande nas três fontes desde a capa de 14/10/2026.) */
:root[data-fontes="delicada"] :is(.capa #titulo-loja, .secao__titulo, .produto h1, .data-especial__titulo, .datas-previa__titulo) { font-weight: 700; letter-spacing: .005em; }
:root[data-fontes="delicada"] .marca__nome { font-size: 1.25rem; }
@media (min-width: 640px) {
  :root[data-fontes="delicada"] .marca__nome { font-size: 1.55rem; }
}

/* --------------------------------------------------------------------------
   3) O BOTÃO "CORES E FONTES" (só na demonstração — js/tema.js)
   -------------------------------------------------------------------------- */

/* Os dois atalhos da demonstração, lado a lado no canto: "Painel da loja" e
   "Cores e fontes". */
.demo-atalhos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;                      /* acima da barra do WhatsApp (40) */
  display: flex;
  gap: 8px;
}

.tema-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  font-weight: 700;
  box-shadow: var(--sombra-forte);
  cursor: pointer;
}
.tema-botao svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cor-primaria); }
.tema-botao[aria-expanded="true"] { border-color: var(--cor-primaria); }
a.tema-botao { text-decoration: none; }
.tema-botao:hover { border-color: var(--cor-primaria); }

.tema-painel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 46;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px 18px 18px;
  border: 1px solid var(--cor-borda);
  border-radius: 18px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.tema-painel[hidden] { display: none; }

/* Na página da cestinha, no celular, a barra do WhatsApp mora embaixo. */
@media (max-width: 899px) {
  .com-barra-fixa .demo-atalhos { bottom: 88px; }
  .com-barra-fixa .tema-painel { bottom: 144px; max-height: calc(100vh - 170px); }
}
/* Celular estreito: a letra um pouco menor. */
@media (max-width: 380px) {
  .demo-atalhos { right: 10px; gap: 6px; }
  .tema-botao { padding: 10px 12px; font-size: .82rem; }
}

/* Celular (18/10/2026): UM botão só flutuando. Os dois lado a lado cobriam
   o pé dos cartões e, na cestinha, empilhavam sobre a barra do WhatsApp
   (três coisas fixas). Agora o "Painel da loja" mora dentro do painel de
   cores, e o botão se chama "Visual e painel". No computador, nada muda. */
.tema-botao__cel,
.tema-painel__dona { display: none; }
@media (max-width: 699px) {
  .demo-painel,
  .tema-botao__pc { display: none; }
  .tema-botao__cel { display: inline; }
  .tema-painel__dona { display: flex; }
}
.tema-painel__dona {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.tema-painel__dona svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cor-primaria); }
.tema-painel__dona:hover { border-color: var(--cor-primaria); }

.tema-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-painel__titulo { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.tema-painel__fechar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}
.tema-painel__fechar svg { width: 18px; height: 18px; }
.tema-painel__ajuda { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--cor-texto-suave); }
.tema-painel__rotulo { margin: 14px 0 8px; font-size: .82rem; font-weight: 700; color: var(--cor-texto-suave); }

.tema-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.tema-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 6px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.tema-opcao:hover { border-color: var(--cor-primaria); }
/* Escolhida: borda grossa na cor da marca — não depende só da cor do fundo. */
.tema-opcao[aria-pressed="true"] {
  border-color: var(--cor-primaria);
  box-shadow: inset 0 0 0 1px var(--cor-primaria);
  background: var(--cor-superficie);
}

/* A amostra de cada data especial: a cor e o desenho da data. */
.tema-data-amostra {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.tema-data-amostra svg { width: 18px; height: 18px; }
.tema-data-amostra--sem { background: var(--cor-fundo); border: 1.5px dashed var(--cor-borda); box-shadow: none; }

.tema-amostras { display: flex; }
.tema-amostras i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cor-superficie);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.tema-amostras i + i { margin-left: -6px; }
.tema-aa { font-size: 1.6rem; font-weight: 700; line-height: 1; }

@media print {
  .demo-atalhos, .tema-painel { display: none; }
}

/* ==========================================================================
   OPÇÕES DA LOJA PERSONALIZADA (18/10/2026)
   --------------------------------------------------------------------------
   Escolhidas pela cliente no formulário de início e gravadas no PADRAO do
   js/tema.js. Sem escolha, a loja fica como sempre foi (borda redonda e
   botão cheio). A Loja Modelo não oferece estas opções.
   ========================================================================== */

/* Borda: os cantos da loja inteira saem destas três variáveis. */
:root[data-borda="reta"]  { --raio: 0px; --raio-p: 0px; --raio-pilula: 0px; }
:root[data-borda="suave"] { --raio: 8px; --raio-p: 6px; --raio-pilula: 8px; }

/* Botão só com contorno: a cor da marca no fio e no texto; ao passar o
   dedo ou o mouse, ele enche. */
:root[data-botao="contorno"] .botao--principal {
  background: transparent;
  color: var(--cor-primaria-escura);
  border: 1.5px solid currentColor;
  box-shadow: none;
}
:root[data-botao="contorno"] .botao--principal:hover {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: var(--cor-fundo, #fff);
}

/* Fundo na cor: a página inteira no tom da capa; os cartões continuam
   brancos por cima, então o texto não perde contraste. */
:root[data-fundo="cor"] { --cor-fundo: var(--cor-capa); }

/* As 3 letras só da Personalizada. Como na Delicada e na Suave, o nome da
   cestinha e os preços ficam na letra de texto, que se lê melhor pequena. */
:root[data-fontes="romantica"] {
  --fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
/* Escrita à mão: a letra cursiva só no nome da loja (no alto e na capa);
   nos outros títulos ela cansaria a leitura, então eles vão na Lora. */
:root[data-fontes="manuscrita"] {
  --fonte-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-nome: 'Dancing Script', 'Brush Script MT', cursive;
}
:root[data-fontes="manuscrita"] :is(.capa #titulo-loja, .marca__nome) { font-family: var(--fonte-nome); font-weight: 700; letter-spacing: 0; }
:root[data-fontes="manuscrita"] .marca__nome { font-size: 1.3em; }
:root[data-fontes="moderna"] {
  --fonte-titulo: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-corpo: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
:root:is([data-fontes="romantica"], [data-fontes="manuscrita"], [data-fontes="moderna"]) :is(.cartao__nome, .cartao__preco, .produto__preco, .item-monte__preco, .barra-total__valor, .barra-extras strong, .data-especial__nome, .data-especial__preco) {
  font-family: var(--fonte-corpo);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   A CAPA (só na Personalizada). O HTML e o js/capa.js são os mesmos da capa
   de sempre (o "cartaz"): aqui só muda o desenho. Nas duas, uma foto por
   vez, trocando por esmaecimento (o --c de cada foto é o lugar dela na
   pilha, que o js/capa.js já marca: 0 é a da vez).
   -------------------------------------------------------------------------- */
:root:is([data-capa="foto"], [data-capa="editorial"]) .capa__carta {
  transform: none !important;
  opacity: clamp(0, calc(1 - var(--c, 0)), 1);
  box-shadow: none;
}
:root:is([data-capa="foto"], [data-capa="editorial"]) .capa__quadro { transform: none !important; }

/* FOTO CHEIA: a foto ocupa a capa toda e o texto vai por cima, em branco,
   sobre um véu escuro que sobe de baixo (o texto se lê com qualquer foto). */
:root[data-capa="foto"] .capa {
  display: grid;
  align-items: end;
  min-height: min(86svh, 720px);
  padding: 96px 0 24px;
  background: var(--cor-texto);
}
:root[data-capa="foto"] .capa__grade { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; }
:root[data-capa="foto"] .capa__texto { justify-items: center; }
:root[data-capa="foto"] .capa__acoes { justify-content: center; }
:root[data-capa="foto"] .capa__vitrine { position: static; display: contents; }
:root[data-capa="foto"] .capa__fotos { position: absolute; inset: 0; z-index: -1; width: auto; aspect-ratio: auto; }
:root[data-capa="foto"] .capa__carta { border-radius: 0; }
:root[data-capa="foto"] .capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, .34) 55%, rgba(0, 0, 0, .12));
}
:root[data-capa="foto"] .capa :is(.capa__olho, #titulo-loja, #frase-vitrine, .capa__link) { color: #fff; }
:root[data-capa="foto"] .capa #frase-vitrine { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
:root[data-capa="foto"] .capa .capa__link span { background-image: linear-gradient(#fff, #fff); }
:root[data-capa="foto"] .capa .capa__passo > span { background: rgba(255, 255, 255, .35); }
:root[data-capa="foto"] .capa .capa__passo i { background: #fff; }
/* Sobre a foto o botão fica sempre cheio, mesmo com a opção "contorno". */
:root[data-capa="foto"][data-botao="contorno"] .capa .botao--principal {
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  border-color: transparent;
}
/* Sem foto nenhuma: volta à cor da capa, com o texto na cor de sempre. */
:root[data-capa="foto"] .capa:not(:has(.capa__carta)) { min-height: 0; background: var(--cor-capa); }
:root[data-capa="foto"] .capa:not(:has(.capa__carta))::after { display: none; }
:root[data-capa="foto"] .capa:not(:has(.capa__carta)) :is(.capa__olho, #titulo-loja) { color: var(--cor-primaria-escura); }
:root[data-capa="foto"] .capa:not(:has(.capa__carta)) :is(#frase-vitrine, .capa__link) { color: var(--cor-texto); text-shadow: none; }
@media (min-width: 900px) {
  :root[data-capa="foto"] .capa { padding: 120px 0 36px; }
}

/* EDITORIAL: o texto centralizado em cima e uma foto larga embaixo, como
   uma página de revista. A cor da capa desce até o meio da foto. */
:root[data-capa="editorial"] .capa__grade { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 30px; }
:root[data-capa="editorial"] .capa__texto { justify-items: center; }
:root[data-capa="editorial"] .capa__acoes { justify-content: center; }
:root[data-capa="editorial"] .capa__fotos { width: 100%; aspect-ratio: 1 / 1; }
:root[data-capa="editorial"] .capa__carta { box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .4); }
@media (min-width: 900px) {
  :root[data-capa="editorial"] .capa__fotos { width: min(100%, 980px); aspect-ratio: 16 / 9; }
}