/* ══════════════════════════════════════════════
   Research catalog — demo
   Tema: dark industrial + vinho institucional e dourado de ação
   Paleta derivada do rótulo impresso (ver branding.md)
   ══════════════════════════════════════════════ */

:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --panel:#141416;
  --panel-2:#1a1a1d;
  --line:#26262b;
  --line-2:#333338;
  --txt:#f4f4f5;
  --txt-2:#a1a1a8;
  --txt-3:#8a8a93;

  /* ── marca ──────────────────────────────────
     Dourado é a cor de AÇÃO: 9,51:1 sobre --bg.
     O vinho tem só 2,14:1 no dark, então nunca vira
     texto nem botão — entra como superfície (--wine).
     Texto dentro de preenchimento dourado usa --ink
     (9,09:1); branco sobre dourado cai para 2,08:1. */
  --brand:#D4AF5E;
  --brand-2:#F5E7BE;
  --brand-dim:rgba(212,175,94,.14);
  --ink:#14100F;

  /* estado ocupado do botão. NÃO é "componente inativo": é o estado que exibe
     "Saving…", "Publishing…" e "Creating…" no painel da equipe, ou seja, texto
     que precisa ser lido no exato momento em que a pessoa olha para ele. Por
     isso passa AA (6,46:1) em vez de usar a isenção da WCAG 1.4.3 para
     controle desabilitado. O par anterior (#A79668 sobre #4A3B1E) dava 3,72:1,
     o pior contraste da interface. Ainda fica mais apagado que o botão ativo,
     que é --ink sobre --brand (9,09:1). */
  --off-bg:#4A3B1E;
  --off-txt:#D6C79B;

  /* superfície dos selos do card. Eles ficam sobre a FOTO do produto, que é
     clara, e --brand-dim/--green-dim são rgba .14: compunham creme sobre
     creme e o selo sumia. Opaco para o contraste não variar de card para
     card, já que cada card tem uma foto diferente atrás. Ver .card__flag. */
  --flag-bg:#14100F;

  /* vinho: superfície institucional, replica a faixa do rótulo */
  --wine:#8C1826;
  --wine-deep:#6E1421;
  --wine-lift:#A81F2B;
  --green:#25c760;
  --green-dim:rgba(37,199,96,.14);
  --red:#ff6b61;
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  /* escala de elevação: sm/md p/ toast e cookies, lg p/ drawer, modal e gate */
  --shadow-sm:0 4px 14px rgba(0,0,0,.40);
  --shadow-md:0 10px 30px rgba(0,0,0,.48);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
  --shadow:var(--shadow-lg);          /* alias legado */
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --focus:#F5E7BE;                    /* anel de foco (16:1 sobre --bg) */
  --tap:44px;                         /* área mínima de toque */
  color-scheme:dark;                  /* select e range com widget nativo escuro */
}

*,*::before,*::after{box-sizing:border-box}

/* o atributo hidden precisa vencer as regras de display abaixo
   (.gate/.modal usam grid, .drawer usa flex) */
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  /* rede de segurança contra overflow acidental — não substitui corrigir a causa */
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}

/* ── foco de teclado (global) ──────────────────
   sem isto a navegação por Tab fica invisível */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
/* remove o atraso de ~300ms no toque */
a,button,input,select,label{touch-action:manipulation}

/* ── skip link ─────────────────────────────────
   fora da tela até receber foco; z-index acima do header (60) */
.skiplink{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:12px 18px;border-radius:var(--r-sm);
  background:var(--brand);color:var(--ink);font-weight:700;font-size:.9rem;
  transform:translateY(-220%);transition:transform .2s var(--ease);
}
.skiplink:focus{transform:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ícones ────────────────────────────────── */
/* Família de ícones. `fill:currentColor` só serve aos elementos que fazem
   papel de PONTO (chip de cookie, furo da etiqueta); a figura em si é sempre
   traçada por `.stroke`. Elemento que esquecer a classe sai chapado — foi o
   que descaracterizou o conjunto antes (ver comentário do ICON em layout.js). */
.i{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.i .stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* variante miúda, usada na data do COA. O traço compensa a redução para que
   o peso óptico continue igual ao dos ícones de 20px */
.i--xs{width:15px;height:15px}
.i--xs .stroke{stroke-width:2.1}

/* ── eyebrow ───────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}
.eyebrow--green{color:var(--green);justify-content:center}
.eyebrow--tag{color:var(--brand)}

/* ── botões ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;min-height:var(--tap);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;cursor:pointer;
  transition:transform .15s var(--ease),background .2s,border-color .2s,opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
/* texto escuro sobre dourado: 9,09:1. Com #fff cairia para 2,08:1 */
.btn--primary{background:var(--brand);color:var(--ink)}
.btn--primary:hover{background:var(--brand-2)}
/* ocupado, não inativo: este é o estado que mostra "Saving…". Sem opacity, que
   reduziria de novo o contraste que os tokens acabaram de corrigir. */
.btn--primary:disabled{background:var(--off-bg);color:var(--off-txt);cursor:not-allowed}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--txt)}
.btn--ghost:hover{border-color:#4a4a52;background:var(--panel-2)}
.btn--green{background:var(--green);color:#062611}
.btn--green:hover{background:#33d96e}
.btn--block{width:100%}
.btn--sm{padding:9px 16px;font-size:.86rem;min-height:var(--tap)}

.linkbtn{
  display:inline-flex;align-items:center;min-height:var(--tap);
  background:none;border:0;padding:12px 4px;cursor:pointer;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}
.linkbtn:hover{color:var(--txt)}

.iconbtn{
  display:grid;place-items:center;position:relative;
  width:var(--tap);height:var(--tap);background:none;border:0;border-radius:var(--r-sm);
  color:var(--txt);cursor:pointer;transition:background .2s;
}
.iconbtn:active{background:var(--line)}
@media (hover:hover){.iconbtn:hover{background:var(--panel-2)}}
.badge{
  position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--brand);color:var(--ink);font-size:.75rem;font-weight:700;
}
.pill{
  min-width:20px;padding:1px 7px;border-radius:99px;
  background:var(--brand);color:var(--ink);font-size:.75rem;font-weight:700;
}

/* ══════════ AGE GATE ══════════ */
.gate{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:20px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(140,24,38,.32),transparent 60%),rgba(6,6,7,.94);
  backdrop-filter:blur(6px);overflow-y:auto;overscroll-behavior:contain;
}
.gate__panel{
  width:100%;max-width:520px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 26px 22px;box-shadow:var(--shadow-lg);
  animation:pop .35s var(--ease) both;
}
.gate__welcome{
  text-align:center;color:var(--brand);
  font-size:1.05rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}
.gate__rule{border:0;border-top:1px solid var(--line);margin:18px 0}
.gate__ruo{
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--brand);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:20px;
}
.gate__title{font-size:1.7rem;margin-bottom:12px}
.gate__text{color:var(--txt-2);font-size:.95rem}
.gate__checks{
  margin:22px 0;padding:16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  display:grid;gap:16px;
}
.gate__exit{
  display:block;width:100%;margin-top:14px;padding:10px;min-height:var(--tap);
  background:none;border:0;cursor:pointer;
  color:var(--txt-3);font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
}
.gate__exit:hover{color:var(--txt-2)}

/* checkbox custom */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
/* link dos termos: fora do label, para o clique não alternar o checkbox */
.gate__terms{margin-left:34px}
.gate__terms a{
  display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--brand);font-size:.88rem;text-decoration:underline;
}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;
  border:1.5px solid var(--line-2);border-radius:6px;background:var(--panel);
  position:relative;transition:.18s var(--ease);
}
.check__box::after{
  content:"";position:absolute;inset:0;
  background:no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314100F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);transition:.18s var(--ease);
}
.check input:checked + .check__box{background:var(--brand);border-color:var(--brand)}
.check input:checked + .check__box::after{opacity:1;transform:scale(1)}
.check input:focus-visible + .check__box{outline:2px solid var(--brand-2);outline-offset:2px}
.check__label{font-size:.92rem;color:var(--txt-2)}
.check__label a{color:var(--brand);text-decoration:underline}

/* gate em telas de baixa altura: compacta para caber sem scroll */
@media (max-height:760px){
  .gate{align-items:start;padding:14px}
  .gate__panel{padding:20px 20px 14px}
  .gate__welcome{font-size:.92rem;letter-spacing:.16em}
  .gate__rule{margin:12px 0}
  .gate__ruo{margin-bottom:12px}
  .gate__title{font-size:1.35rem;margin-bottom:8px}
  .gate__text{font-size:.86rem;line-height:1.45}
  .gate__checks{margin:14px 0;padding:12px;gap:12px}
  .check__box{width:20px;height:20px}
  .check__label{font-size:.85rem;line-height:1.4}
  .gate__exit{margin-top:8px;padding:6px}
}

