/* ═══════════════════════════════════════════════════════════════════
   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 }

.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.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-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) }
.st-fav{ position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.92); display:flex;
  align-items:center; justify-content:center; color:var(--ink-3) }
.st-fav svg{ width:14px; height:14px }
.st-fav.on{ color:var(--rose); border-color:var(--rose) }
.st-fav.on svg{ fill:currentColor }

.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 }
.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:38px; height:38px; margin:0 auto 10px; border-radius:999px;
  background:var(--gold-faint); display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep) }
.st-caticon svg{ width:19px; height:19px }
.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 } }
.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-sort{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2) }
.st-sort select{ 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-sort select:focus{ outline:none; border-color:var(--gold) }

.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 }
.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-top:4px }
.st-pdwhole small{ font-size:12px; font-weight:500 }
/* 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 }
/* 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, background .3s }
@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 }
.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{ display:none }
body:has(#st-back:not([hidden])) .st-backbar,
body:has([data-site-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 }
/* as acoes da peca no site dele: comprar em cima, guardar/compartilhar embaixo;
   sem contador de quantidade (varejo vende uma) e sem Back (o crumb leva) */
.st-pdacts-shop{ display:flex; flex-direction:column; gap:10px; margin-top:22px }
.st-pdacts-shop .st-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.st-pdacts-shop .st-row .st-btn-lg{ flex:1 1 180px }
.st-pdacts-shop .st-row .st-btn-heart{ flex:0 0 42px }
/* ── 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-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){
  .st-headrow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"logo burger" "search search" "acts acts"; gap:10px 12px; padding:10px 14px }
  .st-logo{ grid-area:logo; min-width:0 }
  .st-burger{ display:inline-flex; grid-area:burger }
  .st-search{ grid-area:search; width:100% }
  .st-headacts{ display:none; grid-area:acts; flex-direction:column; align-items:flex-start; gap:10px; padding:6px 0 4px }
  .st-head.is-open .st-headacts{ display:flex }
  .st-navrow{ overflow-x:auto; scrollbar-width:none; padding:0 6px }
  .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: verde da marca dele, como em todo o sistema
   (lei 11.12 — WhatsApp e botao verde em todo lugar) */
.st-btn-wa{ background:#25D366; border-color:#25D366; color:#FFFFFF;
  -webkit-text-fill-color:#FFFFFF }
.st-btn-wa:hover{ background:#1FB855; border-color:#1FB855 }
.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 }
.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 }
/* 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 ease-in-out infinite }
@keyframes st-aipulse{ 0%{ margin-left:-40% } 100%{ margin-left:100% } }
.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%; }