/* Página pública do Catálogo Santa Helena e página de privacidade.
   Layout aprovado em design/proposta/modelo.html: faixa vinho com a marca e a situação da loja, busca e
   categorias presas no topo, lista de preços em formato de etiqueta, barra de pedido fixa embaixo.
   Uma aparência só (clara), de propósito: é a página da marca.
   Sem style="" no HTML (CSP style-src 'self'): tudo que é visual mora aqui. */

/* Fontes do próprio app (nada de Google Fonts). Só o subconjunto latino: cobre o português inteiro. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/vendor/fontes/dm-sans/files/dm-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/vendor/fontes/dm-sans/files/dm-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/vendor/fontes/dm-sans/files/dm-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/vendor/fontes/dm-sans/files/dm-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/vendor/fontes/barlow-condensed/files/barlow-condensed-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --vinho:#781108; --dourado:#EABA3C; --marfim:#F7F4ED; --papel:#FFFDF8; --branco:#FFFFFF;
  --tinta:#2B1814; --tinta-suave:#6B5750; --linha:#E4DCCB;
  --placa:#EEE7D8; --placa-traco:#BBAA8C;
  --creme:#FFF6E3; --creme-suave:#EBD2CB; --aberto:#8FE0A4;
  --aviso:#FFEFC2; --aviso-tinta:#553D00;
  --f-texto:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-preco:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --col:720px; --barra-h:132px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--marfim);color:var(--tinta);font:400 16px/1.45 var(--f-texto)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--marfim)}
.col{max-width:var(--col);margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--vinho);outline-offset:2px}
.topo :focus-visible,.pedir :focus-visible{outline-color:var(--dourado)}

/* Faixa da marca */
.topo{background:var(--vinho);color:var(--creme);border-bottom:3px solid var(--dourado)}
.topo .col{display:flex;align-items:center;gap:14px;padding-block:14px}
.marca{height:96px;width:auto;flex:none;display:block}
.topo-txt{min-width:0}
.topo h1{margin:0;font:700 23px/1.15 var(--f-texto);letter-spacing:-.01em;text-wrap:balance}
.status{margin:7px 0 0;display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.3;font-weight:500}
.ponto{width:9px;height:9px;border-radius:50%;background:var(--aberto);flex:none}
.fechada .ponto{background:var(--dourado)}
#status-txt{text-wrap:balance}
.end{margin:3px 0 0;font-size:13.5px;line-height:1.35;color:var(--creme-suave)}
.end a{color:var(--creme);text-underline-offset:3px}

/* Quando os preços foram atualizados */
.frescor .col{display:flex;gap:8px;align-items:flex-start;padding-block:10px;font-size:13.5px;line-height:1.4;color:var(--tinta-suave)}
.frescor svg{width:17px;height:17px;flex:none;margin-top:1px}
.frescor.velho{background:var(--aviso);color:var(--aviso-tinta)}
.frescor.velho .col{color:var(--aviso-tinta);font-weight:500}

/* Busca e categorias, presas no topo */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--marfim);border-bottom:1px solid var(--linha)}
.barra .col{padding-block:8px 0}
.busca{position:relative;display:block}
.busca svg{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--tinta-suave);pointer-events:none}
.busca input{width:100%;height:48px;border:1.5px solid var(--linha);border-radius:14px;background:var(--papel);color:var(--tinta);font:400 16px/1 var(--f-texto);padding:0 76px 0 44px;-webkit-appearance:none;appearance:none}
.busca input::placeholder{color:var(--tinta-suave);opacity:1}
.busca input::-webkit-search-cancel-button{display:none}
.busca input:focus-visible{outline:none;border-color:var(--vinho);box-shadow:0 0 0 3px rgba(120,17,8,.16)}
.busca button{position:absolute;right:2px;top:2px;height:44px;padding:0 14px;border:0;background:none;color:var(--vinho);font:600 14px/1 var(--f-texto);cursor:pointer;border-radius:12px}
.cats{position:relative;display:flex;gap:8px;overflow-x:auto;padding-block:10px;padding-left:6px;margin-left:-6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.cats::-webkit-scrollbar{display:none}
.cats::after{content:"";flex:0 0 20px}
.cats button{flex:none;height:40px;padding:0 15px;border:1.5px solid var(--linha);border-radius:999px;background:var(--papel);color:var(--tinta);font:600 14.5px/1 var(--f-texto);cursor:pointer;white-space:nowrap}
.cats button[aria-current="true"]{background:var(--vinho);border-color:var(--vinho);color:var(--creme)}
.cats button:disabled{opacity:.38;cursor:default}
.barra.sem-cats .col{padding-bottom:8px}

/* Lista de preços */
.lista{padding-bottom:8px}
.sec{scroll-margin-top:var(--barra-h)}
.sec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:26px 0 8px;border-bottom:2px solid var(--tinta)}
.sec-cab h2{margin:0;font:700 29px/1 var(--f-preco);letter-spacing:.005em}
.sec-n{font-size:13px;color:var(--tinta-suave);white-space:nowrap}
.itens{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:77px;padding:10px 0;border-bottom:1px solid var(--linha)}
.item h3{margin:0;font:600 16px/1.25 var(--f-texto);overflow-wrap:anywhere}
.item .desc{margin:2px 0 0;font-size:13.5px;line-height:1.3;color:var(--tinta-suave)}
.foto,.placa{width:56px;height:56px;border-radius:12px}
.foto{display:block;object-fit:cover;background:var(--branco);border:1px solid var(--linha)}
.placa{display:grid;place-items:center;background:var(--placa);color:var(--placa-traco)}
.placa svg{width:28px;height:28px;display:block}