/* ══════════ NOSCRIPT ══════════
   header, nav, footer, overlays e o catálogo vêm todos de JS. Sem script a
   página ficava um tronco sem navegação, silenciosamente. */
.noscript{
  padding:16px 20px;text-align:center;
  background:var(--wine-deep);color:var(--brand-2);
  border-bottom:1px solid rgba(212,175,94,.4);
  font-size:.9rem;font-weight:600;
}

/* ══════════ ANNOUNCEMENT ══════════ */
/* gradiente vertical + filetes dourados: replica a faixa do rótulo
   impresso (bordas escuras, centro mais vivo, moldura fina) */
.announce{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--wine-deep) 0%,var(--wine-lift) 52%,var(--wine-deep) 100%);
  border-block:1px solid rgba(212,175,94,.4);
  padding:10px 16px;text-align:center;
}
/* varredura especular sobre a faixa. translateX é composited,
   então não repinta a barra a cada frame */
.announce::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent,rgba(245,231,190,.16),transparent);
  animation:glide 7s linear infinite;
}
/* sem caixa alta: 67 caracteres em CAPS apagam a silhueta das palavras e
   derrubam a velocidade de leitura. Funciona em rótulo curto, não em frase.
   O peso e o creme já dão o destaque. */
.announce__txt{
  position:relative;z-index:1;color:var(--brand-2);
  font-size:.82rem;font-weight:700;letter-spacing:.02em;
}
/* brilho metálico varrendo o texto: creme → branco → creme.
   O sheen só CLAREIA, nunca escurece, então o piso de contraste segue
   sendo o creme (5,89:1 no ponto mais claro do vinho). Dourado puro
   como texto aqui daria 4,44:1 e reprovaria AA. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .announce__txt{
    background:linear-gradient(100deg,
      var(--brand-2) 0%,var(--brand-2) 38%,
      #FFFDF8 48%,#FFFFFF 52%,
      var(--brand-2) 62%,var(--brand-2) 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:sheen 7s linear infinite;
  }
}
@keyframes glide{to{transform:translateX(350%)}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
/* A faixa rola sozinha por mais de 5s, então precisa de um controle de
   pausa acessível (WCAG 2.2.2, nível A). Antes só pausava no :hover, o que
   exclui teclado e touch. O botão fica fora do viewport mascarado, senão o
   próprio gradiente o apagaria nas bordas. */
.ticker{
  position:relative;display:flex;align-items:stretch;
  background:var(--bg-2);border-bottom:1px solid var(--line);
}
/* O fade das pontas escondia o texto: em porcentagem ele CRESCE com a tela
   (8% de 1440px = 115px), e um perk tem ~230px. Resultado prático: o item
   que entrava ficava meio apagado durante toda a travessia da borda, que é
   exatamente o que se via na faixa.
   Em px o fade fica previsível — 40px suavizam a entrada sem comer a frase,
   em qualquer largura. */
.ticker__viewport{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.ticker__track{
  display:flex;gap:44px;width:max-content;padding:9px 0;
  animation:marquee 38s linear infinite;
  /* mantém o track numa camada própria: evita tremer o texto no loop */
  will-change:transform;backface-visibility:hidden;
}
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track{animation-play-state:paused}
.ticker__pause{
  flex:0 0 auto;display:grid;place-items:center;
  width:var(--tap);height:var(--tap);align-self:center;
  background:var(--bg-2);border:0;border-left:1px solid var(--line);
  color:var(--txt-3);cursor:pointer;
}
.ticker__pause:active{background:var(--panel-2)}
@media (hover:hover){.ticker__pause:hover{color:var(--txt)}}
/* dois ícones no mesmo botão: o estado manda qual aparece */
.ticker__pause .i--play{display:none}
.ticker.is-paused .ticker__pause .i--play{display:block}
.ticker.is-paused .ticker__pause .i--pause{display:none}
.ticker__item{
  position:relative;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  /* mesma razão do .announce__txt: são frases, não etiquetas */
  color:var(--txt-2);font-size:.8rem;font-weight:600;letter-spacing:.02em;
}
/* losango dourado no MEIO do gap (44px), separando os perks: -22px é o
   centro exato. Absoluto, então fica fora do flow e não altera o ritmo
   do marquee */
.ticker__item::after{
  content:"";position:absolute;right:-22px;top:50%;
  width:4px;height:4px;margin-top:-2px;
  background:var(--brand);opacity:.55;transform:rotate(45deg);
}
/* Ícone a 16px enquanto o padrão de `.i` é 20px: o traço de 1.8 encolhe
   para ~1.44 óptico e o desenho perde nitidez em tela não-retina. O
   stroke sobe para 2 só aqui, para o peso visual bater com o resto. */
.ticker__item .i{width:16px;height:16px;color:var(--brand)}
.ticker__item .i .stroke{stroke-width:2}
.ticker__item b{color:var(--txt)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ══════════ HEADER ══════════ */
/* O header é injetado dentro de #siteHeader. Sem isto, o position:sticky
   abaixo fica preso à altura do wrapper (announce + ticker + header) e o
   header desaparece ao rolar. display:contents dissolve o wrapper, então
   os filhos passam a participar do layout do body como se fossem diretos. */
#siteHeader{display:contents}

.header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,11,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;gap:14px;height:64px}
.header__actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.region-select{color:var(--txt-2);font-size:.76rem;font-weight:700}
.region-select select{
  min-height:38px;padding:7px 28px 7px 10px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:999px;color:var(--txt);font:inherit;cursor:pointer
}
.region-select--mobile{display:grid;gap:6px;margin:18px;padding-top:18px;border-top:1px solid var(--line)}
.region-select--mobile span{color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em}
.region-select--mobile select{width:100%;border-radius:var(--r-sm)}
@media (max-width:899px){.region-select--desktop{display:none}}
@media (min-width:900px){.region-select--mobile{display:none}}
.region-suggestion{
  position:fixed;left:50%;bottom:20px;z-index:105;transform:translateX(-50%);
  width:min(560px,calc(100vw - 28px));padding:14px;background:var(--panel);
  border:1px solid var(--brand);border-radius:var(--r);box-shadow:var(--shadow-md)
}
.region-suggestion p{margin-bottom:10px}
.region-suggestion__actions{display:flex;justify-content:flex-end;gap:8px}

.logo{display:flex;align-items:center;gap:10px}
/* inline-flex mantém o monograma e o <span> dourado na mesma linha
   (com grid cada um viraria um item de grid em linha própria) */
/* O logo da marca é um HEXÁGONO, e o header desenhava quadrado arredondado
   (branding.md 9.3, item 1). A moldura não pode ser `border`: com clip-path
   a borda é cortada junto e sobra meia espessura nas diagonais.
   Então o hexágono dourado é o próprio fundo do elemento e o ::before
   recorta um hexágono um pouco menor por cima, na cor do header — o que
   resta entre os dois é a moldura. */
.logo__mark{
  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  /* 36px e não 34: o hexágono tem menos área que o quadrado de mesma caixa,
     e no tamanho antigo o monograma ficava apertado contra as diagonais */
  flex:0 0 auto;width:36px;height:36px;line-height:1;
  clip-path:var(--hex);background:var(--brand);
  color:var(--txt);font-weight:800;font-size:.95rem;letter-spacing:-.04em;
}
/* o miolo. `inset` de 1.6px deixa a moldura visualmente equivalente ao
   1.5px da borda anterior */
.logo__mark::before{
  content:"";position:absolute;inset:1.6px;z-index:-1;
  clip-path:var(--hex);background:var(--bg);
}
.logo__mark span{color:var(--brand)}
/* Sem suporte a clip-path o elemento apareceria como um retângulo dourado
   chapado, com o monograma ilegível por cima. O fallback volta ao quadrado
   arredondado com borda, que é o desenho que estava aqui antes. */
@supports not (clip-path:polygon(50% 0%,100% 100%,0% 100%)){
  .logo__mark{
    background:none;border:1.5px solid var(--brand);border-radius:7px;
  }
  .logo__mark::before{display:none}
}
.logo__word{display:none;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.logo__word em{font-style:normal;color:var(--txt-3);font-weight:500}

.nav{display:none;gap:26px;margin-left:14px}
.nav a{
  font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);transition:color .2s;
}
@media (hover:hover){.nav a:hover{color:var(--brand)}}
.nav a[aria-current=page]{color:var(--brand)}

#navOpen{margin-left:-8px}

/* ══════════ DRAWERS ══════════ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);animation:fade .2s var(--ease)}
.drawer{
  position:fixed;top:0;bottom:0;z-index:90;
  width:min(400px,88vw);display:flex;flex-direction:column;
  background:var(--panel);box-shadow:var(--shadow-lg);
}
.drawer--left{left:0;border-right:1px solid var(--line);animation:slideL .28s var(--ease)}
.drawer--right{right:0;border-left:1px solid var(--line);animation:slideR .28s var(--ease)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 10px 14px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.drawer__title{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2)}
.drawer__nav{display:flex;flex-direction:column;padding:10px 0;overflow-y:auto;overscroll-behavior:contain}
.drawer__nav a{
  display:flex;align-items:center;min-height:var(--tap);
  padding:15px 20px;border-bottom:1px solid var(--line);
  font-size:1.02rem;font-weight:600;transition:background .2s,color .2s;
}
.drawer__nav a:active{background:var(--panel-2)}
.drawer__nav a[aria-current=page]{
  color:var(--brand);font-weight:700;
  background:linear-gradient(90deg,rgba(212,175,94,.10),transparent 70%);
  box-shadow:inset 3px 0 0 var(--brand)
}
@media (hover:hover){.drawer__nav a:hover{background:var(--panel-2);color:var(--brand)}}
.drawer__note{
  margin-top:auto;padding:18px 20px;border-top:1px solid var(--line);
  padding-bottom:max(18px,env(safe-area-inset-bottom));
  color:var(--txt-3);font-size:.8rem;
}
.drawer__note strong{color:var(--brand)}

/* ══════════ HERO ══════════ */
.hero{position:relative;overflow:hidden;padding:60px 0 56px;background:var(--bg-2)}
.hero__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 70%);
          mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 70%);
}
.hero__inner{position:relative}
.hero__title{font-size:clamp(2.3rem,8vw,4.2rem);font-weight:800;margin-bottom:18px}
/* o color:transparent só entra junto com o recorte: sem background-clip
   suportado, o H1 ficaria invisível em vez de degradado */
