/** Shopify CDN: Minification failed Line 777:0 Unexpected "}" **/ /** * pm-theme.css — o que ESTE tema acrescenta ao CSS herdado do site. * * O `pm.css` é o CSS compilado do site próprio e não se edita à mão. * Tudo o que é decisão tomada já dentro do Shopify vive aqui, com o * porquê ao lado. */ /* ═══ SUPERFÍCIE vs ACENTO — 07-09-2026, decisão do dono ══════════════════════ O bege quente (#f7f3eb e primos) era ao mesmo tempo a superfície do site (fundos de secção, de fotografia, de cartão) e o acento das caixas de nota. Sendo os dois, não era nenhum: nada se destacava. A partir de agora: **superfície = cinza frio; bege = só acento.** O bege fica em três sítios, e só nesses — o cartão de PRÉ-RESERVA (que é um gradiente creme com borda âmbar, `.pm-preorder`), o «Teste grátis durante 30 dias» no fim das fichas (`.pm-fecho`) e a caixa de fecho da transição de areia (`.pm-tr__fecho`). O âmbar dos sinais (#e3a13d) nunca foi bege e não se toca. Trocar a superfície outra vez é mudar ESTA linha. */ :root { --pm-superficie: #f6f7f8; } /* ── O ponto verde da linha de entrega ────────────────────────────────── O site usa o `pitch` (#165E2E), um verde-garrafa escuro. A loja publicada usa #2ecc71 num ponto de 8px com uma onda a expandir — e é esse que o dono reconhece como «o verde da PetMaison» nesta linha. Valores tirados do `.pulse-icon` do tema publicado, tal e qual. */ .pm-delivery-dot { display: inline-block; width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background-color: #2ecc71; box-shadow: 0 0 0 0 rgb(46 204 113 / .7); animation: pm-delivery-pulse 1.5s infinite; } @keyframes pm-delivery-pulse { 0% { box-shadow: 0 0 0 0 rgb(46 204 113 / .7); } 70% { box-shadow: 0 0 0 6px rgb(46 204 113 / 0); } 100% { box-shadow: 0 0 0 0 rgb(46 204 113 / 0); } } @media (prefers-reduced-motion: reduce) { .pm-delivery-dot { animation: none; } } /* Na linha do pack (que usa `items-start`, porque a frase parte em duas linhas e com `items-center` o ponto ficava a meio das duas) o ponto tem de descer 5px para ficar no eixo da PRIMEIRA linha. Isto esteve escrito como `mt-[5px]` no markup de 07-09-2026 até à noite do mesmo dia e NÃO FAZIA NADA: o `pm.css` é um build congelado do site e essa classe nunca foi gerada (tem `.mt-[7px]`, não tem esta). Medido: o centro do ponto ficava exatamente 5px acima do centro da linha. */ .pm-delivery-dot--eixo { margin-top: 5px; } /* ── Onde as barras sticky encostam ──────────────────────────────────── A barra de filtros/ordenação da coleção encostava a um valor FIXO (120px) copiado do site. O cabeçalho daqui não tem essa altura — e muda quando a barra de anúncio é fechada. Resultado: a barra ficava a flutuar, com o conteúdo da página a passar por baixo no vão. Agora o `pm.js` mede o cabeçalho e escreve `--pm-header-h`; quem encosta a ele usa esta classe e acompanha-o sempre. */ :root { --pm-header-h: 0px; } .pm-under-header { top: var(--pm-header-h); } /* A barra dos filtros ativos encosta por baixo da anterior. */ .pm-under-header-2 { top: calc(var(--pm-header-h) + var(--pm-toolbar-h, 0px)); } /* ── A arrumação própria do rodapé ───────────────────────────────────── `pm.css` é o build de Tailwind DO SITE: só traz as classes que o site usa. O rodapé aqui tem uma arrumação própria (marca | newsletter em cima, quatro colunas no meio, uma linha a fechar), por isso escreve-se à mão. ⚠️ As regras BASE vêm todas antes das media queries — ao contrário ganhavam à versão de desktop (mesma especificidade, a última vence) e a barra de baixo ficava empilhada num ecrã de 1440px. */ /* base (telemóvel primeiro) */ .pm-footer-top { display: grid; gap: 2.5rem; padding-block: 3rem; } .pm-footer-news { width: 100%; } .pm-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.25rem; } .pm-footer-nav { padding-block: 2.5rem; } .pm-footer-legal { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .5rem; } .pm-footer-bottom { display: flex; flex-direction: column-reverse; gap: 1.5rem; padding-block: 1.75rem; } .pm-footer-bottom-right { display: flex; flex-direction: column; gap: 1rem; } .pm-footer-social a:hover { border-color: rgb(255 255 255 / .4); } @media (min-width: 640px) { .pm-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; } } @media (min-width: 1024px) { .pm-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 5rem; align-items: start; padding-block: 3.5rem; } .pm-footer-news { justify-self: end; max-width: 420px; } .pm-footer-nav { padding-block: 3rem; } .pm-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } .pm-footer-bottom-right { flex-direction: row; align-items: center; gap: 2rem; } .pm-footer-badges { justify-content: flex-end; } } /* ── O cabeçalho tem mesmo de ficar fixo ─────────────────────────────── No site o
é filho direto da coluna da página e o `sticky` funciona. Aqui o Shopify embrulha cada secção num
próprio que se ENCOLHE à altura do conteúdo — e um sticky preso a uma caixa da sua própria altura não tem para onde se mover: o cabeçalho ia-se embora com a página e a barra de filtros da coleção ficava a flutuar no meio do nada, com o catálogo a passar por baixo. O sticky passa para o wrapper, que é quem ocupa o lugar na coluna. */ .shopify-section-pm-header { position: sticky; top: 0; z-index: 50; } .shopify-section-pm-header > header { position: static; } /* ── O selo flutuante do hCaptcha ────────────────────────────────────── A newsletter do rodapé é um formulário protegido pelo Shopify, e o hCaptcha responde com um selo `position:fixed` (217×55, z-index 9999) colado ao canto inferior direito — em TODAS as páginas, por cima do conteúdo. Esconde-se o selo e põe-se o aviso EM TEXTO por baixo do formulário: é a alternativa que os próprios termos do hCaptcha preveem («pode esconder o selo desde que inclua o aviso no formulário»). Não se esconde um aviso legal — muda-se de sítio, para um onde não tape nada e esteja junto ao que protege. */ #shop-hcaptcha-badge-container { display: none !important; } /* ── Os selos de pagamento, iguais em toda a loja ────────────────────── O CSS do site tem uma regra que veste QUALQUER `img` de logótipo dentro do rodapé com uma placa branca de 2px de padding. Faz sentido para o markup do site; para o nosso estraga: as artes de cartão (Visa, Amex, Klarna…) já trazem o seu próprio fundo, por isso encolhiam dentro de uma segunda placa, e o MB WAY — que leva a placa do `` por ser wordmark — ficava com DUAS. Resultado: os selos do rodapé não eram os mesmos que estão debaixo do «Adicionar ao carrinho». Aqui o strip fica isolado dessa regra e desenha-se igual nos dois sítios. */ footer.site-footer .pm-pay img { background: none; padding: 0; border-radius: 0; } /* A placa do MB WAY é a do ``, e essa fica — é o único wordmark. */ footer.site-footer .pm-pay > span { background: #fff; border-radius: 3px; } /* Uma linha só, sem quebrar, onde houver espaço. */ @media (min-width: 640px) { .pm-pay { flex-wrap: nowrap; } } /* o ícone oficial do Shop Pay (38×24) entra no mesmo tamanho dos nossos (40×25) */ .pm-pay__shop svg { width: 100%; height: 100%; display: block; } /* ── Cartão de PRÉ-RESERVA ───────────────────────────────────────────── Copiado do tema publicado ao valor (âmbar #e3a13d / #a96812 sobre um creme quente). O âmbar é deliberadamente diferente do verde: isto NÃO é uma boa notícia, é uma condição a ler ANTES de pagar. Se fosse verde lia-se como confirmação e a pessoa passava por cima. */ /* ── Cartão de pré-reserva ───────────────────────────────────────────── Copiado do tema publicado ao valor, MENOS os cinzentos. Vinha com uma rampa só dele — #252525, #292929, #111, #222, #333, #686868 — e era o único sítio do tema onde uma cor de texto se escrevia à mão em vez de vir do token. Ao olho era igual; no sistema eram seis cinzentos a mais. Passaram todos a `ink` (#2c2d2e), com a nota em `ink/75` (o degrau da casa mais próximo do antigo #686868, e um pouco mais legível: 6,12:1 contra 5,57:1) e o filete em `ink/8`, que é o contorno que o resto do tema já usa. O negrito deixa de ser uma cor mais escura e passa a ser só peso, como em todo o lado. O ÂMBAR fica como está — é a identidade do cartão, não um cinzento solto: #e3a13d (ponto), #a96812 (etiqueta e ícone) e o contorno rgb(224 151 47 / .28). ⚠️ O #a96812 dá 4,49:1 no branco, um centésimo abaixo do mínimo AA; se algum dia se escurecer, escurece aqui E no cartão de produto ao mesmo tempo — dizem a mesma coisa. */ .pm-preorder { width: 100%; box-sizing: border-box; padding: 16px 18px; margin: 14px 0; border: 1px solid rgb(224 151 47 / .28); border-radius: 14px; background: linear-gradient(135deg, rgb(255 249 239 / .98) 0%, rgb(255 252 247 / .98) 100%); color: #2c2d2e; /* ink */ } .pm-preorder__top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .pm-preorder__dot { width: 9px; height: 9px; min-width: 9px; border-radius: 50%; background: #e3a13d; box-shadow: 0 0 0 0 rgb(227 161 61 / .5); animation: pm-preorder-pulse 1.8s infinite; } .pm-preorder__label { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .01em; color: #a96812; } .pm-preorder__title { margin-bottom: 13px; font-size: 15px; line-height: 1.5; font-weight: 400; color: #2c2d2e; } .pm-preorder__title strong { font-weight: 700; color: #2c2d2e; } .pm-preorder__date { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: #2c2d2e; } .pm-preorder__date strong { font-weight: 700; color: #2c2d2e; } .pm-preorder__date + .pm-preorder__date { margin-top: 6px; } .pm-preorder__when { font-weight: 700; } .pm-preorder__note p { margin: 0; } .pm-preorder__note p + p { margin-top: 4px; } .pm-preorder__when strong { font-weight: 700; } /* ⚠️ Sem estas duas linhas o SVG do camião desenha-se ao tamanho natural e fica um carrinho gigante ao lado da data. */ .pm-preorder__icon { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; min-width: 21px; flex: none; color: #a96812; } .pm-preorder__icon svg { width: 21px; height: 21px; display: block; } .pm-preorder__note { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(44 45 46 / .08); /* ink/8 */ font-size: 12px; line-height: 1.5; color: rgb(44 45 46 / .75); /* ink/75 — era #686868 */ } .pm-preorder__note strong { color: #2c2d2e; } @keyframes pm-preorder-pulse { 0% { box-shadow: 0 0 0 0 rgb(227 161 61 / .5); } 70% { box-shadow: 0 0 0 7px rgb(227 161 61 / 0); } 100% { box-shadow: 0 0 0 0 rgb(227 161 61 / 0); } } @media (prefers-reduced-motion: reduce) { .pm-preorder__dot { animation: none; } } @media screen and (max-width: 749px) { .pm-preorder { padding: 14px 15px; border-radius: 12px; } } /* ── Vídeos das landing: nunca gigantes ──────────────────────────────── A banda de vídeo do site foi desenhada para clipes 1280×720 e usa `w-full h-auto` — a 1024px de largura isso dá 576px de altura, que é o que se quer. Mas alguns clipes destas fichas são VERTICAIS, e aí a mesma regra dá quase 1800px de altura: uma parede de vídeo que come a página inteira. Com largura e altura automáticas mais dois tetos, o browser respeita os dois e mantém a proporção: o horizontal continua a encher a largura, o vertical passa a caber no ecrã. */ .pm-video-band video { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; max-height: 78vh; } /* ── Texto longo (.prose) na tinta da casa ───────────────────────────── O `.prose` do Tailwind traz a paleta DELE: corpo em #374151, títulos e negritos em #111827, e o modificador `prose-slate` troca-os por lousa (#334155). Medido a 31-08 nas páginas e nos artigos: nenhuma dessas cores é a tinta da marca, e eram 400+ elementos a render num cinzento que não existe no sistema. Aqui só se reapontam as variáveis — o `.prose` continua a fazer todo o resto (ritmo, listas, tabelas). O corpo vai em `ink/75` e não em `ink` cheio: texto longo lê-se melhor um pouco recuado, e 6,12:1 fica com folga sobre o mínimo. */ .prose, .prose-slate { --tw-prose-body: rgb(44 45 46 / .75); --tw-prose-headings: #2c2d2e; --tw-prose-lead: rgb(44 45 46 / .70); --tw-prose-links: #2c2d2e; --tw-prose-bold: #2c2d2e; --tw-prose-counters: rgb(44 45 46 / .55); --tw-prose-bullets: rgb(44 45 46 / .30); --tw-prose-hr: rgb(44 45 46 / .10); --tw-prose-quotes: #2c2d2e; --tw-prose-quote-borders: rgb(44 45 46 / .12); --tw-prose-captions: rgb(44 45 46 / .55); --tw-prose-kbd: #2c2d2e; --tw-prose-code: #2c2d2e; --tw-prose-pre-code: #ffffff; --tw-prose-pre-bg: #2c2d2e; --tw-prose-th-borders: rgb(44 45 46 / .15); --tw-prose-td-borders: rgb(44 45 46 / .10); } /* ── Etiqueta de estado no cartão de produto ─────────────────────────── ⚠️ ESCRITA AQUI DE PROPÓSITO, e a lição vale para o tema todo: o `pm.css` é o BUILD COMPILADO do site — só lá estão as classes que o site chegou a usar. Escrever uma classe Tailwind que ele não gerou não dá erro nenhum: não faz nada. Foi o que aconteceu a esta etiqueta na primeira tentativa — `z-[3]`, `left-2` e `ring-ink/8` não existem no build (existem `z-[1]` e `z-[2]`, que as fotografias usam), por isso ela ficava sem z-index e sem posição e desaparecia por baixo da foto. Estava no DOM, lia-se no innerText, e não se via. Regra: o que for novo e não existir no build escreve-se aqui em CSS normal, não se «adivinha» uma classe. */ .pm-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 16px; background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgb(44 45 46 / .08), 0 1px 2px rgb(44 45 46 / .06); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; } .pm-badge__dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; } .pm-badge--esgotado .pm-badge__dot { background: #dc2626; } .pm-badge--esgotado .pm-badge__txt { color: #b91c1c; } .pm-badge--preorder .pm-badge__dot { background: #e3a13d; } .pm-badge--preorder .pm-badge__txt { color: #a96812; } /* A etiqueta leva a data («Pré-reserva · a partir de 5 out», 03-09-2026): deixa de ser uma palavra só, por isso pode dobrar de linha num cartão estreito em vez de sair pela fotografia fora. */ .pm-badge--preorder { white-space: normal; max-width: calc(100% - 16px); line-height: 1.2; } .pm-badge__sep { margin: 0 4px; color: rgb(44 45 46 / .35); } .pm-badge__data { font-weight: 600; color: #2c2d2e; } /* No telemóvel a data vai para a linha de baixo, inteira («a partir de 5 out»), em vez de partir a meio da frase (medido: «a partir de / 5 out»). */ @media screen and (max-width: 749px) { .pm-badge { top: 6px; left: 6px; font-size: 10px; padding: 3px 7px; } .pm-badge--preorder { max-width: calc(100% - 12px); align-items: flex-start; } .pm-badge--preorder .pm-badge__dot { margin-top: 3px; } .pm-badge__sep { display: none; } .pm-badge__data { display: block; margin-top: 2px; } } /* Co-compra («Adicione à sua encomenda»): a mesma etiqueta, em linha. */ .pm-addon-pr { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 11px; font-weight: 700; line-height: 1; color: #a96812; vertical-align: middle; } .pm-addon-pr .pm-badge__dot { background: #e3a13d; } /* ── «Menos limpeza. Menos odores.» (04-09-2026): duas colunas que se leem como duas histórias — «Antes» apagada, «Depois» num painel teal suave, cada uma a começar na sua fotografia (etiqueta em cima) e a continuar nos quatro pares; as 40 horas por ano como número grande no fim. */ /* ⚠️ À ESQUERDA também no telemóvel — 05-09-2026. Era `center` e ficava a única secção de benefício centrada no meio de vizinhas alinhadas à esquerda («Em uso» acima, «Estável a cada utilização» abaixo): é metade do «parece que estão todas à toa» que o dono viu no Pillar. Vale para as 7 fichas que usam o antes/depois — na Box tinha o mesmo desencontro. */ .pm-ba__head { text-align: left; max-width: 40rem; margin: 0; } .pm-ba__sub { margin: .75rem 0 0; font-size: 15px; line-height: 1.45; color: rgb(44 45 46 / .65); } /* ⚠️ Linhas EXPLÍCITAS (1 de fotografias + 4 pares): sem elas o `grid-row: 1 / -1` do painel valia só uma linha, e o painel, ao ocupar a coluna 2 da 1.ª linha, empurrava a fotografia «Depois» para a linha de baixo (medido: 1.769 px). */ .pm-ba__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--pm-ba-linhas, 5), auto); column-gap: .75rem; max-width: 56rem; margin: 2rem auto 0; } .pm-ba__foto--antes { grid-area: 1 / 1 / 2 / 2; } .pm-ba__foto--depois { grid-area: 1 / 2 / 2 / 3; } .pm-ba__cell--antes { grid-column: 1; } .pm-ba__cell--depois { grid-column: 2; } @media (min-width: 640px) { .pm-ba__grid { column-gap: 1.5rem; margin-top: 2.75rem; } } .pm-ba__panel { grid-column: 2; grid-row: 1 / -1; margin: -.625rem -.625rem -.625rem -.625rem; border-radius: 1.25rem; background: rgb(84 184 178 / .09); z-index: 0; } @media (min-width: 640px) { .pm-ba__panel { margin: -1rem; border-radius: 1.5rem; } } .pm-ba__foto { position: relative; z-index: 1; margin: 0; aspect-ratio: var(--pm-ba-ar, 4 / 5); border-radius: var(--pm-raio-media, 1rem); overflow: hidden; background: #f4f4f4; box-shadow: 0 0 0 1px rgb(44 45 46 / .05); } .pm-ba__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-ba__foto--antes img { filter: saturate(.85); } .pm-ba__chip { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: rgb(44 45 46 / .6); backdrop-filter: blur(6px); } .pm-ba__chip--depois { background: #2c2d2e; color: #fff; } .pm-ba__cell { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: .5rem; padding: .875rem 0; border-top: 1px solid rgb(44 45 46 / .08); font-size: 13.5px; line-height: 1.4; } /* (o `nth-of-type` contava o painel, que também é um div, e só uma das duas primeiras células subia) */ .pm-ba__cell--1 { margin-top: 1rem; } .pm-ba__cell svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; } .pm-ba__cell--antes { color: rgb(44 45 46 / .55); } .pm-ba__cell--antes svg { color: rgb(44 45 46 / .3); } .pm-ba__cell--depois { color: #2c2d2e; font-weight: 600; border-top-color: rgb(84 184 178 / .35); } .pm-ba__cell--depois svg { color: #2e8c85; } @media (min-width: 640px) { .pm-ba__cell { font-size: 15px; padding: 1rem 0; } } /* a conta: «7 min por dia → +40 h por ano», dois números e uma seta, sem frase */ .pm-ba__stat { max-width: 56rem; margin: 2.25rem auto 0; display: flex; align-items: center; justify-content: center; gap: .75rem 1.25rem; padding: 1.25rem 1.25rem; border-radius: 1.25rem; background: #2c2d2e; color: #fff; } .pm-ba__s { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 0; } .pm-ba__s b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-ba__s span { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.6); } .pm-ba__s--ano b { color: #54b8b2; } .pm-ba__s--ano span { color: rgba(255,255,255,.85); } .pm-ba__seta { flex: 0 0 auto; width: 22px; height: 22px; color: rgba(255,255,255,.4); } @media (min-width: 640px) { .pm-ba__stat { padding: 1.5rem 2rem; margin-top: 3rem; gap: 1rem 2rem; } .pm-ba__s b { font-size: 38px; } .pm-ba__s span { font-size: 14px; } .pm-ba__seta { width: 26px; height: 26px; } } /* Computador: cabe num ecrã (dono, 04-09: «tenho de dar scroll para ver tudo»). O título fica à esquerda e a faixa das 40 horas à direita, na mesma linha; as fotografias passam a 4:3 (a Box e o tabuleiro estão ao centro, nada se perde) e a grelha estica até 64 rem. Medido a 1440×900: a secção inteira cabe. */ @media (min-width: 1024px) { .pm-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head stat" "grid grid"; column-gap: 2.5rem; align-items: end; max-width: 64rem; margin-inline: auto; } .pm-ba__head { grid-area: head; text-align: left; max-width: 34rem; margin: 0; } .pm-ba__stat { grid-area: stat; margin: 0; max-width: 30rem; padding: 1.125rem 1.5rem; } .pm-ba__s b { font-size: 34px; } .pm-ba__s span { font-size: 13px; } .pm-ba__s { flex: 0 0 auto; } /* ⚠️ `margin-inline: 0` — 05-09-2026. A regra base tem `margin: 2rem auto 0` e o `auto` sobrevivia aqui: título em x=72, grelha em x=284, 212 px de desencontro. Acontecia na Box e no Pillar; na Box passava por entre os pingos porque tem 12 secções, no Pillar (3) o dono viu logo. */ .pm-ba__grid { grid-area: grid; max-width: none; margin: 2rem 0 0; column-gap: 2rem; } .pm-ba__foto { aspect-ratio: var(--pm-ba-ar, 4 / 3); } .pm-ba__cell { padding: .8rem 0; font-size: 14.5px; } } /* ── «Esqueça a pá, para sempre» + «Como funciona?» numa secção (04-09-2026) ── As quatro fotografias dos passos à vista, numa grelha limpa (2 no telemóvel, 4 no computador), número e passo por baixo de cada uma; o vídeo completo do fabricante num botão do cabeçalho, no player partilhado. Sem rotação: o dono preferiu ver as quatro de uma vez. */ .pm-loop__head { max-width: 40rem; } .pm-loop__sub { margin: .75rem 0 0; font-size: 15px; line-height: 1.45; color: rgb(44 45 46 / .65); } .pm-loop__acoes { margin-top: 1.25rem; } .pm-loop__full { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1rem 0 .75rem; border-radius: 999px; background: #fff; color: #2c2d2e; font-size: 13px; font-weight: 600; letter-spacing: -.01em; border: 1px solid rgb(44 45 46 / .14); cursor: pointer; transition: border-color .15s, transform .15s; } .pm-loop__full:hover { border-color: #2c2d2e; transform: translateY(-1px); } .pm-loop__full svg { width: 14px; height: 14px; } .pm-loop__grid4 { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; } @media (min-width: 1024px) { .pm-loop__grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; margin-top: 2.5rem; } } .pm-loop__foto { aspect-ratio: 4 / 5; border-radius: var(--pm-raio-media, 1rem); overflow: hidden; background: var(--pm-superficie); box-shadow: 0 0 0 1px rgb(44 45 46 / .05); } .pm-loop__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .pm-loop__item:hover .pm-loop__foto img { transform: scale(1.03); } .pm-loop__leg { display: flex; align-items: flex-start; gap: .625rem; margin-top: .75rem; padding: 0 .125rem; } .pm-loop__n { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.6; color: #2e8c85; font-variant-numeric: tabular-nums; } .pm-loop__t { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: #2c2d2e; } @media (min-width: 1024px) { .pm-loop__t { font-size: 14.5px; } } /* ── A banda «Na televisão», high tier (04-09-2026) ─────────────────────── Charcoal (o dono gosta), texto à esquerda e o vídeo à direita no computador; no telemóvel o vídeo entra PRIMEIRO. Atrás do vídeo um brilho teal difuso; no cartaz o selo tipográfico «SIC · Casa Feliz» e a duração; o texto é a citação DELA, não uma descrição nossa. */ .pm-press { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } .pm-press__media { position: relative; order: 0; } .pm-press__text { order: 1; max-width: 34rem; } @media (min-width: 1024px) { .pm-press { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } .pm-press__text { order: 0; } .pm-press__media { order: 1; } } .pm-press__glow { position: absolute; inset: -12% -8%; background: radial-gradient(ellipse at 60% 50%, rgb(84 184 178 / .30), rgb(84 184 178 / 0) 62%); filter: blur(28px); pointer-events: none; } .pm-press__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--pm-raio-media, 1rem); overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); } .pm-press__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .6s ease; } .pm-press__frame:hover .pm-press__poster { transform: scale(1.05); } .pm-press__selo { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 999px; z-index: 2; } /* 05-09-2026: a pílula tinha fundo próprio mas a 50 % de preto — sobre um fotograma claro dava 2,73:1 (mínimo 4,5). Subiu para 66 %: continua a ler-se como pílula de vídeo e passa a ser legível. */ .pm-press__dur { position: absolute; bottom: 12px; right: 12px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.66); backdrop-filter: blur(8px); padding: 5px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; z-index: 2; } .pm-press__play { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); border: 0; cursor: pointer; z-index: 1; transition: background .2s; } .pm-press__play:hover { background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 45%); } .pm-press__play-btn { width: 68px; height: 68px; border-radius: 999px; background: rgba(255,255,255,.96); color: #2c2d2e; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px rgba(0,0,0,.35); transition: transform .2s; } .pm-press__play-btn svg { margin-left: 3px; } .pm-press__play:hover .pm-press__play-btn { transform: scale(1.06); } @media (min-width: 640px) { .pm-press__play-btn { width: 78px; height: 78px; } } .pm-press__quote { margin: 1.25rem 0 0; padding: 0; border: 0; font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.92); } @media (min-width: 640px) { .pm-press__quote { font-size: 22px; } } .pm-press__autor { margin: .75rem 0 0; font-size: 13px; color: rgba(255,255,255,.5); } .pm-press__acoes { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; } .pm-press__btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.25rem; border-radius: .875rem; background: #fff; color: #2c2d2e; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .pm-press__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.3); } .pm-press__btn-dur { font-weight: 500; color: rgba(44,45,46,.55); font-variant-numeric: tabular-nums; } .pm-press__link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.2); } .pm-press__link:hover { color: #fff; } /* o player em 16:9 (banda «Na televisão») */ .pm-player__selo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 999px; } /* ⚠️ O PALCO TOMA A FORMA DO VÍDEO — 05-09-2026. `--pm-vid-ar` e `--pm-vid-arn` são escritas pelo `pm.js` no `loadedmetadata` de cada vídeo; o 16/9 aqui é só o valor de recurso enquanto os metadados não chegam. A largura é o MENOR de três limites — o ecrã, e o que a altura disponível permite ao rácio — para que um vídeo alto não empurre o rodapé para fora e um largo não fique com barras. Antes era 16/9 fixo: o quadrado do Pillar (720×720) ficava com 219 px de altura num telemóvel de 390 px de largura. */ /* ⚠️ O RODAPÉ NUNCA POR CIMA DO VÍDEO — 05-09-2026. A legenda e o cartão do produto tinham `bottom: 0` com um degradê e comiam o fim da imagem: no Pillar, a base do arranhador. Escondê-lo enquanto toca perdia o cartão, que é o que converte. Passa a ter FAIXA PRÓPRIA, em baixo, e é o vídeo que encolhe — a largura do palco é o menor de três limites, e a altura que sobra para o vídeo já desconta `--pm-foot-h`, medida pelo `pm.js` a cada vídeo porque uma legenda de três linhas não ocupa o mesmo que uma de uma. */ .pm-player--wide .pm-player__stage { display: flex; flex-direction: column; justify-content: center; background: #000; width: min(100%, calc((100dvh - 24px - var(--pm-foot-h, 92px)) * var(--pm-vid-arn, 1.7778))); height: auto; max-height: calc(100dvh - 24px); border-radius: 1rem; overflow: hidden; } .pm-player--wide .pm-player__video { width: 100%; height: auto; aspect-ratio: var(--pm-vid-ar, 16 / 9); object-fit: contain; background: #000; flex: 0 0 auto; } .pm-player--wide .pm-player__foot { position: static; background: #000; flex: 0 0 auto; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); } .pm-player--wide .pm-player__top { top: max(12px, env(safe-area-inset-top)); } .pm-player--wide .pm-player__segs { display: none; } @media (min-width: 640px) { .pm-player--wide .pm-player__stage { width: min(1040px, calc(100vw - 140px), calc((100vh - 48px - var(--pm-foot-h, 92px)) * var(--pm-vid-arn, 1.7778))); height: auto; max-height: calc(100vh - 48px); border-radius: 1.25rem; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .pm-player--wide .pm-player__video { border-radius: 0; } .pm-player--wide .pm-player__foot { position: static; background: #000; padding: 14px 18px 16px; } .pm-player--wide .pm-player__nav { display: none; } .pm-player--wide .pm-player__top { left: 16px; right: 16px; } } /* ── A parede «em ação», high tier (04-09-2026) ─────────────────────────── Cabeçalho com subtítulo e linha de prova; cartão com degradê em baixo, a NOSSA legenda na mesma tipografia em todos, barra fina de progresso, dica «toque para ouvir» só no cartão activo do telemóvel; pontos de posição; e o player em ecrã inteiro (som, deslizar, segmentos como nas stories, cartão do produto com «Adicionar»). Geometria à mão: o pm.css é um build. */ .pm-ugc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .pm-ugc-sub { margin: .75rem 0 0; font-size: 15px; line-height: 1.45; color: rgb(44 45 46 / .65); max-width: 34rem; } .pm-ugc-card { cursor: pointer; } /* ⚠️ Parede com UM ou DOIS clipes — 05-09-2026. No computador, um cartão a 23 % da faixa deixava 78 % de branco e as setas não tinham para onde ir: lia-se como um carrossel avariado, não como uma decisão. Com poucos, deixa de ser carril — o cabeçalho vai para o lado e o cartão cresce até caber uma coluna inteira. No telemóvel não se toca: lá o cartão ocupa 72 % da largura e o carril faz sentido (o dono: «no mobile fica normal»). */ @media (min-width: 1024px) { /* ⚠️ COM UM CLIPE, BLOCO CENTRADO — 05-09-2026, 2.ª volta. Primeiro pus o cabeçalho de um lado e o cartão do outro: os 78 % de branco passaram a 0 % na medição, mas o dono voltou — «tem de ficar muito melhor, não pode aparecer despido». Tinha razão e a medição é que estava a mentir: uma coluna com um título e duas linhas ao lado de um vídeo de 640 px continua a ser meia secção vazia, só que o vazio mudou de sítio. Uma peça ÚNICA não se põe a um canto — põe-se ao centro. Simétrico lê-se como decisão; assimétrico lê-se como avaria. Com DOIS clipes o carril ainda funciona e fica como estava. */ .pm-ugc-poucos[data-um] > .section-y { text-align: center; } .pm-ugc-poucos[data-um] .pm-ugc-head { display: block; } .pm-ugc-poucos[data-um] .pm-ugc-head > .max-w-2xl { max-width: 40rem; margin-inline: auto; } .pm-ugc-poucos[data-um] .pm-ugc-sub { margin-inline: auto; } /* ⚠️ `margin-top` MANTÉM-SE — o `margin: 0` que aqui estava matava o `mt-8` do carril e a parede do Feeder ficava com o vídeo colado à frase (0 px, contra 32 px na Box e no Duo). O dono viu: «cuidado com o espaço disto, deve ficar igual às outras que falam das criadoras». */ .pm-ugc-poucos[data-um] [data-pm-ugc] { justify-content: center; margin: 2rem 0 0; padding: 0; overflow: visible; } .pm-ugc-poucos[data-um] [data-pm-ugc][data-n="1"] .pm-ugc-card { width: 400px; } .pm-ugc-poucos:not([data-um]) > .section-y { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4.5rem; align-items: center; } .pm-ugc-poucos:not([data-um]) [data-pm-ugc] { margin: 2rem 0 0; padding: 0; overflow: visible; } .pm-ugc-poucos:not([data-um]) [data-pm-ugc][data-n="2"] .pm-ugc-card { width: 300px; } .pm-ugc-poucos:not([data-um]) .pm-ugc-sub { max-width: 30rem; } } .pm-ugc-card:focus-visible { outline: 2px solid #2c2d2e; outline-offset: 2px; } .pm-ugc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 12px 14px; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0)); pointer-events: none; } .pm-ugc-cap { margin: 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.35); } .pm-ugc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.22); pointer-events: none; } .pm-ugc-bar i { display: block; height: 100%; width: 0; background: #fff; } /* a dica fica por baixo do botão de som, longe da legenda (tapava-a) */ .pm-ugc-hint { position: absolute; right: 10px; top: 52px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; } .pm-ugc-card.is-active .pm-ugc-hint { opacity: 1; } @media (hover: hover) and (pointer: fine) { .pm-ugc-hint { display: none; } } .pm-ugc-dots { display: flex; justify-content: center; gap: 6px; margin-top: .875rem; } .pm-ugc-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(44 45 46 / .18); transition: background .2s, width .2s; } .pm-ugc-dots i.is-on { background: #2c2d2e; width: 18px; } @media (min-width: 640px) { .pm-ugc-dots { display: none; } } /* o player */ .pm-player { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; } .pm-player[hidden] { display: none; } .pm-player__bg { position: absolute; inset: 0; background: rgba(10,10,11,.94); backdrop-filter: blur(14px); } .pm-player__stage { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; } .pm-player__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000 center / cover no-repeat; } /* anel discreto enquanto o 720p carrega; o cartaz (atributo poster) fica por baixo */ .pm-player__stage::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; opacity: 0; transition: opacity .2s; z-index: 5; pointer-events: none; } .pm-player.is-loading .pm-player__stage::after { opacity: 1; animation: pm-gira .8s linear infinite; } @keyframes pm-gira { to { transform: rotate(360deg); } } .pm-player__segs { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; } .pm-player__segs i { flex: 1 1 0; height: 3px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; } .pm-player__segs i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; } .pm-player__top { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; z-index: 3; color: #fff; } .pm-player__who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.45); min-width: 0; } .pm-player__who img { width: 32px; height: 32px; border-radius: 999px; border: 2px solid #fff; object-fit: cover; } .pm-player__who svg { width: 15px; height: 15px; } .pm-player__close { width: 38px; height: 38px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; flex: 0 0 auto; } .pm-player__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background .15s; } .pm-player__nav:hover { background: rgba(255,255,255,.28); } .pm-player__nav:disabled { opacity: .25; cursor: default; } .pm-player__nav--prev { left: -60px; } .pm-player__nav--next { right: -60px; } .pm-player__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem 14px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); z-index: 3; color: #fff; } .pm-player__cap { margin: 0 0 .75rem; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } .pm-player__cap:empty { display: none; } .pm-player__prod { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); color: #2c2d2e; border-radius: .875rem; padding: 8px; } .pm-player__prod img { width: 44px; height: 44px; border-radius: .625rem; object-fit: cover; flex: 0 0 auto; } .pm-player__pn { font-size: 13.5px; font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-player__pp { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .pm-player__add { height: 36px; padding: 0 14px; border-radius: .625rem; background: #2c2d2e; color: #fff; font-size: 12.5px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .pm-player__add[aria-busy="true"] { opacity: .6; } /* bloqueio de scroll a sério (o `overflow: hidden` no body não chega no iOS): o body fica fixo na posição em que estava e o pm.js repõe-a ao fechar */ body.pm-player-open, /* o mesmo bloqueio para o menu, o carrinho, a pesquisa e o popup (07-09-2026): `overflow: hidden` sozinho deixava a pagina por baixo rolar — medido. */ body.pm-scroll-lock { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; } .pm-player { touch-action: none; -webkit-user-select: none; user-select: none; } @media (min-width: 640px) { .pm-player__stage { width: min(440px, calc((100vh - 48px) * 9 / 16)); height: min(100vh - 48px, 800px); border-radius: 1.25rem; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: visible; } .pm-player__stage > *:not(.pm-player__nav) { border-radius: inherit; } .pm-player__video { border-radius: 1.25rem; } .pm-player__nav { display: flex; } } /* Selo Trustpilot por baixo do nome do produto (igual ao do carrinho, 04-09-2026). O logótipo oficial tem 157×18; a 390 px, com o texto, dava 372 numa coluna de 350 — no telemóvel encolhe para 132×15 e cabe numa linha em todas as línguas. */ .pm-rating__logo svg { display: block; width: 157px; height: 18px; } @media screen and (max-width: 639px) { .pm-rating__logo svg { width: 124px; height: 14px; } .pm-rating { font-size: 12px; } } /* ── Os três selos por baixo do botão (04-09-2026, dono: «badges lado a lado, o mais clean possível») ───────────────────────────────────────────────── Eram três linhas de texto com ícone à esquerda; passam a três colunas com filete entre elas, ícone em cima e duas linhas curtas — o que é e o qualificador. A 390 px cada selo tem 116 px: os textos das 8 línguas (`pdp.selo_*`) foram medidos para caber numa linha; se um dia um não couber, dobra sem sair da coluna (sem `nowrap` de propósito). */ /* sem linha por cima nem por baixo (dono, 04-09: «tira só a linha de cima e de baixo, ficou top»): só os filetes entre colunas */ .pm-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.375rem; } .pm-promos__it { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1875rem; padding: 0 .125rem; border-left: 1px solid rgb(44 45 46 / .08); min-width: 0; } .pm-promos__it:first-child { border-left: 0; } .pm-promos__ic { width: 1.125rem; height: 1.125rem; color: rgb(44 45 46 / .45); margin-bottom: .125rem; } .pm-promos__t { font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #2c2d2e; } .pm-promos__d { font-size: 11px; line-height: 1.2; color: rgb(44 45 46 / .6); } /* a 360 px (Android pequeno) cada selo tem 107 px e «Devoluções grátis» dobrava: meio ponto a menos chega */ @media screen and (max-width: 374px) { .pm-promos__t { font-size: 11px; letter-spacing: -.02em; } .pm-promos__d { font-size: 10.5px; } } @media screen and (min-width: 640px) { .pm-promos { margin-top: 1.5rem; } .pm-promos__ic { width: 1.25rem; height: 1.25rem; } .pm-promos__t { font-size: 12.5px; } .pm-promos__d { font-size: 12px; } } /* ── Packs na caixa de compra («Escolha a sua configuração», 04-09-2026) ── Lista curta de opções com rádio desenhado à mão: «Só este artigo» e os 3 packs mais escolhidos que levam o artigo. A opção escolhida ganha a moldura escura; o resto é filete. Geometria à mão (o pm.css é um build). */ .pm-picker { margin-top: 1.25rem; } .pm-picker__title { font-size: 14px; font-weight: 600; color: #2c2d2e; margin: 0 0 .5rem; } .pm-picker__list { display: flex; flex-direction: column; gap: .5rem; } .pm-pick { position: relative; display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border: 1px solid rgb(44 45 46 / .12); border-radius: .875rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .pm-pick:hover { border-color: rgb(44 45 46 / .35); } .pm-pick.is-on { border-color: #2c2d2e; box-shadow: 0 0 0 1px #2c2d2e; } .pm-pick input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pm-pick__dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgb(44 45 46 / .3); position: relative; transition: border-color .15s; } .pm-pick.is-on .pm-pick__dot { border-color: #2c2d2e; } .pm-pick.is-on .pm-pick__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #2c2d2e; } .pm-pick__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .125rem; } .pm-pick__name { font-size: 13.5px; font-weight: 600; color: #2c2d2e; line-height: 1.25; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pm-pick__tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1f6f6a; background: rgb(84 184 178 / .14); padding: 2px 7px; border-radius: 999px; line-height: 1.3; } .pm-pick__sub { font-size: 12px; color: rgb(44 45 46 / .6); line-height: 1.3; } .pm-pick__txt .pm-addon-pr { margin-left: 0; margin-top: 3px; } .pm-pick__price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; } .pm-pick__now { font-size: 14px; font-weight: 700; color: #2c2d2e; font-variant-numeric: tabular-nums; } .pm-pick__save { font-size: 11px; font-weight: 600; color: #1f6f6a; white-space: nowrap; } .pm-picker__all { display: inline-block; margin-top: .5rem; font-size: 12.5px; font-weight: 600; color: rgb(44 45 46 / .65); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(44 45 46 / .2); } .pm-picker__all:hover { color: #2c2d2e; text-decoration-color: #2c2d2e; } /* ── Secção «Packs Care» (04-09-2026) ───────────────────────────────────── Cartão = fotografia do pack, nome, «Inclui» com miniaturas dos artigos, preço com «em separado» riscado e a poupança, pré-reserva quando há, e o botão que adiciona ao carrinho. Telemóvel: carril com snap, sangrado até à borda como os outros carris; computador: grelha de 3. */ .pm-packs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .pm-packs__pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .375rem; margin: .625rem 0 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: #a96812; } .pm-packs__pr .pm-badge__dot { background: #e3a13d; align-self: center; } .pm-packs__pr-lbl { font-weight: 700; } .pm-packs__pr-it { font-weight: 600; white-space: nowrap; } .pm-packs__pr-data { font-weight: 700; } .pm-packs__pr-sep { color: rgb(169 104 18 / .5); } .pm-packs__grid { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-left: 1.25rem; padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pm-packs__grid::-webkit-scrollbar { display: none; } .pm-packs__card { flex: 0 0 78vw; max-width: 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid rgb(44 45 46 / .08); border-radius: 1rem; overflow: hidden; } .pm-packs__card.is-popular { border-color: rgb(84 184 178 / .6); box-shadow: 0 0 0 1px rgb(84 184 178 / .6); } /* Fotografias UNIFORMES, sem bandas (dono, 04-09: «sem margens, uniformes»): caixa quadrada a preencher. As fotos 1:1 ficam inteiras; as 4:5 perdem o topo (cortina e parede — verificado recorte a recorte), nunca os aparelhos nem o gato, porque a âncora está em baixo. */ .pm-packs__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; } .pm-packs__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 88%; display: block; } .pm-packs__flag { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #2c2d2e; padding: 4px 9px; border-radius: 999px; } .pm-packs__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1rem 1rem 1.125rem; } .pm-packs__name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #2c2d2e; line-height: 1.2; } .pm-packs__name a { color: inherit; text-decoration: none; } .pm-packs__inclui { margin: .75rem 0 .375rem; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(44 45 46 / .45); } .pm-packs__comps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; } .pm-packs__comp { display: flex; align-items: center; gap: .5rem; font-size: 13px; color: #2c2d2e; } .pm-packs__thumb { flex: 0 0 auto; width: 32px; height: 32px; border-radius: .5rem; overflow: hidden; } .pm-packs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-packs__price { margin-top: .875rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .pm-packs__now { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #2c2d2e; font-variant-numeric: tabular-nums; line-height: 1; } .pm-packs__sep { font-size: 12.5px; color: rgb(44 45 46 / .55); text-decoration: line-through; font-variant-numeric: tabular-nums; } .pm-packs__save { font-size: 12px; font-weight: 700; color: #1f6f6a; background: rgb(84 184 178 / .14); padding: 3px 8px; border-radius: 999px; } .pm-packs__body .pm-addon-pr { margin: .5rem 0 0; } .pm-packs__cta { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: .75rem; } .pm-packs__add { flex: 1 1 auto; height: 2.75rem; border-radius: .875rem; background: #2c2d2e; color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; border: 0; cursor: pointer; transition: background-color .15s; } .pm-packs__add:hover { background: #1b1c1d; } .pm-packs__add[aria-busy="true"] { opacity: .6; pointer-events: none; } .pm-packs__more { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: rgb(44 45 46 / .65); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(44 45 46 / .2); } .pm-packs__more:hover { color: #2c2d2e; } /* Um pack só (o Duo tem apenas o Complete Care): no telemóvel o cartão ocupa a largura toda; no computador vira um cartão largo, fotografia à esquerda e o resto à direita — em vez de um cartão perdido num terço da grelha. Dois packs ficam a duas colunas, centrados. (dono, 04-09-2026: «no desktop fica despido») */ @media screen and (max-width: 767.98px) { .pm-packs__grid[data-n="1"] .pm-packs__card { flex-basis: 100%; max-width: none; } } @media screen and (min-width: 768px) { .pm-packs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; overflow: visible; margin-inline: 0; padding: 0; } .pm-packs__grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } .pm-packs__grid[data-n="1"] { grid-template-columns: 1fr; } .pm-packs__grid[data-n="1"] .pm-packs__card { display: grid; grid-template-columns: minmax(0, 44%) 1fr; align-items: stretch; } .pm-packs__grid[data-n="1"] .pm-packs__img { aspect-ratio: 4 / 3; height: 100%; } .pm-packs__grid[data-n="1"] .pm-packs__img img { object-position: center 88%; } .pm-packs__grid[data-n="1"] .pm-packs__body { padding: 2rem 2.25rem 2.25rem; justify-content: center; } .pm-packs__grid[data-n="1"] .pm-packs__name { font-size: 24px; } .pm-packs__grid[data-n="1"] .pm-packs__comps { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; } .pm-packs__grid[data-n="1"] .pm-packs__price { margin-top: 1.25rem; } .pm-packs__grid[data-n="1"] .pm-packs__now { font-size: 30px; } .pm-packs__grid[data-n="1"] .pm-packs__cta { margin-top: 1.5rem; } .pm-packs__grid[data-n="1"] .pm-packs__add { flex: 0 0 auto; padding: 0 1.75rem; } .pm-packs__card { flex: none; max-width: none; } .pm-packs__body { padding: 1.25rem 1.25rem 1.375rem; } .pm-packs__name { font-size: 19px; } .pm-packs__now { font-size: 28px; } } /* Computador largo: os packs LADO A LADO (dono, 04-09: «aparecer os 5 lado a lado»). A grelha tem tantas colunas quantos os cartões — 4 ou 5 a partir de 1280 px (cartões de 230–290 px), 6 a partir de 1440 (213 px) — e o cartão fica compacto: botão a toda a largura, «Ver o pack» por baixo, um ponto a menos no texto. Abaixo disso ficam 3 colunas em duas filas. */ @media screen and (min-width: 1280px) { .pm-packs__grid[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .pm-packs__grid[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .pm-packs__grid[data-n="4"] .pm-packs__body, .pm-packs__grid[data-n="5"] .pm-packs__body { padding: .875rem .875rem 1rem; } .pm-packs__grid[data-n="4"] .pm-packs__name, .pm-packs__grid[data-n="5"] .pm-packs__name { font-size: 16px; } .pm-packs__grid[data-n="4"] .pm-packs__comp, .pm-packs__grid[data-n="5"] .pm-packs__comp { font-size: 12.5px; } .pm-packs__grid[data-n="4"] .pm-packs__thumb, .pm-packs__grid[data-n="5"] .pm-packs__thumb { width: 28px; height: 28px; } .pm-packs__grid[data-n="4"] .pm-packs__now, .pm-packs__grid[data-n="5"] .pm-packs__now { font-size: 22px; } .pm-packs__grid[data-n="4"] .pm-packs__sep, .pm-packs__grid[data-n="5"] .pm-packs__sep { font-size: 12px; } .pm-packs__grid[data-n="4"] .pm-packs__cta, .pm-packs__grid[data-n="5"] .pm-packs__cta { flex-direction: column; align-items: stretch; gap: .5rem; } .pm-packs__grid[data-n="4"] .pm-packs__add, .pm-packs__grid[data-n="5"] .pm-packs__add { height: 2.5rem; font-size: 13px; } .pm-packs__grid[data-n="4"] .pm-packs__more, .pm-packs__grid[data-n="5"] .pm-packs__more { text-align: center; } } @media screen and (min-width: 1440px) { .pm-packs__grid[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } .pm-packs__grid[data-n="6"] .pm-packs__body { padding: .875rem .875rem 1rem; } .pm-packs__grid[data-n="6"] .pm-packs__name { font-size: 16px; } .pm-packs__grid[data-n="6"] .pm-packs__comp { font-size: 12.5px; } .pm-packs__grid[data-n="6"] .pm-packs__thumb { width: 28px; height: 28px; } .pm-packs__grid[data-n="6"] .pm-packs__now { font-size: 22px; } .pm-packs__grid[data-n="6"] .pm-packs__sep { font-size: 12px; } .pm-packs__grid[data-n="6"] .pm-packs__cta { flex-direction: column; align-items: stretch; gap: .5rem; } .pm-packs__grid[data-n="6"] .pm-packs__add { height: 2.5rem; font-size: 13px; } .pm-packs__grid[data-n="6"] .pm-packs__more { text-align: center; } } /* ── «Adicione à sua encomenda» (co-compra na caixa de compra, 04-09-2026) ── Eram três cartões com moldura, 349 px a 390 px de largura — 41 % do ecrã de um telemóvel — e a Curtain, que é o acessório da própria Box, nem lá cabia. Passa a linhas finas com um filete entre elas: miniatura de 48 px, nome e preço na mesma linha, botão mais baixo. Quatro artigos cabem no espaço em que cabiam três, e nada fica escondido atrás de um deslize O carrossel foi experimentado e posto de lado (nota no snippet): media 312 px contra 308 px destas linhas e escondia metade dos artigos. É também o que as marcas do sector fazem (medido 04-09 a 390 px: Litter-Robot, PETKIT, CATLINK, Neakasa e Petlibro = linhas verticais na caixa de compra; carrossel só na Popur, com 1 artigo visível). Geometria à mão: o pm.css é um build e não traz estes degraus. */ .pm-fbt__list { margin-top: .5rem; display: flex; flex-direction: column; } .pm-fbt__item { display: flex; align-items: center; gap: .75rem; padding: .375rem 0; border-top: 1px solid rgb(44 45 46 / .08); } .pm-fbt__item:first-child { border-top: 0; padding-top: .125rem; } .pm-fbt__img { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: .75rem; overflow: hidden; } .pm-fbt__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .pm-fbt__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .125rem; } .pm-fbt__name { font-size: 13px; font-weight: 600; line-height: 1.25; color: #2c2d2e; transition: color .15s; } .pm-fbt__name:hover { color: rgb(46 140 133); } .pm-fbt__price { font-size: 12px; font-weight: 700; line-height: 1.25; color: #2c2d2e; } /* a etiqueta de pré-reserva vai inteira para a linha de baixo, sem o recuo que tinha ao lado do preço */ .pm-fbt__txt .pm-addon-pr { flex-basis: 100%; margin-left: 0; margin-top: 2px; } .pm-fbt__add { flex: 0 0 auto; height: 2.125rem; padding: 0 .75rem; border-radius: .625rem; border: 1px solid rgb(44 45 46 / .15); background: transparent; font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: #2c2d2e; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .pm-fbt__add:hover { background: #2c2d2e; color: #fff; border-color: #2c2d2e; } .pm-fbt__add[aria-busy="true"] { opacity: .5; pointer-events: none; } } /* ── Utilitários que o build do site não traz ────────────────────────── Segunda parte da lição do `pm.css` ser um BUILD: escrevemos classes Tailwind que o site nunca gerou, e elas não faziam nada em silêncio. Provado no browser a 31-08 (nenhuma tem regra nas folhas de estilo). As de COR já não estão aqui: essas trocaram-se pelo vocabulário real do site — `border-ink/[0.08]`, `[0.06]`, `[0.12]`, `divide-ink/10`, `ring-ink/[0.06]`, `bg-ink/[0.06]` — porque existem no build e assim o tema volta a ser 1:1 sem CSS novo. Estavam a cair no cinzento por omissão do Tailwind (#e5e7eb), que não é cor da casa: eram 42 filetes e molduras fora do sistema, das contas ao carrinho e à FAQ. Ficam aqui só as de GEOMETRIA e de comportamento, que não são decisão de desenho nenhuma — são os valores que a classe sempre quis dizer. ⚠️ `xs:w-[62%]` (parede UGC e duas landing) NÃO se corrige: o site também não tem breakpoint `xs` nenhum, nem no build nem na configuração do Tailwind. Estava morta lá e continua morta aqui — mexer nela era afastar-se do original, não aproximar-se. */ .leading-9 { line-height: 2.25rem; } .leading-10 { line-height: 2.5rem; } .gap-x-5 { column-gap: 1.25rem; } .gap-y-8 { row-gap: 2rem; } .empty\:hidden:empty { display: none; } .hover\:text-white\/70:hover { color: rgb(255 255 255 / .7); } /* O teal claro não passa em texto (2,37:1); o hover de um link É texto, por isso vai no tom de fundo da marca, como manda a regra da casa. */ .hover\:text-signal:hover { color: #2e8c85; } @media (min-width: 640px) { .sm\:pt-5 { padding-top: 1.25rem; } } @media (prefers-reduced-motion: no-preference) { .motion-safe\:animate-fade-in { animation: fade-in .18s ease-out both; } .motion-safe\:animate-slide-in-right { animation: slide-in-right .24s cubic-bezier(.16,1,.3,1) both; } } /* Linha do drawer a meio de uma alteração de quantidade: o clique tem de se ver antes de o servidor responder, senão o botão parece morto. */ [data-pm-cart-items] > [data-pm-busy] { opacity: .5; transition: opacity .12s ease; } /* Véu do herói no telemóvel. O texto branco vive sobre uma fotografia clara, e as classes que a escreveriam em Tailwind — `bg-gradient-to-b`, `from-ink/75`, `via-ink/45` — NÃO existem no build do pm.css (só lá estão `to-br`, `to-r` e `to-t`). Escrito à mão, senão o véu é markup sem efeito e o texto fica ilegível em silêncio. */ .pm-hero-scrim { /* Geometria AQUI, não em classes: o `h-[80%]` que isto usava também não existe no build — o véu ficava com altura zero e continuava invisível. Regra a valer por si é a única forma de isto não voltar a falhar em silêncio (ver a nota «o pm.css é um build»). */ position: absolute; inset: 0 0 auto 0; /* 05-09-2026: 80% → 52%. Com o subtítulo fora (dono: «muito texto»), o texto acaba no primeiro terço e o véu estava a escurecer meia fotografia sem nada para proteger — o produto é que sofria. A altura segue o texto, não a imagem. 05-09 (2.ª volta) — O DONO ACHOU O CINZENTO PESADO («muito carregado para uma marca clean de luxo»). No desktop deu: 0,86 → 0,58 e continua a passar. AQUI NÃO DÁ, e o número diz porquê: com 0,58 o título cai a 2,09:1 (mínimo 3,0) e com 0,74 a 2,68 — só a partir de ~0,82 é que passa. A causa não é o véu, é o que está ATRÁS: nesta fotografia a janela fica exatamente por trás do título. Enquanto a foto e a posição do texto forem estas, aliviar o véu é trocar luxo por ilegibilidade. E o pico TAMBÉM não era a alavanca: medido no browser, o título vive entre os 24 % e os 53 % do gradiente — onde o véu já desvaneceu. Subir 0,74 → 0,82 no topo deu exatamente o mesmo 2,68:1, porque no sítio do texto quase não muda. O que se corrigiu foi a FORMA: o véu segura-se até aos 56 % (onde o título acaba) e só depois cai a pique. Assim o pico até desceu para 0,74 — menos cinzento à vista, mais contraste onde é preciso. O caminho de fundo continua a ser outra fotografia ou o texto noutro sítio, não mais cinzento. */ height: 52%; pointer-events: none; background: linear-gradient( to bottom, rgb(44 45 46 / .56) 0%, rgb(44 45 46 / .52) 38%, rgb(44 45 46 / .46) 70%, rgb(44 45 46 / .10) 88%, rgb(44 45 46 / 0) 100% ); } /* Blocos alternados das landings («Adaptada a todos os lares» e afins). No telemóvel os três blocos empilhados eram três ecrãs de scroll e ninguém percebia que havia mais — passam a carrossel com o cartão a 68% da largura útil, para meio cartão seguinte ficar sempre à vista (~1,5 cartões). A partir de sm volta à coluna com imagem/texto alternados, exatamente como estava no computador. Geometria escrita à mão e não em classes: o `flex-[0_0_68%]` e o `scroll-pl-5` deste bloco não existem no build do pm.css e ficariam markup sem efeito (ver a nota «o pm.css é um build»). */ .pm-alt-rail { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; /* anula o px-5 do container-x para o rail sangrar até à borda... */ margin-inline: -1.25rem; /* ...e devolve-o por dentro, senão o 1.º cartão encosta ao scrollport */ padding-inline: 1.25rem; scroll-padding-left: 1.25rem; padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pm-alt-rail::-webkit-scrollbar { display: none; } .pm-alt-rail > * { flex: 0 0 68%; scroll-snap-align: start; /* os cartões esticam à altura do mais alto; sem isto o `items-center` centrava o conteúdo e as fotografias ficavam a alturas diferentes */ align-content: start; } @media (min-width: 640px) { .pm-alt-rail { flex-direction: column; gap: 6rem; overflow-x: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 1.5rem; padding-bottom: 0; } .pm-alt-rail > * { flex: initial; } } /* ── Separadores «Detalhes do Produto» ─────────────────────────────── */ /* Tabela de características. A coluna dos rótulos vinha com `whitespace-nowrap` e «Volume do compartimento de resíduos» empurrava a tabela para fora do painel: no telemóvel ficava um scroll lateral dentro de um separador, que ninguém encontra. Abaixo de sm o rótulo quebra e a tabela cabe na largura toda. */ @media (max-width: 639.98px) { .pm-spec td:first-child { white-space: normal; padding-right: .75rem; width: 48%; line-height: 1.35; } .pm-spec td:last-child { line-height: 1.35; } } /* Botões da App Store / Google Play do separador «Aplicação» — vinham do tema anterior com `style="height:50px"`; aqui a altura é regra, para o markup gerado não levar estilos à mão. */ .pm-app-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.25rem 0 1.5rem; } .pm-app-badges img { height: 44px; width: auto; display: block; } @media (min-width: 640px) { .pm-app-badges img { height: 50px; } } /* Fotografia dentro de um separador (a da «Embalagem»): centrada e com o mesmo limite de 480px que a loja usava. */ .pm-tab-foto { max-width: 480px; margin: 1.5rem auto 0; } /* Cartão de categoria do FAQ (o «dinâmico» do tema anterior). O estado ativo vive no `aria-selected` e não em classes trocadas por JS — é o mesmo atributo que diz ao leitor de ecrã qual está escolhido. */ .pm-faq-chip[aria-selected="true"] { background: #2c2d2e; border-color: #2c2d2e; color: #fff; } /* Botão de continuar um vídeo parado à mão. Só aparece depois de alguém parar o vídeo (é o `data-pm-parado` que o mostra): enquanto toca, o vídeo fica limpo e o toque no próprio vídeo é que pára. Fica no centro e com 56px, longe do botão do som dos cartões UGC (canto superior). */ .pm-video-hold { position: relative; } .pm-video-toggle { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .92); color: #2c2d2e; box-shadow: 0 8px 24px rgb(0 0 0 / .25); cursor: pointer; } .pm-video-toggle svg { margin-left: 3px; } /* tem de ganhar ao `.hidden` do build, que vem antes neste ficheiro */ .pm-video-toggle.hidden { display: none; } /* ── O raio da média ─────────────────────────────────────────────────── A loja (tema anterior) tinha um só token de raio: 22px — nas fotos, nos cartões e nos vídeos. No build do pm.css o `rounded-xl` e o `rounded-2xl` valem os dois 16px e são a MESMA classe dos botões, por isso não se lhes mexe: sobe-se o raio só onde há fotografia ou vídeo, que é o que o dono comparou («mais redondo, como a loja»). */ :root { --pm-raio-media: 22px; } .pdp-landing .rounded-xl:has(> img), .pdp-landing .rounded-2xl:has(> img), .pdp-landing .rounded-xl:has(> video), .pdp-landing .rounded-2xl:has(> video), .pdp-landing figure.rounded-2xl, .pdp-landing img.rounded-2xl, .pm-tab-foto img, .pm-video-band, [data-pm-ugc] > div, [data-pm-press], #store-reviews article { border-radius: var(--pm-raio-media); } .pm-video-band video { border-radius: inherit; } /* As três garantias por baixo do «Finalizar compra»: uma linha só, também num ecrã de 360px. A 12px o «Devoluções 30 dias» partia ao meio e a fila ficava com três alturas diferentes — parecia avariada. */ .pm-drawer-badges { display: flex; align-items: center; justify-content: center; gap: .375rem; /* o texto acompanha a largura do ecrã: a 360px são 10px e cabe, a partir dos 445px pára nos 12px e não cresce mais */ font-size: clamp(10px, 2.6vw, 12px); line-height: 1.2; } .pm-drawer-badges > span { white-space: nowrap; } @media (min-width: 640px) { .pm-drawer-badges { gap: .75rem; } } /* Campo do código promocional: contorno da casa em vez do anel do browser (que no telemóvel aparecia a dobrar com a borda). */ [data-pm-promo-input]:focus { outline: none; border-color: #2c2d2e; box-shadow: 0 0 0 3px rgb(44 45 46 / .08); } /* No telemóvel a newsletter é a PRIMEIRA coisa do rodapé e só depois vem a marca (pedido do dono, 31-08-2026). No computador mantém-se como está — marca à esquerda, newsletter à direita —, que é o que a grelha de duas colunas foi desenhada para fazer. */ @media (max-width: 1023.98px) { .pm-footer-news { order: -1; } } /* A banda «Na televisão» dentro da ficha: a ficha inteira vive num `container-x`, e sem isto a banda escura ficava uma caixa encolhida com margens brancas dos dois lados e cantos direitos — na home, onde é uma secção de topo, sempre foi de bordo a bordo. Anula-se o padding do container para as duas ficarem iguais. */ .pdp-landing > * { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 1.25rem; } .pdp-landing > .pm-press-section { max-width: none; padding-inline: 0; } @media (min-width: 640px) { .pdp-landing > * { padding-inline: 2rem; } .pdp-landing > .pm-press-section { padding-inline: 0; } } /* ── Descrição do produto colada de fora ─────────────────────────────── Uma descrição colada do ChatGPT traz a INTERFACE dele junto: dezenas de divs com `flex`, `gap-4`, `pb-10`, `markdown prose`… classes que por acaso EXISTEM no nosso build e passam a valer de verdade. Medido a 31-08-2026 no pack Ultimate Care: o bloco ocupava 821px no telemóvel, contra 616px no tema anterior — onde essas classes não existem e não faziam nada. Aqui os contentores colados perdem o layout próprio e o texto fica com o ritmo do tema. Só apanha o que é claramente de fora; o certo continua a ser limpar a descrição no Shopify. */ [data-pm-desc] div { display: block; gap: 0; margin: 0; padding: 0; max-width: none; width: auto; } /* E o fecho a 3 linhas passa a ter uma altura, não só o `-webkit-line-clamp`: com os divs colados lá dentro o clamp não corta (medido: 781px em vez de 68px), e a ficha do pack abria com um muro de texto. Com o teto, o «Ver mais» volta a mandar — a classe sai e o teto vai com ela. */ @media (max-width: 1023.98px) { [data-pm-desc].line-clamp-3 { max-height: calc(3 * 1.625em); } } /* No computador também fecha, a 4 linhas (03-09-2026): é o tamanho natural da descrição da Box e deixa a zona de compra à vista num portátil. Medido no Ultimate Care: 22 linhas de altura para 6 de texto, por causa de `
` a mais na descrição — o cartão de pré-reserva ficava a 850 px do topo. Mudar o número aqui (e só aqui) muda o corte. */ @media (min-width: 1024px) { [data-pm-desc].line-clamp-3 { -webkit-line-clamp: 4; max-height: calc(4 * 1.625em); } } /* Quebras de linha soltas na descrição (`

` no fim de um parágrafo, `
` fora de parágrafos): vinham do editor do Shopify e faziam um buraco antes do cartão de pré-reserva. Não se mexe nas descrições (mudar o texto PT perde as traduções); esconde-se o que não é texto. */ [data-pm-desc] > br, [data-pm-desc] p > br:last-child, [data-pm-desc] p > br + br, [data-pm-desc] p:empty { display: none; } /* ── Duas classes que o build do pm.css nunca gerou ──────────────────── Estavam no markup e não faziam nada, em silêncio (ver a nota «o pm.css é um build»). Passam a regra escrita à mão, que é o que já deviam ser. 1) O cartão da parede de vídeos a 62% a partir dos 400px: sem isto ficava a 72% em TODOS os telemóveis e o cartão seguinte mal espreitava — a parede não se lia como carrossel. */ /* Cartão maior no telemóvel com o seguinte a espreitar (04-09-2026, parede curada com pontos de posição por baixo — o carrossel lê-se pelos pontos, não pela fatia do cartão seguinte). */ @media (max-width: 639.98px) { [data-pm-ugc] > div { width: 78%; } } /* ── O crédito da criadora na parede de vídeos, tal e qual o tema anterior ── (dono, 03-09-2026: «faz exatamente como o tema anterior, parece mais clean»). O tema anterior TAMBÉM tem sombra, mas suave e difusa: avatar 25%, nome 45% com 8px de desfoque, visto 25%. A 1.ª versão daqui tinha um drop-shadow duro a 90% no nome e no visto, e era esse que se via. Posição, tamanhos e o visto (círculo azul com o certo) são os valores do `ugc.liquid` antigo. */ .pm-ugc-credit { top: 12px; left: 12px; right: 58px; gap: 7px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.45); min-width: 0; isolation: isolate; } /* Véu suave por trás do crédito, medido 05-09-2026: o @ da criadora estava a 1,26-1,71:1 — o pior contraste da home inteira — porque o vídeo por baixo é claro e a sombra difusa não segura branco sobre branco. NÃO se endureceu a sombra: o dono recusou isso a 03-09 («a 1.ª versão tinha um drop-shadow duro a 90 % e lia-se menos clean»). Um véu é outra coisa — escurece o FUNDO, não desenha um halo à volta das letras. Sangra até às bordas do mosaico (o crédito está a 12px da esquerda e a 58px da direita) e desaparece antes de chegar ao rosto de quem está no vídeo. */ .pm-ugc-credit::before { content: ""; position: absolute; z-index: -1; inset: -12px -58px auto -12px; height: 4.5rem; background: linear-gradient(to bottom, rgb(20 21 22 / .72) 0%, rgb(20 21 22 / .58) 45%, rgb(20 21 22 / .20) 76%, rgb(20 21 22 / 0) 100%); pointer-events: none; } .pm-ugc-avatar { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; display: block; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); } .pm-ugc-verified { width: 15px; height: 15px; margin-left: -3px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.25)); } @media (max-width: 749px) { .pm-ugc-credit { left: 10px; right: 54px; font-size: 12px; } .pm-ugc-credit::before { inset: -10px -54px auto -10px; height: 4rem; } .pm-ugc-avatar { width: 28px; height: 28px; } .pm-ugc-verified { width: 14px; height: 14px; } } /* 2) A setinha nativa do nas perguntas frequentes (Safari). */ [data-pm-faq] summary::-webkit-details-marker, .pm-faq summary::-webkit-details-marker { display: none; } /* ── O verde da PetMaison ────────────────────────────────────────────── **#54B8B2 em todo o lado** — decisão do dono a 31-08-2026: «o verde da PetMaison é este». Vale para claro e para escuro, para a palavra-chave dos títulos ser sempre a mesma cor de marca. ⚠️ Nota medida, para quem vier a seguir: sobre branco este tom dá **2,37:1** de contraste; o mínimo do WCAG para texto grande é 3:1 (o tom escuro #2E8C85 dava 4,0:1). É uma escolha de marca, feita com o número à frente — não um descuido. Se um dia se quiser as duas coisas, o meio-termo que passa nos 3:1 sem sair da família é ~#45A79F. */ :root { --pm-mark-color: #54B8B2; } /* ── Mudar de língua, no fundo do rodapé ─────────────────────────────── A loja fala oito línguas e o Shopify escolhe uma pelo visitante — mas não havia por onde a trocar. É um `