/* ==================================================================
Toque de Amber, direcção de arte
Fonte: design system/toque-de-amber/DESIGN.md
Archetype porsche-precision. Primária Aesop, tom Byredo, contraste Le Labo.
O que esta folha corrige, medido antes de escrever:
display 80px peso 700 -> 40px peso 400 (a Aesop está em 36/400)
tracking +0,32px em caixa mista -> negativo
raio 14px -> 0px (a Aesop tem raio zero nos cartões)
estrutura âmbar em bordas e texto -> neutros a ~10% de saturação
cores 41 nomeadas -> 12
Carrega depois de amber-tokens.css e de tudo o resto.
================================================================== */
/* ---------------------------------------------------------- tipografia */
:root {
--amber-fonte: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* A Georgia aparecia em 522 elementos por ser fallback de sistema, e o clone
trazia a Brown, que é fonte licenciada de outra marca. Uma família só. */
body, body *,
#main, #main *,
#main-footer, #main-footer *,
main-header *, #main-header *,
.amber-header, .amber-header * {
font-family: var(--amber-fonte) !important;
}
/* excepção: monoespaçado onde faz sentido (números de encomenda, código) */
code, pre, kbd, samp, .num, [class*="tabular"] {
font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
}
/* Display em caixa mista: tracking negativo, peso 400.
A tabela do Spiekermann pede -0,02em a -0,03em nesta faixa. */
/* data-amber-titulo é posto pelo amber-ds.js: no tema clonado os títulos
das dobras são , não
, por isso não há selector de tag que sirva. */
#main [data-amber-titulo],
#main h1, #main h2,
#main [class*="h1"], #main [class*="h2"],
.amber-header h1, .product_title {
font-family: var(--amber-fonte);
font-weight: 400 !important;
letter-spacing: -0.022em !important;
text-transform: none !important;
color: var(--amber-text);
}
#main h1, #main [class*="h1"] { font-size: clamp(32px, 4.4vw, 40px) !important; line-height: 1.12 !important; }
#main h2, #main [class*="h2"], #main [data-amber-titulo] { font-size: clamp(26px, 3.2vw, 32px) !important; line-height: 1.15 !important; }
/* o hero é a única peça que sobe aos 40px */
#main [data-amber-hero-overlay] [data-amber-titulo], #main [data-amber-hero-overlay] .h1 p { font-size: clamp(34px, 5vw, 44px) !important; letter-spacing: -0.028em !important; font-weight: 400 !important; }
#main h3 { font-size: 24px !important; font-weight: 400 !important; letter-spacing: -0.012em !important; }
/* ------------------------------------------------------------ hero: vídeo
O vídeo entra por cima da foto (que continua a ser o que pinta primeiro,
é o que conta para o LCP) — em desktop E mobile (pedido de 10/09/2026;
antes ficava desligado no telemóvel). O gate de dados continua só em
JS (amber-ds.js), via navigator.connection.saveData. */
#main .hero-banner { position: relative; }
#main .hero-banner video[data-amber-hero-video] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0;
transition: opacity 420ms ease;
}
#main .hero-banner video[data-amber-hero-video][data-amber-video-ready="1"] {
opacity: 1;
}
#main .hero-banner picture img[data-amber-hero] { position: relative; z-index: 0; }
/* Rótulos e metadados: caixa alta pede tracking positivo, ao contrário do
display. Era aqui que o sistema antigo tinha o sinal trocado. */
#main .amber-legacy-sub,
#main .utility,
.amber-eyebrow,
.amber-ds-rotulo {
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.115em !important;
text-transform: uppercase !important;
color: var(--amber-text-soft, #A0968C) !important;
}
#main p, #main li, .amber-shell p {
font-family: var(--amber-fonte);
letter-spacing: 0 !important;
}
/* ---------------------------------------------------- cantos e superfícies */
#main .product-card,
#main .product-card [class*="aspect-"],
#main [class*="rounded"],
.amber-card, .amber-panel,
#amber-header .amber-hdr-icones button {
border-radius: 0 !important;
}
/* excepção: controlos circulares, que continuam redondos */
#amber-header .amber-hdr-icones button,
.amber-carousel-seta,
#main .amber-legacy-heart {
border-radius: 999px !important;
}
#main .product-card [class*="aspect-"] { background: #fff !important; }
/* ------------------------------------------------------------- acções */
/* O botão da Aesop: contorno fino, sem preenchimento, canto vivo.
O preenchido fica reservado para a acção principal de compra. */
#main .btn[variant="tertiary"],
#main .btn[variant="secondary"],
.amber-ds-accao {
background: transparent !important;
border: 1px solid var(--amber-text) !important;
color: var(--amber-text) !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.115em !important;
text-transform: uppercase !important;
padding: 13px 26px !important;
transition: background-color 180ms ease, color 180ms ease;
}
#main .btn[variant="tertiary"]:hover,
#main .btn[variant="secondary"]:hover,
.amber-ds-accao:hover {
background: var(--amber-text) !important;
color: var(--amber-bg) !important;
}
#main .btn[variant="primary"] {
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.115em !important;
background: var(--amber-accent) !important;
border: 1px solid var(--amber-accent) !important;
color: #fff !important;
}
/* .amber-legacy-atc (botão "Adicionar" das dobras nativas) segue o
mesmo escuro do botão do catálogo principal — regra própria em
amber-legacy.css. Antes esta folha forçava âmbar aqui com !important
e ficava por cima de qualquer ajuste feito lá. */
#main .amber-legacy-atc {
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
background: var(--amber-ink, #2B2622) !important;
border: 0 !important;
color: var(--amber-bg, #fff) !important;
}
/* --------------------------------------------------- filetes e bordas */
/* Tudo o que é estrutura passa a neutro. Era aqui que o âmbar se espalhava. */
#main hr,
#main [class*="border"],
.amber-card, .amber-panel {
border-color: var(--amber-hairline, #E0D7CB) !important;
}
/* Preço em preto, não âmbar: referência Primor (10/09/2026) — o âmbar
fica só pra acento (categoria, hover, botões), nunca pro número do
preço em si. */
#main .amber-legacy-price,
.product_price {
color: var(--amber-text) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------- signature: selo e filete
O abre-secção da marca. O selo é a gota de âmbar do logótipo, a 14px,
seguida de um filete que corre até à margem. Aparece no topo de cada
dobra, no painel do carrinho e na página de produto. */
.amber-abre {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 20px;
}
.amber-abre__selo { width: 14px; height: 18px; flex: none; display: block; }
.amber-abre__filete { flex: 1; height: 1px; background: var(--amber-hairline, #E0D7CB); }
/* quando o título da dobra é centrado, o filete corre dos dois lados */
.amber-abre--centro { justify-content: center; }
/* a abertura respeita a margem lateral da dobra em vez de colar ao ecrã */
#main > * > .amber-abre,
#main > .amber-abre { padding-inline: clamp(16px, 4vw, 48px); }
/* ------------------------------------------------- cabeçalhos internos
produto.html e checkout.html tinham header próprio, ainda em Carvão,
enquanto a home já estava branca. */
.amber-header {
background: #fff !important;
border-bottom: 1px solid var(--amber-hairline, #E0D7CB) !important;
color: var(--amber-text) !important;
}
.amber-header a,
.amber-header .amber-back { color: var(--amber-text) !important; }
/* Cabeçalho fica branco sempre, pelo mesmo motivo do fundo geral: a marca
não muda de aparência conforme o tema do sistema do visitante. */
@media (prefers-reduced-motion: reduce) {
#main .btn, .amber-ds-accao { transition: none; }
}
/* ==================================================================
Catálogo em carrossel
O Mateus quer o catálogo como a dobra das colecções: cartões do mesmo
tamanho, lado a lado, com setas para passar. Reaproveita a classe
core-carousel-slides, que o amber-carousel.js já equipa com setas,
em vez de escrever um segundo carrossel.
================================================================== */
/* O catálogo é um item de grelha dentro do #main, e um item de grelha
tem min-width:auto por omissão: não encolhe abaixo do tamanho do seu
conteúdo. Como a faixa de cartões é larguíssima, a secção inteira
esticava para 1148px num ecrã de 390px, medido com o telemóvel real.
Isso levava atrás o título "Colecção Toque de Amber" e os chips de
filtro, que ficam centrados nessa largura e portanto fora do ecrã:
era por isso que no telemóvel só se viam dois chips e nenhum título.
min-width:0 devolve a secção à largura do ecrã e deixa o overflow
horizontal para quem é suposto tratá-lo, a faixa de cartões. */
#amber-catalog {
position: relative;
min-width: 0;
max-width: 100%;
}
#amber-catalog .amber-grid {
min-width: 0;
max-width: 100%;
}
/* Chips de filtro: "Ver perfumes" na dobra de colecções passa a filtrar
o catálogo por família em vez de mostrar tudo junto. */
#amber-catalog .amber-catalog-filtros {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
padding: 0 clamp(16px, 4vw, 48px) 18px;
}
#amber-catalog .amber-filtro-chip {
flex: none;
padding: 9px 18px;
border: 1px solid var(--amber-hairline, #E0D7CB);
border-radius: 999px;
background: transparent;
color: var(--amber-text);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: pointer;
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
#amber-catalog .amber-filtro-chip.is-active {
background: var(--amber-text);
border-color: var(--amber-text);
color: var(--amber-bg, #fff);
}
#amber-catalog .amber-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 0 !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 6px;
scrollbar-width: none; /* a navegação é pelas setas */
-ms-overflow-style: none;
}
#amber-catalog .amber-grid::-webkit-scrollbar { display: none; }
/* Estilo Primor: sem caixa em volta do cartão, só uma linha fina a
separar um produto do outro. O mesmo tratamento entra nas outras
três dobras que mostram cartões, para o catálogo parecer um só
sistema em vez de três desenhos diferentes. */
#amber-catalog .amber-grid > .amber-card {
flex: 0 0 clamp(200px, 21vw, 250px);
width: auto !important;
max-width: none !important;
scroll-snap-align: start;
padding: 0 20px;
border-left: 1px solid var(--amber-hairline, #E0D7CB);
}
#amber-catalog .amber-grid > .amber-card:first-child {
border-left: none;
padding-left: 0;
}
/* ---- ordem dentro do cartão ----
O markup traz categoria, nome e só depois a imagem. Numa loja a foto
vem primeiro: é ela que faz parar o olho. Reordenado por flex em vez
de mexer no markup, que é gerado em três sítios diferentes. */
/* O preco e as accoes sao irmaos do .amber-card-link, nao filhos. Ordenar
so dentro do link punha-os no meio do cartao. Com display:contents o
link deixa de ter caixa propria e todos os elementos passam a ser itens
do mesmo flex, o que permite uma ordem unica de cima a baixo. */
#amber-catalog .amber-card {
display: flex !important;
flex-direction: column;
position: relative;
}
/* Esconder cartão filtrado. Tem de ser !important e com mais
especificidade do que a regra acima: o display:flex!important dela
ganhava do style inline que o filtro punha no cartão, e por isso o
catálogo nunca chegou a filtrar, nem por família nem por marca. */
#amber-catalog .amber-card.is-fora-do-filtro {
display: none !important;
}
/* Etiqueta da marca activa, logo abaixo dos chips de família. Sem ela,
um catálogo filtrado por marca parece igual ao catálogo inteiro. */
#amber-catalog .amber-marca-activa {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0 auto 18px;
padding: 7px 8px 7px 16px;
border: 1px solid var(--amber-accent, #A9631C);
color: var(--amber-accent, #A9631C);
font-size: 13px;
letter-spacing: .02em;
}
#amber-catalog .amber-marca-activa[hidden] { display: none; }
#amber-catalog .amber-marca-activa-x {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 0;
border-radius: 999px;
background: transparent;
color: inherit;
cursor: pointer;
transition: background-color 160ms ease;
}
#amber-catalog .amber-marca-activa-x:hover { background: rgba(169, 99, 28, .12); }
#amber-catalog .amber-card-link { display: contents !important; }
#amber-catalog .amber-card-media { order: 1; margin-bottom: 14px; }
#amber-catalog .amber-card-label { order: 2; min-height: 1.6em; align-items: flex-start; }
/* Divisor + pontinho dentro do texto do cartão removidos: referência
Primor (10/09/2026) não tem esse traço, só a categoria em caixa alta
directa acima do nome — um elemento decorativo a menos entre a
categoria e o nome, mais perto do "vender, não se justificar". */
#amber-catalog .amber-card-divider { display: none; }
#amber-catalog .amber-card h3 { order: 4; }
#amber-catalog .amber-card-price { order: 5; }
#amber-catalog .amber-card-actions { order: 6; margin-top: auto; padding-top: 12px; }
#amber-catalog .amber-wishlist { order: 0; position: absolute; top: 8px; right: 8px; z-index: 2; }
#amber-catalog .amber-card-label-dot { display: none; }
#amber-catalog .amber-card-label {
font-weight: 700;
letter-spacing: .06em;
color: var(--amber-text-strong, var(--amber-espresso));
}
/* a foto ocupa a mesma caixa 4/5 de todas as outras dobras */
#amber-catalog .amber-card-media {
aspect-ratio: 4 / 5;
background: #fff;
overflow: hidden;
display: block;
}
#amber-catalog .amber-card-media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
box-sizing: border-box;
padding: 18px;
}
@media (max-width: 640px) {
#amber-catalog .amber-card-media img { padding: 12px; }
}
#amber-catalog .amber-card-link h3 {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
min-height: 2.7em; /* alinha o preço entre cartões */
margin: 6px 0 0 !important;
}
#amber-catalog .amber-card-price { margin: 8px 0 0 !important; }
@media (max-width: 640px) {
#amber-catalog .amber-grid > .amber-card { flex-basis: 63vw; }
}
/* ==================================================================
Blindagem mobile dos carrosseis nativos do tema
O Mateus reportou, com screenshots do telemóvel, nomes e preços de
cartões vizinhos sobrepostos letra a letra em "Mais Procurados" e
"Também vai gostar". A largura de cada slide (--core-carousel-slide-
width) vem calculada pelo motor do tema clonado a partir de
data-items-to-show-mobile; nesta secção fixamos a largura por CSS
puro e com !important, para o cartão nunca poder colapsar a 0 e
deixar o texto verter para cima do cartão seguinte, seja qual for a
causa exacta do cálculo deles falhar no ecrã do telemóvel.
================================================================== */
@media (max-width: 767px) {
#shopify-section-template--27560261287981__featured_collection_r73QYP .core-carousel-slides,
#shopify-section-template--27560261287981__featured_collection_ERb9tA .core-carousel-slides,
#shopify-section-template--27560261287981__image_carousel_DRpaxX .core-carousel-slides {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
#shopify-section-template--27560261287981__featured_collection_r73QYP .core-carousel-slide,
#shopify-section-template--27560261287981__featured_collection_ERb9tA .core-carousel-slide,
#shopify-section-template--27560261287981__image_carousel_DRpaxX .core-carousel-slide {
flex: 0 0 82vw !important;
width: 82vw !important;
max-width: 82vw !important;
min-width: 82vw !important;
position: relative !important;
overflow: hidden !important;
}
/* "As marcas" (brands_3M3bhw) já tem CSS própria do tema, ID
.core-carousel--brands-template..., com um slide a 100% da largura
por vista. A nossa largura de 82vw ficava mais específica (ID)
e atropelava esse layout, o que tirava o arrastar com o dedo e
confundia a seta de avançar. Deixa-se a CSS deles governar aqui. */
#shopify-section-template--27560261287981__featured_collection_r73QYP .core-carousel-slide article.product-card,
#shopify-section-template--27560261287981__featured_collection_ERb9tA .core-carousel-slide article.product-card {
position: relative !important;
width: 100% !important;
}
/* segunda camada de defesa: mesmo que a largura falhe outra vez, o
texto do nome/preço nunca sai da própria caixa para verter no
cartão vizinho */
#shopify-section-template--27560261287981__featured_collection_r73QYP .amber-legacy-sub,
#shopify-section-template--27560261287981__featured_collection_r73QYP .amber-legacy-price,
#shopify-section-template--27560261287981__featured_collection_r73QYP article.product-card h3,
#shopify-section-template--27560261287981__featured_collection_ERb9tA .amber-legacy-sub,
#shopify-section-template--27560261287981__featured_collection_ERb9tA .amber-legacy-price,
#shopify-section-template--27560261287981__featured_collection_ERb9tA article.product-card h3,
#shopify-section-template--27560261287981__brands_3M3bhw .core-carousel-slide p,
#shopify-section-template--27560261287981__image_carousel_DRpaxX .core-carousel-slide p {
overflow-wrap: break-word !important;
word-break: break-word !important;
}
}
/* ==================================================================
Reserva de espaco do catalogo (Core Web Vitals)
==================================================================
A seccao #amber-catalog e criada por JavaScript e so ganha altura
quando /api/products responde. Ate la a pagina fica curta e depois
salta: era a maior parte do CLS de 0,46 medido em telemovel.
830px e a altura medida da seccao cheia (826 em telemovel a 412px,
821 em desktop). A reserva fica: se saisse quando os cartoes entram,
a seccao encolhia e a pagina saltava outra vez. So sai quando nao ha
catalogo para mostrar, para nao deixar uma faixa vazia.
================================================================== */
/* Medido na pagina publicada: 790px de altura a 1350px de largura, 826px
em telemovel a 412px. Reservar a mais deixava um vazio ao encher, a menos
deixava a pagina saltar. */
#amber-catalog.amber-catalog-a-reservar { min-height: 826px; }
@media (min-width: 768px) {
#amber-catalog.amber-catalog-a-reservar { min-height: 790px; }
}
/* As duas dobras de produtos sao repintadas pelo catalogo e mudavam de
altura a meio. Ficam com a altura que tomam depois de cheias. */
#shopify-section-template--27560261287981__featured_collection_r73QYP,
#shopify-section-template--27560261287981__featured_collection_ERb9tA {
min-height: 736px;
}
/* ==================================================================
Menu de colecções do cabeçalho (assets/js/amber-menu.js).
Partilhado entre index.html e produto.html — cada página tem o seu
próprio botão de disparo (#amber-header .amber-hdr-menu no index,
.amber-header-inner .amber-hdr-menu no produto), mas o painel é o
mesmo componente nas duas.
================================================================== */
.amber-menu-fundo {
position: fixed; inset: 0;
background: rgba(36, 15, 10, .45);
z-index: 2147483645;
opacity: 0;
transition: opacity 280ms ease;
}
.amber-menu-fundo.is-open { opacity: 1; }
.amber-menu-painel {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(340px, 86vw);
background: #fff;
z-index: 2147483646;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 320ms cubic-bezier(.22,.61,.36,1);
box-shadow: 8px 0 40px rgba(36, 15, 10, .18);
}
.amber-menu-painel.is-open { transform: translateX(0); }
.amber-menu-cabecalho {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 22px 18px;
border-bottom: 1px solid var(--amber-hairline, #E0D7CB);
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: var(--amber-text-muted, #7a5340);
}
.amber-menu-fechar {
width: 32px; height: 32px; border: 0; background: transparent;
color: var(--amber-espresso, #593323); cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
}
.amber-menu-fechar:hover { background: rgba(89, 51, 35, 0.08); }
.amber-menu-lista { list-style: none; margin: 0; padding: 10px 0; flex: 1; overflow-y: auto; }
.amber-menu-link {
display: block; width: 100%; text-align: left;
padding: 15px 22px;
border: 0; background: transparent; cursor: pointer;
font-family: var(--amber-fonte, inherit); font-size: 16px;
color: var(--amber-espresso, #2B2622);
border-bottom: 1px solid var(--amber-hairline, #E0D7CB);
transition: background-color 160ms ease, padding-left 160ms ease;
}
.amber-menu-lista li:first-child .amber-menu-link {
font-weight: 700; letter-spacing: .02em;
}
.amber-menu-link:hover, .amber-menu-link:focus-visible { background: var(--amber-marfim, #F8F0E6); padding-left: 28px; }
.amber-menu-rodape { padding: 18px 22px 26px; border-top: 1px solid var(--amber-hairline, #E0D7CB); }
.amber-menu-rodape a {
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--amber-ambar, #A9631C); text-decoration: none;
}
.amber-menu-rodape a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.amber-menu-fundo, .amber-menu-painel { transition: none; }
}