/* ========================================================================== Plenui Route — Home pública (mobile-first) Escopo: carregado SOMENTE por index.php. Não afeta outras páginas. Cor de marca do Plenui Route (fixa, não white-label): #6557E8 ========================================================================== */ :root{ --plenui-primary: #6557E8; --plenui-primary-dark: #4E3FD1; --plenui-primary-soft: #EEECFC; --plenui-ink: #16151F; --plenui-muted: #767489; --plenui-line: #ECEBF3; --plenui-bg: #F7F7FB; --plenui-card: #FFFFFF; --plenui-danger: #DC3545; --plenui-warning: #F59E0B; --plenui-success: #198754; --plenui-r-lg: 20px; --plenui-r-md: 14px; --plenui-r-sm: 10px; --plenui-shadow: 0 2px 14px rgba(22, 21, 31, 0.06); --plenui-bottomnav-h: 62px; } /* Proteção contra overflow horizontal fica em html/body — nunca num wrapper intermediário como .plenui-home. overflow em qualquer ancestral entre .plenui-cat-nav-wrap e quebra o position:sticky da barra de categorias (o scroll passa a ser "contido" por esse ancestral em vez de pela página real). IMPORTANTE: usar "hidden" aqui (mesmo só no eixo X) obriga o navegador a recalcular overflow-y como "auto" — é regra do próprio CSS Overflow Module, não dá pra contornar só declarando overflow-y:visible por cima. assets/css/main.css (compartilhado, fora do nosso controle) já declara "body{overflow-x:hidden !important}", então esse problema já existia antes desta página. A saída é "clip": recorta sem criar contexto de scroll, então não dispara essa conversão — overflow-y continua "visible" de verdade. Precisa de !important pra vencer o !important do main.css (não dá pra editar esse arquivo, é compartilhado). */ html, body{ overflow-x: clip !important; overflow-y: visible !important; } .plenui-home{ background: var(--plenui-bg); color: var(--plenui-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding-bottom: calc(var(--plenui-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 14px); } .plenui-home *{ box-sizing: border-box; } .plenui-home img{ max-width: 100%; } /* icone-carrinho.php é reaproveitado (drawer + AJAX do carrinho) mas seu botão-gatilho original é substituído pela sacola do novo topo (.plenui-bag). O drawer (.tpcartinfo) continua intacto e funcional. */ .plenui-home .header__info-cart{ display: none !important; } .plenui-home > div:has(> .header__info-cart){ display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } .plenui-container{ padding-left: 16px; padding-right: 16px; } /* ---------- 6/7. Topo premium da loja + sacola integrada ---------- Elemento normal do documento — position:relative, height:auto, nunca fixed/sticky/100vh. O overflow:hidden é exclusivo deste componente (nunca em .plenui-home ou outro ancestral, isso quebraria o sticky do menu de categorias mais abaixo na página). A superfície branca da sacola é um SVG absoluto (path preenchido de branco + traço de contorno em #6557E8) desenhado por cima do fundo escuro — não é clip-path, não é card encaixado por fora. ------------------------------------------------------------------- */ .plenui-hero{ position: relative; background: linear-gradient(160deg, #1F1E2E 0%, #232231 55%, #1A1926 100%); color: #fff; /* Topo respeita a safe area do notch/Dynamic Island em PWA standalone; em navegador comum env() resolve pra 0 e não muda nada. */ padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 18px; /* Sem border-radius: a própria curva SVG já desenha toda a transição orgânica embaixo (inclusive descendo até a borda esquerda). Um border-radius por cima disso cria um SEGUNDO arco nos cantos — brigando com a curva e lendo como "duas linhas". */ border-radius: 0; overflow: hidden; display: flex; /* min-height (não height fixo): a safe area pode aumentar a altura em telas com notch, e a curva (com folga própria) absorve isso sem deixar frestas. */ min-height: 187px; } .plenui-hero__brand{ position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 18px; min-width: 0; /* A sacola fica embaixo à direita (longe do bloco de texto, que ocupa principalmente a parte de cima) — 20% de reserva era exagerado pra esse risco de colisão real. 14% dá folga real sem apertar o texto. */ padding-right: 14%; } .plenui-hero__logo{ width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: #fff; /* Anel neutro (não fixo na cor do Plenui): a logo de cada loja já traz sua própria identidade/cor, então o anel só precisa "emoldurar" sem competir com ela — funciona igual em qualquer marca. */ border: 2px solid rgba(255,255,255,0.4); padding: 2px; flex-shrink: 0; } .plenui-hero__meta{ min-width: 0; flex: 1; } .plenui-hero__nome{ font-size: 15px; font-weight: 700; line-height: 1.2; /* Nome numa linha só; se for excepcionalmente longo, corta com "..." em vez de quebrar em 2 linhas (o endereço logo abaixo já cobre a quebra de texto quando precisa). */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plenui-hero__local{ display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 3px; /* Antes: nowrap + overflow:hidden num flex row cortava o texto no meio (o text-overflow:ellipsis não funciona direito num container flex com ícone + texto como filhos separados). Agora o texto pode quebrar em até 2 linhas em vez de ser cortado. */ min-width: 0; } .plenui-hero__local i{ font-size: 11px; flex-shrink: 0; margin-top: 2px; } .plenui-hero__local span{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-width: 0; } .plenui-hero__info{ display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 3px 8px 3px 9px; margin-top: 6px; color: #fff; font-size: 10.5px; font-weight: 600; cursor: pointer; } .plenui-hero__info i{ font-size: 9px; } .plenui-hero__status-row{ display: flex; align-items: center; gap: 6px; margin-top: 7px; } .plenui-hero__status-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .plenui-hero__status-text{ font-size: 12px; font-weight: 600; /* cor vem inline, igual à bolinha (ver index.php) — texto some a lê a mesma cor do status (verde/âmbar/vermelho), não fica preso ao branco */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Curva branca da sacola: SVG absoluto, viewBox quase na mesma proporção da hero real (430x219 vs ~375x187) — estica muito pouco, sem distorcer. */ .plenui-hero__curve{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .plenui-hero__curve-fill{ fill: var(--plenui-card); } /* Sacola: só ícone, badge e valor, plantados na parte mais funda da onda (canto inferior direito). Sem largura em %, sem fundo/card próprio — o conteúdo só se alinha à direita e desenha o tamanho que precisa. */ .plenui-hero__bagslot{ position: absolute; z-index: 3; right: 20px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; background: transparent; border: 0; color: var(--plenui-ink); text-decoration: none; } .plenui-hero__bagslot .plenui-bag__icon{ position: relative; width: 26px; height: 26px; color: var(--plenui-primary); } .plenui-hero__bagslot .plenui-bag__icon svg{ width: 100%; height: 100%; display: block; } .plenui-bag__badge{ position: absolute; top: -6px; right: -8px; background: var(--plenui-primary); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .plenui-bag__value{ font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--plenui-ink); } .plenui-alert-pausado{ margin: 14px 16px 0; background: #FFF4E5; border: 1px solid #FCE1B3; color: #8A5A00; border-radius: var(--plenui-r-md); padding: 10px 14px; font-size: 12.5px; } /* ---------- Modal "Mais informações" ---------- */ .plenui-info-modal .modal-content{ border-radius: var(--plenui-r-lg); border: none; } .plenui-info-modal .modal-header{ border-bottom: 1px solid var(--plenui-line); } .plenui-info-modal .modal-title{ font-size: 16px; font-weight: 700; } .plenui-info-row{ display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; color: var(--plenui-ink); } .plenui-info-row i{ color: var(--plenui-primary); width: 18px; text-align: center; margin-top: 2px; } .plenui-info-row + .plenui-info-row{ border-top: 1px solid var(--plenui-line); } /* ---------- 8. Busca ---------- */ .plenui-search-wrap{ padding: 16px 16px 0; } .plenui-search{ display: flex; align-items: center; gap: 8px; background: var(--plenui-card); border: 1px solid var(--plenui-line); border-radius: 999px; padding: 11px 16px; box-shadow: var(--plenui-shadow); } .plenui-search input{ border: none; outline: none; flex: 1; min-width: 0; font-size: 14px; background: transparent; color: var(--plenui-ink); } .plenui-search input::placeholder{ color: var(--plenui-muted); } .plenui-search i{ color: var(--plenui-muted); font-size: 15px; } .plenui-search:focus-within{ border-color: var(--plenui-primary); box-shadow: 0 0 0 3px var(--plenui-primary-soft); } .plenui-search-results{ padding: 10px 16px 0; } /* ---------- 10. Carrossel promocional ---------- */ .plenui-banner-wrap{ padding: 16px 16px 0; } .plenui-banner-wrap .flexslider{ position: relative; border-radius: var(--plenui-r-lg); overflow: hidden; border: none; box-shadow: var(--plenui-shadow); margin: 0; } /* Véu escuro sutil atrás das bolinhas: sem isso, elas ficam brancas em cima de qualquer banner, e em banners com área clara embaixo somem por falta de contraste — foi o que estava acontecendo. */ .plenui-banner-wrap .flexslider::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); pointer-events: none; z-index: 1; } .plenui-banner-wrap .flexslider .slides img{ border-radius: var(--plenui-r-lg); width: 100%; height: 150px; object-fit: cover; display: block; } /* Setas do carrossel: só no desktop. No mobile a navegação é só swipe/arraste + bolinhas — visual mais limpo, sem botão grande do lado. */ .plenui-banner-wrap .flex-direction-nav{ display: none; } .plenui-banner-wrap .flex-control-nav{ /* bottom maior = mais longe da base (sobe); menor = mais perto da base (desce). Reduzindo pra aproximar da borda inferior, como pedido. */ bottom: 6px; z-index: 2; /* O