/* ==========================================================================
Greenup Design — CSS responsivo compartilhado (mobile).
Carregado em todas as páginas via .
Usa classes utilitárias (gp-*) aplicadas nos elementos que precisam mudar
de layout no celular, com !important pra sobrepor os estilos inline.
========================================================================== */
/* --------------------------------------------------------------------
Rolagem e cabeçalho fixo — páginas da loja ().
O framework (support.js) aplica height: 100% em html, body, #dc-root e
.sc-host. Com overflow-x: hidden no body, quem rolava era o body: no
celular a barra de endereço não recolhia, o navegador perdia a posição ao
voltar de uma página e o cabeçalho "grudado" só ficava preso durante a
primeira tela. Aqui a página volta a rolar na janela e as caixas raiz
crescem com o conteúdo. O overflow-x: clip do body não cria caixa de
rolagem: só impede que algum elemento largo demais faça o celular afastar
o zoom — os elementos que estouravam foram corrigidos na origem.
-------------------------------------------------------------------- */
html.gp-loja body,
html.gp-loja body #dc-root,
html.gp-loja body #dc-root > .sc-host { height: auto; }
html.gp-loja { overflow-x: hidden; }
html.gp-loja body { overflow-x: clip; }
/* Landing pages de anúncio e Admin: comportamento original, sem mudança. */
html:not(.gp-loja), html:not(.gp-loja) body { max-width: 100%; overflow-x: hidden; }
/* Evita zoom automático de iOS em inputs com font-size < 16px */
@media (max-width: 900px) {
input, select, textarea { font-size: 16px !important; }
/* Campos de formulário têm largura mínima própria (~180px); numa linha
"campo + botão" (CEP, cupom) isso empurrava o botão para fora e alargava
a coluna inteira da página. */
html.gp-loja input, html.gp-loja select, html.gp-loja textarea { min-width: 0; }
}
/* --------------------------------------------------------------------
Header no celular, igual em TODAS as páginas da loja: botão de menu (☰)
no extremo esquerdo, depois os ícones na ordem de sempre (rastrear,
conta, carrinho) e o logo à direita. Compacto (≈65px), porque fica fixo
no topo. O breadcrumb some. O logo vem de um : no celular usa
uploads/logo-greenup-mobile.png (só a marca, sem a margem transparente
do arquivo do desktop), então 30px de altura já deixam a marca legível.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-header-nav { display: none !important; }
header #gp-menu-burger,
header .gp-hamburger { order: -1; }
header #gp-menu-burger { margin-right: 6px; }
/* mesmo espaçamento entre ícones em todos os cabeçalhos (4px) e 10px depois do ☰ */
header .gp-header-actions { gap: 4px !important; }
header .gp-hamburger { margin-right: 6px; }
/* Paisagistas: no celular o cabeçalho tem os mesmos ícones das outras páginas; o botão
"Falar com especialista" sai dali (a página já tem "Quero ser parceiro" logo abaixo) */
header [data-gp-menu-anchor] { display: none !important; }
.gp-icons-mobile-only { display: flex !important; }
/* gap de 24px entre os blocos do header é do computador; no celular ele empurrava o logo para fora da tela (5 ícones na inicial) */
html.gp-loja header > div:first-child { padding-top: 12px !important; padding-bottom: 12px !important; min-height: 0 !important; gap: 8px !important; }
/* espaçador vazio que só reserva o lugar do logo no computador (na inicial,
Projetos e Como Funciona ele somava 24px de "gap" e empurrava o logo para fora) */
html.gp-loja header .gp-logo-space:not(:has(*)) { display: none; }
/* o link do logo vai para a ponta direita, com a largura da própria imagem
(alguns cabeçalhos davam 200px fixos ao link, ou a classe do logo ao link) */
html.gp-loja header a:has(img[alt^="Greenup"]),
html.gp-loja header a.gp-header-logo { order: 99; margin-left: auto; width: auto !important; flex-shrink: 0; line-height: 0; position: static !important; left: auto !important; top: auto !important; }
html.gp-loja header picture { display: block; line-height: 0; }
html.gp-loja header a img[alt^="Greenup"] { height: 30px !important; width: auto !important; max-width: none !important; max-height: none !important; position: static !important; left: auto !important; top: auto !important; }
/* Admin (fora da loja): mantém o tamanho de logo de antes */
html:not(.gp-loja) header a:has(> img.gp-header-logo),
html:not(.gp-loja) header a:has(> img[alt^="Greenup"]),
html:not(.gp-loja) header a.gp-header-logo { order: 99; margin-left: auto; width: auto !important; flex-shrink: 0; line-height: 0; position: static !important; left: auto !important; top: auto !important; }
html:not(.gp-loja) header a.gp-header-logo > img,
html:not(.gp-loja) header a:has(> img[alt^="Greenup"]) > img { height: auto !important; max-height: 56px !important; width: auto !important; max-width: 112px !important; position: static !important; left: auto !important; top: auto !important; }
html:not(.gp-loja) .gp-header-logo { position: static !important; height: 56px !important; width: auto !important; left: auto !important; top: auto !important; }
}
@media (max-width: 359px) {
/* lupa da página inicial: numa tela de 320px não cabem 5 ícones + logo */
html.gp-loja header button[aria-label="Buscar no site"] { display: none; }
}
/* --------------------------------------------------------------------
Grid principal das páginas de produto (galeria | info do produto).
No celular, a galeria de fotos (carrossel, ver galeria-mobile.js) vem
primeiro, logo abaixo do cabeçalho, e depois o texto/info.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
/* minmax(0, 1fr): a coluna nunca passa da largura da tela (com "1fr" ela
crescia até o conteúdo mais largo e cortava foto/preço/botões à direita) */
.gp-product-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
/* menos espaço entre o cabeçalho e a foto */
section:has(> .gp-product-grid) { padding-top: 16px !important; }
.gp-gallery-col { position: static !important; top: auto !important; order: 1 !important; }
.gp-info-col { order: 2 !important; }
}
/* Abas (Descrição / Especificações / Avaliações) cabem na tela no celular */
@media (max-width: 640px) {
.gp-tabs { overflow-x: auto; margin-bottom: 28px !important; scrollbar-width: none; }
.gp-tabs::-webkit-scrollbar { display: none; }
.gp-tabs button { padding: 14px 12px !important; font-size: 14px !important; white-space: nowrap; flex: 1 1 auto; }
}
@media (max-width: 480px) {
.gp-product-title { font-size: 26px !important; }
}
/* --------------------------------------------------------------------
Header do Checkout (logo + indicador de passos). No celular: linha 1 =
voltar ao carrinho + logo; linha 2 = as 4 etapas centralizadas, só a etapa
atual com nome (antes ficavam numa faixa espremida e só "1 Endereço"
aparecia). Não fica fixo no checkout: com o teclado aberto o formulário
precisa de toda a altura da tela.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-header-logo-wrap { width: auto !important; }
html.gp-loja header:has(.gp-checkout-bar) { position: static !important; }
.gp-checkout-bar { flex-wrap: wrap; row-gap: 10px; }
.gp-checkout-acoes { order: 1; }
.gp-checkout-steps { order: 100; flex: 1 1 100%; justify-content: center; overflow: visible !important; }
}
@media (max-width: 640px) {
.gp-checkout-steps { gap: 0 !important; }
.gp-step-label:not(.gp-step-ativo) { display: none; }
}
/* --------------------------------------------------------------------
Linhas de formulário com dois campos lado a lado (endereço, cadastro).
-------------------------------------------------------------------- */
@media (max-width: 640px) {
.gp-form-row { flex-direction: column !important; gap: 12px !important; }
.gp-form-row > * { width: 100% !important; max-width: 100% !important; flex: none !important; }
}
/* --------------------------------------------------------------------
Footer padrão (grid de 4 colunas) usado na maioria das páginas.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
}
@media (max-width: 560px) {
/* Celular: marca na largura toda e as listas de links em 2 colunas (em uma
coluna só o rodapé passava de 1.300px). "footer" no seletor vence as regras
locais de algumas páginas (index, Projetos) que forçavam uma coluna. */
footer .gp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
footer .gp-footer-grid > :first-child { grid-column: 1 / -1; }
/* links do rodapé com área de toque de ~34px (antes 18px), mantendo o ritmo
visual: o espaço vem do padding do link em vez do gap da lista */
footer .gp-footer-grid > :not(:first-child) a { display: block; padding: 8px 0; }
footer .gp-footer-grid > :not(:first-child) > div:has(> a) { gap: 0 !important; }
}
/* --------------------------------------------------------------------
Utilitários genéricos de layout responsivo.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-stack-mobile { flex-direction: column !important; }
.gp-grid-1-mobile { grid-template-columns: 1fr !important; }
.gp-grid-2-tablet { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.gp-grid-2-tablet { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
.gp-hide-mobile { display: none !important; }
}
/* --------------------------------------------------------------------
Calculadora de parede: linhas "label + caixa de valor / toggle" que
podem não caber lado a lado numa tela estreita — evita que a caixa da
direita seja cortada, deixando quebrar pra uma segunda linha.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-calc-row { flex-wrap: wrap !important; row-gap: 8px !important; }
.gp-calc-panel { padding: 20px !important; }
}
/* .gp-preview-box: largura calculada dinamicamente via JS (medida real do
contêiner), não por CSS — ver refPreviewBox/medirPreviewBox em
calculadora-v2.html. Um max-width fixo aqui cortaria módulos em telas
com proporção diferente da estimada. */
/* --------------------------------------------------------------------
Primeira dobra (hero) grande demais em várias páginas — reduzida no
celular pra mostrar o conteúdo principal mais cedo.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-hero-compact { padding-top: 32px !important; padding-bottom: 32px !important; }
.gp-hero-title-lg { font-size: 28px !important; }
.gp-hero-min600 { min-height: 420px !important; }
.gp-hero-img-tall { height: 220px !important; }
}
/* --------------------------------------------------------------------
Diagrama "Como funciona um sistema de irrigação" (produto-pecas-kit-
irrigacao.html): 8 ícones com flex:1 ficavam espremidos/sobrepostos
numa tela estreita — vira uma faixa rolável horizontalmente.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
.gp-diagram-line { display: none !important; }
.gp-diagram-row {
justify-content: flex-start !important;
overflow-x: auto !important;
gap: 20px !important;
padding-bottom: 8px !important;
}
.gp-diagram-item { flex: 0 0 auto !important; width: 72px !important; }
}
/* --------------------------------------------------------------------
Cabeçalho com menu largo (início, Projetos, Como Funciona): o logo é
desenhado por cima (position: absolute) e não ocupa espaço no layout,
então o menu avançava sobre ele quando sobrava pouco espaço. Reserva a
largura do logo só em tela larga (no celular o logo volta ao fluxo).
-------------------------------------------------------------------- */
@media (min-width: 901px) {
.gp-logo-space { min-width: 200px; }
}
/* --------------------------------------------------------------------
Galerias de fotos e números de destaque: 2 colunas no celular (em 1 coluna
as galerias passavam de 3.000px). Classes próprias, para não mexer no
utilitário .gp-grid-2-tablet usado em outras páginas.
-------------------------------------------------------------------- */
@media (max-width: 560px) {
.gp-grid-2-tablet.gp-galeria-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.gp-grid-2-tablet.gp-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; }
}
/* --------------------------------------------------------------------
Áreas de toque no celular (mínimo ~40px). Só muda o tamanho clicável;
o visual dos textos continua o mesmo.
-------------------------------------------------------------------- */
@media (max-width: 900px) {
/* links soltos que tinham 16–18px de altura ("Ver avaliações", "Continuar
comprando", "Esqueci minha senha", "Voltar à Loja"...) */
html.gp-loja .gp-alvo { display: inline-flex; align-items: center; min-height: 40px; }
/* resumo do Checkout: −/+ e "Remover" tinham 22px e 14px de altura */
.gp-qtd-btn { width: 34px !important; height: 34px !important; font-size: 16px !important; }
.gp-qtd-num { width: 30px !important; font-size: 14px !important; }
.gp-remover { padding: 9px 4px !important; font-size: 12px !important; }
/* cards das etapas (endereço, frete, pagamento): 36px de recuo comprimia o conteúdo */
.gp-step-card { padding: 24px 20px !important; }
/* botão (i) dos cards das Peças de irrigação (22px) */
.gp-info-btn { width: 32px !important; height: 32px !important; }
}
/* Ícones de cabeçalho que só existem no celular (ver Paisagistas). */
.gp-icons-mobile-only { display: none; }
/* Resumo do pedido (Checkout): a lista de itens rola dentro do card. Barra de rolagem fina e
uma faixa livre à direita (em qualquer largura) para ela nunca ficar colada nem por cima
dos valores; uma linha separa um item do outro. */
.gp-resumo-itens { padding-right: 16px !important; scrollbar-width: thin; scrollbar-color: #cfc6b4 transparent; }
.gp-resumo-itens::-webkit-scrollbar { width: 6px; }
.gp-resumo-itens::-webkit-scrollbar-thumb { background: #cfc6b4; border-radius: 6px; }
.gp-resumo-itens::-webkit-scrollbar-track { background: transparent; }
.gp-resumo-item + .gp-resumo-item { border-top: 1px solid #efe9de; padding-top: 14px; }