/* ═══════════════════════════════════════════════════════════════════════════
   LUNFE MOBILE ENGINE · CSS — camada soberana estrutural
   Injetada DEPOIS dos estilos das páginas pelo compilador de transplante.
   Regra de ouro: correções vivem AQUI (nunca no HTML das páginas — os
   re-exports do Claude Design chegam sem elas). Desktop >768px INTOCADO,
   exceto as duas leis globais declaradas abaixo.
   Marcadores data-lme-* são aplicados por lunfe-mobile-engine.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═ LEI G1 · KILL-SWITCH DE OVERFLOW (global — única lei de layout global) ═
   clip, nunca hidden: hidden mata position:sticky nos descendentes. */
html, body { overflow-x: clip; }
img, video, canvas { max-width: 100%; }

/* ═ LEI G2 · SUPRESSÃO DE EDIT-UI + PLACEHOLDER LIMPO (global) ═
   Fallback via ::part caso o JS não rode: o estado vazio do <image-slot>
   nunca pode expor prompt interno de produção (texto herda color). O visual
   completo (wordmark, fundo) é injetado no shadow root pelo JS. */
image-slot::part(empty) { color: transparent !important; background: #F2F1EF !important; }
image-slot::part(attribution-error) { color: transparent !important; background: #F2F1EF !important; }
img.lme-img-broken { background: #F2F1EF; }

/* ══════════════════════ TUDO ABAIXO: SOMENTE ≤768px ══════════════════════ */
@media (max-width: 768px) {

  /* ─ LEI M1 · OVERFLOW REFORÇADO ─ mídia nunca estoura a coluna;
     min-width:0 sem !important: perde para min-width inline intencional
     (ex.: slides de carrossel), vence o default auto de flex/grid item. */
  img, video, canvas { max-width: 100% !important; }
  img, video { height: auto; }
  /* :not(button): o min-width:0 de item de flex tem especificidade (0,1,0) e
     engoliria o alvo de toque min-width:44 da Lei M8 (0,0,1) */
  [style*="display:flex"] > :not(button):not([role="button"]),
  [style*="display: flex"] > :not(button):not([role="button"]),
  [style*="inline-flex"] > :not(button):not([role="button"]),
  [data-lme-grid] > * { min-width: 0; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  [data-lme-clamp] { display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; overflow: hidden; }

  /* ─ LEI M2 · COLAPSO DE GRID (P3) ─ o JS classifica todo grid multi-coluna:
     conteúdo → 1 col · grid de produto/mídia → 2 col. Ornamentos (icon+texto)
     não são marcados e preservam o layout original. */
  [data-lme-grid="1"] { grid-template-columns: 1fr !important; }
  [data-lme-grid="2"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ─ LEI M3 · CARROSSEL (P3) ─ card de texto a 1 char/linha: o JS marca o
     filho estreito de scroller horizontal. Grids de fluxo em coluna com
     auto-columns fracionário (calc(100%/3)) espremem 3 cards em 390px e o
     texto interno se sobrepõe: trilha mínima sensata e o container rola. */
  [data-lme-slide-fix] { min-width: min(72vw, 320px) !important; }
  /* rail = grid-auto-flow:column (o compilador emite data-rail/data-carousel-grid).
     BUG (forense index-360 · 2026-08-13): [style*="grid-auto-flow:column"] SOZINHO
     falhava — o atributo style serializado tem ESPAÇO ("grid-auto-flow: column")
     e o [data-plp-grid][data-rail] do fix antigo não casava ESTE rail (que tem
     data-carousel-grid, não data-plp-grid). Ancorar nos hooks ESTÁVEIS do
     compilador + a variante-com-espaço (mesma convenção da Lei M1, linhas 33-34). */
  [style*="grid-auto-flow:column"], [style*="grid-auto-flow: column"],
  [data-rail], [data-carousel-grid] {
    grid-auto-columns: min(72vw, 320px) !important; }
  /* rail NÃO pode herdar template-columns de regra genérica de grid de produto
     (data-lme-grid="2" → repeat(2,1fr)): os tracks fr explícitos colapsam a 0px
     quando os implícitos estouram o container — cards 1–2 ficavam com largura 0 e
     o texto de todos carimbava na mesma coluna (forense Outlet + Categorias). */
  [style*="grid-auto-flow:column"], [style*="grid-auto-flow: column"],
  [data-plp-grid][data-rail], [data-rail], [data-carousel-grid] {
    grid-template-columns: none !important; }

  /* ─ LEI M4 · TEXTO ABSOLUTO VOLTA AO FLUXO (P4) ─ blocos de TEXTO
     estruturais posicionados por absolute colidem em 390px; ornamentos
     (badges, controles) não são marcados e continuam absolute. */
  [data-lme-static] { position: static !important; width: auto !important;
    height: auto !important; transform: none !important; }
  [data-lme-autoh] { height: auto !important; min-height: 0 !important; }

  /* ─ LEI M5 · SWATCHES (P3) ─ overlay central gigante vira fileira discreta
     no pé do card. */
  [data-lme-swatch] { top: auto !important; bottom: 8px !important;
    left: 8px !important; right: auto !important; transform: none !important;
    display: flex !important; gap: 4px !important; }
  [data-lme-swatch] > * { width: 14px !important; height: 14px !important;
    min-width: 14px !important; min-height: 14px !important; }

  /* ─ LEI M6 · FLUTUANTES NO DOCK (P1) ─ todo widget de suporte vive fixo no
     canto inferior-direito, ABAIXO de overlay/modal (páginas usam z 50–70;
     o z:950 original do widget cobria modal — bug da forense). Aberto, sobe
     para --z-drawer (ação explícita do usuário). Empilhamento e clearance de
     cookie-bar/barra sticky calculados pelo JS via --lme-float-bottom. */
  [data-lme-float] { position: fixed !important; inset: auto !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom) + var(--lme-float-bottom, 0px)) !important;
    left: auto !important; top: auto !important;
    display: flex !important; flex-direction: column; align-items: flex-end;
    gap: 8px; max-width: calc(100vw - 24px);
    z-index: 45 !important; pointer-events: none; }
  [data-lme-float] > * { pointer-events: auto; }
  [data-lme-float][data-lme-open] { z-index: var(--z-drawer, 300) !important; }
  /* FAB fechado vira círculo compacto (ícone só): reduz a sombra do dock sobre
     CTAs de conteúdo — o rótulo volta quando o painel abre. */
  [data-lme-float]:not([data-lme-open]) button {
    width: 52px !important; height: 52px !important;
    min-width: 52px !important; min-height: 52px !important;
    padding: 0 !important; border-radius: 999px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; }
  [data-lme-float]:not([data-lme-open]) button span { display: none !important; }
  body[data-lme-has-float] { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  [data-cookie-bar] { z-index: 44 !important; }

  /* ─ LEI M7 · iOS SEM ZOOM (inputs ≥16px) ─ max(): nunca reduz fonte já
     grande, só levanta a pequena. */
  input, select, textarea { font-size: 16px !important; font-size: max(16px, 1em) !important; }

  /* ─ LEI M8 · ALVO DE TOQUE ≥44px ─ botões sobem à altura mínima; links de
     navegação/rodapé ganham caixa de toque via padding+margem negativa
     (rect cresce, ritmo visual não muda). */
  /* !important (2026-08-14): vence min-height/height autorado menor (ex.: Portal
     de Trocas com button min-height:40 → gate I6 FAIL). Só CRESCE o alvo, nunca
     encolhe → não regride I1/I7. */
  button, [role="button"] { min-height: var(--tap-min, 44px) !important; min-width: var(--tap-min, 44px); }
  a { touch-action: manipulation; }
  /* SÓ links de navegação/rodapé: inline-block em link no meio de parágrafo
     quebra o fluxo da linha e o sublinhado risca o texto vizinho (regressão
     vista no consentimento do checkout). */
  nav a[href], footer a[href], [data-lme-tap] {
    display: inline-block; padding: 13px 10px; margin: -13px -10px;
    min-height: 0; box-sizing: border-box; touch-action: manipulation; }

  /* ─ LEI M9 · SUPERFÍCIE FULL-SCREEN = dvh ─ 100vh no iOS esconde conteúdo
     atrás da barra do browser. */
  [style*="height:100vh"], [style*="height: 100vh"] {
    height: auto !important; min-height: 100dvh !important; }

  /* ─ LEI M10 · BARRAS NA BORDA (P5) ─ faixas horizontais roláveis não podem
     cortar o último item; safe-area em fixos de borda. */
  [data-sticky-bar], [data-cookie-bar] {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important; }
  [data-screen-label="Ecosystem Bar"], .lunfe-bar {
    overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─ LEI M11 · CROSS-NAV DO TOPO (barra preta) ─ os itens são flex-shrink:1
     por default: em 390px cada botão encolhe abaixo do próprio texto nowrap e
     os rótulos se carimbam uns sobre os outros ("VAREJO⧸ACADO⧸TLEERSOMALHA").
     Correção: nada encolhe → a barra vira scroll-x REAL; meta-links
     (lunfetextil.com.br · Contato) saem do fold — a nav do hambúrguer cobre. */
  [data-screen-label="Ecosystem Bar"] { gap: 14px !important; padding: 0 14px !important; }
  [data-screen-label="Ecosystem Bar"] > *,
  [data-screen-label="Ecosystem Bar"] button { flex-shrink: 0 !important; min-width: 0; }
  [data-screen-label="Ecosystem Bar"] [data-eco-meta] { display: none !important; }

  /* ─ LEI M12 · HEADER DA LOJA COMPACTO ─ com flex-wrap os itens do header
     empilhavam em ~5 fileiras (~230px de sticky roubando o fold). A nav de
     texto é redundante com o hambúrguer (mesmo comportamento do hub ≤1279px):
     some; o resto compacta em 1–2 fileiras. Só filho DIRETO de header — navs
     funcionais (conta, breadcrumb, checkout) não são tocadas. */
  header > nav { display: none !important; }
  header { height: auto !important; min-height: 56px !important;
    padding: 4px 12px !important; row-gap: 0 !important; column-gap: 8px !important;
    align-items: center !important; }
  header [data-util] { margin-left: auto; display: flex; flex-wrap: wrap;
    align-items: center !important; gap: 4px 8px !important; min-width: 0;
    justify-content: flex-end; }
  /* widgets [data-desk] vinham com flex:1 0 100% (uma FILEIRA por ícone →
     ~290px de header sticky). Só o desk da BUSCA merece fileira própria. */
  header [data-util] > [data-desk] { flex: 0 0 auto !important; order: 0 !important;
    margin-top: 0 !important; }
  header [data-util] > [data-desk]:has(input) { flex: 1 1 100% !important;
    order: 9 !important; margin-top: 4px !important; }
  header [data-util] > [data-desk]:has(input) input { width: 100% !important; max-width: none !important; }
}

/* GOAL uiux-1006 (07/10/2026) · camada só-desktop (≥981px) — tools/uiux-1006.mjs */
/* ── uiux-1006 · w1-funcional ── */
@media (min-width:981px){
/* A-07 · − e + na matriz da grade do Atacado (desktop) */
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] div:has(> [data-qty]){position:relative}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-qty]{padding-inline:44px !important;-moz-appearance:textfield;appearance:textfield}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-qty]::-webkit-inner-spin-button,[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-qty]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-menos],[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-mais]{display:grid !important;place-items:center;position:absolute;top:var(--s2,8px);width:40px;height:44px;padding:0;border:none;background:transparent;color:#0B0B0A;font-size:20px;font-weight:500;line-height:1;cursor:pointer;font-family:inherit;border-radius:12px;z-index:1}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-menos]{left:calc(var(--s2,8px) + 2px)}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-mais]{right:calc(var(--s2,8px) + 2px)}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-menos]:hover,[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-mais]:hover{background:rgba(11,11,10,.07)}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-menos]:disabled,[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-mais]:disabled{opacity:.3;cursor:not-allowed;background:transparent}
[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-menos]:focus-visible,[data-sc-name="Lunfe 4L - Atacado"] [data-grade-matriz] [data-uix-mais]:focus-visible{outline:2px solid #0B0B0A;outline-offset:1px}
/* S-07 · editor inline da grade do projeto (Studio): campo numérico sem a setinha nativa (mesmo padrão da grade do Atacado) */
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input{-moz-appearance:textfield;appearance:textfield}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input::-webkit-inner-spin-button,[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* O-05 · Outlet · página institucional (Trocas etc.) aberta: o documento de trás não rola mais (uma barra de rolagem só) */
html:has([data-sc-name="Lunfe 4L - Outlet"] [data-screen-label="Página institucional"][role="dialog"]),html:has([data-sc-name="Lunfe 4L - Outlet"] [data-screen-label="Página institucional"][role="dialog"]) body{overflow:hidden !important}
/* O-06 · a barra ← … × fica colada no topo da tela desde o início (antes nascia 26px abaixo e só grudava ao rolar) */
[data-sc-name="Lunfe 4L - Outlet"] [data-screen-label="Página institucional"][role="dialog"] > div{padding-top:0 !important}
[data-sc-name="Lunfe 4L - Outlet"] [data-screen-label="Página institucional"][role="dialog"] > div > div:first-child{top:0 !important;z-index:5 !important;margin-bottom:26px}
}

/* ── uiux-1006 · w2-geo ── */
@media (min-width:981px){
  /* V-01 · Varejo home · newsletter: o CONJUNTO (título+apoio | formulário) centrado na seção — trilhas do tamanho do
     conteúdo e a sobra repartida dos dois lados (nada de text-align:center; campos/botão/mensagens intactos) */
  [data-sc-name="Lunfe 4L - Varejo"] section[data-screen-label="Home · Newsletter"] > [data-nl-card]{grid-template-columns:fit-content(640px) minmax(0,520px) !important;justify-content:center !important;column-gap:clamp(48px,5vw,88px) !important}

  /* V-02 · Varejo listagem · texto de abertura da categoria em toda a largura útil da seção (Ler/Saber mais intacto) */
  [data-sc-name="Lunfe 4L - Varejo"] [data-plp-shell] div:has(> p[data-plp-contrato]){max-width:none !important;flex:1 1 100% !important}
  [data-sc-name="Lunfe 4L - Varejo"] [data-plp-shell] div:has(> p[data-plp-contrato]) > p{max-width:none !important}

  /* V-04 · Varejo sacola · "Seguir escolhendo": seta e texto na mesma linha (o margin-bottom do topo levantava a seta 9px)
     e respiro menor acima/abaixo (tokens: 12px topo · 10px seta↔texto · 16px até "Sua sacola") */
  [data-sc-name="Lunfe 4L - Varejo"] section[data-screen-label="Sacola"]{padding-top:12px !important}
  [data-sc-name="Lunfe 4L - Varejo"] section[data-screen-label="Sacola"] > div:first-child{gap:10px !important;margin-bottom:16px !important}
  [data-sc-name="Lunfe 4L - Varejo"] section[data-screen-label="Sacola"] > div:first-child > [data-tela-topo]{margin-bottom:0 !important}

  /* C-05 · Varejo sacola · "arraste para ver mais" centrado na largura do trilho "Combina com a sua sacola" */
  [data-sc-name="Lunfe 4L - Varejo"] section[data-screen-label="Sacola"] [data-reco-rail] + p{justify-content:center !important}

  /* C-04 · Varejo compra rápida · bolinhas de cor: aro neutro uniforme (branco + filete), seleção por aro escuro (não só
     pela cor), hover e foco de teclado visíveis — box-shadow não muda a caixa (30px) nem invade a vizinha (gap 12px) */
  [data-sc-name="Lunfe 4L - Varejo"] [role="dialog"][data-screen-label="Escolha rápida"] div:has(> button[title][style*="border-radius: 50%"]){gap:12px !important}
  [data-sc-name="Lunfe 4L - Varejo"] [role="dialog"][data-screen-label="Escolha rápida"] button[title][style*="border-radius: 50%"]{border:none !important;box-shadow:inset 0 0 0 1px rgba(20,20,20,.14),0 0 0 2px #fff,0 0 0 3px #E2E2E2 !important;transition:box-shadow .15s ease}
  [data-sc-name="Lunfe 4L - Varejo"] [role="dialog"][data-screen-label="Escolha rápida"] button[title][style*="border-radius: 50%"]:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.14),0 0 0 2px #fff,0 0 0 3px #9A9A9A !important}
  [data-sc-name="Lunfe 4L - Varejo"] [role="dialog"][data-screen-label="Escolha rápida"] button[title][style*="border-radius: 50%"]:is([style*="outline-offset"],[aria-pressed="true"]){outline:none !important;box-shadow:inset 0 0 0 1px rgba(20,20,20,.14),0 0 0 2px #fff,0 0 0 4px #141414 !important}
  [data-sc-name="Lunfe 4L - Varejo"] [role="dialog"][data-screen-label="Escolha rápida"] button[title][style*="border-radius: 50%"]:focus-visible{outline:2px solid #141414 !important;outline-offset:6px !important}

  /* O-01 · Outlet home · hero "Campanhas": as setas quadradas saem (só deste hero) — sem espaço residual */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-seta]{display:none !important}
  /* O-02 · traços centrados na coluna de conteúdo do hero */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-nav]{justify-content:center !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-nav] > [data-tracos]{margin-left:0 !important}
  /* O-03 (R1 auditor) · controle VISÍVEL de pausar/retomar a rotação: botão novo, display:none inline (telefone/tablet não
     veem), aqui aparece à direita da linha dos traços sem deslocar o centro deles (posição absoluta na linha) */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-nav]{position:relative !important}
  /* o estilo inline do botão é SÓ display:none — toda a pele vem daqui (≥981): a regra genérica do telefone
     "section button[style*='border: 1px solid']:not(:has(*)){display:flex!important}" não pode casar com ele */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-pausa]{display:inline-flex !important;position:absolute !important;right:0;top:50%;transform:translateY(-50%);align-items:center;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;min-height:32px;padding:0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-family:inherit}
  /* o rótulo visível vem do CSS (o nome acessível é o aria-label que alterna): sem texto no DOM o gerador do CMS não cria
     campo editável para um rótulo que é estado (editar "Pausar" no Hub congelaria o botão) — alvos do CMS do Outlet intactos */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-pausa]::after{content:"Pausar"}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-pausa][aria-pressed="true"]::after{content:"Retomar"}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-pausa]:hover{border-color:#fff !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Campanhas"] [data-camp-pausa]:focus-visible{outline:2px solid #fff !important;outline-offset:3px !important}

  /* O-04 · Outlet vitrine · sobreposição da foto: só bolinhas de cor + comprar (as pílulas de tamanho saem; tamanho segue
     na compra rápida e na PDP) */
  [data-sc-name="Lunfe 4L - Outlet"] [data-card-ovl] > span > button:is([style*="min-width: 32px"],[style*="min-width:32px"]){display:none !important}

  /* C-04 · Outlet compra rápida · cor escolhida (chip preto): aro branco na bolinha para a cor continuar visível */
  [data-sc-name="Lunfe 4L - Outlet"] [data-quick-cor][aria-pressed="true"] > span:first-child{box-shadow:0 0 0 1.5px #fff !important}

  /* O-07 / O-08 · Outlet "Todas as ofertas da fábrica": respiro do Voltar igual ao da PDP e o rótulo de cima ("Vitrine")
     sai com o espaço dele */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Produtos · Todas as ofertas"]{padding-top:24px !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Produtos · Todas as ofertas"] > [data-tela-topo]{margin-bottom:16px !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Produtos · Todas as ofertas"] > [data-tela-topo] + p{display:none !important}

  /* O-09 · Outlet PDP · trilha na MESMA linha do Voltar (o topo flutua à esquerda; a trilha, contexto de bloco próprio,
     encosta nele com o filete do Varejo); a grade de fotos limpa o float */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"]{padding-top:24px !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-tela-topo]{float:left !important;margin:0 14px 0 0 !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > nav[data-pdp-trilha]{min-height:44px !important;margin-bottom:16px !important;border-left:1px solid #E6E6E6 !important;padding-left:14px !important;box-sizing:border-box !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-bleed]{clear:left}

  /* O-10 · Outlet PDP · base do bloco preto (condições) = base das miniaturas: a coluna da direita termina 25px acima da
     grade (= dica "arraste" de 8px + 17px fixos, que fecham a coluna da galeria). Altura do conteúdo intacta (sem corte). */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] [data-pdp-thumbs-dica]{margin-top:8px !important;height:17px !important;line-height:17px !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-bleed] > div:has(> [data-contrato]){padding-bottom:25px !important;align-self:stretch !important;display:flex !important;flex-direction:column !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-bleed] > div:has(> [data-contrato]) > [data-contrato]{flex:1 0 auto !important}
  /* flex não colapsa margens: os 2 únicos pares que colapsavam nesta coluna (medidos no template — "ref do lote"(mb14)→ledger(mt24)
     e {ledger 22 | avaliações 20 | contagem 18 | cores 16 | tamanhos 18}→"descubra o seu tamanho"(mt14)) ficam com a MESMA
     distância do fluxo em bloco: zera-se a menor margem do par */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-bleed] > div:has(> [data-contrato]) > [data-lote-ref]{margin-bottom:0 !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] > [data-bleed] > div:has(> [data-contrato]) > button{margin-top:0 !important;align-self:flex-start !important}

  /* O-12 · Outlet PDP · moldura no bloco "Sobre esta peça" (canto reto do Outlet; divisórias internas intactas) */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] div[data-om-col]:has(> div > [data-pdp-studio]) > div:first-child{border:1px solid #E6E6E6 !important;padding:24px 28px !important;box-sizing:border-box !important}
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] div[data-om-col]:has(> div > [data-pdp-studio]) > div:first-child > div{margin-bottom:0 !important}
  /* O-13 · card Studio · divisórias verticais entre MÍNIMO | MOCKUP | PRODUÇÃO (valores intactos) */
  [data-sc-name="Lunfe 4L - Outlet"] [data-pdp-studio] [data-pdp-fatos]{column-gap:0 !important;justify-items:stretch !important}
  [data-sc-name="Lunfe 4L - Outlet"] [data-pdp-studio] [data-pdp-fatos] > div{align-items:center !important;padding:2px 10px !important}
  [data-sc-name="Lunfe 4L - Outlet"] [data-pdp-studio] [data-pdp-fatos] > div + div{border-left:1px solid #E7EAF2 !important}

  /* C-05 (R1) · Outlet HOME · "↔ Arraste para ver mais" da vitrine centrado no trilho (como os da PDP) */
  [data-sc-name="Lunfe 4L - Outlet"] section#ou-vitrine > [data-plp-grid] + p[data-rail-hint]{text-align:center !important;justify-content:center !important}
  /* C-05 · Outlet PDP · "arraste para ver mais" centrado no trilho de baixo */
  [data-sc-name="Lunfe 4L - Outlet"] section[data-screen-label="Oferta"] [data-sim-rail] + [data-sim-dica]{justify-content:center !important}

  /* A-01 · Atacado PDP · trilha ao lado do Voltar (mesmo desenho da O-09) */
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] > [data-tela-topo]{float:left !important;margin:0 14px 0 0 !important}
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] > [data-tela-topo] + nav{min-height:44px !important;margin:0 0 16px !important;max-width:none !important;border-left:1px solid #E4E4DF !important;padding-left:14px !important;box-sizing:border-box !important}
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] > [data-feature]{clear:left}

  /* A-03 · Atacado PDP · "Ficha do artigo" com a mesma moldura do par "Perguntas de lojista" */
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] [data-ficha-artigo]{border:1px solid rgba(11,11,10,.1) !important;background:#fff !important}

  /* A-06 · Atacado PDP · 4 painéis em 2 colunas IGUAIS nas duas linhas (a 2ª grade era 1.15fr/1fr) */
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] div[data-om-col]:is([style*="grid-template-columns: 1.15fr minmax(0px, 1fr)"],[style*="grid-template-columns:1.15fr minmax(0,1fr)"]){grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}

  /* C-05 · Atacado PDP · "arraste para ver mais" centrado na largura da galeria */
  [data-sc-name="Lunfe 4L - Atacado"] section[data-screen-label="Grade B2B"] [data-pdp-thumbs][data-rail="galeria"] + p{justify-content:center !important}

  /* S-01 · Studio PDP · cabeçalho → Voltar → trilha → produto com respiro menor (20 / 4 / 12px) */
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"]{padding-top:20px !important}
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] > [data-tela-topo]{margin-bottom:4px !important}
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] > [data-tela-topo] + nav{margin-bottom:12px !important}

  /* S-02 · Studio PDP · mosaico de miniaturas vira trilho de UMA linha com rolagem (4 por vez, como Outlet/Atacado);
     o clique segue trocando a foto principal; a dica "arraste" que o design já tem aparece; 3px de folga (com margem
     negativa igual) para o aro da miniatura escolhida não ser cortado pela rolagem */
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] [data-split] > div:first-child > [data-om-snap]{grid-template-columns:none !important;grid-auto-flow:column !important;grid-auto-columns:calc((100% - 3 * var(--grid-gap,12px)) / 4) !important;overflow-x:auto !important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 3px 8px !important;margin:-3px -3px 0 !important}
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] [data-split] > div:first-child > [data-om-snap] > *{scroll-snap-align:start}
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] [data-split] > div:first-child > [data-gal-dica]{display:block !important}

  /* S-04 · Studio PDP · texto "Sensorial" na largura útil da coluna (fonte intacta) */
  [data-sc-name="Lunfe 4L - Personalizacao"] section[data-screen-label="Peça-base"] [data-pdp-abas] + p{max-width:none !important}

  /* S-08 · Studio editor · a foto da peça ocupa a coluna do visor (antes 440px). Proporção 4/5 mantida: a arte é posicionada
     em % do quadro (left/top/width) e o arrasto normaliza pelo retângulo do quadro → posição e escala físicas iguais */
  [data-sc-name="Lunfe 4L - Personalizacao"] [data-vs-grid] [data-vs-stage]{max-width:100% !important}
}

