/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/(b2b-portal)/portal.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Vitrine B2B (preview interno) — visual PRÓPRIO do portal, derivado do mockup
   B2B_mockup_vitrine_ADAPTADO.html. Tudo escopado sob `.b2bw` pra não vazar no
   resto do HUB (não é o design system interno). Paleta = mesma do tema do HUB. */

.b2bw {
  --black: #0f0d0e; --dark: #1a1718; --card: #211e1f; --card2: #1e1b1c;
  --border: #2e2a2b; --border2: #3a3435;
  --accent: #c8f227; --adim: rgba(200, 242, 39, .09); --amid: rgba(200, 242, 39, .2);
  --text: #f0ece8; --muted: #7a7370; --subtle: #3d3839;
  --sw: 256px;
  background: var(--black);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  /* Trava de scroll horizontal no PRÓPRIO wrapper (cobre todo iOS):
     - `hidden` é a base universal (vale em iOS < 16);
     - `clip` sobrepõe no iOS 16+ pq não vira o eixo Y em `auto` (preserva o
       sticky do topbar). Onde `clip` não existe, fica o `hidden`.
     - `overscroll-behavior-x: none` mata o "bounce"/arrasto lateral.
     A sidebar é position:fixed e escapa disso → tratada com visibility:hidden. */
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.b2bw * { margin: 0; padding: 0; box-sizing: border-box; }

/* Trava de scroll horizontal do portal em QUALQUER largura. `clip` (não
   `hidden`) NÃO cria scroll container — preserva o sticky do topbar. Escopada
   via :has(.b2bw) pra não vazar pro resto do HUB. ATENÇÃO: a sidebar é
   position:fixed e ESCAPA desse clip (fixed se ancora no viewport) — por isso
   ela é tratada à parte com visibility:hidden no mobile (ver media query). */
html:has(.b2bw), body:has(.b2bw) { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }

/* SIDEBAR */
.b2bw .sidebar { width: var(--sw); min-height: 100vh; background: var(--dark); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; }
.b2bw .sb-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.b2bw .sb-brand { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Dimensão da NutrendsLogo via classe própria (especificidade .b2bw .blogo-*
   = 0,2,0 vence o .h-6 = 0,1,0 da própria logo, sem depender de !important). */
.b2bw .blogo-sm { height: 16px; }
.b2bw .blogo-md { height: 22px; }
.b2bw .blogo-lg { height: 30px; }
.b2bw .lhex { width: 34px; height: 34px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b2bw .lmain { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.5px; }
.b2bw .lsub { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 1px; }

.b2bw .sb-client { margin: 10px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.b2bw .sbc-top { display: flex; align-items: center; gap: 8px; }
.b2bw .sbc-av { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #a8d400); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px; color: var(--black); flex-shrink: 0; }
.b2bw .sbc-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.b2bw .sbc-city { font-size: 10.5px; color: var(--muted); }

.b2bw .nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.b2bw .nav-sec { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 10px 8px 4px; }
.b2bw .nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; transition: all .15s; text-decoration: none; }
.b2bw .nav-item:hover { background: var(--card); color: var(--text); }
.b2bw .nav-item.active { background: var(--adim); color: var(--accent); font-weight: 600; }

.b2bw .sb-rep { margin: 0 10px 8px; padding: 11px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
.b2bw .sr-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.b2bw .sr-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.b2bw .sr-tel { font-size: 11.5px; color: var(--accent); display: flex; align-items: center; gap: 5px; text-decoration: none; }

.b2bw .sb-min { margin: 0 10px 10px; padding: 9px 12px; border-radius: 8px; background: rgba(200, 242, 39, .05); border: 1px solid rgba(200, 242, 39, .15); display: flex; align-items: center; justify-content: space-between; }
.b2bw .sm-label { font-size: 10px; color: var(--muted); }
.b2bw .sm-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--muted); }

/* MAIN */
.b2bw .main { flex: 1; margin-left: var(--sw); display: flex; flex-direction: column; min-height: 100vh; }

.b2bw .topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 28px; background: var(--dark); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; gap: 14px; }
.b2bw .tb-left { display: flex; align-items: center; gap: 11px; }
.b2bw .page-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.5px; white-space: nowrap; }
.b2bw .preview-pill { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); background: var(--adim); border: 1px solid var(--amid); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }

