:root{

  --ink-raw:#231F20;
  --paper-raw:#F1EFEA;

  --paper:var(--paper-raw);
  --paper-2:#E5E2DB;
  --ink:var(--ink-raw);
  --ink-soft:#6E6A66;
  --ink-line:#C9C4BB;
  --accent:#B23A1E;

  --f-ui:'Archivo',-apple-system,sans-serif;
  --f-ed:'Instrument Serif',Georgia,serif;
  --f-data:'Space Mono',ui-monospace,monospace;

  --t-mega:clamp(3.2rem,13vw,11rem);
  --t-xl:clamp(2.1rem,6vw,4.8rem);
  --t-lg:clamp(1.45rem,3vw,2.4rem);
  --t-md:1.0625rem;
  --t-sm:.8125rem;
  --t-xs:.6875rem;

  --gutter:clamp(1rem,3.2vw,2.75rem);

  --pad:clamp(1rem,3.2vw,2.2rem);
  --sec-gap:clamp(1.6rem,3vw,2.4rem);
  --respiro:clamp(1.6rem,3vw,2.6rem);
  --rule:1px solid var(--ink-line);
  --ease:cubic-bezier(.16,1,.3,1);
  --aviso-h:29px;
  --hdr-own:64px;

  --hdr-h:calc(var(--aviso-h) + var(--hdr-own));

  --shell:1680px;
}

@media (min-width:1680px){
  :root{--gutter:calc((100vw - var(--shell)) / 2 + 2.75rem)}
}
@media (max-width:600px){ :root{--aviso-h:27px;--hdr-own:58px} }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;
  overflow-y:scroll}
main{overflow-x:clip}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:var(--t-md);line-height:1.45;
  /* O respiro embaixo do cabeçalho fixo é a margem do primeiro bloco, e por
     padrão essa margem ESCAPA do body em vez de ficar dentro dele. Enquanto
     ela está escapando, quem desce é o body inteiro. Ao travar a rolagem o
     body vira fixo, o escape acaba, e os mesmos 82px reaparecem por dentro:
     a página inteira dá um passo para baixo ao abrir qualquer modal.
     flow-root mantém a margem dentro desde o começo, então nada muda de
     lugar. É a única forma de conter margem sem virar caixa de rolagem, e
     virar caixa de rolagem quebraria todo position:sticky da página. */
  display:flow-root;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.mono{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}
.ed{font-family:var(--f-ed);font-weight:400}

.display{
  font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.84;
}
.tabular{font-variant-numeric:tabular-nums}

.mk{display:block;fill:currentColor;width:100%;height:auto}

#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{display:grid;justify-items:center;gap:1.5rem;width:min(280px,70vw)}
.pre-mark{width:150px}
.pre-bar{width:100%;height:1px;background:var(--ink-line);position:relative;overflow:hidden}
.pre-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;
  transform:scaleX(0);transition:transform .25s linear}
.pre-lbl{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.2em;color:var(--ink-soft)}

#topo{position:fixed;top:0;left:0;right:0;z-index:900}

#aviso{position:relative;background:var(--ink-raw);
  box-shadow:0 -2px 0 var(--ink-raw);
  padding:.42rem calc(var(--gutter) + 1.6rem);text-align:center}
#aviso p{font-family:var(--f-data);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.5;
  color:rgba(241,239,234,.82)}
/* O "·" separa a frase do link quando os dois estão na mesma linha, e desaparece
   quando o link cai sozinho para a linha de baixo — ali o ponto ficaria no fim da
   linha de cima, apontando para o nada.

   "Estar na mesma linha" não é uma pergunta que o CSS saiba responder: não existe
   consulta de quebra de linha. Quem responde é o JavaScript, comparando a altura
   dos dois em tela e escondendo o ponto pelo atributo hidden — está em
   assets/js/romaria.js, no bloco pontoDaFaixa.

   A quebra em si continua sendo do fluxo normal do texto, e não de flex: em flex
   a frase e o link viram dois blocos que não dividem linha, e no celular isso
   custava uma terceira linha na faixa — que tem altura contada à parte no
   cálculo do cabeçalho. */
#aviso .sep[hidden]{display:none}
@media (max-width:520px){
  /* .55rem dá 8,8px, e essa faixa é escrita em versalete com espaçamento
     largo: no celular ela virava textura, não texto. */
  #aviso p{font-size:.62rem;letter-spacing:.1em}
}
header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:var(--hdr-pad) var(--gutter);
  background:rgba(241,239,234,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s,padding .35s var(--ease);
}

:root{--hdr-pad:.85rem}
html.rolou{--hdr-pad:.55rem}

html.sem-aviso{--aviso-h:0px}
html.sem-aviso #aviso{display:none}
header.scrolled{border-bottom-color:var(--ink-line)}

body:has(#scrim.on) header{background:var(--paper);backdrop-filter:none}

.brand{display:flex;align-items:center;gap:.65rem;justify-self:start;
  width:max-content}
.brand-symbol{width:44px;flex:none}
.brand-type{width:104px;flex:none}

nav.main,.head-right{display:flex;align-items:center}
nav.main{gap:1.35rem;justify-content:center}
.head-right{gap:1.35rem;justify-content:flex-end}
nav.main a,.head-right button,.head-right>a{
  font-family:var(--f-data);font-size:var(--t-xs);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;position:relative;display:inline-block;
  padding:0 0 3px;border:0;background:none;white-space:nowrap;
}
nav.main a::after,.head-right button::after,.head-right>a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
nav.main a:hover::after,nav.main a.active::after,
.head-right button:hover::after,.head-right>a:hover::after{transform:scaleX(1)}
.cart-n{font-size:9px;font-weight:700;margin-left:.25em;vertical-align:baseline}

/* ═══════════════ ALVOS DE TOQUE NO CELULAR E NO TABLET ═══════════════
   Os controles do cabeçalho têm 26 pixels de altura porque o ícone tem 26. No
   mouse isso é preciso; no dedo, não: a recomendação de toque é 44, e abaixo
   disso a pessoa erra o alvo, fecha o aviso quando queria abrir a sacola, e
   aprende a desconfiar do próprio dedo.

   A área cresce por dentro, com padding, e o desenho não se move: a margem
   negativa devolve exatamente o espaço que o padding tomou. Ninguém vê a
   diferença — só o dedo sente.

   O filete de hover sai nessa faixa: com o padding ele desceria para longe da
   palavra, e num aparelho de toque não existe hover para justificá-lo. */
@media (max-width:833px){
  /* Os controles da gaveta da sacola são os mais usados do celular — mais e
     menos, remover, alterar o frete — e eram os menores da tela: 16 pixels de
     altura, o tamanho da letra. Trocar a quantidade de um disco virava mira.

     Crescem por dentro e devolvem o espaço por fora, como no cabeçalho: a
     gaveta não muda de desenho, só fica possível de operar com o dedo. */
  .ci-q button{padding:11px 12px;margin:-11px -2px;font-size:.8rem}
  .ci-x{padding:10px 4px;margin:-10px -4px}
  .alterar{padding:11px 6px;margin:-11px -6px;display:inline-block}
  .cart-frete-ops .cf-op{padding-top:.7rem;padding-bottom:.7rem}
  nav.main a,.head-right button,.head-right>a{padding:13px 5px;margin:-13px -5px}
  /* Os links de ação — Alterar, Adicionar, Cancelar, "esqueci minha senha" —
     têm 15 pixels de altura, que é a altura da letra. No dedo isso é um alvo de
     mira; a área cresce sem mudar a linha onde eles estão.

     A regra vale em qualquer lugar, e não só dentro da conta: a mesma classe
     aparece na tela de entrar, no checkout e na sacola, e o dedo é o mesmo. */
  .link-acao{padding:12px 4px;margin:-12px -4px;display:inline-block}
  /* As listas de links do rodapé são o outro caso: dezoito pixels de altura,
     empilhadas, com o dedo mirando entre duas. */
  .foot-grid li>a,.foot-grid li>button{padding:9px 0;display:inline-block}
  /* "* obrigatório" em 8,8px é um aviso que só quem já sabe consegue ler. */
  .conta-corpo .conta-form-hd .obrig-legenda,
  .modal-hd .obrig-legenda{font-size:.66rem}
  /* A linha do menu da conta chega a 44 pixels, que é o mínimo confortável para
     escolher uma seção sem acertar a de baixo. */
  .conta-nav a{padding:.95rem 0}
  nav.main a::after,.head-right button::after,.head-right>a::after{display:none}
  #aviso p button{padding:11px 6px;margin:-11px -6px}
  /* O alvo cresce, o desenho não: os dois riscos do ✕ têm largura fixa, senão
     eles esticam com o botão e o ✕ fica do tamanho de uma letra maiúscula. */
  #avisoX{width:44px;height:44px;right:2px}
  #avisoX span{left:15px;right:15px}
  .sc-close{padding:12px 6px;margin:-12px -6px}
  .cart-n{font-size:10px}
}

#burger{display:none;width:34px;height:34px;position:relative;flex:none}
#burger span{display:none}
#burger i{position:absolute;left:5px;right:5px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .25s}
#burger i:nth-child(1){top:11px}
#burger i:nth-child(2){bottom:11px}
#burger.on i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
#burger.on i:nth-child(2){transform:translateY(-5.25px) rotate(-45deg)}

#navMob{
  position:fixed;inset:0;z-index:930;background:var(--paper);
  display:flex;flex-direction:column;
  padding:0 var(--pad) 2rem;
  transform:translateY(-100%);transition:transform .5s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
#navMob.on{transform:none}
#navMob nav{display:grid;gap:.2rem;margin:2.4rem 0 auto}
#navMob nav a{
  font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;
  font-size:clamp(1.7rem,8vw,2.6rem);letter-spacing:-.03em;line-height:1.12;
  padding:.35rem 0;border-bottom:var(--rule);
}

#navMob nav a{border-bottom:0}
#navMob nav a em{font-family:var(--f-ed);font-style:italic;font-weight:400;
  font-stretch:100%;font-variation-settings:normal;text-transform:none;
  color:var(--ink-soft);font-size:.6em;margin-left:.5rem;letter-spacing:0}

/* O itálico do "Overseas shipping" é do menu de hambúrguer, e só dele.
   O <em> vem no rótulo do menu, que é um só para todos os lugares onde ele
   aparece, então fora do #navMob ele precisa ser desligado na mão: sem isto o
   navegador aplica o itálico padrão dele na barra de cima e no rodapé, onde o
   texto é maiúscula monoespaçada e a inclinação vira defeito. A regra do
   #navMob acima ganha por especificidade, sem depender da ordem. */
nav.main a em,footer a em,.head-right a em{
  font-family:inherit;font-style:normal;font-weight:inherit;
  font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  color:inherit;margin:0}

@media (max-width:1180px){
  nav.main{display:none}
  header{grid-template-columns:auto 1fr}
  .head-right{gap:1.1rem}
  #burger{display:block}
}
@media (min-width:1181px){ #navMob{display:none} }

.view{display:none}
.view.active{display:block;animation:viewIn .6s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero{position:relative;overflow:hidden;margin-top:var(--hdr-h);
  background:var(--paper);touch-action:pan-y;

  aspect-ratio:4/1}
@media (max-width:833px){.hero{aspect-ratio:1}}
.hero-track{display:flex;height:100%;
  transition:transform .8s var(--ease);will-change:transform}
.hs{flex:0 0 100%;position:relative;height:100%;overflow:hidden}

/* As setas nascem invisíveis e só aparecem com o ponteiro sobre o banner.
   Elas moram por cima da arte — não há outro lugar de onde passar o destaque
   sem sair de perto dele —, e a arte é uma peça fechada. Então a regra é que
   elas só existam quando alguém demonstrou interesse em passar de destaque.
   opacity, e não display:none, por dois motivos: a transição precisa de um
   estado para sair, e o leitor de tela continua encontrando os dois botões. O
   foco pelo teclado também as traz de volta, logo abaixo — quem navega por Tab
   não tem ponteiro para revelar nada. */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--ink-line);background:rgba(241,239,234,.78);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .35s,border-color .3s}
.hero-arrow svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5}
.hero-arrow.prev{left:var(--gutter)}
.hero-arrow.next{right:var(--gutter)}
.hero:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1}
@media (pointer:coarse){.hero>.hero-arrow{display:none}}
.hero-arrow:hover{border-color:var(--ink)}

/* Os marcadores, sobre o banner e colados na borda de baixo.
   A 2rem do fim eles cruzavam a arte. Aqui embaixo ficam na faixa que toda peça
   reserva como margem — o traço nasce a cerca de quinze pixels da borda, que é
   perto o bastante para ler como rodapé do banner e longe o bastante para o
   alvo de toque de 22 pixels não sair pela beirada. */
.hero-bars{position:absolute;left:var(--gutter);right:var(--gutter);bottom:.25rem;
  z-index:4;display:flex;gap:.5rem}
.hero-bars button{flex:1;height:22px;position:relative;background:none;border:0;padding:0}
.hero-bars button::before{content:'';position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--ink);opacity:.22}
.hero-bars button::after{content:'';position:absolute;left:0;top:50%;
  height:1px;width:0;background:var(--ink)}
.hero-bars button[aria-selected="true"]::after{width:100%;
  transition:width 6s linear}
.hero-bars button.instant::after{transition:none}

.manifesto{position:relative;overflow:hidden;
  background:var(--ink-raw);color:var(--paper-raw);
  --ink:var(--paper-raw);
  --paper:var(--ink-raw);
  --ink-soft:#9B958D;
  --ink-line:rgba(241,239,234,.26);
  --manifesto-gap:clamp(2rem,4.5vw,3.6rem);
  min-height:min(78svh,760px);display:grid;grid-template-rows:1fr auto;
  gap:var(--manifesto-gap);

  padding:calc(var(--hdr-h) + clamp(2.5rem,7vw,5rem)) var(--gutter) 1.2rem}
.hero-seal{
  position:absolute;top:50%;left:50%;width:min(74vh,86vw);
  transform:translate(-50%,-54%);z-index:0;opacity:.1;pointer-events:none;
}
.manifesto-in{align-self:center;position:relative;z-index:2;display:grid;
  justify-items:center;text-align:center;gap:var(--manifesto-gap)}
.manifesto-in h1{font-size:var(--t-mega);line-height:.9}

.manifesto-in h1 .ln{display:block;overflow:hidden;
  padding:.14em 0 .26em;margin:-.14em 0 -.26em}
.manifesto-in h1 .ln span{display:block;transform:translateY(115%)}
.manifesto-in.in h1 .ln span{animation:riseUp 1s var(--ease) forwards}
.manifesto-in.in h1 .ln:nth-child(2) span{animation-delay:.09s}
@keyframes riseUp{to{transform:none}}
.manifesto-in h1 em{font-family:var(--f-ed);font-style:italic;font-weight:400;
  font-stretch:100%;font-variation-settings:normal;
  text-transform:none;letter-spacing:-.015em}
.hero-sub{max-width:38ch;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.hero-sub span{display:block}
.manifesto-in .hero-sub{max-width:100%}
.manifesto-in .hero-sub span{text-wrap:pretty}
@keyframes fadeIn{to{opacity:1}}
.manifesto-foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;border-top:var(--rule);padding-top:.7rem;position:relative;z-index:2}

.marquee{border-top:var(--rule);border-bottom:var(--rule);padding:.55rem 0;
  overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:2.5rem;animation:slide 40s linear infinite;
  will-change:transform}
.marquee.rev .marquee-track{animation-direction:reverse}
@keyframes slide{to{transform:translateX(calc(-1 * var(--mq-w,50%)))}}
.marquee-track span{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:2.5rem}
.marquee-track span::after{content:'';width:5px;height:5px;background:currentColor;
  border-radius:50%;opacity:.45;flex:none}
.marquee.big{padding:.25rem 0}
.marquee.big .marquee-track span{font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;font-size:clamp(1.5rem,4.2vw,3.1rem);
  letter-spacing:-.025em;text-transform:uppercase}

section{padding:var(--respiro) var(--gutter)}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:var(--rule);padding-bottom:.7rem;
  margin-bottom:var(--sec-gap);flex-wrap:wrap}
/* O título de seção pode ser h1 (título da página) ou h2 (seção interna). O
   desenho é o mesmo; quem escolhe a etiqueta é a hierarquia do documento, não a
   aparência. */
.sec-head h1,.sec-head h2{font-size:var(--t-lg);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;letter-spacing:-.028em}
.sec-head h1 em,.sec-head h2 em{font-family:var(--f-ed);font-style:italic;font-weight:400;font-stretch:100%;
  font-variation-settings:normal;text-transform:none;letter-spacing:-.01em}
.sec-head a.mono{border-bottom:1px solid var(--ink-line);padding-bottom:2px;
  transition:border-color .3s}
.sec-head a.mono:hover{border-bottom-color:var(--ink)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

.ftoolbar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-bottom:var(--sec-gap)}

.ftoolbar.aberta{margin-bottom:0}
.fbtn{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;padding:.55rem .95rem;border:1px solid var(--ink);
  transition:background .3s,color .3s}
.fbtn i{font-style:normal;transition:transform .4s var(--ease);line-height:1}
.fbtn.on{background:var(--ink);color:var(--paper)}
.fbtn.on i{transform:rotate(45deg)}
.fativos{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;flex:1}

.fativos .flimpar{margin-left:1.4rem}
.fpill{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem .7rem;border-radius:100px;
  background:var(--ink);color:var(--paper)}
.fpill i{font-style:normal;font-size:9px;opacity:.65}
.fpill:hover i{opacity:1}
.flimpar{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--ink-line);padding-bottom:2px;transition:color .3s}
.flimpar:hover{color:var(--ink);border-bottom-color:var(--ink)}

.filters{display:grid;gap:0;max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .35s;opacity:0}
.filters.on{opacity:1;margin-bottom:var(--sec-gap)}

.fgroup{display:grid;grid-template-columns:11rem minmax(0,1fr);
  gap:.6rem 1.4rem;align-items:start;padding:.85rem 0;border-bottom:var(--rule)}
.fgroup:first-child{padding-top:1.1rem;margin-top:.2rem}
.fgroup:last-child{border-bottom:0}
.fgroup-lbl{color:var(--ink-soft);padding-top:.5rem;line-height:1.2}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem}
@media (max-width:833px){
  .fgroup{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .fgroup-lbl{padding-top:0}
}
@media (max-width:599px){
  .ftoolbar{gap:.6rem}
  .fativos{order:3;flex-basis:100%;flex:none}
  .sorter{margin-left:auto}
}
.chip{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;padding:.42rem .8rem;border:1px solid var(--ink-line);
  border-radius:100px;transition:background .3s var(--ease),color .3s,border-color .3s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.off{opacity:.3;pointer-events:none}
.sorter{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.sorter select{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:transparent;
  border:1px solid var(--ink-line);padding:.4rem .5rem;border-radius:100px}
.sorter select:focus{outline:none;border-color:var(--ink)}

.pager{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center;
  margin-top:var(--respiro)}
.pg{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;min-width:38px;height:38px;padding:0 .6rem;
  border:1px solid var(--ink-line);transition:background .3s,color .3s,border-color .3s}
.pg:hover:not(:disabled){border-color:var(--ink)}
.pg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pg:disabled{opacity:.3;pointer-events:none}
.pager .gap{font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft);
  padding:0 .2rem}
.empty{grid-column:1/-1;padding:clamp(2.5rem,7vw,5rem) 0;text-align:center;
  display:grid;gap:.8rem;justify-items:center}
.empty .ed{font-size:1.4rem;color:var(--ink)}
.empty .mono{color:var(--ink-soft)}
.empty a{border-bottom:1px solid currentColor}

.grid{display:grid;gap:clamp(1.2rem,2.4vw,2.2rem) clamp(.9rem,1.8vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr))}
.card{display:block}
.card-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--ink-line);transition:border-color .4s}
.card:hover .card-media{border-color:var(--ink)}

.card-img{position:absolute;inset:0;overflow:hidden;
  filter:saturate(.92) contrast(1.03)}