/* ── uiux-1006 · w3-sacola ── */
@media (min-width:981px){
/* ── C-01/V-05 · página da sacola do Varejo: foto 104×130 À ESQUERDA, dados ao lado, quantidade/total à direita ── */
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid]{grid-template-columns:104px minmax(0,1fr) auto !important;align-items:start !important;column-gap:24px !important}
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid] > span:first-child{width:104px !important;height:130px !important}
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid] > div:last-child{align-self:end}
/* V-06 · linha "trocar": tamanhos na 1ª linha, "cor" + bolinhas na 2ª (grid; a linha de cada item vem do estilo dele) */
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid] > div:nth-child(2) > div:last-child{display:grid !important;grid-auto-flow:row;justify-content:start;align-items:center;gap:8px 5px;margin-top:4px}
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid] > div:nth-child(2) > div:last-child > span:first-child{grid-row:1;grid-column:1}
[data-sc-name="Lunfe 4L - Varejo"] [data-cart-trilho] > div[data-om-grid] > div:nth-child(2) > div:last-child > button:focus-visible{outline:2px solid #141414;outline-offset:2px}
/* ── C-01/S22 · gaveta do Varejo: foto 80×100 ── */
[data-sc-name="Lunfe 4L - Varejo"] [data-screen-label="Sacola · Sidebar"] div:has(> span > span[role="img"]){grid-template-columns:80px minmax(0,1fr) auto !important;gap:16px !important;align-items:start !important}
[data-sc-name="Lunfe 4L - Varejo"] [data-screen-label="Sacola · Sidebar"] div:has(> span > span[role="img"]) > span:first-child{width:80px !important;height:100px !important}
[data-sc-name="Lunfe 4L - Varejo"] [data-screen-label="Sacola · Sidebar"] div:has(> span > span[role="img"]) > span:last-child{align-self:center}
/* ── C-01 · página da sacola do Outlet: mesma foto 104×130 à esquerda ── */
[data-sc-name="Lunfe 4L - Outlet"] [data-cart-row]{grid-template-columns:104px minmax(0,1fr) auto auto !important;align-items:start !important;column-gap:24px !important}
[data-sc-name="Lunfe 4L - Outlet"] [data-cart-row] > span:first-child{width:104px !important;height:130px !important}
/* ── C-01/A-08 · pedido B2B do Atacado: foto 104×130 à esquerda; título, grade (cor·tamanho·quantidade) e resumo AO LADO ── */
[data-sc-name="Lunfe 4L - Atacado"] [data-screen-label="Carrinho B2B"] [data-cart-trilho] > div{position:relative !important;padding-left:128px !important;min-height:calc(130px + 2 * var(--s5,22px));box-sizing:border-box}
[data-sc-name="Lunfe 4L - Atacado"] [data-screen-label="Carrinho B2B"] [data-cart-trilho] > div > div:first-child > button > span:first-child{position:absolute !important;left:0;top:var(--s5,22px);width:104px !important;height:130px !important}
[data-sc-name="Lunfe 4L - Atacado"] [data-screen-label="Carrinho B2B"] [data-cart-trilho] > div > div:first-child{align-items:flex-start !important}
}