.b2bw .searchbar { flex: 1; max-width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 12px; }
.b2bw .searchbar input { background: transparent; border: none; outline: none; font-size: 13px; color: var(--text); font-family: 'DM Sans', sans-serif; padding: 8px 0; flex: 1; }
.b2bw .searchbar input::placeholder { color: var(--muted); }

.b2bw .tb-right { display: flex; align-items: center; gap: 8px; }

.b2bw .uf-sel { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; }
.b2bw .uf-sel label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.b2bw .uf-sel select { background: transparent; border: none; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 2px; outline: none; cursor: pointer; }
.b2bw .uf-sel select option { background: var(--dark); color: var(--text); }

.b2bw .cart-btn { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s; font-family: 'DM Sans', sans-serif; color: var(--text); }
.b2bw .cart-btn:hover { border-color: var(--accent); color: var(--accent); }
.b2bw .cart-n { background: var(--subtle); color: var(--muted); font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }

/* Chrome do DRAWER mobile — escondido por padrão (tablet/desktop); revelado no
   @media (max-width: 640px) lá embaixo, junto com a sidebar off-canvas. */
.b2bw .hamburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; }
.b2bw .hamburger:hover { border-color: var(--accent); color: var(--accent); }
.b2bw .tb-brand { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
.b2bw .tb-brand .tb-hex { width: 28px; height: 28px; background: var(--accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b2bw .tb-brand span { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -.4px; }
.b2bw .sb-close { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; flex-shrink: 0; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 7px; }
.b2bw .sb-close:hover { background: var(--card); color: var(--text); }
.b2bw .sb-overlay { display: none; }

/* CONTENT */
.b2bw .content { padding: 22px 28px; flex: 1; }

.b2bw .tabs { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 16px; }
.b2bw .tab { padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.b2bw .tab.active { background: var(--accent); color: var(--black); font-weight: 700; }

.b2bw .filtros { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.b2bw .filtro { padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: 'DM Sans', sans-serif; transition: all .15s; }
.b2bw .filtro:hover { border-color: var(--border2); color: var(--text); }
.b2bw .filtro.active { background: var(--adim); border-color: rgba(200, 242, 39, .3); color: var(--accent); }

.b2bw .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

.b2bw .prod { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all .18s; display: flex; flex-direction: column; }
.b2bw .prod:hover { border-color: rgba(200, 242, 39, .25); transform: translateY(-2px); }

/* Painel de imagem QUADRADO (1:1, largura cheia do card) — as imagens já são
   1200² (padronização). O produto é exibido a 75% da área (centralizado pelo
   flex, com respiro em volta): bem maior que o original (105px) sem ficar
   grande demais. object-fit:contain defensivo p/ algum arquivo não-quadrado. */
.b2bw .prod-img { width: 100%; aspect-ratio: 1 / 1; background: var(--card2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.b2bw .prod-img svg { width: 56px; height: 56px; opacity: .55; }
.b2bw .prod-img-el { width: 75%; height: 75%; object-fit: contain; display: block; }

.b2bw .prod-body { padding: 13px 15px; flex: 1; display: flex; flex-direction: column; }
.b2bw .p-cat { font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
/* Linha categoria + SKU (código do produto) no topo do card. */
.b2bw .p-cat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.b2bw .p-cat-row .p-cat { margin-bottom: 0; }
.b2bw .p-sku { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.b2bw .p-nome { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -.2px; margin-bottom: 4px; }
.b2bw .p-desc { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; flex: 1; }

.b2bw .p-preco-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; min-height: 34px; }
.b2bw .p-por { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.5px; color: var(--accent); line-height: 1; }
.b2bw .p-unit { font-size: 10px; color: var(--muted); margin-top: 3px; }
.b2bw .p-consulta { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; color: var(--muted); line-height: 1; }

.b2bw .p-actions { display: flex; gap: 7px; }
.b2bw .qty { display: flex; align-items: center; background: var(--dark); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.b2bw .qbtn { width: 27px; height: 31px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 15px; background: transparent; border: none; font-family: 'DM Sans', sans-serif; }
.b2bw .qbtn:hover { background: var(--subtle); color: var(--text); }
.b2bw .qval { width: 28px; text-align: center; font-size: 13px; font-weight: 600; background: transparent; border: none; color: var(--text); outline: none; font-family: 'DM Sans', sans-serif; }
.b2bw .badd { flex: 1; background: var(--accent); color: var(--black); border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; height: 31px; }
.b2bw .badd:hover { filter: brightness(1.08); }

.b2bw .prod.consulta { opacity: .7; }
.b2bw .prod.consulta:hover { transform: none; border-color: var(--border); }
.b2bw .p-indisp { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; padding: 9px; background: var(--dark); border: 1px dashed var(--border2); border-radius: 7px; }

.b2bw .empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* TABLET: 2 colunas, sidebar fixa como hoje. */
@media (max-width: 1100px) { .b2bw .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== MOBILE (≤640px) — correção principal: sidebar vira DRAWER, catálogo
   ocupa a tela toda, grade em 1 coluna. Mesma mecânica do HUB (off-canvas +
   overlay), visual do portal. ===== */
@media (max-width: 640px) {
  /* Sidebar off-canvas: desliza pela esquerda; `.open` (via PortalShell) abre.
     visibility:hidden quando fechada remove a sidebar como ALVO DE SCROLL no
     iOS Safari — fixed + translateX(-100%) escapava do overflow:clip e dava pra
     "arrastar" a página até ela. A transição em visibility deixa o slide-out
     terminar antes de sumir; ao abrir volta a visible já no início (slide-in
     aparece). É a correção real do "tela balança de lado" no celular. */
  .b2bw .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s ease; z-index: 50; overflow-y: auto; box-shadow: 2px 0 18px rgba(0, 0, 0, .45); }
  .b2bw .sidebar.open { transform: translateX(0); visibility: visible; }
  .b2bw .sb-close { display: inline-flex; }
  .b2bw .sb-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); border: none; padding: 0; cursor: pointer; }

  /* Catálogo ocupa a tela toda (sem o recuo da sidebar fixa). */
  .b2bw .main { margin-left: 0; }

  /* Topbar: [hambúrguer][logo] … [cliente + carrinho]; busca cai pra 2ª linha.
     justify-content:flex-start (não space-between do desktop) mantém a logo
     COLADA no hambúrguer; tb-right usa margin-left:auto pra ir pra direita
     (e, se não couber, quebra pra 2ª linha alinhado à direita — logo segue
     com o menu, sem flutuar no canto). */
  .b2bw .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; justify-content: flex-start; }
  .b2bw .hamburger { display: inline-flex; order: 0; }
  .b2bw .tb-brand { display: inline-flex; order: 1; }
  .b2bw .tb-left { display: none; }
  .b2bw .tb-right { order: 2; margin-left: auto; }
  .b2bw .searchbar { order: 3; flex-basis: 100%; max-width: none; }
  .b2bw .cart-label { display: none; } /* carrinho compacto: ícone + contador */

  /* Conteúdo + grade: 1 coluna, card cheio. min-width:0 + minmax(0,1fr) travam
     a largura no viewport — a página só rola na VERTICAL, nunca na horizontal
     (sem esses, a largura intrínseca da imagem vaza pro min-content e estoura). */
  .b2bw .content { padding: 14px; }
  .b2bw .main { min-width: 0; }
  .b2bw .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Área de imagem COMPACTA: altura fixa (NÃO 1:1 na largura cheia — era o
     "vão preto gigante"). Imagem com dimensão EXPLÍCITA (100%): `width:auto`
     deixava a largura INTRÍNSECA (1200px) vazar e estourar a página na horizontal.
     object-fit:contain (base) encaixa o quadrado dentro do painel 220px sem corte,
     centralizado; o resto do painel fica como margem (nunca passa da tela). */
  .b2bw .prod-img { aspect-ratio: auto; height: 220px; }
  .b2bw .prod-img-el { width: 100%; height: 100%; }

  /* Abas deslizam na horizontal (sem quebrar linha) — `.tab` tem flex-shrink:0. */
  .b2bw .tabs { width: 100%; max-width: none; }

  /* Alvos de toque maiores pro dedo + nome/preço bem legíveis. */
  .b2bw .qbtn { width: 42px; height: 44px; font-size: 19px; }
  .b2bw .qval { width: 38px; font-size: 15px; }
  .b2bw .badd { height: 44px; font-size: 13px; }
  .b2bw .p-nome { font-size: 15px; }
  .b2bw .p-por { font-size: 21px; }
}

/* ===== B5 — Carrinho ===== */

/* "Adicionar" desabilitado nos cards "Sob consulta" */
.b2bw .badd-off { flex: 1; background: var(--subtle); color: var(--muted); cursor: not-allowed; }
.b2bw .badd-off:hover { filter: none; }

/* Overlay + drawer */
.b2bw .cart-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40; border: none; cursor: pointer; padding: 0; }
.b2bw .cart-dw { position: fixed; top: 0; right: 0; bottom: 0; width: 384px; max-width: 92vw; background: var(--dark); border-left: 1px solid var(--border); z-index: 50; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0, 0, 0, .4); }

.b2bw .cd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.b2bw .cd-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; }
.b2bw .cd-x { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; font-family: 'DM Sans', sans-serif; }
.b2bw .cd-x:hover:not(:disabled) { color: var(--text); }
.b2bw .cd-x:disabled { opacity: .4; cursor: not-allowed; }

.b2bw .cd-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 13px; padding: 28px; line-height: 1.6; }

.b2bw .cd-items { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.b2bw .cd-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.b2bw .cd-it-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.b2bw .cd-it-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.b2bw .cd-it-ctrl { display: flex; align-items: center; gap: 10px; }
.b2bw .cd-qty { display: flex; align-items: center; background: var(--dark); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.b2bw .cd-qty button { width: 26px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 15px; background: transparent; border: none; font-family: 'DM Sans', sans-serif; }
.b2bw .cd-qty button:hover { background: var(--subtle); color: var(--text); }
.b2bw .cd-qty input { width: 34px; text-align: center; font-size: 13px; font-weight: 600; background: transparent; border: none; color: var(--text); outline: none; font-family: 'DM Sans', sans-serif; }
.b2bw .cd-it-total { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--accent); margin-left: auto; }
.b2bw .cd-rm { background: transparent; border: none; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; padding: 0; }
.b2bw .cd-rm:hover { color: var(--text); }

.b2bw .cd-foot { border-top: 1px solid var(--border); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.b2bw .cd-sub { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.b2bw .cd-sub strong { font-family: 'Syne', sans-serif; font-size: 18px; color: var(--accent); }
.b2bw .cd-min { font-size: 11.5px; color: #f0a868; background: rgba(240, 168, 104, .1); border: 1px solid rgba(240, 168, 104, .25); border-radius: 7px; padding: 7px 10px; line-height: 1.4; }
.b2bw .cd-err { font-size: 11.5px; color: #f08a8a; background: rgba(240, 138, 138, .1); border: 1px solid rgba(240, 138, 138, .25); border-radius: 7px; padding: 7px 10px; line-height: 1.4; }
.b2bw .cd-send { width: 100%; background: var(--accent); color: var(--black); border: none; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px; font-family: 'DM Sans', sans-serif; transition: filter .15s; }
.b2bw .cd-send:hover:not(:disabled) { filter: brightness(1.08); }
.b2bw .cd-send:disabled { opacity: .5; cursor: not-allowed; }

.b2bw .cd-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 12px; }
.b2bw .cd-ok { width: 52px; height: 52px; border-radius: 50%; background: var(--adim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.b2bw .cd-ok-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); letter-spacing: -.5px; }
.b2bw .cd-ok-msg { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.b2bw .cd-success .cd-send { margin-top: 8px; max-width: 170px; }

/* ===== FASE 3 — preço por cliente: de/por + seletor de cliente ===== */

/* de/por no card: cheio riscado + badge de % (tokens do portal, sem hex novo) */
.b2bw .p-de { font-size: 11px; color: var(--muted); text-decoration: line-through; line-height: 1; margin-bottom: 3px; }
.b2bw .p-off { background: var(--accent); color: var(--dark); font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 9px; letter-spacing: .3px; white-space: nowrap; }

/* seletor de cliente (preview MASTER) — chip no topbar + popover de busca */
.b2bw .cli-sel { position: relative; display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; }
.b2bw .cli-sel label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.b2bw .cli-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 2px; cursor: pointer; }
.b2bw .cli-btn:hover { color: var(--accent); }
.b2bw .cli-btn-label { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2bw .cli-pop { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; max-width: 88vw; background: var(--card); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); padding: 8px; z-index: 60; }
.b2bw .cli-inp { width: 100%; background: var(--dark); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 9px 11px; outline: none; }
.b2bw .cli-inp:focus { border-color: var(--accent); }
.b2bw .cli-hits { margin-top: 6px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.b2bw .cli-hit { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 7px; padding: 8px 9px; cursor: pointer; font-family: 'DM Sans', sans-serif; color: var(--text); }
.b2bw .cli-hit:hover { background: var(--subtle); }
.b2bw .cli-hit-name { font-size: 13px; font-weight: 600; }
.b2bw .cli-hit-off { color: var(--muted); font-weight: 500; font-size: 11px; }
.b2bw .cli-hit-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.b2bw .cli-note { font-size: 11px; color: var(--muted); padding: 8px 9px; font-style: italic; }

/* hero de seleção (estado sem cliente) */
.b2bw .cli-hero { max-width: 560px; margin: 9vh auto 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.b2bw .ch-logo { margin-bottom: 18px; }
.b2bw .ch-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.4px; margin-bottom: 6px; }
.b2bw .ch-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.b2bw .ch-hint { margin-top: 16px; font-size: 11px; color: var(--muted); }
.b2bw .cli-search { position: relative; }

@media (max-width: 640px) {
  /* Trava de segurança: NADA empurra a página pros lados no celular. `clip`
     (não `hidden`) não cria scroll container — o sticky do topbar segue vivo. */
  .b2bw { overflow-x: clip; }

  /* Chip do cliente compacto (sem o rótulo "CLIENTE") pra caber na 1ª linha
     do topbar junto com hambúrguer + logo + carrinho. */
  .b2bw .cli-sel label { display: none; }
  .b2bw .cli-sel, .b2bw .cli-btn, .b2bw .tb-right { min-width: 0; }
  .b2bw .cli-btn-label { max-width: 28vw; }

  /* Popover de busca vira FOLHA fixa colada no viewport (12px de cada lado) —
     impossível passar da borda; o translate centrado no chip estourava ~px
     em telas 360–375. (fixed ok: nenhum ancestral do topbar tem transform.) */
  .b2bw .cli-pop { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-width: none; transform: none; }

  .b2bw .cli-hero { margin: 4vh 14px 0; padding: 20px; }
}

/* ===== CAUSA REAL do "desliza de lado" no iPhone (diagnóstico ?debug=1:
   vw=319 / layout=393 / excesso=74 com o input de busca focado) =====
   O iOS Safari faz AUTO-ZOOM ao focar um <input> com font-size < 16px — isso
   encolhe o viewport visual (393→319) e a página passa a poder ser arrastada
   de lado. Não é overflow de elemento (por isso overflow-x não resolvia). 16px
   nos inputs do portal no mobile elimina o zoom. (Seletores .b2bw .X = mesma
   especificidade dos base, e ESTE bloco vem por último → vence.) */
@media (max-width: 640px) {
  .b2bw .cli-inp,
  .b2bw .searchbar input,
  .b2bw .qval,
  .b2bw .cd-qty input {
    font-size: 16px;
  }
}

/* ===== MEUS PEDIDOS (área do cliente no portal) ===== */
.b2bw .ped-wrap { max-width: 760px; margin: 0 auto; padding: 24px 28px; }
.b2bw .ped-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.b2bw .ped-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.4px; }
.b2bw .ped-count { font-size: 12px; color: var(--muted); }
.b2bw .ped-empty { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }

.b2bw .ped-list { display: flex; flex-direction: column; gap: 10px; }
.b2bw .ped-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); transition: all .15s; }
.b2bw .ped-card:hover { border-color: rgba(200, 242, 39, .25); transform: translateY(-1px); }
.b2bw .ped-card-l { min-width: 0; }
.b2bw .ped-card-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.b2bw .ped-num { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -.2px; }
.b2bw .ped-num-lg { font-size: 20px; }
.b2bw .ped-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.b2bw .ped-frete { color: #f0a868; }
.b2bw .ped-total { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; color: var(--accent); }

/* badge de status (mesmos tons do design system: info/warning/ok/error) */
.b2bw .ped-status { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; }
.b2bw .ped-status.t-info { color: #8ab4f8; background: rgba(138, 180, 248, .12); border-color: rgba(138, 180, 248, .3); }
.b2bw .ped-status.t-warning { color: #f0a868; background: rgba(240, 168, 104, .1); border-color: rgba(240, 168, 104, .28); }
.b2bw .ped-status.t-ok { color: var(--accent); background: var(--adim); border-color: var(--amid); }
.b2bw .ped-status.t-error { color: #f08a8a; background: rgba(240, 138, 138, .1); border-color: rgba(240, 138, 138, .28); }

/* detalhe */
.b2bw .ped-back { display: inline-block; font-size: 12px; color: var(--muted); text-decoration: none; margin-bottom: 14px; }
.b2bw .ped-back:hover { color: var(--text); }
.b2bw .ped-det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

/* andamento (passos) */
.b2bw .ped-track { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px 16px; margin-bottom: 16px; }
.b2bw .ped-steps { display: flex; }
.b2bw .ped-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.b2bw .ped-step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border2); z-index: 0; }
.b2bw .ped-step:first-child::before { display: none; }
.b2bw .ped-step.done::before { background: var(--accent); }
.b2bw .ped-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); border: 2px solid var(--border2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; position: relative; z-index: 1; }
.b2bw .ped-step.done .ped-dot { background: var(--accent); border-color: var(--accent); color: var(--black); }
.b2bw .ped-step.cur .ped-dot { box-shadow: 0 0 0 4px var(--adim); }
.b2bw .ped-step-label { font-size: 11px; color: var(--muted); text-align: center; }
.b2bw .ped-step.done .ped-step-label { color: var(--text); }
.b2bw .ped-hint { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
.b2bw .ped-cancel { font-size: 12.5px; color: #f08a8a; text-align: center; padding: 6px; }

/* itens do detalhe */
.b2bw .ped-items { display: flex; flex-direction: column; gap: 1px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.b2bw .ped-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.b2bw .ped-item:last-child { border-bottom: none; }
.b2bw .ped-item-name { font-size: 13px; font-weight: 600; }
.b2bw .ped-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.b2bw .ped-item-total { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.b2bw .ped-foot { margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.b2bw .ped-foot-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.b2bw .ped-foot-row strong { font-family: 'Syne', sans-serif; font-size: 19px; color: var(--accent); }
.b2bw .ped-foot-frete { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px) {
  .b2bw .ped-wrap { padding: 16px 14px; }
  .b2bw .ped-step-label { font-size: 10px; }
}

/* ===== MEUS PEDIDOS — editor do cliente (so na fase Recebido/NOVO) =====
   Reaproveita classes do carrinho (.cd-item, .cd-qty, .cd-it-total, .cd-rm),
   do rodape (.cd-sub, .cd-min, .cd-err, .cd-send) e da busca (.cli-inp,
   .cli-hit). */
.b2bw .ped-ed { display: flex; flex-direction: column; gap: 12px; }
.b2bw .ped-ed-hint { font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; line-height: 1.5; }
.b2bw .ped-ed-hint strong { color: var(--text); }
.b2bw .ped-ed-items { display: flex; flex-direction: column; gap: 8px; }
.b2bw .ped-ed-vazio { background: var(--card); border: 1px dashed var(--border2); border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.b2bw .ped-ed-add { position: relative; }
.b2bw .ped-ed-hits { margin-top: 6px; background: var(--card); border: 1px solid var(--border2); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow-y: auto; }

.b2bw .ped-ed-foot { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.b2bw .ped-ed-actions { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 18px; }
.b2bw .ped-ed-saved { font-size: 12px; color: var(--accent); font-weight: 600; }
.b2bw .ped-ed-discard { background: transparent; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; padding: 0; }
.b2bw .ped-ed-discard:hover { color: var(--text); }

/* ===== B7 — AUTH do portal (login / ativar / esqueci / redefinir) =====
   Telas centralizadas, sem sidebar. O .b2bw é flex; .b2b-auth ocupa tudo
   (flex:1) e centraliza o card. Inputs em 16px = sem auto-zoom no iOS. */
.b2bw .b2b-auth { flex: 1; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.b2bw .b2b-auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.b2bw .b2b-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.b2bw .b2b-auth-brand .lhex { width: 32px; height: 32px; }
.b2bw .b2b-auth-logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.4px; line-height: 1.1; }
.b2bw .b2b-auth-logo small { display: block; font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 2px; }
.b2bw .b2b-auth-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.3px; margin-bottom: 6px; }
.b2bw .b2b-auth-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.b2bw .b2b-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.b2bw .b2b-field label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.b2bw .b2b-input { width: 100%; background: var(--dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 11px 13px; outline: none; }
.b2bw .b2b-input:focus { border-color: var(--accent); }
.b2bw .b2b-input:disabled { opacity: .6; }
.b2bw .b2b-btn { width: 100%; background: var(--accent); color: var(--black); border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px; font-family: 'DM Sans', sans-serif; transition: filter .15s; }
.b2bw .b2b-btn:hover:not(:disabled) { filter: brightness(1.08); }
.b2bw .b2b-btn:disabled { opacity: .5; cursor: not-allowed; }
.b2bw .b2b-auth-err { font-size: 12.5px; color: #f08a8a; background: rgba(240, 138, 138, .1); border: 1px solid rgba(240, 138, 138, .25); border-radius: 8px; padding: 9px 11px; line-height: 1.45; margin-bottom: 14px; }
.b2bw .b2b-auth-ok { font-size: 12.5px; color: var(--accent); background: var(--adim); border: 1px solid var(--amid); border-radius: 8px; padding: 9px 11px; line-height: 1.45; margin-bottom: 14px; }
.b2bw .b2b-hint { font-size: 11px; color: var(--muted); margin: -6px 0 14px; line-height: 1.45; }
.b2bw .b2b-auth-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.b2bw .b2b-auth-foot a { color: var(--accent); text-decoration: none; }
.b2bw .b2b-auth-foot a:hover { text-decoration: underline; }