.card-img.falhou{background:var(--paper-2)}
.card-img.falhou img{opacity:0}
.card-img.falhou::after{content:'';position:absolute;inset:22%;
  background:var(--ink);opacity:.12;
  -webkit-mask:var(--simbolo) center/contain no-repeat;
  mask:var(--simbolo) center/contain no-repeat}
.card.sold .card-img{filter:grayscale(1) opacity(.55)}
.card-img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1);transform-origin:center;
  transition:transform .9s var(--ease);
  will-change:transform;backface-visibility:hidden}
.card:hover .card-img img,.card:focus-visible .card-img img{transform:scale(1.04)}
.card-body{padding-top:.65rem;display:grid;gap:.15rem}
.card-artist{font-weight:600;font-size:.9rem;letter-spacing:-.01em;line-height:1.2}
.card-title{font-family:var(--f-ed);font-size:1rem;color:var(--ink-soft);line-height:1.25}

.card-meta{margin-top:.3rem}
.card-price{font-family:var(--f-data);font-size:var(--t-sm);font-weight:700;
  display:grid;gap:.1rem;justify-items:start}

.card-price s{color:var(--ink-soft);font-weight:400;font-size:var(--t-xs)}
.card-price b{font-weight:700;white-space:nowrap}
.badge{position:absolute;top:.55rem;left:.55rem;z-index:3;font-family:var(--f-data);
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .5rem;
  background:var(--ink);color:var(--paper)}
.badge.out{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}

.card.sold .card-media{filter:grayscale(1) opacity(.55)}
.quick{position:absolute;bottom:0;left:0;right:0;z-index:3;background:var(--ink);
  color:var(--paper);font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem;text-align:center;
  transform:translateY(100%);transition:transform .45s var(--ease)}
.card:hover .quick,.card:focus-visible .quick{transform:none}

.dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin-bottom:1.6rem;
  align-items:baseline}
.dl dt{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.6}
.dl dd{font-size:.9rem;line-height:1.6}

.dl.spec{grid-template-columns:9.5rem minmax(0,1fr);gap:0 1.4rem;margin:0}
.dl.spec dt,.dl.spec dd{padding:.55rem 0;border-bottom:1px dotted var(--ink-line)}
.dl.spec dd{color:var(--ink)}
.dl.spec dt:last-of-type,.dl.spec dd:last-of-type{border-bottom:0;padding-bottom:0}
@media (max-width:520px){.dl.spec{grid-template-columns:7.5rem minmax(0,1fr);gap:0 .9rem}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;padding:.95rem 1.6rem;border:1px solid var(--ink);
  position:relative;overflow:hidden}
/* O preenchimento que sobe no hover mora ATRÁS do texto, e não depende de o
   texto estar embrulhado num <span>.

   Antes ele era um ::before com z-index:1, e o rótulo subia acima dele graças a
   um span com z-index:2. Funcionava enquanto o HTML fosse nosso — mas no
   checkout o WooCommerce reescreve o conteúdo do botão ao trocar de meio de
   pagamento e devolve o texto solto, sem span. Sem span não havia camada, e a
   cortina de cor passava por cima do "Finalizar compra": o botão inteiro virava
   um retângulo vermelho e mudo, exatamente no clique mais importante da loja.

   `isolation:isolate` cria a camada no próprio botão, e daí o ::before pode ir
   para z-index:-1: por especificação, filho de índice negativo pinta acima do
   fundo do elemento e abaixo do conteúdo dele. O texto fica visível com span,
   sem span, ou com o que o plugin inventar amanhã. */
.btn{isolation:isolate}
.btn span{position:relative;z-index:1;transition:color .4s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
/* A cor do texto no hover é dita no botão, não no span, pela mesma razão. */
.btn:hover,.btn:hover span,.btn:focus-visible,.btn:focus-visible span{color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid::before{background:var(--accent)}
.btn.solid:hover,.btn.solid:hover span{color:var(--paper)}
.btn.full{width:100%}

#v-produto{padding:0}
.pdp{padding:calc(var(--hdr-h) + 2.5rem) var(--gutter) 0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}

.pdp-media{position:static}
.pdp-sleeve{aspect-ratio:1;border:1px solid var(--ink-line);overflow:hidden;
  background:var(--paper-2)}
.pdp-sleeve img{width:100%;height:100%;object-fit:cover}
.pdp-seal{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;color:var(--ink-soft)}
.pdp-seal .mk{width:30px;flex:none}

.pdp-info .crumb{margin-bottom:1.4rem;color:var(--ink-soft)}
.pdp-info .crumb a:hover{color:var(--ink)}
/* O título do disco, que encolhe até caber.
   O nome do artista é uma palavra só em metade do catálogo, e palavra só não
   quebra linha: ANTCONSTANTINO, Afrosinfônica, Maracanãzinho. Num tamanho fixo
   de fonte, o nome comprido passava pela direita da tela e ficava cortado.
   A regra aqui é: a fonte é a maior que couber, nunca maior que --t-xl. O
   container-type transforma o h1 na régua — 100cqw é a largura dele mesmo —, e
   cada linha se mede contra ela com o número de letras da maior palavra, que
   vem do PHP em --n-art e --n-alb.
   Os divisores .86 e .45 são a largura média de uma letra, em fração do tamanho
   da fonte, medida nesta fonte e nestes dois estilos. Medi os nomes reais do
   catálogo: os maiúsculos ficam entre .75 e .83 — o mais largo é Maracanãzinho,
   .830 — e os itálicos do álbum entre .34 e .42. Os números daqui são maiores
   que o pior caso real de propósito, para o palpite errar para o lado de sobrar
   espaço: medido nos 386 discos, o CSS sozinho já faz todos caberem, gastando
   no máximo 9% de tamanho a mais do que precisava.
   O que o palpite não cobre é o caso extremo, porque letra larga existe: uma
   palavra só de M ocupa 1.047 por letra, e essa passaria. Por isso o JavaScript
   mede a palavra de verdade depois e corrige para os dois lados. O CSS é o que
   evita o primeiro desenho torto; o JavaScript é o que garante. */
.pdp-info h1{font-size:var(--t-xl);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.95;container-type:inline-size;
  --teto-art:var(--t-xl);--teto-alb:calc(var(--t-xl) * .62)}
.pdp-info h1 .art{display:block;
  font-size:min(var(--teto-art),calc(100cqw / (var(--n-art,8) * .86)))}
/* A etiqueta do formato, ao lado do título do disco.
   Mesmo desenho da etiqueta de variante da discografia — mono minúscula, caixa
   alta, filete fino — porque é a mesma função: um dado técnico curto colado a um
   nome, que precisa ser lido depois do nome e nunca antes dele. Daí o alinhamento
   pela base e a cor mais fraca: ela acompanha o título, não disputa com ele. */
.pdp-info h1 .fmt{font-family:var(--f-data);font-size:9px;font-weight:400;
  font-style:normal;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--ink-line);
  padding:.15rem .35rem;margin-left:.6rem;white-space:nowrap;
  vertical-align:middle;position:relative;top:-.15em}
.pdp-info h1 .rec{display:block;font-family:var(--f-ed);font-style:italic;font-weight:400;
  font-stretch:100%;font-variation-settings:normal;text-transform:none;
  letter-spacing:-.01em;margin-top:.25rem;color:var(--ink-soft);
  font-size:min(var(--teto-alb),calc(100cqw / (var(--n-alb,8) * .45)))}
.pdp-price{display:flex;align-items:baseline;gap:.8rem;margin:1.4rem 0 .3rem;flex-wrap:wrap}
.pdp-price strong{font-family:var(--f-data);font-size:1.55rem;font-weight:700}
.pdp-price s{color:var(--ink-soft);font-family:var(--f-data);font-size:.95rem}
.pdp-price .off{background:var(--accent);color:var(--paper);font-family:var(--f-data);
  font-size:8px;letter-spacing:.12em;padding:.25rem .45rem}
.pix-note{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--ink-soft);margin-bottom:.4rem}
.pix-note b{color:var(--accent)}
/* A coluna precisa ter um teto declarado.

   Uma grade de uma coluna sem grid-template-columns dá à coluna o tamanho
   "auto", e auto em grade significa max-content: se um filho pede mais largura
   do que existe — um nome de transportadora com o prazo e o preço na mesma
   linha, um botão com white-space:nowrap —, a coluna cresce e passa do
   contêiner. O bloco do frete estourava 25 pixels para a direita no celular, e
   ninguém via a rolagem porque o <main> tem overflow-x:clip: em vez de rolar, o
   texto era simplesmente cortado na beira da tela.

   minmax(0,1fr) é o teto: a coluna nunca fica maior do que o espaço, e quem
   tem de se ajustar é o conteúdo. */
.pdp-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;
  margin:1.6rem 0}
.pdp-actions>*{min-width:0}

.pdp-desejo{margin:-.1rem 0 .2rem}

.buy-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem}
.buy-row .btn{padding-left:1rem;padding-right:1rem}
.qty{display:flex;align-items:center;border:1px solid var(--ink);width:max-content}
.qty button{width:42px;height:46px;font-family:var(--f-data)}
.qty span{width:44px;text-align:center;font-family:var(--f-data);font-size:var(--t-sm)}

.frete-block{border:1px solid var(--ink-line);padding:1rem}
.frete-block h4{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.frete{display:flex;gap:.4rem}
.frete input{flex:1;min-width:0;border:1px solid var(--ink-line);background:transparent;
  padding:.7rem .8rem;font-family:var(--f-data);font-size:var(--t-sm);letter-spacing:.06em}
.frete input:focus{outline:none;border-color:var(--ink)}
.frete button{border:1px solid var(--ink);padding:.7rem 1.1rem;font-family:var(--f-data);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,color .3s}
.frete button:hover{background:var(--ink);color:var(--paper)}
.frete-res{display:grid;gap:.4rem;margin-top:.9rem;font-size:.875rem}
.frete-res div{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px dotted var(--ink-line);padding-bottom:.35rem}
.frete-res div span:last-child{font-family:var(--f-data);font-size:var(--t-sm);
  white-space:nowrap;flex:none}
/* O nome da transportadora com o prazo é a parte elástica da linha; o preço, a
   parte rígida. Sem isso, os dois disputavam a largura e o preço saía da tela. */
.frete-res div span:first-child{min-width:0;overflow-wrap:anywhere}
.frete-res .hint{display:block;border:0;padding:0;color:var(--ink-soft)}

.pdp-desc{margin:var(--respiro) 0}
.pdp-desc h2{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.pdp-desc p{font-family:var(--f-ed);font-size:clamp(1.05rem,2vw,1.25rem);
  line-height:1.45;color:var(--ink);max-width:46ch}

.desc-itens{list-style:none;display:grid;gap:.35rem;max-width:46ch}
.desc-itens li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  font-size:.9rem;line-height:1.45;color:var(--ink)}
.desc-itens li::before{content:'';width:4px;height:4px;margin-top:.55rem;
  background:var(--ink);opacity:.45}

.spotify{margin:var(--respiro) 0}
.spotify h2{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.spotify iframe{border:0;border-radius:0;display:block;width:100%}

.acc{border-top:var(--rule)}
.acc-item{border-bottom:var(--rule)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0;font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;text-align:left}
.acc-btn i{font-style:normal;transition:transform .4s var(--ease)}
.acc-item.open .acc-btn i{transform:rotate(45deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc-inner{padding:0 0 1.2rem;font-size:.9rem;color:var(--ink-soft);line-height:1.6}

.sides{display:grid;gap:1.4rem}
.side h5{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);border-bottom:var(--rule);
  padding-bottom:.4rem;margin-bottom:.6rem}
.side ol{list-style:none;display:grid;gap:.3rem}
/* align-items:baseline, e não center.
   O número e o nome têm corpos diferentes, 11px monoespaçado contra 14px
   Archivo, e como cada um é item de grade, cada um ganha a própria caixa
   de linha. Sem isto os dois ficam alinhados pelo topo da caixa, e o
   número sobe. Centralizar também erra, por outro motivo: algarismo é
   todo altura de caixa alta, sem descendente, então o centro geométrico
   dele fica acima do centro óptico da palavra ao lado. A linha de base
   compartilhada é o que o olho lê como alinhado. */
.side li{display:grid;grid-template-columns:2ch 1fr;gap:.9rem;font-size:.875rem;
  align-items:baseline;
  color:var(--ink)}
.side li i{font-style:normal;font-family:var(--f-data);font-size:var(--t-xs);
  color:var(--ink-soft)}

.pdp-rel{padding:var(--respiro) var(--gutter);margin-top:var(--respiro);
  border-top:var(--rule)}

#scrim{position:fixed;inset:0;background:rgba(35,31,32,.42);z-index:940;opacity:0;
  visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
#scrim.on{opacity:1;visibility:visible}
#cart{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:950;
  background:var(--paper);border-left:1px solid var(--ink);display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform .55s var(--ease)}
#cart.on{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem var(--pad);border-bottom:var(--rule)}
.cart-body{flex:1;overflow-y:auto;padding:0 var(--pad)}
.cart-empty{padding:3.2rem 0;text-align:center;display:grid;justify-items:center;gap:1.2rem}
.cart-empty .mk{width:120px;opacity:.22}
.cart-empty .ed{font-size:1.25rem;line-height:1.35;color:var(--ink-soft)}
.ci{display:grid;grid-template-columns:66px 1fr auto;gap:.9rem;padding:1.1rem 0;
  border-bottom:var(--rule);align-items:start}
.ci img{aspect-ratio:1;object-fit:cover;border:1px solid var(--ink-line)}
.ci-t{font-weight:600;font-size:.85rem;line-height:1.25}
.ci-s{font-family:var(--f-ed);font-size:.9rem;color:var(--ink-soft)}
.ci-q{margin-top:.35rem;display:flex;gap:.5rem;align-items:center;
  font-family:var(--f-data);font-size:var(--t-xs)}
.ci-q button{padding:0 .3rem}
.ci-p{font-family:var(--f-data);font-size:var(--t-sm);text-align:right}
.ci-x{font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft);display:block;
  margin-top:.4rem;text-decoration:underline}
/* A venda cruzada na gaveta.
   Menor que um item da sacola de propósito — capa de 44px contra 66px, sem
   quantidade, sem remover. Do mesmo tamanho, as duas listas se confundiriam e a
   pessoa leria a sugestão como algo que ela já comprou. */
.cart-junto{padding:1.1rem 0 .4rem}
.cj-tit{color:var(--ink-soft);margin-bottom:.8rem}
.cj{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.8rem;
  align-items:center;padding:.5rem 0}
.cj-capa img{aspect-ratio:1;object-fit:cover;border:1px solid var(--ink-line);display:block}
.cj-nome{display:grid;gap:.1rem;min-width:0}
.cj-a{font-weight:600;font-size:.8rem;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-b{font-family:var(--f-ed);font-size:.85rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-p{font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft)}
.cj-p del{display:none}
/* Alvo de 34px, que é o mínimo confortável para o polegar numa gaveta estreita.
   O sinal é um "+" e não a palavra "adicionar": ao lado de um nome de disco que
   já disputa espaço, a palavra roubaria a linha do álbum. */
.cj-add{width:34px;height:34px;border:1px solid var(--ink-line);background:none;
  font-family:var(--f-data);font-size:1rem;line-height:1;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.cj-add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cj-add.ocupado{opacity:.45;pointer-events:none}

.cart-foot{border-top:1px solid var(--ink);padding:1.1rem var(--pad) 1.4rem;
  display:grid;gap:.7rem}
.cart-row{display:flex;justify-content:space-between;font-family:var(--f-data);
  font-size:var(--t-sm)}
.cart-row.tot{font-size:1.15rem;font-weight:700}

.news{background:var(--ink);color:var(--paper);
  padding:calc(var(--respiro) * 1.6) var(--gutter)}
.news-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);
  align-items:end}
.news h2{font-size:var(--t-xl);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.95}
.news h2 em{font-family:var(--f-ed);font-style:italic;font-weight:400;font-stretch:100%;
  font-variation-settings:normal;text-transform:none;opacity:.6}
.news p{color:rgba(241,239,234,.6);max-width:38ch;margin-top:1rem;font-size:.95rem}
.news-form{display:grid;gap:0}
.news-form .ip{display:flex;border-bottom:1px solid rgba(241,239,234,.35);align-items:center}
.news-form input{flex:1;min-width:0;background:none;border:none;color:var(--paper);
  padding:.8rem 0;font-family:var(--f-data);font-size:var(--t-sm);letter-spacing:.06em}
.news-form input::placeholder{color:rgba(241,239,234,.4)}
.news-form input:focus{outline:none}
.news-form .ip button{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;padding:.5rem 0 .5rem 1rem}
.news-form small{display:block;margin-top:var(--nota-gap);
  font-family:var(--f-data);font-size:8px;letter-spacing:.12em;
  color:rgba(241,239,234,.4);text-transform:uppercase}

#v-selo{padding:0}

.hist{padding:var(--respiro) var(--gutter);display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.hist-block{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);align-items:start}
.hist-block h2{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);border-top:var(--rule);padding-top:.7rem}
.hist-block .body{display:grid;gap:1rem}
.hist-block .lede{font-family:var(--f-ed);font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.3}
.hist-block p{font-size:.98rem;line-height:1.65;color:var(--ink-soft)}

footer{border-top:1px solid var(--ink);padding:2.4rem var(--gutter) 1.2rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.5rem);margin-bottom:2.5rem}
.foot-grid h5{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem}

.foot-grid ul{list-style:none;display:grid;gap:.35rem;font-size:.875rem}
.foot-grid li>a,.foot-grid li>button{display:inline-block;font-size:.875rem;
  text-align:left;color:inherit;
  border-bottom:1px solid transparent;transition:border-color .3s}
.foot-grid li>a:hover,.foot-grid li>button:hover{border-bottom-color:var(--ink)}
.foot-brand .mk-type{width:min(200px,70%);margin-bottom:.9rem}
.foot-brand p{font-size:.8rem;color:var(--ink-soft);max-width:32ch}
.foot-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:var(--rule);padding-top:.9rem;align-items:center}
.credito a{border-bottom:1px solid var(--ink-line);padding-bottom:1px;
  transition:border-color .3s}
.credito a:hover{border-bottom-color:var(--ink)}

#search{
  position:fixed;top:0;left:0;right:0;z-index:970;background:var(--paper);

  border-bottom:var(--rule);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  max-height:100svh;display:flex;flex-direction:column;
}
#search.on{transform:none}

.sc-top{display:flex;align-items:center;gap:1rem;
  height:var(--hdr-h);padding:0 var(--pad);
  border-bottom:var(--rule);

  flex:none}
.sc-top .mk{width:34px;flex:none}
#searchInput{flex:1;min-width:0;background:none;border:none;color:var(--ink);
  font-family:var(--f-ui);font-weight:600;font-size:clamp(1.1rem,3vw,1.9rem);
  letter-spacing:-.02em;padding:.2rem 0}
#searchInput::placeholder{color:var(--ink-line)}

#searchBody:empty{display:none}
#searchInput:focus{outline:none}
.sc-close{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.sc-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 var(--pad) 1.4rem}
.sc-hint{padding:1.2rem 0;color:var(--ink-soft)}
/* Mesma correção da escala de parcelas e dos passos do checkout: cor de filete
   não serve para texto. */
.sc-hint .mono{display:block;margin-bottom:.6rem;color:var(--ink-soft)}
.sr{display:grid;grid-template-columns:52px 1fr auto;gap:.9rem;align-items:center;
  padding:.7rem 0;border-bottom:var(--rule);

  background-clip:padding-box}
.sr:hover{background:var(--paper-2)}
.sr img{aspect-ratio:1;object-fit:cover;border:1px solid var(--ink-line)}
.sr-t b{display:block;font-size:.9rem;font-weight:600;line-height:1.2}
.sr-t span{font-family:var(--f-ed);color:var(--ink-soft);font-size:.95rem}
.sr-t i{display:block;font-style:normal;font-family:var(--f-data);font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.15rem}
.sr-p{font-family:var(--f-data);font-size:var(--t-sm);white-space:nowrap}
.sr-p em{display:block;font-style:normal;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-align:right;margin-top:.2rem}
mark{background:transparent;color:inherit;box-shadow:inset 0 -.4em 0 rgba(178,58,30,.22)}