.hero__title span{color:var(--txt)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero__title span{
    background:linear-gradient(96deg,#cfd3d8,#8f959d 55%,#f4f4f5);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero__sub{max-width:56ch;color:var(--txt-2);font-size:1.04rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ══════════ TRUST ══════════ */
.trust{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);
}
.trust__cell{
  display:flex;gap:14px;padding:22px 20px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust__cell:nth-child(2n){border-right:0}
.trust__cell:nth-last-child(-n+2){border-bottom:0}
.trust__ico{
  display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;
  border-radius:9px;background:var(--brand-dim);color:var(--brand);
}
.trust__cell h3{font-size:1rem;margin-bottom:3px}
.trust__cell p{color:var(--txt-3);font-size:.84rem;line-height:1.35}

.ruostrip{
  padding:16px;text-align:center;background:var(--bg-2);
  border-bottom:1px solid var(--line);
  color:var(--txt-3);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

/* ══════════ CATALOG TOOLBAR ══════════ */
.catalog{padding:34px 20px 60px}
.searchbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt-3);transition:border-color .2s;
}
.searchbar:focus-within{border-color:var(--brand)}
/* sem outline:none aqui — a regra global de :focus-visible tem a mesma
   especificidade (0,1,1) e vinha depois no arquivo, então o anel de foco
   era anulado. A borda dourada do :focus-within continua valendo como
   reforço, mas sozinha ela é indicador fraco (WCAG 2.4.7). */
.searchbar input{
  flex:1;min-width:0;background:none;border:0;
  color:var(--txt);font:inherit;font-size:.98rem;
}
.searchbar input::placeholder{color:var(--txt-3)}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar__clear{
  display:grid;place-items:center;flex:0 0 auto;
  width:var(--tap);height:var(--tap);
  background:none;border:0;padding:0;cursor:pointer;color:var(--txt-3);border-radius:var(--r-sm);
}
.searchbar__clear:active{background:var(--panel-2)}
@media (hover:hover){.searchbar__clear:hover{color:var(--txt)}}

.toolbar{display:flex;gap:12px;align-items:stretch}
.toolbar .btn{flex:1}
.sort{position:relative;flex:1;display:flex}
.sort select{
  width:100%;appearance:none;cursor:pointer;
  padding:13px 40px 13px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;font-size:.95rem;font-weight:600;min-height:var(--tap);
}
.sort select:focus{border-color:var(--brand)}
.sort__chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--txt-3)}

.filters{
  margin-top:14px;padding:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  display:grid;gap:20px;animation:fade .2s var(--ease);
}
.filters__group h4{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:12px;
}
.filters__group h4 b{color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 16px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:99px;
  font-size:.85rem;font-weight:600;color:var(--txt-2);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:active span{background:var(--panel-2)}
@media (hover:hover){.chip:hover span{border-color:#4a4a52;color:var(--txt)}}
.chip input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--brand-2);outline-offset:2px}

/* a área arrastável tinha 4px de altura — alvo quase impossível no toque.
   O input passa a ocupar 44px com fundo transparente e o trilho visível de
   4px vira pseudo-elemento, então o visual não muda e o alvo cresce 11x. */
input[type=range]{
  width:100%;height:var(--tap);appearance:none;background:none;cursor:pointer;
}
input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;background:var(--line-2);
}
input[type=range]::-moz-range-track{
  height:4px;border-radius:99px;background:var(--line-2);
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;
  margin-top:-9px;                    /* centra o thumb no trilho de 4px */
  background:var(--brand);border:3px solid var(--panel);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--brand);border:3px solid var(--panel);cursor:pointer;
}

.resultline{
  margin:22px 0 14px;color:var(--txt-3);
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.resultline span{color:var(--txt)}

/* ══════════ PRODUCT GRID ══════════ */
/* minmax(0,1fr) evita que o min-content dos cards estufe as colunas */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,transform .2s var(--ease);
}
/* hover só onde existe ponteiro real: no touch o card ficava deslocado após o tap */
@media (hover:hover){.card:hover{border-color:var(--line-2);transform:translateY(-2px)}}
/* a opacidade fica só na mídia. Aplicada ao card inteiro, ela derrubava o
   contraste do texto junto: o aviso de estoque caía para 3,31:1 e o texto
   secundário para 4,23:1, ou seja, a informação "indisponível" era a menos
   legível do card. O estado segue comunicado pelo frasco apagado, pelo
   rótulo "Unavailable" e pelo botão "Notify Me". */
.card.is-out .card__media{opacity:.45}

/* O selo fica SOBRE a foto, e a foto é clara (o cinza do estúdio). Antes ele
   usava --brand-dim / --green-dim, que são rgba(...,.14): tokens nascidos para
   superfície ESCURA, de quando .card__media ainda era #000. Com as fotos, os
   14% passaram a compor creme sobre creme.

   Medido no Chrome, com o pixel real da foto sob cada selo: o texto do "Best
   seller" ficava em 1,12:1 e o do "New" em 1,56:1, contra os 4,5:1 que o AA
   pede nesse tamanho. Ou seja o selo estava lá e não se lia.

   O fundo agora é OPACO de propósito: cada card tem uma foto diferente atrás,
   e com fundo translúcido o contraste passa a depender de qual produto é.
   Escuro com texto dourado, e não dourado preenchido, porque preenchimento
   dourado é a linguagem de AÇÃO da loja (botões) — selo não clicável vestido
   de botão promete um clique que não existe.

   pointer-events:none porque a pílula é IRMÃ de .card__media[data-act="view"]
   e passa por cima dele: capturando o ponteiro, ela matava ~90×24px do canto
   da foto nos 9 cards com selo, justamente onde o olho chega primeiro. */
.card__flag{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:4px 9px;border-radius:99px;
  font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;
}
.card__flag--best{background:var(--flag-bg);border:1px solid var(--brand);color:var(--brand-2)}
.card__flag--new{background:var(--flag-bg);border:1px solid var(--green);color:var(--green)}

.card__media{
  position:relative;padding:10px;background:#000;
  border-bottom:1px solid var(--line);cursor:pointer;
}
/* a foto declara width/height no <img>: o navegador reserva a altura pela
   proporção antes de baixar o arquivo, então o grid não pula quando a imagem
   chega.

   A foto é 3:4 (retrato) e o vialSVG 4:3 (paisagem), então o card com foto é
   mais alto que o card com desenho. É o preço de mostrar a imagem inteira,
   sem recorte, e foi uma escolha deliberada. */
.card__media svg,
.card__media img{width:100%;height:auto;display:block;border-radius:6px}
/* Foto no lugar do SVG: o padding de 10px sobre #000 virava uma moldura
   escura em volta de uma foto de fundo claro. Sem padding a imagem ocupa a
   área inteira da mídia, e o fundo acompanha o cinza do estúdio para o
   intervalo em que a imagem ainda não carregou.

   Os dois hex são a MÉDIA medida da primeira e da última linha das 44 fotos
   de img/products. Trocar as fotos sem remedir deixa uma linha de costura
   onde o fundo encontra a imagem.

   A do Tesamorelin ficava fora da média porque o topo dela era bordô
   (#6C151B) e puxava tudo para escuro. A imagem foi refeita e o topo agora é
   claro como as outras, então a exceção deixou de existir. Remedido com as
   44: o desvio para estes hex é de 2/255 por canal, ou seja o gradiente
   segue valendo — foi conferido, não presumido.

   No card o fundo quase não aparece: sem padding, a foto ocupa a largura
   inteira e a altura vem da proporção. Ele serve para o intervalo antes de a
   imagem carregar, e para o quick view no desktop. */