/* ── uiux-1006 · w4-conteudo ── */
@media (min-width:981px){
/* V-03/O-11/A-04/S-03 · explicação de 1–2 linhas sob o valor de cada linha (atributo da própria linha; nenhum nó novo) */
[data-sc-name] [data-uix-exp]:not([data-uix-exp=""]):not([data-uix-exp="undefined"])::after{content:attr(data-uix-exp);display:block;margin-top:5px;font-size:12.5px;line-height:1.55;color:#6E6E68;font-weight:400;letter-spacing:normal;text-transform:none;max-width:70ch}
/* I-06 · nota de bastidor (contagem de caracteres) fora da vitrine */
[data-sc-name] [data-uix-nota]{display:none !important}
}

/* ── uiux-1006 · w5-ajustes ── */
@media (min-width:981px){
/* I-03 · foto principal no lugar da cor sem foto própria — identificada como tal */
[data-sc-name] [data-uix-ref]:not([data-uix-ref=""]):not([data-uix-ref="undefined"]){position:relative}
[data-sc-name] [data-uix-ref]:not([data-uix-ref=""]):not([data-uix-ref="undefined"])::after{content:attr(data-uix-ref);position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 4px;background:rgba(20,20,20,.74);color:#fff;font-size:9px;line-height:1.2;letter-spacing:.02em;text-align:center;text-transform:none;font-weight:500;pointer-events:none}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-screen-label="Sacola · Sidebar"] [data-uix-ref]:not([data-uix-ref=""]):not([data-uix-ref="undefined"])::after{right:auto;width:80px;bottom:auto;top:96px;box-sizing:border-box}
}

/* ── uiux-1006 · w6-coerencia ── */
@media (min-width:981px){
/* W6 · Atacado sem tabela própria: a genérica não aparece como medida da peça */
[data-sc-name] [data-uix-sem-medida="1"]{display:none !important}
}

/* GOAL fecha-0710 · WV2 · itens do uiux-1006 ligados na faixa 431–980 (tools/uiux1006/telefone.mjs) */
@media (min-width:431px) and (max-width:980px){
[data-sc-name] [data-uix-ref]:not([data-uix-ref=""]):not([data-uix-ref="undefined"]){position:relative}
[data-sc-name] [data-uix-ref]:not([data-uix-ref=""]):not([data-uix-ref="undefined"])::after{content:attr(data-uix-ref);position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2px 3px;background:rgba(20,20,20,.74);color:#fff;font-size:8.5px;line-height:1.2;letter-spacing:0;text-align:center;text-transform:none;font-weight:500;pointer-events:none;white-space:normal}
[data-sc-name="Lunfe 4L - Atacado"] image-slot[id^="at-fav-"]:is([style*="display: none"],[style*="display:none"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f){display:none !important}
[data-sc-name] [data-uix-exp]:not([data-uix-exp=""]):not([data-uix-exp="undefined"])::after{content:attr(data-uix-exp);display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:#6E6E68;font-weight:400;letter-spacing:normal;text-transform:none;max-width:70ch;white-space:normal}
[data-sc-name] [data-uix-nota]{display:none !important}
[data-sc-name] [data-uix-sem-medida="1"]{display:none !important}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj]{margin-left:0 !important}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] > div{grid-template-columns:repeat(auto-fill,minmax(58px,1fr)) !important}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] > div > span:first-child{grid-column:1/-1}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input{-moz-appearance:textfield;appearance:textfield}
[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input::-webkit-inner-spin-button,[data-sc-name="Lunfe 4L - Personalizacao"] [data-uix-grade-proj] input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
}