.disco{padding:0 var(--gutter) var(--respiro)}
.disco-grp{margin-top:clamp(2rem,5vw,3.2rem)}
.disco-grp h4{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink);
  padding-bottom:.5rem;margin-bottom:.2rem}
.disco-grp ul{list-style:none}
.disco-grp li{border-bottom:var(--rule)}
.disco-grp a,.disco-grp .fora{display:grid;grid-template-columns:5.5rem 1fr auto;
  gap:.6rem 1.2rem;
  align-items:baseline;padding:.7rem 0;transition:padding-left .35s var(--ease)}
.disco-grp a:hover{padding-left:.7rem}
/* A linha de disco fora de catálogo tem o mesmo desenho e nenhum convite: sem
   link, sem o deslize do hover. O que ela informa está na coluna da direita. */
.disco-grp .ref{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--ink-soft)}
.disco-grp .nm{font-size:clamp(1rem,2.2vw,1.4rem);font-weight:600;letter-spacing:-.015em}
.disco-grp .nm i{font-family:var(--f-ed);font-style:italic;font-weight:400;
  color:var(--ink-soft)}
.disco-grp .st{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.disco-intro{font-family:var(--f-ed);font-size:clamp(1.05rem,2.2vw,1.4rem);
  color:var(--ink-soft);max-width:56ch;margin:-.8rem 0 .5rem}

.disco-grp .var{font-family:var(--f-data);font-size:8px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--ink-line);padding:.15rem .35rem;
  margin-left:.5rem;white-space:nowrap;vertical-align:middle}
.sem-preco{font-style:normal;font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pdp-fora{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink-soft);
  margin:1.4rem 0 .3rem;max-width:34ch}
@media (max-width:640px){
  .disco-grp a,.disco-grp .fora{grid-template-columns:1fr auto}
  .disco-grp .ref{grid-column:1/-1}
}

.rm-pagina{padding:calc(var(--hdr-h) + 2.5rem) var(--pad) var(--respiro)}
.page-hd{border-bottom:var(--rule);padding-bottom:2rem;margin-bottom:2.5rem}
.page-hd h1{font-size:var(--t-xl);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;letter-spacing:-.038em;
  line-height:.95}
.page-hd p{font-family:var(--f-ed);font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--ink-soft);max-width:44ch;margin-top:1rem}
.page-cols{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4rem);align-items:start}
.page-cols h2,.page-cols h3{font-family:var(--f-data);font-size:var(--t-xs);
  font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);border-top:var(--rule);
  padding-top:.7rem;margin-bottom:.8rem}
.page-cols h3{margin-top:2rem}
.page-cols p,.page-cols li{font-size:.95rem;line-height:1.65;color:var(--ink-soft)}

.page-cols li b{font-weight:600;color:var(--ink)}
.contatos a,.politica a,.page-cols p a,.hist a,.disco-intro a{
  border-bottom:1px solid var(--ink-line);transition:border-color .3s,color .3s}
.contatos a:hover,.politica a:hover,.page-cols p a:hover,.hist a:hover,
.disco-intro a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.page-cols ul{list-style:none;display:grid;gap:.4rem}
.form{display:grid;gap:.9rem}

.form label{display:grid;gap:.35rem;align-content:start;
  font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.form input,.form select,.form textarea{align-self:start}
.form input,.form textarea{border:1px solid var(--ink-line);background:transparent;
  padding:.75rem .8rem;font-family:var(--f-ui);font-size:.95rem;color:var(--ink);
  letter-spacing:normal;text-transform:none}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink)}

/* A etiqueta agora carrega erro também, e erro é mais comprido que "adicionado
   à sacola" — pode chegar com duas frases. Sem teto de largura ela atravessaria
   a tela numa linha só; com teto, ela quebra e continua sendo uma etiqueta. */
#toast{position:fixed;bottom:1.2rem;left:50%;z-index:960;
  background:var(--ink);color:var(--paper);padding:.8rem 1.3rem;font-family:var(--f-data);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  max-width:min(92vw,46ch);text-align:center;line-height:1.5;
  transform:translate(-50%,220%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),opacity .3s,visibility .5s}
#toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}

.grid,.grid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:380px){
  :root{--t-mega:clamp(2.6rem,13vw,11rem)}

  .grid,.grid.wide{gap:1.1rem .65rem}
  .brand-type{display:none}
  .brand-symbol{width:36px}
  .head-right{gap:.85rem}
  .card-artist{font-size:.95rem}
  .card-title{font-size:1.05rem}

  .dl.spec{grid-template-columns:minmax(0,1fr);gap:0}
  .dl.spec dt{padding:.5rem 0 0;border-bottom:0}
  .dl.spec dd{padding:0 0 .5rem}
  .sc-top .mk-wrap{display:none}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .pager{gap:.25rem}
}

@media (max-width:599px){

  .card-artist{font-size:.82rem}
  .card-title{font-size:.9rem;line-height:1.2}
  .card-price{font-size:.72rem}

  .pdp-rel .sec-head h2 em{display:block}
  /* Sete pixels é menor do que a letra de uma bula. Nove ainda é discreto e se
     lê de relance, que é a única função de um selo de oferta. */
  .badge{font-size:9px;padding:.25rem .4rem;top:.4rem;left:.4rem}
  .quick{padding:.55rem;font-size:9.5px}

  .hero>.hero-arrow{display:none}
  /* No celular o banner é quadrado e a margem de baixo da arte é maior, então o
     traço desce e encosta mais na borda. O valor é negativo: o alvo de toque de
     26px passa do fim do banner e tem a sobra cortada pelo overflow, mas o que
     se vê — o traço, no meio do alvo — fica dentro, a oito pixels da beirada. */
  .hero-bars{gap:.4rem;bottom:-.3rem}
  .hero-bars button{height:26px}

  .sorter{margin-left:auto;width:auto;justify-content:flex-end;
    border-top:0;padding-top:0;margin-top:0;gap:.45rem}
  .ftoolbar{gap:.5rem .7rem}
  .ftoolbar .fativos{order:3;flex:1 0 100%;margin-top:.1rem}
  .ftoolbar .sorter{order:2}

  .buy-row{grid-template-columns:auto minmax(0,1fr)}
  .qty{width:auto}
  .buy-row .btn{padding-left:.8rem;padding-right:.8rem;font-size:.62rem;
    letter-spacing:.1em}
  .frete{flex-wrap:wrap}
  .frete button{width:100%}
  .manifesto-foot{flex-direction:column;align-items:flex-start;gap:.6rem}
  .manifesto-foot .mono:last-child{text-align:left}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:.5rem}
  .pdp-seal{margin-top:.7rem}
  .disco-grp a:hover{padding-left:0}

  .disco-grp .var{display:block;margin-left:0;margin-top:.35rem;width:max-content}

  .spotify iframe{height:320px}
}

@media (max-width:430px){
  .spotify iframe{height:152px}
}

@media (pointer:coarse){
  .chip{padding:.62rem 1rem}
  .pg{min-width:44px;height:44px}
  nav.main a,.head-right button,.head-right>a{padding-bottom:6px;padding-top:6px}
  .acc-btn{padding:1.15rem 0}
  .qty button{width:48px;height:50px}
  .ci-q button{padding:.3rem .55rem}

  .foot-grid ul{gap:.35rem}
}

@media (min-width:600px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:700px){
  .grid,.grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:834px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}

  .pdp{grid-template-columns:1.05fr .95fr}
  .pdp-media{position:sticky;top:calc(var(--hdr-h) + 1.5rem);align-self:start}
  .foot-grid{grid-template-columns:1.5fr repeat(3,minmax(0,1fr))}
  .news-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hist-block{grid-template-columns:minmax(0,15rem) minmax(0,42rem)}
}

@media (min-width:1180px){
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .grid.wide{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1680px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.wide{grid-template-columns:repeat(5,minmax(0,1fr))}

  .hero-seal{width:min(70vh,64vw)}
}

@media (min-width:2200px){
  .grid.wide{grid-template-columns:repeat(5,minmax(0,1fr))}
  .manifesto-in{max-width:var(--shell)}
}

@media (max-height:520px) and (orientation:landscape){
  .manifesto{min-height:auto;padding-top:2.5rem;--manifesto-gap:1rem}

  #navMob nav a{font-size:clamp(1.2rem,5vw,1.7rem);padding:.15rem 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

@media (min-width:1180px) and (max-width:1679px){
  .grid.de12>*:nth-child(n+11){display:none}
}
@media (min-width:2400px){
  .grid.de12>*:nth-child(n+8){display:none}
}

@media (max-width:699px){

  .manifesto-foot{flex-direction:row;align-items:flex-end;gap:.9rem}
  .manifesto-foot .mono:last-child{text-align:right;white-space:nowrap}

  .foot-grid{gap:1.6rem}
  .foot-grid>div+div{border-top:0;padding-top:0;margin-top:0}
  .foot-grid h5{margin-bottom:.35rem}
  .foot-grid ul{gap:0}
  .foot-grid li>a,.foot-grid li>button{display:block;padding:.5rem 0}
  .foot-brand{margin-bottom:.4rem}
  .foot-brand p{font-size:.85rem}

  .foot-grid>div:last-child ul{display:flex;gap:1.6rem}
  .foot-bot{gap:.35rem}
  .foot-bot .mono{font-size:.68rem;line-height:1.5}
}

@media (max-width:359px){
  .manifesto-foot{gap:.6rem}
  .manifesto-foot .mono{font-size:.625rem;letter-spacing:.06em}
}

.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start}

.form select{appearance:none;-webkit-appearance:none;
  border:1px solid var(--ink-line);background-color:transparent;
  padding:.75rem 2.4rem .75rem .8rem;
  font-family:var(--f-ui);font-size:.95rem;color:var(--ink);
  letter-spacing:normal;text-transform:none;width:100%;border-radius:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23231F20' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;
  background-size:11px 8px}
.form select:focus{outline:none;border-color:var(--ink)}
.form select:disabled{color:var(--ink-soft);border-style:dashed}

.form select option{background:var(--paper);color:var(--ink)}
@media (max-width:460px){.form-2{grid-template-columns:1fr}}
#contaBtn{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid transparent;transition:border-color .3s}
#contaBtn:hover,#contaBtn.active{border-bottom-color:var(--ink)}

.conta{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sec-gap)}
/* A coluna lateral entra a partir de 760, e não de 900.

   Entre as duas larguras ficava o tablet em pé, que recebia o menu compacto de
   duas colunas em cima do conteúdo: "visão geral | pedidos" numa linha,
   "lista de desejos | endereço" na outra, sem filete entre eles e com o número
   de pedidos jogado na ponta direita. Não parecia um menu de duas colunas,
   parecia uma tabela quebrada. E não havia motivo: em 820 sobram 570 pixels
   para o conteúdo depois dos 210 do menu, que é mais do que um celular tem
   inteiro. */
@media (min-width:760px){
  .conta{grid-template-columns:210px minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);
    align-items:start}
  /* O menu acompanha a rolagem, mas parado logo abaixo do cabeçalho ele
     parece grudado nele. Um respiro maior o mantém como coluna, e não como
     extensão da barra de cima. */
  .conta-nav{position:sticky;top:calc(var(--hdr-h) + 3.5rem)}
}
.conta-nav{display:flex;flex-direction:column}
.conta-nav a{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;padding:.7rem 0;border-bottom:var(--rule);
  color:var(--ink-soft);transition:color .3s;display:flex;
  justify-content:space-between;align-items:center;gap:.6rem}
.conta-nav a:first-child{border-top:var(--rule)}
.conta-nav a.on{color:var(--ink)}
.conta-nav a.on::before{content:'';width:6px;height:6px;background:var(--ink);
  order:-1;flex:none}
.conta-nav a .n{font-size:.66rem;color:var(--ink-soft)}
/* Sair é mais um item da lista, com o mesmo passo dos outros. O afastamento
   que ele tinha era um jeito de dizer "cuidado", e não vale o preço: o menu
   ficava com um buraco no meio e a coluna perdia o ritmo. */
.conta-nav .sair{margin-top:0;color:var(--ink-soft)}

/* O menu da conta no celular é o mesmo menu do desktop, em coluna única.

   Ele era um caso à parte: sem filete entre os itens, um filete só no fim, e o
   nome grudado à esquerda com o contador atrás. Duas telas do mesmo menu com
   dois ritmos diferentes — e a pessoa que usa as duas percebe, mesmo sem saber
   dizer o que mudou. Agora o padrão é um: filete embaixo de cada item, filete
   acima do primeiro, número na ponta direita. */
@media (max-width:759px){
  .conta-nav{display:flex;flex-direction:column;gap:0;border-bottom:0;
    padding-bottom:0;margin-bottom:.4rem}
  .conta-nav a{border-bottom:var(--rule);padding:.95rem 0;gap:.6rem;
    justify-content:space-between;white-space:normal}
  .conta-nav a:first-child{border-top:var(--rule)}
  .conta-nav a .n{margin-left:auto;padding-left:.4rem}
  .conta-nav a.on{color:var(--ink)}
  .conta-nav a.on::before{width:5px;height:5px;order:-1}
  /* Sair segue o mesmo passo dos outros: sem afastamento e sem filete extra,
     porque o item de cima já traz o dele. */
  .conta-nav .sair{margin-top:0;padding:.95rem 0;border-top:0}
}
@media (max-width:400px){

  .conta-nav{grid-template-columns:minmax(0,1fr)}
  .conta-nav .sair{grid-column:1}
}

.conta-corpo h3{font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.15rem;margin-bottom:.3rem}
.conta-corpo .sub{color:var(--ink-soft);font-size:.88rem;margin-bottom:var(--sec-gap)}
.bloco{border:1px solid var(--ink-line);padding:clamp(1rem,2.4vw,1.5rem);
  margin-bottom:1rem}
.bloco-hd{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.bloco-hd h4{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
/* O filete fica onde os outros links do site o põem.
   Aqui a borda é do próprio elemento, então ela desce até o fim da caixa de
   linha, e a caixa herdava a entrelinha do corpo: 1,45 em cima de 11px joga o
   filete quase 2px abaixo das letras, três vezes mais longe que num link de
   texto corrido. Medido: 1,25 devolve 0,068em de folga, contra 0,066em dos
   demais links. */
.link-acao{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;line-height:1.25;
  border-bottom:1px solid var(--ink-line);
  transition:border-color .3s}
.link-acao:hover{border-bottom-color:var(--ink)}
.link-acao.perigo{color:var(--accent);border-bottom-color:transparent}
.link-acao.perigo:hover{border-bottom-color:var(--accent)}

.pedido{border:1px solid var(--ink-line);margin-bottom:1rem}
.pedido-hd{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  padding:.9rem clamp(1rem,2.4vw,1.4rem);border-bottom:var(--rule)}
.pedido-hd .num{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em}
.pedido-hd .quando{font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft)}
.pedido-hd .tot{margin-left:auto;font-family:var(--f-data);font-size:.82rem}
.est{font-family:var(--f-data);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.28rem .5rem;border:1px solid currentColor}
.est.ok{color:var(--ink)}
.est.transito{color:var(--ink-soft)}
.est.espera{color:var(--accent)}
.pedido-itens{display:grid;gap:.9rem;padding:clamp(1rem,2.4vw,1.4rem)}
.pi{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.9rem;align-items:center}
.pi img{width:56px;height:56px;object-fit:cover;background:var(--paper-2)}
.pi .a{font-size:.86rem}
.pi .t{font-family:var(--f-ed);font-style:italic;font-size:.95rem;color:var(--ink-soft)}
.pi .q{font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft);
  text-align:right;white-space:nowrap}
.pedido-pe{border-top:var(--rule);padding:.8rem clamp(1rem,2.4vw,1.4rem);
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft)}

.desejos{display:grid;gap:.9rem}
.dj{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:1rem;
  align-items:center;border:1px solid var(--ink-line);padding:.8rem}
.dj img{width:76px;height:76px;object-fit:cover;background:var(--paper-2)}
.dj .a{font-size:.92rem}
.dj .t{font-family:var(--f-ed);font-style:italic;color:var(--ink-soft)}
.dj .pr{font-family:var(--f-data);font-size:.82rem;margin-top:.2rem}
.dj-acoes{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
@media (max-width:560px){
  .dj{grid-template-columns:64px minmax(0,1fr)}
  .dj img{width:64px;height:64px}
  .dj-acoes{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;
    padding-top:.2rem}
}

.btn-desejo{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.btn-desejo:hover,.btn-desejo.on{color:var(--ink)}
.btn-desejo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn-desejo.on svg{fill:currentColor}

.msg{border:1px solid var(--ink-line);padding:1rem;margin-bottom:.8rem}
.msg-hd{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  font-family:var(--f-data);font-size:var(--t-xs);color:var(--ink-soft);
  margin-bottom:.5rem}
.msg-hd .assunto{color:var(--ink);letter-spacing:.06em}
.msg p{font-size:.9rem;line-height:1.55}
.msg .resposta{margin-top:.8rem;padding-top:.8rem;border-top:var(--rule);
  color:var(--ink-soft)}

.vazio{border:1px dashed var(--ink-line);padding:clamp(1.6rem,4vw,2.6rem);
  text-align:center}
.vazio .ed{font-family:var(--f-ed);font-size:1.3rem;margin-bottom:.5rem}
.vazio .mono{color:var(--ink-soft)}

@media (pointer:coarse){
  .conta-nav a,.link-acao,.btn-desejo{min-height:40px;display:inline-flex;
    align-items:center}
  .conta-nav a{min-height:44px}
}

.sel{position:relative}
.sel select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip-path:inset(50%)}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  width:100%;border:1px solid var(--ink-line);background:transparent;
  padding:.75rem .8rem;font-family:var(--f-ui);font-size:.95rem;color:var(--ink);
  text-align:left;letter-spacing:normal;text-transform:none;
  transition:border-color .3s}
/* O select2 do WooCommerce, quando ele aparece assim mesmo.
   Ele chega como dependência de outro script, e dequeue não desfaz
   dependência: o arquivo carrega, encontra o .state_select e desenha um
   segundo controle ao lado do nosso. Ficavam dois campos de Estado, um
   estreito e mudo em cima do outro, e o que a pessoa via não era o que o
   formulário enviava. O nó fica no DOM, porque quem o criou continua falando
   com ele, e sai da vista. */
.sel>.select2-container{display:none!important}
.sel-btn:hover{border-color:var(--ink-soft)}
.sel-btn:focus-visible{outline:none;border-color:var(--ink)}
.sel.on .sel-btn{border-color:var(--ink)}
.sel-btn svg{width:11px;height:8px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.2;transition:transform .3s var(--ease)}
.sel.on .sel-btn svg{transform:rotate(180deg)}

.sel-lista.solta{z-index:958}
/* Fechada, a lista sai do fluxo E da área de rolagem. Ela é absoluta dentro
   de .sel, e caixa absoluta continua contando para o scroll do ancestral que
   rola: dentro do modal, a lista de 27 estados invisíveis somava mais de mil
   pixels de rolagem vazia. Quando abre, o JS a move para o body com .solta. */
.sel-lista:not(.solta){display:none}
.sel.on .sel-lista{display:block}
.sel-lista{position:absolute;z-index:60;top:calc(100% - 1px);left:0;right:0;
  list-style:none;margin:0;padding:0;background:var(--paper);
  border:1px solid var(--ink);max-height:15rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,transform .18s var(--ease),visibility .18s}
.sel.on .sel-lista,.sel-lista.solta{opacity:1;visibility:visible;transform:none}
.sel-lista li{display:flex;align-items:center;gap:.6rem;
  padding:.6rem .8rem;font-size:.92rem;line-height:1.35;cursor:pointer}
.sel-lista li+li{border-top:1px solid var(--ink-line)}
.sel-lista li::before{content:'';width:5px;height:5px;flex:none;
  background:transparent}
.sel-lista li.on::before{background:var(--ink)}
.sel-lista li.foco{background:var(--paper-2)}

.sel.compacto .sel-btn{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;padding:.4rem .6rem;
  border-radius:100px;gap:.5rem;width:max-content}

.sel.compacto .sel-lista{right:auto;min-width:14rem;border-radius:0}

