/* ============================================================
   ld-mobile.css — CAMADA VISUAL MOBILE (app-shell) do site publico LD.
   ISOLAMENTO: este arquivo e carregado com media="(max-width:768px)" ->
   o DESKTOP nunca aplica nada daqui. Alem disso tudo e escopado em
   html.ld-mobile. Nao altera nenhuma regra do desktop (ld-store.css / <style> das paginas).
   Visual congelado: Inter/Space Grotesk, dourado #E5A700, preco #F2C036.
   ============================================================ */

/* espaco pro conteudo nao ficar atras da tab bar. A barra PLANA tem 60px, mas o FAB do carrinho e ELEVADO
   (o circulo dourado central sobe ~21px ACIMA da barra) e cobria a ultima linha do rodape ("Ambiente 100%
   seguro"). Reservar 84px = barra 60px + poke do FAB ~21px + folga -> NENHUM conteudo de pagina mobile fica
   sob o carrinho. Casa com a reserva ja usada no PDP (html.ld-mobile.ld-pdp-bar-on body). */
html.ld-mobile body{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}

/* A folga acima (reserva pra tab bar + poke do FAB) mora no BODY, cujo fundo e BRANCO -> aparecia uma FAIXA
   BRANCA entre o rodape escuro e a tab bar (fica estranho). Fix: o .footer (grafite-dk #1A1A1A) ESTENDE o
   proprio fundo escuro por cima dessa reserva -> padding-bottom = reserva + margin-bottom NEGATIVO igual.
   O margin negativo cancela a altura extra (documento/scroll inalterados; .ft-secure continua clareando o
   FAB), so que a area da reserva agora e pintada de ESCURO (bg do footer) em vez de branco. SO mobile;
   nao toca body padding (PDP/gate intactos) nem o markup do footer (unico/global). */
html.ld-mobile .footer{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;margin-bottom:calc(-84px - env(safe-area-inset-bottom)) !important}

/* ROOT-CAUSE do header/scroll quebrado no mobile (2026-07-13): a base tem body{overflow-x:hidden}. Pelo quirk
   do CSS, overflow-x!=visible FORCA overflow-y a computar 'auto' -> o BODY vira um CONTAINER de scroll. Com
   isso o .hdr (position:sticky) gruda no body (nao no viewport) e no device a busca/topo "sobem"/cortam; alem
   de o documento nao rolar (rola o body). overflow-x:CLIP corta o transbordo horizontal SEM criar container
   (overflow-y permanece visible) -> o DOCUMENTO rola normal e o header sticky volta ao comportamento nativo.
   SO no mobile; desktop CONGELADO (mantem o overflow-x:hidden da base). */
html.ld-mobile body{overflow-x:clip}

/* OPCAO B (2026-07-14) — MARQUEE ROLA E SOME, HEADER AMARELO GRUDA NO TOPO (via JS, sem sticky).
   position:sticky nativo falhava no viewport DINAMICO do celular (a busca "subia"/cortava). Aqui o marquee
   (.ann, textos passando) e o header ficam no FLUXO normal: ao rolar, o marquee sobe e some; quando o header
   alcanca o topo, o ld-mobile.js adiciona .ld-hdr-stuck -> position:fixed;top:0 (confiavel). Um placeholder
   (ld-hdr-ph) reserva o espaco do header pra NAO haver salto. SO mobile; desktop CONGELADO (.hdr sticky). */
html.ld-mobile .hdr{position:static}
html.ld-mobile .hdr.ld-hdr-stuck{position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.14)}
html.ld-mobile .ld-hdr-ph{display:none}

/* ============================================================
   CLOAK DE HIDRATACAO (Lei 3/5/6) — SO no mobile+home. Enquanto <html> tem .ld-mobile-hydrating (setado
   PRE-paint no <head>), um LOADER DE MARCA opaco cobre a viewport: veu branco + logo LD + anel dourado
   (mesmo visual do brand loader do ld-store). Isso impede o 1o frame cru (hero base + CATEGORIAS vazio +
   prateleiras nao injetadas). O ld-mobile.js remove a classe quando a home monta -> revelacao ATOMICA.
   ============================================================ */
html.ld-mobile.ld-mobile-hydrating body{overflow:hidden !important;background:#fff !important}
/* ESTABILIDADE 2026-07-10 (r9): NAO esconder mais o conteudo com visibility:hidden (a regra antiga
   `body > *{visibility:hidden}` escondia TAMBEM o chrome — tab bar/carrinho/header — e, se a revelacao
   desencontrasse numa corrida F5/bfcache/resize, o chrome ficava PRESO escondido ate o proximo F5).
   Agora o cloak e SO o veu OPACO (pseudo-elemento do body, z-index maximo): cobre a viewport inteira
   durante a hidratacao SEM tocar a visibilidade de nenhum elemento. Nada pode ficar preso escondido.
   A revelacao (ld-mobile.js) e BLINDADA (DOMContentLoaded/load/pageshow + timeout ~1200ms). */
html.ld-mobile.ld-mobile-hydrating body::before{
  content:"";position:fixed;inset:0;z-index:2147483646;
  background:#fff url("logo-ld-cinza.png") no-repeat center calc(50% - 34px);
  background-size:132px auto;
}
html.ld-mobile.ld-mobile-hydrating body::after{
  content:"";position:fixed;z-index:2147483647;top:calc(50% + 40px);left:calc(50% - 20px);
  width:40px;height:40px;border:4px solid #F4B800;border-top-color:#40403F;border-radius:50%;
  animation:ld-mob-hydra-spin 1s linear infinite;
}
@keyframes ld-mob-hydra-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.ld-mobile.ld-mobile-hydrating body::after{animation:none}}

/* ---------- TAB BAR inferior fixa (5 itens) ----------
   ESTABILIDADE 2026-07-10 (v3, RAIZ REAL): o bug era o VIEWPORT DINAMICO do mobile (a barra de endereco
   aparece/some). position:fixed;bottom:0 gruda no viewport de LAYOUT e, no topo da pagina, cai abaixo da
   area visivel -> corta os rotulos. A promocao de camada (translateZ/will-change/backface) DESCOLAVA a
   barra do viewport visual e AGRAVAVA -> REMOVIDA. Agora o ld-mobile.js PINA a barra no viewport VISUAL
   via VisualViewport API (bottom dinamico). Altura deterministica mantida (nao depende do min-height dos filhos). */