.card__media--photo{padding:0;background:linear-gradient(#E0DBDE,#D3CCD1)}
.card__media--photo img{border-radius:0}

.card__body{display:flex;flex-direction:column;flex:1;padding:14px}
.card__name{font-size:1.05rem;font-weight:700;margin-bottom:12px}

.card__meta{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.card__meta div{display:flex;flex-direction:column;gap:2px}
.card__meta dt{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
}
.card__meta dd{margin:0;font-size:.9rem;font-weight:600}

.card__stock{
  display:flex;align-items:center;gap:7px;padding:12px 0;
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
}
.card__stock.is-out{color:var(--txt-3)}
.card__dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.card__pricerow{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.card__price{
  font-size:clamp(1.1rem,4.6vw,1.4rem);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.card__was{
  margin-left:0;color:var(--txt-3);font-size:.9rem;text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
/* Sob consulta: sem valor a exibir. Corpo menor que o preço normal, porque
   é texto e não número — na escala do preço ficaria desproporcional. */
.card__price--quote{
  font-size:clamp(.95rem,3.4vw,1.05rem);color:var(--txt-2);letter-spacing:0;
}
.pdp__quote{color:var(--txt-2)}
.card__off{
  display:inline-block;margin-top:6px;padding:3px 8px;border-radius:5px;
  background:var(--brand-dim);color:var(--brand-2);
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.card__view{
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding:9px 14px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.card__view:active{background:var(--panel-2)}
@media (hover:hover){.card__view:hover{border-color:var(--brand);color:var(--brand)}}
.card__add{margin-top:14px;padding-inline:12px;font-size:.9rem;gap:7px}

.empty{padding:60px 20px;text-align:center;color:var(--txt-3)}
.empty .btn{margin-top:16px}

/* ══════════ COA STRIP ══════════ */
.coa{
  display:grid;gap:26px;margin-bottom:0;padding:40px 20px;
}
.coa h2{font-size:clamp(1.6rem,5vw,2.3rem);margin-bottom:14px}
.coa__copy p{color:var(--txt-2);margin-bottom:22px;max-width:52ch}
.coa__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.coa__list li{
  padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;gap:4px;
}
.coa__list b{color:var(--brand);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.coa__list span{color:var(--txt-2);font-size:.88rem}

/* ══════════ NEWSLETTER ══════════ */
.signup{border-top:1px solid var(--line);background:var(--bg-2);padding:46px 0}
.signup__inner{display:grid;gap:26px}
.signup h2{font-size:clamp(1.5rem,5vw,2.1rem);margin-bottom:8px}
.signup__sub{color:var(--txt-2)}
.signup__form{display:grid;gap:10px}
.signup__form input,
#offerForm input{
  width:100%;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;transition:border-color .2s;
}
.signup__form input:focus,#offerForm input:focus{border-color:var(--brand)}
.signup__form input::placeholder,#offerForm input::placeholder{color:var(--txt-3)}
.formnote{font-size:.84rem;color:var(--txt-3);min-height:1.2em}
.formnote.is-ok{color:var(--green)}
.formnote.is-err{color:var(--red)}

/* ══════════ FOOTER ══════════ */
.footer{border-top:1px solid var(--line);background:var(--bg)}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:44px 20px}
.footer__brand{grid-column:1/-1}
.footer__brand p{margin-top:14px;color:var(--txt-3);font-size:.88rem;max-width:42ch}
/* h3 nas colunas do footer: hierarquia sem salto (o h4 legado segue estilizado) */
.footer h3,.footer h4{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);margin-bottom:14px;
}
.footer__cols a{
  display:flex;align-items:center;min-height:var(--tap);
  padding:10px 0;color:var(--txt-3);font-size:.9rem;transition:color .2s;
}
@media (hover:hover){.footer__cols a:hover{color:var(--brand)}}
.footer__legal{padding:22px 20px 34px;border-top:1px solid var(--line)}
.footer__legal p{color:var(--txt-3);font-size:.78rem;line-height:1.6}
.footer__legal strong{color:var(--txt-2)}
.footer__copy{margin-top:12px}

/* ══════════ CART ══════════ */
.cart__free{padding:12px 20px;border-bottom:1px solid var(--line);background:var(--bg-2);flex:0 0 auto}
.cart__bar{height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:9px}
/* scaleX em vez de width: transform não dispara layout (o JS seta --pct) */
.cart__bar i{
  display:block;height:100%;width:100%;background:var(--green);border-radius:99px;
  transform:scaleX(var(--pct,0));transform-origin:left;
  transition:transform .35s var(--ease);will-change:transform;
}
.cart__freetxt{font-size:.8rem;color:var(--txt-2)}
.cart__freetxt b{color:var(--green)}

.cart__items{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px}
.cart__empty{padding:50px 0;text-align:center;color:var(--txt-3);font-size:.92rem}

.cart__item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart__thumb{
  flex:0 0 auto;width:60px;height:60px;padding:4px;
  background:#000;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.cart__thumb svg{width:100%;height:100%}
.cart__info{flex:1;min-width:0}
.cart__info h4{font-size:.96rem;margin-bottom:2px}
.cart__info p{color:var(--txt-3);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.cart__qty{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
/* 44px: errar o toque aqui altera a quantidade da compra, então é o
   alvo mais sensível da interface */
.cart__qty button{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  background:var(--bg-2);border:0;cursor:pointer;font-size:1.05rem;line-height:1;
}
.cart__qty button:active{background:var(--line)}
@media (hover:hover){.cart__qty button:hover{background:var(--panel-2);color:var(--brand)}}
.cart__qty span{min-width:36px;text-align:center;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}
.cart__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px}
.cart__line{font-weight:700;font-variant-numeric:tabular-nums}
.cart__rm{
  display:inline-flex;align-items:center;min-height:var(--tap);
  background:none;border:0;padding:10px 2px;cursor:pointer;
  color:var(--txt-3);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (hover:hover){.cart__rm:hover{color:var(--red)}}

.cart__foot{
  flex:0 0 auto;padding:18px 20px 22px;border-top:1px solid var(--line);background:var(--panel);
  padding-bottom:max(22px,env(safe-area-inset-bottom));
}
.cart__row{
  display:flex;justify-content:space-between;padding:4px 0;color:var(--txt-2);font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.cart__row--save b{color:var(--green)}
.cart__row--total{
  margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--txt);font-size:1.05rem;
}
.cart__row--total b{font-size:1.25rem;font-weight:800}
.cart__gift{margin:12px 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--green-dim);color:var(--green);font-size:.8rem;font-weight:600}
.cart__fine{margin-top:10px;text-align:center;color:var(--txt-3);font-size:.76rem}

/* ══════════ MODAIS ══════════ */
/* justify-items centra na horizontal; na VERTICAL o centramento vem do
   margin-block:auto do painel, não de align-items:center.

   Com place-items:center, um painel mais alto que a tela era centrado dentro
   de um container rolável: o topo ia para cima do scrollTop 0 e ficava
   INALCANÇÁVEL, porque scroll negativo não existe. No quick view com foto isso
   custava 116px num Pixel, 132px num iPhone e 187px numa tela de 640px —
   medido no Chrome, e levava embora o próprio botão de fechar.

   margin:auto em grid só sobra quando há espaço livre, então o painel segue
   centrado enquanto couber e encosta no topo quando não couber. */
.modal{
  position:fixed;inset:0;z-index:110;
  display:grid;align-items:start;justify-items:center;padding:18px;
  background:rgba(6,6,7,.8);backdrop-filter:blur(5px);
  overflow-y:auto;overscroll-behavior:contain;animation:fade .2s var(--ease);
}
.modal__panel{
  position:relative;width:100%;max-width:460px;
  margin-block:auto;
  padding:30px 24px 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);animation:pop .3s var(--ease) both;
}
.modal__panel:focus{outline:none}
.modal__panel--wide{max-width:820px;padding:0;overflow:hidden}
.modal__panel--center{text-align:center}
.modal__panel--corners::before,
.modal__panel--corners::after{
  content:"";position:absolute;width:22px;height:22px;border:2px solid var(--brand);
}
.modal__panel--corners::before{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.modal__panel--corners::after{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.modal__x{
  position:absolute;top:8px;right:8px;z-index:3;
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  background:rgba(20,20,22,.8);border:0;border-radius:50%;color:var(--txt-2);cursor:pointer;
}
.modal__x:active{background:var(--line)}
@media (hover:hover){.modal__x:hover{color:var(--txt);background:var(--panel-2)}}
.modal__title{font-size:1.6rem;margin-bottom:12px}
.modal__text{color:var(--txt-2);font-size:.94rem;margin-bottom:20px}
.modal__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;
  color:var(--txt-3);font-size:.76rem;
}

/* Checkout BR: mesma linguagem dos rótulos, sem criar um segundo tema. */
.br-checkout__market{
  display:inline-flex;margin-bottom:14px;padding:7px 10px;border-radius:999px;
  background:var(--wine);color:var(--txt);font-size:.75rem;font-weight:800;
  letter-spacing:.08em
}
.br-checkout__form{display:grid;gap:14px}
.br-checkout__consent{margin-top:2px}
.br-checkout__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.br-checkout__actions .btn{min-width:132px}
@media (max-width:520px){
  .br-checkout__actions{display:grid;grid-template-columns:1fr}
  .br-checkout__actions .btn{width:100%}
}

/* gift popup */
.gift__ico{
  display:grid;place-items:center;width:64px;height:64px;margin:6px auto 18px;
  border-radius:50%;background:var(--green-dim);border:1px solid rgba(37,199,96,.35);color:var(--green);
}
.gift__ico .i{width:30px;height:30px}
.gift__prize{color:var(--green);font-size:1.5rem;font-weight:800;line-height:1.2;margin:6px 0 22px}
.gift__list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;text-align:left}
.gift__list li{
  display:flex;align-items:center;gap:10px;padding:14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt-2);font-size:.88rem;
}
.gift__list li.is-hot{border-color:rgba(212,175,94,.4);background:var(--brand-dim)}
.gift__list b{color:var(--txt)}
/* wrapper de ícone SVG (antes eram emojis: → ⚡ ◍) */
.gift__dot{display:grid;place-items:center;flex:0 0 auto;color:var(--brand)}
.gift__dot .i{width:18px;height:18px}
.gift__fine{color:var(--txt-3);font-size:.82rem;margin-bottom:18px}

/* PDP quick view */
.pdp{display:grid}
.pdp__media{padding:16px;background:#000;border-bottom:1px solid var(--line)}
.pdp__media svg,
.pdp__media img{width:100%;height:auto;display:block;border-radius:8px}

/* Foto no lugar do SVG: a mesma troca de fundo do card, e ela vale em
   QUALQUER largura. Esta regra morava só dentro de @media (min-width:600px),
   então no celular o quick view voltava para o #000 com padding de 16px e a
   foto clara aparecia dentro de uma moldura preta — o defeito do desktop,
   repetido no mobile.

   Os hex são a média medida da primeira e da última linha das 44 fotos de
   img/products. Eles têm de bater com os de .card__media--photo: fundos
   diferentes fariam a foto parecer trocada ao abrir o modal.

   A do Tesamorelin já ficou fora dessa média, quando o topo dela era bordô;
   a imagem foi refeita com fundo claro e hoje entra como as outras. */
.pdp__media--photo{padding:0;background:linear-gradient(#E0DBDE,#D3CCD1)}
.pdp__media--photo picture{display:block}
.pdp__media--photo img{border-radius:0}

/* Aqui NÃO entra teto de altura na foto. Já foi tentado (max-height:46vh +
   object-fit:contain) para "caber na tela", e a medição mostrou que resolvia
   um problema que não existia: o corte relatado no celular vinha do
   centramento do .modal, não da imagem. O teto só encolhia a foto e abria
   37px de gradiente em cada lado (caixa 374×400 com a imagem pintada em
   300×400 num Pixel), enquanto sem ele a caixa é 374×499 e a foto preenche
   por inteiro. O painel rola de todo jeito nas duas versões. */

.pdp__body{padding:24px 22px 26px}
.pdp__name{font-size:1.7rem;margin-bottom:6px}
.pdp__sku{color:var(--txt-3);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.pdp__price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.pdp__price b{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums}
.pdp__price s{color:var(--txt-3);font-variant-numeric:tabular-nums}
.pdp__desc{color:var(--txt-2);font-size:.95rem;margin-bottom:20px}
.pdp__specs{
  list-style:none;margin:0 0 22px;padding:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.pdp__specs li{
  display:flex;justify-content:space-between;gap:16px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:.88rem;
}
.pdp__specs li:last-child{border-bottom:0}
.pdp__specs span{color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;font-weight:700}
.pdp__specs b{font-weight:600}
.pdp__ruo{margin-top:14px;color:var(--txt-3);font-size:.76rem;text-align:center}

/* ══════════ COOKIES ══════════ */
.cookies{
  position:fixed;left:14px;right:14px;z-index:100;
  bottom:max(14px,env(safe-area-inset-bottom));
  padding:18px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);animation:rise .3s var(--ease) both;
}
.cookies__title{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:6px}
.cookies__title .i{color:var(--brand)}
.cookies__text{color:var(--txt-3);font-size:.84rem}
.cookies__text a{color:var(--brand);text-decoration:underline}
.cookies__row{display:flex;gap:10px;margin-top:16px}
.cookies__row .btn{flex:1}

/* ══════════ TOAST ══════════ */
.toast{
  position:fixed;left:50%;z-index:130;transform:translateX(-50%);
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));
  max-width:calc(100vw - 32px);
  padding:13px 20px;border-radius:99px;
  background:var(--txt);color:#111;font-size:.9rem;font-weight:700;text-align:center;
  box-shadow:var(--shadow-md);animation:up .25s var(--ease) both;
}
/* no mobile a cookie bar ocupa a largura toda e colide com o toast centralizado:
   o toast sobe acima dela. --cookies-h é medido no JS; desloca por bottom, não por
   transform, porque o keyframe up já anima transform. Acima de 600px a barra vai
   para o canto direito e não há colisão. */
@media (max-width:599.98px){
  .cookies:not([hidden]) ~ .toast{
    bottom:calc(max(24px,calc(env(safe-area-inset-bottom) + 12px)) + var(--cookies-h,190px));
  }
}

/* ══════════ ANIMAÇÕES ══════════ */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* up: para elementos centralizados via translateX(-50%) (toast) */
@keyframes up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
/* rise: para elementos posicionados por left/right (cookie bar) */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes slideR{from{transform:translateX(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}

  /* o corte global acima só encurta a duração, o que deixaria o marquee
     congelado no fim do ciclo (-50%) e o sheen num ponto arbitrário.
     Aqui as duas faixas voltam ao estado neutro, de propósito. */
  .ticker__track{animation:none!important;transform:none;will-change:auto}
  /* sem rolagem não há o que pausar */
  .ticker__pause{display:none}
  .announce::after{display:none}
  .announce__txt{
    animation:none!important;background:none;
    -webkit-text-fill-color:var(--brand-2);color:var(--brand-2);
  }
}

/* ══════════════════════════════════════════════
   PÁGINAS INTERNAS
   about · resources · coa-library · contact · home
   ══════════════════════════════════════════════ */

/* hero das páginas internas: mesma base do hero da home, mais compacto */
.hero--page{padding:46px 0 40px;border-bottom:1px solid var(--line)}
.hero--page .hero__title{font-size:clamp(2rem,7vw,3.4rem)}

/* selos do hero (ref traced, HPLC, COA…) */
.seals{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.seals li{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  color:var(--txt-2);font-size:.85rem;font-weight:600;
}
.seals .i{width:17px;height:17px;color:var(--brand)}

/* seção genérica de conteúdo */
.section{padding:46px 0;border-top:1px solid var(--line)}
.section--flat{border-top:0}
.section--alt{background:var(--bg-2)}
.section__head{margin-bottom:26px}
.section__title{font-size:clamp(1.5rem,5vw,2.2rem);margin-bottom:10px}
.section__sub{color:var(--txt-2);max-width:62ch}

/* duas colunas em telas largas, empilhado no mobile */
.split{display:grid;gap:26px}

/* prosa longa (about, políticas) */
.prose p{color:var(--txt-2);margin-bottom:14px;max-width:66ch}
.prose p:last-child{margin-bottom:0}

/* blocos numerados (01 The Standard, 02 The Audience…) */
.steps{display:grid;gap:24px}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.step__n{
  color:var(--brand);font-size:1.5rem;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{color:var(--txt-2);font-size:.95rem}

/* lista de princípios com barra lateral */
.stand{
  list-style:none;margin:0;padding:2px 0 2px 16px;
  border-left:2px solid var(--brand);display:grid;gap:9px;
}
.stand li{color:var(--txt-2);font-size:.95rem}

/* cards de conteúdo (pilares, recursos, canais de contato) */
.cards{display:grid;gap:14px}
.pcard{
  display:flex;flex-direction:column;padding:22px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.pcard__ico{
  display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;
  margin-bottom:14px;border-radius:10px;background:var(--brand-dim);color:var(--brand);
}
.pcard h3{font-size:1.05rem;margin-bottom:6px}
.pcard p{color:var(--txt-3);font-size:.9rem;flex:1}
.pcard__link{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);
  margin-top:12px;color:var(--brand);font-size:.88rem;font-weight:600;
}
.pcard__link .i{width:16px;height:16px}
@media (hover:hover){.pcard__link:hover{text-decoration:underline}}

/* caixa de aviso / destaque */
.callout{
  display:flex;gap:12px;padding:16px;border-radius:var(--r);
  background:var(--brand-dim);border:1px solid rgba(212,175,94,.35);
  color:var(--txt-2);font-size:.88rem;
}
.callout .i{color:var(--brand)}
.callout b{color:var(--txt)}
.callout--green{background:var(--green-dim);border-color:rgba(37,199,96,.35)}
.callout--green .i{color:var(--green)}

/* abas/filtros por botão (aria-pressed em vez de checkbox) */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{
  display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 16px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:99px;
  color:var(--txt-2);font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.tab:active{background:var(--panel-2)}
@media (hover:hover){.tab:hover{border-color:#4a4a52;color:var(--txt)}}
/* preenchimento dourado pede texto escuro: com #fff daria 2,08:1 */
.tab[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--ink)}

/* números grandes (documentos publicados, lotes…) */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.stat span{
  display:block;margin-bottom:6px;color:var(--txt-3);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.stat b{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* lista de documentos (COA library) */
.docs{display:grid;gap:10px}
.doc{
  padding:16px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);
  display:grid;gap:12px;
}
.doc__top{display:flex;align-items:center;gap:10px}
.doc__ico{
  display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;
  border-radius:9px;background:var(--brand-dim);color:var(--brand);
}
.doc__name{font-weight:700}
.doc__name span{margin-left:6px;color:var(--txt-3);font-size:.85rem;font-weight:500}
.doc__count{
  margin-left:auto;flex:0 0 auto;color:var(--txt-3);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.doc__meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  padding-top:10px;border-top:1px solid var(--line);
  color:var(--txt-3);font-size:.82rem;
}
.doc__meta div{display:flex;align-items:center;gap:6px}
.doc__meta b{color:var(--txt-2);font-weight:600}
.doc__date{color:var(--green)!important}
.doc__actions{display:flex;flex-wrap:wrap;gap:8px}
.doc__actions .btn{flex:1}

/* FAQ com <details>: abre/fecha sem JS */
.faq{display:grid;gap:10px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  display:flex;align-items:center;gap:12px;
  padding:16px;min-height:var(--tap);cursor:pointer;
  font-size:.98rem;font-weight:600;list-style:none;
}
/* remove o triângulo nativo nos dois motores */
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid var(--txt-3);border-bottom:2px solid var(--txt-3);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary{color:var(--brand)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.faq__body{padding:0 16px 16px;color:var(--txt-2);font-size:.92rem}
.faq__body p{margin-bottom:10px}
.faq__body p:last-child{margin-bottom:0}

/* contato: e-mail em destaque, horários e formulário */
.mailbox{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;min-height:var(--tap);
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--brand);font-weight:700;font-size:.92rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}
.mailbox .i{flex:0 0 auto}
@media (hover:hover){.mailbox:hover{border-color:var(--brand)}}

.panel{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.panel h3{
  margin-bottom:14px;color:var(--txt-3);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.rows{display:grid}
.rows div{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;
}
.rows div:last-child{border-bottom:0}
.rows span{color:var(--txt-3)}
.rows b{font-weight:600}

.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field > label{
  color:var(--txt-3);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;min-height:var(--tap);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;font-size:.95rem;
  transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field select{appearance:none;cursor:pointer;padding-right:38px}
.field__wrap{position:relative;display:flex}
.field__wrap .i{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--txt-3)}

/* link para a documentação dentro do quick view */
.pdp__coa{
  display:inline-flex;align-items:center;min-height:var(--tap);margin-top:8px;
  color:var(--brand);font-size:.85rem;font-weight:600;text-decoration:underline;
}

/* CTA de fechamento das páginas */
.endcta{padding:46px 0;border-top:1px solid var(--line);background:var(--bg-2);text-align:center}
.endcta h2{font-size:clamp(1.5rem,5vw,2.1rem);margin-bottom:10px}
.endcta p{color:var(--txt-2);margin-bottom:22px}
.endcta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ══════════ CONTA (login.html) ══════════ */
.auth{display:grid;justify-items:center}
.auth__card{
  width:100%;max-width:480px;padding:26px 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
}
.auth__head{margin-bottom:20px}
.auth__title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.auth__sub{margin-top:6px;color:var(--txt-2);font-size:.95rem}
.auth__tabs{margin-bottom:20px}
/* as duas abas dividem a largura igualmente: deixa claro que são alternativas
   uma da outra, e não um botão de ação ao lado de outro */
.auth__tabs .tab{flex:1 1 0;justify-content:center}
/* "remember me" e "forgot password" nos extremos da mesma linha */
.auth__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.auth__actions{display:grid;gap:10px;margin-top:18px}

/* mostrar/ocultar senha: sobre o campo, à direita */
.reveal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--txt-3);cursor:pointer;transition:color .2s,background .2s;
}
.reveal:active{background:var(--panel-2)}
/* senha visível é estado, e o dourado o anuncia junto com o aria-pressed */
.reveal[aria-pressed="true"]{color:var(--brand)}
/* O SVG casaria com `.field__wrap .i`, que é absoluto e pointer-events:none.
   Dentro do botão ele volta a ser conteúdo normal: sem isto o ícone sairia
   do lugar e o clique não teria alvo. */
.reveal .i{position:static;transform:none;pointer-events:none}
/* espaço à direita para o botão não cobrir o que foi digitado. A segunda
   regra segue valendo quando o type vira "text" ao revelar a senha. */
.field__wrap input[type=password]{padding-right:52px}
.field__wrap:has(.reveal) input{padding-right:52px}
@media (hover:hover){.reveal:hover{color:var(--txt)}}

/* ══════════ RESPONSIVO ══════════ */
@media (min-width:600px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .trust__cell:nth-child(2n){border-right:1px solid var(--line)}
  .trust__cell{border-bottom:0}
  .trust__cell:last-child{border-right:0}
  .logo__word{display:block}
  .footer__cols{grid-template-columns:repeat(4,1fr)}
  .footer__brand{grid-column:auto}
  .toolbar{justify-content:flex-end}
  .toolbar .btn,.sort{flex:0 0 auto;min-width:190px}
  .pdp{grid-template-columns:1fr 1fr}
  .pdp__media{border-bottom:0;border-right:1px solid var(--line);display:grid;align-content:center}
  /* Aqui a coluna é RETRATO (a altura vem da ficha técnica ao lado) e a foto
     também é 3:4, então ela preenche quase toda a coluna. A sobra que ainda
     aparece é resolvida pela COR — o fundo claro de .pdp__media--photo,
     definido junto do resto do PDP porque vale nas duas larguras.

     NÃO usar object-fit:cover: ele amplia a foto para cobrir a caixa, corta
     as laterais e come o rótulo — troca uma sobra discreta por um produto
     ilegível. Já foi tentado e revertido. */
  .signup__inner{grid-template-columns:1.1fr 1fr;align-items:center}
  .signup__form{grid-template-columns:1fr auto;align-items:start}
  .signup__form .formnote{grid-column:1/-1}
  .coa{grid-template-columns:1fr 1fr;align-items:center;padding-block:60px}
  .cookies{left:auto;right:20px;bottom:max(20px,env(safe-area-inset-bottom));max-width:400px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,1fr)}
  .doc__actions .btn{flex:0 0 auto;min-width:180px}
  .steps{gap:30px}
}

@media (min-width:900px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav{display:flex}
  #navOpen{display:none}
  .hero{padding:86px 0 78px}
  .hero--page{padding:70px 0 60px}
  .catalog{padding-top:44px}
  .coa__list{gap:14px}
  .section{padding:64px 0}
  .split{grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  /* about/contact: coluna de texto mais larga que a lateral */
  .split--wide{grid-template-columns:1.15fr .85fr}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
  .endcta{padding:64px 0}
}

/* ══════════════════════════════════════════════
   CONTA — painel de membro (account.html)

   Sete painéis numa página só, trocados por hash (#orders, #rewards…).
   A sidebar é a mesma em todos, então vive fora dos painéis.
   ══════════════════════════════════════════════ */

.acct{display:grid;gap:20px}

/* ── sidebar ────────────────────────────────── */
.acct__side{
  padding:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);align-self:start
}
.acct__who{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.acct__whoname{font-weight:700;font-size:1.02rem;word-break:break-word}
.acct__whomail{
  margin-top:3px;color:var(--txt-3);font-size:.84rem;word-break:break-all
}

.acct__nav{display:grid;gap:2px;margin-bottom:14px}
.acct__nav a{
  display:flex;align-items:center;gap:10px;
  min-height:var(--tap);padding:8px 12px;border-radius:var(--r-sm);
  color:var(--txt-2);font-size:.94rem;font-weight:600
}
.acct__nav .i{width:18px;height:18px;flex:none;color:var(--txt-3)}
@media (hover:hover){
  .acct__nav a:hover{background:var(--panel-2);color:var(--txt)}
  .acct__nav a:hover .i{color:var(--brand)}
}
/* aria-current carrega o estado; o fundo é só o reforço visual dele */
.acct__nav a[aria-current="page"]{
  background:var(--brand-dim);color:var(--brand-2)
}
.acct__nav a[aria-current="page"] .i{color:var(--brand)}

/* ── cabeçalho de painel ────────────────────── */
.acct__head{margin-bottom:20px}
.acct__title{font-size:clamp(1.4rem,4.5vw,1.9rem);font-weight:800;letter-spacing:-.02em}
.acct__sub{margin-top:6px;color:var(--txt-2);font-size:.96rem;max-width:60ch}

/* ── blocos ─────────────────────────────────── */
.acct__block{margin-top:26px}
.acct__block:first-child{margin-top:0}
.acct__bhead{
  display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:baseline;justify-content:space-between;margin-bottom:14px
}
.acct__bt{font-size:1.06rem;font-weight:700}

/* três métricas: .stats é 2 colunas por padrão (ver bloco de stats acima) */
.stats--3{grid-template-columns:1fr}
.stat small{
  display:block;margin-top:5px;color:var(--txt-3);
  font-size:.76rem;font-weight:500;letter-spacing:0;text-transform:none
}
/* o valor "—" não é número: sem isso o tabular-nums deixa o traço solto */
.stat b.is-none{color:var(--txt-3);font-size:1.5rem}

/* ── quick actions ──────────────────────────── */
.qa{display:grid;gap:12px;list-style:none}
.qa a{
  display:block;height:100%;padding:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)
}
.qa b{display:block;font-size:1rem;margin-bottom:5px}
.qa span{color:var(--txt-2);font-size:.88rem;line-height:1.5}
@media (hover:hover){
  .qa a:hover{border-color:var(--brand);transform:translateY(-2px)}
  .qa a:hover b{color:var(--brand)}
}
.qa a{transition:border-color .18s var(--ease),transform .18s var(--ease)}

/* ── estado vazio dentro do painel ──────────── */
.acct__empty{
  padding:34px 20px;text-align:center;
  background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r)
}
.acct__empty p{color:var(--txt-2);margin-bottom:16px}
.acct__empty strong{color:var(--txt);display:block;margin-bottom:6px}

/* ── lista chave/valor (perfil, endereços) ──── */
.kv{display:grid;gap:12px;list-style:none}
.kv > li{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)
}
.kv > li:last-child{padding-bottom:0;border-bottom:0}
.kv dt,.kv__k{
  color:var(--txt-3);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase
}
.kv dd,.kv__v{margin:0;font-size:.95rem;font-weight:600;word-break:break-word}
.kv__v.is-none{color:var(--txt-3);font-weight:500}

/* ── pedidos ────────────────────────────────── */
.ord{display:grid;gap:12px;list-style:none}
.ord__item{
  padding:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r)
}
.ord__top{
  display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;justify-content:space-between;margin-bottom:12px
}
.ord__no{font-weight:700;font-variant-numeric:tabular-nums}
.ord__date{color:var(--txt-3);font-size:.84rem}
.ord__lines{
  display:grid;gap:7px;list-style:none;
  padding-top:12px;margin-top:12px;border-top:1px solid var(--line)
}
.ord__line{
  display:flex;flex-wrap:wrap;gap:4px 12px;
  justify-content:space-between;font-size:.9rem
}
.ord__line span{color:var(--txt-2)}
/* ref e lote em mono: é a convenção de dado analítico no resto do site */
.ord__ref{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;color:var(--txt-3)
}
.ord__tot{
  display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;
  padding-top:12px;margin-top:12px;border-top:1px solid var(--line);
  font-weight:700;font-variant-numeric:tabular-nums
}

/* status do pedido. O texto carrega o estado; a cor só reforça, porque cor
   sozinha não deve ser o único portador de significado. */
.ostat{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt-2)
}
.ostat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ostat--delivered{background:var(--green-dim);border-color:rgba(37,199,96,.35);color:var(--green)}
.ostat--shipped,.ostat--processing,.ostat--paid{
  background:var(--brand-dim);border-color:var(--brand);color:var(--brand-2)
}
.ostat--cancelled,.ostat--refunded{color:var(--red);border-color:rgba(255,107,97,.35)}

/* ── fila de suporte ────────────────────────────
   Mensagem aberta é trabalho a fazer, então usa o dourado de ação (9,51:1 sobre
   --bg); tratada é arquivo, e fica no neutro. A hierarquia estava invertida: o
   selo de tratada saltava em verde e o de aberta ficava no cinza apagado.

   Classes próprias em vez de reusar o selo de pedido entregue: fila de suporte
   e fluxo de venda são coisas diferentes, e compartilhar a classe faria uma
   mudança na paleta do pedido mexer no suporte sem motivo. */
.ostat--open{background:var(--brand-dim);border-color:var(--brand);color:var(--brand-2)}
.ostat--handled{background:var(--panel-2);border-color:var(--line-2);color:var(--txt-3)}

/* ── rewards ────────────────────────────────── */
.tier__bar{
  height:8px;border-radius:999px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);margin:10px 0 8px
}
.tier__fill{height:100%;background:var(--brand);border-radius:999px}
.tier__ends{
  display:flex;justify-content:space-between;
  color:var(--txt-3);font-size:.74rem;font-weight:700;letter-spacing:.1em
}
.tier__note{margin-top:10px;color:var(--txt-2);font-size:.9rem}
/* botão dentro de .panel: separa do texto sem inline style */
.acct__cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
/* "(optional)" dentro de <label>: o label é caixa alta com tracking, e o
   parêntese precisa voltar ao normal para não virar "( O P T I O N A L )" */
.lbl__opt{text-transform:none;letter-spacing:0}

.tbl__wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{
  padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap
}
.tbl th{
  color:var(--txt-3);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase
}
.tbl td{font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl tr[aria-current="true"] td{background:var(--brand-dim);color:var(--brand-2);font-weight:700}

/* ── responsivo ─────────────────────────────────
   Fica aqui, e não nos blocos de media query do topo do arquivo, para o painel
   inteiro ser legível de uma vez: são regras que só existem para .acct. */
@media (min-width:600px){
  .stats--3{grid-template-columns:repeat(3,1fr)}
  .qa{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:900px){
  /* a sidebar entra como coluna fixa; abaixo disso ela empilha acima do painel */
  .acct{grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}

  /* max-height junto com sticky, e não sticky sozinho: a sidebar do admin passa
     de 520px (8 itens de nav a 44px, 3 linhas de identidade, 2 botões). Em
     laptop de 768px de altura sobram ~650px úteis descontando o header sticky
     de 64px e o chrome do navegador: presa no topo, o fim dela nunca aparecia,
     e "Team" e "Sign Out" ficavam inalcançáveis por rolagem.

     96px é o top; o dobro desconta também o respiro de baixo. E contain impede
     que a rolagem siga na página ao chegar ao fim da sidebar — sem isso a tela
     inteira pula sob o cursor. */
  .acct__side{
    position:sticky;top:96px;
    max-height:calc(100vh - 192px);overflow-y:auto;
    overscroll-behavior:contain
  }
}

/* ══════════════════════════════════════════════
   ADMIN — painel da equipe (admin.html)

   Reusa a anatomia da conta (.acct, .stats, .tbl, .kv, .ord, .ostat): são as
   mesmas oito seções trocadas por hash, com a mesma sidebar. Aqui ficam só as
   peças que a conta não tem, porque a conta não edita nada.
   ══════════════════════════════════════════════ */

/* ── linha editável ─────────────────────────────
   Cada produto, categoria e lote é uma linha com campos e um botão de salvar.
   Em telas estreitas empilha; a partir de 760px vira faixa horizontal. */
.adm__row{
  padding:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);display:grid;gap:12px
}
.adm__rows{display:grid;gap:12px;list-style:none}
.adm__rtop{
  display:flex;flex-wrap:wrap;gap:6px 12px;
  align-items:baseline;justify-content:space-between
}
.adm__rname{font-weight:700;font-size:1rem;word-break:break-word}
/* ref e sku são código: monoespaçado separa do nome comercial */
.adm__rref{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--txt-3)
}
.adm__fields{display:grid;gap:12px}
/* ── alinhamento das células ─────────────────────
   Era align-items:end, isto é, pelo FUNDO, para manter os campos alinhados
   quando um rótulo quebra em duas linhas. A premissa era que o último filho da
   célula é sempre o campo — e a célula do preço tem um terceiro filho, o eco
   "saves as N cents". Alinhando pelo fundo, o eco empurrava rótulo e campo do
   preço para cima: "LIST PRICE (USD)" saía de linha com "CATEGORY" em toda
   linha de produto (medido no Chrome: 27px em 1280px, 106px em 900px).

   O defeito não era só do eco. Em Lots, sem eco nenhum, os rótulos divergiam
   5px porque os campos têm alturas diferentes: select 44px, input de texto 47px,
   input de data 49px. Alinhar pelo fundo propaga qualquer diferença de altura
   para o topo, e o topo é onde o olho procura o rótulo. */
@media (min-width:760px){
  .adm__fields{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:start}
}

/* campo curto de formulário dentro da linha */
.adm__f{display:grid;gap:5px}
.adm__f label{
  color:var(--txt-3);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase
}
.adm__f input,.adm__f select,.adm__f textarea{
  width:100%;padding:10px 12px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;transition:border-color .2s
}
.adm__f input:focus,.adm__f select:focus,.adm__f textarea:focus{border-color:var(--brand)}
/* o admin tinha placeholder sem cor declarada: caía no default do user agent,
   fora do controle de contraste que .searchbar, .signup__form e .field já
   respeitam */
.adm__f input::placeholder,.adm__f textarea::placeholder{color:var(--txt-3)}
.adm__f input[aria-invalid="true"]{border-color:var(--red)}
.adm__f textarea{min-height:76px;resize:vertical}

/* ── caixa de marcar ────────────────────────────
   Três por linha de produto (In stock, Active, Price on request). Sem esta
   regra elas caem no seletor genérico acima e recebem width:100% + padding: o
   controle nativo esticado pela coluna inteira, com o quadrado real de ~13px
   perdido dentro dela.

   O desenho é o do age gate (.check__box, linhas 218-229): appearance:none e o
   check em SVG data-URI, para não depender do widget do sistema.

   O alvo de 44px vem do CONTAINER, não do quadrado de 22px: o label aponta
   para o input, então a faixa inteira alterna o estado. */
.adm__f--chk{
  grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:10px;min-height:var(--tap)
}
/* rótulo de caixa é frase, não etiqueta: caixa alta com letter-spacing serve a
   "LIST PRICE (USD)", não a "In stock" ao lado de um quadrado */
.adm__f--chk label{
  text-transform:none;letter-spacing:0;
  font-size:.86rem;color:var(--txt-2);cursor:pointer
}
.adm__f input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;padding:0;flex:0 0 auto;
  border:1.5px solid var(--line-2);border-radius:6px;background:var(--panel);
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)
}
.adm__f input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
/* o check é o mesmo desenho e a mesma tinta (--ink) do gate */
.adm__f input[type=checkbox]:checked::after{
  content:"";display:block;height:100%;
  background:no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314100F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E")
}
.adm__f input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}

/* ── espelho do que vai ser gravado ─────────────
   A tela fala dólar e o banco guarda centavos (integer). Este eco mostra o
   inteiro que sairá no PATCH, porque errar por fator de 100 não gera erro:
   grava um valor plausível e errado, que é o pior defeito numa loja. */
.adm__echo{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.76rem;color:var(--txt-3)
}
.adm__echo b{color:var(--brand-2)}

/* ── selo de rascunho ───────────────────────────
   Lote e COA não publicados são invisíveis ao público. Sem marca na tela, a
   equipe não distingue o que já está no ar do que ainda não está. */
.adm__draft{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel-2);border:1px dashed var(--line-2);color:var(--txt-3)
}
.adm__live{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--green-dim);border:1px solid rgba(37,199,96,.35);color:var(--green)
}

/* texto da mensagem de suporte: vem de visitante não autenticado, então pode
   ser longo e sem espaço nenhum */
.adm__msg{
  margin:12px 0;padding:12px;background:var(--bg-2);
  border-left:2px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--txt-2);font-size:.92rem;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere
}

/* aviso de escrita bem-sucedida ou recusada, por linha */
.adm__note{font-size:.8rem;color:var(--txt-3);min-height:1.2em}
.adm__note.is-ok{color:var(--green)}
.adm__note.is-err{color:var(--red)}

/* ── sidebar em tela estreita ───────────────────
   Abaixo de 900px a sidebar empilha ACIMA do painel. No admin são 8 itens de
   nav mais identidade e dois botões: ~500px de bloco antes de qualquer dado, e
   toda troca de seção exige rolar por eles.

   A nav vira faixa horizontal rolável. Mantém os 8 destinos alcançáveis sem
   colapso em <details>, que exigiria JS e um estado novo para lembrar se está
   aberto. Os ícones ficam: são reconhecimento, e o custo é só mais rolagem. */
@media (max-width:899px){
  .acct__nav{
    display:flex;gap:6px;
    overflow-x:auto;overscroll-behavior-x:contain;
    /* o respiro de baixo evita que o overflow corte o anel de foco */
    padding-bottom:6px;scrollbar-width:thin
  }
  .acct__nav a{flex:0 0 auto;white-space:nowrap}
}

/* ── linha com alteração não salva ──────────────
   mostrar() reescreve o innerHTML na troca de painel, então digitar e navegar
   perde o trabalho. A borda dourada avisa onde está pendente; o texto
   "Unsaved changes." na nota é o que carrega o significado, porque cor sozinha
   não pode ser o único portador — e a nota tem role="status", então a pendência
   também é anunciada.

   outline no formulário em vez de border: os <form> de criação vivem dentro de
   .panel, que já tem borda, e uma segunda borda deslocaria o conteúdo em 1px no
   momento em que a pessoa começa a digitar. */
.adm__row.is-dirty,.ord__item.is-dirty{border-color:var(--brand)}
form.is-dirty{outline:1px solid var(--brand);outline-offset:8px;border-radius:var(--r-sm)}
.adm__note.is-dirty{color:var(--brand-2)}

/* ── painel interno: identidade própria ─────────
   Os dois painéis eram indistinguíveis: mesmo hero--page, mesma paleta, mesma
   sidebar, "Dashboard" e "Orders" nas mesmas posições com os mesmos ícones. A
   única diferença era o eyebrow e a linha de papel em 0,84rem cinza. Com as
   duas abas abertas, editar no painel errado era fácil — e este escreve no
   banco de produção.

   O vinho entra como SUPERFÍCIE, nunca como texto: o :root registra 2,14:1 no
   dark, e medido dá 2,15:1 sobre --bg. Por que o tom PROFUNDO e não o médio: o
   texto do hero continua o mesmo, e sobre --wine-deep o eyebrow em --brand dá
   5,65:1 e o subtítulo em --txt-2 dá 4,58:1, os dois AA. Sobre --wine cru
   cairiam para 4,44 e 3,60, abaixo de AA para texto normal — a faixa mais
   bonita teria custado legibilidade em texto que já estava lá. */
.is-admin .hero--page{background:var(--wine-deep)}

/* Faixa no topo da página, acima do header. É cue de chrome: some ao rolar,
   por isso não carrega significado sozinha — quem informa em texto é o selo da
   sidebar, que acompanha a rolagem. */
.is-admin{border-top:4px solid var(--wine-lift)}

/* Selo de contexto da sidebar. Texto claro POR CIMA do vinho (8,40:1), nunca
   vinho como texto. Fica antes da identidade porque onde se está pesa mais que
   quem está logado. */
.acct__scope{
  margin-bottom:14px;padding:8px 12px;
  background:var(--wine);color:var(--txt);
  border-radius:var(--r-sm);
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}

/* ── busca por painel ───────────────────────────
   O catálogo carrega até 300 produtos, cada um com oito controles: achar um
   item era rolagem ou Ctrl+F. O filtro é client-side, sobre o que já está em
   memória, e por isso o aviso de truncamento continua na tela — a busca não
   alcança o que não foi carregado. */
.adm__find{display:grid;gap:6px;max-width:420px}
.adm__find label{
  color:var(--txt-3);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase
}
.adm__find input{
  width:100%;padding:11px 14px;min-height:var(--tap);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;transition:border-color .2s
}
.adm__find input:focus{border-color:var(--brand)}
.adm__find input::placeholder{color:var(--txt-3)}
.adm__findnote{color:var(--txt-3);font-size:.76rem}

/* Administração regional: duas ofertas lado a lado, saldos em leitura. */
.market-admin{display:grid;gap:16px}
.market-admin__grid,.market-offers{display:grid;gap:14px}
.market-admin__market,.market-offer{
  margin:0;padding:16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2)
}
.market-admin__market legend,.market-offer legend{padding:0 8px;color:var(--brand);font-weight:800;letter-spacing:.06em}
.market-admin__market{display:grid;gap:12px}
.market-product{display:grid;gap:10px;padding-block:16px;border-top:1px solid var(--line)}
.market-offer__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.market-offer__checks{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}
.market-stock{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.market-stock div{padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);text-align:center}
.market-stock dt{color:var(--txt-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.market-stock dd{margin:3px 0 0;font-weight:800;font-variant-numeric:tabular-nums}
.market-stock-adjust{display:grid;grid-template-columns:120px minmax(180px,1fr) auto;align-items:end;gap:10px;margin-top:12px}
@media (min-width:900px){.market-admin__grid,.market-offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.market-offer__fields,.market-stock-adjust{grid-template-columns:1fr}.market-stock{grid-template-columns:1fr}}