/* Aviso de cookies em duas camadas (estatísticas e marketing): o aviso curto, o painel "Personalizar" no pé da
   tela e o botão "Preferências de cookies". Tokens do site (tokens.css); sem cor nova. */

/* acima do cabeçalho, ABAIXO do menu (+10), da cesta (+20) e do convite (+30): com a cesta aberta, o aviso não cobre o
   "Fechar compra" (achado da prova do frete na cesta, 06/10) */
:root{--z-cookies:calc(var(--z-header) + 9)}

/* 1ª camada: o aviso curto; os três botões com o mesmo desenho */
.cookies{position:fixed;inset:auto 0 0;z-index:var(--z-cookies);padding:16px 24px;background:var(--bg);color:var(--fg);
  border-top:1px solid var(--fg);font-family:var(--font-body);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.cookies[hidden]{display:none}
.cookies__texto{flex:1 1 32rem}
.cookies h2{font:600 17px var(--font-body);margin:0 0 4px}
.cookies p{max-width:70ch;margin:0;line-height:1.45}
.cookies__nota,.medicao__nota{margin-top:6px!important;font-size:14px;color:var(--fg-muted)}
.cookies a{color:inherit}
.cookies__acoes{display:flex;flex-wrap:wrap;gap:12px}
.cookies button{min-height:44px;min-width:10.5em;padding:10px 16px;border:1px solid var(--fg);border-radius:var(--r-md);
  background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.cookies button:hover,.medicao button:hover{background:var(--bg-invert);color:var(--fg-invert)}
.cookies__anuncio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 2ª camada: Personalizar */
.medicao{position:fixed;inset:auto 0 0;z-index:var(--z-cookies);max-height:88vh;overflow:auto;padding:20px 24px 16px;
  background:var(--bg);color:var(--fg);border-top:1px solid var(--fg);font-family:var(--font-body)}
.medicao[hidden]{display:none}
.medicao__cabeca,.medicao__bloco,.medicao__email,.medicao__pe{max-width:52rem;margin-inline:auto}
.medicao h2{font:normal 26px var(--font-display);margin:0 0 6px}
.medicao h3{font:600 17px var(--font-body);margin:0}
.medicao h3 label{cursor:pointer}
.medicao__provedor{font-weight:400;color:var(--fg-muted)}
.medicao p{max-width:65ch;margin:0 0 10px;line-height:1.45}
.medicao__bloco{padding:10px 0 2px;border-top:1px solid var(--line)}
.medicao__linha{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.medicao__sempre{font-size:14px;color:var(--fg-muted);white-space:nowrap}
/* o interruptor: trilho com contorno e bolinha; a posição da bolinha mostra o estado, não só a cor */
.medicao input[role=switch]{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:30px;margin:0;border:1px solid var(--fg);border-radius:15px;cursor:pointer;
  background:radial-gradient(circle at 15px 50%,var(--fg) 0 9px,transparent 10px) var(--bg)}
.medicao input[role=switch]:checked{background:radial-gradient(circle at calc(100% - 15px) 50%,var(--bg) 0 9px,transparent 10px) var(--bg-invert)}
.medicao .medicao__email{max-width:52rem;margin:0 auto 10px;font-size:14px;color:var(--fg-muted);padding-top:10px;border-top:1px solid var(--line)}
.medicao__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.medicao__pe a{color:inherit}
.medicao__acoes{display:flex;flex-wrap:wrap;gap:12px}
.medicao button{min-height:44px;padding:10px 16px;border:1px solid var(--fg);border-radius:var(--r-md);
  background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.medicao .medicao__salvar{background:var(--bg-invert);color:var(--fg-invert)}
.cookies button:focus-visible,.cookies a:focus-visible,.medicao button:focus-visible,.medicao a:focus-visible,.medicao input:focus-visible,.medicao__preferencias:focus-visible{outline:3px solid var(--c-coral);outline-offset:3px}
/* "Cookies" no rodapé (06/10, noite): link discreto em todas as páginas, alvo de 44 px de altura */
.medicao__preferencias{display:inline-flex;align-items:center;min-height:44px;padding:0 .25em;border:0;background:none;
  color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.medicao__preferencias:hover{opacity:.75}
/* 07/10 (rodada no celular): menos destaque, no corpo e na cor da linha legal; o alvo de 44 px continua */
.medicao__rodape{margin:4px auto 0;text-align:center;font-family:var(--font-body);font-size:var(--text-caption);color:var(--fg-muted)}
.ck-ft .medicao__preferencias{font-size:var(--text-caption);color:var(--fg-muted);margin-top:-6px}
/* Entrar: o fundo é a foto azul; o link vai em creme */
.auth-body .medicao__rodape{color:var(--fg-invert)}
/* o aviso aberto não cobre o fim da página */
html.com-aviso-cookies body{padding-bottom:var(--aviso-cookies-h,0px)}
@media(max-width:760px){
  .cookies{padding:14px 16px;gap:10px}
  .cookies p{font-size:15px}
  .cookies__acoes{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .cookies button{width:100%;min-width:0}
  .medicao{padding:16px}
  .medicao h2{font-size:22px}
  .medicao p{font-size:15px;margin-bottom:8px}
  .medicao__acoes{width:100%}
  .medicao__acoes button{flex:1}
}
/* na linha legal (inicial, loja, ficha) o link não aumenta a altura da linha */
.ft__legal .medicao__preferencias{margin:-10px 0;padding:0}
/* no celular a linha legal empilha centrada: o botão acompanha */
@media(max-width:820px){.ft__legal .medicao__preferencias{display:flex;justify-content:center;width:100%;margin:0}}