html.ld-mobile .ld-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:stretch;
  height:calc(60px + env(safe-area-inset-bottom));box-sizing:border-box;
  background:#fff;border-top:1px solid #E8E8E8;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 14px rgba(0,0,0,.08);
}
html.ld-mobile .ld-tab{
  flex:1 1 0;min-width:0;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px;text-decoration:none;color:#606060;
  font-family:'Inter',system-ui,sans-serif;font-size:.62rem;font-weight:700;line-height:1;
  background:none;border:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;
}
html.ld-mobile .ld-tab i{font-size:1.2rem;line-height:1}
html.ld-mobile .ld-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.ld-mobile .ld-tab.on{color:#E5A700}                 /* item ATIVO em dourado */
html.ld-mobile .ld-tab:active{background:#F5F5F5}
html.ld-mobile .ld-tab-badge{
  position:absolute;top:5px;left:calc(50% + 6px);
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#DC2626;color:#fff;font-size:.58rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
/* ---------- CARRINHO CENTRAL: botao circular dourado ELEVADO (estilo Claude Design / ML) ----------
   CAUSA do badge cortado: a regra `.ld-tab span{overflow:hidden}` (ellipsis do rotulo) tem MAIS
   especificidade que `.ld-cart-fab` e recortava o badge dentro do circulo (border-radius:50%).
   Fix: overflow:visible !important em TODA a cadeia; badge com z-index acima do anel. */
html.ld-mobile .ld-tabbar{overflow:visible !important}
html.ld-mobile .ld-tab-cart{justify-content:flex-end;padding-bottom:7px;overflow:visible !important}
html.ld-mobile .ld-cart-fab{
  position:relative;width:58px;height:58px;border-radius:50%;overflow:visible !important;
  /* GRADIENTE AMBAR (override consciente do dono; publico congelado em #E5A700, ambar do DS interno liberado SO no FAB) */
  background:linear-gradient(180deg,#FFC83D,#F2B21C);color:#0A0A0A;display:flex;align-items:center;justify-content:center;
  font-size:1.45rem;margin-top:-30px;margin-bottom:3px;
  /* sombra NEUTRA sutil (sem halo laranja no fundo claro) + anel branco (salta da barra) */
  box-shadow:0 6px 16px rgba(0,0,0,.18), 0 0 0 4px #fff;
}
html.ld-mobile .ld-cart-fab i{font-size:1.4rem;line-height:1}
/* BADGE do carrinho: INTEIRO, canto superior-direito, metade pra fora, ACIMA do anel branco (z-index 5) */
html.ld-mobile .ld-tab-cart .ld-tab-badge{
  position:absolute;top:0;right:0;left:auto;transform:translate(35%,-35%);
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:#DC2626;color:#fff;font-size:.6rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;z-index:5;overflow:visible !important;
}
html.ld-mobile .ld-tab-cart.on .ld-cart-fab{background:linear-gradient(180deg,#FFC83D,#F2B21C)}   /* carrinho sempre com o gradiente ambar */

/* ---------- DRAWER de CATEGORIAS (aba Categorias) — bottom sheet app-style ----------
   Abre a LISTA de categorias pra ESCOLHER (icone + nome) -> ?cat=<slug>. NAO joga na grade crua. */
html.ld-mobile #ld-catdrawer{position:fixed;inset:0;z-index:1100;display:none}
html.ld-mobile #ld-catdrawer.on{display:block}
html.ld-mobile .ld-catdrawer-veil{position:absolute;inset:0;background:rgba(10,10,10,.5)}
html.ld-mobile .ld-catdrawer-panel{position:absolute;left:0;top:0;bottom:0;width:86%;max-width:360px;display:flex;
  flex-direction:column;background:#fff;border-radius:0 16px 16px 0;box-shadow:6px 0 28px rgba(0,0,0,.28);
  padding-bottom:env(safe-area-inset-bottom);overflow:hidden;animation:ld-catsheet-in .24s ease}
@keyframes ld-catsheet-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){html.ld-mobile .ld-catdrawer-panel{animation:none}}
html.ld-mobile .ld-catdrawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:#E5A700;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1.08rem;color:#1A1A1A}
html.ld-mobile .ld-catdrawer-close{width:44px;height:44px;border:none;background:none;color:#1A1A1A;
  font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
/* BLOCO LOGIN/CONTA no topo do drawer (dinamico): fundo creme sutil, alvo >=44, icone dourado, texto escuro */
html.ld-mobile .ld-catdrawer-acct{border-bottom:1px solid #EFE7CF}
html.ld-mobile .ld-catacct{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;
  text-decoration:none;color:#1A1A1A;background:#FFFCF3;-webkit-tap-highlight-color:transparent}
html.ld-mobile .ld-catacct:active{background:#FBF4DD}
html.ld-mobile .ld-catacct-av{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#E5A700;
  color:#1A1A1A;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem}
html.ld-mobile .ld-catacct-av i{font-size:1rem}
html.ld-mobile .ld-catacct-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
html.ld-mobile .ld-catacct-txt b{font-size:.95rem;font-weight:700;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ld-mobile .ld-catacct-txt span{font-size:.76rem;color:#606060}
html.ld-mobile .ld-catacct-go{color:#B8910A;font-size:.85rem;flex-shrink:0}
html.ld-mobile .ld-catdrawer-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 10px}
html.ld-mobile .ld-catrow{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 16px;
  text-decoration:none;color:#1A1A1A;border-bottom:1px solid #F3F3F3}
html.ld-mobile .ld-catrow:active{background:#FBF4DD}
html.ld-mobile .ld-catrow-ico{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:#fff;
  border:1.5px solid #E5A700;color:#9A7100;display:flex;align-items:center;justify-content:center;font-size:1rem}
html.ld-mobile .ld-catrow-name{flex:1;min-width:0;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
html.ld-mobile .ld-catrow-go{color:#B8B8B8;font-size:.8rem;flex-shrink:0}
html.ld-mobile .ld-catrow-all{background:#FCFAF2}
html.ld-mobile .ld-catrow-all .ld-catrow-ico{background:#E5A700;color:#1A1A1A}

/* ---------- TOPO (decisao 2026-07-08): LOGO a esquerda + BUSCA no resto, UMA linha. Sem hamburguer
   (Categorias vive na tab bar). O drawer nao e necessario no mobile. ---------- */
html.ld-mobile .mob-toggle{display:none !important}          /* fora o hamburguer */
html.ld-mobile .logo{display:flex !important;align-items:center;flex:0 0 auto;padding:0}
html.ld-mobile .logo-text{display:none !important}           /* so o mark; wordmark sai pra caber a busca */
html.ld-mobile .hdr-in{flex-wrap:nowrap;gap:10px;padding:8px 0;align-items:center}
/* overflow:VISIBLE (era hidden) pra NAO clipar o dropdown do autocomplete (.hdr-search-dd, position:absolute
   abaixo do container). O retangulo arredondado agora vem do RAIO nos filhos (input esq, botao dir), nao de
   overflow:hidden no container -> visual identico, mas a sugestao aparece no mobile. */
html.ld-mobile .hdr-search{display:flex !important;order:0;flex:1 1 auto;width:auto;flex-basis:auto;margin-top:0;align-items:stretch;height:44px;border-radius:8px;overflow:visible;background:#fff}

/* ---------- Esconder no mobile o que a tab bar substitui / nao serve pro cliente ---------- */
html.ld-mobile .wpp-float,
html.ld-mobile .adm-float,
html.ld-mobile .back-top,
html.ld-mobile #wp-float-btn{display:none !important}   /* editor visual: nunca boiando pro cliente no mobile */

/* ============================================================
   HOME MOBILE (app) — polish escopado em html.ld-mobile. NAO afeta o desktop.
   ============================================================ */

/* (0) CORREDOR UNICO: uma margem lateral so, no container .w. Espacamento interno
   passa a ser SEMPRE gap de flex/grid -> nada encosta na borda, nada fica "torto". */
html.ld-mobile .w{padding-left:16px !important;padding-right:16px !important}

/* (1) HEADER APP enxuto: logo + BUSCA em destaque; acoes (Favoritos/Conta/Carrinho/etc) saem
   do header no mobile porque vivem na tab bar. Fica hamburguer + logo + busca larga. */
html.ld-mobile .hdr-acts{display:none !important}
/* BUSCA: retangulo unico. O RAIO fica so no CONTAINER (.hdr-search) + overflow:hidden; os filhos
   (input e botao) sem raio -> nenhum canto branco do input vaza atras/ao lado do botao escuro.
   O botao deixa de ser absolute e vira flex child (entra no fluxo e e cortado pelo overflow do pai). */
html.ld-mobile .hdr-search input{flex:1 1 auto;min-width:0;height:44px;border:none;border-radius:8px 0 0 8px;font-size:16px;padding:0 12px}  /* 16px evita zoom do iOS; raio esq casa o container (sem overflow:hidden) */
html.ld-mobile .hdr-search-btn{position:static;flex:0 0 46px;height:44px;border-radius:0 8px 8px 0}
/* LOGO: no desktop o mark herda transform:scale(1.5) translate(...) (e a home seta height:48px INLINE no container)
   e estoura a caixa no mobile. No mobile: sem transform, altura fixa (!important vence o inline), contido. */
html.ld-mobile .logo-img{height:38px !important;max-width:150px !important;overflow:hidden !important}
html.ld-mobile .logo-img img{transform:none !important;height:38px !important;max-width:150px !important;object-fit:contain}

/* (2) HERO mobile: as regras antigas do PASSE 2 (hero curto, foto no topo, dots content-box, CTA em linha)
   foram REMOVIDAS por conflitarem com o port 3a abaixo. Fonte unica = o bloco (3a). */

/* ============================================================
   (3a) HERO MOBILE — FALLBACK quando nao ha banner do admin. SEM video no mobile.
   REFEITO 2026-07-09: moldura no corredor (respiro, nao gruda no header) igual ao
   carrossel de banner: margem 12/16, raio 16, overflow hidden. Encurtado 380 -> 320
   (produtos entram antes na dobra). Desktop intacto (tudo em html.ld-mobile).
   Midia (foto) z-index:0 -> SCRIM ::after z-index:1 -> CONTEUDO z-index:2.
   ============================================================ */
html.ld-mobile .hero-wrap{margin:12px 16px 0;border-radius:16px;overflow:hidden}
html.ld-mobile .hero-slide{position:relative !important;min-height:320px !important;height:320px !important;background:#1A1A1A;overflow:hidden;align-items:stretch !important;cursor:pointer}
/* COMPOSICAO NOVA: o video (.lv-bg) cobre a largura mas some pra baixo por MASCARA (fade), revelando o
   #1A1A1A solido onde o texto senta. O scrim ::after fica LEVE (so um escurecido no topo do video). */
html.ld-mobile .hero-slide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 24%)}
/* mascara do video/foto: opaco ate ~30% e some por ~48% (logo acima do selo/nome) */
html.ld-mobile .hero-slide .lv-bg,
html.ld-mobile .hero-slide:not(.lv-mode-bg):not(.lv-mode-side) .hero-visual{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,0) 48%) !important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,0) 48%) !important}

/* MIDIA de fundo (z-index 0) — VIDEO: .lv-bg cobre a largura; anula left:46%/mask lateral do desktop */
html.ld-mobile .hero-slide .lv-bg{left:0 !important;top:0 !important;right:0 !important;bottom:0 !important;z-index:0 !important}
html.ld-mobile .hero-slide .lv-bg video{position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
html.ld-mobile .hero-slide .lv-veil{background:none !important}
html.ld-mobile .hero-slide.lv-mode-bg .hero-visual,
html.ld-mobile .hero-slide.lv-mode-side .hero-visual{display:none !important}   /* video cobre -> foto some */
/* FALLBACK (sem video): a FOTO ocupa a MESMA area de cima com a MESMA mascara/fade */
html.ld-mobile .hero-slide:not(.lv-mode-bg):not(.lv-mode-side) .hero-visual{position:absolute !important;inset:0 !important;z-index:0;margin:0 !important;display:flex;align-items:flex-start;justify-content:center;order:0}
html.ld-mobile .hero-slide:not(.lv-mode-bg):not(.lv-mode-side) .hero-product-showcase{width:100% !important;height:52% !important;max-width:none !important;aspect-ratio:auto !important;border-radius:0 !important;padding:16px !important}
html.ld-mobile .hero-slide:not(.lv-mode-bg):not(.lv-mode-side) .hero-product-showcase .ld-admin-img{max-width:80% !important;max-height:88% !important;object-fit:contain}
html.ld-mobile .hero-seller-float{display:none !important}
html.ld-mobile .hero-wrap .swiper-button-next,
html.ld-mobile .hero-wrap .swiper-button-prev{display:none !important}   /* sem setas */

/* CONTEUDO sobreposto, ancorado embaixo (no solido), alinhado a esquerda (z-index 2), MINIMO (sem descricao) */
html.ld-mobile .hero-slide-inner{position:relative;z-index:2;display:flex !important;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:16px 16px 26px !important;margin:0;gap:0;min-height:320px}
/* SELO (kicker) = pilula de vidro unica */
html.ld-mobile .hero-kicker{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px !important;padding:5px 10px !important;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(229,167,0,.45);border-radius:999px;
  color:#E5A700;font-size:10.5px !important;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* NOME */
html.ld-mobile .hero-h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px !important;line-height:1.12 !important;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);margin:0 0 12px !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.ld-mobile .hero-h1 em{color:#F2C036 !important;font-style:normal}
/* DESCRICAO fora (banner minimo) */
html.ld-mobile .hero-sub{display:none !important}
/* PRECO inline, SEM chip: "R$ X" (#F2C036) + "ou Nx de R$ Y" (#4ADE80).
   O rotulo `.hero-price-from` saiu do banner em 05/08 (o dono pediu so o valor, "mais direto"), entao
   a regra dele saiu daqui junto -- CSS de elemento que nao existe mais e so ruido para quem vier depois.
   O numero de vezes tambem nao e mais "10" fixo: vem de LDStore.parcelasMax (parcela minima R$ 300). */
html.ld-mobile .hero-price-box{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:2px 8px;background:none !important;border:none !important;padding:0 !important;margin:0 0 16px !important}
html.ld-mobile .hero-price-val{color:#F2C036 !important;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:25px !important}
html.ld-mobile .hero-price-parcel{color:#4ADE80 !important;font-size:12px !important;margin:0 !important}
html.ld-mobile .hero-price-parcel b{color:#4ADE80 !important;font-weight:700}
/* CTA UNICO "Comprar Agora": full-width, gradiente, radius 14; "Ver produto" (btn-lg) fora */
html.ld-mobile .hero-ctas{display:flex !important;flex-direction:column;align-items:stretch;width:100%;gap:0;margin:0 !important}
html.ld-mobile .hero-ctas .btn-lg{display:none !important}
html.ld-mobile .hero-ctas .btn-xl{display:inline-flex;width:100%;min-height:52px;border-radius:14px !important;
  background:linear-gradient(135deg,#F2C94C,#E5A700,#D4920A) !important;color:#1A1A1A !important;font-weight:800;font-size:16px !important;justify-content:center;padding:0 18px !important}

/* DOTS: centralizados, bottom 14px; ativo 22x7 #E5A700; inativo 7x7 rgba(255,255,255,.40) */
html.ld-mobile .hero-wrap .swiper-pagination{bottom:14px !important;z-index:3}
html.ld-mobile .hero-wrap .swiper-pagination-bullet{box-sizing:border-box !important;width:7px !important;height:7px !important;padding:0 !important;margin:0 3px !important;border-radius:999px;background:rgba(255,255,255,.40) !important;background-clip:border-box !important;opacity:1}
html.ld-mobile .hero-wrap .swiper-pagination-bullet-active{width:22px !important;height:7px !important;background:#E5A700 !important}

/* (3) TRUST BAR mobile — DIRECAO A "faixa CLARA integrada" (aprovada 2026-07-16). Substitui a faixa escura.
   Faixa clara premium (creme #FFFDF7 + dourado), 4 beneficios REAIS em grid, icone EM CIMA + rotulo EMBAIXO
   (rotulo pode quebrar em 2 linhas, nunca cortar), filete dourado de acento. A .trust do desktop segue oculta
   no mobile (desktop congelado). */
html.ld-mobile .trust{display:none !important}
/* area externa branca (respiro enxuto), sem overflow-x. margin-top: respiro banner->faixa ~12px (igual #ld-mbanner) */
html.ld-mobile .ld-trust-wrap{width:100%;background:#fff;padding:6px 9px 8px;margin-top:6px;box-sizing:border-box}
/* faixa CLARA COM definicao: grid 4 colunas DESIGUAL (folga ao "5% PIX/boleto"), creme dourado, borda + lift sutil */
/* TESTE de cor (2026-07-16): fundo BRANCO com definicao reforçada (borda mais firme + lift) pra faixa NAO sumir no branco da pagina */
html.ld-mobile #ld-trust{position:relative;display:grid;grid-template-columns:1.04fr 1.30fr 1fr .66fr;gap:0;
  min-height:34px;background-color:#FFFFFF;border:1px solid #E6D4A0;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.07)}
/* FILETE DOURADO (acento LD) na BASE, recuo ~14px nas pontas, ~3px (identidade, nao mexer) */
html.ld-mobile #ld-trust::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#E5A700,#F2C036 50%,#E5A700);border-radius:3px 3px 0 0}
/* item INLINE: icone AO LADO do rotulo (1 linha), centralizado, compacto e travado */
html.ld-mobile .ld-trust-item{position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:5px;min-width:0;min-height:34px;padding:6px 4px;background:none;border:none}
/* separadores verticais SUTIS entre itens (nao nas pontas) */
html.ld-mobile .ld-trust-item + .ld-trust-item{border-left:1px solid #EADFBE}
html.ld-mobile .ld-trust-ico{color:#7A5A00;font-size:13px;line-height:1;text-align:center;flex:0 0 auto}
html.ld-mobile .ld-trust-lbl{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;line-height:1;
  color:#1A1A1A;white-space:nowrap;letter-spacing:-.01em}
html.ld-mobile .ld-trust-item:focus-visible,
html.ld-mobile #ld-trust a:focus-visible{outline:2px solid #E5A700;outline-offset:2px;border-radius:6px}
@media (max-width:360px){
  html.ld-mobile .ld-trust-ico{font-size:12px}
  html.ld-mobile .ld-trust-item{gap:4px;padding:6px 3px}
}

/* (4) CATEGORIAS MOBILE — mock aprovado 2026-07-10: 4 categorias por PAGINA em 2x2, paginado (2 grupos),
   com card horizontal (icone bicolor a esquerda + nome/qtd a direita + chevron). Carrossel por scroll-snap
   (cada pagina = 2 colunas de 50%); SO o componente desliza (a pagina nao tem overflow-x). Controles
   (seta < , "1/2", 2 dots, seta >) e swipe pelo ld-mobile.js. Fonte unica dos SVGs = LD_CAT_ICONS. */
html.ld-mobile .sec-cats{padding:20px 0}
html.ld-mobile .cats-head{margin-bottom:12px;align-items:center}
html.ld-mobile .sec-cats .sec-title{display:none !important}     /* fora o titulo enorme do desktop */
html.ld-mobile .cats-see-all{display:inline-flex !important;height:auto;padding:0;border:0;background:transparent;box-shadow:none;color:#806000;font-size:.72rem;font-weight:800}
html.ld-mobile .cats-see-all:hover{background:transparent;box-shadow:none;transform:none}
/* TRACK de PAGINAS EXPLICITAS (r10, anti-overflow DETERMINISTICO): o ld-mobile.js agrupa os tiles em
   .ld-catpage (4 por pagina). O track (.cats-grid) e a UNICA coisa com overflow-x; cada pagina tem
   flex:0 0 100% (= largura do corredor .w, 16px cada lado) -> as 2 colunas SEMPRE cabem, nada transborda
   pra pagina (body.scrollWidth === clientWidth). */
html.ld-mobile .cats-grid{
  display:flex !important;grid-template-columns:none !important;grid-auto-flow:row !important;
  grid-template-rows:none !important;grid-auto-columns:auto !important;flex-wrap:nowrap;gap:0;
  width:100%;max-width:100%;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px;overscroll-behavior-x:contain}
html.ld-mobile .cats-grid::-webkit-scrollbar{display:none}
/* PAGINA = exatamente a viewport visivel (100% do track); dentro, grid 2x2 (1fr 1fr) */
html.ld-mobile .ld-catpage{flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;
  scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;align-content:start}
/* CARD horizontal: icone bicolor a esquerda + nome/qtd a direita + chevron */
html.ld-mobile .cat-tile{min-width:0;width:auto;
  display:grid;grid-template-columns:52px minmax(0,1fr) 12px;grid-template-rows:auto auto;
  align-items:center;column-gap:6px;row-gap:2px;min-height:90px;padding:8px;
  border:1px solid #E2E2E2;border-radius:12px;background:#fafafa;box-shadow:none;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
html.ld-mobile .cat-tile:active{background:#fff8df;transform:scale(.99)}
/* 1o card da 1a pagina com o detalhe dourado inferior (mock featured) */
html.ld-mobile .ld-catpage:first-child .cat-tile:first-child{border-color:#E2E2E2;background:#fafafa;box-shadow:none}
/* chevron via ::after (no mobile a barrinha dourada do desktop vira o chevron do card) */
html.ld-mobile .cat-tile::after{content:'' !important;position:static !important;grid-column:3;grid-row:1 / span 2;
  width:8px;height:8px;border-right:2px solid #9a9a9a;border-top:2px solid #9a9a9a;background:none !important;
  transform:rotate(45deg) !important;align-self:center;justify-self:end}
/* caixa do icone (bicolor) a esquerda */
html.ld-mobile .cat-ico{grid-column:1;grid-row:1 / span 2;width:52px;height:52px;border-radius:12px;
  background:#fff;border:1.5px solid #E5A700;display:grid;place-items:center;flex:none;margin:0;transition:none}
html.ld-mobile .cat-ico svg{width:42px;height:42px}
html.ld-mobile .cat-tile:active .cat-ico{background:#FFF7DC;border-color:#E5A700;transform:none}
/* nome (ate 2 linhas) + quantidade */
html.ld-mobile .cat-name{grid-column:2;grid-row:1;font-size:.72rem;font-weight:800;color:#151515;text-align:left;
  letter-spacing:-.01em;line-height:1.13;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:none;min-height:0}
html.ld-mobile .cat-qty{grid-column:2;grid-row:2;display:block !important;font-size:.58rem;font-weight:650;
  color:#747474;line-height:1.18;letter-spacing:0}
html.ld-mobile .cat-cta{display:none !important}
/* CONTROLES do pager (injetados pelo ld-mobile.js) */
html.ld-mobile .ld-catpager{display:flex;align-items:center;justify-content:center;gap:10px;margin:13px 16px 0}
html.ld-mobile .ld-catpager-btn{display:grid;width:36px;height:36px;place-items:center;border:1px solid #ded7c4;
  border-radius:50%;background:#fff;color:#61563d;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ld-mobile .ld-catpager-btn:active{border-color:var(--gold,#E5A700);background:#fff7dc}
html.ld-mobile .ld-catpager-btn i{font-size:.85rem}
html.ld-mobile .ld-catpager-status{min-width:28px;text-align:center;color:#777;font-size:.62rem;font-weight:800}
html.ld-mobile .ld-catpager-dots{display:flex;gap:5px}
html.ld-mobile .ld-catpager-dot{width:6px;height:6px;border-radius:50%;background:#cfcfcf;transition:.2s}
html.ld-mobile .ld-catpager-dot.on{width:20px;border-radius:10px;background:var(--gold,#E5A700)}
/* icone bicolor no DRAWER da tab bar (mesmo set) */
html.ld-mobile .ld-catrow-ico svg{width:30px;height:30px}
/* ICONES MONOLINE (2026-07-15): agora <img class="cat-art"> -> dimensionar por classe (as regras "svg" nao pegam img) */
html.ld-mobile .cat-ico .cat-art{width:42px;height:42px}      /* grade mobile 2x2 (caixa 52px, Estilo A: branco+borda dourada) */
html.ld-mobile .ld-catrow-ico .cat-art{width:30px;height:30px}   /* drawer da tab bar (Estilo A) */

/* (5) GRADE de produtos da HOME: SAI no mobile (decisao 2026-07-09) — o produto entra pelas
   PRATELEIRAS horizontais (Mais vendidos / Ofertas, estilo Magalu/ML), sem repetir o mesmo
   catalogo 2x na home. Escopo :not(.ld-catalog-view) = pre-paint, NAO afeta a listagem ?cat=. */
html.ld-mobile:not(.ld-catalog-view) #produtos{display:none !important}
/* (Botao do card no CATALOGO mobile: o rotulo curto "Adicionar" agora vem do markup real via
   .pc-cta-long{display:none} no bloco (12). A abordagem antiga font-size:0 + ::after foi REMOVIDA
   para nao duplicar o texto ("AdicionarAdicionar") nem zerar o texto real do botao.) */

/* (6) RITMO VERTICAL uniforme (escala 8/12/16/24/32): padding de secao ~32/24 no mobile */
html.ld-mobile .sec-cats{padding:24px 0 20px}
html.ld-mobile .sec-why{padding:0 0 32px}
html.ld-mobile .sec-rev{padding:0 0 32px}
html.ld-mobile .sec-social{padding:0 0 32px !important}

/* (6b) CUPOM CNPJ6 MOBILE-ONLY — Assinatura 6% aprovada. O markup desktop .cnpj-ban
   permanece no storefront.html e é restaurado por removeShell ao sair do breakpoint mobile. */
html.ld-mobile .cnpj-ban{position:relative;isolation:isolate;display:block !important;overflow:hidden;padding:22px 18px 20px !important;margin:0 0 32px;border:1px solid #3C3C3C;border-radius:17px;color:#fff;text-align:left !important;box-shadow:0 14px 30px rgba(0,0,0,.18);background:linear-gradient(122deg, transparent 0 79%, rgba(242,192,54,.46) 80%, rgba(242,192,54,.46) 80.7%, transparent 81.8%),linear-gradient(122deg, transparent 0 86.5%, rgba(229,167,0,.30) 87.3%, rgba(229,167,0,.30) 87.8%, transparent 89%),radial-gradient(125% 125% at 121% 50%, rgba(229,167,0,.17), rgba(229,167,0,.04) 42%, transparent 64%),#1A1A1A !important}
html.ld-mobile .cnpj-mobile-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:15px}
html.ld-mobile .cnpj-mobile-percent{color:#F2C036;font-family:'Space Grotesk',Inter,sans-serif;font-size:3.55rem;font-weight:700;line-height:.82;letter-spacing:-.08em}
html.ld-mobile .cnpj-mobile-heading{min-width:0}
html.ld-mobile .cnpj-mobile-eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:#F2C036;font-size:.58rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
html.ld-mobile .cnpj-mobile-eyebrow i{font-size:.7rem}
html.ld-mobile .cnpj-ban h2{margin:0;color:#fff;font-family:'Space Grotesk',Inter,sans-serif;font-size:1.17rem !important;font-weight:700;line-height:1.09 !important;letter-spacing:-.035em}
html.ld-mobile .cnpj-mobile-line{height:1px;margin:16px 0 0;background:linear-gradient(90deg,#E5A700 0 56px,#484848 56px 100%)}
html.ld-mobile .cnpj-ban p{margin:12px 0 0;color:#D0D0D0;font-size:.69rem;line-height:1.48;opacity:1}
html.ld-mobile .cnpj-ban-actions{display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px;width:100%;margin-top:16px}
html.ld-mobile .cnpj-ban-code{display:flex;min-width:0;min-height:46px;align-items:center;gap:9px;padding:0 14px;border:1px solid #505050;border-radius:9px;background:#272727;color:#fff;font-family:'JetBrains Mono',Consolas,monospace;font-size:.92rem;font-weight:800;letter-spacing:.13em;box-shadow:none;cursor:default}
html.ld-mobile .cnpj-ban-code i{flex:0 0 auto;color:#F2C036;font-size:.72rem}
html.ld-mobile .cnpj-ban-copy{display:inline-flex;min-width:112px;min-height:46px;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid #E5A700;border-radius:9px;background:#E5A700;color:#1A1A1A;font-family:Inter,sans-serif;font-size:.68rem;font-weight:850;white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
html.ld-mobile .cnpj-ban-copy:hover{background:#F2C036}
html.ld-mobile .cnpj-ban-copy:active{transform:scale(.98)}
html.ld-mobile .cnpj-ban-copy:focus-visible{outline:3px solid rgba(229,167,0,.4);outline-offset:2px}
html.ld-mobile .cnpj-label-copied{display:none}
html.ld-mobile .cnpj-ban-copy.copied{border-color:#B8E0C2;background:#DFF3E4;color:#205D34}
html.ld-mobile .cnpj-ban-copy.copied .cnpj-label-copy{display:none}
html.ld-mobile .cnpj-ban-copy.copied .cnpj-label-copied{display:inline}
@media(max-width:430px){html.ld-mobile .cnpj-ban{padding:20px 15px 18px !important}html.ld-mobile .cnpj-mobile-percent{font-size:3.25rem}html.ld-mobile .cnpj-ban h2{font-size:1.14rem !important}html.ld-mobile .cnpj-ban-copy{min-width:108px;padding-inline:10px}html.ld-mobile .cnpj-ban-code{padding-inline:11px}}

/* (6c) POR QUE A LD (texto ja aprovado; so estilo mobile): leitura 13-14px, cards com respiro */
html.ld-mobile .sec-why .sec-title{font-size:1.35rem}
html.ld-mobile .why-feats{margin-top:18px;gap:10px}
html.ld-mobile .why-f{padding:14px}
html.ld-mobile .why-f-t{font-size:.9rem}
html.ld-mobile .why-f-d{font-size:13px;line-height:1.55}

/* (6d) PROVA SOCIAL mobile: nota 5.0 REAL do Google (injetada, ja que o painel "Em Numeros" do
   desktop some <=1100px) + depoimentos compactos (placeholder MOCK_REVIEWS, decisao do dono). */
html.ld-mobile .ld-grating{display:flex;align-items:center;gap:12px;background:#1A1A1A;border-radius:14px;padding:14px 16px;margin:0 0 14px;text-decoration:none;min-height:44px}
html.ld-mobile .ld-grating-n{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.7rem;color:#F2C036;line-height:1}
html.ld-mobile .ld-grating-stars{color:#F2C036;font-size:.8rem;letter-spacing:2px;line-height:1.2}
html.ld-mobile .ld-grating-t{font-size:13px;font-weight:700;color:#fff}
html.ld-mobile .ld-grating-s{font-size:.72rem;color:#B5B5B5}
html.ld-mobile .ld-grating > i{margin-left:auto;color:#8A8A8A;font-size:.8rem}
html.ld-mobile .sec-rev .sec-title{font-size:1.35rem}
html.ld-mobile .rev-card{padding:16px}
html.ld-mobile .rev-text{font-size:13px;line-height:1.55}

/* (6e) REPUTACAO MERCADO LIVRE: prova social real. Card claro on-brand + verde real do termometro ML.
   Logo = asset OFICIAL (assets/mercadolivre.svg). Numeros em fonte tabular. Link >=44. */
html.ld-mobile .ld-mlrep{background:#fff;border:1px solid #E8E8E8;border-radius:12px;padding:16px;margin:0 0 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
html.ld-mobile .ld-mlrep-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
html.ld-mobile .ld-mlrep-logo{width:36px;height:36px;flex:0 0 auto;object-fit:contain;display:block}
html.ld-mobile .ld-mlrep-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#1A1A1A;line-height:1.2}
html.ld-mobile .ld-mlrep-thermo{display:flex;gap:4px;margin-bottom:8px}
html.ld-mobile .ld-mlrep-seg{flex:1;height:8px;border-radius:3px;opacity:.28}
html.ld-mobile .ld-mlrep-seg.on{opacity:1;height:11px;margin-top:-1.5px;box-shadow:0 0 0 2px rgba(0,166,80,.22)}
html.ld-mobile .ld-mlrep-level{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1A1A1A;margin-bottom:12px}
html.ld-mobile .ld-mlrep-level b{color:#00913D;font-weight:800}
html.ld-mobile .ld-mlrep-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:#00A650}
html.ld-mobile .ld-mlrep-stats{display:flex;gap:10px;margin-bottom:6px}
html.ld-mobile .ld-mlrep-stat{flex:1;background:#FAFAFA;border:1px solid #EEE;border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;align-items:center;gap:2px}
html.ld-mobile .ld-mlrep-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.35rem;color:#1A1A1A;
  line-height:1;font-variant-numeric:tabular-nums}
html.ld-mobile .ld-mlrep-lbl{font-size:12px;color:#4B5563;font-weight:600}
html.ld-mobile .ld-mlrep-foot{font-size:11px;color:#606060;text-align:center;margin-bottom:12px}
html.ld-mobile .ld-mlrep-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  background:#FFE600;border:1px solid #E6CE00;border-radius:10px;color:#1A1A1A;font-weight:700;font-size:14px;
  text-decoration:none;padding:0 14px}
html.ld-mobile .ld-mlrep-link:active{background:#F5DD00}
html.ld-mobile .ld-mlrep-link i{font-size:.8rem}

/* (7) REDES SOCIAIS — REFINO 2026-07-13: cards 2x2 COESOS e uniformes. O icone de cada rede fica
   numa MOLDURA identica (mesmo tamanho/raio/borda on-brand); o glyph mantem a cor reconhecivel da marca.
   Card inteiro tocavel (>=44). Sem o handle e o botao "Seguir" (enxuto). Realce por-marca do desktop
   neutralizado no mobile (cards uniformes, sem poluir). */
html.ld-mobile .social-grid{grid-template-columns:1fr 1fr !important;gap:10px;margin-top:16px}
html.ld-mobile .social-card{padding:12px;text-align:left;display:flex;align-items:center;gap:11px;border-radius:12px;min-height:62px;border:1.5px solid var(--g2,#e8e8e8);background:#fff}
html.ld-mobile .social-card:hover{transform:none;box-shadow:none}
html.ld-mobile .social-card-ig,html.ld-mobile .social-card-tk,html.ld-mobile .social-card-yt,html.ld-mobile .social-card-fb{border-color:var(--g2,#e8e8e8)}
html.ld-mobile .social-ico{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:0;line-height:1;border-radius:10px;background:#F6F6F6;border:1.5px solid rgba(10,10,10,.10)}
html.ld-mobile .social-name{font-size:.9rem;font-weight:700;margin-bottom:0}
html.ld-mobile .social-handle,
html.ld-mobile .social-btn{display:none}   /* handle + botao saem no mobile: card enxuto */

/* (8) CTA FINAL / NEWSLETTER: SAI no mobile (decisao 2026-07-09, ZERO redundancia) — "Ver Catalogo",
   WhatsApp e carrinho ja vivem na tab bar; a home mobile termina em prova social -> redes -> footer. */
html.ld-mobile .cta-sec{display:none !important}

/* (5) PRATELEIRAS "MAIS VENDIDOS" + "OFERTAS A VISTA" — carrosseis horizontais PREMIUM.
   ANTI-CLS 2026-07-10 (RAIZ): .ld-shelf-card tem ALTURA FIXA e .ld-shelf-img box FIXA; a <img> tem
   width/height intrinsecos e ocupa 100% do box com object-fit:contain -> a geometria NAO depende do
   decode da imagem. O card ja NASCE na altura final no 1o paint (delta ~0 ao rolar).
   DES-GENERICAR (honesto): preco PIX (-5%, regra universal) como PRINCIPAL em #F2C036 + preco cheio
   riscado ao lado + rotulo "no PIX"; selo "5% OFF PIX" coerente em todo card; "Mais vendidos" ganha
   selo de RANKING (distingue de "Ofertas"); botao "+" circular dourado >=44px (nao full-width). */
html.ld-mobile #ld-shelf{padding:20px 0 24px}
html.ld-mobile #ld-shelf-ofertas{padding:0 0 24px}
html.ld-mobile .ld-shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
html.ld-mobile .ld-shelf-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:#0D0D0D;letter-spacing:-.02em}
html.ld-mobile .ld-shelf-all{font-size:.78rem;font-weight:700;color:#B37E06;white-space:nowrap;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
html.ld-mobile .ld-shelf-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
html.ld-mobile .ld-shelf-track::-webkit-scrollbar{display:none}
/* ALTURA FIXA do card (anti-CLS): marca + nome 2 linhas + preco PIX/riscado + 10x + CTA "Ver produto" */
html.ld-mobile .ld-shelf-card{flex:0 0 63%;max-width:236px;height:320px;scroll-snap-align:start;background:#fff;border:1.5px solid var(--g2,#e8e8e8);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
/* box de foto FIXO (140px); img preenche o box e faz contain -> layout independe do decode */
html.ld-mobile .ld-shelf-img{position:relative;height:140px;background:var(--g1,#F5F5F5);overflow:hidden;flex:0 0 140px}
html.ld-mobile .ld-shelf-img img{width:100%;height:100%;object-fit:contain;padding:12px;mix-blend-mode:multiply;display:block}
html.ld-mobile .ld-shelf-img > i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
html.ld-mobile .ld-shelf-flag{position:absolute;top:8px;left:8px;background:#15803D;color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:4px;line-height:1.2;z-index:2}
html.ld-mobile .ld-shelf-body{padding:9px 12px 10px;display:flex;flex-direction:column;gap:2px;flex:1;min-height:0}
/* MARCA no topo do card (padrao do site real): rotulo curto em CAIXA ALTA, cinza escuro */
html.ld-mobile .ld-shelf-brand{font-family:'Space Grotesk',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8A8A;line-height:1;margin-bottom:2px}
html.ld-mobile .ld-shelf-name{font-size:13px;line-height:1.3;font-weight:600;color:#1A1A1A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.6em}
/* preco PIX (principal) + cheio riscado ao lado, alinhados pela base */
html.ld-mobile .ld-shelf-pricerow{display:flex;align-items:baseline;gap:7px;margin-top:6px;flex-wrap:wrap}
html.ld-mobile .ld-shelf-price{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.08rem;color:#F2C036;line-height:1.15}
html.ld-mobile .ld-shelf-old{font-size:.72rem;color:#9A9A9A;text-decoration:line-through;line-height:1.2}
/* rotulo "a vista no PIX ou boleto" (5% vale PIX E boleto, igual ao site real). 1 linha, verde de economia. */
html.ld-mobile .ld-shelf-pix{font-size:.66rem;font-weight:700;color:#15803D;line-height:1.2;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){html.ld-mobile .ld-shelf-pix{font-size:.6rem}}
/* parcelado NEUTRO (sem verde): cinza escuro, valor em grafite (nao compete com o preco PIX dourado) */
html.ld-mobile .ld-shelf-parcel{font-size:.68rem;color:#6F6F6F;margin-top:1px}
html.ld-mobile .ld-shelf-parcel b{color:#3A3A3A;font-weight:700}
/* CTA "Compre Agora >" = LINHA refinada (sem fundo, sem caixa de botao): texto dourado + chevron, 1 linha,
   discreto/premium. Alvo >=44px via min-height (area tocavel), mas visual de LINHA. A ACAO adiciona ao
   carrinho + abre o mini-cart (nao navega); o card inteiro (<a>) leva a PDP. Reset de <button>: sem bg/borda. */
html.ld-mobile .ld-shelf-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:44px;border:none;border-top:1px solid #EFE6C8;background:none;color:#B37E06;
  font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.01em;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ld-mobile .ld-shelf-cta i{font-size:.72rem}
html.ld-mobile .ld-shelf-cta:active{color:#8A5F04}

/* (8) NOSSAS UNIDADES — confianca (injetado). 3 unidades reais RS/PR/MT + atende Brasil */
html.ld-mobile #ld-units{padding:24px 0}
html.ld-mobile .ld-units-head{margin-bottom:14px}
html.ld-mobile .ld-units-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
html.ld-mobile .ld-unit{background:#fff;border:1px solid var(--g2,#e8e8e8);border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
html.ld-mobile .ld-unit i{color:#E5A700;font-size:1.1rem}
html.ld-mobile .ld-unit-uf{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.05rem;color:#0D0D0D;line-height:1}
html.ld-mobile .ld-unit-role{font-size:.64rem;color:#606060;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
html.ld-mobile .ld-units-foot{margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:#1A1A1A;display:flex;align-items:center;justify-content:center;gap:6px}
html.ld-mobile .ld-units-foot i{color:#16A34A}
html.ld-mobile .ld-sec-label{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#E5A700);margin-bottom:6px}
html.ld-mobile .ld-sec-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:#0D0D0D;letter-spacing:-.02em}

/* BANNER MOBILE gerenciavel (admin): carrossel de imagem 2:1 no lugar do hero, quando ha banners ativos.
   REFEITO 2026-07-09: moldura premium no corredor (estilo Mercado Livre) = respiro do header,
   raio 16, sombra leve. Dots com contorno escuro (visiveis sobre arte clara OU escura).
   Sem banner -> fallback: o hero curto acima. So mobile; desktop publico do hero nao muda. */
html.ld-mobile.ld-has-mbanner .hero-wrap{display:none !important}
html.ld-mobile #ld-mbanner{position:relative;margin:12px 16px 0;border-radius:16px;overflow:hidden;background:#1A1A1A;box-shadow:0 2px 10px rgba(0,0,0,.10)}
html.ld-mobile .ld-mbanner-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
html.ld-mobile .ld-mbanner-track::-webkit-scrollbar{display:none}
html.ld-mobile .ld-mbanner-slide{flex:0 0 100%;scroll-snap-align:start;display:block}
html.ld-mobile .ld-mbanner-slide img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
html.ld-mobile .ld-mbanner-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2}
html.ld-mobile .ld-mbanner-dot{box-sizing:border-box;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.28);padding:0;cursor:pointer}
html.ld-mobile .ld-mbanner-dot.on{width:22px;background:#E5A700;border-color:rgba(0,0,0,.28)}


/* ══════════ VITRINE MOSAICO (conceito B "Mosaico editorial") — so mobile + home ══════════
   Depois de "Ofertas a vista". Swiper horizontal; cada slide = 1 grupo de 3 fotos (1 grande + 2 menores).
   SO FOTO (sem texto sobre a imagem). O #ld-vitrine CLIPA (overflow:hidden) -> o peek do proximo slide
   nao vaza scroll pra pagina; corredor de 16px dos dois lados (respiro na 2a coluna). */
html.ld-mobile #ld-vitrine{--vgold:#E5A700;--vgold-dk:#B8910A;--vgraphite:#2F2F2F;--vg1:#F5F5F5;--vg2:#E8E8E8;padding:18px 16px 14px;overflow:hidden;background:#fff;color:#1A1A1A}
html.ld-mobile .ld-vit-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:13px}
/* eyebrow unificado: MESMO dourado de marca dos outros (#E5A700 = var(--gold), como "CATEGORIAS") */
html.ld-mobile .ld-vit-kicker{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:var(--gold,#E5A700);font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
html.ld-mobile .ld-vit-kicker:before{width:20px;height:2px;background:var(--gold,#E5A700);content:""}
html.ld-mobile .ld-vit-head h2{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.15rem;line-height:1.08;letter-spacing:-.02em;color:#0D0D0D}
html.ld-mobile .ld-vit-more{display:inline-flex;min-width:92px;min-height:44px;align-items:center;justify-content:center;gap:7px;border:1px solid var(--vg2);border-radius:11px;color:var(--vgraphite);font-size:.68rem;font-weight:800;text-decoration:none}
html.ld-mobile .ld-vit-more i{color:var(--vgold-dk)}
html.ld-mobile .ld-vit-swiper{position:relative;width:100%;overflow:visible}
html.ld-mobile .ld-vit-swiper:after{position:absolute;z-index:5;top:0;right:-16px;width:18px;height:100%;background:linear-gradient(90deg,transparent,#fff 86%);content:"";pointer-events:none}
html.ld-mobile .ld-vit-swiper .swiper-slide{height:auto}
/* aspect-ratio reserva a altura ANTES do decode das fotos (anti-CLS) */
html.ld-mobile .ld-vit-grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;aspect-ratio:1.2}
html.ld-mobile .ld-vit-photo{position:relative;display:block;min-width:44px;min-height:44px;overflow:hidden;border:1px solid var(--vg2);border-radius:12px;background:var(--vg1)}
html.ld-mobile .ld-vit-photo:first-child{grid-row:1/3}
html.ld-mobile .ld-vit-photo:after{position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;content:"";pointer-events:none;transition:border-color .18s}
html.ld-mobile .ld-vit-photo:focus-visible{outline:3px solid rgba(229,167,0,.34);outline-offset:2px}
html.ld-mobile .ld-vit-photo:focus-visible:after{border-color:var(--vgold)}
html.ld-mobile .ld-vit-photo img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
html.ld-mobile .ld-vit-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:48px;margin-top:8px}
html.ld-mobile .ld-vit-hint{display:flex;align-items:center;gap:6px;color:#717171;font-size:.6rem;font-weight:650;white-space:nowrap}
html.ld-mobile .ld-vit-hint i{color:var(--vgold-dk)}
html.ld-mobile .ld-vit-pagination{display:flex;align-items:center;justify-content:center;gap:5px;min-width:48px}
html.ld-mobile .ld-vit-pagination .swiper-pagination-bullet{width:6px;height:6px;margin:0 !important;background:#CFCFCF;opacity:1;transition:.2s}
html.ld-mobile .ld-vit-pagination .swiper-pagination-bullet-active{width:19px;border-radius:8px;background:var(--vgold)}
html.ld-mobile .ld-vit-arrows{display:flex;gap:6px}
html.ld-mobile .ld-vit-prev,html.ld-mobile .ld-vit-next{display:grid;width:44px;height:44px;place-items:center;border:1px solid #DED7C4;border-radius:50%;background:#fff;color:#4C4535;cursor:pointer}
html.ld-mobile .ld-vit-prev.swiper-button-disabled,html.ld-mobile .ld-vit-next.swiper-button-disabled{opacity:.38;cursor:default}
@media(max-width:374px){html.ld-mobile #ld-vitrine{padding-left:13px;padding-right:13px}html.ld-mobile .ld-vit-grid{gap:7px}html.ld-mobile .ld-vit-hint{max-width:78px;white-space:normal;line-height:1.2}}


/* ══════════ PDP MOBILE — sticky "Comprar Agora" CONTEXTUAL + galeria + kit grid + relacionados rail ══════════
   So no product.html (classe ld-pdp-bar-on setada pelo ld-mobile.js). A TAB BAR CONTINUA visivel. */
/* sticky contextual: ESCONDIDA por padrao (translateY p/ baixo); aparece (.on) quando o CTA inline sai da tela.
   Senta ACIMA da tab bar (bottom = altura da tab bar; refinado no viewport visual pelo ld-mobile.js). */
/* a sticky ocupa o MESMO lugar da tab bar (fundo do viewport visual, bottom setado pelo ld-mobile.js). */
html.ld-mobile .ld-pdpbar{position:fixed;left:0;right:0;bottom:0;z-index:1001;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid #E8E8E8;box-shadow:0 -4px 16px rgba(0,0,0,.12);
  transform:translateY(150%);opacity:0;pointer-events:none;transition:transform .26s ease,opacity .26s ease}
html.ld-mobile .ld-pdpbar.on{transform:translateY(0);opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){html.ld-mobile .ld-pdpbar{transition:none}}
/* sentinela invisivel logo apos o bloco de preco/CTAs (dispara a sticky quando sobe acima do topo). */
html.ld-mobile #ld-pdp-sentinel{height:1px;width:1px;margin:0;padding:0;visibility:hidden;pointer-events:none}
/* UMA BARRA POR VEZ: quando a sticky do PDP esta visivel, a tab bar DESLIZA pra baixo (some) — nunca as duas
   empilhadas (era o que espremia/cortava o texto). Transicao suave; respeita prefers-reduced-motion. */
html.ld-mobile #ld-tabbar{transition:transform .26s ease}
html.ld-mobile.ld-pdp-sticky-on #ld-tabbar{transform:translateY(140%);pointer-events:none}
@media (prefers-reduced-motion:reduce){html.ld-mobile #ld-tabbar{transition:none}}
html.ld-mobile .ld-pdpbar-price{display:flex;flex-direction:column;line-height:1.12;flex:0 0 auto;min-width:0}
html.ld-mobile .ld-pdpbar-plabel{font-size:.62rem;color:#606060;font-weight:600;white-space:nowrap}
html.ld-mobile .ld-pdpbar-pval{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:1.05rem;color:#1A1A1A;white-space:nowrap}
html.ld-mobile .ld-pdpbar-add{flex:0 0 auto;width:48px;height:48px;border-radius:10px;border:1.5px solid #1A1A1A;background:#fff;color:#1A1A1A;display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer}
html.ld-mobile .ld-pdpbar-add:active{background:rgba(0,0,0,.06)}
html.ld-mobile .ld-pdpbar-buy{flex:1;min-height:48px;border:none;border-radius:10px;
  background:var(--grad-gold,linear-gradient(135deg,#F2C94C,#E5A700,#D4920A));color:#1A1A1A;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:.98rem;letter-spacing:.01em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px}
html.ld-mobile .ld-pdpbar-buy:active{transform:translateY(1px)}
html.ld-mobile .ld-pdpbar-buy[disabled]{background:#E8E8E8;color:#9A9A9A;cursor:default}
/* PDP: UMA barra por vez no rodape (tab bar OU sticky). Reserva a altura de UMA barra (~68) + 16 de folga
   -> nenhuma linha de texto/secao fica cortada atras da barra. */
html.ld-mobile.ld-pdp-bar-on body{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
/* galeria full-width no corredor; aspect-ratio ja vem do base (.pdp-main-img{aspect-ratio:1}) = anti-CLS. */
html.ld-mobile .pdp-main-img{cursor:zoom-in;touch-action:pan-y}
html.ld-mobile .pdp-thumbs{gap:8px}
/* SETAS ‹ › discretas sobre a foto (>=2 imagens). Nao cobrem feio; fundo semi. Alvo 44. */
html.ld-mobile .ld-gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.10);color:#1A1A1A;display:flex;align-items:center;justify-content:center;
  font-size:1rem;z-index:6;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.16);-webkit-tap-highlight-color:transparent}
html.ld-mobile .ld-gal-arrow:active{background:#fff}
html.ld-mobile .ld-gal-prev{left:8px}
html.ld-mobile .ld-gal-next{right:8px}

/* (2) ITENS DO KIT — GRADE 3 colunas no mobile (desktop mantem a faixa lateral). !important p/ vencer o
   style inline (grid-auto-columns/justify-content) que o product.html seta pra a faixa lateral do desktop. */
html.ld-mobile .kit-cards{display:grid !important;grid-template-columns:repeat(3,1fr) !important;grid-auto-flow:row !important;
  grid-auto-columns:auto !important;justify-content:stretch !important;gap:8px !important;overflow-x:visible !important;
  padding:0 !important;margin:10px 0 0 !important}
html.ld-mobile .kitc-img{height:80px}
html.ld-mobile .kit-cards-compact .kitc-img{height:72px}
html.ld-mobile .kitc-b{padding:8px 9px;gap:2px}
html.ld-mobile .kitc-name{font-size:.72rem;line-height:1.25}
html.ld-mobile .kitc-ref{font-size:.64rem}

/* (3) "QUEM VIU, VIU TAMBEM" — RAIL horizontal (uma linha, swipe), estilo prateleira da home. So o rail rola. */
html.ld-mobile .related-grid{display:flex !important;grid-template-columns:none !important;gap:12px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px;overscroll-behavior-x:contain}
html.ld-mobile .related-grid::-webkit-scrollbar{display:none}
html.ld-mobile .related-grid .pcard{flex:0 0 62%;max-width:230px;scroll-snap-align:start}
html.ld-mobile .related-grid .pcard-img{height:150px}
html.ld-mobile .related-grid .pcard-price{color:#F2C036 !important}   /* preco dourado, igual ao rail da home (decisao do dono) */


/* (7) CARRINHO mobile — rodape FIXO "Total + Finalizar compra" (clona o molde .ld-pdpbar).
   "Uma barra por vez": com a barra do carrinho visivel, a tab bar desliza pra baixo (foco na compra).
   Preco em fundo CLARO = ESCURO (#1A1A1A), nunca dourado. Reserva ja coberta pelo padding-bottom 84px do body. */
html.ld-mobile .ld-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:1001;box-sizing:border-box;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #E8E8E8;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
html.ld-mobile .ld-cartbar.on{display:flex}
html.ld-mobile .ld-cartbar-info{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto;min-width:0}
html.ld-mobile .ld-cartbar-lbl{font-size:.62rem;color:#606060;font-weight:600}
html.ld-mobile .ld-cartbar-val{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:1.15rem;color:#1A1A1A;white-space:nowrap}
html.ld-mobile .ld-cartbar-parcel{font-size:.62rem;color:#606060;white-space:nowrap}
html.ld-mobile .ld-cartbar-go{flex:1;min-height:50px;border-radius:10px;background:var(--grad-gold,linear-gradient(135deg,#F2C94C,#E5A700,#D4920A));color:#1A1A1A;font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
html.ld-mobile .ld-cartbar-go:active{transform:translateY(1px)}
html.ld-mobile #ld-tabbar{transition:transform .26s ease}
html.ld-mobile.ld-cart-bar-on #ld-tabbar,html.ld-mobile.ld-ck-bar-on #ld-tabbar{transform:translateY(140%);pointer-events:none}
@media (prefers-reduced-motion:reduce){html.ld-mobile.ld-cart-bar-on #ld-tabbar,html.ld-mobile.ld-ck-bar-on #ld-tabbar{transition:none}}
/* CTA "Finalizar" DENTRO do resumo some no mobile (o fixo ja cobre) — sem CTA duplicado */
html.ld-mobile .summary .btn-gold.btn-block{display:none}
/* MINI-CARRINHO (gaveta lateral) no mobile: o dono MANTEM a gaveta (mostra os produtos) mas SEM o botao
   "Ver carrinho" — no celular a gaveta JA e o carrinho; "Finalizar compra" leva direto ao checkout.
   So mobile (desktop congelado mantem o "Ver carrinho"). O #mc-foot so tem 1 .btn-outline = "Ver carrinho". */
html.ld-mobile #mc-foot a.btn-outline[href="cart.html"]{display:none !important}
/* alvos de toque do carrinho no mobile (hoje minusculos) */
html.ld-mobile .cart-row .qty button{min-width:44px;min-height:44px;font-size:1.1rem}
html.ld-mobile .cart-row .qty input{min-height:44px}
html.ld-mobile .cart-rm{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:6px 4px}


/* (9) Refino de TAMANHO/ALINHAMENTO no mobile (NENHUMA cor alterada — so min-height/font-size/radius/alinhamento). */
/* PDP: os 3 CTAs nao podem colapsar (secundarios vinham com ~26px). So altura/alinhamento/raio; cores intactas. */
html.ld-mobile .pdp-ctas .btn-outline,
html.ld-mobile .pdp-ctas .btn-wpp-ghost{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px}
html.ld-mobile .pdp-ctas .btn-gold{border-radius:12px}
/* CHECKOUT: anti-zoom do iOS ao focar (input >=16px) + label legivel. So font-size. */
html.ld-mobile .ck-field input,
html.ld-mobile .ck-field select{font-size:16px}
html.ld-mobile .ck-field label{font-size:13px}
/* CARRINHO: textos pequenos legiveis. So font-size. */
html.ld-mobile .cart-end .cnpjp{font-size:13px}
html.ld-mobile .cart-rm{font-size:13px}
html.ld-mobile .sum-parcel{font-size:13px}
/* LOGIN: labels legiveis. So font-size. */
html.ld-mobile .auth-card label{font-size:13px}
/* PDP relacionados: "Ver produto" do rail (nasce com height:38px inline) sobe p/ alvo 44px. So altura/alinhamento. */
html.ld-mobile .related-grid .pcard .btn-outline{min-height:44px;display:flex;align-items:center;justify-content:center}


/* (10) CHECKOUT MOBILE em 3 ETAPAS (accordion) — SO estrutura/tamanho/legibilidade. Sem cor nova:
   reusa #E8E8E8 (bordas), #606060 (texto suave), #1A1A1A (texto), #fff (fundo), #E5A700 (marca), #16A34A (sucesso). */
html.ld-mobile .ck-m{display:block}
/* Faixa de seguranca no topo do conteudo */
html.ld-mobile .ck-m-secbar{display:flex;align-items:center;gap:10px;background:#F7F7F7;border:1px solid #E8E8E8;border-radius:10px;padding:10px 12px;margin-bottom:14px}
/* CADEADO VERDE (pedido do dono, 05/08). Era cinza sobre cinza: um cadeado sem cor nao passa
   sensacao de seguranca nenhuma, e esta e a primeira coisa que o cliente ve no checkout do celular,
   com R$ 9 mil no carrinho. Verde e o codigo universal de conexao segura — o mesmo do cadeado da
   barra do navegador. Verde #1F7A4D sobre #EAF6EF da 6,2:1 de contraste, acima do minimo AA. */
html.ld-mobile .ck-m-secbar-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:#EAF6EF;border:1px solid #BFE3CD;display:flex;align-items:center;justify-content:center;color:#1F7A4D}
html.ld-mobile .ck-m-secbar-tx{display:flex;flex-direction:column;line-height:1.25}
html.ld-mobile .ck-m-secbar-t{font-weight:700;font-size:.82rem;color:#1A1A1A}
html.ld-mobile .ck-m-secbar-s{font-size:.72rem;color:#606060}
/* Stepper = PROGRESSO fino: 3 tracinhos preenchem em dourado; UM indicador (sem numero da etapa repetido). */
html.ld-mobile .ck-m-stepper{margin:2px 0 16px}
html.ld-mobile .ck-m-segs{display:flex;gap:6px;margin-bottom:7px}
html.ld-mobile .ck-m-seg{flex:1 1 0;height:5px;border-radius:3px;background:#E8E8E8}
html.ld-mobile .ck-m-seg.done,html.ld-mobile .ck-m-seg.now{background:#E5A700}
html.ld-mobile .ck-m-steplabel{font-family:'Space Grotesk',Inter,sans-serif;font-weight:600;font-size:.8rem;color:#606060}
html.ld-mobile .ck-m-steplabel b{color:#1A1A1A;font-weight:700}
html.ld-mobile .ck-m-steplabel .sep{color:#C9C9C9;margin:0 5px}
/* Resumo do pedido recolhivel */
html.ld-mobile .ck-m-order{border:1px solid #E8E8E8;border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden}
html.ld-mobile .ck-m-order-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:0 14px;background:#fff;border:0;cursor:pointer;font-size:.9rem;color:#1A1A1A;font-weight:600}
html.ld-mobile .ck-m-order-total{display:flex;align-items:center;gap:8px;color:#606060;font-weight:600}
html.ld-mobile .ck-m-order-total b{color:#1A1A1A;font-family:'JetBrains Mono','Space Grotesk',monospace}
html.ld-mobile .ck-m-chev{transition:transform .2s}
html.ld-mobile .ck-m-order.open .ck-m-chev{transform:rotate(180deg)}
html.ld-mobile .ck-m-order-body{display:none;padding:2px 14px 14px}
html.ld-mobile .ck-m-order.open .ck-m-order-body{display:block}
/* Cartao de etapa */
html.ld-mobile .ck-m-step{border:1px solid #E8E8E8;border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
html.ld-mobile .ck-m-step.open{border-color:#1A1A1A}
html.ld-mobile .ck-m-step-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 4px}
html.ld-mobile .ck-m-step-h{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.02rem;color:#1A1A1A}
html.ld-mobile .ck-m-step-h b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#1A1A1A;color:#fff;font-size:.85rem}
html.ld-mobile .ck-m-step.closed .ck-m-step-h b{background:#E8E8E8;color:#606060}
html.ld-mobile .ck-m-edit{display:none;min-height:36px;padding:0 11px;border:1px solid #E8E8E8;border-radius:8px;background:#fff;color:#1A1A1A;font-size:.8rem;font-weight:700;cursor:pointer;gap:6px}
html.ld-mobile .ck-m-step.closed .ck-m-edit{display:inline-flex;align-items:center}
html.ld-mobile .ck-m-edit i{font-size:.7rem;color:#8C8880}
/* SELO DA ETAPA CUMPRIDA: o mesmo sinal verde do desktop, do tamanho de celular. So aparece em etapa
   recolhida (quem esta editando nao precisa de medalha) e so quando o dado esta la de verdade. */
html.ld-mobile .ck-m-ok{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 9px;border-radius:20px;background:#E8F6EC;color:#15803D;font-family:Inter,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.2px;text-transform:none}
html.ld-mobile .ck-m-ok i{font-size:.6rem}
/* RESUMO RECOLHIDO: icone + linha forte + linha fraca (era uma frase cinza unica com tudo colado por
   "·", que em 375px virava duas ou tres linhas sem hierarquia). */
html.ld-mobile .ck-m-step-sum{display:none;gap:10px;align-items:flex-start;padding:4px 14px 14px}
html.ld-mobile .ck-m-step.closed .ck-m-step-sum{display:flex}
html.ld-mobile .ck-m-sum-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#F7F7F7;border:1px solid #E8E8E8;display:flex;align-items:center;justify-content:center;color:#1A1A1A;font-size:.78rem}
html.ld-mobile .ck-m-sum-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
html.ld-mobile .ck-m-sum-1{font-size:.86rem;font-weight:600;color:#1A1A1A;line-height:1.35}
html.ld-mobile .ck-m-sum-2{font-size:.75rem;color:#606060;line-height:1.4}
/* ══ A FICHA DA IDENTIFICACAO (a `.ck-res` do desktop) VESTIDA DE CELULAR ══════════════════════════
   Mesmo bloco, mesma funcao que monta: aqui so encolhe o que precisa encolher para 375px. O desktop tem
   margem de 12px em cima porque nasce embaixo de um subtitulo; no celular ele nasce colado no cabecalho
   da etapa, entao a margem sai. E o rotulo/valor deixa de disputar a mesma linha: com "E-mail" a
   esquerda e "gabamazonp@gmail.com" a direita, sobra pouco mais de 150px para o valor e ele quebra no
   meio da palavra. Empilhado, o valor tem a largura inteira do cartao. */
html.ld-mobile .ck-res{margin-top:0;padding:13px 13px 11px;border-radius:12px;background:#FAFAF9}
/* "Editar" FICA NA DIREITA DA MESMA LINHA, como no desktop. Com o `flex-wrap:wrap` que o desktop usa, em
   375px o botao caia para a linha de baixo e ficava flutuando embaixo do circulo (medido no primeiro
   corte). `nowrap` + o bloco do nome podendo encolher resolve, e quem quebra em duas linhas e a linha
   "Pessoa fisica · 706.825.260-53" — que pode quebrar; cortar o numero do documento, nao. */
html.ld-mobile .ck-res-top{gap:10px;flex-wrap:nowrap;align-items:flex-start}
html.ld-mobile .ck-res-quem{flex:1 1 auto;align-items:flex-start}
html.ld-mobile .ck-res-edit{flex:0 0 auto}
html.ld-mobile .ck-res-av{width:38px;height:38px;flex:0 0 38px;font-size:.95rem}
html.ld-mobile .ck-res-quem b{font-size:.92rem}
html.ld-mobile .ck-res-quem span:not(.ck-res-av){font-size:.76rem}
html.ld-mobile .ck-res-edit{min-height:36px;padding:0 12px;font-size:.78rem;display:inline-flex;align-items:center;background:#fff}
html.ld-mobile .ck-res-li{display:block;padding:9px 0 0}
html.ld-mobile .ck-res-li span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:#8C8880}
html.ld-mobile .ck-res-li b{display:block;text-align:left;font-size:.85rem;font-weight:600;margin-top:1px}
/* Cabecalho da etapa: numero em circulo, como o desktop (o CSS do circulo ja existia; o que faltava era
   o numero no HTML). Titulo um ponto maior e a linha respirando igual ao cartao do desktop. */
html.ld-mobile .ck-m-step-head{align-items:center;padding:15px 14px 5px}
html.ld-mobile .ck-m-step-h{font-size:1.06rem;flex-wrap:wrap;row-gap:6px}
html.ld-mobile .ck-m-step-body{display:none;padding:8px 16px 18px}
html.ld-mobile .ck-m-step.open .ck-m-step-body{display:block}
/* O "Valor com CNPJ" NAO TEM MAIS REGRA DE CELULAR, de proposito (pedido do dono: "desktop e mobile
   vao usar so um"). Tinha tres versoes aqui em sequencia — uma linha, depois duas linhas, depois
   duas linhas maiores — todas tentando resolver com ajuste de celular um problema que era do
   desenho: a caixa creme aninhada comia a largura que faltava. Sem ela, o mesmo CSS do ld-store.css
   serve as duas telas. Se voltar a apertar em algum aparelho, o conserto e no desenho, nao aqui. */

/* ══ MEIOS DE PAGAMENTO NO CELULAR ═══════════════════════════════════════════════════════════════
   Medido no iPhone SE (375px), no print do dono: a linha do titulo tem 275px e se reparte em icone
   22 + nome + etiqueta 79 + bolinha 20, com tres respiros de 12. Sobravam 118px para o nome, e
   "Boleto bancário" pede 123. FALTAVAM CINCO PIXELS — e por cinco pixels o nome quebrava em duas
   linhas, deixando aquele cartao com 109px de altura contra 84 dos vizinhos: a fileira inteira
   parecia desalinhada por causa de um so.

   Os 5px saem do RESPIRO, nao do texto: respiro 12->10 (x3), padding lateral 16->13, icone 22->20.
   Sao 14px de volta, entao o nome fica com 132 para 123 — folga real, e nao um encaixe que a
   proxima palavra maior quebra de novo. Encolher a fonte tambem resolveria, e foi por isso que NAO
   fiz: o nome do meio de pagamento e o rotulo que o cliente le para decidir, e 16px no celular ja e
   o minimo confortavel. Quem cede espaco e o espaco.

   `.det` acompanha a nova coluna do icone (20 + 10 = 30px), senao a descricao fica pendurada 4px a
   direita do nome e o cartao ganha um degrau no meio. */
html.ld-mobile .pay-opt{padding:12px 13px;border-radius:12px}
html.ld-mobile .pay-opt .ph{gap:10px}
html.ld-mobile .pay-opt .ph i{width:20px;flex:0 0 20px;font-size:1.05rem}
html.ld-mobile .pay-opt .det{padding-left:30px;margin-top:6px;line-height:1.42}
/* A bolinha e o unico alvo de toque do cartao inteiro? Nao — o cartao todo e clicavel (role=button),
   entao ela e so o SINAL. 20px continua legivel; aumentar so faria concorrer com a etiqueta. */
html.ld-mobile .pay-opt .ph .tag{font-size:.68rem;padding:3px 7px}
/* Toggle PF/PJ (segmented): 2 col iguais, 1 linha cada (sem wrap), 48px. Cores do padrao atual (ld-store) mantidas. */
html.ld-mobile .toggle-pf-pj{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
html.ld-mobile .toggle-pf-pj button{min-height:48px;border-radius:10px;font-size:.9rem;font-weight:700;white-space:nowrap;padding:0 8px}
/* Campos: label 13px/600, input 16px (anti-zoom) min-height 48, radius 10, foco = anel dourado. Grid 2 col + full. */
html.ld-mobile .ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* ══ IDENTIFICACAO EM UMA COLUNA (SO NO CELULAR) ══════════════════════════════════════════════════
   Medido no print do dono (iPhone SE, 375px): CPF e "Telefone / WhatsApp" lado a lado deixam ~155px
   por campo, e com os 16px de fonte que o campo PRECISA ter (menos que isso o iOS da zoom sozinho ao
   focar) o valor nao cabe: "(15) 99842-4688" aparecia como "(15) 99842-468". Numero cortado em campo
   de checkout e o cliente achando que digitou errado.
   O `:has` mira SO a grade da identificacao (a unica com #f-doc) — a da entrega segue com CEP/Numero e
   Cidade/UF em pares, que sao valores curtos e ficam melhores lado a lado. Desktop nao muda: isto vive
   em ld-mobile.css, sob html.ld-mobile. */
html.ld-mobile .ck-grid:has(#f-doc){grid-template-columns:1fr}
/* Complemento sozinho numa metade deixava um buraco do lado; ocupa a linha. */
html.ld-mobile .ck-field:has(#f-compl){grid-column:1 / -1}
html.ld-mobile .ck-field{display:flex;flex-direction:column;gap:5px;min-width:0}
html.ld-mobile .ck-field.full{grid-column:1 / -1}
html.ld-mobile .ck-field label{font-size:13px;font-weight:600;color:#606060}
html.ld-mobile .ck-field input{width:100%;box-sizing:border-box;min-height:48px;border-radius:10px;border:1px solid #E8E8E8;padding:0 12px;font-size:16px;background:#fff;color:#1A1A1A}
html.ld-mobile .ck-field input:focus{outline:2px solid #E5A700;outline-offset:1px;border-color:#E5A700}
/* erro do campo: quebra em varias linhas, JAMAIS cortado (item de validacao) */
html.ld-mobile .ck-field .ck-err{white-space:normal;word-break:break-word;height:auto;overflow:visible;line-height:1.35}
/* Chip CNPJ6 (so no PJ): dourado solido + texto PRETO (8,1:1 AA). Largura do conteudo, sem banner/gradiente. */
html.ld-mobile .ck-m-cnpj-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:10px 0 2px}
html.ld-mobile .ck-m-cnpj-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#E5A700;color:#1A1A1A;font-size:.84rem;font-weight:700;line-height:1.25}
html.ld-mobile .ck-m-cnpj-chip b{font-weight:800}
/* link discreto p/ as regras do cupom (nao poluir a tela) */
html.ld-mobile .ck-m-cnpj-rules{font-size:.74rem;color:#1A1A1A;text-decoration:underline;font-weight:600}
html.ld-mobile .ck-m-ie-note .ck-m-cnpj-rules{white-space:nowrap}
html.ld-mobile .ck-m-microtrust .ck-m-priv{color:#1A1A1A;text-decoration:underline;font-weight:600}
/* acento de marca (excecao autorizada): badge da etapa ABERTA em dourado com texto ESCURO (contraste ~8:1, AA) */
html.ld-mobile .ck-m-step.open .ck-m-step-h b{background:#E5A700;color:#1A1A1A}
/* Resumo: qtd em coluna propria + thumb CONTAIN 48px + nome 14px/600 + preco mono a direita. Altura estavel (anti-CLS). */
html.ld-mobile .ck-m-it{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-bottom:1px solid #F0F0F0}
html.ld-mobile .ck-m-it:last-of-type{border-bottom:0}
html.ld-mobile .ck-m-it-q{flex:0 0 auto;min-width:26px;text-align:right;font-family:'JetBrains Mono','Space Grotesk',monospace;font-size:.8rem;color:#606060;font-variant-numeric:tabular-nums}
html.ld-mobile .ck-m-it-img{flex:0 0 auto;width:48px;height:48px;border:1px solid #E8E8E8;border-radius:8px;object-fit:contain;padding:3px;background:#fff;box-sizing:border-box}
html.ld-mobile .ck-m-it-ph{display:flex;align-items:center;justify-content:center;color:#606060;font-size:1.1rem}
html.ld-mobile .ck-m-it-name{flex:1 1 auto;min-width:0;font-size:.875rem;font-weight:600;line-height:1.35;color:#1A1A1A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.ld-mobile .ck-m-it-price{flex:0 0 auto;font-family:'JetBrains Mono','Space Grotesk',monospace;font-weight:700;font-size:.9rem;color:#1A1A1A;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Total: À VISTA (numero escuro grande) + parcelado ao mesmo tempo. Frete GRATIS. Verde AA #15803D (small). */
html.ld-mobile #ck-totals .sum-row{display:flex;align-items:center;justify-content:space-between;font-size:.84rem;color:#606060;padding:3px 0}
html.ld-mobile #ck-totals .sum-row b{color:#1A1A1A;font-weight:700}
/* GRATIS/aplicado em VERDE AA (#15803D ~5:1). Especificidade acima de ".sum-row b" p/ nao virar grafite. */
html.ld-mobile #ck-totals .sum-row .ck-m-free,html.ld-mobile #ck-totals .sum-row .ck-m-eco{color:#15803D;font-weight:800}
html.ld-mobile .ck-m-avista{margin-top:10px;background:#fff;border:1px solid #EFEFEF;border-radius:8px;padding:12px 14px}
html.ld-mobile .ck-m-avista .sum-total{display:block;border:0;padding:0;margin:0}
html.ld-mobile .ck-m-avista .sum-total .val{font-family:'JetBrains Mono','Space Grotesk',monospace;font-size:1.5rem;font-weight:800;color:#1A1A1A;font-variant-numeric:tabular-nums;line-height:1.1}
html.ld-mobile .ck-m-avista-leg{font-size:.78rem;color:#606060;margin-top:2px}
html.ld-mobile .ck-m-eco{font-size:.8rem;font-weight:700;color:#15803D;margin-top:6px}
html.ld-mobile .ck-m-parcel{font-size:.85rem;color:#606060;margin-top:8px}
html.ld-mobile .ck-m-parcel b{color:#1A1A1A;font-weight:700}
html.ld-mobile .ck-m-total-leg{font-size:.7rem;color:#606060;font-weight:600}
/* Notas / IE */
html.ld-mobile .ck-m-ie-note{margin-top:10px;font-size:.78rem;color:#606060;line-height:1.45;display:flex;gap:7px}
html.ld-mobile .ck-m-ie-note i{color:#E5A700;margin-top:2px}
/* Endereco do cadastro */
html.ld-mobile .ck-m-saved{border:1px solid #E8E8E8;border-radius:10px;padding:12px;margin-bottom:12px}
html.ld-mobile .ck-m-saved-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem;color:#1A1A1A;margin-bottom:4px}
html.ld-mobile .ck-m-saved-h i{color:#E5A700}
html.ld-mobile .ck-m-saved-a{font-size:.82rem;color:#606060;line-height:1.4;margin-bottom:10px}
html.ld-mobile .ck-m-saved-btns{display:flex;flex-wrap:wrap;gap:8px}
html.ld-mobile .ck-m-saved-btns .btn{min-height:44px;font-size:.82rem}
/* Confirmar endereco */
html.ld-mobile .ck-m-confirm{width:100%;min-height:48px;margin-top:12px;border:1px solid #1A1A1A;border-radius:10px;background:#fff;color:#1A1A1A;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.92rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
html.ld-mobile .ck-m-confirm.on{border-color:#16A34A;color:#16A34A}


/* (11) CHECKOUT mobile — bloco de LOGIN (topo do card Identificacao), estado logado, micro-confianca e selos.
   Login SIMULADO (sem token/PII). Dourado so como preenchimento com texto PRETO. */
html.ld-mobile .ck-m-login{display:flex;flex-direction:column;gap:10px;margin-bottom:2px}
/* "Ja tem conta? Entrar" — link, nao botao, e vive no CABECALHO do passo 1, no lugar do "Editar".
   `margin-left:auto` empurra para a direita do titulo, que e onde o olho procura acao. Area de toque
   de 44px (o minimo para o dedo) mesmo sendo texto. Ver o comentario no checkout.html. */
html.ld-mobile .ck-m-login-ja{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:.8rem;color:#6E6B66;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
html.ld-mobile .ck-m-login-ja b{color:#B47C00;font-weight:700;margin-left:4px}
html.ld-mobile .ck-m-login-ja:active b{opacity:.7}
html.ld-mobile .ck-m-login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;border-radius:11px;border:1px solid transparent;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.95rem;cursor:pointer}
html.ld-mobile .ck-m-login-btn.primary{background:#E5A700;color:#1A1A1A;border-color:#E5A700}
html.ld-mobile .ck-m-login-btn.ghost{background:#fff;color:#1A1A1A;border-color:#E8E8E8}
html.ld-mobile .ck-m-login-btn:active{transform:translateY(1px)}
html.ld-mobile .ck-m-gicon{flex:0 0 auto}
html.ld-mobile .ck-m-login-div{display:flex;align-items:center;gap:12px;margin:14px 0 2px;color:#606060;font-size:.78rem}
html.ld-mobile .ck-m-login-div::before,html.ld-mobile .ck-m-login-div::after{content:"";flex:1;height:1px;background:#E8E8E8}
/* estado logado (conta LD/Google) */
html.ld-mobile .ck-m-acct{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid #E8E8E8;border-left:3px solid #15803D;border-radius:10px;background:#fff}
html.ld-mobile .ck-m-acct-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#1A1A1A;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.9rem}
html.ld-mobile .ck-m-acct-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
html.ld-mobile .ck-m-acct-n{font-weight:700;font-size:.84rem;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ld-mobile .ck-m-acct-e{font-size:.74rem;color:#606060;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ld-mobile .ck-m-acct-out{flex:0 0 auto;background:none;border:0;color:#1A1A1A;font-size:.76rem;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}
html.ld-mobile .ck-m-acct-src{display:flex;align-items:flex-start;gap:7px;font-size:.74rem;color:#606060;line-height:1.35;margin:8px 2px 2px}
html.ld-mobile .ck-m-acct-src i{color:#15803D;margin-top:2px}
/* micro-confianca perto dos dados sensiveis: UMA frase corrida (cadeado inline + texto + link inline), sem colunas */
html.ld-mobile .ck-m-microtrust{display:block;margin:14px 0 0;padding:10px 12px;background:#F7F7F7;border-radius:10px;font-size:.76rem;color:#606060;line-height:1.5}
html.ld-mobile .ck-m-microtrust i{color:#1A1A1A;margin-right:6px}
/* selos de seguranca (discretos, texto escuro; icone verde) */
/* SELOS: tres colunas iguais em vez de fila que embrulha. Com "NF-e em todo pedido" no meio, o flex-wrap
   deixava dois selos na primeira linha e um sozinho na segunda, centralizado e torto (print do dono).
   Icone em cima, texto embaixo: cabe nos 375px sem cortar e fica simetrico. */
html.ld-mobile .ck-m-seals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:2px 0 4px;padding:10px 2px;border-top:1px solid #F0F0F0}
html.ld-mobile .ck-m-seal{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:0 4px;text-align:center;font-size:.7rem;font-weight:600;color:#1A1A1A;line-height:1.25}
html.ld-mobile .ck-m-seal + .ck-m-seal{border-left:1px solid #F0F0F0}
html.ld-mobile .ck-m-seal i{font-size:.86rem;color:#15803D}
html.ld-mobile .ck-m-seal i{color:#15803D;font-size:.85rem}


/* (12) CATALOGO mobile — card de produto (.pc) em 2 COLUNAS, compacto. So html.ld-mobile; desktop 4-col intacto.
   Nada de cor alterada (preco #F2C036, badges, verde: intocados). */
html.ld-mobile .prods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
html.ld-mobile .pc--wide{grid-column:span 1}   /* no mobile o card "wide" nao ocupa 2 colunas */
/* imagem deterministica (anti-CLS), ferramenta inteira (object-fit:contain herdado do base .pc-img .ld-admin-img) */
html.ld-mobile .pc-img{height:128px}
html.ld-mobile .pc--wide .pc-img{height:128px}
/* corpo em coluna com ritmo uniforme; o rodape (.pc-foot) e empurrado pro fundo (margin-top:auto do base)
   -> preco/parcelado/chip/CTA alinham na MESMA baseline entre os 2 cards da linha (nome curto x longo) */
html.ld-mobile .pc-body{padding:10px;display:flex;flex-direction:column}
/* ocultar so o que polui o card estreito (seller/desc/stock). O parcelado e o "De R$" VOLTAM (2026-07-15). */
html.ld-mobile .pc-seller,
html.ld-mobile .pc-desc,
html.ld-mobile .pc-stock{display:none}
/* NOME: Inter 600, clamp de 2 linhas LIMPO (sem sliver). height == max-height == 2.6em (= 2*line-height 1.3),
   casado exato -> nunca sobra pedaco da 3a linha invadindo o preco; altura igual em todos os cards. */
html.ld-mobile .pc-cat{font-size:10px;font-weight:600;color:#6B7280;letter-spacing:.06em;margin:0 0 4px}
html.ld-mobile .pc-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--font);font-weight:600;font-size:13px;line-height:1.3;
  height:2.6em;min-height:2.6em;max-height:2.6em;margin:0 0 8px}
/* BLOCO DE PRECO (hierarquia): [De R$ riscado] -> PRECO A VISTA (heroi) -> PARCELADO -> chip CNPJ -> CTA */
html.ld-mobile .pc-old{display:block;font-size:11px;color:#6B7280;line-height:1.2;margin:0 0 2px}
html.ld-mobile .pc-price{font-family:var(--font-alt);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15;margin:0 0 3px}   /* dourado #F2C036 do base --price-user; NAO mexer na cor */
/* PARCELADO de volta (era display:none): so "10x de R$ X" no card estreito (corta "ou"/"no cartao" via .pc-parcel-x) */
html.ld-mobile .pc-parcel{display:block;font-size:12px;font-weight:500;color:#4B5563;font-variant-numeric:tabular-nums;line-height:1.2;margin:0 0 8px}
html.ld-mobile .pc-parcel b{color:#4B5563;font-weight:600}
html.ld-mobile .pc-parcel-x{display:none}   /* esconde "ou " e " no cartao" (detalhe completo fica na PDP) */
/* CNPJ curto ("-6% CNPJ") no mobile; chip dourado-claro com TEXTO ESCURO (base #6B4E00 sobre --gold-xlt) */
html.ld-mobile .pc-cnpj-long{display:none}
html.ld-mobile .pc-cnpj-short{display:inline}
html.ld-mobile .pc-cnpj{font-size:.64rem;margin:0 0 8px}
/* CTA: preto #171717, texto branco, full-width, >=44px, feedback :active (mobile nao tem hover confiavel) */
html.ld-mobile .pc-cta-long{display:none}
html.ld-mobile .pc-cta{width:100%;height:44px;font-size:.8rem;margin:0;background:#171717;color:#fff}
html.ld-mobile .pc-cta:hover{background:#171717;color:#fff}   /* neutraliza o hover-gold do desktop (sticky no touch) */
html.ld-mobile .pc-cta:active{background:#000;transform:translateY(1px)}
/* BADGE "5% OFF PIX": pill escuro #171717 (base usa --grafite #2F2F2F), texto dourado, sem emoji */
html.ld-mobile .pc-badge-excl{background:#171717;color:#E5A700}
/* FAVORITAR: PADRAO UNICO do site (igual desktop/PDP/header) — coracao VERMELHO pequeno (var(--red) via base),
   box branco sutil do base. No mobile so fica sempre-visivel (sem hover) e com alvo de toque 40px + icone ~16px.
   NAO ha override de cor: cai no base .pc-wish.on{color:var(--red)}. A rodada anterior (dourado #E5A700 + 44px
   aumentado) foi REVERTIDA — nada de dourado, nada de quadrado grande. */
html.ld-mobile .pc-wish{width:28px;height:28px;top:8px;right:8px;border-radius:8px;opacity:1;font-size:14px}
/* amplia a AREA DE TOQUE para ~44px sem crescer o box visivel (28px): pseudo transparente que estende o alvo */
html.ld-mobile .pc-wish::before{content:"";position:absolute;inset:-8px}

/* (13) FAVORITO no PDP mobile — coracao no topo-direito da foto principal (badge "5% OFF PIX" fica no topo-esq).
   MESMO padrao do card: box 28px, icone 14px, vermelho #DC2626 quando favoritado, cinza quando nao, fundo branco
   sutil. So mobile (o .pdp-wish nasce display:none no ld-store.css; desktop CONGELADO nao mostra). */
html.ld-mobile .pdp-wish{
  display:flex;position:absolute;top:12px;right:12px;z-index:5;
  width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;
  background:#fff;border:1px solid #E8E8E8;color:#909090;font-size:14px;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.14);-webkit-tap-highlight-color:transparent}
html.ld-mobile .pdp-wish.on{color:#DC2626;border-color:#DC2626}
html.ld-mobile .pdp-wish::before{content:"";position:absolute;inset:-8px}   /* alvo de toque ~44px sem crescer o box */
/* (2) VAO DO TOPO: no mobile o catalogo comeca perto da busca. O #produtos tem inline padding-top:64px (o
   ld-catalog-view do desktop usa 28px mas o inline vence); so no mobile aperto com !important p/ ~14px. O
   header que gruda ao rolar e reservado pela .ld-hdr-ph (invariante 6 intacto) — aqui some so o respiro EXTRA. */
html.ld-mobile.ld-catalog-view #produtos{padding-top:14px !important;scroll-margin-top:64px}


/* ============================================================
   (14) MINHA CONTA (conta.html) — camada MOBILE app-style (tipo ML/Magalu). 2026-07-15.
   DESKTOP CONGELADO: o @media 880 inline e o layout desktop NAO mudam; tudo aqui e html.ld-mobile.
   Menos "caixa dentro de caixa": identidade e nav sem borda-box, so hairlines. Cinzas neutros AA.
   ============================================================ */
/* breadcrumb "Inicio > Minha Conta" sem valor no mobile */
html.ld-mobile .acc .crumb{display:none}
html.ld-mobile .acc{padding:6px 0 40px}
html.ld-mobile .acc-wrap{gap:0}
html.ld-mobile .acc-side{gap:0}
/* DRILL-DOWN (uma tela = uma coisa): RAIZ (#visao ou sem hash) = identidade + menu; SECAO = conteudo + voltar.
   Raiz esconde o conteudo (a visao vira o proprio menu); Secao esconde o menu/identidade. */
html.ld-mobile[data-acc="visao"] .acc-content{display:none}
html.ld-mobile[data-acc]:not([data-acc="visao"]) .acc-side{display:none}
html.ld-mobile .acc-nav a[data-tab="visao"]{display:none}   /* "Visao geral" fora do menu: a raiz JA e a visao */
/* barra VOLTAR no topo da secao ("‹ Minha conta"), alvo >=44px, volta pra raiz (#visao) */
html.ld-mobile .acc-back-m{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 10px;padding:6px 2px;background:none;border:none;color:#1A1A1A;font-size:15px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
html.ld-mobile .acc-back-m i{color:#4B5563;font-size:.95rem}
html.ld-mobile .acc-back-m:active{opacity:.6}
/* (1) IDENTIDADE enxuta (uma vez so): avatar + nome + email + badge + "Sair" no topo-DIREITO; sem caixa pesada */
html.ld-mobile .acc-user{position:relative;border:none;border-radius:0;padding:14px 2px 16px;gap:13px;border-bottom:1px solid #E8E8E8;background:transparent}
html.ld-mobile .acc-avatar{width:56px;height:56px;font-size:1.5rem}
html.ld-mobile .acc-user-info{padding-right:66px}   /* reserva o canto p/ o "Sair" (nome/email nao passam por baixo) */
html.ld-mobile .acc-user-info b{font-size:16px}
html.ld-mobile .acc-user-info span{font-size:13px;color:#4B5563}   /* email >=13px, AA (#4B5563 ~7:1) */
html.ld-mobile .acc-badge{font-size:13px;padding:3px 10px;margin-top:7px}
/* SAIR no topo-direito da identidade (alvo >=44px), vermelho #DC2626 */
html.ld-mobile .acc-sair-top{display:inline-flex;align-items:center;gap:6px;position:absolute;top:8px;right:0;min-height:44px;padding:0 6px;background:none;border:none;color:#DC2626;font-family:var(--font,'Inter',sans-serif);font-weight:700;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ld-mobile .acc-sair-top i{font-size:.95rem}
html.ld-mobile .acc-sair-top:active{opacity:.6}
/* (3) NAV = LISTA VERTICAL (nao 2 colunas): linha >=54px, icone + label + chevron, hairlines */
html.ld-mobile .acc-nav{flex-direction:column;flex-wrap:nowrap;background:transparent;border:none;border-radius:0;padding:0;gap:0}
html.ld-mobile .acc-nav a{flex:none;justify-content:flex-start;min-width:0;min-height:54px;padding:14px 2px;border-radius:0;border-bottom:1px solid #E8E8E8;font-size:15px;font-weight:600;color:#1A1A1A;gap:14px}
html.ld-mobile .acc-nav a{min-height:56px}                              /* linha >=56px (Opcao A) */
html.ld-mobile .acc-nav a i{width:26px;text-align:center;color:#E5A700;font-size:1.05rem}   /* icone DOURADO (decorativo; o label #1A1A1A e o texto acessivel AA) */
html.ld-mobile .acc-nav a.on{background:transparent;color:#1A1A1A}
html.ld-mobile .acc-nav a.on i{color:#E5A700}
html.ld-mobile .acc-nav a:not(.sair)::after{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;color:#B8B8B8;font-size:.82rem}   /* chevron #B8B8B8 a direita */
html.ld-mobile .acc-nav .fav-c{margin-left:auto;background:#DC2626;color:#fff;font-size:12px;min-width:20px;height:20px;border-radius:10px}   /* contador VERMELHO no mobile (desktop mantem preto) */
/* "Sair" do fim do menu NAO aparece no mobile (foi p/ o topo-direito da identidade). Desktop mantem na nav. */
html.ld-mobile .acc-nav a.sair{display:none}
/* (2) VISAO GERAL: some o H1 "Ola, {nome}" (nome ja esta na identidade) e os 3 stat-cards em caixa */
html.ld-mobile .acc-head-visao{display:none !important}
html.ld-mobile .acc-stats{display:none !important}
/* (7) contraste AA + legibilidade dos textos/titulos */
html.ld-mobile .acc-sec-t{color:#4B5563;font-size:13px;margin:18px 0 12px}
html.ld-mobile .acc-head h1{font-size:1.3rem}
html.ld-mobile .acc-head p{font-size:14px;color:#4B5563}
/* PEDIDOS: legibilidade (>=13-14px) + alvos de acao >=44px */
html.ld-mobile .ord-top .k{color:#4B5563;font-size:11px}
html.ld-mobile .ord-it-name{font-size:14px}
html.ld-mobile .ord-it-q{font-size:13px;color:#4B5563}
html.ld-mobile .ord-total{font-size:14px}
html.ld-mobile .ord-foot .acts{width:100%;gap:8px}
html.ld-mobile .ord-foot .btn{height:44px;font-size:14px;flex:1}
/* (5) FAVORITOS em 2 colunas (vence o @media 520 = 1 col) + alvos >=44px */
html.ld-mobile .fav-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}
html.ld-mobile .fav-grid .pcard-b .btn{height:44px;font-size:13px}
html.ld-mobile .fav-x{width:44px;height:44px;font-size:.95rem}
/* (6) MEUS DADOS / ENDERECOS: inputs 16px (anti-zoom iOS), altura >=48, label >=13 */
html.ld-mobile .acc-card{padding:16px}
html.ld-mobile .acc-form{grid-template-columns:1fr;gap:14px}
html.ld-mobile .acc-field label{font-size:13px;color:#4B5563}
html.ld-mobile .acc-field input,html.ld-mobile .acc-field select{font-size:16px;height:48px}
/* (4) BLOCO DE AJUDA (so na RAIZ mobile) — preenche o vazio: chip cupom CNPJ6 + botao WhatsApp. Some nas secoes
   (a .acc-side inteira some) e no desktop (.acc-help-m nasce display:none no conta.html). */
html.ld-mobile[data-acc="visao"] .acc-help-m{display:flex;flex-direction:column;gap:10px;margin-top:18px}
html.ld-mobile .acc-cupom-m{display:flex;align-items:center;gap:10px;background:#FDF4DE;border:1px solid #E5A700;border-radius:12px;padding:12px 14px;text-decoration:none;color:#1A1A1A;font-size:14px;line-height:1.35}
html.ld-mobile .acc-cupom-m i{color:#7A5800;flex-shrink:0}
html.ld-mobile .acc-cupom-m b{font-weight:800}
/* AVISO discreto (PJ sem IE): "Coloque sua Inscricao Estadual para ganhar 6%". Info neutro, nao "cupom ativo". */
html.ld-mobile .acc-ie-warn-m{display:flex;align-items:center;gap:10px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:12px;padding:12px 14px;text-decoration:none;color:#374151;font-size:13.5px;line-height:1.35}
html.ld-mobile .acc-ie-warn-m i{color:#B8910A;flex-shrink:0}
html.ld-mobile .acc-ie-warn-m b{font-weight:800;color:#1A1A1A}
html.ld-mobile .acc-wpp-m{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:#25D366;color:#fff;font-weight:700;font-size:14px;border-radius:12px;text-decoration:none;-webkit-tap-highlight-color:transparent}
html.ld-mobile .acc-wpp-m:active{opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ANTI-CLS DAS PRATELEIRAS MOBILE (27/07)

   As 3 secoes (#ld-shelf, #ld-shelf-ofertas, #ld-vitrine) existem VAZIAS no HTML desde o primeiro
   paint e o JS so as preenche depois. Sem altura reservada, elas nasciam com 0 px e ao serem
   preenchidas empurravam #categorias 1254 px para baixo — CLS 0,632 no 4G lento (QA de 27/07).

   As alturas abaixo sao MEDIDAS do conteudo real em 390 px de largura, nao chutadas:
     #ld-shelf 422 px · #ld-shelf-ofertas 402 px · #ld-vitrine 430 px
   Se o layout das prateleiras mudar, RE-MEDIR e ajustar aqui, senao o salto volta (para o outro lado).

   `[data-ld-vazio]` = placeholder ainda nao preenchido. O JS remove o atributo ao preencher e a
   altura passa a ser a do conteudo, sem min-height presa.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
html.ld-mobile #ld-shelf[data-ld-vazio]{min-height:422px}
html.ld-mobile #ld-shelf-ofertas[data-ld-vazio]{min-height:402px}
html.ld-mobile #ld-vitrine[data-ld-vazio]{min-height:430px}

/* DESKTOP CONGELADO: os placeholders nao existem para ele. A regra sem `html.ld-mobile` fica fora do
   media query de proposito — o desktop esconde sempre, inclusive antes de o JS rodar. */
#ld-shelf[data-ld-vazio],#ld-shelf-ofertas[data-ld-vazio],#ld-vitrine[data-ld-vazio]{contain:layout}
html:not(.ld-mobile) #ld-shelf,html:not(.ld-mobile) #ld-shelf-ofertas,html:not(.ld-mobile) #ld-vitrine{display:none!important}

/* Reserva do carrossel de banners mobile enquanto ele nao montou (a classe vem do head, por cache da
   ultima visita). A altura e a real do banner: largura da tela menos as margens de 16px, aspect 2/1,
   mais os 12px de margem do topo. Some assim que o conteudo entra (JS tira .ld-mbanner-reserva). */
html.ld-mobile.ld-mbanner-reserva .hero-wrap{display:none!important}
html.ld-mobile.ld-mbanner-reserva #ld-mbanner-reserva-box{display:block;margin:12px 16px 0;border-radius:16px;
  background:#1A1A1A;aspect-ratio:2/1}
html:not(.ld-mbanner-reserva) #ld-mbanner-reserva-box{display:none}