.sel-lista li{white-space:nowrap}
@media (max-width:520px){.sel.compacto .sel-lista{left:auto;right:0}}

@media (pointer:coarse){
  .sel-lista li{padding:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .sel-btn svg,.sel-lista{transition:none}
}

.form .invalido{border-color:var(--accent)}
/* O campo que o WooCommerce recusou. Com o aviso indo para o toast, a marca no
   campo deixa de ser reforço e passa a ser a única pista de ONDE corrigir — o
   JavaScript ainda rola até o primeiro deles. */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid textarea,
.woocommerce-invalid .select2-container .select2-selection{border-color:var(--accent)}
.erro-campo{display:block;margin-top:.35rem;font-family:var(--f-data);
  font-size:.66rem;letter-spacing:.04em;line-height:1.5;
  text-transform:none;color:var(--accent)}
/* Se algum aviso de campo trouxer link um dia, ele herda a cor e ganha filete —
   lido como ação, não como continuação da frase. */
.erro-campo a{color:inherit;border-bottom:1px solid currentColor}
.erro-campo[hidden]{display:none}
/* A régua da senha no cartão de cadastro: a grade do formulário já espaça, então
   ela não traz margem própria — e sobe um tantinho para ficar colada no campo de
   que fala, como no formulário da conta. */
.co-cartao .senha-forca{margin:-.2rem 0 0}
.co-cartao .senha-forca[hidden]{display:none}

.btn.desativado{opacity:.45}
.btn.desativado:hover{opacity:.6}

.ci{grid-template-columns:66px minmax(0,1fr)}
.ci-corpo{display:grid;gap:.5rem;min-width:0}
.ci-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.ci-cab>div:first-child{min-width:0}

/* O disco que acabou depois de entrar na sacola. Cor de alerta e nada de
   ícone: a frase já diz o que fazer, e a linha é curta o bastante para ser lida
   inteira antes do próximo gesto. */
.ci-fora{color:var(--accent);margin-top:.35rem;letter-spacing:.08em;line-height:1.5}
.ci-pe{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.ci-q{margin-top:0}
.ci-x{margin-top:0;display:inline-block}
.ci-x:hover{color:var(--ink)}
.ci-p{white-space:nowrap}

.cart-foot:empty{border-top:none;padding:0}

.aviso-desejo{max-height:0;overflow:hidden;opacity:0;
  font-family:var(--f-data);font-size:.66rem;letter-spacing:.04em;line-height:1.6;
  color:var(--accent);transition:max-height .3s var(--ease),opacity .3s,margin .3s}
.aviso-desejo.on{max-height:4rem;opacity:1;margin-top:.45rem}
.aviso-desejo a{border-bottom:1px solid currentColor}
.cart-frete-ops{display:none;overflow:hidden}
.cart-frete-ops.on{display:block;border-top:var(--rule)}
.cf-cep{padding:.7rem .8rem;color:var(--ink-soft);font-size:.66rem;line-height:1.6;
  border-bottom:var(--rule)}
.cf-op{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .8rem;
  width:100%;padding:.6rem .8rem .6rem 1.9rem;text-align:left;position:relative;
  transition:background .3s}
.cf-op+.cf-op{border-top:1px solid var(--ink-line)}
.cf-op:hover{background:var(--paper-2)}

.cf-op::before{content:'';position:absolute;left:.8rem;top:.95rem;
  width:7px;height:7px;border:1px solid var(--ink-soft)}
.cf-op.on::before{background:var(--ink);border-color:var(--ink)}
.cf-n{font-size:.86rem}
.cf-n i{font-style:normal;color:var(--ink-soft);font-size:.76rem}
.cf-d{grid-column:1;font-size:.64rem;color:var(--ink-soft);letter-spacing:.04em}
.cf-v{grid-row:1;grid-column:2;font-size:.82rem;align-self:start}
.cart-row.desc{color:var(--accent)}
.frete-cep{margin-top:.6rem;padding-top:.5rem;border-top:var(--rule);
  color:var(--ink-soft);font-size:.64rem;line-height:1.6;letter-spacing:.04em}

.rm-pagina.larga{max-width:1560px;margin:0 auto}

/* Os passos que ainda não chegaram estavam na cor dos filetes: 1,5:1, o mesmo
   tom de uma linha de 1 pixel. Como texto isso não se lê — e é o texto que diz
   à pessoa o que vem depois, "revisão e pagamento", "confirmação". Em tinta
   fraca dá 5:1 e continua claramente atrás do passo atual, que é o único em
   tinta cheia. */
.co-passos{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding-bottom:.8rem;
  border-bottom:var(--rule);margin-bottom:var(--sec-gap);
  font-size:.66rem;letter-spacing:.1em;color:var(--ink-soft)}
.co-passos .agora{color:var(--ink)}

/* Os motivos, quando o checkout é barrado. Sem moldura e sem vermelho: aqui o
   texto não é um aviso sobre a página, ele É a página — e uma caixa colorida em
   volta do assunto principal só rouba atenção de si mesma. */
.co-aviso{color:var(--ink);padding:0;
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.04em;line-height:1.65;
  margin-bottom:var(--sec-gap)}
/* A mesma caixa, quando ela carrega uma lista de motivos: sem marcador, porque
   o marcador de lista some no primeiro item e vira sujeira quando há dois. */
ul.co-erros{list-style:none;display:grid;gap:.45rem;max-width:60ch}
.co-erro-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}

:root{--nota-gap:1.4rem}
.co-nota{color:var(--ink-soft);font-size:.64rem;line-height:1.7;letter-spacing:.04em}
.btn+.co-nota,button+.co-nota,.btn+small,button+small,
form+.co-nota{margin-top:var(--nota-gap)}
#painelPag .co-nota,.co-cartao .co-nota{margin-top:var(--nota-gap)}

/* ═══════════════ TEXTO DE PLUGIN DENTRO DOS CARTÕES ═══════════════
   O WooCommerce injeta o aviso de privacidade no formulário de cadastro, e ele
   chegava do jeito que o navegador desenha um parágrafo: Archivo em 17px, do
   mesmo tamanho do texto de leitura de uma página de conteúdo. Dentro de um
   cartão de formulário — onde tudo é rótulo pequeno, campo e botão — ele virava
   o maior texto da tela, e o maior texto da tela era o rodapé jurídico.

   A regra é a mesma nota de pé de cartão usada no passo do pagamento, a que
   diz que nenhum dado de cartão passa pelo site. E vale para qualquer parágrafo
   sem classe que caia aqui dentro: se um plugin escrever mais alguma coisa
   amanhã, ela já nasce no tamanho da casa em vez de esperar por uma correção. */
.co-cartao .woocommerce-privacy-policy-text,
.co-cartao .woocommerce-privacy-policy-text p,
.co-cartao > p:not([class]),
.co-cartao form > p:not([class]){
  font-family:var(--f-data);font-size:.64rem;line-height:1.7;
  letter-spacing:.04em;color:var(--ink-soft);text-transform:none}
.co-cartao .woocommerce-privacy-policy-text{margin-top:var(--nota-gap)}
/* Dentro do formulário, a grade já espaça: a margem seria espaço somado a
   espaço. Fora dele — quando o aviso cai depois do form — ela vale. */
.co-cartao form .woocommerce-privacy-policy-text{margin-top:0}
/* O elemento de atribuição de pedido do WooCommerce tem altura zero e nenhum
   conteúdo visível, mas é um filho da grade como qualquer outro: ocupa uma
   célula, e uma célula cobra um espaçamento inteiro. Era daí que vinha o vão
   dobrado entre a senha e o aviso de privacidade — 29 pixels onde o padrão da
   casa é 14. Os campos escondidos dentro dele continuam sendo enviados; o que
   sai é a linha vazia que ele criava. */
.co-cartao form > wc-order-attribution-inputs,
.form > wc-order-attribution-inputs,
.romaria-endereco form > wc-order-attribution-inputs{display:none}
.co-cartao .woocommerce-privacy-policy-text p{margin:0}
/* O link continua parecendo link: tinta cheia e um filete embaixo, como em toda
   nota do checkout. Sem isso ele ficava da mesma cor do texto em volta, e a
   política de privacidade virava uma frase que ninguém sabe que dá para abrir. */
.co-cartao .woocommerce-privacy-policy-text a,
.co-cartao > p:not([class]) a{color:var(--ink);
  border-bottom:1px solid var(--ink-line);transition:border-color .3s}
.co-cartao .woocommerce-privacy-policy-text a:hover,
.co-cartao > p:not([class]) a:hover{border-bottom-color:var(--ink)}

.co-id{display:grid;justify-items:center}
.co-id-caixa{width:min(460px,100%)}
.co-id-caixa.criando{width:min(560px,100%)}
.co-id .co-nota{max-width:min(560px,100%);text-align:center;
  margin-top:var(--nota-gap)}

.co-id-caixa .form{padding-bottom:1.3rem;border-bottom:var(--rule)}
.co-troca{margin-top:1.3rem}
.co-cartao{border:1px solid var(--ink-line);padding:clamp(1.1rem,2.6vw,1.8rem);
  display:grid;align-content:start;gap:.4rem}
.co-cartao.ativo{border-color:var(--ink)}
.co-cartao h1,.co-cartao h3{font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em}
.co-cartao .sub{color:var(--ink-soft);font-size:.88rem;margin-bottom:.9rem}
.co-cartao .form{margin-top:.2rem}
.co-sub{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);border-top:var(--rule);
  padding-top:.9rem;margin-top:.4rem}

.co-3col{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sec-gap)}
@media (min-width:900px){
  .co-3col{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(1.4rem,2.6vw,2.4rem)}
  .co-3col .co-col:last-child{grid-column:1 / -1}
}
@media (min-width:1240px){
  .co-3col{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr)}
  .co-3col .co-col:last-child{grid-column:auto}
}

.co-col{padding:0}

/* ═══════════════ PASSO 2 · SÓ A ENTREGA NA TELA ═══════════════
   Quem ainda não tem endereço vê uma coisa só. As colunas de pedido e pagamento
   estão impressas — precisam estar, para aparecerem sem recarregar e para serem
   enviadas com o formulário —, mas ficam fora da vista e fora da ordem de foco.

   `display:none` e não `visibility`: escondido pela metade, o pagamento
   continuaria recebendo tabulação, e a pessoa cairia num campo invisível. */
/* Enquanto se preenche, não existe resumo.

   O resumo da entrega é reimpresso pelo servidor a cada recálculo do checkout, e
   o recálculo acontece enquanto a pessoa digita: o CEP preenche a rua, o
   WooCommerce recalcula o frete, e o resumo voltava para a tela com o endereço
   pela metade, com um "Alterar" ao lado do formulário que já estava aberto. A
   etiqueta do endereço pronto em cima do endereço em construção.

   Esconder pela classe do envelope, e não pelo conteúdo, é o que sobrevive a
   esse reimpresso: o nó pode ser trocado quantas vezes quiser, a regra continua
   valendo. */
.co-3col.modo-entrega #resumoEntrega{display:none}
.co-3col.modo-entrega{grid-template-columns:minmax(0,1fr);justify-items:center}
.co-3col.modo-entrega>#order_review{display:none}
.co-3col.modo-entrega>.co-col{width:100%;max-width:38rem}
.co-entrega-sub{color:var(--ink-soft);font-size:.92rem;margin:-.4rem 0 1.2rem;
  max-width:44ch}
.co-entrega-acoes{margin-top:1.4rem}
/* O recado fica debaixo do botão que a pessoa acabou de clicar — é dali que ela
   não tira o olho — e no mesmo vermelho dos outros recados de campo. */
.co-entrega-acoes .co-nota{margin-top:.7rem;color:var(--accent)}

/* O WooCommerce troca #order_review inteiro por AJAX, então pedido e pagamento
   precisam morar dentro dele. display:contents devolve as duas seções à grade
   de três colunas sem tirá-las de dentro do bloco que é atualizado. */
.co-3col>#order_review,
.co-3col>#order_review>.woocommerce-checkout-review-order-table{display:contents}
/* O rádio de frete continua no formulário, porque é ele que o WooCommerce lê,
   mas quem aparece é a pílula inteira. */
.cf-op>input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
label.cf-op{cursor:pointer}
/* O único sinal de escolhido é o quadradinho da esquerda. Mexer na cor da
   borda escurecia o filete que separa uma opção da outra, e a linha inteira
   parecia ter mudado de estado junto. */
label.cf-op:has(input:checked)::before{background:var(--ink);border-color:var(--ink)}
/* Forma de pagamento usa a mesma pílula do frete: são a mesma pergunta feita
   duas vezes na mesma tela, e responder de dois jeitos diferentes confunde. */
.pag-ops{border:1px solid var(--ink-line);margin-bottom:1rem}
/* O quadradinho do meio de pagamento, no meio da linha.
   Nas opções de frete ele é posicionado por uma distância fixa do topo, porque
   lá cada opção tem duas linhas e a marca precisa alinhar com a primeira. O
   pagamento tem uma linha só, e a mesma distância fixa deixava a marca alta.
   Aqui ela é ancorada na metade da altura, então acompanha qualquer tamanho. */
.pag-ops .cf-op{align-items:center}
.pag-ops .cf-op::before{top:50%;transform:translateY(-50%)}
.pag-ops .cf-n{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;line-height:1.3}
.pag-ops .pag-ic{display:flex;align-items:center;gap:.4rem}
.pag-ops .pag-ic img{max-height:20px;width:auto;display:block}
.pag-ops .payment_box{display:none!important}

/* ── ENDEREÇO DE ENTREGA ──────────────────────────────────────────────
   Os campos são do WooCommerce, e ele não embrulha o input dentro do
   <label> como o resto do sistema. Por isso o .form label{display:grid}
   do tema jogava o asterisco de obrigatório para uma linha só dele. Aqui
   o rótulo volta a ser uma linha de texto, e o par rótulo/campo é
   remontado à mão. Vale tanto no modal quanto na coluna, porque é o
   mesmo nó que anda entre os dois. */
.romaria-endereco h3{display:none}
.romaria-endereco .form{display:block}
.romaria-endereco .woocommerce-billing-fields__field-wrapper,
.romaria-endereco .woocommerce-shipping-fields__field-wrapper,
.romaria-endereco .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.romaria-endereco .form-row{margin:0;padding:0;display:flex;flex-direction:column;
  gap:.35rem;grid-column:1 / -1}
/* Os pares de meia linha são apontados pelo ID do campo, e não pela classe.
   O editor de campos do checkout reescreve as classes depois de qualquer
   filtro do tema, e devolvia form-row-wide ao telefone toda vez. ID ele não
   mexe. Vale para entrega e para faturamento, que perguntam o mesmo. */
