/* ═══════════════════════════════════════════════════════════════════
   W18k Store — folha canonica da loja (storefront wholesale).

   Referencia: screenshot da store do Paulo (14/08/2026). A store segue o
   layout dele, nao o do HP. Ela NAO e o Office: vive fora do SPA, junto
   dos portais, e por isso tem paleta propria (creme + branco + ouro) —
   como wholesale/ e consumer/. O ouro, o ink e o raio 16 sao os mesmos
   valores do sistema para as duas telas nao brigarem.
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: only light;

  --gold:       #D3BA8A;
  --gold-deep:  #8A7444;
  --gold-light: #D3BA8A;   /* hover do secundario (11.101) */
  --gold-soft:  #F5EFDD;
  --gold-faint: #FBF8F1;
  --gold-mist:  #F9F5EA;   /* pastilha em massa — meio tom (13/09) */

  --ink:   #17181A;
  --ink-2: #5F615E;
  --ink-3: #8B8D89;

  --paper:  #FFFFFF;
  /* barra do topo — mesmo valor aprovado do Office (css/tokens.css) */
  --chrome: #D3BA8A;
  /* A LOJA DO CLIENTE E BRANCA COM FONTE DOURADA (Paulo 15/08/2026:
     "coloca dashboard do cliente branca com fontes douradas, um pouco
     diferente da nossa"). O fundo dourado claro --page #FAF6EC ficou SO no
     Office (staff). Aqui o fundo e branco e quem carrega o ouro e a
     tipografia: titulo de painel, rotulo e numero em --gold-deep, que e o
     tom com contraste sobre branco (o --gold puro clareia demais). Texto
     corrido e celula de tabela continuam em ink — legibilidade primeiro. */
  --page:   #FFFFFF;
  --line:   #ECE7DB;
  --line-2: #F2F0EA;

  --rose:      #B4485C;  /* chip Featured — transcrito do screenshot */
  --rose-soft: #FBEEF1;

  --green:      #006039;
  --green-soft: #EAF2EC;
  --red:        #C0492B;
  --red-soft:   #FAEEEB;
  --amber:      #8A6412;
  --amber-soft: #FCF3DC;
  /* azul so como fundo de botao (regra do sistema) — botao Call do radar */
  --navy:      #102870;
  --navy-soft: #E8EDF7;

  --wrap:   1200px;
  --radius: 16px;
  --shadow: 0 8px 28px rgba(0,0,0,.05);

  /* TIPOGRAFIA (Paulo 07/09/2026): a mesma pilha SF Pro do Office —
     Display nos titulos, Text no corpo, Inter de reserva fora da Apple. */
  --display: -apple-system, SF Pro Display, Inter, system-ui, sans-serif;
  --font:    -apple-system,SF Pro Text,Inter,system-ui,sans-serif;
}

*{ box-sizing:border-box }
html,body{ margin:0 }

/* ARMADILHA CONHECIDA (regra 34): qualquer `display:` numa classe VENCE o
   atributo `hidden`, e o elemento continua na tela. Foi o que fez o
   formulario de novo cliente aparecer EMBAIXO da lista em vez de trocar de
   pagina (Paulo 15/08/2026). Esta regra fecha isso para a folha inteira. */
[hidden]{ display:none !important }
body{
  background:var(--page); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer }

.st-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* ── chrome ─────────────────────────────────────────────────────────
   Topo IGUAL ao do Office (Paulo 15/08/2026): barra dourada --chrome,
   fonte branca, duas linhas — identidade + acoes em cima, trilho embaixo,
   com a aba ativa sublinhada em branco. Os valores (#D3BA8A, 12px 24px,
   sublinhado de 3px) sao os mesmos de css/base.css: mudou em base.css,
   muda aqui.
   ────────────────────────────────────────────────────────────────── */
/* A cor da barra e a fonte dela vem de --chrome / --chrome-ink, que o
   lojista pode trocar (store branding). Barra clara vira fonte escura
   sozinha — o calculo esta em applyBranding(). */
/* STICKY ZERO tambem na loja (lei de 31/08 + LEI-MAE 13/09): o topo nao
   desce com a tela, como no Office */
.st-head{ background:var(--chrome); color:var(--chrome-ink,#fff); position:relative; z-index:40 }
/* Tres colunas com as laterais IGUAIS (minmax(0,1fr)): so assim a busca
   fica no centro exato da barra, mesmo com marca e nome de larguras
   diferentes. Com flex, o lado das acoes empurrava a busca para a
   esquerda (Paulo 15/08/2026: "centralizar a barra search"). */
.st-headrow{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
             align-items:center; gap:24px; padding:12px 24px; max-width:var(--wrap);
             margin:0 auto }
/* MARCA a esquerda, NOME a direita — uma vez cada (Paulo 15/08/2026).
   Sem arquivo de logo, a marca e o monograma; o PNG do W18k so aparece
   para visitante sem conta. */
.st-logo{ display:flex; align-items:center; gap:12px; min-width:0 }
.st-logo img{ height:26px; width:auto; max-width:150px; object-fit:contain }
.st-mono{ display:grid; place-items:center; width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,.22); font-family:var(--display); font-size:13px;
  font-weight:600; letter-spacing:.02em;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }
.st-footbrand .st-logoword{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep);
  display:inline-block; margin-bottom:10px }
.st-logoword{ font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.2px;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff);
  white-space:nowrap }

/* o nome da loja, uma vez so, no fim da linha */
.st-mename{ font-size:14px; font-weight:600; white-space:nowrap; margin-left:4px;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }

.st-search{ width:420px; max-width:100%; position:relative; display:flex }
.st-search input{
  width:100%; height:34px; padding:0 14px 0 38px;
  background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.5);
  border-radius:999px; font:inherit; font-size:13px; color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
.st-search input::placeholder{ color:var(--ink-3) }
.st-search input:focus{ outline:none; border-color:#fff; background:#fff }
.st-search .st-mag{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
                    width:14px; height:14px; color:var(--ink-3); pointer-events:none }
/* O APP DO LOJISTA (lei 11.302): o leitor da etiqueta mora DENTRO da busca, na
   ponta direita (a lupa na esquerda) — micro-controle como a lupa; so no app */
.st-appscan{ display:none }
html.is-app .st-search input{ padding-right:42px }
html.is-app .st-appscan{ display:inline-flex; align-items:center; justify-content:center; position:absolute; right:3px; top:50%;
  transform:translateY(-50%); width:28px; height:28px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--gold); color:var(--ink); -webkit-text-fill-color:var(--ink) }

.st-headacts{ display:flex; align-items:center; justify-content:flex-end; gap:18px;
              font-size:12.5px; font-weight:600; min-width:0 }
