/* =========================================================================
   A LOJA · só o que esta página tem de próprio. Carrega depois do base.css.
   Nada nasce escondido. Zero @keyframes. Movimento só responde ao ponteiro.
   ========================================================================= */

/* --------- o h1 desta página estava sem regra e caía no default do UA
   (2em = 36,8 px), menor que a própria lede e que os sete h2 de 75,5 px.
   Volta para --t6, a mesma medida de nutrição, saúde e selaria. --------- */
.hero-loja h1{ font-size:var(--t6); line-height:.88; max-inline-size:12ch }

/* ---------------- o endereço em bloco, no alto da página ---------------- */
.end{ font-style:normal; margin-block-start:var(--s4);
      border-inline-start:1px solid var(--fio); padding-inline-start:var(--s3) }
.end .rua{ font-family:var(--serif); font-size:var(--t3); line-height:1.14;
           letter-spacing:-.008em; display:block; max-inline-size:18ch }
.end .lin{ display:block; font-family:var(--sans); font-size:var(--t2); line-height:1.5;
           margin-block-start:.35em }
.end .cep{ display:block; font-family:var(--mono); font-size:var(--t1); letter-spacing:.18em;
           color:var(--tinta-2); margin-block-start:.7em }
.acoes{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-start:var(--s4) }

/* o talo mede grandeza, e --esc é global: um talo de 18 aqui teria o mesmo
   comprimento do talo de "18% de proteína bruta" da home. Só que este 18 é
   a HORA em que a loja fecha, não uma quantidade. Número sem talo.        */
.dado-lista .num::after{ content:none }

/* -------------- a ficha do endereço, campo a campo, em mono ------------- */
.campos{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s1) var(--s3);
         margin:0; font-family:var(--mono); font-size:var(--t1); background:var(--linho);
         border:1px solid var(--fio); padding:var(--s3) }
.campos dt{ color:var(--tinta-2); letter-spacing:.14em; text-transform:uppercase }
.campos dd{ margin:0; color:var(--tinta); letter-spacing:.03em }

/* ------------------- a amostra de luz cruza a fronteira ----------------- */
/* 320px é o teto desta foto no site inteiro. Ela é amostra, não é cenário.  */
.amostra-luz{ max-inline-size:320px; margin-block-start:var(--s5); position:relative; z-index:3 }
@media (min-width:940px){
  .amostra-luz{ margin-block-end:-84px }
  .sob-amostra{ position:relative; z-index:1; padding-block-start:clamp(6rem,10vw,9.5rem) }
}

/* ------------------------ o mapa sangra para fora ----------------------- */
.mapa-cx{ margin-block-start:var(--s5); position:relative }
@media (min-width:1000px){
  .mapa-cx{ margin-inline-end:0 }
  .mapa{ aspect-ratio:21/9 }
}
.mapa-leg{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em; color:var(--tinta-2);
           margin-block-start:var(--s2); max-inline-size:58ch }

/* ------------------------------ o salão --------------------------------- */
.salao{ list-style:none; padding:0; display:grid; gap:var(--s3); margin-block-start:var(--s4) }
.salao li{ font-size:var(--t2); max-inline-size:52ch }
.salao b{ font-weight:600 }

/* ------------------- o que está escrito na fachada ---------------------- */
.fachada{ display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr);
          margin-block-start:var(--s5) }
@media (min-width:760px){ .fachada{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.lousa{ background:var(--linho); border:1px solid var(--fio); padding:var(--s4) }
.lousa .rot{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.2em;
             text-transform:uppercase; color:var(--tinta-2); margin-block-end:var(--s3) }
.lousa ul{ list-style:none; padding:0; display:grid; gap:var(--s2) }
.lousa li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3);
           border-block-end:1px solid var(--fio); padding-block-end:var(--s2) }
.lousa li:last-child{ border-block-end:0; padding-block-end:0 }
.lousa .item{ font-family:var(--sans); font-weight:600; font-size:var(--t2); letter-spacing:.14em;
              text-transform:uppercase; line-height:1.3 }
.lousa-b .item{ font-family:var(--serif); font-weight:400; font-size:var(--t3);
                letter-spacing:0; text-transform:none; line-height:1.14 }
.leva-min{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.14em;
           text-transform:uppercase; color:var(--verde); text-decoration:none;
           display:inline-flex; align-items:center; min-block-size:44px; margin-inline-start:auto }
.leva-min:hover{ color:var(--tinta); text-decoration:underline; text-underline-offset:.24em }
.toldo{ margin-block-start:var(--s4); border:1px solid var(--fio); padding:var(--s4);
        display:grid; gap:.35em }
.toldo span{ font-family:var(--sans); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
             font-size:var(--t1); color:var(--tinta) }
.toldo .n{ font-family:var(--mono); font-weight:400; letter-spacing:.2em; color:var(--tinta-2) }

/* ------------------------- perguntas de balcão -------------------------- */
.perg-cx{ margin-block-start:var(--s5); border-block-start:1px solid var(--fio) }
.perg-cx details > summary{ font-size:var(--t3) }
.perg-cx p + p{ margin-block-start:var(--s2) }

/* ------------------------------- canais --------------------------------- */
.canais a{ display:inline-flex; align-items:center; min-block-size:44px }
.canais td.on{ font-family:var(--mono); font-size:var(--t1); color:var(--tinta-2);
               letter-spacing:.04em }

/* --------------------------------- print -------------------------------- */
@media print{
  .mapa-cx,.amostra-luz{ display:none !important }
  .lousa,.campos,.toldo{ border:1px solid #000; background:#fff }
}

/* ------------------------- mapa sem JavaScript -------------------------- */
/* O embed do Google não desenha nada com o script desligado, e o quadro de
   16/10 ficava vazio com uma legenda afirmando que o mapa estava carregado. */
.mapa{ position:relative }
.mapa noscript{ position:absolute; inset:0; display:block; padding:var(--s4) }
.mapa-semjs{ margin:0; max-inline-size:52ch; color:var(--tinta);
             font-size:var(--t2); line-height:1.5 }