:root{ --lime:#AFC60F; --ink:#181D10; --paper:#F6F4EC; --paper-card:#FFFFFF; --stamp:#A83A2A; --line:#25291B; --mute:#6B7058; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;} img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} .wrap{max-width:1200px; margin:0 auto; padding:0 32px;} h1,h2,h3{font-family:'Fraunces',serif; letter-spacing:-0.02em;} :focus-visible{outline:3px solid var(--stamp); outline-offset:3px;} @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} } .mono{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.1em;} .stamp{ display:inline-flex; align-items:center; gap:8px; border:2px solid var(--stamp); color:var(--stamp); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; padding:7px 14px; border-radius:999px; transform:rotate(-3deg); } /* NAV */ /* padding-top com safe-area: consequência de termos ligado viewport-fit=cover (ver header.php) para o botão de WhatsApp respeitar a barra de gestos do fundo — sem isto aqui, o cabeçalho sticky arriscava-se a ficar por baixo do entalhe/relógio em ecrãs com notch, em vez de ficar só encostado ao topo como antes. */ header{position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:2px solid var(--ink); padding-top:env(safe-area-inset-top, 0px);} nav.wrap{display:flex; align-items:center; justify-content:space-between; height:78px;} .logo{font-family:'Fraunces',serif; font-size:23px; font-weight:900; letter-spacing:-0.03em; display:flex; align-items:center; gap:9px;} .logo-icon{width:34px; height:34px; border-radius:50%;} .navlinks{display:flex; gap:34px; font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;} .navlinks a{border-bottom:2px solid transparent; padding-bottom:3px;} .navlinks a:hover{border-color:var(--lime);} .nav-cta{background:var(--ink); color:var(--lime); padding:11px 20px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;} .nav-cta:hover{background:var(--stamp); color:#fff;} /* Badge "Aberto agora" — ponto colorido (lima=aberta, stamp=fechada) + texto pequeno em mono, condiz com o resto dos indicadores do site (product-cat-pill, etc.). Escondido em mobile (desktop-only) — a barra do topo já fica cheia com logo+carrinho+menu nesse tamanho. */ .loja-estado{display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--stamp); margin-left:18px;} .loja-estado.is-aberta{color:var(--mute);} .loja-estado-ponto{width:7px; height:7px; border-radius:50%; background:var(--stamp); flex-shrink:0;} .loja-estado.is-aberta .loja-estado-ponto{background:var(--lime);} .cart-link{position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); margin-right:8px;} .cart-link:hover{color:var(--stamp);} .cart-count{position:absolute; top:-8px; right:-10px; background:var(--stamp); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; line-height:1; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px;} @media (max-width:780px){.navlinks{display:none;}} .desktop-only{display:inline-flex;} .nav-toggle-input{display:none;} .nav-toggle{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer;} .nav-toggle span{display:block; height:2px; background:var(--ink);} .mobile-menu{ display:none; flex-direction:column; gap:0; background:var(--paper); border-bottom:2px solid var(--ink); } .mobile-menu a{padding:16px 32px; font-weight:800; text-transform:uppercase; font-size:14px; border-bottom:1px solid #D9DBC9;} .mobile-menu .nav-cta{margin:16px 32px; text-align:center; justify-content:center; border-bottom:none;} html.is-mobile-nav .navlinks{display:none !important;} html.is-mobile-nav .desktop-only{display:none !important;} html.is-mobile-nav .nav-toggle{display:flex !important;} @media (max-width:780px){ .desktop-only{display:none;} .nav-toggle{display:flex;} .nav-toggle-input:checked ~ .mobile-menu{display:flex;} } /* HERO */ .hero{padding:56px 0 90px;} .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;} .hero-badge{margin-bottom:26px;} .hero h1{ font-size:clamp(38px,5.2vw,64px); font-weight:900; line-height:1.02; text-transform:uppercase; } .hero h1 .fill-lime{background:var(--lime); padding:0 10px; box-decoration-break:clone; -webkit-box-decoration-break:clone;} .hero-text p{max-width:44ch; font-size:16.5px; font-weight:600; color:var(--mute); margin-top:22px;} .hero-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;} .hero-links a{background:var(--ink); color:var(--lime); padding:14px 22px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em;} .hero-links a.ghost{background:transparent; color:var(--ink); border:2px solid var(--ink);} .hero-links a:hover{background:var(--stamp); color:#fff;} .hero-photo{position:relative; transform:rotate(1.4deg);} .hero-photo img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; border:3px solid var(--ink); box-shadow:14px 14px 0 var(--lime); } .hero-photo .stamp.on-photo{ position:absolute; bottom:-18px; left:-18px; background:var(--paper); transform:rotate(-4deg); } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px;} .hero-photo{transform:none; order:-1;} .hero-photo img{box-shadow:8px 8px 0 var(--lime);} .hero-photo .stamp.on-photo{left:0;} } /* MENU BAND — único bloco escuro da página */ .menu-band{background:var(--ink); color:var(--paper-card); padding:52px 0; margin-top:20px;} .menu-band .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center;} .menu-band .date-block{text-align:center;} .menu-band .date-block .num{font-family:'Fraunces',serif; font-size:52px; font-weight:900; line-height:1; color:var(--lime);} .menu-band .date-block .mono{font-size:10.5px; color:#8A9070; margin-top:6px;} .menu-dishes{display:flex; gap:44px; flex-wrap:wrap;} .menu-dishes div .mono{font-size:10px; color:#8A9070; margin-bottom:6px;} .menu-dishes div p{font-family:'Fraunces',serif; font-size:19px; font-weight:500;} .menu-band .btn{background:var(--lime); color:var(--ink); padding:14px 24px; font-weight:800; text-transform:uppercase; font-size:12.5px; letter-spacing:.05em; white-space:nowrap;} .menu-band .btn:hover{background:#fff;} @media (max-width:860px){.menu-band .wrap{grid-template-columns:1fr; text-align:left;} .menu-band .date-block{text-align:left;}} /* SECTION */ section.block, .woocommerce-main{padding-top:104px; padding-bottom:104px;} .block-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;} .block-head h1, .block-head h2{font-size:clamp(30px,4.2vw,50px); font-weight:800; text-transform:uppercase; line-height:0.95;} /* SHOP GRID */ .shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} @media (max-width:900px){.shop-grid{grid-template-columns:repeat(2,1fr);}} /* * Escopado a ".shop-grid .product" (não ".product" sozinho) de propósito: * o WooCommerce usa "product" como classe no
raiz da PRÓPRIA página * de produto (ex:
), * não só nos cartões da grelha. Sem o escopo, esta borda+fundo branco * aplicava-se por acidente à página de produto inteira (imagem + abas + * descrição, tudo dentro dessa "caixa" nunca pensada para lá estar), sem * nada por baixo ter padding relativo a ela — daí o texto parecer sempre * colado às bordas, fosse qual fosse o padding que se desse às abas. */ .shop-grid .product{background:var(--paper-card); border:2px solid var(--ink); min-width:0;} .product-img{aspect-ratio:1; background:repeating-linear-gradient(135deg,#EDEFE1,#EDEFE1 10px,#E3E6D2 10px,#E3E6D2 20px); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--mute);} .product-info{padding:18px; display:flex; flex-direction:column; align-items:flex-start; gap:12px;} .product-info h4{font-family:'Manrope',sans-serif; font-weight:800; font-size:14.5px; text-transform:uppercase; min-width:0;} .product-price{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; color:var(--stamp); max-width:100%;} /* WOOCOMMERCE — arquivo da loja (catálogo grande, 100+ produtos) */ .product-cat-nav{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 40px;} .product-cat-pill{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:9px 16px; border:2px solid var(--ink); border-radius:999px; color:var(--ink); } .product-cat-pill:hover{background:var(--ink); color:var(--paper);} .product-cat-pill.is-active{background:var(--lime); border-color:var(--ink);} .woocommerce ul.products{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:0;} /* * O woocommerce.css nativo tem um clearfix antigo em * `.woocommerce ul.products::before/::after{content:" "; display:table;}`. * Num contentor com display:grid, esses pseudo-elementos geram uma caixa * REAL que conta como item do grid — o ::before ocupa sempre a 1ª coluna, * empurrando os produtos a sério para começarem na 2ª. Sem sentido aqui * (não há floats a limpar), por isso desligamos a geração da caixa. */ .woocommerce ul.products::before, .woocommerce ul.products::after{content:none !important; display:none !important;} @media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.woocommerce ul.products{grid-template-columns:1fr;}} /* * O woocommerce.css nativo tem `.woocommerce ul.products li.product{width:22%; float:left; margin:...}` * com mais especificidade (dois elementos: ul+li) do que `.woocommerce ul.products .product`. * Sem isto, o WooCommerce ganha a cascata e os cartões ficam estreitos dentro da coluna do grid. * * O min-width/max-width aqui evita outro problema relacionado: uma imagem de * produto com dimensões originais grandes (antes do WordPress gerar a * miniatura própria) pode forçar a coluna do grid a "rebentar" para muito * mais larga do que devia — min-width:0 diz ao grid para ignorar o tamanho * intrínseco do conteúdo ao calcular a largura mínima da coluna. */ .woocommerce ul.products li.product{ float:none !important; width:auto !important; min-width:0 !important; max-width:100% !important; margin:0 !important; } .woocommerce ul.products .product{background:var(--paper-card); border:2px solid var(--ink); min-width:0;} .product-img{overflow:hidden; width:100%; max-width:100%;} .product-img img{width:100%; height:100%; max-width:100%; object-fit:cover;} .product-img-link{display:block; width:100%; max-width:100%;} /* * Mesmo problema de especificidade que o de cima: o woocommerce.css nativo tem * `.woocommerce ul.products li.product img{width:100%; height:auto; margin:...}`, * que ganhava à nossa regra e esticava/deformava a foto em vez de a recortar (cover). */ .woocommerce ul.products li.product img{ width:100% !important; height:100% !important; object-fit:cover !important; margin:0 !important; } /* * Aviso de "Dias de Fecho" (ver inc/fecho-loja.php) — logo no topo da * página, antes do cabeçalho, para ser a primeira coisa visível em * qualquer página de compra enquanto a loja estiver fechada. */ .ecogranel-aviso-fecho{background:var(--ink); color:var(--paper); text-align:center; padding:14px 24px;} .ecogranel-aviso-fecho p{margin:0; font-weight:600; font-size:14px;} /* INFO LEGAL DO PRODUTO (rotulagem alimentar) */ .ecogranel-catalogo-only{border:2px solid var(--stamp); color:var(--stamp); padding:14px 18px; margin:16px 0; font-weight:600;} .ecogranel-info-legal{padding:48px 0; border-top:2px solid var(--ink); margin-top:48px;} .ecogranel-info-legal h3{font-family:'Fraunces',serif; font-size:19px; font-weight:800; text-transform:uppercase; margin:28px 0 10px;} .ecogranel-info-legal h3:first-child{margin-top:0;} .ecogranel-info-legal p{color:var(--mute); max-width:65ch;} .ecogranel-alergenios{list-style:none; display:flex; flex-wrap:wrap; gap:10px;} .ecogranel-alergenios li{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; border:2px solid var(--stamp); color:var(--stamp); padding:6px 12px; border-radius:999px;} .ecogranel-nutricional{border-collapse:collapse; max-width:420px;} .ecogranel-nutricional th, .ecogranel-nutricional td{text-align:left; padding:8px 16px 8px 0; border-bottom:1px solid #D9DBC9; font-weight:500;} .ecogranel-nutricional th{color:var(--mute); font-weight:600;} /* CONFIRMAÇÃO WHATSAPP */ .ecogranel-whatsapp-confirmacao{padding:40px 0; border-top:2px solid var(--ink); margin-top:32px;} .ecogranel-whatsapp-confirmacao h2{font-family:'Fraunces',serif; font-size:24px; font-weight:800; text-transform:uppercase; margin-bottom:10px;} .ecogranel-whatsapp-confirmacao p{color:var(--mute); max-width:60ch; margin-bottom:20px;} .ecogranel-whatsapp-confirmacao .button{display:inline-block; background:var(--lime); color:var(--ink); border:none; padding:14px 24px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 12px 12px 0;} .ecogranel-whatsapp-confirmacao .button:hover{background:var(--ink); color:var(--lime);} /* Utilitário — esconde visualmente mas mantém acessível a leitores de ecrã. */ .ecogranel-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} /* CABAZES */ #ecogranel-cabaz-form{margin-top:32px;} .cabaz-barra{position:sticky; top:78px; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; background:var(--ink); color:var(--paper-card); padding:16px 20px; margin-bottom:24px;} /* * Indicador de progresso numerado (1..máximo) — substitui o antigo * "0/10 (mínimo 4)" em texto. Estado de cada passo é dado via classe em * JS (ver atualizar() no composer): is-preenchido = já contado neste * total, is-atual = próximo produto a escolher. cabaz-passo-minimo marca * de forma permanente qual é o passo do mínimo exigido (tooltip via * title=""), mesmo depois de preenchido. */ .cabaz-passos{display:flex; align-items:center; gap:5px; flex-wrap:wrap;} .cabaz-passo{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; border-radius:50%; border:2px solid rgba(246,244,236,.28); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; color:rgba(246,244,236,.55); transition:background-color .15s, border-color .15s, color .15s; } .cabaz-passo.is-preenchido{background:var(--lime); border-color:var(--lime); color:var(--ink);} .cabaz-passo.is-atual{border-color:var(--lime); color:var(--paper-card);} .cabaz-passo-minimo::after{content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--lime);} .cabaz-total{font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; color:var(--lime);} .cabaz-grid{margin-bottom:40px;} .cabaz-item{cursor:pointer; display:block; position:relative; transition:border-color .15s;} /* * Checkbox/radio nativos ganham aparência de selo circular com ✓ — o * "ícone de confirmação" pedido é o próprio controlo, sem elemento extra * a duplicar/desalinhar com ele (continua a ser um checkbox/radio real, * acessível por teclado e leitor de ecrã). */ .cabaz-item input[type="checkbox"], .cabaz-item input[type="radio"]{ position:absolute; top:12px; right:12px; width:24px; height:24px; z-index:1; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--paper-card); border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background-color .15s, border-color .15s; } .cabaz-item input[type="checkbox"]:checked, .cabaz-item input[type="radio"]:checked{background:var(--lime); border-color:var(--lime);} .cabaz-item input[type="checkbox"]:checked::after, .cabaz-item input[type="radio"]:checked::after{content:"✓"; color:var(--ink); font-size:14px; font-weight:800; line-height:1;} .cabaz-item input[type="checkbox"]:checked ~ .product-img, .cabaz-item input[type="radio"]:checked ~ .product-img{outline:3px solid var(--lime); outline-offset:-3px;} .cabaz-item input[type="checkbox"]:disabled, .cabaz-item input[type="radio"]:disabled{opacity:.3;} /* * Secção de embrulho — mesmo cartão .cabaz-item da grelha de produtos * acima (regras logo acima), só que com radio (seleção única) em vez de * checkbox. A caixa com borda lime à volta é o que a distingue visualmente * da grelha de produtos, para não se confundir com o que enche o cabaz. * * Padding só em cima/baixo (não nos lados): com padding lateral também, o * título/descrição ficavam bem, mas a grelha lá dentro (.cabaz-embrulho-grid) * herdava esse mesmo recuo e os cartões começavam ~24px mais à direita do * que os cartões da grelha de produtos acima — a borda lime da caixa * continuava alinhada com essa grelha, mas o conteúdo lá dentro não, * dando a impressão de a caixa estar desalinhada. O título/descrição * ganham o recuo lateral próprio (só eles), a grelha fica à largura toda * (encostada à borda esquerda/direita), alinhada com a grelha de cima. */ .cabaz-embrulho{background:var(--paper-card); border:2px solid var(--lime); padding:20px 0; margin-bottom:32px;} .cabaz-embrulho h3{font-family:'Fraunces',serif; font-size:19px; margin-bottom:4px; padding:0 24px;} .cabaz-embrulho .description{color:var(--mute); font-size:13px; margin-bottom:14px; padding:0 24px;} .cabaz-embrulho-grid{margin-bottom:0;} /* CTA final do composer — lime/cheio/grande de propósito: é a ação que fecha todo o fluxo de escolha, tem de se destacar claramente do resto (que usa o padrão ink/lime mais discreto dos outros botões WooCommerce). */ #ecogranel-cabaz-form button[data-submit]{display:block; width:100%; background:var(--lime); color:var(--ink); border:none; padding:20px 28px; margin-top:24px; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition:background-color .15s, color .15s;} #ecogranel-cabaz-form button[data-submit]:hover:not(:disabled){background:var(--ink); color:var(--lime);} #ecogranel-cabaz-form button[data-submit]:disabled{background:var(--ink); color:var(--paper-card); opacity:.3; cursor:not-allowed;} .woocommerce .page-title{font-family:'Fraunces',serif; font-size:clamp(30px,4.2vw,50px); font-weight:800; text-transform:uppercase; line-height:0.95; margin:0 0 48px;} .woocommerce-result-count, .woocommerce-ordering{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute);} .woocommerce-ordering select{border:2px solid var(--ink); background:var(--paper-card); padding:8px 12px; font-family:inherit;} .woocommerce-pagination{margin-top:56px;} .woocommerce-pagination ul.page-numbers{list-style:none; display:flex; gap:8px; flex-wrap:wrap;} .woocommerce-pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border:2px solid var(--ink); font-family:'IBM Plex Mono',monospace; font-size:13px;} .woocommerce-pagination .page-numbers.current{background:var(--ink); color:var(--lime);} .woocommerce-pagination a.page-numbers:hover{background:var(--lime);} /* WOOCOMMERCE — botões, formulários, mensagens, preço */ .woocommerce div.product .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{ background:var(--ink); color:var(--lime); border:none; padding:14px 22px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; border-radius:0; cursor:pointer; text-decoration:none; display:inline-block; } .woocommerce div.product .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--stamp); color:#fff;} .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{background:var(--paper-card); border-top-color:var(--lime);} .woocommerce .price{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--stamp);} .woocommerce div.product form.cart{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 24px;} .woocommerce div.product form.cart .variations{flex:0 0 100%; margin:0;} .woocommerce div.product form.cart .single_variation_wrap{flex:0 0 100%;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex; flex-wrap:wrap; align-items:center; gap:14px;} .woocommerce div.product form.cart .variations select{border:2px solid var(--ink); padding:10px 14px; font-family:inherit; background:var(--paper-card);} .woocommerce div.product form.cart .quantity{margin:0;} .woocommerce div.product form.cart .quantity input{border:2px solid var(--ink); padding:10px 12px; font-family:inherit;} .product_meta{margin-top:20px; font-size:13px; color:var(--mute);} #ecogranel-cabaz-form{margin-bottom:8px;} /* * Imagem principal da página de produto — proporção fixa (mesma dos * cartões da loja, .product-img{aspect-ratio:1}) com object-fit:cover. * Sem isto, uma foto muito panorâmica (ex: as imagens dos cabazes, * geradas por IA em formato muito largo) ficava baixa dentro de uma * coluna estreita, parecendo um banner em vez de foto de produto. */ .woocommerce-product-gallery__image{aspect-ratio:1; overflow:hidden; position:relative;} .woocommerce-product-gallery__image a{position:absolute; inset:0; display:block;} /* * !important necessário aqui: o do WordPress vem sempre com * atributos width/height no HTML (ex: width="600" height="327"), e outra * regra do WooCommerce/WordPress (max-width/height, provavelmente do * responsive-images core) ganha à nossa por especificidade/ordem sem * isto — testado e confirmado, sem !important a imagem mantinha a sua * proporção original em vez de preencher o quadrado. */ .woocommerce-product-gallery__image img{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; aspect-ratio:auto !important; max-width:none !important; max-height:none !important;} /* * Duas colunas da página de produto (imagem + resumo) — layout clássico * para Peso/Litro/Unidade, cujo resumo (título, preço, botão) é compacto * e combina bem lado a lado com a imagem. Trocamos o float:left/right * nativo do WooCommerce por grid só para as colunas terem garantidamente * a mesma altura (com floats não há essa garantia). * * Os Cabazes NÃO usam este layout — ver .ecogranel-cabaz-produto mais * abaixo. O resumo de um Cabaz é o composer inteiro (produtos + embrulho * + botão), que cresce muito mais do que a imagem alguma vez cresceria; * tentámos primeiro emparelhar as alturas (grid) e prender a imagem * (sticky) para acompanhar o scroll, mas como a imagem tem tamanho fixo * e não estica, sobrava sempre espaço vazio por baixo dela — só notado * durante uma parte do scroll (sticky disfarça, não resolve). Coluna * única resolve de vez, e ainda dá à grelha de produtos a largura toda * da página em vez de a espremer a 48%. * * .woocommerce-tabs / .related.products / .upsells.products também são * filhos diretos de div.product (o WooCommerce não os isola num wrapper * à parte) — sem o grid-column:1/-1 abaixo, cairiam eles próprios dentro * desta grelha de 2 colunas em vez de ocuparem a largura toda. O espaço * antes de cada uma (que antes vinha do margin-bottom das colunas * flutuantes) passa a vir do padding-top+border-top de cada secção — * .woocommerce-tabs já tinha isto; .related/.upsells ganham o mesmo * tratamento aqui, para haver sempre um espaçamento consistente por * cima, exista ou não descrição (tabs) antes delas. Isto aplica-se a * QUALQUER produto, Cabaz incluído (a estrutura de tabs/related não muda). */ /* * 400px fixo para a coluna da imagem (em vez de 1fr, que a fazia * crescer até perto de 550-600px em ecrãs largos) — imagens de baixa * resolução (ex: fotos pequenas tiradas à pressa) ampliavam demasiado * e ficavam desfocadas. Menos ampliação = menos notório o problema, * mesmo sem substituir a foto. A coluna do resumo (1fr) ocupa o resto. */ .woocommerce div.product{display:grid; grid-template-columns:400px 1fr; column-gap:4%;} .woocommerce div.product div.images, .woocommerce div.product div.summary{float:none; width:auto; margin-bottom:0;} /* * A imagem (quadrado via aspect-ratio, calculado a partir da LARGURA da * coluna) estava a sair por baixo da coluna do resumo — o grid estica as * duas colunas para a mesma altura, mas essa altura é calculada antes de * saber o tamanho final do quadrado (que depende da própria largura da * coluna), e o .woocommerce-product-gallery ser sticky torna essa conta * ainda mais instável. overflow:hidden aqui garante que a imagem nunca * ultrapassa visualmente a altura que o grid decidiu para a linha, seja * qual for o valor exato dessa conta. */ .woocommerce div.product div.images{overflow:hidden;} .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related.products, .woocommerce div.product > .upsells.products{grid-column:1 / -1;} .woocommerce div.product > .related.products, .woocommerce div.product > .upsells.products{padding-top:64px; border-top:2px solid var(--ink);} @media (max-width:900px){ .woocommerce div.product{display:block;} /* * Em grid (desktop), cada coluna já é automaticamente um bloco * isolado — margens dos filhos não escapam para fora da coluna. Ao * cair para display:block (mobile), essa proteção desaparece: uma * margem negativa algures dentro de div.images (ex: vinda do * script da galeria/FlexSlider) pode "escapar" pelo fundo e puxar o * div.summary a seguir para cima, sobrepondo o título à imagem — * mesmo bug da página do Cabaz (ver mais abaixo), desta vez entre * dois irmãos em vez de pai/filho. flow-root isola cada bloco. */ .woocommerce div.product div.images, .woocommerce div.product div.summary{display:flow-root;} } /* * Sticky DESLIGADO (era: imagem fixa a acompanhar o scroll ao lado do * resumo). Foi identificado como causa provável de a imagem ficar * pintada com uma altura diferente da calculada pelo layout — os * números via JS (getBoundingClientRect) davam sempre as duas colunas * iguais, mas o ecrã continuava a mostrar a imagem maior, um sinal * clássico de posição sticky a dessincronizar o repaint do resto da * grid. Sem sticky, a imagem fica sempre estática dentro da sua célula * do grid — perde-se o "seguir o scroll", mas ganha-se previsibilidade. */ .woocommerce-product-gallery{position:static;} /* * Cabaz — coluna única mesmo no desktop (ver comentário acima, no bloco * das duas colunas, para o porquê). Imagem centrada, tamanho fixo (não * esticada): o max-width só "trava" a partir de ~480px de largura * disponível, por isso em mobile (já mais estreito do que isso) não muda * nada — continua a comportar-se tal como já funcionava. .woocommerce-tabs * / .related.products / .upsells.products já ficam à largura toda por * herança do layout de bloco normal, sem precisar de grid-column aqui. * * NOTA: tentámos "display:flex; flex-direction:column" aqui para forçar * empilhamento sequencial sem sobreposição — resolveu a sobreposição do * título, mas partiu a galeria de imagens (o script FlexSlider mede a * largura do contentor no arranque da página, e com o pai em flex essa * medição dá 0, pondo a imagem fora do ecrã). Revertido para "block"; a * sobreposição é resolvida abaixo com clearfix em div.images em vez de * mudar o tipo de display. */ .woocommerce div.product.ecogranel-cabaz-produto{display:block;} .woocommerce div.product.ecogranel-cabaz-produto div.images::after{content:""; display:table; clear:both;} /* * A causa real da sobreposição: um filho do div.summary (o h1.product_title, * provavelmente por um reset tipográfico do tema) tem margin-top negativo. * Em display:block normal, essa margem negativa "escapa" através do * div.summary (que não tem padding/border a separar) e puxa a caixa toda * do div.summary para cima, para dentro da imagem — um colapso de margem * clássico entre pai e primeiro filho. "display:flow-root" cria um novo * bloco de formatação só no div.summary, que bloqueia essa fuga de margem * sem alterar o display do div.images (ao contrário do flex, que resolvia * isto mas partia o FlexSlider da galeria). */ .woocommerce div.product.ecogranel-cabaz-produto div.summary{clear:both; display:flow-root;} .woocommerce div.product.ecogranel-cabaz-produto div.images, .woocommerce div.product.ecogranel-cabaz-produto div.summary{float:none; width:100%;} .woocommerce div.product.ecogranel-cabaz-produto div.images{max-width:480px !important; margin:0 auto 40px !important;} .woocommerce div.product.ecogranel-cabaz-produto div.summary{margin-bottom:0;} /* * !important acima e no margin-top abaixo: apesar das contas de * especificidade estarem corretas em teoria, o título e o preço estavam * a ficar tapados pela imagem (confirmado no DevTools — o retângulo do * h1 aparecia sobreposto ao fundo da imagem). Provavelmente algo do * FlexSlider/zoom do WooCommerce (JS da galeria) está a definir altura * inline na galeria e a interferir com o espaçamento calculado só por * CSS. Em vez de continuar a perseguir a causa exata, força-se a margem * a aplicar sempre — resultado visual é o que importa aqui. */ /* * 62px = confirmado por DevTools: o h1 tem uma margin-top negativa nativa * de -38px (herdada de algum reset tipográfico) que "espreita" para fora * da div.summary mesmo com display:flow-root no pai (flow-root impede a * fuga de margem para os IRMÃOS da div.summary, mas não impede o filho de * visualmente ultrapassar o topo da própria div.summary, já que overflow é * visible por omissão). 62px = 38px para anular essa margem negativa + 24px * de espaçamento visual pretendido a seguir à imagem. */ .woocommerce div.product.ecogranel-cabaz-produto .product_title{margin-top:62px !important;} .woocommerce div.product.ecogranel-cabaz-produto div.summary > p.price{margin-top:8px !important;} /* * Título e preço centrados, a acompanhar a imagem — só estes dois (não a * div.summary toda): o resto do resumo é o composer, que tem de continuar * à largura total (indicador, grelhas, botão não fazem sentido centrados). * Como partilham o mesmo contentor da imagem, o centro de ambos alinha * naturalmente com o centro da imagem, mesmo esta sendo mais estreita * (max-width:480px) do que a coluna toda. */ .woocommerce div.product.ecogranel-cabaz-produto .product_title, .woocommerce div.product.ecogranel-cabaz-produto div.summary > p.price{text-align:center;} /* * Título do produto (todos os tipos, não só Cabaz) — nunca tinha * font-size próprio, ficava só com o valor por omissão do navegador * (2em, sem mais nenhuma regra do tema a tocar-lhe). Título maior + peso * explícito, a condizer com o resto da tipografia do site (mesma escala * do .page-title da Loja). */ .woocommerce div.product .product_title{font-size:clamp(28px,3.6vw,42px); font-weight:700; line-height:1.15; margin-top:24px; margin-bottom:12px;} .woocommerce div.product .summary > p.price{font-size:22px; margin-bottom:20px;} .woocommerce div.product .posted_in{font-size:14px; color:var(--mute);} /* * Aviso de stock baixo ("Só restam X em stock") — classe nativa .stock do * WooCommerce, sem estilo próprio antes (saía com o azul/preto genérico * do browser). Discreto de propósito: um empurrãozinho, não um alarme — * por isso mono pequeno em vez de um badge grande a gritar. */ .woocommerce div.product p.stock{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px;} .woocommerce div.product p.stock.in-stock{color:var(--mute);} .woocommerce div.product p.stock.out-of-stock{color:var(--stamp); font-weight:700;} /* * Respiro extra à volta de todo o conteúdo (imagem, título, indicador de * progresso, grelhas, botão) — no layout de 2 colunas anterior, o gap * entre imagem e resumo dava alguma folga visual "de graça"; em coluna * única essa folga desaparece, e ao lado de bordas rígidas (cartões, * caixa do embrulho, 2px solid) os 32px do .wrap sozinhos leem como * "colado" à margem da página. Só a partir do breakpoint de desktop — em * mobile os 32px do .wrap já chegam (ecrã bem mais estreito, o padding * extra sobrava menos espaço útil para o conteúdo). */ @media (min-width:901px){ .woocommerce div.product.ecogranel-cabaz-produto{padding:48px 40px 72px;} } .woocommerce div.product.ecogranel-cabaz-produto .woocommerce-product-gallery{position:static;} /* Título "Produtos Relacionados"/"Compre também" — mesma tipografia do .block-head h2 usado no resto do site (Loja, secções da homepage, etc.), para a secção não destoar visualmente. */ .woocommerce div.product .related.products > h2, .woocommerce div.product .upsells.products > h2{ font-size:clamp(30px,4.2vw,50px); font-weight:800; text-transform:uppercase; line-height:0.95; border-bottom:2px solid var(--ink); padding-bottom:24px; margin-bottom:52px; } .woocommerce-tabs{padding-top:64px; border-top:2px solid var(--ink);} /* * Separadores em estilo "sublinhado" (troca do antigo estilo de botão com * caixa — os dois juntos ficavam confusos, um só sítio a dizer qual está * ativo). border-bottom 2px lime no ativo, a condizer com a linguagem * visual do resto do site (sempre 2px sólido, nunca linhas finas/rgba). */ .woocommerce-tabs ul.tabs{list-style:none; display:flex; gap:32px; border-bottom:2px solid var(--ink); margin-bottom:32px;} .woocommerce-tabs ul.tabs li{padding:0 0 12px; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer;} .woocommerce-tabs ul.tabs li.active{color:var(--ink); border-bottom-color:var(--lime);} .woocommerce-tabs ul.tabs li a{display:inline-block; color:inherit;} /* * Conteúdo de cada separador (Descrição / Informação Adicional). Não é só * o reset global (*{padding:0}) — a própria woocommerce.css nativa (que * continua carregada, ver wp_enqueue_scripts) tem * ".woocommerce-tabs .panel{padding:0}" com DUAS classes de * especificidade; uma regra nossa com uma classe só perdia sempre para * essa, independentemente da ordem de carregamento ou de !important no * sítio errado. O seletor abaixo junta as três classes reais do painel * (.woocommerce-tabs .panel.woocommerce-Tabs-panel) para ganhar por * especificidade a sério, sem precisar de !important. */ .woocommerce-tabs .panel.woocommerce-Tabs-panel{padding-top:24px;} /* * Texto da descrição — é conteúdo de venda, não nota secundária, por isso * usa var(--ink) (não var(--mute), reservado a legendas/categorias) para * ler com contraste a sério. Sem max-width: o painel das abas ocupa a * largura toda do grid (grid-column:1/-1, imagem+resumo juntos), por isso * limitar a medida de leitura só deixava um vazio grande à direita. */ .woocommerce-Tabs-panel h2{font-family:'Fraunces',serif; font-size:24px; font-weight:800; margin-bottom:18px; color:var(--ink);} .woocommerce-Tabs-panel p{color:var(--ink); font-size:16.5px; line-height:1.75; margin-bottom:1.3em;} /* * Tabela de "Informação Adicional" (peso, e no futuro outras * características) — nunca é mais do que 1-2 factos soltos, por isso uma * grelha com bordas grossas (como as tabelas do Sobre/Termos, pensadas * para várias linhas de comparação) ficava uma caixa órfã e desequilibrada. * Em vez disso, mesmo padrão "etiqueta + valor" já usado em Contactos * (.contactos-info h5/p): etiqueta pequena em maiúsculas, valor a sério * por baixo em peso — sem grelha, só uma linha fina a separar cada facto. */ table.shop_attributes{width:100%; max-width:420px; border-collapse:collapse; margin-top:8px;} table.shop_attributes tr{border-bottom:1px solid #D9DBC9;} table.shop_attributes tr:last-child{border-bottom:none;} table.shop_attributes th, table.shop_attributes td{border:none; padding:14px 0; text-align:left; vertical-align:middle;} table.shop_attributes th{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); font-weight:600; width:40%;} /* * woocommerce.css nativa tem ".woocommerce table.shop_attributes td{font-style:italic}" * — DUAS classes + dois elementos de especificidade. A tentativa anterior * (sem ".woocommerce" à frente) tinha menos especificidade e perdia * sempre, mesmo com font-style:normal explícito — mesmo tipo de bug já * visto nas abas (ver comentário mais acima). */ .woocommerce table.shop_attributes td{font-size:15px; font-weight:600; font-style:normal; color:var(--ink);} table.shop_attributes td p{margin:0;} .woocommerce-Reviews-title{font-size:24px; margin-bottom:16px;} p.woocommerce-noreviews{margin-bottom:8px; padding:0;} #reviews p{margin-bottom:16px;} #reply-title.comment-reply-title{display:block; font-weight:800; margin-bottom:20px;} .comment-form-rating{margin-bottom:24px;} .comment-form-rating label{display:block; margin-bottom:10px; font-weight:700;} p.comment-form-comment{margin-bottom:24px;} p.comment-form-comment label{display:block; margin-bottom:10px; font-weight:700;} p.comment-form-comment textarea{width:100%; max-width:560px; margin-top:4px; padding:14px; border:2px solid var(--ink); font-family:inherit;} p.form-submit{margin-top:8px;} /* * Botão flutuante de WhatsApp (Loja, Cabazes, produto) — canto inferior * direito, o padrão mais reconhecível para isto. z-index acima do * conteúdo normal (header sticky usa 30), mas sem exagerar — o lightbox * da galeria de produto (photoswipe) usa um z-index muito mais alto por * conta própria, por isso continua sempre por cima quando aberto. * * env(safe-area-inset-bottom) — em iPhones sem botão físico (X em * diante), a barra de gestos do fundo do ecrã fica por cima de qualquer * elemento fixed comum, tapando-o parcialmente ou obrigando a tocar * demasiado perto da borda. Esta variável (0px em qualquer outro * aparelho/browser, sem efeito nenhum aí) soma a distância real e segura * dessa barra, para o botão nunca ficar colado/tapado por ela. É pensado * de propósito para mobile primeiro, não um extra de desktop. */ .whatsapp-flutuante{ position:fixed; right:18px; z-index:35; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:10px; } /* * Nota "fora de horário" — só existe no DOM quando estamos mesmo fora de * horário (ver inc/whatsapp-flutuante.php); dentro de horário, o botão * fica sozinho, sem nota nenhuma. Texto editável em Definições → * ecogranel → WhatsApp. */ .whatsapp-flutuante-nota{ background:var(--ink); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:10.5px; line-height:1.4; padding:9px 12px; max-width:180px; box-shadow:0 4px 14px rgba(0,0,0,.18); } .whatsapp-flutuante-botao{ position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#25D366; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .15s; } .whatsapp-flutuante-botao:hover{transform:scale(1.06);} /* * Ponto de estado no canto do ícone — mesma linguagem visual do badge * "Aberto agora" do cabeçalho (lima=disponível, stamp=fora de horário), * para quem já viu um daqueles reconhecer o outro. "Termos diferentes" * do texto (não literalmente "online"/"offline") + este ponto = o mesmo * conceito dos widgets de chat comuns, com a cor da marca. */ .whatsapp-flutuante-ponto{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:var(--lime); border:2px solid var(--paper); } .whatsapp-flutuante-botao.is-offline .whatsapp-flutuante-ponto{background:var(--stamp);} /* * Mobile é o caso principal a acautelar aqui (mais tráfego, mais difícil * de tocar com precisão) — botão um pouco menor e mais perto da borda. * A nota "fora de horário" mantém-se visível mesmo em mobile (ao * contrário de antes): já não é permanente, só aparece quando há mesmo * informação útil a dar (fora de horário), por isso vale o espaço. * Nunca sobrepõe o "Adicionar"/botão do cabaz — nem um nem outro são * fixed, só passam visualmente por baixo dele ao rolar, o mesmo * comportamento normal de qualquer botão flutuante deste tipo. */ @media (max-width:560px){ .whatsapp-flutuante{right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));} .whatsapp-flutuante-nota{font-size:10px; max-width:140px; padding:7px 10px;} .whatsapp-flutuante-botao{width:50px; height:50px;} .whatsapp-flutuante-botao svg{width:24px; height:24px;} } /* 404 */ .erro-404-texto{max-width:56ch; font-size:16.5px; color:var(--mute); line-height:1.6; margin:8px 0 36px;} /* CONTACTOS */ .contactos-info{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px;} .contactos-info h5{font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; color:var(--mute);} .contactos-info p{font-size:15px; font-weight:600;} @media (max-width:700px){.contactos-info{grid-template-columns:1fr; gap:24px;}} /* SOBRE — título e badge já vêm de .block-head, tal como as outras páginas. */ .sobre-imagem{margin:32px 0; border:2px solid var(--ink);} .sobre-imagem img{width:100%;} /* * CONTEÚDO DE PÁGINA — tipografia partilhada por qualquer página de * texto corrido (Sobre, e as páginas legais via page.php: Privacidade, * Cookies, Termos). Antes cada uma tinha o seu próprio estilo (ou * nenhum, no caso das legais, que caíam no index.php genérico sem * qualquer tipografia própria) — um único sítio agora define tamanho, * espaçamento entre títulos/parágrafos/listas/tabelas, para não voltar * a haver três "espaçamentos" diferentes consoante a página. */ .page-conteudo{max-width:78ch; font-size:16.5px; font-weight:500; color:var(--mute); line-height:1.6;} .page-conteudo p{margin-bottom:1.2em;} .page-conteudo h2, .page-conteudo h3{font-family:'Fraunces',serif; color:var(--ink); line-height:1.15; margin:1.4em 0 .5em;} .page-conteudo h2{font-size:24px; font-weight:800;} .page-conteudo h3{font-size:18px; font-weight:700;} .page-conteudo ul, .page-conteudo ol{margin:0 0 1.2em 1.3em;} .page-conteudo li{margin-bottom:.4em;} .page-conteudo a{color:var(--stamp); text-decoration:underline;} .page-conteudo strong{color:var(--ink); font-weight:700;} .page-conteudo table{width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:14.5px;} .page-conteudo th, .page-conteudo td{border:2px solid var(--ink); padding:10px 14px; text-align:left; vertical-align:top;} .page-conteudo th{background:var(--paper-card); color:var(--ink); font-weight:700;} .page-conteudo > *:first-child{margin-top:0;} /* RESTAURAÇÃO — menu da semana */ .semana-menus{display:flex; flex-direction:column; margin:40px 0; border:2px solid var(--ink);} .semana-dia{display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:center; padding:24px; background:var(--paper-card); border-bottom:2px solid var(--ink);} .semana-dia:last-child{border-bottom:none;} .semana-dia.is-hoje{background:var(--lime);} .semana-dia .date-block{text-align:center;} .semana-dia .date-block .num{font-family:'Fraunces',serif; font-size:32px; font-weight:900; line-height:1;} .semana-dia .date-block .mono{font-size:10px; color:var(--mute); margin-top:4px;} .semana-dia.is-hoje .date-block .mono{color:var(--ink);} .semana-dia .menu-dishes{display:flex; gap:32px; flex-wrap:wrap;} .semana-dia .sem-menu{color:var(--mute); font-style:italic;} .em-breve{color:var(--mute); font-style:italic; font-size:16px;} @media (max-width:700px){.semana-dia{grid-template-columns:1fr; gap:12px;}} /* RESERVAS */ .reservas-form{max-width:520px; margin-top:32px;} .reservas-form p{margin-bottom:18px;} .reservas-form label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; color:var(--mute);} .reservas-form input, .reservas-form textarea{width:100%; border:2px solid var(--ink); background:var(--paper-card); padding:12px 14px; font-family:'Manrope',sans-serif; font-size:15px;} .reservas-form button{background:var(--ink); color:var(--lime); border:none; padding:14px 24px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;} .reservas-form button:hover{background:var(--stamp); color:#fff;} .reservas-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;} .reservas-erros{border:2px solid var(--stamp); color:var(--stamp); padding:16px 20px; margin:24px 0; list-style:none;} .reservas-sucesso{border:2px solid var(--lime); background:var(--paper-card); padding:20px 24px; margin:24px 0; font-weight:600;} /* PHILOSOPHY */ .philosophy .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; padding:100px 32px; border-top:2px solid var(--ink);} .philosophy h2{font-size:clamp(32px,4vw,50px); font-weight:800; text-transform:uppercase; line-height:0.98;} .philosophy p{margin-top:22px; max-width:48ch; font-size:16px; font-weight:600; color:var(--mute);} .philosophy .tags{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;} .philosophy .img-block{aspect-ratio:4/3; background:repeating-linear-gradient(135deg,#EDEFE1,#EDEFE1 10px,#E3E6D2 10px,#E3E6D2 20px); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; color:var(--mute); border:2px solid var(--ink);} @media (max-width:820px){.philosophy .wrap{grid-template-columns:1fr;}} /* FOOTER */ footer{background:var(--paper); color:var(--ink); padding:64px 0 30px; border-top:2px solid var(--ink);} footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;} footer .wrap.footer-sem-visita{grid-template-columns:2fr 1fr 1fr;} footer .logo{font-size:26px;} footer p{font-size:13.5px; max-width:34ch; margin-top:12px; color:var(--mute); font-weight:600;} footer h5{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; color:var(--mute);} footer ul{list-style:none; font-size:13.5px; display:flex; flex-direction:column; gap:9px; font-weight:600;} footer ul a:hover{color:var(--stamp);} .footer-bottom{border-top:1px solid #D9DBC9; margin-top:48px; padding-top:20px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--mute);} @media (max-width:760px){ footer .wrap{grid-template-columns:1fr; gap:28px; text-align:center;} footer .logo{justify-content:center;} footer p{margin-left:auto; margin-right:auto;} footer ul{align-items:center;} .footer-bottom{text-align:center;} } /* * Resumo "Número de encomenda / Data / Email / Total / Método de * pagamento" (página de agradecimento, "Pagar encomenda", "Ver * encomenda"). O WooCommerce por omissão usa float+margem apertada com * separadores tracejados — troca-se para flex com espaço (gap) generoso * entre itens, sem os separadores, para ler mais confortavelmente. */ .woocommerce ul.order_details{ display:flex !important; flex-wrap:wrap !important; gap:22px 44px !important; margin:0 0 40px !important; } .woocommerce ul.order_details li{ float:none !important; margin:0 !important; padding:0 !important; border-right:none !important; font-size:.8em !important; letter-spacing:.03em; } .woocommerce ul.order_details li strong{ margin-top:6px; font-size:1.3em; } /* * Botão final "Finalizar encomenda" (#place_order) — o WooCommerce tem uma * regra própria mais específica para a variante ".alt" (roxo/rosa da marca * WooCommerce, não da ecogranel) que ganha à regra genérica ".button" já * definida acima. Mesmo tratamento do botão "Adicionar cabaz ao carrinho": * fundo lima, texto ink, para ser o CTA mais chamativo da página. */ .woocommerce #place_order, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .woocommerce a.checkout-button, .wc-proceed-to-checkout a.checkout-button{ background:var(--lime) !important; color:var(--ink) !important; border:none !important; text-decoration:none !important; display:inline-block !important; } .woocommerce #place_order:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.checkout-button:hover, .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--ink) !important; color:var(--lime) !important; } /* * Campo do telemóvel da MB WAY no checkout — com "allow_international" * desligado (ver inc/checkout-simplificado.php), o plugin já não mostra a * escolha de país, só um campo de número a 100% de largura. Falta só a * etiqueta, a condizer com a tipografia do resto do site. */ /* * A etiqueta "O teu número associado à MB WAY" é redundante com a própria * descrição do método logo acima — mas o plugin força "display:block * !important" inline no