.st-headacts a{ display:inline-flex; align-items:center; gap:6px; color:var(--chrome-ink,#fff);
                -webkit-text-fill-color:var(--chrome-ink,#fff) }
.st-headacts a:hover{ opacity:.82 }
.st-count{ min-width:17px; height:17px; padding:0 5px; border-radius:999px;
           background:rgba(128,128,128,.28); color:var(--chrome-ink,#fff);
           -webkit-text-fill-color:var(--chrome-ink,#fff);
           font-size:10.5px; font-weight:600; display:inline-flex;
           align-items:center; justify-content:center }

.st-nav{ background:var(--chrome) }
.st-navrow{ display:flex; gap:2px; align-items:center; padding:0 24px; max-width:var(--wrap);
            margin:0 auto; flex-wrap:nowrap; overflow-x:auto }
.st-navrow a, .st-navrow span{ display:block; padding:12px 14px; font-size:13.5px; font-weight:600;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff);
  border-bottom:3px solid transparent; white-space:nowrap }
.st-navrow a:hover{ background:rgba(128,128,128,.16) }
.st-navrow a.is-dragging{ opacity:.4 }
.st-navrow a.on{ border-bottom-color:currentColor; background:rgba(128,128,128,.2) }
/* item sem tela ainda: renderizado e inerte, nunca com destino inventado */
.st-navrow span{ opacity:.62; cursor:default }

/* menu da conta */
.st-acct{ position:relative }
.st-acctmenu{ position:absolute; right:0; top:30px; width:250px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:14px 16px; font-weight:400; font-size:13px; display:none }
.st-acctmenu.open{ display:block }
.st-acctmenu .co{ font-weight:600; font-size:14px }
.st-acctmenu .li{ color:var(--ink-2); font-size:12.5px; margin-top:2px }
.st-acctmenu .grp{ display:inline-block; margin-top:10px; padding:3px 9px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-deep); font-size:11px; font-weight:600 }
/* Sign out e botao de acao: secundario da regua (11.101), nunca papel */
.st-acctmenu button{ margin-top:14px; width:100%; height:34px; border-radius:8px;
  border:1px solid var(--gold); background:var(--gold-soft); font-size:12.5px; font-weight:600;
  color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-acctmenu button:hover{ background:var(--gold-light,#D3BA8A); border-color:var(--gold) }
.st-acctmenu .st-btn-gold{ border:0 }

/* ── hero ───────────────────────────────────────────────────────── */
.st-hero{ position:relative; background:linear-gradient(90deg,#F3EEE4 0%,#F6F2E9 55%,#EFE9DC 100%);
          overflow:hidden }
.st-herorow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
             align-items:center; min-height:430px }
.st-herotx{ padding:64px 0 }
.st-kick{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
          color:var(--gold-deep) }
.st-hero h1{ font-family:var(--display); font-size:clamp(30px,3.6vw,44px); font-weight:600;
             line-height:1.14; letter-spacing:-.5px; margin:16px 0 0; max-width:14ch;
             color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-hero p{ margin:18px 0 0; max-width:46ch; font-size:13.5px; line-height:1.72; color:var(--ink-2) }
.st-heroacts{ display:flex; gap:14px; align-items:center; margin-top:26px; flex-wrap:wrap }
.st-heroimg{ position:absolute; right:0; top:0; bottom:0; width:52%;
             -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
             mask-image:linear-gradient(90deg,transparent 0,#000 22%) }
.st-heroimg img{ width:100%; height:100%; object-fit:cover; object-position:52% 50% }
@media(max-width:900px){
  .st-herorow{ grid-template-columns:1fr; min-height:0 }
  .st-heroimg{ position:relative; width:100%; height:230px; margin-bottom:0;
               -webkit-mask-image:none; mask-image:none }
  .st-herotx{ padding:44px 0 34px }
}

/* ── botoes ─────────────────────────────────────────────────────── */
/* LEI 11.85 TAMBEM NA LOJA (Paulo 13/09/2026: "no sistema do cliente deve
   seguir a mesma regra, sem botoes brancos la tambem"): o secundario e o
   dourado leve com moldura dourada, nunca papel; destrutivo = vermelho
   leve (.st-btn-off). O dourado cheio segue o unico primario. */
.st-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 20px; border-radius:8px; border:1px solid var(--gold);
  background:var(--gold-soft); font-size:12.5px; font-weight:600; color:var(--ink);
  -webkit-text-fill-color:var(--ink) }
.st-btn:hover{ background:var(--gold-light,#D3BA8A); border-color:var(--gold) }
.st-btn-gold{ background:var(--gold); border-color:var(--gold);
  color:#fff; -webkit-text-fill-color:#fff }
.st-btn-gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep) }
/* ghost tambem nao e branco: e o secundario sem moldura */
.st-btn-ghost{ background:var(--gold-soft); border-color:var(--gold-soft) }
.st-btn-lg{ height:42px; padding:0 24px; font-size:13px }
/* o CORACAO do favorito (14/09): botao quadrado, contorno; salvo = cheio de ouro */
.st-btn-heart{ width:42px; padding:0; color:var(--ink-2) }
.st-btn-heart svg{ transition:fill .15s }
.st-btn-heart.on{ color:var(--gold-deep); border-color:var(--gold) }
.st-btn-heart.on svg{ fill:var(--gold) }

/* ── painel ─────────────────────────────────────────────────────── */
/* o pe da pagina tinha 60px de padding + 34 do painel = 94px de vazio
   antes do rodape; 28+18 fecha em 46 e a pagina para de flutuar */
.st-main{ padding:24px 0 28px }
.st-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
           box-shadow:var(--shadow); padding:22px 24px 26px; margin-bottom:18px }
.st-phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
           margin-bottom:18px }
.st-phead h2{ font-family:var(--display); font-size:20px; font-weight:600; margin:0;
              letter-spacing:-.2px; color:var(--gold-deep);
              -webkit-text-fill-color:var(--gold-deep) }
.st-psub{ margin:5px 0 0; font-size:12.5px; color:var(--ink-2) }
.st-plink{ font-size:12.5px; font-weight:600; color:var(--gold-deep); white-space:nowrap }
.st-plink:hover{ text-decoration:underline }
.st-panel.center{ text-align:center }
.st-panel.center .st-phead{ display:block }

/* ── card de produto ────────────────────────────────────────────── */
.st-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
@media(max-width:1000px){ .st-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px){ .st-grid{ grid-template-columns:1fr } }

.st-card{ display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden;
          background:var(--paper); transition:border-color .15s, box-shadow .15s }
.st-card:hover{ border-color:var(--gold); box-shadow:0 6px 20px rgba(0,0,0,.06) }
.st-cardimg{ position:relative; aspect-ratio:1/1; background:var(--gold-faint);
             display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line-2) }
.st-cardimg svg{ width:74px; height:74px; color:#DCD2BA }
.st-cardimg img{ width:100%; height:100%; object-fit:cover }
.st-cardimg img.st-cardph{ position:absolute; inset:0; object-fit:contain; background:#fff }
.st-cardimg .st-badge{ z-index:1 }
/* NEW · BEST SELLERS · ALL no lugar do titulo "All pieces" (Paulo 28/09/2026) */
.st-scope{ display:inline-flex; gap:8px; flex-wrap:wrap }
.st-scope a{ display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:999px; border:1px solid var(--gold);
  background:var(--gold-faint); color:var(--ink); -webkit-text-fill-color:var(--ink); font-size:14px; font-weight:600; text-decoration:none }
.st-scope a.on{ background:var(--gold); border-color:var(--gold) }
.st-badge{ position:absolute; left:10px; top:10px; padding:4px 9px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-deep); font-size:10.5px; font-weight:600 }
.st-badge.out{ background:#F3F2EF; color:var(--ink-2) }
/* CORACAO E CARRINHO EMBAIXO DA FOTO (Paulo 01/10/2026): fileira entre a foto e
   o corpo, os dois na altura do botao da loja (36px), secundario dourado leve;
   o coracao e quadrado e enche de ouro quando salvo (o molde do st-btn-heart
   da pagina da peca); o carrinho toma o resto da linha. O .st-fav absoluto no
   canto da foto morreu. */
/* MENORES E QUATRO (Paulo 01/10/2026, 3a rodada: "quero eles menores. Eu quero um
   quarto botao tambem, com uma setinha apontando para a direita, que seria ver os
   detalhes desse produto"): 28px (32 no celular), icone 15, a seta no fim. */
.st-cardacts{ display:flex; gap:6px; padding:8px 13px 0 }
/* quatro botoes de icone, iguais, dividindo a linha — o cartao mede ~210px e o
   rotulo "Add to cart" nao cabe sem cortar; o nome do gesto vai no title */
.st-cardbtn{ display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0; border-radius:7px; border:1px solid var(--gold);
  background:var(--gold-soft); color:var(--ink); -webkit-text-fill-color:var(--ink);
  cursor:pointer; flex:1 1 0; min-width:0 }
.st-cardbtn:hover{ background:var(--gold-light,#D3BA8A) }
.st-cardbtn svg, .st-cardbtn .st-hico{ display:block; width:15px; height:15px; flex:none }
.st-cardfav, .st-cardview{ color:var(--ink-2) }
/* o share e VERDE DA CASA (Paulo 01/10/2026: o botao do WhatsApp segue o nosso verde, nunca o da marca WhatsApp; emenda a 5.5 de 08/09) */
.st-cardwa{ background:var(--green); border-color:var(--green); color:#fff; -webkit-text-fill-color:#fff }
.st-cardwa:hover{ background:#004D2E; border-color:#004D2E }
.st-cardwa svg{ width:15px; height:15px }
/* o campo Tags e a mesma caixa dos dropdowns */
.st-ftag{ appearance:none; -webkit-appearance:none }
.st-cardfav svg{ transition:fill .15s }
.st-cardfav.on{ color:var(--gold-deep) }
.st-cardfav.on svg{ fill:var(--gold) }
.st-cardbtn:disabled{ opacity:.5; cursor:default }
.st-cardbtn.is-busy{ opacity:.7; cursor:progress }
@media(max-width:560px){ .st-cardbtn{ height:32px } }
/* NOTIFY ME WHEN BACK (Paulo 11/10/2026; pacote 849): o unico botao com texto no cartao — verde da casa (o mesmo do
   WhatsApp), toma o lugar do carrinho e da seta; pedido = gold-soft com borda ouro, desligado */
.st-cardnotify{ flex:2 1 0; background:var(--green); border-color:var(--green); color:#fff; -webkit-text-fill-color:#fff;
  font-size:11.5px; font-weight:600; white-space:nowrap; padding:0 8px }
.st-cardnotify:hover{ background:#004D2E; border-color:#004D2E }
.st-cardnotify.on, .st-cardnotify.on:disabled{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); opacity:1 }
/* ORDERED BY N STORES (pacote 849): selo pequeno no corpo do cartao, so logado */
.st-ordby{ display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:var(--gold-soft); color:var(--gold-deep); font-size:10.5px; font-weight:600 }

.st-cardbody{ padding:12px 13px 14px }
.st-sku{ font-size:11px; color:var(--ink-3); letter-spacing:.02em }
.st-name{ font-size:13px; font-weight:600; line-height:1.38; margin:5px 0 9px;
          display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* PRECO ALINHADO ENTRE OS CARTOES (Paulo 30/09/2026: "os precos devem aparecer
   alinhados mesmo que a descricao seja mais curta ou longa"): o nome da grade
   reserva sempre as duas linhas que o clamp permite. */
.st-card .st-name{ min-height:calc(2em * 1.38) }
.st-retail{ font-size:11.5px; color:var(--ink-3) }
.st-whole{ font-size:13.5px; font-weight:600; color:var(--gold-deep); margin-top:3px }
.st-gate{ font-size:11.5px; font-weight:600; color:var(--gold-deep); margin-top:4px }
.st-gate span{ display:block; font-weight:400; color:var(--ink-3); font-size:11px; margin-top:2px }

/* ── featured ───────────────────────────────────────────────────── */
.st-feat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media(max-width:1000px){ .st-feat{ grid-template-columns:1fr } }
.st-featcard{ display:flex; gap:14px; border:1px solid var(--line); border-radius:12px;
              padding:14px; background:var(--paper) }
.st-featcard:hover{ border-color:var(--gold) }
.st-featimg{ width:74px; height:88px; flex:0 0 74px; border-radius:8px; background:var(--gold-faint);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center }
.st-featimg svg{ width:34px; height:34px; color:#DCD2BA }
.st-chip{ display:inline-block; padding:3px 9px; border-radius:999px; background:var(--rose-soft);
  color:var(--rose); font-size:10.5px; font-weight:600 }
.st-featname{ font-size:13px; font-weight:600; line-height:1.35; margin:8px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.st-featdesc{ font-size:11.5px; color:var(--ink-3); line-height:1.45; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.st-featlink{ display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:var(--gold-deep) }
.st-featlink:hover{ text-decoration:underline }

/* ── categorias ─────────────────────────────────────────────────── */
.st-cats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:20px }
@media(max-width:1000px){ .st-cats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px){ .st-cats{ grid-template-columns:1fr } }
.st-cat{ border:1px solid var(--line); border-radius:12px; padding:18px 12px 16px; text-align:center;
         background:var(--paper); transition:border-color .15s }
.st-cat:hover{ border-color:var(--gold) }
.st-caticon{ width:60px; height:60px; margin:0 auto 10px; border-radius:999px;
  background:var(--gold-faint); display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep) }   /* 02/10/2026 (Paulo): "os desenhos da categoria um pouco maiores, mais visiveis" */
.st-caticon svg{ width:34px; height:34px; stroke-width:1.55 }
.st-catname{ font-size:12.5px; font-weight:600 }
.st-catn{ font-size:11px; color:var(--ink-3); margin-top:2px }

/* ── trust ──────────────────────────────────────────────────────── */

/* ── rodape ─────────────────────────────────────────────────────── */
.st-foot{ background:var(--paper); border-top:1px solid var(--line); padding:30px 0 0 }
.st-footrow{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
             flex-wrap:wrap; padding-bottom:26px }
.st-foot img{ height:24px; width:auto; margin-bottom:10px }
.st-footaddr{ font-size:11.5px; color:var(--ink-3) }
.st-footlinks{ display:flex; gap:24px; font-size:12px; color:var(--ink-2) }
.st-footlinks a:hover{ color:var(--gold-deep) }
.st-legal{ border-top:1px solid var(--line-2); padding:14px 0; text-align:center;
           font-size:11px; color:var(--ink-3) }

/* ── pagina de categoria ────────────────────────────────────────── */
/* o crumb virou IRMAO do h1 dentro da linha do titulo (09/09): sem
   linha propria em cima, sem padding que empurre o titulo para baixo */
.st-crumb{ font-size:12px; color:var(--ink-2); padding:0 }
.st-crumb a{ color:var(--green); -webkit-text-fill-color:var(--green); font-weight:600 }
.st-crumb a:hover{ text-decoration:underline }
/* TITULO NO ALTO, com o crumb ao lado — a regua do site principal:
   24px de respiro sob o menu, nao 20+8 de crumb solto */
.st-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
           margin:0 0 16px }
.st-title h1{ font-family:var(--display); font-size:26px; font-weight:600; margin:0;
              letter-spacing:-.3px; color:var(--gold-deep);
              -webkit-text-fill-color:var(--gold-deep) }
.st-title .n{ font-size:13px; color:var(--ink-2) }
/* BOTAO SEMPRE FORA DA TABELA (Paulo 13/09/2026): a acao "New X" mora na
   linha do titulo, a direita, como no ERP — nunca dentro do quadro */
.st-title .st-titleact{ margin-left:auto; align-self:center; display:flex; gap:8px }

.st-split{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:22px; align-items:start }
@media(max-width:900px){ .st-split{ grid-template-columns:1fr } }
/* a coluna da esquerda do Shop: a caixa Sort em cima, a caixa Filter embaixo (01/10/2026) */
.st-sidecol{ display:grid; gap:14px; align-content:start; min-width:0 }
.st-sortbox{ padding:14px 18px 16px }
.st-sortbox .st-sidehead{ margin-bottom:9px }
.st-toolbar:empty{ display:none }
.st-side{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
          box-shadow:var(--shadow); padding:18px 18px 20px }
.st-sidehead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.st-sidehead h3{ font-size:13px; font-weight:600; margin:0 }
.st-clear{ font-size:11.5px; font-weight:600; color:var(--gold-deep); background:none; border:0; padding:0 }
.st-clear:hover{ text-decoration:underline }
.st-fgroup{ border-top:1px solid var(--line-2); padding:13px 0 3px }
.st-fgroup h4{ font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
               color:var(--ink-3); margin:0 0 9px }
.st-fopt{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:4px 0; cursor:pointer }
.st-fopt input{ width:14px; height:14px; accent-color:var(--gold); margin:0 }
.st-fopt .c{ margin-left:auto; font-size:11px; color:var(--ink-3) }
/* seletores de categoria e subcategoria do catalogo */
.st-fsel{ width:100%; height:34px; padding:0 10px; border-radius:8px;
  border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-fsel:focus{ outline:none; border-color:var(--gold) }

.st-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
             margin-bottom:14px; flex-wrap:wrap }
.st-chips{ display:flex; gap:8px; flex-wrap:wrap }
.st-fchip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-deep); font-size:11.5px; font-weight:600;
  border:0 }
.st-fchip:hover{ background:#EFE6CC }

.st-empty{ border:1px dashed var(--line); border-radius:12px; padding:40px 20px; text-align:center;
           color:var(--ink-3); font-size:13px; background:var(--gold-faint) }

/* ── pagina de produto ──────────────────────────────────────────── */
.st-pdsplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px }
@media(max-width:900px){ .st-pdsplit{ grid-template-columns:1fr } }
.st-pdimg{ aspect-ratio:1/1; background:var(--gold-faint); border:1px solid var(--line-2);
  border-radius:12px; display:flex; align-items:center; justify-content:center }
.st-pdimg svg{ width:140px; height:140px; color:#DCD2BA }
.st-pdimg img{ width:100%; height:100%; object-fit:cover; border-radius:12px }
/* 01/10/2026: a galeria da peca — Studio em cima, a Lifestyle logo abaixo, no mesmo quadro */
.st-pdimg-more{ margin-top:12px }
.st-pdtitle{ font-family:var(--display); font-size:24px; font-weight:600; margin:10px 0 0;
             letter-spacing:-.3px; line-height:1.25 }
/* O PRECO E TEXTO, como no site (Paulo 14/09/2026: "esta dentro de um campo
   dourado, nao deve ser assim; igual aos do meu site da w18k, e mostra
   apenas o preco MSRP"): sem caixa, sem fundo — o MSRP no corpo do titulo.
   O atacado, quando o lojista esta logado, vem menor embaixo. */
.st-pdprice{ margin:14px 0 4px }
.st-pdretail{ font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.3px; line-height:1.25 }
.st-pdwhole{ font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:4px }
.st-pdwhole small{ font-size:12px; font-weight:500 }
/* O PRECO DE ATACADO MAIOR E EM DOURADO, "Wholesale" com W maiusculo (Paulo 01/10/2026: "no site do
   cliente eu quero o preco no wholesale maior, em dourado, e com a letra W de Wholesale em maiusculo";
   lei 11.358). O ouro e o da tipografia da casa (--gold-deep), nunca caixa nem fundo. */
.st-pdretail.st-pdwsale{ font-size:30px; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-pdretail.st-pdwsale small{ font-size:14px; font-weight:600; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); text-transform:capitalize }
/* O BACK DA PECA FORA DA CAIXA, EM CIMA A DIREITA (Paulo 01/10/2026: "nao tem sentido ela ficar no meio
   dos botoes de Add to Cart... eu quero o botao back fora da caixa"): a linha do crumb leva o Back a
   direita; o de baixo e o da .st-backbar do chrome, que ja estava fora. */
.st-crumbrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.st-crumbrow .st-crumb{ min-width:0 }
/* a escolha por peca na pagina do produto (pacote 153): rotulo + chips
   dos valores em estoque; a linha do carrinho repete a escolha */
.st-varlabel { margin-top: 14px; font-size: 12px; font-weight: 600; color: #6b6b6b; }
.st-varchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.st-varchip { font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; height: 32px; border-radius: 8px;
  border: 2px solid #d9d9d9; background: #fff; color: #17181a; cursor: pointer; }
.st-varchip.is-on { border-color: #D3BA8A; background: #FAF6EC; }
.st-lineopt { font-size: 12px; color: #6b6b6b; margin-top: 2px; }
.st-specs{ border-top:1px solid var(--line-2); margin-top:6px }
.st-spec{ display:flex; justify-content:space-between; gap:20px; padding:11px 0;
          border-bottom:1px solid var(--line-2); font-size:13px }
.st-spec dt{ color:var(--ink-2) }
.st-spec dd{ margin:0; font-weight:600; text-align:right }
.st-pdacts{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap }
.st-stock{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
           color:var(--green) }
.st-stock.low{ color:var(--gold-deep) }
.st-stock.zero{ color:var(--red) }

/* ── carrinho e checkout ────────────────────────────────────────── */
.st-cosplit{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start }
@media(max-width:960px){ .st-cosplit{ grid-template-columns:1fr } }
/* .st-sum: sticky morto (lei sticky zero, 13/09) */

.st-line{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center;
          padding:14px 0; border-bottom:1px solid var(--line-2) }
.st-line:last-child{ border-bottom:0 }
.st-lineimg{ width:64px; height:64px; border-radius:8px; background:var(--gold-faint);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center }
.st-lineimg svg{ width:30px; height:30px; color:#DCD2BA }
.st-linename{ font-size:13px; font-weight:600; line-height:1.35 }
.st-linesku{ font-size:11px; color:var(--ink-3); margin-bottom:3px }
.st-lineprice{ font-size:12px; color:var(--ink-2); margin-top:4px }
.st-lineright{ text-align:right; white-space:nowrap }
.st-linetotal{ font-size:14px; font-weight:600; color:var(--gold-deep) }
.st-qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px;
         overflow:hidden; margin-bottom:6px }
.st-qty button{ width:28px; height:30px; border:0; background:var(--paper); font-size:15px;
                font-weight:600; color:var(--ink-2) }
.st-qty button:hover{ background:var(--gold-faint) }
.st-qty span{ min-width:32px; text-align:center; font-size:13px; font-weight:600 }
/* 11.80 na loja: acao de linha e BOTAO, nunca link — Remove/Delete no
   vermelho leve da regua (era texto vermelho sublinhado) */
.st-rm{ display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; border-radius:8px;
  border:1px solid var(--red); background:var(--red-soft); font:inherit; font-size:12px; font-weight:600; color:var(--red);
  -webkit-text-fill-color:var(--red); cursor:pointer; white-space:nowrap }
.st-rm:hover{ background:var(--red); color:#fff; -webkit-text-fill-color:#fff }
.st-mtable td .st-rm{ margin-top:-6px; margin-bottom:-7px; vertical-align:middle }
/* pilula de status na celula fecha o box em 19px (5.12): margem negativa + middle */
.st-mtable td .st-tag{ margin-top:-3px; margin-bottom:-3px; vertical-align:middle }
/* campo DENTRO da celula mede a regua fina e compensa a folga — a linha
   da tabela nao cresce (5.12/11.86 na loja) */
.st-mtable td select, .st-mtable td input:not([type=checkbox]){ height:32px; padding:0 8px; margin:-6px 0 -7px; vertical-align:middle;
  border-radius:8px; border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit; font-size:12.5px }

.st-srow{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:13px;
          border-bottom:1px solid var(--line-2) }
.st-srow dt{ color:var(--ink-2) }
.st-srow dd{ margin:0; font-weight:600; text-align:right }
.st-srow.tot{ border-bottom:0; margin-top:8px; padding:12px 14px; border-radius:10px;
  background:var(--gold-faint); border:1px solid rgba(205,178,122,.32); font-size:15px }
.st-srow.tot dd{ font-weight:600; color:var(--gold-deep) }
.st-srow .ex{ font-size:11.5px; font-weight:600; color:var(--green) }

.st-step{ display:flex; align-items:center; gap:10px; margin-bottom:16px }
.st-stepn{ width:24px; height:24px; border-radius:999px; background:var(--gold); color:#fff;
  -webkit-text-fill-color:#fff; font-size:12px; font-weight:600; display:flex;
  align-items:center; justify-content:center }
.st-step h2{ font-family:var(--display); font-size:17px; font-weight:600; margin:0 }

.st-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media(max-width:620px){ .st-fields{ grid-template-columns:1fr } }
.st-field{ display:block }
.st-field.wide{ grid-column:1 / -1 }
.st-field label{ display:block; font-size:11px; font-weight:600; 
  color:var(--ink-3); margin-bottom:5px }
.st-field input, .st-field select{
  width:100%; height:38px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit;
  font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-field input:focus, .st-field select:focus{ outline:none; border-color:var(--gold) }
.st-field input[readonly]{ background:#FAFAFA; border-color:var(--line);
  color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }

.st-seg{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;
         margin-bottom:16px }
.st-seg button{ padding:9px 20px; border:0; background:var(--paper); font-size:12.5px; font-weight:600;
                color:var(--ink-2) }
.st-seg button.on{ background:var(--gold-soft); color:var(--gold-deep) }

.st-opt{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
  border-radius:10px; padding:13px 14px; margin-bottom:10px; cursor:pointer }
.st-opt:hover{ border-color:var(--gold) }
.st-opt.on{ border-color:var(--gold); background:var(--gold-faint) }
.st-opt input{ margin:2px 0 0; width:15px; height:15px; accent-color:var(--gold); flex:0 0 15px }
.st-optname{ font-size:13px; font-weight:600 }
.st-optnote{ font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.5 }
.st-optamt{ margin-left:auto; font-size:13.5px; font-weight:600; white-space:nowrap }

.st-pay{ margin-top:12px; padding:14px 16px; border-radius:10px; background:var(--gold-faint);
  border:1px solid rgba(205,178,122,.32) }
.st-pay h4{ font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
            color:var(--ink-3); margin:0 0 10px }
.st-hosted{ border:1px dashed rgba(205,178,122,.6); border-radius:8px; padding:14px; background:var(--paper) }
.st-hostedf{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:12.5px;
             color:var(--ink-3); border-bottom:1px solid var(--line-2) }
.st-hostedf:last-child{ border-bottom:0 }
.st-hostedf span:last-child{ color:#C7C4BC }
.st-note{ font-size:11.5px; color:var(--ink-2); line-height:1.55; margin-top:10px }
.st-pending{ display:inline-block; padding:3px 9px; border-radius:999px; background:#FCF3DC;
  color:#8A6412; font-size:10.5px; font-weight:600 }
.st-src{ font-size:11.5px; color:var(--ink-2); margin-bottom:10px }
.st-src b{ color:var(--ink) }

/* ═══════════════════════════════════════════════════════════════════
   Dashboard do cliente (account.html)

   Anatomia convertida da referencia do Paulo
   w18ktotallayout.pages.dev/screens/dashboard.html (15/08/2026):
   faixa de 4 KPI, Gift radar, Orders in progress, Invoices, Network best
   sellers, Your best sellers. Regras do sistema aplicadas na conversao:
   emoji fora, numero e titulo em fonte PRETA, ouro/verde/navy so como
   fundo de botao com fonte branca em negrito.
   ══════════════════════════════════════════════════════════════════ */

/* ── botoes que faltavam ────────────────────────────────────────── */
.st-btn-green{ background:var(--green); border-color:var(--green);
  color:#fff; -webkit-text-fill-color:#fff }
.st-btn-navy{ background:var(--navy); border-color:var(--navy);
  color:#fff; -webkit-text-fill-color:#fff }
/* altura UNICA (11.85): o botao de linha mede o mesmo dos outros e a
   celula compensa a folga — a linha da tabela nao cresce */
.st-btn-sm{ height:38px; padding:0 14px; font-size:12px }
/* Print label na ficha da peca (lei 11.330): quantidade e a impressora deste computador, na regua dos botoes pequenos */
.st-qtyin{ width:64px; height:38px; padding:0 10px; border:1px solid var(--line,#E6E0D4); border-radius:8px; font:inherit; font-size:12px; background:#fff; color:inherit }
.st-sel-sm{ height:38px; padding:0 10px; border:1px solid var(--line,#E6E0D4); border-radius:8px; font:inherit; font-size:12px; background:#fff; color:inherit; max-width:220px }
/* botão DENTRO da linha da tabela mede a régua fina (32, lei 11.86) e
   compensa a folga para a linha não esticar (Paulo 13/09/2026, print do
   portal: "botões fora das tabelas, segue a regra") */
.st-mtable td .st-btn-sm{ height:32px; padding:0 12px; margin-top:-6px; margin-bottom:-7px; vertical-align:middle }

/* ── etiquetas ──────────────────────────────────────────────────── */
.st-tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:600; background:var(--gold-soft); color:var(--gold-deep) }
.st-tag.ok{ background:var(--green-soft); color:var(--green) }
.st-tag.bad{ background:var(--red-soft); color:var(--red) }
.st-tag.warn{ background:var(--amber-soft); color:var(--amber) }
.st-tag.navy{ background:var(--navy-soft); color:var(--navy) }
.st-tag.neutral{ background:#F3F2EF; color:var(--ink-2) }

/* ── faixa de KPI ───────────────────────────────────────────────── */
/* MESMA ANATOMIA DO DASHBOARD DO W18K (Paulo 15/08/2026: "organizar as
   caixas na horizontal como fez no w18k"): fileira unica, todas as caixas
   na mesma linha; so quebra em telas menores. */
.st-strip{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px;
           margin-bottom:22px; align-items:stretch }
@media(max-width:1400px){ .st-strip{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(max-width:900px){ .st-strip{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px){ .st-strip{ grid-template-columns:1fr } }
.st-strip .st-kpi{ padding:14px 16px 16px }
.st-strip .st-kpiv{ font-size:21px; margin-top:6px }
.st-strip .st-kpis{ font-size:11px; margin-top:5px }

/* barra da meta: VERMELHO -> VERDE conforme chega (Paulo 15/08/2026).
   A cor do preenchimento e interpolada no JS pelo percentual, entao ela
   caminha do vermelho ao verde junto com a barra. */
.st-goalbar{ height:8px; border-radius:999px; background:var(--line-2); overflow:hidden;
             margin:8px 0 6px }
.st-goalfill{ height:100%; border-radius:999px; min-width:3px;
              background:var(--goalc,var(--red)); transition:width .3s cubic-bezier(.23,1,.32,1), background-color .3s ease }
@media(max-width:560px){ .st-strip{ grid-template-columns:1fr } }
.st-kpi{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
         box-shadow:var(--shadow); padding:16px 18px 18px }
/* rotulos em sentence case, peso 600, sem caixa alta (lei 11.77 — vale
   no portal: KPI, grupos de filtro, cabecas de secao do checkout) */
.st-kpil{ font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
          color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-kpiv{ font-size:24px; font-weight:600; color:var(--gold-deep);
          -webkit-text-fill-color:var(--gold-deep);
          margin-top:8px; letter-spacing:-.4px; display:flex; align-items:center;
          gap:8px; flex-wrap:wrap }
.st-kpiv small{ font-size:13px; font-weight:600; color:var(--ink-2);
                -webkit-text-fill-color:var(--ink-2) }
.st-kpis{ font-size:11.5px; color:var(--ink-2); margin-top:6px; line-height:1.5 }
.st-kpis .down{ color:var(--green); font-weight:600 }
.st-kpis .up{ color:var(--red); font-weight:600 }

/* ── grade de dois trilhos ──────────────────────────────────────── */
.st-dgrid{ display:grid; grid-template-columns:1fr; gap:16px }
@media(max-width:1080px){ .st-dgrid{ grid-template-columns:1fr } }
.st-dgrid > div{ display:contents }
.st-dgrid .st-panel{ margin-bottom:0 }
.st-dgrid > div > .st-panel:last-child{ margin-bottom:0 }

/* ── gift radar ─────────────────────────────────────────────────── */
.st-rrow{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:14px 0; border-bottom:1px solid var(--line-2) }
.st-rrow:last-child{ border-bottom:0; padding-bottom:0 }
.st-rdate{ width:52px; height:52px; border-radius:10px; background:var(--gold-faint);
  border:1px solid rgba(205,178,122,.32); display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1 }
.st-rdate b{ font-size:17px; font-weight:600; color:var(--gold-deep);
             -webkit-text-fill-color:var(--gold-deep) }
.st-rdate span{ font-size:10px; font-weight:600; text-transform:uppercase;
                letter-spacing:.08em; color:var(--ink-3); margin-top:3px }
.st-rname{ font-size:13.5px; font-weight:600; display:flex; align-items:center;
           gap:7px; flex-wrap:wrap }
.st-rwho{ font-size:12px; color:var(--ink-2); margin-top:3px }
.st-rlast{ font-size:11.5px; color:var(--ink-3); margin-top:2px }
.st-ract{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end }
/* NAO usar .st-done aqui: esse nome ja e o bloco de conclusao do pedido
   (order.html). Regra 50 — grepar o nome antes de criar classe. */
.st-contacted{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
               font-weight:600; color:var(--ink-2); cursor:pointer }
.st-contacted input{ width:14px; height:14px; accent-color:var(--gold); margin:0 }
.st-rrow.is-done{ opacity:.5 }

/* ── linha de lista (orders, invoices) ──────────────────────────── */
.st-lirow{ display:flex; align-items:center; gap:12px; padding:12px 0;
           border-bottom:1px solid var(--line-2); flex-wrap:wrap }
.st-lirow:last-child{ border-bottom:0; padding-bottom:0 }
.st-linum{ font-size:13px; font-weight:600; color:var(--gold-deep);
           -webkit-text-fill-color:var(--gold-deep) }
.st-limid{ flex:1; min-width:140px; font-size:12px; color:var(--ink-2) }
.st-liamt{ font-size:13.5px; font-weight:600; color:var(--gold-deep);
           -webkit-text-fill-color:var(--gold-deep) }

/* ── best sellers ───────────────────────────────────────────────── */
.st-bsrow{ display:flex; align-items:center; gap:12px; padding:11px 0;
           border-bottom:1px solid var(--line-2) }
.st-bsrow:last-child{ border-bottom:0; padding-bottom:0 }
.st-bsph{ width:42px; height:42px; flex:0 0 42px; border-radius:9px; background:var(--gold-faint);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  color:#DCD2BA }
.st-bsph svg{ width:22px; height:22px }
/* a FOTO da peca por cima do icone no Dashboard (Paulo 25/09: "nao tem foto") — o mesmo /media/photo do cartao do Shop; sem foto, some e o icone fica */
.st-bsph{ position:relative; overflow:hidden }
.st-bsph img.st-bsimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff }
.st-bsinfo{ flex:1; min-width:0 }
.st-bsinfo b{ font-size:12.5px; font-weight:600; display:block; line-height:1.35 }
.st-bsm{ font-size:11px; color:var(--ink-3); margin-top:2px }
.st-bsprice{ font-size:13px; font-weight:600; color:var(--gold-deep);
             -webkit-text-fill-color:var(--gold-deep); white-space:nowrap }

/* ── minha loja ─────────────────────────────────────────────────── */
.st-mysplit{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px;
             align-items:center }
@media(max-width:820px){ .st-mysplit{ grid-template-columns:1fr; gap:16px } }
.st-logobox{ width:96px; height:96px; border-radius:14px; background:var(--gold-faint);
  border:1px solid rgba(205,178,122,.32); display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden }
.st-logobox img{ width:100%; height:100%; object-fit:contain; padding:8px }
/* sem arquivo de logo no ambiente: a caixa mostra o nome da loja como
   wordmark, mesmo tratamento dos selos JBT / Jewelers of America.
   Nunca imagem inventada. */
.st-word{ font-family:var(--display); font-size:13px; font-weight:600; line-height:1.25;
          text-align:center; padding:0 8px; color:var(--gold-deep);
          -webkit-text-fill-color:var(--gold-deep) }
.st-myname{ font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.2px;
            color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-mylink{ display:inline-block; margin-top:5px; font-size:12.5px; font-weight:600;
            color:var(--green); -webkit-text-fill-color:var(--green) }
.st-mylink:hover{ text-decoration:underline }
.st-mytags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px }
.st-myacts{ display:flex; flex-direction:column; gap:9px; min-width:180px }
.st-mymark{ margin-top:18px; padding:14px 16px; border-radius:12px; background:var(--gold-faint);
  border:1px solid rgba(205,178,122,.32); display:flex; align-items:center; gap:16px;
  flex-wrap:wrap }
.st-mymarkv{ font-size:22px; font-weight:600; color:var(--gold-deep);
             -webkit-text-fill-color:var(--gold-deep) }

/* ── customers do lojista ───────────────────────────────────────── */
.st-cusplit{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:22px; align-items:start }
@media(max-width:1080px){ .st-cusplit{ grid-template-columns:1fr } }
.st-mtable tbody tr[data-pick]{ cursor:pointer }
.st-mtable tbody tr.is-on td{ background:var(--gold-faint) }
.st-miss{ color:var(--ink-3); -webkit-text-fill-color:var(--ink-3); font-weight:600 }
.st-likes{ display:grid; gap:10px }
.st-like{ display:flex; align-items:center; gap:12px; padding:11px 0;
          border-bottom:1px solid var(--line-2) }
.st-like:last-child{ border-bottom:0; padding-bottom:0 }

/* ── settings do cliente ────────────────────────────────────────── */
/* Trilho de abas no padrao do sistema: negrito 700, nunca quebra linha
   (regra 37b). Aqui o ativo e dourado, coerente com a loja branca. */
/* ABAS EM PASTA DE ARQUIVO — o componente do Office (lei de 02/09,
   LEI-MAE 13/09): orelha gold-faint com moldura fina e topo arredondado;
   a ATIVA e branca com contorno dourado de 2px emendada na regua dourada
   do trilho; fonte unica 13/600; o trilho QUEBRA a linha, nunca corta */
.st-subtabs{ display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap; overflow:visible;
             margin:10px 0 16px; padding:0; border:0; border-bottom:2px solid var(--gold) }
.st-subtabs button{ appearance:none; background:var(--gold-faint); border:1px solid var(--line); border-bottom:0;
  border-radius:10px 10px 0 0; margin:0; padding:8px 16px; font:inherit; font-size:13px; font-weight:600;
  line-height:1.25; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px }
.st-subtabs button:hover:not(.on){ color:var(--ink); -webkit-text-fill-color:var(--ink); background:var(--gold-soft) }
.st-subtabs button.on{ background:var(--paper); color:var(--ink); -webkit-text-fill-color:var(--ink);
  border:2px solid var(--gold); border-bottom:2px solid var(--paper); margin-bottom:-2px; padding:7px 15px; position:relative }
/* filtro NA LINHA DAS ABAS, nome dentro (6.4): select curto a direita,
   na regua dos campos da loja */
/* .st-subtabs-filt: as abas ficam no pe do trilho (flex-end); so o select se centra */
.st-subtabs .st-filt{ margin-left:auto; align-self:center; height:38px; min-width:0; max-width:240px;
  padding:0 12px; border-radius:8px; border:1px solid rgba(205,178,122,.32); background:var(--gold-faint);
  font:inherit; font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink); margin-bottom:4px }
.st-subtabs .st-filt:focus{ outline:none; border-color:var(--gold) }

.st-sechead{ font-family:var(--display); font-size:15px; font-weight:600; margin:0 0 14px;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-sechead:not(:first-child){ margin-top:26px; padding-top:20px;
                               border-top:1px solid var(--line-2) }

/* o campo virou <label class="st-field"><span>rotulo</span><input> */
.st-field > span{ display:block; font-size:11px; font-weight:600; 
  color:var(--ink-3); margin-bottom:5px }
.st-field > span i{ font-style:normal; font-weight:600; letter-spacing:0;
                    text-transform:none; color:var(--ink-3); opacity:.85 }
.st-field{ position:relative }
.st-ro{ position:absolute; right:10px; top:26px; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  -webkit-text-fill-color:var(--ink-3); pointer-events:none }
.st-field select{ width:100%; height:38px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit;
  font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-field select:disabled{ background:#FAFAFA; border-color:var(--line);
  color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }

.st-formfoot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px;
              padding-top:18px; border-top:1px solid var(--line-2) }

/* previa da loja: a propria loja num iframe, com a marca dele */
.st-frame{ border:1px solid var(--line); border-radius:12px; overflow:hidden;
           background:var(--paper); margin:0 auto; max-width:100%; transition:max-width .2s }
.st-frame.narrow{ max-width:390px }
.st-frame iframe{ display:block; width:100%; height:560px; border:0 }

/* ── knowledge ──────────────────────────────────────────────────── */
.st-modlist{ display:grid; gap:8px }
.st-mod{ appearance:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); cursor:pointer; font:inherit }
.st-mod:hover{ border-color:var(--gold) }
.st-mod.is-on{ border-color:var(--gold-deep); background:var(--gold-faint) }
.st-mod b{ font-size:13px; font-weight:600 }
.st-kbody{ font-size:13.5px; line-height:1.75; color:var(--ink); margin:0 0 12px }

/* ── produtos do lojista ────────────────────────────────────────── */
/* busca fora do chrome: dourada leve com borda, como no Office */
.st-search-inline{ flex:1; max-width:none; margin:0 }
.st-search-inline input{ height:38px; padding:0 14px; border-radius:8px;
  background:var(--gold-faint); border:2px solid rgba(184,150,74,.55);
  color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-search-inline input:focus{ outline:none; border-color:var(--gold) }

/* .st-attn/.st-attncard morreram em 13/09/2026 — a faixa do portal e o
   MESMO componente .attn-* do Office (bloco "needs attention" abaixo) */

/* linha de parente na ficha do cliente */
.st-relrow{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 110px 84px auto auto;
  gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line-2) }
@media(max-width:900px){ .st-relrow{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.st-relrow .st-rm{ align-self:end; padding-bottom:11px }

/* ── POS do lojista ─────────────────────────────────────────────── */
.st-steps{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px }
.st-stepitem{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px;
  border-radius:999px; border:1px solid var(--line); font-size:12.5px; font-weight:600;
  color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.st-stepitem.is-on{ border-color:var(--gold); color:var(--ink);
                    -webkit-text-fill-color:var(--ink) }
.st-stepitem.is-on .st-stepn{ background:var(--gold) }
.st-stepitem .st-stepn{ background:var(--ink-3) }

.st-custbox{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--gold-faint); flex-wrap:wrap }
.st-hit{ appearance:none; border:0; border-bottom:1px solid var(--line-2);
         background:none; cursor:pointer }
.st-hit:hover{ background:var(--gold-faint) }
.st-qtybtn{ appearance:none; width:26px; height:26px; border:1px solid var(--line);
  border-radius:6px; background:var(--paper); font-weight:600; cursor:pointer }
.st-qtybtn:hover{ border-color:var(--gold) }

/* recibo — layout do recibo B2C da 18k Miami: cartao mono estreito */
.st-receipt{ max-width:340px; margin:18px auto 0; padding:18px 20px 22px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
  font-family:var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size:12px; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-rchead{ text-align:center; margin-bottom:14px; line-height:1.55 }
.st-rchead b{ display:block; font-size:13.5px; font-weight:600 }
.st-rchead span{ display:block; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-rcline{ display:flex; justify-content:space-between; gap:12px; padding:3px 0 }
.st-rcsub{ color:var(--ink-3); -webkit-text-fill-color:var(--ink-3); font-size:11px }
.st-rcitem{ padding:4px 0 }
.st-rcsep{ border-top:1px dashed var(--line); margin:10px 0 }
.st-rctot{ font-weight:600; font-size:13.5px }
@media print{
  body > *:not(.st-main){ display:none }
  .st-main, .st-wrap, .st-panel{ padding:0; margin:0; border:0; box-shadow:none }
  .st-done, .st-formfoot, .st-steps, .st-crumb, .st-title{ display:none }
  .st-receipt{ border:0; margin:0 }
}

/* banner por temporada / data comercial */
.st-bannerrow{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:center }
@media(max-width:760px){ .st-bannerrow{ grid-template-columns:1fr } }
.st-bannerrow .st-slot{ aspect-ratio:21/9; border:1px solid var(--line); border-radius:10px;
  background:var(--gold-faint); overflow:hidden; display:flex; align-items:center;
  justify-content:center }
.st-bannerrow .st-slot img{ width:100%; height:100%; object-fit:cover }
.st-varopt{ appearance:none; border:2px solid transparent; border-radius:10px; padding:0;
  overflow:hidden; cursor:pointer; background:none }
.st-varopt:hover{ border-color:var(--gold) }
.st-varopt.is-on{ border-color:var(--gold-deep) }
.st-varopt img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }

/* matriz de acessos por nivel do time dele */
.st-access td.num, .st-access th.num{ text-align:center; width:96px }
.st-access input[type=checkbox]{ width:16px; height:16px; accent-color:var(--gold); margin:0 }
.st-access input:disabled{ opacity:.45 }
/* a pilula de "salvo" do Office (.ux-toast): preta, texto branco, some sozinha */
.st-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:14px;
  background:var(--ink); color:#fff; -webkit-text-fill-color:#fff; border-radius:10px; padding:11px 18px;
  font-size:13px; font-weight:600; z-index:90; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.st-msg{ font-size:12.5px; font-weight:600; color:var(--green);
         -webkit-text-fill-color:var(--green) }
.st-msg.bad{ color:var(--red); -webkit-text-fill-color:var(--red) }

/* ── marca da loja dele ─────────────────────────────────────────── */
.st-brand{ margin-top:18px; padding:16px 18px; border-radius:12px;
           border:1px solid var(--line); background:var(--paper) }
.st-brandhead{ margin-bottom:14px }
.st-brandrow{ display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap }
.st-brandrow .st-field span{ display:block; font-size:11px; font-weight:600; 
  color:var(--ink-3); margin-bottom:5px }
.st-brandrow input[type=color]{ width:64px; height:38px; padding:2px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper); cursor:pointer }
.st-brandlogo{ height:44px; min-width:150px; max-width:220px; border-radius:8px;
  border:1px dashed var(--line); background:var(--gold-faint); display:flex;
  align-items:center; justify-content:center; overflow:hidden }
.st-brandlogo img{ max-height:34px; max-width:200px; object-fit:contain }
.st-brandacts{ display:flex; gap:8px; flex-wrap:wrap }
.st-brandacts label{ cursor:pointer }
.st-brandnote{ font-size:11.5px; color:var(--ink-3); margin-left:auto }

/* ── meta de vendas ─────────────────────────────────────────────── */
.st-goalrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center }
@media(max-width:900px){ .st-goalrow{ grid-template-columns:1fr } }
.st-goalv{ font-size:30px; font-weight:600; color:var(--gold-deep);
           -webkit-text-fill-color:var(--gold-deep); letter-spacing:-.6px }
.st-goalv small{ font-size:13px; font-weight:600; color:var(--ink-2);
                 -webkit-text-fill-color:var(--ink-2); margin-left:10px }
.st-goalside{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap }
.st-goalsv{ font-size:18px; font-weight:600; color:var(--gold-deep);
            -webkit-text-fill-color:var(--gold-deep); margin-top:6px }

/* ── catalogo da loja dele ──────────────────────────────────────── */
.st-catbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
            flex-wrap:wrap; margin-bottom:14px }
.st-catrow{ display:grid; grid-template-columns:42px minmax(0,1fr) auto auto auto; gap:14px;
  align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2) }
@media(max-width:820px){ .st-catrow{ grid-template-columns:42px minmax(0,1fr) auto } }
.st-catrow:last-child{ border-bottom:0 }
.st-catprice{ text-align:right; white-space:nowrap }
.st-catpay{ font-size:11.5px; color:var(--ink-3) }
.st-catsell{ font-size:13.5px; font-weight:600; color:var(--gold-deep);
             -webkit-text-fill-color:var(--gold-deep) }
.st-pub{ min-width:104px }
.st-catrow.is-pub{ background:var(--gold-faint) }

/* ── tabela de margem ───────────────────────────────────────────── */
.st-mtable{ width:100%; border-collapse:collapse; margin-top:4px }
/* A REGUA DE TABELA DO OFFICE (LEI-MAE 13/09/2026): cabecalho 11/700 caixa
   alta com linha PRETA de 1px embaixo (sombra, nao borda — a altura nao
   muda), celula 13px/19px com folga 12 = linha de ~44px, e o rodape
   unico "Displaying items X-Y of Z in total" (.st-tfoot) em toda lista */
/* Paulo 14/09/2026 ("need the black line under title of tables"): a sombra
   externa era coberta pelo fundo das celulas da primeira linha (tabela
   collapse pinta o td por cima) — a linha vai por DENTRO do th (inset),
   mesma grossura de 1px e a altura nao muda */
.st-mtable th{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:15px;
  color:var(--ink-2); text-align:left; padding:10px 12px; border-bottom:0; box-shadow:inset 0 -1px 0 var(--ink) }
.st-ktable th, .st-doc-table th{ box-shadow:inset 0 -1px 0 var(--ink) }
.st-mtable td{ font-size:13px; line-height:19px; padding:12px; border-bottom:1px solid var(--line-2);
               color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-tfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 0;
  font-size:12.5px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-mtable tr:last-child td{ border-bottom:0 }
.st-mtable .num{ text-align:right; white-space:nowrap; font-weight:600 }
.st-mtable th.num{ text-align:right }
.st-mtable .gain{ color:var(--green); -webkit-text-fill-color:var(--green); font-weight:600 }
.st-mtable tbody tr:hover td{ background:var(--gold-faint) }
.st-mtable tfoot td{ background:var(--gold-faint); font-weight:600; border-bottom:0 }
.st-mpiece{ font-weight:600; line-height:1.35 }
.st-msku{ font-size:11px; color:var(--ink-3) }

/* ── barras do historico ────────────────────────────────────────── */
.st-bars{ display:flex; align-items:flex-end; gap:6px; height:96px; margin-top:6px }
.st-barcol{ flex:1; display:flex; flex-direction:column; justify-content:flex-end;
            align-items:center; gap:6px; height:100% }
.st-bar{ width:100%; border-radius:4px 4px 0 0; background:var(--gold); min-height:2px }
.st-bar.zero{ background:var(--line) }
.st-barlab{ font-size:10px; font-weight:600; color:var(--ink-3) }
.st-famrow{ display:grid; grid-template-columns:110px minmax(0,1fr) 44px; gap:10px;
            align-items:center; padding:7px 0; font-size:12.5px }
.st-famtrack{ height:8px; border-radius:999px; background:var(--line-2); overflow:hidden }
.st-famfill{ height:100%; border-radius:999px; background:var(--gold) }
.st-fampct{ text-align:right; font-weight:600; font-size:12px }

/* ── limites de checkout ────────────────────────────────────────── */
.st-lim{ padding:9px 0; border-bottom:1px solid var(--line-2) }
.st-lim:last-child{ border-bottom:0 }
.st-limhead{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px }
.st-limhead b{ font-weight:600 }
.st-limtrack{ height:6px; border-radius:999px; background:var(--line-2); margin:7px 0 4px;
              overflow:hidden }
.st-limfill{ height:100%; border-radius:999px; background:var(--gold) }
.st-limfill.hot{ background:var(--red) }
.st-limnote{ font-size:11px; color:var(--ink-3) }

.st-done{ text-align:center; padding:14px 0 6px }
.st-donen{ font-family:var(--display); font-size:26px; font-weight:600; margin:6px 0 0 }
.st-doneok{ width:44px; height:44px; border-radius:999px; background:var(--green-soft, #EAF2EC);
  color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto }
.st-doneok svg{ width:22px; height:22px }
.st-donebox{ max-width:520px; margin:18px auto 0; text-align:left }

/* texto do manual de treinamento */
.st-ksub{ font-size:13.5px; font-weight:600; margin:16px 0 8px;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-kbody.li{ padding-left:16px; position:relative }
.st-kbody.li::before{ content:"·"; position:absolute; left:4px; color:var(--gold) }

/* caixa da saudacao: uma linha so, bem baixa, com a data justificada a
   DIREITA e o Sign out no fim (Paulo 15/08/2026) */
#st-hello{ padding:14px 20px; margin-bottom:18px }
.st-hellorow{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap }
.st-hellorow h2{ font-family:var(--display); font-size:18px; font-weight:600; margin:0;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-hellodate{ margin-left:auto; font-size:12.5px; color:var(--ink-2);
               -webkit-text-fill-color:var(--ink-2) }
.st-hellorow .st-btn{ align-self:center }

/* knowledge: uma secao por pagina */
.st-seclist{ display:grid; gap:2px; margin:2px 0 8px 10px;
             border-left:2px solid var(--line-2); padding-left:10px }
.st-sec{ appearance:none; border:0; background:none; text-align:left; padding:7px 8px;
  border-radius:6px; font:inherit; font-size:12.5px; line-height:1.35; cursor:pointer;
  color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-sec:hover{ background:var(--gold-faint) }
.st-sec.is-on{ background:var(--gold-soft); color:var(--gold-deep);
               -webkit-text-fill-color:var(--gold-deep); font-weight:600 }
.st-kcrumb{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-ktitle{ font-family:var(--display); font-size:22px; font-weight:600; margin:8px 0 18px;
  letter-spacing:-.3px; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-kfoot{ display:flex; justify-content:space-between; gap:14px; margin-top:26px;
  padding-top:18px; border-top:1px solid var(--line-2) }
.st-kfoot .st-btn{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                   display:block; line-height:30px }

/* ── knowledge: indice e pagina de leitura ──────────────────────── */
.st-kindex{ columns:2; column-gap:32px }
@media(max-width:820px){ .st-kindex{ columns:1 } }
.st-kmod{ break-inside:avoid; margin:0 0 22px }
.st-kmod h3{ font-family:var(--display); font-size:14px; font-weight:600; margin:0 0 8px;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-kmod ul{ list-style:none; margin:0; padding:0 }
.st-kmod li{ padding:3px 0 }
.st-kmod a{ font-size:13px; line-height:1.45; color:var(--ink);
            -webkit-text-fill-color:var(--ink) }
.st-kmod a:hover{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep);
                  text-decoration:underline }

/* pagina de leitura: largura de medida, tipo maior */
.st-reader{ max-width:74ch; margin:0 auto; padding:26px 34px 34px }
.st-kbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line-2); margin-bottom:20px }
.st-reader .st-ktitle{ font-size:27px; line-height:1.2; margin:0 0 22px }
.st-reader .st-kbody{ font-size:15px; line-height:1.8; margin:0 0 16px }
.st-reader .st-ksub{ font-size:16px; margin:26px 0 10px }

/* ── needs attention = O COMPONENTE DO OFFICE (Paulo 13/09/2026: "needs
   attention esta pessimo, faca de acordo com as regras do nosso sistema
   W18k"). Faixa de UMA fileira: titulo a esquerda, pastilhas ao lado,
   quebra em fileiras quando nao cabe (nunca rola); pastilha = altura
   dos botoes, "Rotulo: numero", dourado leve (--gold-mist) com moldura
   dourada leve; a que pede acao e vermelha leve com o numero vermelho.
   Ordem do topo: busca > faixa > abas (lei 1.1). ── */
.attn-panel{ display:flex; align-items:center; gap:14px; min-height:60px;
  padding:12px 16px; margin:0 0 18px }
.attn-title{ flex:0 0 auto; margin:0; font-size:15px; font-weight:600; white-space:nowrap;
  color:var(--ink); -webkit-text-fill-color:var(--ink) }
.attn-grid{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; min-width:0 }
.attn-card{ appearance:none; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  height:38px; padding:0 14px; border-radius:999px; text-align:left; font:inherit; cursor:pointer;
  background:var(--gold-mist); border:1px solid var(--gold-light) }
.attn-l{ order:1; margin:0; font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap;
  color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.attn-l::after{ content:":" }
.attn-n{ order:2; font-size:13px; font-weight:600; line-height:1.2; letter-spacing:0;
  font-variant-numeric:tabular-nums; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.attn-card.hot{ background:var(--red-soft); border-color:#EAD6CF }
.attn-card.hot .attn-n{ color:var(--red); -webkit-text-fill-color:var(--red) }
.attn-card:hover{ background:var(--gold-light); border-color:var(--gold) }
.attn-card.hot:hover{ background:var(--red) }
.attn-card.hot:hover .attn-n,.attn-card.hot:hover .attn-l{ color:#fff; -webkit-text-fill-color:#fff }
.attn-card.is-on{ border-color:var(--gold); background:var(--gold-soft) }

/* ficha do cliente como PAGINA: largura de formulario, centrada */
.st-formpage{ max-width:900px; margin:0 auto; padding:26px 30px 30px }

/* GOLD TODAY: superficie inteira colorida, como o painel do ouro do W18k.
   VERMELHA = cotacao subiu · VERDE (.down) = caiu. A inversao e
   intencional e esta registrada nas regras. */
.st-kpi.st-gold{ background:linear-gradient(155deg,#8E2F1B 0%,#5E1E11 72%);
  border-color:#5E1E11; color:#fff }
.st-kpi.st-gold.down{ background:linear-gradient(155deg,#136B45 0%,#0A4028 72%);
  border-color:#0A4028 }
.st-kpi.st-gold .st-kpil,
.st-kpi.st-gold .st-kpiv,
.st-kpi.st-gold .st-kpiv small,
.st-kpi.st-gold .st-kpis{ color:#fff; -webkit-text-fill-color:#fff }
.st-kpi.st-gold .st-kpil{ opacity:.85 }
.st-kpi.st-gold .st-kpis{ opacity:.86 }
.st-kpi.st-gold .st-kpis .up,
.st-kpi.st-gold .st-kpis .down{ color:#fff; -webkit-text-fill-color:#fff; font-weight:600 }

/* ficha do cliente ABAIXO da lista (Paulo 15/08/2026), nao ao lado */
#st-split{ display:grid; gap:22px }
/* ── PWA do site dele (14/09/2026): o botao Install app no topo, so quando o
   telefone oferece a instalacao ── */
.st-headacts .st-install{ height:30px; padding:0 12px; font-size:12px }
@media(max-width:700px){ .st-headacts .st-install{ align-self:flex-start } }

/* ── BACK EM TODA TELA DO SISTEMA DELE (Paulo 14/09/2026): em cima no
   .st-titleact e embaixo na .st-backbar; some quando a pagina tem o Back
   proprio visivel (ficha aberta, aba Store) ── */
.st-backbar{ display:flex; justify-content:flex-end; margin-top:18px }
.st-title:has(#st-back:not([hidden])) #st-chromeback,
.st-title:has([data-site-back]) #st-chromeback,
/* o Profile tem Back + Save proprios (data-back): o Back do chrome nao entra — dois Back (Paulo 05/10/2026, print: "ta errado") */
.st-title:has([data-back]) #st-chromeback{ display:none }
body:has(#st-back:not([hidden])) .st-backbar,
body:has([data-site-back]) .st-backbar,
body:has(#st-acts-foot [data-back]) .st-backbar{ display:none }

/* ── O PRECO COMO JOALHERIA MOSTRA (Paulo 14/09/2026: "melhora a apresentacao
   desses precos, parecia um numero dentro de uma caixa"): cifrao pequeno em
   ouro, inteiro grande na fonte de display, centavos discretos, a moeda em
   versalete e um fio de ouro embaixo. Nada de caixa. ── */
.st-pricetag{ display:inline-flex; align-items:baseline; gap:2px; font-family:var(--display); color:var(--ink);
  -webkit-text-fill-color:var(--ink); line-height:1; font-variant-numeric:tabular-nums }
.st-pricetag .st-pt-cur{ font-size:.55em; font-weight:500; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); margin-right:2px }
.st-pricetag .st-pt-int{ font-size:1em; font-weight:600; letter-spacing:-.01em }
.st-pricetag .st-pt-dec{ font-size:.5em; font-weight:500; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-pricetag .st-pt-ccy{ font-size:.36em; font-weight:600; letter-spacing:.18em; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); margin-left:9px; text-transform:uppercase }
.st-pricetag-lg{ font-size:38px; padding-bottom:12px; border-bottom:1px solid var(--gold); margin-top:10px }
.st-pricetag-sm{ font-size:17px; margin-top:8px }
/* ── TELEFONE (Paulo 14/09/2026: "a visao no phone deve ser responsiva: logo
   da loja a esquerda em cima com o menu hamburguer, a busca vai para baixo e
   abaixo disso New Arrivals, Featured e Categories") ── */
.st-hico{ display:none }
.st-burger{ display:none; appearance:none; border:0; background:transparent; color:var(--chrome-ink,#fff);
  width:40px; height:40px; border-radius:8px; font-size:22px; line-height:1; cursor:pointer; align-items:center; justify-content:center }
.st-burger:hover{ background:rgba(128,128,128,.2) }
@media(max-width:700px){
  /* TELEFONE (Paulo 29/09/2026): logo e nome a esquerda, coracao/carrinho/casinha a
     direita (o hamburguer morreu), busca embaixo, New Arrivals/Featured/Categories no centro */
  .st-headrow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"logo acts" "search search"; gap:10px 8px; padding:10px 14px }
  .st-left, .st-logo{ grid-area:logo; min-width:0 }
  .st-search{ grid-area:search; width:100% }
  .st-headacts{ display:flex; grid-area:acts; flex-direction:row; align-items:center; gap:2px }
  .st-headacts > a, .st-acct > a{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:8px }
  .st-headacts .st-hico{ display:block }
  .st-headacts .st-hlbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .st-headacts .st-count{ position:absolute; top:2px; right:0; margin:0 }
  .st-navrow{ overflow-x:auto; scrollbar-width:none; padding:0 6px }
  .st-navrow > :first-child{ margin-left:auto }
  .st-navrow > :last-child{ margin-right:auto }
  .st-navrow::-webkit-scrollbar{ display:none }
  .st-navrow a, .st-navrow span{ padding:10px 10px; font-size:13px; white-space:nowrap }
  .st-wrap{ padding:0 14px }
  .st-main{ padding:14px 0 20px }
  .st-panel{ padding:14px }
  .st-lookhero{ grid-template-columns:1fr }
  .st-lookgrid, .st-feat, .st-cats, .st-strip, .st-relrow{ grid-template-columns:1fr }
  .st-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .st-pdsplit{ grid-template-columns:1fr; gap:16px }
  .st-pricetag-lg{ font-size:30px }
  .st-phead{ flex-wrap:wrap }
  .st-tw, .st-mtable{ display:block; overflow-x:auto; max-width:100% }
  img, svg{ max-width:100% }
}

/* Products > a peça em página própria (Paulo 14/09/2026): foto à esquerda,
   fatos em linhas dt/dd à direita — o mesmo desenho da ficha do cliente */
.st-pview{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start; margin-top:14px }
.st-pphoto{ aspect-ratio:1; border:1px solid var(--line); border-radius:12px; background:var(--gold-faint);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--gold) }
.st-pphoto svg{ width:72px; height:72px }
.st-pphoto img{ width:100%; height:100%; object-fit:cover }
.st-pfacts{ margin:0 }
@media(max-width:760px){ .st-pview{ grid-template-columns:1fr } .st-pphoto{ max-width:280px } }
.st-rowacts{ white-space:nowrap }
.st-rowacts .st-btn{ margin-left:6px }
/* desativar e destrutivo: contorno vermelho, nunca preenchido */
.st-btn-off{ background:var(--red-soft); border-color:var(--red); color:var(--red); -webkit-text-fill-color:var(--red) }
.st-btn-off:hover{ background:var(--red); border-color:var(--red); color:#fff; -webkit-text-fill-color:#fff }
tr.is-off td{ opacity:.5 }

/* ── leitura do manual: mais espaco e a estrutura de volta ──────── */
.st-reader{ max-width:none; margin:0; padding:34px 44px 44px }
.st-reader .st-ktitle{ font-size:30px; line-height:1.18; margin:0 0 26px; max-width:26ch }
.st-reader .st-kbody{ font-size:15.5px; line-height:1.85; margin:0 0 18px; max-width:74ch }
.st-reader .st-ksub{ font-size:17px; font-weight:600; margin:34px 0 12px;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-reader strong{ font-weight:600 }
.st-reader em{ font-style:italic }
.st-kli{ font-size:15.5px; line-height:1.85; margin:0 0 8px 22px; max-width:72ch }

/* as tabelas comparativas do manual — o que ele chamou de "caixas" */
.st-ktable{ margin:22px 0 26px; overflow-x:auto; border:1px solid var(--line);
            border-radius:12px; background:var(--paper) }
.st-ktable table{ width:100%; border-collapse:collapse; font-size:14px }
.st-ktable th{ text-align:left; padding:12px 16px; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; background:var(--gold-faint);
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep);
  border-bottom:1px solid var(--line) }
.st-ktable td{ padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:top;
               line-height:1.6 }
.st-ktable tr:last-child td{ border-bottom:0 }
.st-ktable td:first-child{ font-weight:600 }
.st-ktable tbody tr:hover td{ background:var(--gold-faint) }

/* ── documento: statement e pedido de pagamento ─────────────────── */
/* Molde do fi-doc do Finances do W18k: cabecalho com marca + titulo, caixa
   da parte com borda preta, tabela zebrada, total em destaque e rodape
   com o endereco. A folha de impressao deixa so o documento. */
.st-docacts{ display:flex; justify-content:flex-end; gap:10px; margin-bottom:14px }
.st-doc{ max-width:820px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:38px 42px 30px; color:var(--ink);
  -webkit-text-fill-color:var(--ink) }
.st-doc-head{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:18px; border-bottom:2px solid var(--ink) }
.st-doc-logo{ height:34px; width:auto; max-width:200px; object-fit:contain }
.st-doc-word{ font-family:var(--display); font-size:19px; font-weight:600;
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-doc-title{ font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase }
.st-doc-party{ border:1px solid var(--ink); border-radius:6px; padding:14px 16px; margin:22px 0 20px }
.st-doc-party-n{ font-size:15px; font-weight:600; margin-bottom:4px }
.st-doc-meta{ font-size:12.5px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-doc-meta b{ color:var(--ink); -webkit-text-fill-color:var(--ink); font-weight:600 }
.st-doc-table{ width:100%; border-collapse:collapse; font-size:13px }
.st-doc-table th{ text-align:left; padding:9px 10px; font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ink) }
.st-doc-table td{ padding:9px 10px; border-bottom:1px solid var(--line-2) }
.st-doc-table tbody tr:nth-child(odd) td{ background:var(--gold-faint) }
.st-doc-table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.st-doc-total{ display:flex; justify-content:space-between; gap:20px; margin-top:16px;
  padding:12px 14px; border-radius:8px; background:var(--gold-faint);
  border:1px solid rgba(205,178,122,.32); font-size:15px }
.st-doc-total b{ font-weight:600; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-doc-note{ font-size:12.5px; font-style:italic; color:var(--ink-2);
              -webkit-text-fill-color:var(--ink-2); margin-top:16px }
.st-doc-foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:34px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }

@media print{
  body > *:not(.st-main){ display:none !important }
  .st-main, .st-wrap{ padding:0; margin:0 }
  .st-crumb, .st-title, .st-docacts, #st-split{ display:none !important }
  .st-doc{ border:0; border-radius:0; padding:0; max-width:none }
}

/* Anterior/Proxima na linha do titulo, a direita */
.st-ktitlerow{ display:flex; align-items:flex-start; justify-content:space-between;
               gap:24px; margin:0 0 26px }
.st-ktitlerow .st-ktitle{ margin:0; flex:1 1 auto }
.st-knav{ display:flex; gap:6px; flex:0 0 auto; padding-top:6px }
.st-knav .st-btn{ min-width:38px; padding:0 10px }
.st-knav .st-btn[disabled]{ opacity:.35; cursor:default }

/* IMPRESSAO EM LETTER, NUNCA A4 (Paulo 16/08/2026) — padrao americano,
   para todo documento impresso do portal (Catalog Builder, pedidos). */
@page { size: letter; margin: 0.5in; }


/* ── Showcases / Shop the Look (BUILD-showcase §9, 02/09/2026) ──────
   Foto de MODELO vendendo o conjunto. Preco borrado deslogado segue o
   padrao da landing (mascara + blur — numero real nunca esta no HTML
   publico). */
.st-lookmask { filter: blur(5px); user-select: none; }
.st-lookhero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 18px;
}
.st-lookheroimg { min-height: 320px; }
.st-lookheroimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-lookherotx { padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; }
.st-lookgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-lookcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  background: #fff;
}
.st-lookimg { aspect-ratio: 4 / 5; }
.st-lookimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-lookbody { padding: 14px 16px 16px; }
.st-lookprice { font-size: 17px; margin-top: 6px; }
.st-lookprice s { color: var(--ink-3); font-weight: 400; margin-right: 6px; }
.st-lookprice b { font-weight:600; }
.st-lookful { color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }
.st-lookless { color: var(--green); font-weight:600; font-size: 12.5px; }
@media (max-width: 860px) {
  .st-lookhero { grid-template-columns: 1fr; }
  .st-lookgrid { grid-template-columns: 1fr; }
}

/* pagina do look */
.st-lkhero { border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.st-lkhero img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.st-lkgal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.st-lkgal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.st-lksplit { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .st-lksplit { grid-template-columns: 1fr; } }
.st-lkpieces { margin-top: 14px; }
.st-lkpiece {
  display: grid;
  grid-template-columns: auto 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.st-lkpiece:last-child { border-bottom: 0; }
.st-lkpiece input { width: 18px; height: 18px; accent-color: var(--gold); }
.st-ctlpieces .st-lkpiece { grid-template-columns: 44px 1fr auto; }
.st-lkthumb {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  background: #fff;
}
.st-lkthumb svg { width: 22px; height: 22px; }
.st-lkinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-lkprice { font-weight:600; font-variant-numeric: tabular-nums; }
.st-lkblock {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--gold-faint);
}
.st-lkstrike { color: var(--ink-3); text-decoration: line-through; }
.st-lktotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-top: 6px; }
.st-lktotal b { font-size: 24px; font-weight:600; }
.st-lksave { color: var(--green); font-weight:600; margin-top: 4px; }
.st-lkfulfil { color: var(--ink-2); font-size: 12.5px; margin: 8px 0 14px; }
.st-lkblock .st-btn { width: 100%; }

/* Complete the Look no produto */
.st-ctlsplit { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .st-ctlsplit { grid-template-columns: 1fr; } }
.st-ctlimg { border-radius: var(--radius); overflow: hidden; display: block; }
.st-ctlimg img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.st-ctlsplit .st-lookprice { margin: 12px 0 14px; }

/* carrinho agrupado */
.st-lookgroup {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 14px;
  background: var(--gold-faint);
}
.st-lookghead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 2px 4px;
  font-weight:600;
  font-size: 13.5px;
}
.st-qty-fixed { justify-content: center; min-width: 44px; }


/* peca esgotada dentro do look (revisao 02/09) */
.st-lkoff { opacity: .55; }
.st-lkofftag { color: var(--rose); font-weight:600; font-size: 12px; margin-left: 6px; }

/* SHARE do WhatsApp: o verde DA CASA, como em todo o sistema (Paulo 01/10/2026)
   (lei 11.12 — WhatsApp e botao verde em todo lugar) */
.st-btn-wa{ background:var(--green); border-color:var(--green); color:#FFFFFF;
  -webkit-text-fill-color:#FFFFFF }
.st-btn-wa:hover{ background:#004D2E; border-color:#004D2E }
.st-btn-wa svg,.st-btn-gold svg{ vertical-align:middle }

/* ── A CONTA DO CLIENTE FINAL na loja do lojista (10/09/2026) ─────
   Um cartao estreito, centrado, com os campos empilhados: e uma
   entrada, nao um formulario de cadastro. Usa os mesmos controles
   do resto da loja. ── */
.st-signin{ max-width:460px; margin:0 auto }
.st-siform{ display:flex; flex-direction:column; gap:14px }
.st-sif{ display:flex; flex-direction:column; gap:6px; font-size:12px;
  font-weight:600; color:var(--ink-2); letter-spacing:.02em }
.st-sif i{ font-style:normal; font-weight:400; color:var(--ink-3) }
.st-sif input,.st-sif select{ height:42px; padding:0 12px; font:inherit;
  font-size:14px; font-weight:400; color:var(--ink); background:#FFFFFF;
  border:1px solid var(--line-2); border-radius:10px }
.st-sif input:focus,.st-sif select:focus{ outline:none; border-color:var(--gold) }
.st-sibday{ display:flex; gap:8px }
.st-sibday select{ flex:1 }
.st-siacts{ display:flex; align-items:center; gap:12px; margin-top:4px }
.st-siacts .st-btn{ height:42px }
.st-sierr{ padding:10px 12px; border-radius:10px; background:#FBEAEA;
  color:#9B2226; font-size:13px }
/* o menu da conta na loja dele empilha os dois caminhos */
.st-acctmenu .st-btn + .st-btn{ margin-top:8px }

/* ── A CONTA DO CLIENTE FINAL na loja do lojista (10/09/2026) ─────
   Duas caixas grandes (o que ele salvou, o que esta na sacola) e a
   lista de pedidos. Nada de KPI: quem compra quer ver as pecas. ── */
.st-cohead{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.st-cohead h1{ margin:0; font-size:24px; font-weight:600; letter-spacing:-.2px }
.st-coboxes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px }
.st-cobox{ display:block; padding:20px; border:1px solid var(--line-2);
  border-radius:14px; text-decoration:none; color:inherit; background:var(--gold-faint) }
.st-cobox:hover{ border-color:var(--gold) }
.st-cobox .n{ font-size:28px; font-weight:600; font-variant-numeric:tabular-nums }
.st-cobox .t{ margin-top:2px; font-size:12px; font-weight:600; color:var(--ink-2);
  text-transform:none; letter-spacing:0 }
.st-coorders{ margin-top:28px }
.st-coorders h2{ margin:0 0 12px; font-size:16px; font-weight:600 }

/* os dados do cliente final na conta dele (10/09/2026) */
.st-codetails{ margin-top:28px }
.st-codetails h2{ margin:0 0 12px; font-size:16px; font-weight:600 }
.st-codetails h3{ margin:20px 0 12px; font-size:13px; font-weight:600;
  color:var(--ink-2); text-transform:none; letter-spacing:0 }
.st-cogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.st-cogrid .st-cofull{ grid-column:1 / -1 }
.st-cogrid input[readonly]{ background:var(--gold-faint); color:var(--ink-2) }
.st-conote{ font-size:12px; color:var(--ink-2) }
@media (max-width:720px){ .st-cogrid{ grid-template-columns:1fr } }

/* linha de pedido — na conta do cliente final e no painel do lojista */
.st-coorder{ display:flex; align-items:center; gap:16px; padding:14px 0;
  border-top:1px solid var(--line) }
.st-coorder > :first-child{ flex:1; min-width:0 }
/* a sacola dos clientes dele no celular: nome e pecas na largura toda, valor e WhatsApp embaixo */
@media(max-width:560px){ :is(#st-bags, #st-ships, #fn-open, #fn-sched) .st-coorder{ flex-wrap:wrap; gap:10px 16px }
  :is(#st-bags, #st-ships, #fn-open, #fn-sched) .st-coorder > :first-child{ flex-basis:100% } :is(#st-bags, #st-ships, #fn-open, #fn-sched) .st-cototal{ flex:1 } }
.st-conum{ font-size:14px; font-weight:600 }
.st-codate{ margin-top:2px; font-size:12px; color:var(--ink-2) }
.st-cototal{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums }
.st-costatus{ padding:4px 10px; border-radius:999px; background:var(--gold-faint);
  border:1px solid var(--line-2); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap }

/* o numero do pedido, na confirmacao da loja dele */
.st-cotitle{ margin:0 0 8px; font-size:24px; font-weight:600; letter-spacing:-.2px }
.st-cosub{ margin:20px 0 12px; font-size:13px; font-weight:600; color:var(--ink-2);
  text-transform:none; letter-spacing:0 }

/* HOME — banners de propaganda do lojista (11/09/2026) */
.st-hero.st-promo{ background:linear-gradient(90deg,#F3EEE4 0%,#F8F4EB 55%,#EFE9DC 100%) }
.st-promotrack{ position:relative; min-height:300px }
.st-promocard{ display:none; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; padding:44px 0 34px }
.st-promocard.is-on{ display:grid }
.st-promotx h1{ font-family:var(--display); font-size:clamp(28px,3.2vw,40px); font-weight:600; margin:10px 0 0; line-height:1.1 }
.st-promotx p{ margin:16px 0 0; max-width:46ch; font-size:13.5px; line-height:1.72; color:var(--ink-2) }
.st-promoart{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.st-promoart a{ display:block; aspect-ratio:1; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden }
.st-promoart a img{ width:100%; height:100%; object-fit:cover; display:block }
.st-promoart > img{ grid-column:1 / -1; width:100%; max-height:300px; object-fit:cover; border-radius:14px }
.st-promoblank{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; height:220px; border:1px dashed var(--gold); border-radius:14px; color:var(--ink-2); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase }
.st-promodots{ display:flex; gap:8px; justify-content:center; padding:0 0 18px }
.st-promodots button{ width:9px; height:9px; border-radius:50%; border:1px solid var(--gold); background:transparent; padding:0; cursor:pointer }
.st-promodots button.is-on{ background:var(--gold) }
@media (max-width:820px){ .st-promocard{ grid-template-columns:1fr; padding:30px 0 22px } .st-promotrack{ min-height:0 } }
.st-promoicon{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--gold) }
.st-promoicon svg{ width:46%; height:46% }

/* AI description publicada na pagina do produto (132) */
.st-aidesc { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #333; }
.st-aidesc p { margin: 0 0 8px; }
.st-aidesc-tech { color: #666; }
.st-aidesc-care summary { cursor: pointer; font-weight: 600; color: #333; }
.st-aidesc-care p { margin-top: 6px; color: #555; }

/* ── O FEED DA HOME DO LOJISTA (13/09/2026) ──────────────────────────
   Uma coluna de cartoes horizontais: foto 1:1 a esquerda (a mesma
   proporcao das fotos de IA), texto no meio, UMA acao a direita.
   Filtros na linha do titulo, sem rotulo em cima (lei 6.4). Botao na
   regua da loja (.st-btn) — dourado solido e o unico primario da
   fileira; "In cart" recua para o secundario. ── */
.st-feedfilters{ display:flex; gap:6px; flex-wrap:nowrap; align-items:center }
.st-feedfilter{ height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--gold-faint); font:inherit; font-size:12px; font-weight:600; color:var(--ink);
  -webkit-text-fill-color:var(--ink); cursor:pointer; white-space:nowrap }
.st-feedfilter:hover{ border-color:var(--gold) }
.st-feedfilter.is-on{ background:var(--gold); border-color:var(--gold); color:#fff; -webkit-text-fill-color:#fff }
.st-feedlist{ display:grid; gap:12px }
.st-feedcard{ display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:18px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper) }
.st-feedcard:hover{ border-color:var(--gold) }
.st-feedthumb{ display:flex; align-items:center; justify-content:center; width:64px; height:64px;
  border:1px solid var(--line); border-radius:8px; background:var(--gold-faint); overflow:hidden }
.st-feedthumb img{ width:100%; height:100%; object-fit:cover }
.st-feedthumb svg{ width:30px; height:30px; color:#DCD2BA }
.st-feedthumb.big{ width:132px; height:132px; border-radius:10px }
.st-feedthumb.big svg{ width:56px; height:56px }
.st-feedcover{ width:132px; height:132px; border-radius:10px; overflow:hidden; background:var(--gold-faint);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center }
.st-feedcover img{ width:100%; height:100%; object-fit:cover }
.st-feedcover svg{ width:56px; height:56px; color:#DCD2BA }
.st-feedcover.gold{ flex-direction:column; background:var(--ink); border-color:var(--ink); color:var(--gold);
  -webkit-text-fill-color:var(--gold); font-family:var(--display) }
.st-feedcover.manual{ flex-direction:column; background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep);
  -webkit-text-fill-color:var(--gold-deep); font-family:var(--display) }
.st-feedcover.manual span{ font-size:22px; font-weight:600; letter-spacing:-.3px }
.st-feedcover.manual small{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; margin-top:4px }
/* o video do manual (lei 11.227): miniatura + play; sem miniatura, a capa do manual */
.st-feedcover.video{ position:relative; flex-direction:column; background:var(--ink); border-color:var(--ink); color:var(--gold); -webkit-text-fill-color:var(--gold); font-family:var(--display) }
.st-feedcover.video span{ font-size:22px; font-weight:600; letter-spacing:-.3px }
.st-feedcover.video small{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; margin-top:4px }
.st-feedcover.video img{ position:absolute; inset:0; opacity:.85 }
.st-feedcover.video .st-play{ position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-40%,-50%); border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)) }
.st-feedcover.video .st-dur{ position:absolute; right:6px; bottom:6px; font:600 10.5px/1 var(--sans); color:#fff; -webkit-text-fill-color:#fff; background:rgba(0,0,0,.55); padding:3px 5px; border-radius:4px }
/* o video na pagina do manual (knowledge.html) */
.st-kvideo{ margin:0 0 22px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--ink) }
.st-kvideo video{ display:block; width:100%; max-height:520px; background:#000 }
.st-kvideo-cap{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:13px; color:var(--muted); background:var(--paper) }
/* a conta dele: vencido = reto com barra a esquerda (status cor+forma, UX Lab 6) */
.st-feedcover.due{ flex-direction:column; background:var(--red-soft); border-color:var(--red); color:var(--red); -webkit-text-fill-color:var(--red); font-family:var(--display) }
.st-feedcover.pay{ flex-direction:column; background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); font-family:var(--display) }
.st-feedcover.ship, .st-feedcover.order{ flex-direction:column; background:var(--green-soft); border-color:var(--green); color:var(--green); -webkit-text-fill-color:var(--green); font-family:var(--display) }
.st-feedcover.order{ background:var(--gold-faint); border-color:var(--line); color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.st-feedcover.due span, .st-feedcover.pay span, .st-feedcover.ship span, .st-feedcover.order span{ font-size:20px; font-weight:600; letter-spacing:-.3px }
.st-feedcover.due small, .st-feedcover.pay small, .st-feedcover.ship small, .st-feedcover.order small{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; margin-top:4px }
.st-feedcard[data-kind="overdue"]{ border-left:4px solid var(--red); border-radius:4px 12px 12px 4px }
.st-feedcover.gold span{ font-size:22px; font-weight:600; letter-spacing:-.3px }
.st-feedcover.gold small{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; margin-top:4px }
.st-feedbody{ min-width:0 }
.st-feedbody .st-kick{ margin-bottom:4px }
.st-feedtitle{ margin:0; font-family:var(--display); font-size:16px; font-weight:600; line-height:1.3; color:var(--ink) }
.st-feedtitle a{ color:inherit; -webkit-text-fill-color:inherit; text-decoration:none }
.st-feedtitle a:hover{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.st-feedtext{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-2) }
.st-feedbody .st-sku{ margin-top:6px }
.st-feedprice{ margin-top:4px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap }
.st-feedprice .st-whole{ margin-top:0 }
.st-feedprice .st-gate{ margin-top:0 }
.st-feedthumbs{ display:flex; gap:8px; margin-top:10px }
.st-feedacts{ display:flex; justify-content:flex-end }
.st-feedact{ white-space:nowrap }
.st-feedincart{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep);
  -webkit-text-fill-color:var(--gold-deep) }
@media (max-width:720px){
  .st-feedcard{ grid-template-columns:96px minmax(0,1fr); }
  .st-feedcover, .st-feedthumb.big{ width:96px; height:96px }
  .st-feedacts{ grid-column:1 / -1; justify-content:flex-start }
  #st-feed .st-phead{ flex-direction:column; align-items:flex-start }
}

/* ── SERVICES DO LOJISTA (13/09/2026): um envelope = um pedido; a tela
   comeca pelo numero do envelope, o peso e obrigatorio; linha do tempo
   Requested › Received › In service › Complete e os dois pesos ── */
.sr-link{ color:var(--ink); -webkit-text-fill-color:var(--ink); text-decoration:none }
.sr-link:hover{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
.sr-sub{ font-size:11px; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.sr-err{ margin:0 0 12px; padding:10px 12px; border-radius:8px; background:var(--red-soft); color:var(--red);
  -webkit-text-fill-color:var(--red); font-size:12.5px; font-weight:600 }
.sr-ferr{ display:block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--red); -webkit-text-fill-color:var(--red) }
.sr-fields .st-field textarea{ width:100%; padding:9px 12px; border-radius:8px; border:1px solid rgba(205,178,122,.32);
  background:var(--gold-faint); font:inherit; font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink);
  line-height:1.45; resize:vertical; min-height:56px }
.sr-fields .st-field textarea:focus{ outline:none; border-color:var(--gold) }
/* sem o Service (16/09: o cliente nao escolhe o servico), a cabeca do
   form e envelope · pecas · peso numa linha de tres — nada solto */
.sr-fields.sr-head{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media(max-width:620px){ .sr-fields.sr-head{ grid-template-columns:1fr } }
.sr-photo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.sr-photowrap{ position:relative; display:inline-block }
.sr-photowrap img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block }
.sr-photodel{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); font:inherit; font-size:13px; line-height:1; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); cursor:pointer }
/* READ WITH AI no envelope do lojista (15/09/2026): Upload, o botao de
   leitura e o quadro PROPOSED — o mesmo desenho do Office */
.sr-upbtn{ cursor:pointer; display:inline-flex; align-items:center }
.sr-ai{ border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:var(--gold-faint) }
.sr-aihead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.sr-aihead .st-btn{ margin-left:auto }
.sr-src{ display:inline-block; padding:1px 8px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.06em; background:var(--gold-soft); color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); vertical-align:middle }
.sr-airow{ display:grid; grid-template-columns:96px minmax(0,1fr) 52px 44px; align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--line); font-size:12.5px }
.sr-airow:first-of-type{ border-top:none; margin-top:6px }
.sr-airow .k{ color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
.sr-airow .v{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sr-airow.same .v{ font-weight:400 }
.sr-airow .s{ justify-self:end; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.sr-aipct{ justify-self:end; min-width:44px; text-align:center; font-weight:600; font-size:11px; line-height:17px; padding:0 6px; font-variant-numeric:tabular-nums }
.sr-aipct.hi{ background:#E6F4EA; color:#1B7F3B; -webkit-text-fill-color:#1B7F3B; border-radius:999px }
.sr-aipct.mid{ background:#FFF3DD; color:#9A6A00; -webkit-text-fill-color:#9A6A00; border-radius:4px }
.sr-aipct.lo{ background:#FDE8E6; color:#B3261E; -webkit-text-fill-color:#B3261E; border-left:3px solid #B3261E; padding-left:3px }
.sr-foot{ border-top:1px solid var(--line-2); padding-top:16px; margin-top:16px }
.sr-actsfoot{ justify-content:flex-end; margin-top:18px }
/* linha do tempo */
.sr-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:6px 0 4px; position:relative }
.sr-steps::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:9px; height:2px; background:var(--line) }
.sr-step{ position:relative; text-align:center; padding-top:26px }
.sr-step .sr-dot{ position:absolute; left:50%; top:2px; width:16px; height:16px; margin-left:-8px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line) }
.sr-step b{ display:block; font-size:12.5px; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.sr-step small{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px; min-height:14px }
.sr-step.done .sr-dot{ background:var(--green); border-color:var(--green) }
.sr-step.done b{ color:var(--ink); -webkit-text-fill-color:var(--ink) }
.sr-step.now .sr-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft) }
.sr-step.now b{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
/* os fatos do envelope: quatro caixas na mesma altura (11.79) */
.sr-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px }
.sr-fact{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--gold-faint) }
.sr-fact span{ display:block; font-size:11px; font-weight:600; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.sr-fact b{ display:block; font-size:16px; font-weight:600; margin-top:4px }
.sr-fact small{ display:block; font-size:11px; margin-top:3px; color:var(--red); -webkit-text-fill-color:var(--red) }
.sr-fact.bad{ border-color:var(--red); background:var(--red-soft) }
.sr-fact.bad b{ color:var(--red); -webkit-text-fill-color:var(--red) }
.sr-gallery{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.sr-gallery img{ width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
@media (max-width:720px){ .sr-facts{ grid-template-columns:1fr 1fr } .sr-steps b{ font-size:11px } }
/* photo drop: o QR ao lado do texto, dentro do form (13/09) */
.sr-drop{ display:flex; gap:18px; align-items:center; border:1px solid var(--gold); border-radius:12px; padding:14px 16px; background:var(--gold-faint) }
.sr-dropqr{ flex:0 0 132px; width:132px; height:132px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px; box-sizing:border-box }
.sr-dropqr svg{ width:100%; height:100% }
.sr-droptx{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.sr-droptx b{ font-size:14px }
.sr-droptx span{ font-size:12.5px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); line-height:1.5 }
.sr-droptx small{ font-size:11px; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3); word-break:break-all }
.sr-droptx .st-btn{ align-self:flex-start; margin-top:4px }
.sr-acts{ margin-bottom:12px }

/* ── QR MODAL (13/09/2026): o QR abre GRANDE no meio da tela — o usuario
   trabalha no PC e fotografa com o celular ── */
.qr-modal{ position:fixed; inset:0; z-index:400; background:rgba(23,24,26,.55); display:flex; align-items:center; justify-content:center; padding:20px }
.qr-modalbox{ width:360px; max-width:100%; background:#fff; border-radius:16px; padding:24px 24px 20px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.25) }
.qr-modalqr{ width:260px; height:260px; padding:8px; box-sizing:border-box; border:1px solid #ECE7DB; border-radius:10px; background:#fff }
.qr-modalqr svg{ width:100%; height:100% }
.qr-modalbox b{ font-size:16px; margin-top:6px }
.qr-modalbox span{ font-size:12.5px; line-height:1.5; color:#5F615E; -webkit-text-fill-color:#5F615E }
.qr-modalcount{ font-size:13px; font-weight:600; color:#8A7444; -webkit-text-fill-color:#8A7444 }
.qr-modalbox small{ font-size:10.5px; color:#8B8D89; -webkit-text-fill-color:#8B8D89; word-break:break-all }
.qr-modalbox .btn, .qr-modalbox .st-btn{ margin-top:8px }

/* a caixa do QR abaixo das fotos, centralizada (13/09) */
/* menor e no pe do form (Paulo 15/09: "ocupar menos espaco");
   16/09: medidas e fontes IDENTICAS a .pdrop do Office (regra da caixa unica do QR) */
.sr-qrrow{ display:flex; justify-content:center }
.sr-qrbox{ width:100%; max-width:520px; display:flex; gap:14px; align-items:center; border:1px solid #ECE7DB; border-radius:10px; padding:10px 12px; background:#FBF8F1 }
.sr-qrbig{ flex:0 0 120px; width:120px; height:120px; padding:6px; box-sizing:border-box; border:1px solid #ECE7DB; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center }
.sr-qrbig svg{ width:100%; height:100% }
.sr-qrtx{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.sr-qrtx b{ font-size:13px }
.sr-qrtx span{ font-size:12px; color:#5F615E; -webkit-text-fill-color:#5F615E; line-height:1.45 }
.sr-qrcount{ font-size:12px; font-weight:600; color:#8A7444; -webkit-text-fill-color:#8A7444; min-height:14px }
.sr-qrtx small{ font-size:10px; color:#8B8D89; -webkit-text-fill-color:#8B8D89; word-break:break-all }

/* ── PHOTO DROP (13/09/2026, regra 11.96): a caixa do QR que abre a camera
   do celular — nasce aberta, centralizada abaixo das fotos ── */
/* CAIXA MENOR, NO PE DA TELA (Paulo 15/09/2026: "o campo do QR code para
   captura deve ficar embaixo, na ultima parte da tela, para ocupar menos
   espaco; a caixa e o QR podem ser menores") — QR de 200 para 120 px */
.pdrop-row{ display:flex; justify-content:center; margin-top:14px }
.pdrop{ width:100%; max-width:520px; display:flex; gap:14px; align-items:center; border:1px solid #ECE7DB; border-radius:10px; padding:10px 12px; background:#FBF8F1 }
.pdrop-qr{ flex:0 0 120px; width:120px; height:120px; padding:6px; box-sizing:border-box; border:1px solid #ECE7DB; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center }
.pdrop-qr svg{ width:100%; height:100% }
.pdrop-tx{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.pdrop-tx b{ font-size:13px }
.pdrop-tx span{ font-size:12px; color:#5F615E; -webkit-text-fill-color:#5F615E; line-height:1.45 }
.pdrop-count{ font-size:12px; font-weight:600; color:#8A7444; -webkit-text-fill-color:#8A7444; min-height:14px }
.pdrop-tx small{ font-size:10px; color:#8B8D89; -webkit-text-fill-color:#8B8D89; word-break:break-all }

/* ── O CONTROLE DO CLIENTE DO SITE (customers.html, 13/09/2026) ──
   A nota da loja e a senha temporaria usam a mesma regua dos campos
   .st-field; classe propria porque a ficha nao e formulario. */
.st-actext{ width:100%; margin-top:6px; padding:9px 12px; border-radius:8px; resize:vertical;
  border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit;
  font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-actext:focus{ outline:none; border-color:var(--gold) }
.st-actemp{ font-size:15px; font-weight:600; letter-spacing:.06em; font-variant-numeric:tabular-nums }

/* Back/Save nas duas pontas da ficha do cliente (13/09) */
.st-formacts{ display:flex; gap:10px; align-items:center }
.st-formfoot.st-ends{ justify-content:space-between }
.st-formfoot.st-ends .st-msg{ margin-left:auto; margin-right:10px }

/* Preferences do cliente final: chips de multipla escolha na ficha (13/09) */
.st-pgroup{ margin:0 0 14px }
.st-plabel{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); margin:0 0 6px }
.st-pchips{ display:flex; flex-wrap:wrap; gap:8px }
.st-pchip{ display:inline-flex; align-items:center; height:var(--ctl-h,32px); padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--gold-faint); font:inherit; font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink); cursor:pointer }
.st-pchip.on{ background:var(--gold-soft); border-color:var(--gold); font-weight:600 }

/* "This number is my WhatsApp" no Create account da loja (13/09 noite) */
.st-sichk{ flex-direction:row; align-items:center; gap:8px }
.st-sichk input{ width:15px; height:15px; margin:0; accent-color:var(--gold) }
.st-sichk span{ font-size:12.5px; font-weight:500 }

/* ── A PESSOA AO LADO DA LOJA + MY PROFILE (Paulo 14/09/2026, por voz:
   "do lado do meu cliente o avatar e o nome dele, o bonequinho... igual
   ao perfil do W18k; e o botaozinho pra modificar a cor"). Mesmo desenho
   do chrome do Office (css/base.css .chrome-user/.chrome-profile):
   avatar redondo translucido, nome em 600, bonequinho e sair em 30px. ── */
.st-left{ display:flex; align-items:center; gap:18px; min-width:0 }
.st-me{ display:flex; align-items:center; gap:8px; min-width:0; padding-left:18px;
        border-left:1px solid rgba(128,128,128,.35) }
.st-meav{ display:grid; place-items:center; width:30px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.24); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff); flex:none }
.st-mewho{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }
.st-mebtn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:999px; border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.14); color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff);
  cursor:pointer; padding:0; font:inherit }
.st-mebtn:hover{ background:rgba(255,255,255,.28) }
@media(max-width:700px){
  .st-left{ grid-area:logo; gap:10px }
  .st-me{ padding-left:10px; gap:6px }
  .st-mewho{ display:none }
}

/* a PAGINA My profile: cartoes lado a lado que fecham na mesma altura
   (lei 11.78), avatar grande + nome forte, campo travado em dourado */
.st-ppgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch }
.st-ppcard{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  display:flex; flex-direction:column; gap:12px }
.st-ppcard.wide{ grid-column:1 / -1 }
.st-ppt{ font-family:var(--display); font-size:15px; font-weight:600; color:var(--gold-deep);
  -webkit-text-fill-color:var(--gold-deep) }
.st-ppid{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.st-ppavatar{ width:56px; height:56px; border-radius:999px; background:var(--gold); display:grid; place-items:center;
  font-size:18px; font-weight:600; color:#fff; -webkit-text-fill-color:#fff; flex:none }
.st-ppname{ font-size:17px; font-weight:600 }
.st-ppsub{ font-size:13px; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3); margin-top:2px }
.st-ppcode{ width:96px; margin-left:auto; text-align:center; font-weight:600 }
.st-ppcode input[readonly]{ background:var(--gold-soft); border-color:var(--gold-soft); text-align:center }
.st-pprow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end }
.st-pprow .st-btn{ height:38px }
.st-colorpick{ display:flex; align-items:center; gap:10px }
.st-colorpick input[type=color]{ width:64px; height:38px; padding:2px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper); cursor:pointer }
.st-ppacts{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap }
@media(max-width:700px){ .st-ppgrid{ grid-template-columns:1fr } }

/* APPEARANCE ORGANIZADA (Paulo 14/09/2026: "organiza isso pra mim, esta
   muito feio essa tela"): tres cartoes na mesma altura — logo, cor da
   loja, ajuste de preco — e o banner embaixo, largura inteira */
.st-apgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; margin-bottom:22px }
.st-apcard{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--paper);
  display:flex; flex-direction:column; gap:12px; min-height:150px }
.st-apt{ font-size:11px; font-weight:600; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.st-aplogo{ height:64px; border-radius:8px; border:1px dashed var(--line); background:var(--gold-faint);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 12px }
.st-aplogo img{ max-height:48px; max-width:100%; object-fit:contain }
.st-aplogo .st-word{ font-family:var(--display); font-size:15px; font-weight:600; color:var(--gold-deep);
  -webkit-text-fill-color:var(--gold-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-apacts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto }
.st-apacts .st-btn{ height:38px }
.st-apacts input[type=color]{ width:64px; height:38px; padding:2px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper); cursor:pointer }
.st-apacts input[type=number]{ width:96px; height:38px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(205,178,122,.32); background:var(--gold-faint); font:inherit; font-size:13px }
.st-apex{ height:38px; display:flex; align-items:center; font-size:13px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2) }
@media(max-width:900px){ .st-apgrid{ grid-template-columns:1fr } }

/* A PESSOA NAO PISA NO NOME DA LOJA (Paulo 14/09/2026, print: o chip do
   contato sobrepunha "52twenty Jewelry"): a marca + nome da loja nao encolhem
   (flex:none), quem cede e o nome da pessoa, com reticencias. A barra segue
   OURO SOLIDO como sempre foi — a opcao C (barra branca) foi vista ao vivo e
   rejeitada: "detestei as cores, volte como era". */
.st-left > .st-logo{ flex:none; max-width:56% }
.st-left{ gap:12px }
.st-me{ padding-left:12px; gap:7px }
.st-mewho{ font-size:12.5px }

.st-logo .st-mono, .st-logo img{ flex:none }
.st-me{ flex:1 1 auto; min-width:0; overflow:hidden }
.st-mewho{ max-width:160px }
@media(max-width:700px){ .st-left > .st-logo{ max-width:none } }

/* A PESSOA PRIMEIRO, A JOALHERIA DEPOIS, O BONEQUINHO DEPOIS (Paulo 14/09/2026) */
.st-left--pessoa{ gap:10px }
.st-left--pessoa .st-mewho{ display:inline-block; max-width:180px; font-size:13.5px }
.st-left--pessoa .st-logo{ gap:8px; padding-left:12px; border-left:1px solid rgba(255,255,255,.35); flex:0 1 auto; min-width:0; max-width:none }
.st-left--pessoa .st-mename{ margin-left:0; max-width:190px; overflow:hidden; text-overflow:ellipsis }
.st-left--pessoa .st-mebtn{ margin-left:2px }
.st-headrow{ gap:16px }
.st-search{ width:360px }
@media(max-width:700px){ .st-left--pessoa .st-mewho{ display:inline-block; max-width:110px } .st-left--pessoa .st-logo{ display:none } }

/* READ WITH AI no New product do lojista (15/09/2026): o selo PROPOSED ao
   lado do rotulo (some quando ele digita), os botoes sob a foto, a nota
   da leitura e a barra que pulsa enquanto o motor le */
.st-src{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--gold-soft); color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep);
  vertical-align:middle }
.st-pnew{ grid-template-columns:260px minmax(0,1fr) }
.st-pphotoact{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.st-ainote{ margin-top:12px; font-size:12.5px; color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); line-height:1.45 }
.st-ainote.bad{ color:var(--red); -webkit-text-fill-color:var(--red) }
.st-aibar{ height:5px; margin-top:8px; border-radius:3px; background:var(--gold-soft); overflow:hidden }
.st-aibar i{ display:block; height:100%; width:40%; background:var(--gold); animation:st-aipulse 1.4s linear infinite }
@keyframes st-aipulse{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(250%) } }
.st-airows{ margin:8px 0 0; border-top:1px solid var(--line) }
.st-airows > div{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--line) }
.st-airows dt{ color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.st-airows dd{ margin:0; font-weight:600; text-align:right }
.st-aicheck{ margin-top:8px; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
@media(max-width:760px){ .st-pnew{ grid-template-columns:1fr } }

/* ═══ SIMILAR ITEMS na loja (BUILD-similar-items §4.1, 16/09/2026): o card da
   vitrine em versao com foto + diferenca + estoque + Add to cart; compact =
   no carrinho e no feed (linha horizontal). ═══ */
.st-simsec{ margin-top:18px }
.st-simsec:first-child{ margin-top:0 }
.st-simtitle{ font-family:var(--display); font-size:18px; font-weight:600; margin:0 0 12px }
.st-simgrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
@media(max-width:1100px){ .st-simgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:700px){ .st-simgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.st-simcard{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); min-width:0 }
.st-simimg{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:var(--gold-faint); border-bottom:1px solid var(--line-2) }
.st-simimg svg{ width:56px; height:56px; color:#DCD2BA }
.st-simimg img{ width:100%; height:100%; object-fit:cover; display:block }
.st-simbody{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:3px }
.st-simbody .st-name{ margin:2px 0 4px }
.st-simdiff{ font-size:12px; color:var(--ink-2) }
.st-simpct{ font-weight:400; color:var(--ink-3); font-size:11.5px }
.st-simstock{ font-size:11.5px; color:var(--ink-3); margin-top:2px }
.st-simbody .st-btn{ margin-top:8px; align-self:flex-start }
/* compacto: foto pequena a esquerda, texto a direita, uma linha por peca */
.st-linesim{ grid-column:1 / -1; padding:10px 0 4px 78px }
.st-simnote{ font-size:12.5px; font-weight:600; color:var(--gold-deep); margin:6px 0 10px }
.st-simgrid:has(.st-simcard.compact){ grid-template-columns:1fr; gap:8px }
.st-simcard.compact{ display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center }
.st-simcard.compact .st-simimg{ aspect-ratio:1/1; border-bottom:0; border-right:1px solid var(--line-2) }
.st-simcard.compact .st-simbody{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:8px 12px }
.st-simcard.compact .st-name{ flex:1 1 220px }
.st-simcard.compact .st-name{ margin:0; -webkit-line-clamp:1 }
.st-simcard.compact .st-simbody .st-btn{ margin-top:0 }
@media(max-width:700px){ .st-linesim{ padding-left:0 } }
.st-simhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.st-simhead .st-simtitle{ margin:0 }

/* o hero do site do CLIENTE FINAL do lojista (?b=CODE) — so a foto de
   modelo ou peca da biblioteca de midia, sem texto da W18k (lei 11.182,
   19/09/2026; a regra de 10/09 continua: o que e nosso nao entra na loja
   dele — por isso nunca o showroom nem o texto de atacado) */
.st-hero.st-tenant { min-height: 0; padding: 0; }
.st-hero.st-tenant .st-heroimg { position: static; }
.st-hero.st-tenant .st-heroimg img { display: block; width: 100%; height: min(56vh, 560px); object-fit: cover; object-position: 50% 30%; }

/* ── O APP DO LOJISTA NO CELULAR (lei 11.302; Paulo 26/09/2026: "apenas as funcoes
   que tragam mais vendas" + "o app tem que caber nas telas de celulares"; 01/10/2026,
   lei 11.357: "o Shop e o Feed, e la em cima o carrinho apenas, e tambem embaixo vai
   ser o favorites") ─────────
   So vale dentro do app (html.is-app, posto pela portals/app-bridge.js). A barra de
   abas do portal e o hamburguer saem; entram as TRES abas embaixo (Shop · Feed ·
   Favorites), no desenho de app de celular; o carrinho mora no topo. O rodape do
   site nao tem papel no app. */
html.is-app #st-nav, html.is-app .st-burger, html.is-app #st-foot{ display:none !important }
/* a caixa que ainda espera o servidor nao aparece vazia na troca de aba (05/10/2026) */
html.is-app .st-panel:empty, html.is-app .st-side:empty{ display:none }
html.is-app body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)) }
html.is-app .st-head{ padding-top:env(safe-area-inset-top) }
.st-apptabs{ display:none }
html.is-app .st-apptabs{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)) }
html.is-app .st-apptab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:48px;
  font-size:11px; font-weight:600; text-decoration:none; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
html.is-app .st-apptab.on{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
html.is-app .st-apptab-n{ position:absolute; top:2px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--gold); color:var(--ink); -webkit-text-fill-color:var(--ink); font-size:10.5px; line-height:18px; text-align:center }
.st-appview{ display:none }
html.is-app .st-appview{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.55); background:transparent; color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff);
  font:inherit; font-size:12px; font-weight:600; white-space:nowrap }
html.is-app .st-appview.on{ background:var(--gold); border-color:var(--gold); color:var(--ink); -webkit-text-fill-color:var(--ink) }
html.is-app .st-appview span:empty{ display:none }
html.is-app .st-appview.on{ width:auto; padding:0 12px }
/* na vista do cliente os tres botoes somem: o olho sobe para o lugar deles e a busca fica com a linha inteira */
html.is-app.is-cv .st-appview{ grid-area:burger }
html.is-app .st-appview{ grid-area:burger; justify-self:end; width:44px; height:44px; padding:0; justify-content:center }
/* topo do app (28/09/2026): avatar + Sign out · Dashboard · Account em cima; busca com o olho embaixo */
.st-appicons{ display:none }
html.is-app .st-headrow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"logo burger" "search search" }
html.is-app .st-mebtn{ display:none }
/* no app so o avatar, sem o nome (Paulo 28/09/2026: "so o avatar sem nome pra economizar espaco") */
/* no topo do app o NOME DA LOJA no lugar do avatar (Paulo 28/09/2026: "ao inves do avatar coloca nome da loja");
   nome longo corta com reticencias para caber ao lado dos quatro botoes */
html.is-app .st-mewho, html.is-app .st-left--pessoa .st-meav{ display:none }
html.is-app .st-left--pessoa{ min-width:0 }
html.is-app .st-left--pessoa .st-logo{ display:flex !important; min-width:0; max-width:100%; padding-left:0; border-left:0 }
html.is-app .st-left--pessoa .st-mename{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px }
html.is-app .st-appicons{ display:inline-flex; align-items:center; gap:6px; grid-area:burger; justify-self:end }
html.is-app .st-appicon{ display:inline-flex; background:transparent; cursor:pointer; font:inherit; padding:0; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55); color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }
html.is-app .st-appicon.on{ background:#fff; border-color:#fff; color:var(--ink); -webkit-text-fill-color:var(--ink) }
/* o carrinho do topo (01/10/2026): a contagem no canto, como a da aba */
html.is-app .st-appicon{ position:relative }
html.is-app .st-appicon-n{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--gold); color:var(--ink); -webkit-text-fill-color:var(--ink); font-size:10.5px; font-weight:600; line-height:18px; text-align:center }
html.is-app .st-appicon.on .st-appicon-n{ background:var(--ink); color:#fff; -webkit-text-fill-color:#fff }
/* o Favorites, o Cart e o Account do topo do portal nao entram no app: embaixo tem o coracao, em cima o carrinho */
html.is-app .st-headacts{ display:none !important }
/* o WhatsApp flutuante do rep sobe acima da barra de abas — cobria a aba Favorites (11.242) */
html.is-app .st-repfab{ bottom:calc(64px + 14px + env(safe-area-inset-bottom)) }
/* a vista do cliente e so a vitrine: a barra fica so com Shop e Favorites (Paulo 08/10/2026; a saida segue o olho do topo) */
/* CABER NO CELULAR (lei 11.302, 26/09/2026 — medido a 390 e 360): a fileira de
   filtros do Feed ROLA dentro dela (11.243) em vez de alargar a pagina, e a faixa
   Needs attention empilha titulo e pastilhas e deixa o rotulo quebrar. Vale no
   site pelo telefone tambem, nao so no app. */
@media(max-width:700px){
  .st-feedfilters{ overflow-x:auto; max-width:100%; min-width:0; scrollbar-width:none }
  .st-feedfilters::-webkit-scrollbar{ display:none }
  .st-feedfilter{ flex:0 0 auto }
  .st-panel, .st-feed, .st-feedcard{ min-width:0 }
  .attn-panel{ flex-direction:column; align-items:stretch; gap:10px }
  .attn-card{ max-width:100%; height:auto; min-height:38px; padding:6px 14px }
  .attn-l{ white-space:normal }
}

/* O FILTRO DO SHOP NO CELULAR (26/09/2026 no app; 30/09/2026 no navegador do
   celular tambem — Paulo: "os filtros estao enormes, dificil chegar nas pecas"):
   fecha no titulo e as pecas aparecem primeiro; o toque no Filter abre
   (category.html poe .is-open). O filtro aplicado segue a vista nos chips. */
@media (max-width:700px){
  /* no telefone as duas caixas ficam em cima da grade: o Sort numa linha so
     (titulo + caixa), o Filter fechado no titulo (01/10/2026) */
  .st-sidecol{ gap:10px }
  .st-sortbox{ display:flex; align-items:center; gap:12px; padding:10px 14px }
  .st-sortbox .st-sidehead{ margin:0; flex:none }
  .st-sortbox .st-fsel{ flex:1 1 auto; width:auto; min-width:0 }
  #st-side{ padding:12px 14px 14px }
  #st-side:not(.is-open) > :not(.st-sidehead){ display:none }
  #st-side .st-sidehead{ margin-bottom:0; padding-bottom:0; border-bottom:0 }
  #st-side.is-open .st-sidehead{ margin-bottom:12px }
  #st-side .st-sidehead h3{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0 }
  #st-side .st-sidehead h3::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg) }
  #st-side.is-open .st-sidehead h3::after{ transform:translateY(2px) rotate(-135deg) }
}
/* NO APP O FILTRO ABRE FECHADO EM QUALQUER LARGURA (Paulo 01/10/2026, no emulador
   a 720px: "os filtros ja aparecem abertos e as fotos ficam la embaixo" + "ajustar
   os filtros para nao aparecerem abertos quando a pagina abre"): a regra de 700px
   acima vale tambem para html.is-app em tablet e emulador. */
html.is-app .st-sortbox{ display:flex; align-items:center; gap:12px; padding:10px 14px }
html.is-app .st-sortbox .st-sidehead{ margin:0; flex:none }
html.is-app .st-sortbox .st-fsel{ flex:1 1 auto; width:auto; min-width:0 }
html.is-app #st-side:not(.is-open) > :not(.st-sidehead){ display:none }
html.is-app #st-side .st-sidehead{ margin-bottom:0; padding-bottom:0; border-bottom:0 }
html.is-app #st-side.is-open .st-sidehead{ margin-bottom:12px }
html.is-app #st-side .st-sidehead h3{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0 }
html.is-app #st-side .st-sidehead h3::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg) }
html.is-app #st-side.is-open .st-sidehead h3::after{ transform:translateY(2px) rotate(-135deg) }

/* O APP NO CELULAR, EM TAMANHO DE CELULAR (Paulo 26/09/2026: "o feed esta
   passando a tela, diminui as fontes, ajusta pro celular"; lei 11.302-B). So
   dentro do app e so no telefone: o site no computador nao muda. O quadro do
   valor no feed media 96px com o numero a 20px e o "$5,700.00" saia pela borda;
   titulos a 26-28px e o espacamento largo do rotulo dourado quebravam cada
   cartao em tres linhas. */
@media (max-width:700px){
  html.is-app body{ font-size:13px }
  html.is-app .st-hero h1{ font-size:22px; line-height:1.2 }
  html.is-app .st-herotx{ padding:22px 0 }
  html.is-app .st-hero p{ margin-top:10px; font-size:12.5px; line-height:1.55 }
  html.is-app .st-heroacts{ margin-top:14px }
  html.is-app .st-kick{ font-size:9.5px; letter-spacing:.1em }
  html.is-app main h1, html.is-app .st-phead h1{ font-size:20px }
  html.is-app main h2{ font-size:16px }
  html.is-app .st-pdtitle{ font-size:18px }
  html.is-app .st-pdretail{ font-size:18px }
  html.is-app .st-pdretail.st-pdwsale{ font-size:24px }
  html.is-app .st-simtitle{ font-size:15px }
  html.is-app .st-btn{ font-size:12.5px; padding:0 14px }
  html.is-app .st-kpiv{ font-size:17px }
  /* o cartao do feed: quadro de 72px, numero que cabe nele, uma coluna de texto */
  html.is-app .st-feedlist{ gap:10px }
  html.is-app .st-feedcard{ grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px; align-items:start }
  html.is-app .st-feedcover, html.is-app .st-feedthumb.big{ width:72px; height:72px; border-radius:8px }
  html.is-app .st-feedcover svg, html.is-app .st-feedthumb.big svg{ width:32px; height:32px }
  html.is-app .st-feedcover span{ font-size:11px !important; letter-spacing:0 !important; max-width:100%; padding:0 2px; text-align:center; white-space:nowrap; line-height:1.2 }
  html.is-app #st-feed.st-panel{ padding:14px 12px }
  html.is-app .st-feedcover small{ font-size:8.5px !important; letter-spacing:.06em !important; margin-top:2px !important; text-align:center; padding:0 3px }
  html.is-app .st-feedtitle{ font-size:14px }
  html.is-app .st-feedtext{ font-size:12px; line-height:1.45 }
  html.is-app .st-feedacts{ grid-column:2; justify-content:flex-start }
  html.is-app .st-feedact{ height:30px; font-size:12px }
  html.is-app .st-feedprice .st-whole{ font-size:13px }
  /* Account: os numeros em duas colunas, caixa baixa; a saudacao numa linha so */
  html.is-app .st-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px }
  html.is-app .st-strip .st-kpi{ padding:10px 12px 12px }
  html.is-app .st-strip .st-kpiv{ font-size:16px; margin-top:4px }
  html.is-app .st-strip .st-kpil{ font-size:11px }
  html.is-app .st-strip .st-kpis{ font-size:10.5px; margin-top:3px }
  html.is-app #st-hello{ padding:12px 14px; margin-bottom:12px }
  html.is-app .st-hellorow{ gap:8px 12px; align-items:center }
  html.is-app .st-hellorow h2{ font-size:16px }
  html.is-app .st-hellodate{ margin-left:0; font-size:12px }
  html.is-app .st-hellorow .st-btn{ margin-left:auto; height:30px }
}
/* Resposta ao toque (skill emil-design-eng, 26/09/2026): vale no portal e no
   app do lojista (a tela do app E este portal). Transform so, ease-out forte. */
[class*="st-btn"] { transition: background-color .15s ease, border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1); }
[class*="st-btn"]:not(:disabled):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { [class*="st-btn"] { transition: none; } .st-aibar i { animation: none; width: 100%; opacity: .5; } }
/* A LOJA CONVIDA O TEAM DELA (26/09/2026, Adendo 338): a linha da equipe mede a
   regua (44) — nada quebra linha; o e-mail longo corta com reticencias (11.129) */
.st-teamtbl th, .st-teamtbl td{ white-space:nowrap }
@media (min-width:701px){ .st-teamtbl td:nth-child(2){ max-width:0; width:28%; overflow:hidden; text-overflow:ellipsis } }
.st-teamtbl td .st-inlinesel{ margin-top:-7px; margin-bottom:-7px; vertical-align:middle }
.st-teamacts .st-btn + .st-btn, .st-teamacts .st-btn + .st-rm{ margin-left:6px }
/* titulo que so o leitor de tela le (o botao ativo ja diz onde se esta) */
.st-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
/* BOTOES DO TOPO DO APP EM BRANCO COM O DESENHO DOURADO (Paulo 28/09/2026: "fundo branco e desenhos dourados
   pra um contraste melhor"); o ativo inverte: fundo dourado, desenho branco */
html.is-app .st-appicon, html.is-app .st-appview{ background:#fff; border:1px solid #fff;
  color:var(--chrome-deep, var(--gold-deep)); -webkit-text-fill-color:var(--chrome-deep, var(--gold-deep)); box-shadow:0 1px 3px rgba(0,0,0,.12) }
html.is-app .st-appicon.on, html.is-app .st-appview.on{ background:var(--chrome-deep, var(--gold-deep)); border-color:var(--chrome-deep, var(--gold-deep));
  color:#fff; -webkit-text-fill-color:#fff }
/* a barra de baixo: fundo branco e o desenho na cor da loja (Paulo 28/09/2026: "embaixo fundo branco com icones dourados" +
   "a cor deve ser a mesma que o cliente escolheu pro site dele"); a aba aberta ganha o traco em cima */
html.is-app .st-apptab{ color:var(--chrome-deep, var(--gold-deep)); -webkit-text-fill-color:var(--chrome-deep, var(--gold-deep)) }
html.is-app .st-apptab.on{ color:var(--chrome-deep, var(--gold-deep)); -webkit-text-fill-color:var(--chrome-deep, var(--gold-deep)); font-weight:700 }
html.is-app .st-apptab.on::before{ content:''; position:absolute; top:-6px; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px;
  background:var(--chrome-deep, var(--gold-deep)) }
/* New · Best Sellers · All centralizados (Paulo 28/09/2026) */
.st-title:has(> .st-scope){ justify-content:center }

/* O WHATSAPP DO VENDEDOR, FLUTUANDO E SEMPRE VISIVEL (Paulo 25/09/2026 —
   excecao ditada ao sticky zero: so este botao flutua). Verde da casa
   (lei 11.12: WhatsApp e botao verde), canto de baixo a direita. */
.st-repfab{ position:fixed; right:20px; bottom:20px; z-index:900;
  display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 24px;
  border-radius:28px; background:var(--green); color:#fff; -webkit-text-fill-color:#fff;
  font-weight:600; font-size:16px; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18) }
.st-repfab svg{ width:26px; height:26px }
.st-repfab:hover{ filter:brightness(1.06) }
/* SEMPRE A VISTA, COM O NOME (Paulo 01/10/2026: "Ask Dani, Ask Galina, os dois devem flutuar, seja
   na pagina ou no app, porque eles estao bloqueados, esta dificil de ve-los"): no celular o botao
   continua uma pilula com o nome do vendedor (o icone sozinho nao dizia quem e), e nada o cobre —
   no app ele sobe para cima da barra de abas e na pagina da peca nao se esconde mais */
@media (max-width:700px){
  .st-repfab{ right:12px; bottom:16px; height:48px; padding:0 18px 0 14px; font-size:15px; gap:8px }
  .st-repfab svg{ width:24px; height:24px }
}
html.is-app .st-repfab{ bottom:calc(64px + env(safe-area-inset-bottom) + 12px) }

/* Ship today or hold your order? — centrado, no topo do Shop, site e app (Paulo 10/10/2026; pacote 845) */
.st-bnpanel{ text-align:center; margin:0 0 14px }
.st-bnpanel .st-coracts{ justify-content:center }
/* A FAIXA DO PEDIDO SEGURADO (pacote 849): primeiro bloco do Shop e do Feed, nao flutua (sticky zero) */
.st-heldbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 16px;
  border:1px solid var(--gold); border-radius:12px; background:var(--gold-soft); color:var(--ink); font-size:13px; line-height:1.4 }
.st-heldbar .st-heldtxt{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; min-width:0 }
.st-heldbar .st-heldcut{ display:block; width:100%; color:var(--ink-2); font-size:12px }
.st-heldbar .st-btn-sm{ height:var(--ctl-h,32px); flex:none }
@media(max-width:560px){ .st-heldbar{ padding:10px 12px } .st-heldbar .st-btn-sm{ width:100%; justify-content:center } }
/* a cor no primeiro acesso (30/09/2026) */
.st-coroferta h2{ margin:0 0 12px; font-size:16px; font-weight:600 }
.st-corrow{ display:flex; flex-wrap:wrap; gap:10px }
.st-corsw{ width:44px; height:44px; border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer }
.st-corsw:hover{ box-shadow:0 0 0 2px var(--ink) }
.st-coracts{ margin-top:14px }
.st-coracts{ display:flex; flex-wrap:wrap; gap:10px }
.st-cornote{ margin:12px 0 0; font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:6px }
.st-cornote svg{ width:18px; height:18px }
/* a tarja branca no pe das fotos com texto (30/09/2026) */
.st-tape{ position:relative }
.st-tape::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:9%; background:#fff; pointer-events:none; z-index:1 }
.st-tape > img[src*="/media/photo/"]{ object-fit:cover }
/* a foto aberta grande (lightbox) tambem esconde o pe com texto */
.lb-img[src*="/media/photo/"]{ clip-path:inset(0 0 9% 0) }
/* A PAGINA DA PECA NO CELULAR (Paulo 30/09/2026: "tem que ver o preco sem scroll down, foto muito
   grande"): a foto mede no maximo um terco da tela e fica centrada; titulo e preco sobem para a
   primeira dobra. So no telefone — o computador nao muda. */
@media (max-width:700px){
  .st-pdimg{ width:min(100%, 27vh); margin:0 auto; }
  .st-pdtitle{ font-size:20px; margin-top:6px }
  .st-pdprice{ margin:8px 0 4px }
}

/* no celular a foto mede no maximo um terco da tela e o preco aparece sem rolar (Paulo 30/09/2026) */
@media (max-width:700px){ .st-lkhero img{ max-height:34vh } }
/* a fileira da peca abaixo da foto, no celular (30/09/2026) */
@media (max-width:700px){
  .st-pdacts.st-pdacts-top{ flex-wrap:nowrap; gap:8px; margin:12px 0 4px; align-items:center }
  .st-pdacts-top > .st-btn-lg{ padding:0 12px; flex:0 0 auto }
  .st-pdacts-top > #st-add{ flex:1 1 auto; min-width:0 }
  .st-pdacts-top > .st-btn-heart{ flex:0 0 42px; padding:0 }
  .st-pdacts-top > .st-qty{ flex:0 0 auto }
}
/* o Add to cart da peca num ouro mais leve (Paulo 30/09/2026: "ouro mais leve no botao"), tinta escura */
.st-pdacts #st-add{ background:#E6D6AE; border-color:#E6D6AE; color:var(--ink); -webkit-text-fill-color:var(--ink) }
.st-pdacts #st-add:hover{ background:#DCC89A; border-color:#DCC89A }
@media (max-width:700px){
  .st-pdacts-top > #st-share2{ flex:0 0 42px; padding:0 }
  .st-pdacts-top .st-sharelbl{ display:none }
  .st-pdacts-top > #st-add{ padding:0 8px; font-size:12.5px }
  .st-pdacts-top{ gap:6px }
}
@media (max-width:700px){
  .st-pdacts-top > #st-add{ white-space:nowrap }
  .st-pdacts-top > .st-qty button{ width:22px }
  .st-pdacts-top > .st-qty #st-q{ min-width:18px; text-align:center }
  .st-pdacts-top > a.st-btn-ghost{ padding:0 10px }
}
/* PAGINA DA PECA NO CELULAR, 2a rodada (Paulo 30/09/2026: "ficou muito pequena a foto, reduz as fontes de
   precos e descricao, pode diminuir 40% e aumentar a foto" + "pode ser o sinal do carrinho, nem precisa ser
   add to cart no celular"): foto maior, textos 40% menores, carrinho so o icone. O WhatsApp e o verde da marca. */
.st-addico{ display:none }
@media (max-width:700px){
  .st-pdimg{ width:min(100%, 38vh) }
  .st-pdacts-top > #st-add{ flex:0 0 46px; padding:0 }
  .st-pdacts-top .st-addlbl{ display:none }
  .st-pdacts-top .st-addico{ display:block; margin:0 auto }
  .st-pdacts-top{ justify-content:space-between }
  #st-pd .st-sku{ font-size:10px }
  #st-pd .st-pdtitle{ font-size:14px; line-height:1.3; margin-top:4px }
  #st-pd .st-stock{ font-size:11px }
  #st-pd .st-pdprice{ margin:6px 0 2px }
  #st-pd .st-pdretail{ font-size:15px }
  #st-pd .st-pdretail small{ font-size:10px !important }
  #st-pd .st-pdwhole{ font-size:11px; margin-top:2px }
  #st-pd .st-pdwhole small{ font-size:10px }
  #st-pd .st-spec{ font-size:11px; padding:7px 0 }
}
@media (max-width:700px){
  .st-pdimg.st-pdimg-mid{ margin:10px auto 0 }
  #st-pd .st-pdprice{ margin:4px 0 0 }
}
/* 30/09/2026: foto primeiro, medida pelo que sobra da tela visivel (svh), e os botoes na MESMA ALTURA
   da caixa de quantidade (a regra da casa: controle e botao na mesma regua) — 40px no celular, 42 no computador */
.st-pdacts .st-qty{ height:42px; margin-bottom:0 }
.st-pdacts .st-qty button{ height:40px }
@media (max-width:700px){
  .st-pdimg{ width:min(100%, 38vh, max(200px, calc(100svh - 400px))) }
  .st-pdacts.st-pdacts-top{ margin:10px 0 6px; align-items:stretch }
  .st-pdacts-top > *{ height:40px !important; box-sizing:border-box }
  .st-pdacts-top > .st-qty button{ height:38px }
}
/* Finances do lojista (30/09/2026) */
.fn-sub{ font-size:12px; color:var(--ink-3) }
#fn-strip{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media(max-width:900px){ #fn-strip{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
#fn-open, #fn-sched, #fn-line, #fn-stmt{ margin-top:16px }
.st-codate .st-tag{ margin-left:4px; white-space:nowrap }
/* o WhatsApp flutuante do vendedor fica A VISTA o tempo todo (Paulo 01/10/2026: "estao bloqueados, esta dificil
   de ve-los" — morreu o esconde de 30/09); o Back saiu da fileira em 01/10/2026 (lei 11.358) e mora na linha
   do crumb, fora da caixa */
@media (max-width:700px){
  .st-repfab{ transition:opacity .2s ease, transform .2s ease }
}
/* Certificates do lojista: a foto da peca na linha (30/09/2026) */
#ce-list .st-coorder > .ce-ph{ flex:0 0 64px; width:64px; height:64px }
#ce-list .st-coorder > .ce-ph + div{ flex:1; min-width:0 }
/* a foto da peca no carrinho (Paulo 30/09/2026: "no cart nao aparece a foto do produto"): por cima do
   icone; sem foto, some e o icone fica. Na loja do cliente dele, so a Studio (como no cartao). */
.st-lineimg{ position:relative; overflow:hidden }
.st-lineimg img.st-lineph{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff }
/* My profile do lojista: contato e enderecos (30/09/2026) */
.st-pprow-4{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.st-pprow-4 .pf-wide{ grid-column:span 3 }
.pf-same{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13px }
.pf-err{ display:block; font-style:normal; color:var(--red); font-size:12px; min-height:0 }
@media (max-width:700px){ .st-pprow-4{ grid-template-columns:1fr 1fr } .st-pprow-4 .pf-wide{ grid-column:span 2 } }

/* SAIR = ICONE AO LADO DO BONEQUINHO (Paulo 30/09/2026); o botao do Dashboard so vive no app */
.st-left--pessoa .st-outbtn{ margin-left:4px }
.st-outapp{ display:none }
html.is-app .st-outapp{ display:inline-flex }

/* O MENU CABE NA TELA DO COMPUTADOR, SEM BARRA DE ROLAGEM (Paulo 30/09/2026: "quando abri o joe gold na loja
   dele tinha uma barra de rolagem no proprio site, como se fosse maior que a tela"): com todas as abas o menu
   media 1378px dentro de 1200 e rolava com barra. No computador ele usa a largura da janela (ate 1440), aperta
   o respiro de cada item e, se ainda nao couber, quebra para a linha de baixo — nunca rola. O celular segue
   rolando sob o dedo, sem barra (bloco acima). */
@media (min-width:701px){
  .st-navrow{ max-width:1440px; flex-wrap:wrap; justify-content:center; overflow:visible; row-gap:0 }
  .st-navrow a, .st-navrow span{ padding:12px 11px }
}
@media (min-width:701px) and (max-width:1439px){
  .st-navrow{ padding:0 12px }
  .st-navrow a, .st-navrow span{ padding:12px 8px; font-size:13px }
}

/* Show more da loja (30/09/2026): o botao da casa, centrado, e a contagem ao lado */
.st-more{ display:flex; align-items:center; justify-content:center; gap:14px; margin:28px 0 8px }
.st-more span{ font-size:13px; color:var(--ink-3,#6F6960); -webkit-text-fill-color:var(--ink-3,#6F6960) }
/* a troca do e-mail de entrada (30/09/2026) */
.st-field .pf-mailrow{ display:flex; gap:8px; align-items:center; margin:0; font:inherit; text-transform:none; letter-spacing:0 }
.st-field .pf-mailrow input{ flex:1 1 auto; min-width:0 }
.st-field .pf-mailrow .st-btn{ flex:none }
.pf-mailacts{ display:flex; gap:8px; align-items:flex-end }
.pf-mailacts .st-btn{ white-space:nowrap }
@media (max-width:700px){ .pf-mailacts, .st-pprow-4 .pf-mailf{ grid-column:1 / -1 } .pf-mailacts{ justify-content:flex-end } }

/* SETTINGS › PAYMENT METHODS e SHIPPING METHODS DO LOJISTA (30/09/2026): as tabelas dos cadastros
   da loja dele — o campo dentro da celula ja mede 32px pela regra do .st-mtable; a caixinha e o
   estado vazio ficam no eixo. E a instrucao do metodo de pagamento no checkout do consumidor. */
.st-methtbl td input[type=checkbox]{ vertical-align:middle; margin:-3px 0 }
.st-methtbl td.st-empty{ text-align:left; padding:14px 12px }
.st-methtbl th, .st-methtbl td{ white-space:nowrap }
.st-methtbl td input[data-f="name"]{ width:100%; min-width:150px; max-width:300px }
.st-methtbl td input[data-f="note"]{ width:100%; min-width:220px; max-width:360px }
.st-optnote{ font-size:12px; color:var(--ink-2); margin-top:2px }

/* O STATEMENT DO CLIENTE DELE (30/09/2026): tabela da casa na ficha do consumidor; o Remove fica no eixo */
.st-stmt th, .st-stmt td{ white-space:nowrap }
.st-stmt td .st-msku{ display:inline; margin-left:6px }

/* FAIXA DA HORA NO APP DO IPHONE (Paulo 03/10/2026): o cabecalho nao e fixo, entao ao rolar a
   foto passava por baixo da hora e da bateria. Uma faixa fixa da cor do cabecalho cobre so a
   area da barra de status (zero fora do iPhone e fora do app). */
html.is-app body::before{ content:""; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); background:var(--chrome); z-index:200; pointer-events:none }

/* NA VISTA DO CLIENTE O MSRP E O PRECO (Paulo 03/10/2026, no app: "Retail msrp no site consumer
   deve ser maior e na cor dourada como se fosse o wholesale"): sem o atacado na tela, o MSRP
   toma o lugar e o desenho do preco do lojista — grande e dourado, no cartao e na peca. */
html.is-cv .st-retail{ font-size:13.5px; font-weight:600; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); margin-top:3px }
html.is-cv #st-pd .st-pdwhole{ font-size:24px; font-weight:600; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); letter-spacing:-.3px; line-height:1.25; margin-top:2px }
html.is-cv #st-pd .st-pdwhole small{ font-size:14px; font-weight:600; color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }

/* NA VISTA DO CLIENTE O OLHO E DISCRETO (Paulo 03/10/2026): sem a pilula dourada nem texto,
   so o contorno igual ao desligado, para o consumidor nao ler "Customer view" na tela. */
html.is-app.is-cv .st-appview.on{ width:44px; padding:0; background:transparent; border-color:rgba(255,255,255,.55); color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }

/* CAMERA OU LEITOR BLUETOOTH no botao da busca do app (03/10/2026): o menu da conta, embaixo do botao */
html.is-app .st-scanmenu{ top:calc(100% + 8px); width:220px; z-index:70; padding:4px 14px 14px }

/* O WHATSAPP DO VENDEDOR VIRA A QUARTA ABA NO APP (Paulo 03/10/2026): sem o botao flutuante; o
   icone e verde (WhatsApp e verde, lei 11.12) e o rotulo e o nome do vendedor */
html.is-app:not(.is-cv) .st-repfab{ display:none !important }
html.is-app .st-apptab-wa{ background:transparent; border:0; font:inherit; cursor:pointer }
/* "icone verde" (Paulo 03/10/2026): o simbolo dentro do circulo verde; "deve seguir o nosso verde escolhido nas marcas" (Paulo 04/10/2026) = --green */
html.is-app .st-apptab-wa svg{ width:30px; height:30px; padding:5px; border-radius:999px; background:var(--green); color:#fff; -webkit-text-fill-color:#fff }

/* CHECKOUT AGIL (03/10/2026): o contato e o endereco da conta numa linha, com Edit / Change a direita */
.st-sumrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 }
.st-sumrow .st-optname{ line-height:1.45; font-weight:500 }

/* BUY NOW LARANJA E CARRINHO AMARELO (Paulo 03/10/2026: "icone laranja igual da Amazon seria bom, e o
   carrinho de compras amarelo"): as cores de compra da Amazon, so nesses dois botoes do cartao */
.st-cardbuy{ background:#FFA41C; border-color:#FF8F00; color:#111; -webkit-text-fill-color:#111 }
.st-cardbuy svg{ width:17px; height:17px }
.st-cardbuy:hover{ background:#FA8900 }
.st-cardcart{ background:#FFD814; border-color:#FCD200; color:#111; -webkit-text-fill-color:#111 }
.st-cardcart:hover{ background:#F7CA00 }
/* O IPHONE NAO DA ZOOM NA BUSCA (Paulo 04/10/2026: "quando clica em search a tela se move e nao volta"): o iOS
   amplia sozinho o campo com letra menor que 16px; no app todo campo digitavel fica em 16px */
html.is-app input:not([type=checkbox]):not([type=radio]), html.is-app select, html.is-app textarea{ font-size:16px }
/* a pagina da peca com as cores do cartao (Paulo 04/10/2026): carrinho amarelo, Buy now laranja com o raio */
.st-btn-cartyel{ background:#FFD814; border-color:#FCD200; color:#111; -webkit-text-fill-color:#111 }
.st-btn-cartyel:hover{ background:#F7CA00 }
.st-btn-buynow{ background:#FFA41C; border-color:#FF8F00; color:#111; -webkit-text-fill-color:#111; padding-left:16px; padding-right:16px }
.st-btn-buynow:hover{ background:#FA8900 }
/* as fotos da peca lado a lado: desliza com o dedo, setas e pontinhos (Paulo 04/10/2026) */
.st-pdgal{ position:relative }
.st-pdgal.is-multi .st-pdimgs{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.st-pdgal.is-multi .st-pdimgs::-webkit-scrollbar{ display:none }
.st-pdgal.is-multi .st-pdimg{ flex:0 0 100%; scroll-snap-align:start; margin-top:0 }
.st-pdnav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.9); color:var(--ink); -webkit-text-fill-color:var(--ink); font-size:24px; line-height:1; cursor:pointer; z-index:2 }
.st-pdnav.prev{ left:8px } .st-pdnav.next{ right:8px }
.st-pddots{ display:flex; justify-content:center; gap:6px; margin-top:8px }
.st-pddots i{ width:7px; height:7px; border-radius:999px; background:var(--line) }
.st-pddots i.on{ background:var(--gold-deep) }
/* O HERO DO FEED NO APP BEM MENOR (Paulo 04/10/2026: "hero da pagina feed deve ser bem menor, nao ocupar a tela toda"):
   a foto vira uma faixa baixa e o texto encolhe, para os cartoes do feed aparecerem logo na primeira tela */
html.is-app .st-heroimg{ height:120px }
html.is-app .st-hero.st-tenant .st-heroimg img{ height:120px }
html.is-app .st-herotx{ padding:12px 0 }
html.is-app .st-hero h1{ font-size:18px; margin-top:6px }
html.is-app .st-hero p{ margin-top:6px; font-size:12px; line-height:1.45 }
html.is-app .st-heroacts{ margin-top:10px }
/* excluir a conta: acao destrutiva, fundo vermelho (azul nunca e fonte) */
.st-btn-del{ background:var(--red); border-color:var(--red); color:#fff; -webkit-text-fill-color:#fff }
.st-btn-del:hover{ background:#A33D24; border-color:#A33D24 }
/* AS ABAS DA CONTA (04/10/2026): Profile · Purchases · Finances · Statements em caixas, no topo das paginas da conta */
.st-contaabas{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 16px }
.st-contaabas a{ display:flex; align-items:center; justify-content:center; height:40px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font-size:13px; font-weight:600; color:var(--ink); -webkit-text-fill-color:var(--ink); text-decoration:none }
.st-contaabas a.on{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep) }
html.is-app[data-stmt] #fn-strip, html.is-app[data-stmt] #fn-open, html.is-app[data-stmt] #fn-sched, html.is-app[data-stmt] #fn-line{ display:none }
html.is-app:not([data-stmt]) #fn-stmt, html.is-app:not([data-stmt]) #fn-stmtstrip{ display:none }
/* no app: sem a trilha Home › Account, e o Back + Save ficam na linha do titulo, a direita (lei de 31/08) */
html.is-app .st-main .st-crumb{ display:none }
html.is-app .st-title{ flex-wrap:nowrap; align-items:center }
html.is-app .st-title .n{ display:none }
/* o extrato no celular (04/10/2026): sem rolagem lateral — cada linha vira data + tipo + referencia a esquerda e o valor a direita */
html.is-app #fn-stmt .st-tw{ overflow:visible }
html.is-app #fn-stmt .st-mtable, html.is-app #fn-stmt tbody{ display:block; width:100% }
html.is-app #fn-stmt thead{ display:none }
html.is-app #fn-stmt tr{ display:grid; grid-template-columns:1fr auto; column-gap:12px; padding:10px 0; border-bottom:1px solid var(--line) }
html.is-app #fn-stmt td{ display:block; padding:0; border:0; height:auto; text-align:left; white-space:normal }
html.is-app #fn-stmt td:nth-child(1){ grid-column:1; font-size:12px; color:var(--ink-2) }
html.is-app #fn-stmt td:nth-child(2){ grid-column:1; font-weight:600 }
html.is-app #fn-stmt td:nth-child(3){ grid-column:1; font-size:13px; color:var(--ink-2) }
html.is-app #fn-stmt td:nth-child(4), html.is-app #fn-stmt td:nth-child(5){ grid-column:2; grid-row:1 / span 3; align-self:center; text-align:right; font-weight:600 }
html.is-app #fn-stmt td:empty{ display:none }
html.is-app #fn-stmt td:nth-child(5):not(:empty)::before{ content:'Credit '; font-weight:500; color:var(--ink-2); font-size:12px }
html:not(.is-app) #fn-stmtstrip, html:not(.is-app) #ac-strip{ display:none }
/* Purchases no app (04/10/2026): sem a saudacao com Sign out e sem as Invoices (moram em Finances e Statements) */
html.is-app #st-hello, html.is-app #st-invoices{ display:none }
/* extrato (04/10/2026): pagamento e credito no verde da casa; Opening e Closing em destaque */
#fn-stmt .st-cototal.st-credit{ color:var(--green); -webkit-text-fill-color:var(--green) }
#fn-stmt .st-stbal{ background:var(--gold-soft); border-radius:10px; padding-left:12px; padding-right:12px }
#fn-stmtstrip .st-kpi:nth-child(3) .st-kpiv{ color:var(--green); -webkit-text-fill-color:var(--green) }
/* AREA DO CLIENTE NO APP — revisao propria (Paulo 04/10/2026: "olha e veja o que pode melhorar vc mesmo") */
/* Profile: o codigo vira um selo ao lado do nome, nao uma caixa solta; o titulo do cartao repete a pagina */
html.is-app .st-ppid{ flex-wrap:nowrap }
html.is-app .st-ppcode{ width:auto; margin-left:auto; flex:none }
html.is-app .st-ppcode span{ display:none }
html.is-app .st-ppcode input{ width:64px; padding:0 6px }
html.is-app .st-ppcard:has(.st-ppid) > .st-ppt{ display:none }
/* Profile: empresa, contato e e-mail inteiros (sem cortar o nome) */
html.is-app .st-ppcard:has(#pf-phone) .st-pprow-4{ grid-template-columns:1fr }
html.is-app .st-ppcard:has(#pf-phone) .st-pprow-4 .pf-mailf{ grid-column:auto }
/* Finances: painel vazio some — a caixa do topo ja diz $0.00 */
html.is-app #fn-open:has(.st-empty), html.is-app #fn-sched:has(.st-empty){ display:none }
/* HOME DO APP (04/10/2026): as categorias numa fileira que desliza */
.st-appcats{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 0 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.st-appcats::-webkit-scrollbar{ display:none }
.st-appcats a.on{ background:var(--gold); border-color:var(--gold) }
/* UMA LINHA SO (Paulo 11/10/2026: "apenas UMA linha, sem quebrar; no celular e no app move com os dedos; no
   computador, setas" + "Mostre pro user que tanto as categorias quanto as subcategorias rolam pela tela no app e
   no celular" + "Faz com alguma skill que deixe interessante": skill apple-design + animate): a fileira nunca
   quebra; rola com a inercia nativa e encaixa por botao (scroll-snap); o botao responde no TOQUE (:active,
   100 ms); no celular o ultimo botao que cabe sai cortado pela metade e um degrade na borda direita diz que
   continua (some no fim, .at-end); no computador `rowArrows` (store.js) poe as setas ‹ › nas pontas, so quando
   ha mais botoes do que cabe, e o mouse arrasta a fileira 1:1. */
.st-appcats{ flex-wrap:nowrap; scroll-snap-type:x proximity; scroll-behavior:smooth; min-width:0; flex:1 1 auto; overscroll-behavior-x:contain }
.st-appcats a{ scroll-snap-align:start; transition:transform 100ms ease-out, background-color 100ms ease-out }
.st-appcats a:active{ transform:scale(.97); background:var(--gold-soft) }
.st-appcats a.on:active{ background:var(--gold) }
.st-appcats.is-drag{ scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none }
.st-appcats.is-drag a{ pointer-events:none }
.st-rowwrap{ display:flex; align-items:center; gap:6px; position:relative }
/* a fileira de subcategorias ENTRA (220 ms, curva da casa): so opacidade e transform, nunca altura */
.st-rowwrap.is-enter{ animation:st-rowin 220ms cubic-bezier(.23,1,.32,1) both }
@keyframes st-rowin{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.st-rowarrow{ flex:none; display:none; align-items:center; justify-content:center; width:var(--ctl-h,32px); height:var(--ctl-h,32px); margin-bottom:12px;
  border:1px solid var(--gold); border-radius:50%; background:var(--gold-soft); color:var(--ink); -webkit-text-fill-color:var(--ink); font:inherit; font-size:18px; line-height:1; cursor:pointer; padding:0;
  transition:transform 100ms ease-out, background-color 100ms ease-out }
.st-rowarrow:hover{ background:var(--gold) }
.st-rowarrow:active{ transform:scale(.97) }
.st-rowarrow[disabled]{ opacity:.4; cursor:default }
@media (hover:hover) and (min-width:701px){ .st-rowwrap.has-arrows .st-rowarrow{ display:inline-flex } .st-appcats{ cursor:grab } }
/* ate 700px: o degrade da borda direita (fundo da pagina -> transparente, 32px) enquanto ainda ha botao a direita */
@media (max-width:700px){
  .st-rowwrap.has-more::after{ content:""; position:absolute; top:0; right:0; bottom:12px; width:32px; pointer-events:none;
    background:linear-gradient(to right, rgba(255,255,255,0), var(--page)); transition:opacity 150ms ease-out }
  .st-rowwrap.has-more.at-end::after{ opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .st-appcats{ scroll-behavior:auto }
  .st-appcats a, .st-rowarrow{ transition:none }
  .st-appcats a:active, .st-rowarrow:active{ transform:none }
  .st-rowwrap.is-enter{ animation:none }
}
/* FILEIRA DE SUBCATEGORIA (Paulo 11/10/2026: "as subcategorias devem virar [botoes] tambem"): a mesma fileira,
   um degrau menor, logo abaixo das categorias; a escolhida marcada em ouro-soft (a categoria fica com o ouro) */
.st-appsubs{ padding-top:0; margin-top:-6px }
.st-appsubs a{ height:30px; padding:0 12px; font-size:12px; border-radius:15px }
.st-appsubs a.on{ background:var(--gold-soft); border-color:var(--gold-deep) }
.st-appcats a{ flex:none; display:inline-flex; align-items:center; height:36px; padding:0 16px; border:1px solid var(--line); border-radius:18px;
  background:var(--paper); font-size:13px; font-weight:600; color:var(--ink); -webkit-text-fill-color:var(--ink); text-decoration:none }
/* PAGINA DA PECA NO APP (04/10/2026): os botoes na ordem e nas cores do cartao (WhatsApp · coracao · carrinho
   amarelo · raio), largura igual; a quantidade embaixo; a foto de ponta a ponta; o Back a direita */
html.is-app #st-pd .st-pdacts{ display:flex; flex-wrap:wrap; gap:8px }
html.is-app #st-pd .st-pdacts > .st-btn{ flex:1 1 0; min-width:0; justify-content:center }
html.is-app #st-pd .st-btn-cartyel{ background:#FFD814; border-color:#FCD200; color:#111; -webkit-text-fill-color:#111 }
html.is-app #st-pd .st-sharelbl, html.is-app #st-pd .st-addlbl{ display:none }
html.is-app #st-pd .st-pdimg{ border:0; border-radius:12px }
html.is-app .st-main > .st-wrap > .st-title:not(:has(h1:not(:empty))){ justify-content:flex-end }
html.is-app .st-crumbrow{ display:flex; justify-content:flex-end }
html.is-app .st-crumbrow .st-titleact{ margin-left:auto }
html.is-app #st-pd .st-pdacts > .st-btn-heart, html.is-app #st-pd .st-pdacts > .st-btn-wa, html.is-app #st-pd .st-pdacts > .st-btn-buynow, html.is-app #st-pd .st-pdacts > .st-btn-cartyel{ width:auto; padding:0 }
.st-varother{ display:inline-flex; align-items:center; gap:6px; margin:0 }
.st-varother span{ font-size:12px; font-weight:600; color:var(--ink-2) }
.st-varother select{ width:80px; height:36px; padding:0 8px; font-size:15px; font-weight:600; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink) }
.st-lineresize{ color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep); font-size:12px }
/* O CARRINHO DA PAGINA DA PECA NA MESMA COR DO CARTAO (Paulo 05/10/2026: "o carrinho esta na cor diferente... no
   detalhe um amarelo menos forte"): o bege antigo do #st-add (.st-pdacts #st-add) vencia o amarelo — agora o amarelo
   do cartao vale no site e no app */
.st-pdacts #st-add.st-btn-cartyel{ background:#FFD814; border-color:#FCD200; color:#111; -webkit-text-fill-color:#111 }
.st-pdacts #st-add.st-btn-cartyel:hover{ background:#F7CA00; border-color:#FCD200 }

/* OS BOTOES DA PECA IGUAIS EM TODA PORTA, NO JEITO AMAZON (Paulo 05/10/2026: "ajusta no site mobile, no site
   computador e no app; a mesma ideia dos botoes com os icones pra tudo, mesmo no computador; quero um look amazon e
   a facilidade deles; numero de itens primeiro, favorito, carrinho e buy now nessa ordem em todas as plataformas"):
   uma fileira so, pilulas do mesmo tamanho, so o icone; o WhatsApp vai por ultimo */
#st-pd .st-pdacts{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px }
#st-pd .st-pdacts > .st-qty{ order:1; flex:0 0 auto; margin:0; height:44px; border-radius:999px }
#st-pd .st-pdacts > .st-btn-heart{ order:2 }
#st-pd .st-pdacts > .st-btn-cartyel{ order:3 }
#st-pd .st-pdacts > .st-btn-buynow{ order:4 }
#st-pd .st-pdacts > .st-btn-wa{ order:5 }
/* o Request do cliente final na MESMA fileira, por ultimo (Paulo 04/10/2026: "tem que ser tudo na mesma linha") */
#st-pd .st-pdacts > .st-btn-request{ order:6; white-space:nowrap }
#st-pd .st-pdacts > .st-btn{ flex:1 1 0; min-width:0; height:44px; padding:0; border-radius:999px; justify-content:center; display:inline-flex; align-items:center }
#st-pd .st-pdacts .st-addlbl, #st-pd .st-pdacts .st-sharelbl{ display:none }
#st-pd .st-pdacts > .st-btn svg{ width:20px; height:20px }
#st-pd .st-pdacts .st-addico{ display:block; margin:0 auto }

/* MOVIMENTO-1010 (docs/design/DESIGN-store.md §4; Paulo 10/10/2026: "Pra os sites que o cliente ve" -> "Sim"):
   a carta da peca, que ja ganhava borda dourada e sombra no mouse, tambem sobe 3px e a foto aproxima 5%.
   So em aparelho com mouse; sem movimento para quem pediu menos. Entrada ao rolar NAO entra aqui: as cartas
   sao montadas pelo store.js depois do carregamento e ficariam escondidas */
@media (hover:hover){
  .st-card{ transition:border-color .15s, box-shadow .5s cubic-bezier(.23,1,.32,1), transform .5s cubic-bezier(.23,1,.32,1) }
  .st-cardimg{ overflow:hidden }
  .st-cardimg img{ transition:transform .5s cubic-bezier(.23,1,.32,1) }
  .st-card:hover{ transform:translateY(-3px) }
  .st-card:hover .st-cardimg img{ transform:scale(1.05) }
}
@media (prefers-reduced-motion:reduce){ .st-card, .st-cardimg img{ transition:none!important; transform:none!important } }

/* ── YOUR TERMS no carrinho e no checkout (pacote 850, 11/10/2026) ───────
   titulo fora, em cima (11.234); linhas no molde .st-srow do resumo; credito
   disponivel negativo em vermelho (11.341); Statement gold-soft e o WhatsApp do
   rep no verde da casa (.st-btn-wa) so quando o pedido passa do disponivel */
.st-sumcol{ min-width:0 }
.st-ytermshead{ font-size:14px; font-weight:600; color:var(--ink); margin:22px 0 8px }
.st-yterms dl{ margin:0 }
.st-yterms .st-srow dd{ white-space:nowrap }
.st-yterms .st-srow dd.neg{ color:var(--red) }
.st-ytermsover{ margin-top:12px }
.st-ytermsacts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.st-ytermsacts .st-btn{ flex:1 1 auto; justify-content:center }
/* ── TRENDING NO FEED E O SINO (pacote 851, 11/10/2026; Paulo: "Trending ok no Feed", "Sim, pode incluir o sino nos dois") ── */
/* titulo do bloco e do trilho FORA da caixa, em cima (11.82 / 11.234) */
.st-blocktitle{ font-family:var(--display); font-size:20px; font-weight:600; margin:0 0 12px; color:var(--ink) }
.st-railtitle{ font-size:14px; font-weight:600; margin:0 0 8px; color:var(--ink) }
#st-trending .st-panel{ padding:16px 18px 12px; margin-bottom:16px }
/* fileira de cartas numa linha so: dedo no celular, setas no computador (o mesmo rowArrows das categorias) */
.st-cardrail{ display:flex; gap:12px; flex-wrap:nowrap; overflow-x:auto; min-width:0; flex:1 1 auto; padding:2px 0 8px;
              scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }
.st-cardrail::-webkit-scrollbar{ display:none }
.st-cardrail>.st-card{ flex:0 0 220px; scroll-snap-align:start }
@media(max-width:700px){ .st-cardrail>.st-card{ flex-basis:160px } }
.st-cardrail.is-drag{ scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none }
.st-cardrail.is-drag>*{ pointer-events:none }
@media (hover:hover) and (min-width:701px){ .st-cardrail{ cursor:grab } }
@media (prefers-reduced-motion: reduce){ .st-cardrail{ scroll-behavior:auto } }
/* a linha honesta quando a loja dele ainda nao tem dado: texto + o botao que abre Your 18k Showcase */
.st-railempty{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; border:1px dashed var(--line); border-radius:12px; padding:14px 16px; background:var(--gold-faint); color:var(--ink-2); font-size:13px }
/* o sino no topo: o mesmo desenho dos icones do topo, com a pilula do nao lido */
.st-bell{ position:relative; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0; border:0; background:none; cursor:pointer; color:var(--chrome-ink,#fff); -webkit-text-fill-color:var(--chrome-ink,#fff) }
.st-bell:hover{ opacity:.82 }
.st-bell .st-bellcount{ position:absolute; top:-4px; right:-8px; margin:0; background:var(--ink); color:#fff; -webkit-text-fill-color:#fff }
html.is-app .st-appicons .st-bell{ width:44px; height:44px; justify-content:center; color:var(--chrome-ink,var(--ink)); -webkit-text-fill-color:var(--chrome-ink,var(--ink)) }
html.is-app .st-appicons .st-bell .st-bellcount{ top:2px; right:2px }
html.is-app .st-appicons .st-bell .st-hlbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
html.is-app .st-appicons .st-bell .st-hico{ display:block; width:20px; height:20px }
/* o painel Notifications: a direita no computador, folha inteira no celular; titulo fora, em cima */
.st-bellwrap{ position:fixed; inset:0; z-index:60; background:rgba(23,24,26,.28); display:flex; justify-content:flex-end; align-items:flex-start }
.st-bellwrap[hidden]{ display:none }
.st-bellpanel{ width:min(440px,100%); min-height:100%; max-height:100%; overflow:auto; padding:18px 18px 24px; background:var(--page) }
.st-bellhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.st-bellhead .st-blocktitle{ margin:0 }
.st-bellbody{ padding:14px 16px; margin:0 }
.st-notifpush{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid var(--line) }
.st-notifstate{ font-size:13px; color:var(--ink-2) }
.st-notifstate.is-on{ color:var(--green); font-weight:600 }
.st-notiflist{ list-style:none; margin:0; padding:0 }
.st-notif{ padding:11px 0; border-bottom:1px solid var(--line) }
.st-notif:last-child{ border-bottom:0 }
.st-notif.is-new .st-notiftext{ font-weight:600 }
.st-notifmeta{ display:flex; justify-content:space-between; gap:10px; margin-bottom:4px }
.st-notifdate{ font-size:12px; color:var(--ink-3) }
.st-notiftext{ display:block; color:var(--ink); font-size:14px; line-height:1.4; text-decoration:none }
.st-notiftext:hover{ text-decoration:underline }
@media(max-width:700px){ .st-bellpanel{ width:100%; padding:14px 16px 24px } }