/* O preço em formato de etiqueta: inteiro grande, centavos em cima, unidade embaixo */
.preco-vis{display:grid;grid-template-columns:auto auto minmax(28px,auto);grid-template-rows:auto auto;column-gap:2px;color:var(--vinho);font-family:var(--f-preco);font-variant-numeric:tabular-nums;white-space:nowrap}
.cif{grid-area:1/1;align-self:start;padding:4px 2px 0 0;font:600 12px/1 var(--f-texto);color:var(--tinta-suave)}
.int{grid-area:1/2/3/3;font-weight:700;font-size:37px;line-height:.86}
.cent{grid-area:1/3;align-self:start;font-weight:700;font-size:18px;line-height:1}
.un{grid-area:2/3;align-self:end;padding-bottom:1px;font:500 12.5px/1 var(--f-texto);color:var(--tinta-suave)}

.vazio{padding-block:44px 28px;font-size:16px;line-height:1.5;max-width:34em}
.vazio strong{font-weight:700}
.preparando{padding-block:48px 24px}
.preparando h2{margin:0 0 10px;font:700 29px/1 var(--f-preco)}
.preparando p{margin:0;max-width:34em;font-size:16px;line-height:1.5}

/* Sem JavaScript: só o contato da loja */
.sem-js{padding-block:28px;max-width:34em}
.sem-js h2{margin:0 0 10px;font:700 29px/1 var(--f-preco)}
.sem-js p{margin:0 0 10px;line-height:1.5}
.sem-js .sem-js-contato:empty{display:none}

/* Dados da loja */
.rodape{margin-top:30px;border-top:2px solid var(--tinta)}
.rodape .col{padding-block:22px 28px}
.com-pedir .rodape .col{padding-bottom:118px}
.rodape h2{margin:0 0 12px;font:700 29px/1 var(--f-preco)}
.loja{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 28px;margin:0}
.loja dt{font-size:13px;color:var(--tinta-suave)}
.loja dd{margin:1px 0 0;font-size:15.5px;line-height:1.4;font-weight:500}
.loja a{text-underline-offset:3px}
.obs{margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--tinta-suave);max-width:38em}
.legal{margin:18px 0 0;font-size:13.5px}
.legal a{display:inline-block;padding-block:6px;color:var(--tinta-suave);text-underline-offset:3px}

/* Pedido: fixo embaixo */
.pedir{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--vinho);padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gl)}
.pedir a{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:520px;min-height:50px;margin-inline:auto;border-radius:999px;background:var(--dourado);color:var(--tinta);font:700 16.5px/1 var(--f-texto);text-decoration:none}
.pedir svg{width:21px;height:21px;flex:none}
.pedir-aviso{margin:0 auto 8px;max-width:520px;text-align:center;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--creme)}
.com-pedir-aviso .rodape .col{padding-bottom:144px}

/* Página de privacidade */
.topo .voltar{color:var(--creme);font-weight:600;text-underline-offset:3px}
.marca-link{display:block;flex:none;border-radius:8px}
.texto{padding-bottom:12px}
.texto .col{padding-block:10px 24px;max-width:720px}
.texto h2{margin:26px 0 8px;font:700 29px/1 var(--f-preco);letter-spacing:.005em}
.texto p,.texto ul{margin:0 0 12px;max-width:38em;line-height:1.55}
.texto ul{padding-left:22px}
.texto li{margin-bottom:6px}
.texto a{color:var(--vinho);text-underline-offset:3px;font-weight:600}

@media (pointer:coarse){
  .cats button{height:44px}
  .topo .voltar{display:inline-flex;align-items:center;min-height:44px}
  .legal a{padding-block:12px}
  .loja a{display:inline-block;padding-block:12px;margin-block:-12px}
}
@media (min-width:900px){
  :root{--col:1040px}
  .marca{height:120px}
  .topo .col{gap:22px;padding-block:18px}
  .topo h1{font-size:30px}
  .status{font-size:16px}
  .end{font-size:14.5px}
  .itens{columns:2;column-gap:56px}
  .item{break-inside:avoid}
  .texto .col{max-width:720px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition:none !important;animation:none !important}}