.romaria-endereco .form-row:has(#billing_number),
.romaria-endereco .form-row:has(#billing_city),
.romaria-endereco .form-row:has(#billing_phone),
.romaria-endereco .form-row:has(#shipping_number),
.romaria-endereco .form-row:has(#shipping_city){grid-column:1}
.romaria-endereco .form-row:has(#billing_address_2),
.romaria-endereco .form-row:has(#billing_state),
.romaria-endereco .form-row:has(#billing_cellphone),
.romaria-endereco .form-row:has(#shipping_address_2),
.romaria-endereco .form-row:has(#shipping_state){grid-column:2}
.romaria-endereco .form-row label{display:block;margin:0;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
/* O obrigatório é um sinal, não uma palavra: um acento agudo vermelho
   encostado no rótulo. Pequeno e alto, ele se lê sem se impor.
   E o "(opcional)" sai: se o campo não tem o sinal, ele é opcional. Dizer
   as duas coisas dobra o texto e não acrescenta informação. */
.romaria-endereco .form-row label .required,
.romaria-endereco .form-row abbr[title]{border:0;text-decoration:none;
  color:var(--accent);font-size:.85em;line-height:0;vertical-align:super;
  margin-left:.1em}
.romaria-endereco .form-row label .optional{display:none}
/* A mesma marca aparece uma vez no alto do modal, explicada. */
.modal-hd .obrig-legenda{font-style:normal;font-family:var(--f-data);
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;margin:0 auto}
.romaria-endereco .woocommerce-input-wrapper{display:block;width:100%}
.romaria-endereco .form-row input.input-text,
.romaria-endereco .form-row select,
.romaria-endereco .form-row textarea,
.romaria-endereco .form-row .select2-container{
  width:100%;border:1px solid var(--ink-line);background:transparent;
  border-radius:0;padding:.7rem .8rem;font-family:var(--f-data);
  font-size:.9rem;color:var(--ink)}
.romaria-endereco .form-row input.input-text:focus,
.romaria-endereco .form-row select:focus,
.romaria-endereco .form-row textarea:focus{outline:none;border-color:var(--ink)}
/* Marcar o endereço de faturamento é uma escolha, não um campo: linha
   inteira, caixinha à esquerda, sem o rótulo em caixa alta. */
/* Uma medida só governa a distância entre os blocos do modal: o check, o
   endereço de faturamento e o botão. Assim o espaço é o mesmo com a caixa
   marcada ou desmarcada, sem exceção para cada estado. */
.romaria-endereco #ship-to-different-address{grid-column:1 / -1;margin:1.2rem 0 0}
.romaria-endereco .shipping_address{margin-top:1.2rem}
.romaria-endereco #ship-to-different-address label{display:flex;align-items:center;
  gap:.5rem;text-transform:none;letter-spacing:.02em;font-family:var(--f-ui);
  font-size:.9rem;color:var(--ink);cursor:pointer}
.romaria-endereco #ship-to-different-address input{width:auto;margin:0}
/* A caixa do WooCommerce fica no formulário, fora da vista: é ela que o
   servidor lê, e a visível apenas a espelha invertida. */
/* O bloco da nota fiscal, quando ele repete a entrega.
   Some da vista mas continua no formulário: os campos precisam ser enviados,
   e é o JS que os mantém iguais aos da entrega. Esconder com display:none
   também funcionaria, mas aí o WooCommerce deixaria de validar o que está
   dentro, e um CEP inválido copiado passaria batido. */
.woocommerce-billing-fields.romaria-espelhado{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.romaria-oculto,
/* Escondido para os olhos, presente para o leitor de tela e para o Google.

   A regra existia só dentro do formulário de endereço, e a classe começou a ser
   usada fora dele — no rádio do meio de pagamento e no h1 da página inicial. Uma
   classe com dois escopos é uma classe que funciona por acidente: agora ela vale
   em qualquer lugar, e o escopo antigo continua valendo por herança. */
.romaria-oculto{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  margin:-1px;padding:0;border:0}
.romaria-endereco .romaria-oculto{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.romaria-endereco .shipping_address>.co-nota{margin:.2rem 0 .8rem}
/* Campo travado: continua legível, mas anuncia que não se digita aqui. */
.romaria-endereco .romaria-travado input.input-text{background:var(--paper-2);
  color:var(--ink-soft);cursor:not-allowed}
.romaria-endereco .form-row .description{font-family:var(--f-data);font-size:.6rem;
  letter-spacing:.06em;color:var(--ink-soft);margin:.35rem 0 0}
.romaria-endereco .form-row .description a{border-bottom:1px solid var(--ink-line)}
.romaria-endereco .form-row.com-erro input.input-text{border-color:var(--accent)}
.romaria-endereco .erro-doc{margin-top:.35rem}
/* País some da vista, e continua no formulário.
   A loja despacha para um país só, e um seletor com uma opção é um controle
   que só pode dar uma resposta: ocupa uma linha, pede uma decisão que não
   existe e ainda sugere que existiria outra. O campo continua sendo enviado,
   porque o frete e a nota fiscal precisam dele. */
.romaria-endereco .form-row.romaria-pais-unico{display:none}
/* Na conta os dois endereços se seguem, e cada um traz seu título fora do
   formulário. O respiro entre eles é maior do que o respiro entre campos,
   senão os dois blocos se leem como um só formulário comprido. */
.conta-corpo .romaria-endereco+.conta-form-hd{margin-top:2.6rem}
/* A linha do botão fica fora da grade dos campos, e por isso não herda o
   espaço da grade. Ela pede o seu.

   Salvar e cancelar na mesma linha, e com pesos diferentes: o botão é a ação
   esperada, o cancelar é a saída. Dois botões iguais lado a lado obrigam a
   ler os dois antes de decidir qual é qual. */
.conta-corpo .romaria-endereco .woocommerce-address-fields>.form-row{margin-top:1.6rem}
/* O respiro dos rótulos.

   No checkout os campos moram numa caixa estreita, e 1rem entre as linhas
   bastava. Aqui a coluna é larga, os campos ficam altos, e com o mesmo 1rem o
   rótulo de um campo encostava na caixa do campo de cima: lido de relance,
   "NÚMERO" parecia legenda do endereço acima em vez de título do que vem
   abaixo. O rótulo precisa estar visivelmente mais perto do seu campo do que
   do campo anterior; é essa diferença, e não o tamanho da fonte, que diz a
   quem ele pertence. */
.conta-corpo .romaria-endereco .woocommerce-address-fields__field-wrapper{
  row-gap:1.7rem;column-gap:1rem}
.conta-corpo .romaria-endereco .form-row{gap:.5rem}

/* Salvar e cancelar na mesma linha, alinhados pela base do texto.

   Alinhar pelo meio das caixas deixaria as duas palavras em alturas
   diferentes, porque o botão tem recheio e o link não tem nenhum. Quem lê a
   linha lê as letras, não as caixas. */
/* A linha de ações vale para os dois formulários da conta, endereço e acesso.
   Presa ao endereço, ela deixava o botão de salvar do acesso virar uma barra
   preta da largura da página: um botão do tamanho de um cabeçalho promete uma
   ação maior do que "salvar alterações". */
.conta-corpo .form-row.conta-form-acoes,
.conta-corpo .romaria-endereco .form-row.conta-form-acoes{display:flex;
  flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:1.5rem}
.conta-corpo .conta-form-acoes .woocommerce-Button{margin:0;width:auto;
  flex:none;display:inline-block}
.conta-corpo .conta-form-acoes .link-acao{color:var(--ink-soft)}

/* ── ÁREA DA CONTA ────────────────────────────────────────────────────
   As telas de pedidos, endereço e acesso são do WooCommerce. O tema não as
   reescreve: veste a tabela, os formulários e os botões que ele produz. */
.conta-corpo h3{font-size:var(--t-md);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;
  letter-spacing:-.02em;margin-bottom:.3rem}
/* Título do formulário com a legenda do obrigatório na ponta direita, e um
   respiro de verdade antes do primeiro campo: colados, o título parecia
   rótulo do campo de cima. */
.conta-corpo .conta-form-hd{display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.conta-corpo .conta-form-hd h3{margin:0}
.conta-corpo .conta-form-hd .obrig-legenda{font-style:normal;
  font-family:var(--f-data);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.conta-corpo .sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:1.4rem}
.conta-corpo .bloco+.bloco{margin-top:1rem}
.bloco.alerta{border-color:var(--accent)}
.bloco.alerta .bloco-hd h4{color:var(--accent)}

/* tabela de pedidos */
.woocommerce-orders-table,.woocommerce-table--order-details{width:100%;
  border-collapse:collapse;font-size:.9rem}
.woocommerce-orders-table th,.woocommerce-table--order-details th{
  font-family:var(--f-data);font-size:var(--t-xs);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  text-align:left;padding:.6rem 0;border-bottom:var(--rule)}
.woocommerce-orders-table td,.woocommerce-table--order-details td{
  padding:.85rem 0;border-bottom:1px solid var(--ink-line);line-height:1.5}

/* Cada célula centrada na altura da própria linha.

   A linha é alta por causa do botão de ação, e o resto do conteúdo é uma linha
   de texto só. Encostado no topo, esse texto ficava com um dedo de espaço em
   cima e três embaixo, e a linha inteira parecia despencar para a esquerda. Com
   tudo centrado entre os dois filetes, as cinco colunas passam a se ler numa
   faixa horizontal só, que é como se lê uma tabela.

   O !important existe porque a célula do número já vinha com middle de uma
   regra do plugin que ganha da nossa por especificidade — e antes disso ela era
   a única centrada, com as outras quatro no alto. Ou todas ou nenhuma. */
.conta-corpo .woocommerce-orders-table td,
.conta-corpo .woocommerce-orders-table th,
.conta-corpo .woocommerce-table--order-details td{vertical-align:middle !important}

/* Os botões ficam à direita, então o rótulo da coluna também. Antes, "TOTAL"
   alinhado à direita e "AÇÕES" à esquerda encostavam um no outro no meio da
   tabela, formando um "TOTAL AÇÕES" que parecia uma coluna só. */
.conta-corpo .woocommerce-orders-table th.woocommerce-orders-table__header-order-actions,
.conta-corpo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
  text-align:right}
/* Dinheiro alinhado pela direita se compara de relance, um valor embaixo do
   outro. */
.conta-corpo .woocommerce-orders-table th.woocommerce-orders-table__header-order-total,
.conta-corpo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total{
  text-align:right;padding-right:1.4rem}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
  text-align:right;white-space:nowrap}
.woocommerce-orders-table .button,.woocommerce-table .button{
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink-line);padding:.45rem .7rem;
  display:inline-block;margin-left:.35rem;transition:border-color .3s}
.woocommerce-orders-table .button:hover{border-color:var(--ink)}
/* A tabela de pedidos vira lista empilhada bem antes do celular.

   São cinco colunas — número, data, estado, total e ações — e a coluna lateral
   da conta come 210 pixels. No tablet em pé sobram uns 500: a data quebrava em
   duas linhas, "R$ 510,73 de 2 itens" quebrava em duas, e os cabeçalhos
   "PEDIDO" e "DATA" se encostavam. Empilhada, cada pedido volta a ser um
   registro legível, com o rótulo antes do valor. */
@media (max-width:900px){
  .woocommerce-orders-table thead{display:none}
  .woocommerce-orders-table tr{display:grid;gap:.2rem;padding:.9rem 0;
    border-bottom:1px solid var(--ink-line)}
  /* Um filete por pedido, e não um por campo.
     A regra base desenha um filete embaixo de cada célula — certo na tabela em
     colunas, errado na lista empilhada, onde cada célula virou uma linha. Somado
     ao filete do próprio pedido, dava o risco duplo logo abaixo do botão.
     O !important aqui é para vencer a regra base sem entrar numa disputa de
     seletores que a próxima edição desempata errado. */
  .conta-corpo .woocommerce-orders-table td,
  .woocommerce-orders-table td{border:0 !important;padding:0;display:flex;gap:.6rem}
  .woocommerce-orders-table td::before{content:attr(data-title);
    font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-soft);min-width:7rem}
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
    text-align:left;margin-top:.5rem}
  /* O alinhamento à direita do total e das ações é para a tabela em colunas.
     Empilhado, ele joga o rótulo para longe do valor e a lista perde a margem
     comum — cada linha começando num lugar diferente. */
  .conta-corpo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total,
  .conta-corpo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
    text-align:left;padding-right:0}
}

/* ═══════════════ ACESSO: A FORÇA DA SENHA ═══════════════
   Quatro traços, um por requisito cumprido. A barra é a mesma linguagem da
   barra de parcelas da sacola: filetes finos que se preenchem, sem porcentagem
   e sem semáforo verde-amarelo-vermelho. Cor não diz o que fazer; a lista
   abaixo diz.

   O medidor do WordPress fica escondido, e não removido: ele continua sendo
   quem o plugin consulta, e um dia pode voltar a ser útil. */
.woocommerce-password-strength,
.woocommerce-password-hint{display:none !important}

.romaria-acesso .romaria-senha{border:0;padding:0;margin:2.2rem 0 0}
.romaria-acesso .romaria-senha legend{font-family:var(--f-data);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:0;margin:0 0 .3rem}
/* A instrução da senha fala a língua da vizinhança.
   Ela mora entre um rótulo monoespaçado e um campo, e em serifa parecia um
   parágrafo de outro documento colado ali. Nota de rodapé de formulário é
   monoespaçada nesta loja — a mesma voz do "não chegou? veja o spam". */
.romaria-acesso .romaria-senha .sub{margin:0 0 1.4rem;font-family:var(--f-data);
  font-size:.7rem;letter-spacing:.04em;line-height:1.6;color:var(--ink-soft)}

/* ── VER A SENHA ──────────────────────────────────────────────────────
   O botão mora dentro da moldura do campo, encostado à direita, com um filete
   separando-o do texto digitado: mesmo desenho de divisória que o resto do
   site usa. Ele cobre a altura inteira do campo, e é isso que o torna clicável
   no celular sem precisar de tamanho extra — 44px de alvo saem de graça da
   altura que o campo já tinha.

   O padding-right no campo é o que impede a senha de correr por baixo do
   botão. É um número medido no navegador com "OCULTAR" escrito em Space Mono
   maiúscula: se o rótulo mudar de palavra, esse número muda com ele. */
.campo-senha{position:relative;display:grid}
.campo-senha>input{width:100%;
  /* O !important aqui não é preguiça, é a única forma de a regra valer nas três
     telas de senha. A folha de estilo da conta tem seletores mais específicos
     para os campos (.conta-corpo form ... .form-row input.input-text), e sem
     este peso o padding vinha de lá: medido no navegador, 12,8px em vez de
     99px, com a senha correndo por baixo do botão em 71px. Perseguir isso
     seletor por seletor daria uma lista que envelhece a cada tela nova; o
     espaço reservado para o botão é do botão em qualquer contexto. */
  padding-right:6.2rem !important}
.senha-ver{position:absolute;top:1px;right:1px;bottom:1px;
  display:flex;align-items:center;padding:0 .8rem;
  border-left:1px solid var(--ink-line);
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.senha-ver:hover{color:var(--ink);border-left-color:var(--ink)}
/* Anel de foco para dentro: com o offset global de 3px ele desenharia por cima
   da borda do campo e pareceria erro de validação. */
.senha-ver:focus-visible{outline-offset:-3px}
/* O Edge põe um olho nativo em todo campo de senha. Dois botões de revelar,
   lado a lado, fazendo a mesma coisa. */
.campo-senha>input::-ms-reveal{display:none}

.senha-forca{margin:-.4rem 0 1.4rem;display:grid;gap:.6rem}
/* display:grid numa classe ganha do [hidden] do navegador, e a régua aparecia
   com o campo vazio — quatro requisitos cobrados de quem não pediu para trocar
   a senha. É a armadilha clássica de esconder por atributo e mostrar por
   classe: quem esconde precisa dizer isso mais alto. */
.senha-forca[hidden]{display:none}
.sf-barra{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.sf-barra span{height:2px;background:var(--ink-line);transition:background .3s var(--ease)}
/* O nível é um atributo, não quatro classes: o JS escreve um número e o CSS
   decide quantos traços acendem. */
.sf-barra[data-nivel="1"] span:nth-child(-n+1),
.sf-barra[data-nivel="2"] span:nth-child(-n+2),
.sf-barra[data-nivel="3"] span:nth-child(-n+3),
.sf-barra[data-nivel="4"] span:nth-child(-n+4){background:var(--ink)}
.sf-nota{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0}
.sf-regras{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;
  font-size:.68rem;letter-spacing:.04em;color:var(--ink-soft)}
.sf-regras li{display:flex;align-items:baseline;gap:.5rem}
/* O traço vira um sinal quando o requisito é cumprido. Um risco e um tique
   ocupam a mesma largura, então nada dança na tela ao completar. */
/* O traço do requisito não cumprido é sinal gráfico, não texto — mas em 0,68rem
   ele é lido como texto. Tinta fraca deixa a lista inteira legível, e o ✓ em
   tinta cheia continua sendo a diferença. */
.sf-regras li::before{content:"–";flex:none;width:.8rem;color:var(--ink-soft)}
.sf-regras li.ok{color:var(--ink)}
.sf-regras li.ok::before{content:"✓";color:var(--ink)}
.sf-conf{display:block;margin-top:.4rem;font-size:.68rem;letter-spacing:.04em;
  color:var(--ink-soft)}
/* O mesmo vermelho dos outros avisos de campo. Eram dois tons diferentes para a
   mesma função — este e o --accent — e ninguém percebe conscientemente, só sente
   que a página não foi feita pela mesma pessoa. */
.sf-conf.erro{color:var(--accent)}

/* A legenda vazia do "nome de exibição" não deixa rastro.
   O WooCommerce imprime <span><em>texto</em></span> em volta dela; com o texto
   fora, sobrava a caixa, e a caixa vazia continuava empurrando o campo de baixo
   como se houvesse algo escrito ali. */
.conta-corpo .woocommerce-EditAccountForm span:has(> em:empty),
.conta-corpo .woocommerce-EditAccountForm em:empty{display:none}

/* formulários da conta: endereço e acesso */
.conta-corpo form:not(.romaria-endereco) .form-row{margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem}
.conta-corpo form:not(.romaria-endereco) .form-row label{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.conta-corpo form:not(.romaria-endereco) .form-row label .required,
.conta-corpo form:not(.romaria-endereco) .form-row abbr[title]{border:0;text-decoration:none;
  color:var(--accent);font-size:.85em;line-height:0;vertical-align:super;margin-left:.1em}
.conta-corpo form:not(.romaria-endereco) .form-row label .optional{display:none}
.conta-corpo form:not(.romaria-endereco) .woocommerce-input-wrapper{display:block;width:100%}
.conta-corpo form:not(.romaria-endereco) input.input-text,
.conta-corpo form:not(.romaria-endereco) select,
.conta-corpo form:not(.romaria-endereco) textarea{width:100%;border:1px solid var(--ink-line);
  background:transparent;border-radius:0;padding:.7rem .8rem;
  font-family:var(--f-data);font-size:.9rem;color:var(--ink)}
.conta-corpo form:not(.romaria-endereco) input.input-text:focus,
.conta-corpo form:not(.romaria-endereco) select:focus{outline:none;border-color:var(--ink)}
/* O select virou o seletor do tema: o nativo fica escondido dentro dele, e
   quem aparece é o botão com a lista do site. */
.conta-corpo .form-row .sel{width:100%}
.conta-corpo .form-row .sel .sel-btn{width:100%;border:1px solid var(--ink-line);
  padding:.7rem .8rem;font-family:var(--f-data);font-size:.9rem;color:var(--ink)}
.conta-corpo .form-row .sel.on .sel-btn{border-color:var(--ink)}
.conta-corpo form fieldset{border:0;padding:0;margin:1.6rem 0 0}
.conta-corpo form legend{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-top:var(--rule);padding-top:.8rem;width:100%;margin-bottom:.9rem}
.conta-corpo form .woocommerce-Button,
.conta-corpo form button[type=submit]{font-family:var(--f-data);
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:.9rem 1.4rem;
  border:1px solid var(--ink);cursor:pointer}
.conta-corpo .woocommerce-address-fields__field-wrapper{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.conta-corpo .woocommerce-address-fields__field-wrapper .form-row{grid-column:1 / -1}
/* Os mesmos pares de meia linha do checkout, apontados pelo ID do campo. */
.conta-corpo .form-row:has(#billing_number),
.conta-corpo .form-row:has(#billing_city),
.conta-corpo .form-row:has(#billing_phone),
.conta-corpo .form-row:has(#shipping_number),
.conta-corpo .form-row:has(#shipping_city),
.conta-corpo .form-row:has(#shipping_phone){grid-column:1}
.conta-corpo .form-row:has(#billing_address_2),
.conta-corpo .form-row:has(#billing_state),
.conta-corpo .form-row:has(#billing_cellphone),
.conta-corpo .form-row:has(#shipping_address_2),
.conta-corpo .form-row:has(#shipping_state),
.conta-corpo .form-row:has(#shipping_cellphone){grid-column:2}
@media (max-width:600px){
  .conta-corpo .woocommerce-address-fields__field-wrapper{grid-template-columns:minmax(0,1fr)}
  .conta-corpo .woocommerce-address-fields__field-wrapper .form-row,
  .conta-corpo .form-row:has(#billing_number),
  .conta-corpo .form-row:has(#billing_city),
  .conta-corpo .form-row:has(#billing_phone),
  .conta-corpo .form-row:has(#billing_address_2),
  .conta-corpo .form-row:has(#billing_state),
  .conta-corpo .form-row:has(#billing_cellphone),
  .conta-corpo .form-row:has(#shipping_number),
  .conta-corpo .form-row:has(#shipping_city),
  .conta-corpo .form-row:has(#shipping_address_2),
  .conta-corpo .form-row:has(#shipping_state){grid-column:1 / -1}
}
/* os dois endereços que o WooCommerce lista lado a lado */
.conta-corpo .woocommerce-Addresses{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1rem}
.conta-corpo .woocommerce-Address{border:1px solid var(--ink-line);padding:var(--pad-bloco,1.1rem)}
/* Título à esquerda, começando na mesma coluna do endereço abaixo. O link de
   editar é curto e não quebra: quando ele podia quebrar, empurrava o título
   para o meio e a caixa parecia centralizada. */
.conta-corpo .woocommerce-Address-title{display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;border-bottom:var(--rule);padding-bottom:.6rem;
  margin-bottom:.8rem}
.conta-corpo .woocommerce-Address-title h2,
.conta-corpo .woocommerce-Address-title h3,
.conta-corpo .woocommerce-Address-title h4{font-family:var(--f-data);
  font-size:var(--t-xs);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;margin:0;min-width:0}
.conta-corpo .woocommerce-Address-title .link-acao{flex:none;white-space:nowrap}
.conta-corpo .woocommerce-Address address{font-style:normal;line-height:1.6;
  color:var(--ink-soft);font-size:.92rem}
.conta-corpo .woocommerce-Address .edit{font-family:var(--f-data);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--ink-line)}

/* Os avisos do WooCommerce moram num bloco só, mais abaixo neste arquivo. */

/* Os endereços de um pedido reusam o card da tela de endereço, e ganham só o
   que é próprio deles: a linha de contato. */
/* Entre a última linha do pedido e os cards de endereço, um respiro só.

   Havia três somados: a sobra do bloco de detalhes, a margem dos cards e o
   recheio da última célula da tabela — quase oitenta pixels de nada, o bastante
   para os cards parecerem de outra seção da página, ou de outro pedido. Espaço
   grande é uma afirmação: diz "isto aqui não tem a ver com aquilo". E tem. */
.conta-corpo .woocommerce-order-details{padding-bottom:0;margin-bottom:0}
.conta-corpo .woocommerce-customer-details{padding-top:0;margin-top:var(--respiro)}
/* A grade dos cards ganha respiro quando vem depois de um texto, na tela de
   endereço. Aqui ela vem depois do respiro da própria seção, e somava os dois. */
.conta-corpo .woocommerce-customer-details .woocommerce-Addresses{margin-top:0}
.conta-corpo .woocommerce-customer-details .woocommerce-Address-title{
  border-bottom:var(--rule)}
.conta-corpo .conta-contato{margin-top:.7rem;font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--ink-soft);word-break:break-word}

/* A espera do pagamento na confirmação: uma frase e uma saída, com ar em volta.
   O botão é o mesmo sólido do resto da loja, porque é a ação principal da tela
   para quem ainda não pagou. */
.co-espera{display:grid;justify-items:start;gap:1rem;margin-top:1.6rem;
  padding-top:1.4rem;border-top:var(--rule);max-width:46rem}
.co-espera p{margin:0;color:var(--ink-soft);line-height:1.6}

/* Um meio de pagamento só: em vez da lista de rádios, uma frase e o selo.
   O ícone fica antes do texto porque é ele que a pessoa reconhece de longe —
   o nome do Mercado Pago já está no cabeçalho do bloco, logo acima. */
.pag-unico{display:flex;align-items:center;gap:.9rem;
  border:1px solid var(--ink-line);background:var(--paper);
  padding:.9rem 1rem;margin:0 0 1.2rem}
.pag-unico .pag-ic{flex:none;display:flex;align-items:center}
.pag-unico .pag-ic img{display:block;max-height:26px;width:auto}
.pag-unico-t{margin:0;font-size:.92rem;line-height:1.45;color:var(--ink-soft)}

/* ═══════════════ O VÉU DO WOOCOMMERCE ═══════════════
   Ao enviar o pedido, o WooCommerce cobre a coluna de pagamento com um retângulo
   branco semitransparente — o blockUI, herança de 2011. Ele não informa nada: é
   um vidro embaçado sobre o único lugar da tela onde a pessoa está olhando, e a
   sensação é de tela travada, não de pedido em andamento.

   Ele sai, e no lugar dele o próprio botão avisa que está trabalhando: muda de
   texto e para de aceitar cliques. O aviso mora onde a mão está. */
.blockUI.blockOverlay,.blockUI.blockMsg{display:none !important}
/* O botão ocupado continua legível, e não aceita segundo clique. */
.btn[aria-busy="true"],button[aria-busy="true"]{opacity:.75;cursor:progress}

/* O painel do gateway sai da vista sem sair da página. Ver o comentário em
   woocommerce/checkout/payment.php, onde essa decisão está explicada.

   O !important não é preguiça: o JS do WooCommerce abre o painel do meio de
   pagamento escolhido com slideDown, e slideDown escreve style="display:block"
   direto na tag. Estilo inline ganha de qualquer classe — só !important alcança
   ele. Sem isso, a caixa voltava sozinha um segundo depois de a página carregar,
   e voltava só às vezes, que é o pior tipo de defeito para se caçar. */
.pag-caixa-plugin{display:none !important}
/* O aviso de "modo teste" do Mercado Pago também não aparece em lugar nenhum:
   ele existe para o desenvolvedor e fala com o cliente. */
.mp-test-mode-card{display:none !important}
/* A outra ponta da mesma decisão: gateway que pede dados na própria página tem
   painel visível, e ele nasce vestido em vez de nascer nu. Hoje não há nenhum;
   a regra existe para o dia em que houver. */
.pag-caixa{border:1px solid var(--ink-line);background:var(--paper);
  padding:1rem;margin:0 0 1.2rem}
/* A lista de rádios do WooCommerce vinha com marcador de lista e sangria de
   texto corrido nesta tela. */
.wc_payment_methods{list-style:none;margin:0;padding:0}

/* ═══════════════ PAGAR UM PEDIDO QUE FICOU ESPERANDO ═══════════════
   Duas colunas: o que a pessoa levou e onde ela paga. A da direita é mais
   estreita porque tem uma decisão só, e é a que precisa terminar na altura do
   olho — o botão não fica no fim de uma página comprida. */
/* Sem padding lateral: a página que envolve esta tela (.rm-pagina) já tem o
   dela, e somar os dois empurraria as duas colunas para o meio. */
.pagar-pedido{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--respiro);align-items:start}
@media (max-width:860px){
  .pagar-pedido{grid-template-columns:1fr}
}
.pagar-pedido .co-itens{margin-bottom:1.2rem}
.pagar-pedido .cart-resumo{margin:0}
.pagar-pedido form.bloco{display:block}
.pagar-pedido .place-order{margin:1.2rem 0 0}
.pagar-pedido .co-nota{margin-top:.9rem}

/* ═══════════════ O PIX DO MERCADO PAGO, NA NOSSA CASA ═══════════════
   Com o Pix transparente desligado, este bloco não aparece mais no checkout da
   Romaria — o QR passou a nascer na tela do Mercado Pago, que é o único lugar
   onde ele pode nascer de verdade. O estilo continua aqui, e de propósito: o
   histórico dos pedidos antigos ainda mostra o QR daquela época, e se um dia o
   Pix próprio voltar, ele volta vestido.
   O plugin entrega o bloco inteiro com desenho próprio: cartão branco, botão
   azul, tipografia de outro site, numerinhos em círculo e um QR gigante
   colado no texto ao lado. Dentro da nossa confirmação, parecia um anúncio
   embutido na página — e é justamente a hora em que a pessoa precisa confiar
   no que está vendo para pagar.

   Não dá para reescrever o HTML dele sem virar refém da próxima atualização.
   Então o CSS reveste o que existe: mesma moldura dos nossos blocos, duas
   colunas com respiro de verdade, QR num tamanho que cabe na tela e o botão
   com a cara dos nossos botões. */
.mp-details-pix,.mp-pix-image-container{border:1px solid var(--ink-line);
  background:var(--paper-2);padding:var(--pad-bloco,1.4rem);margin-top:1.6rem;
  text-transform:none}
.mp-details-pix p,.mp-details-pix li,.mp-pix-image-container p{text-transform:none}
.mp-row-checkout-pix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:2.4rem;align-items:start}
/* As colunas do plugin vêm com largura fixa em porcentagem (flex:0 0 33%), que
   dentro da nossa grade virava 33% de uma coluna estreita: a lista de passos
   quebrava a cada duas palavras. E tudo à direita vinha centralizado, cada
   linha começando num lugar diferente. Uma coluna de texto se lê por uma
   margem só, e é por isso que aqui tudo alinha à esquerda. */
.mp-row-checkout-pix>.mp-col-md-4,
.mp-row-checkout-pix>.mp-col-md-8{flex:none;width:auto;max-width:none;
  padding:0;min-width:0}
.mp-details-pix,.mp-details-pix p,.mp-details-pix li,.mp-details-pix div,
.mp-details-pix span,.mp-details-pix small{text-align:left}
@media (max-width:820px){
  .mp-row-checkout-pix{grid-template-columns:1fr;gap:1.6rem}
}
.mp-details-pix-img{width:60px;height:auto;display:block;margin:0 0 1rem}
.mp-details-pix-title{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 .9rem}
/* Os passos: número monoespaçado à esquerda, texto alinhado numa coluna só.
   No original o círculo azul empurrava cada linha para uma sangria diferente. */
.mp-steps-congrats{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mp-details-list{display:grid;grid-template-columns:1.6rem minmax(0,1fr);
  align-items:baseline;gap:.2rem;margin:0}
.mp-details-pix-number-p{font-family:var(--f-data);font-size:var(--t-xs);
  color:var(--ink-soft);margin:0;background:none;border:0;width:auto;height:auto;
  line-height:1.6;border-radius:0}
.mp-details-list-description{margin:0;font-size:.92rem;line-height:1.6;
  color:var(--ink-soft)}
/* A coluna do QR: valor, código e botão numa pilha, cada coisa com o seu ar. */
.mp-pix-right,.mp-col-md-8{text-align:left}
.mp-details-pix-amount{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 1rem}
.mp-details-pix-qr,.mp-details-pix-qr-value{font-family:var(--f-data);
  font-size:.95rem;letter-spacing:.02em;color:var(--ink)}
.mp-details-pix-qr-title{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin:1.2rem 0 .8rem}
.mp-details-pix-qr-img,.mp-pix-image{display:block;width:180px;height:180px;
  max-width:100%;margin:0 0 .8rem;background:#fff;padding:.7rem;
  border:1px solid var(--ink-line)}
.mp-details-pix-qr-subtitle,.mp-details-pix-qr-description,
.mp-pix-image-date-expiration{font-family:var(--f-data);font-size:.7rem;
  letter-spacing:.06em;text-transform:none;color:var(--ink-soft);
  margin:0 0 1.1rem;line-height:1.6}
/* O campo de copiar nascia com uma sangria própria, meio centímetro à direita
   do resto da coluna. Numa pilha de linhas alinhadas, o único elemento
   deslocado é o que parece fora de lugar. */
.mp-details-pix-container,.mp-row-checkout-pix-container{margin:0;padding:0}
/* O código copia e cola: uma linha só, monoespaçada, e o botão colado nela.
   Antes o campo e o botão ficavam grudados com alturas diferentes. */
.mp-row-checkout-pix-container{display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:stretch;margin-top:.4rem}
.mp-qr-input{flex:1 1 12rem;min-width:0;font-family:var(--f-data);
  font-size:.75rem;color:var(--ink-soft);background:var(--paper);
  border:1px solid var(--ink-line);border-radius:0;padding:.75rem .9rem;
  text-overflow:ellipsis}
.mp-details-pix-button{flex:none;background:var(--ink);color:var(--paper);
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;border:0;border-radius:0;padding:.75rem 1.3rem;
  cursor:pointer;white-space:nowrap;transition:opacity .3s var(--ease)}
.mp-details-pix-button:hover{opacity:.85}
/* O código do QR no histórico do pedido quebra em qualquer largura: ele é uma
   linha de 150 caracteres sem espaço, e estourava a caixa no celular. */
.mp-pix-image-qr-code p,.mp-details-pix-qr-code p{font-family:var(--f-data);
  font-size:.7rem;line-height:1.7;color:var(--ink-soft);word-break:break-all;
  margin:0}

/* CEP na página do disco */
.frete-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.frete-linha input{border:1px solid var(--ink-line);background:transparent;
  padding:.7rem .8rem;font-family:var(--f-data);font-size:.85rem;
  letter-spacing:.06em;color:var(--ink);width:100%}
.frete-linha input:focus{outline:none;border-color:var(--ink)}
.frete-linha button{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);
  padding:0 1rem;transition:background .3s,color .3s}
.frete-linha button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.frete-linha button:disabled{opacity:.4}
.frete-hint{margin-top:.5rem;font-size:.62rem;letter-spacing:.08em;color:var(--ink-soft)}
.frete-hint:empty{display:none}

/* Faixas: número à esquerda pelo próprio contador da lista, tempo à direita
   em fonte tabular, para os minutos alinharem em coluna. */
.faixas{list-style:none;counter-reset:fx;margin:0;padding:0;display:grid;gap:.1rem}
.faixas li{counter-increment:fx;display:flex;align-items:baseline;gap:.8rem;
  padding:.5rem 0;border-bottom:1px solid var(--ink-line);font-size:.9rem}
.faixas li:last-child{border-bottom:0}
.faixas li::before{content:counter(fx,decimal-leading-zero);
  font-family:var(--f-data);font-size:.62rem;color:var(--ink-soft);
  flex:none;min-width:1.4rem}
.faixas .fx-n{flex:1;min-width:0}
.faixas .fx-t{font-family:var(--f-data);font-size:.72rem;color:var(--ink-soft);
  flex:none}
.romaria-endereco .woocommerce-shipping-fields{grid-column:1 / -1;margin-top:0}
@media (max-width:520px){
  .romaria-endereco .woocommerce-billing-fields__field-wrapper,
  .romaria-endereco .woocommerce-shipping-fields__field-wrapper{
    grid-template-columns:minmax(0,1fr)}
  .romaria-endereco .form-row-first,.romaria-endereco .form-row-last,
  .romaria-endereco .form-row:has(#billing_number),
  .romaria-endereco .form-row:has(#billing_city),
  .romaria-endereco .form-row:has(#billing_phone),
  .romaria-endereco .form-row:has(#billing_address_2),
  .romaria-endereco .form-row:has(#billing_state),
  .romaria-endereco .form-row:has(#billing_cellphone),
  .romaria-endereco .form-row:has(#shipping_number),
  .romaria-endereco .form-row:has(#shipping_city),
  .romaria-endereco .form-row:has(#shipping_address_2),
  .romaria-endereco .form-row:has(#shipping_state){grid-column:1 / -1}
}
/* As ações ficam presas ao pé do modal, com ar acima. */
#modalCorpo .co-edita-acoes{margin-top:1.2rem;display:flex;gap:.6rem}
#modalCorpo .co-edita-acoes .btn{flex:1}
/* A nota explica o que acontece DEPOIS de clicar, então ela precisa de ar
   entre si e o botão: colada, lê como legenda do botão e ninguém termina. */
#payment #notaPagamento{margin-top:1rem}
#payment .place-order{margin-top:1.2rem}
/* O título da coluna pode ser h2 ou h3: o desenho é o mesmo, a etiqueta segue a
   hierarquia do documento. */
.co-col>h2,.co-col>h3{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--ink);
  padding-top:.7rem;margin-bottom:.9rem}
.co-dado{font-size:.92rem;line-height:1.65}
.co-dado b{font-weight:600}
.co-dado i{color:var(--ink-soft)}

/* Quadradinho no meio da PRIMEIRA linha da frase.

   Havia um empurrãozinho fixo de 2,4px no input para compensar o alinhamento
   pelo topo. Compensação em pixel fixo só acerta num tamanho de texto: medido na
   página, no rótulo de 11px o quadrado ficava 2 pixels abaixo do meio da frase,
   enquanto no de 13,6px ficava certo.

   A conta resolve os dois: metade da diferença entre a altura da linha e a
   altura do quadrado. Como está em `em`, ela acompanha o tamanho do texto de
   cada rótulo. E continua alinhando pela primeira linha, o que importa quando a
   frase quebra em duas — centralizar aí levaria o quadradinho para o meio do
   parágrafo.

   O `font-size:inherit` no input não é enfeite: `em` dentro dele mede a fonte
   DELE, e input não herda fonte por padrão. Sem isso a conta usava os 15px que o
   navegador dá de brinde ao controle, e o quadrado descia 3 pixels — foi o que eu
   media na tela achando que era a conta que estava errada. */
.co-check{--cx:16px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.6rem;align-items:start;font-size:.85rem;line-height:1.5;
  color:var(--ink-soft);cursor:pointer}
.co-check input{width:var(--cx);height:var(--cx);accent-color:var(--ink);
  flex:none;font-size:inherit;line-height:inherit;
  margin:calc((1.5em - var(--cx)) / 2) 0 0}
.co-check a{color:var(--ink);border-bottom:1px solid var(--ink-line)}
.co-check.invalido,.co-check:has(.invalido){color:var(--accent)}

.co-itens{display:grid;gap:.9rem}
.co-pre{display:inline-block;margin-top:.2rem;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.co-totais{display:grid;gap:.5rem}

.co-cupom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.co-cupom input{border:1px solid var(--ink-line);background:transparent;
  padding:.6rem .7rem;font-family:var(--f-data);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.co-cupom input:focus{outline:none;border-color:var(--ink)}
.co-cupom button{border:1px solid var(--ink);padding:0 1rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;transition:background .3s,color .3s}
.co-cupom button:hover{background:var(--ink);color:var(--paper)}
.co-cupom-ok{display:flex;justify-content:space-between;align-items:center;
  gap:.8rem;flex-wrap:wrap;color:var(--accent)}

.co-edita-acoes{display:flex;gap:.5rem;flex-wrap:wrap}

.co-selo{display:inline-block;background:var(--ink);color:var(--paper);
  padding:.35rem .6rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.co-pronto-hd{border-bottom:var(--rule);padding-bottom:var(--sec-gap);
  margin-bottom:var(--sec-gap)}
.co-pronto-hd h2{font-size:var(--t-xl);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;
  letter-spacing:-.038em;line-height:.95;margin:.9rem 0}
.co-pronto-hd h2 em{font-family:var(--f-ed);font-style:italic;font-weight:400;
  font-stretch:100%;font-variation-settings:normal;text-transform:none;
  letter-spacing:-.015em}
.co-pronto-hd p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:58ch}
.co-pronto-hd a{color:var(--ink);border-bottom:1px solid var(--ink-line)}
.co-pronto-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}

.co-pronto-cols{align-items:start}
@media (min-width:820px){.co-pronto-cols{grid-template-columns:1.2fr 1fr;gap:1.4rem}}
.co-volta{border-top:var(--rule);margin-top:var(--sec-gap);padding-top:var(--sec-gap);
  text-align:center}
.co-volta .ed{font-family:var(--f-ed);font-size:clamp(1.4rem,3vw,2rem)}
.co-volta .mono{color:var(--ink-soft);margin:.4rem 0 1.2rem;font-size:.68rem;
  letter-spacing:.06em}
.co-volta-acoes{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:var(--sec-gap)}

@media (pointer:coarse){
  /* No dedo o quadrado cresce, e a conta da margem cresce com ele porque o
     tamanho virou variável. */
  .co-check{--cx:20px}
  }

.co-cep-dif{display:grid;gap:.7rem}
.co-cep-dif p{font-family:var(--f-data);font-size:.7rem;letter-spacing:.04em;line-height:1.65}
.co-cep-acoes{display:flex;gap:1.2rem;flex-wrap:wrap}
.co-cep-acoes .link-acao{color:var(--accent);border-bottom-color:currentColor}

#modal{position:fixed;z-index:955;inset:auto 0 0 0;top:0;display:grid;
  place-items:center;padding:var(--pad);opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;pointer-events:none}
#modal.on{opacity:1;visibility:visible;pointer-events:auto}
.modal-in{background:var(--paper);border:1px solid var(--ink);width:min(520px,100%);
  max-height:min(86vh,760px);display:flex;flex-direction:column;
  transform:translateY(12px);transition:transform .35s var(--ease)}
#modal.on .modal-in{transform:translateY(0)}
.modal-hd{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--ink)}
.modal-hd h3{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase}
.modal-hd button{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .3s}
.modal-hd button:hover{color:var(--ink)}
.modal-corpo{padding:clamp(1rem,3vw,1.6rem);overflow-y:auto}
@media (max-width:520px){
  #modal{padding:0;place-items:end stretch}
  .modal-in{width:100%;max-height:92vh;border-left:none;border-right:none;
    border-bottom:none}
}
@media (prefers-reduced-motion:reduce){
  #modal,.modal-in{transition:none}
}

.alterar{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-left:.4rem;transition:color .3s}
.alterar:hover{color:var(--ink)}

.cart-frete-ops{transform:translateZ(0);backface-visibility:hidden}
.cart-frete-ops.on{border:1px solid var(--ink-line);margin-top:.75rem}

.sem-cobertura,.sc-vitrine{display:grid;gap:.7rem}
.sem-cobertura p,.sc-vitrine p{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.sem-cobertura p b,.sc-vitrine p b{color:var(--ink)}
.sc-vitrine{border:1px solid var(--accent);padding:.9rem}
.sc-vitrine a{color:var(--ink);border-bottom:1px solid var(--ink-line)}
.sc-acoes{display:grid;gap:.5rem}

:root{--linha-resumo:2.1rem}
.cart-resumo{display:grid;gap:0}
.cart-resumo>.cart-row{margin-top:.55rem}
.cart-resumo>.cart-row:first-child{margin-top:0}
.cart-resumo .cart-row{line-height:1.3;align-items:center;
  height:var(--linha-resumo);min-height:var(--linha-resumo)}
.cart-resumo .cart-row.tot{line-height:1.3}
.cart-resumo .cc-campo input{padding:.15rem .2rem}
.cart-resumo .cc-campo button,.cart-resumo .alterar{margin:0}
.cart-resumo .cc-campo,.cart-resumo .cc-campo *{max-height:calc(var(--linha-resumo) - .3rem)}
/* A caixa de fretes respira dos dois lados.
   Esta regra zerava a margem e, com isso, matava também os .75rem que a caixa
   tinha em cima — o resultado era zero pixel entre o "[alterar]" e a borda dela,
   enquanto embaixo sobravam nove, que é a margem da linha seguinte. O
   desencontro só aparecia quando o "[alterar]" quebrava para a própria linha e
   encostava na caixa. Agora o valor é o mesmo dos dois lados, e é o mesmo que
   separa as linhas do resumo. */
.cart-resumo .cart-frete-ops{margin:.55rem 0 0}

.cart-cep-row{align-items:baseline}
.cc-campo{display:flex;align-items:baseline;gap:.5rem;justify-content:flex-end;
  flex:1;min-width:0}

.cc-campo input{flex:1;min-width:0;max-width:12em;text-align:right;
  background:none;border:0;
  border-bottom:1px solid var(--ink-line);padding:.15rem 0;color:var(--ink);
  font-family:var(--f-data);font-size:var(--t-sm);letter-spacing:.04em;
  text-overflow:ellipsis}
.cc-campo input::placeholder{color:var(--ink-soft);text-transform:lowercase}
.cc-campo input:focus{outline:none;border-bottom-color:var(--ink)}
.cc-campo button{flex:none;border:1px solid var(--ink);padding:.28rem .6rem;
  font-family:var(--f-data);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;transition:background .3s,color .3s}
.cc-campo button:hover{background:var(--ink);color:var(--paper)}
.cc-campo button[hidden]{display:none}

.cf-topo{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.6rem .8rem;border-bottom:var(--rule);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cf-topo .alterar{margin:0;white-space:nowrap}

.cc-cancela{justify-self:end;margin-left:auto;padding:.5rem .1rem;
  font-size:.64rem;letter-spacing:.08em;line-height:1.4;color:var(--ink-soft);
  text-align:right;transition:color .3s}
.cart-row>.cc-cancela{margin-top:-.2rem}
.cc-cancela span{border-bottom:1px solid var(--ink-line);
  transition:border-color .3s;padding-bottom:1px}
.cc-cancela:hover{color:var(--ink)}
.cc-cancela:hover span{border-bottom-color:var(--ink)}
@media (pointer:coarse){.cc-cancela{padding:.7rem .1rem;min-height:40px}}

.co-col,.co-col .bloco,.co-col form{min-width:0}
.co-col input,.co-col select,.co-col textarea,.co-col .sel{max-width:100%}

#navFechar{position:relative;width:34px;height:34px;flex:none}
#navFechar span{position:absolute;left:5px;right:5px;top:50%;height:1.5px;
  background:var(--ink);transform-origin:center}
#navFechar span:nth-child(1){transform:rotate(45deg)}
#navFechar span:nth-child(2){transform:rotate(-45deg)}

.nm-pe{display:grid;grid-template-columns:auto auto;justify-content:space-between;
  align-items:baseline;column-gap:1.5rem;row-gap:.2rem;margin-top:1.6rem}

.nm-pe>*{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5rem;padding:0}
#contaBtnMob{grid-column:1;grid-row:1 / span 2;align-self:center;text-align:center}
.nm-onde{grid-column:2;text-align:right;color:var(--ink-soft)}
.nm-onde:nth-of-type(1){grid-row:1}
.nm-onde:nth-of-type(2){grid-row:2}

.nm-topo{display:flex;justify-content:space-between;align-items:center;
  margin:0 calc(-1 * var(--pad));padding:var(--hdr-pad) var(--gutter)}

@media (max-width:699px){
  .head-right #searchBtn,.head-right #cartBtn,.head-right #contaBtn{display:none}
  header{grid-template-columns:1fr auto}

  #burger{width:auto;height:34px;display:flex;align-items:center}
  #burger i{display:none}
  #burger span{display:inline;font-family:var(--f-data);font-size:var(--t-xs);
    letter-spacing:.14em;text-transform:uppercase;line-height:1}

}
@media (min-width:700px){
  .nm-pe{display:none}
}

@media (min-width:1180px){
  .pdp{grid-template-columns:minmax(0,clamp(360px,34vw,520px)) minmax(0,1fr)}
  .pdp-info{max-width:46rem}

}
@media (min-width:1500px){
  .hist-block{grid-template-columns:minmax(0,17rem) minmax(0,46rem)}
  .page-cols{gap:clamp(3rem,4vw,5rem)}
}

@media (min-width:2000px){
  :root{--shell:1880px}
  .pdp{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
  .rm-pagina.larga{max-width:1720px}
}
@media (min-width:2400px){
  :root{--shell:2080px}

  .grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .grid.wide{grid-template-columns:repeat(6,minmax(0,1fr))}
}

.pdp-seal .ps-selo{display:block}
.pdp-seal .ps-ref{display:block;color:var(--ink-soft)}
@media (min-width:700px){

  .pdp-seal .ps-selo,.pdp-seal .ps-ref{display:inline}
  .pdp-seal .ps-ref::before{content:' · '}
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button{-webkit-appearance:none;
  appearance:none;display:none}
input[type=search]{appearance:none;-webkit-appearance:none}

.nm-busca[hidden]{display:none}
.nm-busca{display:grid;gap:1rem;margin-top:1.6rem;min-height:0}
.nm-busca-campo{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:.6rem}
.nm-busca-campo input{border:0;background:transparent;padding:0;
  font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;
  font-size:clamp(1.2rem,5vw,1.7rem);letter-spacing:-.02em;color:var(--ink);
  min-width:0}
.nm-busca-campo input::placeholder{color:var(--ink-line);text-transform:none;
  font-family:var(--f-ed);font-weight:400;font-stretch:100%;
  font-variation-settings:normal;letter-spacing:0;font-size:.72em}
.nm-busca-campo input:focus{outline:none}
.nm-busca-campo button{font-family:var(--f-data);font-size:.9rem;
  color:var(--ink-soft);padding:.3rem .2rem;transition:color .3s}
.nm-busca-campo button:hover{color:var(--ink)}

.nm-busca-res{overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}

#navMob.buscando nav,#navMob.buscando .nm-pe{display:none}
#navMob.buscando{overflow:hidden}
#navMob.buscando .nm-busca{margin-bottom:auto}
@media (pointer:coarse){
  .nm-busca-campo button{min-width:40px;min-height:40px;display:grid;place-items:center}
}

@media (max-width:699px){
  .sr{grid-template-columns:48px minmax(0,1fr);gap:.7rem;align-items:center}
  .sr img{width:48px;height:48px}
  .sr-p{grid-column:2;justify-self:start;text-align:left;font-size:.78rem;
    margin-top:.15rem}
  .sr-t{min-width:0}
  .sr-t b,.sr-t span,.sr-t i{display:block;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:699px){
  .grid.de-linha>*:nth-child(n+7){display:none}
}
@media (min-width:700px) and (max-width:833px){
  .grid.de-linha>*:nth-child(n+4){display:none}
}
@media (min-width:834px) and (max-width:1179px){
  .grid.de-linha>*:nth-child(n+5){display:none}
}
@media (min-width:1180px) and (max-width:1679px){
  .grid.de-linha>*:nth-child(n+6){display:none}
}
@media (min-width:1680px) and (max-width:2399px){
  .grid.de-linha>*:nth-child(n+7){display:none}
}

img.sem-capa{object-fit:contain;background:var(--paper-2)}
.card-img.falhou{background:var(--paper-2)}
.card-img.falhou img{opacity:1}
.card-img.falhou::after{display:none}

#gridAll{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){
  #gridAll{grid-template-columns:repeat(4,minmax(0,1fr))}
}

#v-produto,#v-selo,#v-contato,#v-overseas,#v-entrar,#v-checkout,#v-conta,
#v-trocas{padding-top:0;padding-bottom:0}

.politica h2{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:1.6rem 0 .6rem;
  padding-top:.9rem;border-top:var(--rule)}
.politica>h2:first-child,.politica>h4:first-child{
  margin-top:0;padding-top:0;border-top:0}
.politica p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);margin-bottom:.7rem}
.politica p b{color:var(--ink);font-weight:600}
.politica.pagina{max-width:64ch}
.politica .co-nota{margin-top:1.6rem;padding-top:.9rem;border-top:var(--rule)}
.pol-link{margin-top:1rem;font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft)}
.pol-link a{color:var(--ink);border-bottom:1px solid var(--ink-line)}

#cookies{position:fixed;left:0;right:0;bottom:0;z-index:945;
  background:var(--paper);border-top:1px solid var(--ink);
  padding:1rem var(--gutter) 1.1rem;
  transform:translateY(101%);transition:transform .45s var(--ease)}
#cookies.on{transform:none}
.ck-in{max-width:var(--shell);margin:0 auto;display:grid;gap:1rem;
  align-items:center}
@media (min-width:900px){
  .ck-in{grid-template-columns:minmax(0,1fr) auto;gap:2.5rem}
}
.ck-txt p{font-size:.88rem;line-height:1.6;color:var(--ink-soft);max-width:72ch}
.ck-txt b{color:var(--ink);font-weight:600}
.ck-leia{margin-top:.3rem;font-size:.8rem}
.ck-leia a{color:var(--ink);border-bottom:1px solid var(--ink-line)}
.ck-acoes{display:grid;gap:.5rem;justify-items:stretch}
@media (min-width:520px){
  .ck-acoes{grid-template-columns:auto auto;justify-items:end;align-items:center}
  .ck-acoes .link-acao{grid-column:1 / -1;justify-self:end}
}
.ck-acoes .btn{white-space:nowrap}
@media (prefers-reduced-motion:reduce){#cookies{transition:none}}

.ck-intro{font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin-bottom:1.2rem}
.ck-cat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;
  align-items:start;padding:.9rem 0;border-top:var(--rule);cursor:pointer}
.ck-cat input{width:16px;height:16px;margin-top:.25rem;accent-color:var(--ink)}
.ck-cat.fixa{cursor:default}
.ck-cat b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);
  margin-bottom:.2rem}
.ck-cat b i{font-style:normal;font-family:var(--f-data);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  margin-left:.4rem}
.ck-cat small{display:block;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.ck-acoes-modal{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}

.ck-prefs .co-nota{margin-top:1.4rem;padding-top:.9rem;border-top:var(--rule)}
@media (pointer:coarse){.ck-cat input{width:20px;height:20px}}

#avisoX{position:absolute;top:50%;right:calc(var(--gutter) - .2rem);
  transform:translateY(-50%);width:26px;height:26px;opacity:.55;
  transition:opacity .3s}
#avisoX:hover,#avisoX:focus-visible{opacity:1}
#avisoX span{position:absolute;left:8px;right:8px;top:50%;height:1px;
  background:var(--paper-raw)}
#avisoX span:nth-child(1){transform:rotate(45deg)}
#avisoX span:nth-child(2){transform:rotate(-45deg)}
@media (pointer:coarse){#avisoX{width:34px;height:34px}}

.pbar{display:grid;gap:.45rem;padding:.8rem;border:1px solid var(--ink-line)}
.pbar-hd{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.pbar-hd .mono:first-child{color:var(--ink)}
.pbar-falta{color:var(--ink-soft)}
.pbar-max{color:var(--accent)}
.pbar-trilho{position:relative;height:3px;background:var(--ink-line)}
.pbar-trilho i{display:block;height:100%;background:var(--ink);transition:width .5s var(--ease)}
.pbar-trilho b{position:absolute;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);
  background:var(--paper);border:1px solid var(--ink-line)}
.pbar-trilho b.on{background:var(--ink);border-color:var(--ink)}

/* Os números da escala eram desenhados com a cor dos filetes: 1,5:1 de
   contraste, o mesmo tom usado para linhas de 1 pixel. Como linha isso funciona;
   como texto, não se lê — e é justamente a legenda que explica a barra, os
   degraus que a pessoa está tentando alcançar. Tinta fraca dá 5:1 e continua
   discreta ao lado do degrau já conquistado, que é o único em tinta cheia. */
.pbar-escala{position:relative;height:.85rem;font-size:.58rem;
  letter-spacing:.08em;color:var(--ink-soft)}
.pbar-escala span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pbar-escala span:last-child{transform:translateX(-100%)}
.pbar-escala span.on{color:var(--ink)}
.pbar-trilho b:last-of-type{transform:translate(-100%,-50%)}

.mp-hd{display:grid;gap:.15rem;margin-bottom:.7rem}
.mp-hd .mono{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.mp-hd strong{font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  text-transform:uppercase;font-size:1.15rem;letter-spacing:-.01em}
.mp-total{margin:.9rem 0 .3rem}
.mp-parc{font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:1rem}
.mp-parc b{color:var(--ink)}
.mp-saida{display:grid;gap:1rem}
.mp-saida p{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.tab-degraus{width:100%;border-collapse:collapse;margin:1rem 0}
.tab-degraus th{font-family:var(--f-data);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-align:left;
  padding:.5rem 0;border-bottom:var(--rule)}
.tab-degraus td{padding:.55rem 0;border-bottom:1px solid var(--ink-line);font-size:.92rem}
#aviso p button{font:inherit;color:inherit;text-decoration:underline;
  text-underline-offset:3px;opacity:.9}
#aviso p button:hover{opacity:1}

.co-rel{border-top:var(--rule);margin-top:var(--sec-gap);padding-top:var(--sec-gap)}
.co-rel h2{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.co-rel-grade{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.co-rel-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.co-rel-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:.8rem;
  align-items:center;border:1px solid var(--ink-line);padding:.7rem}
.co-rel-capa img{width:64px;height:64px;object-fit:cover;background:var(--paper-2)}
.co-rel-txt .a{font-size:.86rem}
.co-rel-txt .t{font-family:var(--f-ed);font-style:italic;color:var(--ink-soft);font-size:.88rem}
.co-rel-txt .pr{font-family:var(--f-data);font-size:.8rem;margin-top:.15rem}

.ic{width:20px;height:20px;flex:none;display:block}
.head-right button,.head-right>a{position:relative}
.head-right .ic{display:none}

/* O número no meio do círculo, e "no meio" aqui foi medido, não estimado.
   align-items:center centra a CAIXA DE LINHA do texto, e caixa de linha não é o
   algarismo: ela vai do topo do ascendente ao fundo do descendente da fonte, e
   um "2" não tem descendente nenhum. Em Space Mono a conta dá 9,9 acima da base
   e 3,2 abaixo, enquanto a tinta do algarismo ocupa 6,3 e nada abaixo — o
   resultado é um dígito que parece centrado no cálculo e nasce alto na tela.
   Medido no navegador: o centro da tinta caía 1,16px acima do centro do círculo,
   que num celular de tela densa são três pixels e meio de desalinho à vista.

   O padding-bottom de 1px que havia aqui era uma tentativa de empurrar para
   baixo que fazia o contrário: padding embaixo, com o conteúdo alinhado ao topo,
   sobe o texto.

   A correção tem duas partes, e as duas foram medidas até o desvio dar zero:
   line-height igual à altura do círculo (a caixa de linha passa a ser o próprio
   círculo) e meio pixel de padding no topo, que é o que resta da assimetria da
   fonte. Desvio final: 0,00px para "2" e para "12". */
#cartBtn .ic-n,#nmSacolaTopo .ic-n{
  display:none;
  align-items:center;justify-content:center;
  position:absolute;top:-5px;right:-8px;
  min-width:16px;height:16px;padding:.5px 4px 0;
  background:var(--ink);color:var(--paper);border-radius:100px;
  font-family:var(--f-data);font-size:.55rem;line-height:16px;letter-spacing:0;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
@media (max-width:699px){
  .head-right{gap:1rem}
  /* 26 pixels é o tamanho do ícone, e era também o tamanho do alvo. No dedo,
     44 é o mínimo para não errar — então o alvo cresce por dentro e o desenho
     fica onde está: a margem negativa devolve o espaço que o padding tomou. */
  .head-right #searchBtn,.head-right #cartBtn{display:inline-flex;align-items:center;
    padding:9px;margin:-9px;min-width:44px;min-height:44px;justify-content:center}
  /* O contador acompanha o ícone, não a moldura do botão.

     Ele está posicionado em relação ao botão, e o botão cresceu 9 pixels para
     cada lado para virar alvo de dedo. Com o "top:-5px" de antes, a bolinha
     passou a nascer 17 pixels acima do carrinho — encostada na borda de cima do
     cabeçalho, onde a barra do navegador do celular corta. Medido: o ícone
     começa 12 pixels dentro do botão, e a bolinha fica logo acima dele — perto o
     bastante para pertencer ao carrinho, longe o bastante para não se confundir
     com ele. Sobram 8 pixels até a borda de cima do cabeçalho. */
  #cartBtn .ic-n{top:3px;right:5px}
  .head-right #contaBtn{display:none}
  .head-right .ic{display:block}
  .head-right .rot{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .head-right button::after,.head-right>a::after{display:none}
  #cartBtn .ic-n{display:flex}
  #cartBtn .ic-n[hidden]{display:none}
  header{grid-template-columns:1fr auto}
}

.nm-topo-acoes{display:flex;align-items:center;gap:1rem}
.nm-topo-acoes button{position:relative;display:grid;place-items:center;
  width:26px;height:26px;flex:none}
#navFechar{width:26px;height:26px}
#nmSacolaTopo .ic-n{display:flex}
#nmSacolaTopo .ic-n[hidden]{display:none}
@media (pointer:coarse){
  .nm-topo-acoes button{width:34px;height:34px}
  #navFechar{width:34px;height:34px}
}

.nm-entrar{background:var(--ink-raw);color:var(--paper-raw);
  padding:.75rem 1.1rem;justify-self:start;text-align:center;
  transition:opacity .3s}
.nm-entrar:hover{opacity:.85;padding-left:1.1rem}

.pi-dir{display:grid;gap:.2rem;justify-items:end;text-align:right}
.pi-dir .q{white-space:nowrap}
.pi-dir .link-acao{font-size:.58rem}

.co-rel{border-top:var(--rule);margin-top:1rem;padding-top:1rem}
.co-rel-grade{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.co-rel-grade{grid-template-columns:minmax(0,1fr)}}

.frete-block{border:0;padding:0;margin:.2rem 0 0;min-width:0;
  border-top:var(--rule);padding-top:.9rem}
.frete-res,.frete-res>div{min-width:0}
.frete-block h4{display:none}
.frete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;
  align-items:stretch}
.frete input{border:1px solid var(--ink-line);background:transparent;
  padding:.55rem .7rem;font-family:var(--f-data);font-size:.82rem;
  letter-spacing:.06em;color:var(--ink);min-width:0}
.frete input:focus{outline:none;border-color:var(--ink)}
.frete button{border:1px solid var(--ink);padding:0 .9rem;white-space:nowrap;
  font-family:var(--f-data);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;transition:background .3s,color .3s}
.frete button:hover{background:var(--ink);color:var(--paper)}
.frete-res{margin-top:.6rem;display:grid;gap:.3rem}
.frete-res>div{display:flex;justify-content:space-between;gap:.8rem;
  font-family:var(--f-data);font-size:.66rem;letter-spacing:.04em;
  color:var(--ink-soft)}
.frete-res .hint{font-size:.62rem;letter-spacing:.06em;color:var(--ink-soft)}

.pdp-actions{margin:var(--respiro) 0 0}

.pdp-desc{margin:var(--respiro) 0 0}
.pdp-desc h4,.spotify h2{margin-bottom:.5rem}
.spotify{margin:var(--respiro) 0 0}
.acc{margin-top:var(--respiro)}
.pdp-rel{padding-top:var(--respiro);margin-top:var(--respiro)}
.pdp{padding-bottom:0}

/* A capa centrada e limitada a 420px era desenhada para o celular, onde a
   coluna tem 375px e o limite nunca aparece. Entre 700 e 833 ela deixava um
   vazio de 170 pixels de cada lado — a página do disco virava uma capa pequena
   no meio de nada, justamente na largura de um iPad em pé. */
@media (max-width:759px){
  .pdp-media{justify-self:center;width:min(420px,100%)}
}
@media (max-width:833px){
  .pdp-seal{justify-content:flex-start;text-align:left}
}
/* Nessa faixa cabem as duas colunas: capa e compra lado a lado, como no
   desktop, cada uma com uns 360px. */
@media (min-width:760px) and (max-width:833px){
  .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
  .pdp-media{justify-self:stretch;width:auto}
}

.sgrp{margin-top:1.6rem}
.sgrp-lbl{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:.5rem;margin-bottom:0;
  border-bottom:var(--rule)}

.sgrp .sr:first-of-type{margin-top:0}

.det{display:grid;gap:1.4rem}
.det-topo{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.det-topo .mono{font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft)}
.det-itens{display:grid;gap:.7rem;border-top:var(--rule);border-bottom:var(--rule);
  padding:.9rem 0}
.det-valores{display:grid;grid-template-columns:1fr auto;gap:.45rem 1rem;margin:0}
.det-valores dt{font-family:var(--f-data);font-size:.68rem;letter-spacing:.06em;
  color:var(--ink-soft);margin:0}
.det-valores dd{margin:0;text-align:right;font-size:.8rem}
.det-valores .forte{color:var(--ink);font-weight:500}
.det-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  border-top:var(--rule);padding-top:1.2rem}
.det-cols h4,.det-rastreio h4{font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem}
.det-cols p{margin:0;font-size:.82rem;line-height:1.5}
.det-nota{font-size:.62rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:.4rem}
.det-rastreio{border-top:var(--rule);padding-top:1.2rem}
.det-cod{font-size:.72rem;letter-spacing:.12em;color:var(--ink);margin:0 0 .8rem}
.det-rastreio .btn{width:100%}
@media (max-width:560px){.det-cols{grid-template-columns:1fr;gap:1.1rem}}

#zap{position:fixed;right:var(--zap-base);bottom:var(--zap-base);
  z-index:900;display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
#zap:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
#zap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round}
#zap .mono{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}

body.com-cookies #zap{bottom:calc(var(--zap-base) + var(--ck-h,0px)) !important}
@media (max-width:700px){
  #zap{padding:.75rem}
  #zap .mono{display:none}
  #zap svg{width:20px;height:20px}
}
@media print{#zap{display:none}}

.hs{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
.hs-arte{position:absolute;inset:0;display:grid;align-content:center;

  justify-items:center;gap:.6rem;border:1px dashed var(--ink-line);
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,
      rgba(110,106,102,.05) 14px 28px),var(--paper-2)}
.hs-tema{font-size:clamp(.7rem,1.6vw,.95rem);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink)}
.hs-medida{font-size:.6rem;letter-spacing:.18em;color:var(--ink-soft)}
.so-estreita{display:none}
@media (max-width:833px){
  .so-larga{display:none}
  .so-estreita{display:inline}
}

/* Filete em cima e embaixo, da mesma espessura das divisórias entre as três.
   Sem o de cima, a faixa não era uma caixa: era um fundo que começava no nada e
   terminava numa linha. */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--rule);border-bottom:var(--rule);background:var(--paper)}

.tipos a{display:flex;align-items:center;justify-content:center;
  padding:.55rem .6rem;text-align:center;
  border-left:var(--rule);transition:background .3s var(--ease),color .3s var(--ease)}
.tipos a:first-child{border-left:0}
.tipos a b{font-family:var(--f-ui);font-weight:800;font-stretch:118%;
  font-variation-settings:'wdth' 118;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(.82rem,1.3vw,1rem);line-height:1.1}
.tipos a:hover{background:var(--ink);color:var(--paper)}

@media (max-width:699px){
  .tipos a{padding:.6rem .4rem}
  .tipos a b{font-size:.68rem;letter-spacing:0;line-height:1.15}
}

.ult-janela{position:relative;overflow:hidden;touch-action:pan-y;
  margin-inline:calc(var(--gutter) * -1);padding-inline:0}
.ult-track{display:flex;--por-janela:6;
  transition:transform .7s var(--ease);will-change:transform}
.ult-item{flex:0 0 calc(100% / var(--por-janela));min-width:0;
  padding-inline:calc(var(--sec-gap,1rem) / 4)}
.ult-bars{display:flex;gap:.5rem;margin-top:1.2rem;
  padding-inline:var(--gutter)}
.ult-bars button{flex:1;height:22px;position:relative;background:none;border:0;padding:0}
.ult-bars button::before{content:'';position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--ink);opacity:.22}
.ult-bars button::after{content:'';position:absolute;left:0;top:50%;
  height:1px;width:0;background:var(--ink);transition:width .4s var(--ease)}
.ult-bars button[aria-selected="true"]::after{width:100%}

.sec-mais{display:flex;justify-content:center;margin-top:var(--respiro)}
.sec-mais .btn{min-width:min(280px,70vw)}

section:has(+ .marquee),.manifesto:has(+ .marquee),
.ult:has(+ .marquee){padding-bottom:var(--respiro)}
.marquee+section,.marquee+.hist,.marquee+.disco{padding-top:var(--respiro)}
.marquee{margin-block:0}

.zap-form{display:grid;gap:1.4rem}
.zap-col{display:grid;gap:.9rem;align-content:start;min-width:0}
@media (min-width:700px){
  .zap-form{grid-template-columns:1fr 1fr;align-items:stretch}
  .zap-form .zap-col:last-child{grid-template-rows:1fr auto;align-content:stretch}
  .zap-msg{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.35rem;min-height:0}

  .zap-msg textarea{height:100%;min-height:0;resize:none;overflow-y:auto}
}
@media (max-width:699px){
  .zap-msg textarea{min-height:7.5rem;resize:vertical}
}

:root{--zap-base:16px}
@media (min-width:700px){:root{--zap-base:24px}}
@media (min-width:1200px){:root{--zap-base:32px}}

.ult .sec-head{margin-bottom:clamp(.7rem,1.4vw,1.1rem);padding-bottom:.5rem}
.ult .sec-head h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}

.modal-in.largo{width:min(860px,100%);max-height:min(90vh,820px)}
.modal-in.largo .modal-corpo{padding:clamp(1.4rem,3vw,2.2rem)}
.modal-in.largo .zap-form{gap:clamp(1.4rem,3vw,2.4rem)}
.modal-in.largo .sub{margin-bottom:1.6rem}

.mp-acoes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:stretch}
.mp-acoes .btn{width:100%;padding-left:.9rem;padding-right:.9rem;
  text-align:center;line-height:1.25}
@media (max-width:520px){.mp-acoes{grid-template-columns:1fr}}

@media (max-width:699px){

  .co-passos{flex-direction:column;gap:.35rem}

  .foot-grid li>a,.foot-grid li>button{border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:3px;text-decoration-color:transparent;
    transition:text-decoration-color .3s}
  .foot-grid li>a:hover,.foot-grid li>a:focus-visible,
  .foot-grid li>button:hover,.foot-grid li>button:focus-visible{
    text-decoration-color:currentColor}
}

.hs-link{display:block;width:100%;height:100%}
.hs-foto{display:block;width:100%;height:100%}
.hs-foto img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block}

.pular{position:fixed;top:.5rem;left:.5rem;z-index:9990;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;transform:translateY(-160%);
  transition:transform .25s var(--ease)}
.pular:focus{transform:none}
main:focus{outline:none}
.erro-cod{color:var(--ink-soft);margin-bottom:.9rem}
.erro-busca{margin:0 0 var(--respiro)}
.erro-busca>label{display:block;color:var(--ink-soft);margin-bottom:.6rem}
.erro-busca-linha{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch}
.erro-busca input[type=search]{flex:1 1 20rem;min-width:0;
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);
  padding:.7rem 0;font-family:var(--f-ed);
  font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink)}
.erro-busca input[type=search]::placeholder{color:var(--ink-line)}
.erro-busca .btn{flex:0 0 auto}
.erro-saidas{display:flex;flex-wrap:wrap;gap:.7rem}
.erro-saidas .btn{flex:1 1 14rem}
.erro-discos{margin-top:var(--sec-gap)}
.erro-discos h2{color:var(--ink-soft);padding-bottom:.8rem;
  border-bottom:var(--rule);margin-bottom:var(--respiro)}

.sr-tudo{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding:.9rem 0;border-top:var(--rule);
  font-family:var(--f-data);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.sr-tudo:hover{color:var(--ink)}
.sr-tudo i{font-style:normal}

.cf-end{display:block;font-style:normal;font-family:var(--f-data);font-size:.58rem;
  letter-spacing:.06em;color:var(--ink-soft);margin-top:.2rem}

.cep-nota{display:block;margin-top:.35rem;font-family:var(--f-data);
  font-size:.6rem;letter-spacing:.06em;color:var(--ink-soft);min-height:.9rem}

.ult-janela .hero-arrow{opacity:.45}
.ult-janela:hover .hero-arrow,.ult-janela .hero-arrow:focus-visible{opacity:1}
@media (max-width:699px){
  .ult-janela .hero-arrow{width:34px;height:34px}
  .ult-janela .hero-arrow svg{width:16px;height:16px}
  .ult-janela .hero-arrow.prev{left:.4rem}
  .ult-janela .hero-arrow.next{right:.4rem}
}

.card-wrap{position:relative}
.card-acao{position:absolute;top:0;left:0;right:0;aspect-ratio:1;
  display:flex;align-items:flex-end;padding:.55rem;pointer-events:none}
.card-add{pointer-events:auto;width:100%;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem .4rem;line-height:1.2;
  opacity:0;transform:translateY(.4rem);
  transition:opacity .3s var(--ease),transform .3s var(--ease),
    background .3s,color .3s}
.card-wrap:hover .card-add,.card-add:focus-visible{opacity:1;transform:none}
.card-add:hover{background:var(--paper);color:var(--ink)}

.card.com-acao .quick{display:none}

@media (max-width:833px){
  .card-acao{display:none}
  .card.com-acao .quick{display:block}
}

@media (min-width:834px) and (pointer:coarse){
  .card-add{opacity:1;transform:none;padding:.7rem .4rem;min-height:44px}
}

@media (min-width:834px){
  .page-cols>div>h2:first-child{border-top:0;padding-top:0}
}

.hist-wrap{display:grid;grid-template-columns:minmax(0,1fr)}
.selo-fixo{display:none}
@media (min-width:834px){
  .hist-wrap{grid-template-columns:minmax(0,1fr) auto;align-items:start;
    padding-right:var(--gutter)}
  .selo-fixo{display:block;position:sticky;align-self:start;
    top:calc(var(--hdr-h) + 1.5rem);padding-top:var(--respiro);
    opacity:.9;pointer-events:none}
  .selo-fixo .mk{width:clamp(90px,10vw,150px)}
  .hist{padding-right:clamp(1.5rem,3vw,3rem)}
}

/* ═══════════════════════════════════════════════════════════════════
   PONTE COM O WOOCOMMERCE
   O sistema acima foi escrito para a marcação do protótipo. Aqui as classes
   que o WooCommerce gera recebem o mesmo desenho, em vez de o tema reescrever
   os templates do plugin só para trocar um nome de classe.
   ═══════════════════════════════════════════════════════════════════ */

/* botões do plugin herdam o botão do sistema */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,
.woocommerce input.button,.woocommerce #respond input#submit,
.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;padding:.95rem 1.6rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);border-radius:0;position:relative;
  transition:background .3s var(--ease),color .3s var(--ease)}
.woocommerce .button:hover,.woocommerce button.button:hover,
.woocommerce a.button:hover,.woocommerce input.button:hover{
  background:var(--paper);color:var(--ink)}
.woocommerce .button.alt,.woocommerce button.button.alt{background:var(--ink);color:var(--paper)}

/* campos */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty{
  border:1px solid var(--ink-line);background:transparent;border-radius:0;
  padding:.7rem .8rem;font-family:var(--f-data);font-size:.9rem;color:var(--ink)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--ink)}
.woocommerce form .form-row label{font-family:var(--f-data);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}

/* quantidade na página do disco, na mesma linha do botão.
   O input real continua no formulário, só que fora da vista: é ele que o
   WooCommerce lê. Os botões mexem nele; o número grande é o reflexo. */
.woocommerce div.product form.cart{display:grid;gap:.7rem;margin:var(--respiro) 0 0}
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after{content:none}
.qty .qty-real{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.qty{position:relative}
.woocommerce div.product form.cart .single_add_to_cart_button{padding-left:1rem;padding-right:1rem}

/* preço */
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--f-data);font-size:clamp(1.3rem,3vw,1.9rem);color:var(--ink);
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.woocommerce div.product p.price del{color:var(--ink-soft);font-size:.6em}
.woocommerce div.product p.price ins{text-decoration:none}
.card-price del{display:block;color:var(--ink-soft);font-weight:400;font-size:var(--t-xs)}
.card-price ins{text-decoration:none;font-weight:700;white-space:nowrap}


/* paginação */
.woocommerce nav.woocommerce-pagination ul,.romaria .page-numbers{border:0;display:flex;
  gap:.4rem;justify-content:center;flex-wrap:wrap;list-style:none;padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--ink-line);padding:.5rem .8rem;min-width:2.4rem;text-align:center;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.08em;color:var(--ink-soft)}
.woocommerce nav.woocommerce-pagination ul li span.current{
  border-color:var(--ink);color:var(--ink)}

/* a grade do plugin usa a grade do sistema */
.woocommerce ul.products{display:grid;gap:clamp(1rem,2vw,1.6rem);margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{margin:0;width:auto;float:none}

/* tabela da sacola e do checkout */
.woocommerce table.shop_table{border:0;border-collapse:collapse;width:100%}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border:0;border-bottom:var(--rule);padding:.9rem .2rem;font-family:var(--f-data);
  font-size:.78rem;letter-spacing:.04em}
.woocommerce table.shop_table th{font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}

/* o simulador de frete na página do disco entra na caixa discreta do tema */
.frete-block form,.frete-block .wcsf-form{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:stretch}
.frete-block input[type=text],.frete-block input[type=tel]{
  border:1px solid var(--ink-line);background:transparent;padding:.55rem .7rem;
  font-family:var(--f-data);font-size:.82rem;letter-spacing:.06em;color:var(--ink)}
.frete-block button{border:1px solid var(--ink);padding:0 .9rem;white-space:nowrap;
  font-family:var(--f-data);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

/* o botão de comprar pela capa fica ocupado enquanto o servidor responde */
.card-add.ocupado{opacity:.55;pointer-events:none}

/* ═══════════════ BARRA DO WORDPRESS ═══════════════
   Para quem está logado, o WordPress empurra o documento com
   html{margin-top:32px}. Elemento fixo não enxerga essa margem: ele se ancora
   no topo da tela e some por baixo da barra. O bloco fixo do topo desce o
   mesmo tanto, e nas telas estreitas a barra tem 46px. */
body.admin-bar #topo{top:32px}
body.admin-bar #search{top:32px}
@media screen and (max-width:782px){
  body.admin-bar #topo{top:46px}
  body.admin-bar #search{top:46px}
}

/* ═══════════════ AVISOS DO WOOCOMMERCE ═══════════════
   Um aviso é uma frase curta, e estava chegando como móvel: caixa da largura
   inteira, moldura, filete colorido, botão de outra família. Era o objeto mais
   pesado da tela para dizer cinco palavras, e havia três desenhos diferentes
   dele espalhados por este arquivo, cada um vencendo numa página.

   Agora é um só, e é o mesmo do "adicionado à sacola": etiqueta escura, do
   tamanho do texto, em versalete. Aquele aviso a loja já dava assim, e é o
   mais visto de todos; fazer os outros falarem igual é dizer à pessoa que é a
   loja falando, e não uma engrenagem qualquer aparecendo. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice,
.woocommerce-notices-wrapper>*{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;
  width:auto;max-width:100%;
  background:var(--ink);color:var(--paper);border:0;border-radius:0;
  padding:.8rem 1.3rem;margin:0 0 1.2rem;
  font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;list-style:none}
/* A etiqueta encolhe até o texto, então ela precisa de um pai que a deixe
   encolher: sem isto, o flex do conteúdo a estica de volta à largura toda. */
.woocommerce-notices-wrapper{display:flex;flex-direction:column;
  align-items:flex-start}
/* Erro usa a mesma etiqueta preta dos outros avisos.
   Ele já foi vermelho. O problema não era a cor em si, era ela ser a única voz
   diferente na página: uma caixa vermelha de plugin no meio de uma loja escrita
   em preto e versalete se lê como defeito do site, e não como recado da loja.
   Quase todo erro vai para o toast (assets/js/romaria.js); os que ficam — os que
   trazem link ou botão, porque um toast levaria a ação embora — ficam com esta
   etiqueta. O que distingue erro de confirmação passa a ser o texto e o tempo de
   tela, não a cor. */
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{
  flex:0 0 100%;margin:0;list-style:none}
.woocommerce-info::before,.woocommerce-message::before,
.woocommerce-error::before{content:none}
/* A ação dentro do aviso precisa parecer clicável.

   Ela era só a palavra sublinhada, e sublinhado, no meio de uma etiqueta escrita
   inteira em versalete, se lê como ênfase — não como coisa em que se clica. Uma
   moldura fina resolve sem trazer de volta a caixa dentro da caixa: a borda é da
   cor do texto, então continua sendo a mesma tinta, só com um contorno.

   Vale em todas as telas, e não só no celular: quem clica no computador tem o
   cursor para descobrir que é um botão, mas descobre depois de passar por cima
   — e ninguém passa o mouse por cima de um aviso para ver se ele reage. */
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a,
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  order:2;background:transparent;color:inherit;
  padding:.55rem 1.1rem;border:1px solid currentColor;
  font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease)}
.woocommerce-message a:hover,.woocommerce-info a:hover,.woocommerce-error a:hover,
.woocommerce-message .button:hover,.woocommerce-info .button:hover,
.woocommerce-error .button:hover{background:var(--paper);color:var(--ink);opacity:1}
/* Quando a etiqueta ocupa a largura toda e a ação cai numa linha só para ela,
   ela fica no meio: sozinha na linha, encostada à esquerda, parecia um resto
   de texto que sobrou da frase de cima. */
@media (max-width:640px){
  /* Em coluna estreita a etiqueta vira uma pilha: a frase em cima, a ação
     embaixo e no meio. Grade em vez de flex porque aqui o alinhamento precisa
     ser dito item por item — o texto continua à esquerda, e só o botão vai para
     o centro. */
  .woocommerce-message,.woocommerce-info,.woocommerce-error,
  .woocommerce-notices-wrapper>*{display:grid;width:100%;gap:.9rem;
    justify-items:start;text-align:left}
  .woocommerce-message a,.woocommerce-info a,.woocommerce-error a,
  .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
    justify-self:center;width:max-content;max-width:100%;text-align:center}
  .woocommerce-error li,.woocommerce-message li,.woocommerce-info li{flex:none}
}
.woocommerce-message a:hover,.woocommerce-info a:hover,.woocommerce-error a:hover,
.woocommerce-message .button:hover,.woocommerce-info .button:hover,
.woocommerce-error .button:hover{opacity:.7}

/* ═══════════════ AVISO DE CONFIRMAÇÃO DE E-MAIL ═══════════════ */
.aviso-verif{display:grid;gap:.7rem;justify-items:start;margin-bottom:1.6rem}
.aviso-verif h4{font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.aviso-verif .sub{font-family:var(--f-ed);font-size:clamp(1rem,2vw,1.2rem);
  color:var(--ink-soft);max-width:52ch;margin:0}
.aviso-verif .btn{margin-top:.3rem}
.verif-modal{display:grid;gap:.7rem;justify-items:start}
.verif-modal h4{display:none}          /* o título já está no alto do modal */
.verif-modal .sub{font-family:var(--f-ed);font-size:1.1rem;color:var(--ink-soft);margin:0}

/* ═══════════════ TROCA ENTRE ENTRAR E CADASTRAR ═══════════════
   O <b> e o <i> aqui não pedem negrito nem itálico: são só dois blocos para as
   duas linhas. O peso e o estilo vêm do botão, como no resto do sistema. */
.co-troca.duas-linhas>span{display:grid;justify-items:center;gap:.15rem;
  text-align:center;line-height:1.35}
.co-troca.duas-linhas b,.co-troca.duas-linhas i{
  font-weight:inherit;font-style:normal;display:block}

/* O tempo da faixa, quando existir, ao lado do nome e sem competir com ele. */
.side li b.fx-t{font-family:var(--f-data);font-size:.72rem;font-weight:400;
  color:var(--ink-soft);margin-left:.5rem}

/* O bloco de entrega não se esconde.
   O checkout.js do WooCommerce faz slideToggle em .shipping_address quando a
   pergunta dele muda de estado. Aqui a resposta é sempre a mesma, então o
   bloco é sempre visível: sem esta linha, um toggle perdido deixaria a pessoa
   sem onde digitar para onde o disco vai. */
.romaria-entrega .shipping_address{display:block !important}

/* A caixa "usar o mesmo endereço" fica entre dois blocos de campos, e precisa
   ler como uma fronteira, não como mais um campo. Espaço em cima e embaixo, e
   um filete acima para fechar visualmente o bloco de entrega antes de a
   pergunta aparecer. Sem isso ela encostava no campo Cidade e no rótulo do
   bloco seguinte, e os três viravam uma massa só. */
.romaria-mesmo-end{margin:1.6rem 0 1.8rem;padding-top:1.4rem;border-top:var(--rule)}
.romaria-mesmo-end .co-check{margin:0}

/* E o rótulo do bloco seguinte respira antes de começar. */
.woocommerce-billing-fields>.co-nota{margin-bottom:1rem}
.romaria-entrega>.co-nota{margin-bottom:1rem}

/* O campo do cupom mostra em caixa alta desde o primeiro caractere.
   O JS já converte o valor, mas o CSS chega antes da tecla ser processada e
   evita o piscar de uma letra minúscula que vira maiúscula em seguida. */
.cupom-campo{text-transform:uppercase}
.cupom-campo::placeholder{text-transform:none}