/* ============================================================
Male — catálogo editorial
Linha visual: editorial silencioso (Toteme, Lemaire, The Row)
Reutiliza tokens existentes em style.css:
--ink, --ink-soft, --gray-100/600/700, --coral-deep, --plum,
--magenta-deep, --cream, --f-display, --f-mono.
============================================================ */
.ed {
--ed-max: 1320px;
--ed-gutter: clamp(20px, 4vw, 56px);
--ed-row-gap: clamp(64px, 9vw, 120px);
--ed-col-gap: clamp(20px, 2.4vw, 36px);
/* v72 · Nova identidade: cinza, preto e branco. Os valores quentes
(creme/bordô) viraram a paleta legada em .ed--paleta-bordo, no fim
deste arquivo — trocar é um seletor, não um mutirão. */
--ed-bg: #f4f4f3;
--ed-paper: #ffffff;
--ed-line: #e2e2e0;
--ed-muted: #6f6f6d;
/* Superfícies de mídia (placeholders de foto, skeleton, monogramas) */
--ed-media: #eaeae8;
--ed-media-grad: linear-gradient(135deg, #ededeb 0%, #dededc 100%);
--ed-skel: linear-gradient(110deg, #e9e9e7 8%, #f4f4f3 18%, #e9e9e7 33%);
--ed-ph-ink: #3a3a38;
/* Superfícies fixas (não invertem no modo escuro): palcos escuros
do hero foto/store e do footer, com texto claro fixo por cima. */
--ed-dark: #101010;
--ed-light: #f4f4f3;
/* v71 · Tinta do menu de categorias. Estes tokens JÁ eram usados pela
megabar (`var(--ed-ink, #3a2c24)`) mas NUNCA foram declarados: todo
mundo caía no fallback fixo. No tema escuro isso pintava marrom
escuro sobre fundo quase preto — a "fonte xoxa". Declarados aqui e
invertidos no bloco [data-theme="dark"] abaixo. */
--ed-ink: #232322;
--ed-ink-soft: #6f6f6d;
--ed-accent: #000000;
/* --ink/--ink-soft nascem marrons em style.css e são herdados por todo
texto da vitrine (inclusive os links, por causa de `.ed a`). Neutros
aqui, só no escopo editorial — o painel interno segue igual. */
--ink: #1b1b1a;
--ink-soft: #3a3a38;
/* v72.1 · Superfícies e tintas que estavam com hex quente cravado no
corpo do arquivo — por isso o topo e o rodapé continuavam bordô
mesmo com a paleta trocada. Agora todas passam por token. */
--ed-band: #1c1c1b; /* faixas do banner do topo (desktop) */
/* v72.5 · Rodapé: superfície + tintas em tokens próprios, e não mais
emprestados de --ed-dark/--ed-on-dark. Emprestar impedia mudar o tom do
rodapé sem mexer no palco escuro do topo, que usa os mesmos tokens.
O padrão saiu de #101010 (quase preto) para um grafite — o preto
continua disponível em Configurações → Vitrine → Tom do rodapé. */
--ed-foot-bg: #2a2a29; /* fundo do rodapé editorial */
--ed-foot-ink: var(--ed-on-dark);
--ed-foot-ink-strong: var(--ed-on-dark-strong);
--ed-foot-ink-soft: var(--ed-on-dark-soft);
--ed-foot-accent: var(--coral-soft);
/* Status da newsletter derivado da TINTA do rodapé: mistura com verde /
vermelho só o suficiente para dar o sinal, sem descolar da luminância
que já contrasta. Hex fixo quebrava — o verde claro dava 1,8:1 no
rodapé claro e o escuro dava 3,7:1 no rodapé claro em tema escuro. */
--ed-foot-ok: #5f8f6b;
--ed-foot-ok: color-mix(in srgb, rgb(var(--ed-foot-ink-strong)) 62%, #17a05a);
--ed-foot-err: #b15f5f;
--ed-foot-err: color-mix(in srgb, rgb(var(--ed-foot-ink-strong)) 62%, #d94141);
/* Tinta do site como triplete — necessária para o rodapé claro, onde a
tinta precisa INVERTER junto com o tema. Não dá para reaproveitar
--ed-on-stage-rgb: com o palco escuro ligado ele fica claro nos dois
temas, e o rodapé claro sairia branco no branco. */
--ed-ink-rgb: 35, 35, 34;
/* v72.3 · "Palco": o fundo atrás da foto de topo e dos carrosséis.
Era --ed-dark fixo, e aparecia como faixa escura onde a imagem não
preenche. Padrão agora é o fundo do site. Tinta e fundo do palco
mudam JUNTOS — trocar só o fundo deixaria texto claro no claro. */
--ed-stage: var(--ed-bg);
--ed-on-stage: var(--ed-ink);
--ed-on-stage-soft: var(--ed-ink-soft);
--ed-on-stage-rgb: 35, 35, 34;
--ed-on-dark: 214, 214, 212; /* tinta sobre superfície escura fixa */
--ed-on-dark-strong: 242, 242, 240;
--ed-on-dark-soft: #b0b0ae;
--ed-surface-2: #efefee; /* hovers suaves (substitui --cream) */
--ed-accent-wash: #f1f1f0; /* fundo tênue do estado selecionado */
--ed-glow: 120, 120, 118; /* brilho radial do hero vazio */
--cream: #efefee; /* usado via var(--ed-surface-2) dentro de .ed */
/* Preto das sombras/scrims em COMPONENTES (rgba(var(--ed-shade), a)).
Antes era um preto amarronzado fixo, que puxava a foto para o
quente. Agora é neutro e vira token, então acompanha a paleta. */
--ed-shade: 17, 17, 17;
/* ── Acento da vitrine: vinho tirado do cabide, não da paleta tech.
Um bordô quase tinto (renda Jasmine) redefine os tokens de coral
APENAS no escopo editorial — preço, links ativos e detalhes passam
a conversar com as peças (vinho/marrom/preto). O painel interno
continua coral: território da operação, não da vitrine.
Contraste validado: 10.99:1 sobre --ed-bg (claro). ── */
--coral-deep: #111111;
--coral: #2b2b2a;
--coral-soft: #c4c4c1;
/* ── Grão de papel: ruído fractal a ~3% sobre o creme. Tira o aspecto
chapado/digital do fundo — papelaria de convite, não interface.
SVG inline de ~300 bytes, tile de 240px, custo zero de rede. ── */
--ed-grain: url("data:image/svg+xml;utf8, sem width/height cai no default de elemento
substituído (300×150px) e estoura o layout em silêncio — foi o que
derrubou a página de produto no mobile. :where() zera a especificidade:
regras existentes de ícone continuam vencendo; isto só pega o que
escapou de todas. */
.ed :where(svg:not([width]):not([height])) { width: 20px; height: 20px; }
/* v40: WhatsApp/Instagram saíram do header (vivem só no drawer);
as regras de hover com cor nativa dos canais foram removidas junto. */
/* ───────────────────────── Hero ──────────────────────── */
.ed-hero {
position: relative;
display: flex;
overflow: hidden;
}
/* ──────────── Modo 1: foto destaque full-bleed ──────────── */
.ed-hero--photo {
min-height: clamp(540px, 88vh, 820px);
align-items: flex-end;
padding: clamp(48px, 8vw, 96px) var(--ed-gutter) clamp(56px, 8vw, 96px);
background: var(--ed-stage);
}
/* ──────────── Modo 2: capa editorial split ──────────── */
.ed-hero--cover {
min-height: clamp(480px, 72vh, 700px);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 0;
padding: 0;
background: linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-media) 100%);
border-bottom: 1px solid var(--ed-line);
}
/* ──────────── Modo 3: solo (catálogo vazio) ──────────── */
.ed-hero--solo {
min-height: clamp(320px, 42vh, 440px);
align-items: center;
justify-content: center;
padding: clamp(48px, 7vw, 80px) var(--ed-gutter);
background:
radial-gradient(ellipse 80% 60% at 50% 20%, rgba(var(--ed-glow), .08) 0%, transparent 70%),
linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-media) 100%);
border-bottom: 1px solid var(--ed-line);
text-align: center;
}
.ed-hero--solo::before {
content: "";
position: absolute;
top: clamp(28px, 5vw, 48px);
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: var(--coral-deep);
opacity: .5;
}
/* ──────────── Modo compact: faixa fina tipográfica ──────────── */
.ed-hero--compact {
min-height: 0;
align-items: center;
justify-content: flex-start;
padding: clamp(28px, 4vw, 44px) var(--ed-gutter);
background: var(--ed-bg);
border-bottom: 1px solid var(--ed-line);
text-align: left;
}
/* ──────────── Modo featured (v37): coverflow de destaques ────────────
A peça central em evidência; vizinhas espiando nas laterais com
escala/opacity reduzidas. Posições via [data-pos] setado pelo JS;
transição no transform. overflow:hidden no section garante que os
peeks laterais NUNCA gerem scroll horizontal. */
.ed-hero--featured {
min-height: 0;
display: block;
padding: clamp(28px, 5vw, 56px) 0 clamp(18px, 3vw, 30px);
background: var(--ed-stage);
border-bottom: 1px solid var(--ed-line);
overflow: hidden;
}
.ed-fcar__eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ed-on-stage-soft);
text-align: center;
margin: 0 0 clamp(16px, 3vw, 28px);
}
.ed-fcar__stage {
position: relative;
height: clamp(340px, 56vh, 540px);
}
.ed-fcar__slide {
position: absolute;
top: 0;
left: 50%;
width: min(72vw, 380px);
height: 100%;
transform: translateX(-50%) scale(.7);
opacity: 0;
pointer-events: none;
text-decoration: none;
transition: transform .55s cubic-bezier(.22, .8, .24, 1),
opacity .55s ease, filter .55s ease;
will-change: transform;
}
.ed-fcar__slide img {
width: 100%;
height: calc(100% - 58px);
object-fit: cover;
display: block;
border-radius: 2px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.ed-fcar__cap {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 12px;
text-align: center;
opacity: 0;
transition: opacity .4s ease .15s;
}
.ed-fcar__name {
font-family: var(--f-display);
font-style: italic;
font-size: 18px;
color: var(--ed-on-stage);
}
.ed-fcar__price {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .06em;
color: var(--ed-on-stage-soft);
}
.ed-fcar__slide[data-pos="center"] {
transform: translateX(-50%) scale(1);
opacity: 1;
z-index: 3;
pointer-events: auto;
}
.ed-fcar__slide[data-pos="center"] .ed-fcar__cap { opacity: 1; }
.ed-fcar__slide[data-pos="left"],
.ed-fcar__slide[data-pos="right"] {
opacity: .45;
z-index: 2;
pointer-events: auto;
filter: saturate(.7);
}
.ed-fcar__slide[data-pos="left"] { transform: translateX(calc(-50% - min(56vw, 320px))) scale(.82); }
.ed-fcar__slide[data-pos="right"] { transform: translateX(calc(-50% + min(56vw, 320px))) scale(.82); }
.ed-fcar__dots {
display: flex;
justify-content: center;
gap: 8px;
padding-top: clamp(12px, 2vw, 18px);
}
.ed-fcar__dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(var(--ed-on-stage-rgb), .32);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.ed-fcar__dot.is-active {
background: var(--ed-on-stage);
transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
.ed-fcar__slide { transition: none; }
}
/* ──────────── Modo store: carrossel da loja ──────────── */
.ed-hero--store {
min-height: clamp(540px, 88vh, 820px);
align-items: flex-end;
padding: clamp(48px, 8vw, 96px) var(--ed-gutter) clamp(56px, 8vw, 96px);
background: var(--ed-stage);
}
.ed-hero__carousel {
position: absolute;
inset: 0;
overflow: hidden;
}
.ed-hero__carousel-slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
}
.ed-hero__carousel-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.ed-hero__carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.92) contrast(1.02);
display: block;
}
/* Indicadores (dots) no canto inferior direito */
.ed-hero__dots {
position: absolute;
bottom: clamp(20px, 3vw, 32px);
right: clamp(20px, 3vw, 32px);
z-index: 3;
display: flex;
gap: 8px;
}
.ed-hero__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .4);
cursor: pointer;
transition: background .25s ease, transform .25s ease;
}
.ed-hero__dot:hover { background: rgba(255, 255, 255, .7); }
.ed-hero__dot.is-active {
background: var(--ed-bg);
transform: scale(1.3);
}
/* Touch target maior em mobile sem mudar o visual */
.ed-hero__dot::before {
content: "";
position: absolute;
inset: -10px;
}
.ed-hero__dot { position: relative; }
/* Texto sobre o carrossel: branco com sombra para legibilidade */
.ed-hero--store .ed-hero__inner { color: var(--ed-light); }
.ed-hero--store .ed-hero__title em { color: var(--coral-soft); }
/* Reduced motion: mostra só o primeiro slide, sem fade */
@media (prefers-reduced-motion: reduce) {
.ed-hero__carousel-slide { transition: none; }
}
/* ──────────── Imagem de fundo (modo photo) ──────────── */
.ed-hero__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(.92) contrast(1.02);
}
.ed-hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(var(--ed-shade), 0) 30%, rgba(var(--ed-shade), .55) 100%),
linear-gradient(90deg, rgba(var(--ed-shade), .35) 0%, rgba(var(--ed-shade), 0) 60%);
}
/* ──────────── Conteúdo textual do hero ──────────── */
.ed-hero__inner {
position: relative;
max-width: 720px;
color: var(--ed-light);
}
.ed-hero--photo .ed-hero__inner {
align-self: flex-end;
}
.ed-hero--cover .ed-hero__inner {
color: var(--ink);
max-width: none;
padding: clamp(56px, 8vw, 100px) clamp(28px, 5vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.ed-hero--solo .ed-hero__inner {
color: var(--ink);
max-width: 640px;
margin: 0 auto;
}
.ed-hero--compact .ed-hero__inner {
color: var(--ink);
max-width: var(--ed-max);
margin: 0 auto;
padding: 0;
width: 100%;
}
/* ──────────── Eyebrow "Edição" ──────────── */
.ed-hero__edition {
display: flex; align-items: center; gap: 14px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
margin: 0 0 28px;
opacity: .9;
}
.ed-hero--cover .ed-hero__edition,
.ed-hero--solo .ed-hero__edition {
color: var(--coral-deep);
margin-bottom: 24px;
opacity: 1;
}
.ed-hero--solo .ed-hero__edition { justify-content: center; }
.ed-rule { display: inline-block; width: 48px; height: 1px; background: currentColor; opacity: .6; }
.ed-hero--cover .ed-rule,
.ed-hero--solo .ed-rule { opacity: .4; }
/* ──────────── Título ──────────── */
.ed-hero__title {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(56px, 9vw, 124px);
line-height: .95;
letter-spacing: -.025em;
margin: 0 0 24px;
text-wrap: balance;
}
.ed-hero--cover .ed-hero__title {
font-size: clamp(48px, 7vw, 96px);
margin-bottom: 22px;
}
.ed-hero--solo .ed-hero__title {
font-size: clamp(40px, 5.5vw, 72px);
margin-bottom: 18px;
}
.ed-hero--compact .ed-hero__title {
font-size: clamp(28px, 3.6vw, 44px);
margin: 0;
line-height: 1.05;
}
.ed-hero--compact .ed-hero__title em {
display: inline;
margin-left: 8px;
}
.ed-hero__title em { font-style: italic; color: var(--coral-soft); display: block; }
.ed-hero--cover .ed-hero__title em,
.ed-hero--solo .ed-hero__title em,
.ed-hero--compact .ed-hero__title em { color: var(--coral-deep); }
/* ──────────── Lede ──────────── */
.ed-hero__lede {
font-size: clamp(15px, 1.4vw, 19px);
line-height: 1.55;
max-width: 38ch;
margin: 0 0 40px;
opacity: .92;
}
.ed-hero--cover .ed-hero__lede {
color: var(--ink-soft);
max-width: 32ch;
margin-bottom: 32px;
}
.ed-hero--solo .ed-hero__lede {
color: var(--ink-soft);
max-width: 42ch;
margin: 0 auto;
}
/* ──────────── Bloco "peça em destaque" (modo photo) ────────────
Antes: link único com nome + seta. Agora: bloco com eyebrow +
nome clicável (rola para a peça), separado dos CTAs. */
.ed-hero__feature-block {
margin-bottom: 24px;
max-width: 520px;
}
.ed-hero__feature-eyebrow {
display: block;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral-deep);
margin-bottom: 8px;
}
.ed-hero__feature-name-link {
display: inline-block;
text-decoration: none;
transition: opacity .2s ease;
}
.ed-hero__feature-name-link:hover { opacity: .75; }
.ed-hero__feature-name {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink);
}
/* ──────────── Grupo de CTAs do hero (Ver coleção + WhatsApp) ────────────
2 botões lado a lado. Em mobile empilham (column).
Primário: pill ink (assertivo). Ghost: outline coral (canal). */
.ed-hero__cta-group {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
.ed-hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--r-pill, 999px);
transition: all .2s ease;
white-space: nowrap;
border: 1px solid transparent;
}
.ed-hero__cta--primary {
background: var(--ink);
border-color: var(--ink);
}
/* v72.6 · A cor vivia na regra acima (0,1,0) e perdia para `.ed a`
(0,1,1), que força color:inherit. Nos modos cover/compact/solo a pílula
saía --ink sobre --ink: contraste 1.0, rótulo invisível. Nos modos
photo/store passava batido — lá a cor vem de override próprio ou da
tinta clara herdada do hero. Medido no Chromium; o prefixo `.ed` empata
com os overrides de modo, que vêm depois e continuam vencendo. */
.ed .ed-hero__cta--primary { color: var(--ed-bg); }
.ed-hero__cta--primary:hover {
background: transparent;
color: var(--ink);
}
/* v72.6 · Tinha `color: var(--ink)` aqui, também derrubado por `.ed a`.
Neste caso herdar é o comportamento CERTO: sobre foto (photo/store) o
botão precisa de tinta clara, e a borda acompanha via currentColor.
A declaração saiu para não voltar a "consertar" o que não está quebrado. */
.ed-hero__cta--ghost {
background: transparent;
border-color: currentColor;
opacity: .85;
}
.ed-hero__cta--ghost:hover {
background: #25D366; /* cor do canal WhatsApp */
color: #fff;
border-color: #25D366;
opacity: 1;
}
.ed-hero__cta--ghost svg {
width: 14px;
height: 14px;
}
/* Hero modo photo (foto full-bleed): texto branco, ajusta CTAs.
`.ed-hero__inner` já está em layer acima da foto. */
.ed-hero--photo .ed-hero__cta--primary {
background: var(--ed-light);
color: var(--ed-dark);
border-color: var(--ed-light);
}
.ed-hero--photo .ed-hero__cta--primary:hover {
background: transparent;
color: var(--ed-light);
border-color: var(--ed-light);
}
.ed-hero--photo .ed-hero__cta--ghost {
color: var(--ed-light);
border-color: rgba(255,255,255,.55);
opacity: .9;
}
.ed-hero--photo .ed-hero__cta--ghost:hover {
background: #25D366;
border-color: #25D366;
color: #fff;
}
.ed-hero--photo .ed-hero__feature-eyebrow { color: var(--coral-soft, #f5b8a0); }
.ed-hero--photo .ed-hero__feature-name { color: var(--ed-light); }
/* ──────────── Capa editorial (modo cover) ──────────── */
.ed-hero__cover {
position: relative;
display: block;
overflow: hidden;
background: var(--ed-paper);
border-left: 1px solid var(--ed-line);
}
.ed-hero__cover-media {
position: relative;
margin: 0;
width: 100%;
height: 100%;
min-height: clamp(380px, 60vh, 560px);
background: var(--ed-media);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ed-hero__cover-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.ed-hero__cover:hover .ed-hero__cover-media img {
transform: scale(1.04);
}
.ed-hero__cover-mono {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(120px, 18vw, 280px);
color: var(--ed-ph-ink);
line-height: 1;
}
.ed-hero__cover-cap {
position: absolute;
left: clamp(20px, 3vw, 36px);
bottom: clamp(20px, 3vw, 36px);
padding: 14px 20px;
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 94%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: grid;
gap: 6px;
max-width: 80%;
border-left: 2px solid var(--coral-deep);
}
.ed-hero__cover-eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ed-muted);
}
.ed-hero__cover-name {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.1;
color: var(--ink);
letter-spacing: -.01em;
}
.ed-hero__cover-price {
font-size: 13px;
color: var(--coral-deep);
font-feature-settings: "tnum" 1;
}
/* ───────────────────── Filtros ───────────────────────── */
.ed-filters {
max-width: var(--ed-max);
margin: 0 auto;
padding: clamp(40px, 6vw, 72px) var(--ed-gutter) 24px;
display: grid;
gap: 24px;
border-bottom: 1px solid var(--ed-line);
}
/* Sem hero (modo minimal): os filtros sobem logo após a nav.
O respiro grande só faz sentido depois do hero; aqui ele vira vazio. */
.ed--no-hero .ed-filters {
padding-top: clamp(16px, 2.5vw, 28px);
}
.ed-search {
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--ed-line);
padding-bottom: 12px;
max-width: 520px;
}
.ed-search svg { width: 16px; height: 16px; color: var(--ed-muted); flex-shrink: 0; }
.ed-search input {
flex: 1; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 16px; color: var(--ink);
padding: 4px 0;
}
.ed-search input::placeholder { color: var(--ed-muted); font-style: italic; }
.ed-search__clear {
width: 24px; height: 24px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ed-line);
color: var(--ed-muted);
font-size: 14px; line-height: 1;
}
.ed-search__clear:hover { background: var(--ink); color: var(--ed-bg); }
.ed-filters__cats {
display: flex; flex-wrap: wrap; gap: 8px 6px;
}
.ed-chip {
display: inline-flex; align-items: center;
padding: 7px 14px;
border: 1px solid var(--ed-line);
border-radius: 999px;
font-family: var(--f-mono);
/* 11px = mesmo corpo do menu da nav. Antes 13px: o filtro falava mais
alto que a navegação, invertendo a hierarquia (marca > menu > filtros). */
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ed-muted);
transition: all .15s ease;
}
.ed-chip:hover { border-color: var(--ink); color: var(--ink); }
.ed-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--ed-bg); }
/* .ed-filters__sort e .ed-sort foram removidos: substituídos por
.ed-sort-menu (menu compacto com ). Definição no fim do arquivo. */
.ed-filters__count {
margin: 0;
font-family: var(--f-display);
font-style: italic;
font-size: 17px;
color: var(--ed-muted);
}
.ed-filters__count em { color: var(--ink); font-style: italic; }
/* ───────────────────── Grid editorial ────────────────── */
.ed-grid {
max-width: var(--ed-max);
margin: 0 auto;
padding: clamp(56px, 8vw, 96px) var(--ed-gutter) clamp(80px, 10vw, 140px);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--ed-row-gap) var(--ed-col-gap);
}
/* Modo enxuto: catálogo curto respira mais no eixo vertical e dispensa o
card "feature" aleatório, que faria a vitrine parecer vazia.
v73.18 · Havia aqui um `max-width: 1200px`. A intenção era não esticar
demais com poucas peças, mas o efeito era o oposto do desejado: como as
peças continuam ocupando 4 das 12 colunas, apertar o contêiner apertava
os CARDS. Uma loja com 4 peças mostrava cards de 235–250px, enquanto a
mesma loja com 5 peças mostrava 330–335px — quanto menos peças, menores
as fotos, justamente quando há mais espaço para mostrá-las bem. E abaixo
do piso de 300px que o próprio projeto documenta.
Numa casa cuja premissa é "poucas peças perenes", esse não é um caso de
borda: é o estado normal no começo e em qualquer categoria filtrada. O
contêiner volta a seguir `--ed-max`; peças de menos deixam respiro à
direita, que é o comportamento editorial correto — não miniaturas. */
.ed-grid--compact {
padding: clamp(48px, 7vw, 80px) var(--ed-gutter) clamp(72px, 9vw, 120px);
}
.ed-card {
grid-column: span 4;
display: block;
}
.ed-card--feature {
grid-column: span 8;
}
.ed-card__link { display: block; transition: opacity .2s ease; }
.ed-card__link:hover { opacity: .96; }
.ed-card__media {
position: relative;
aspect-ratio: 3 / 4;
background: var(--ed-media);
overflow: hidden;
margin: 0 0 22px;
/* Moldura hairline — dá acabamento de impresso às fotos e segura
imagens muito claras contra o fundo creme. */
box-shadow: inset 0 0 0 1px rgba(var(--ed-shade), .06);
transition: box-shadow .45s ease;
}
/* ─── Vitrine configurável (Settings → Vitrine) ───
Moldura: passe-partout fino via BORDER (não padding) — overflow:hidden
clipa no padding box, então o zoom do hover fica contido dentro da
margem. 4px: a versão de 7px foi julgada grossa. */
.ed--frame .ed-card__media {
border: 4px solid var(--ed-paper);
outline: 1px solid var(--ed-line);
}
/* Nº de atelier: chip de papel translúcido no canto direito (o esquerdo
é do .ed-tag de promo), na ordem da curadoria. Renderizado só quando
a numeração está ligada — sem DOM morto. */
.ed-card__no {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .16em;
color: var(--ink);
padding: 4px 8px;
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 88%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* Convivência com a .ed-tag ("Últimas N", promo): num card estreito as
duas caixas colidiam na mesma linha. Com tag presente, o Nº desce. */
.ed-card__media:has(.ed-tag) .ed-card__no { top: 46px; }
.ed-card__link:hover .ed-card__media {
/* Elevação silenciosa: sombra difusa e quente, sem borda dura. */
box-shadow:
inset 0 0 0 1px rgba(var(--ed-shade), .08),
0 18px 40px -18px rgba(var(--ed-shade), .28);
}
.ed-card--feature .ed-card__media { aspect-ratio: 16 / 11; }
.ed-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
/* Camada de crossfade: nova foto entra por cima, fade-in suave.
A base permanece embaixo até o fade terminar, então é substituída. */
.ed-card__media .ed-card__media-fade {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .45s ease;
will-change: opacity;
z-index: 1;
}
.ed-card__media .ed-card__media-fade.is-in { opacity: 1; }
.ed-card__link:hover .ed-card__media img { transform: scale(1.035); }
.ed-card__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
background: var(--ed-media-grad);
font-family: var(--f-display);
font-style: italic;
font-size: clamp(60px, 8vw, 120px);
color: var(--ed-ph-ink);
line-height: 1;
}
.ed-tag {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
padding: 5px 10px;
/* Papel translúcido + blur: a etiqueta assenta sobre a foto sem
bloquear a peça — mesma linguagem do nav "frosted". */
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 86%, transparent);
-webkit-backdrop-filter: blur(6px) saturate(120%);
backdrop-filter: blur(6px) saturate(120%);
color: var(--ink);
border: 1px solid var(--ed-line);
}
.ed-tag--scarce { color: var(--magenta-deep); border-color: var(--magenta-deep); }
.ed-tag--feature {
top: 14px; left: auto; right: 14px;
background: var(--ink); color: var(--ed-bg); border-color: var(--ink);
}
.ed-tag--sale { color: var(--coral-deep); border-color: var(--coral-deep); }
.ed-card__body { padding: 0 2px; }
.ed-card__head { margin-bottom: 14px; }
.ed-card__name {
font-family: var(--f-display);
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 1.7vw, 26px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.ed-card--feature .ed-card__name {
font-size: clamp(36px, 3.5vw, 52px);
line-height: 1;
letter-spacing: -.02em;
}
.ed-card__meta {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 8px 0 0;
}
.ed-card__variants {
display: grid;
gap: 10px;
margin-bottom: 18px;
}
.ed-swatches {
display: flex; flex-wrap: wrap; gap: 8px;
list-style: none; margin: 0; padding: 0;
}
.ed-swatch {
display: inline-block; /* CORREÇÃO: sem isto, o swatch estático () fica inline e ignora width/height, colapsando */
vertical-align: middle;
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid var(--ed-line);
background: var(--ed-paper);
padding: 2px;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease;
}
.ed-swatch:hover { transform: scale(1.12); border-color: var(--ink); }
.ed-swatch:focus-visible {
outline: 2px solid var(--coral-deep);
outline-offset: 2px;
}
.ed-swatch__dot {
display: block;
width: 100%; height: 100%;
border-radius: 50%;
background: var(--swatch, #d8ccc2);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.ed-swatch--has-img { box-shadow: 0 0 0 2px transparent; }
.ed-swatch--has-img:hover { box-shadow: 0 0 0 1px var(--coral-deep); }
.ed-card__sizes {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0;
}
.ed-card__sizes-label { color: var(--ink); margin-right: 6px; }
.ed-card__foot {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 14px;
border-top: 1px solid var(--ed-line);
}
/* v37 · Grupo de ações à direita do rodapé do card: + sacola (e o cue
whatsapp/instagram no desktop). align-self:center corrige o baseline
do flex pai para o botão redondo. */
.ed-card__foot-actions {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: center;
}
.ed-card__bag {
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--ed-line);
border-radius: 50%;
color: var(--ink-soft);
cursor: pointer;
transition: color .15s ease, border-color .15s ease,
background .15s ease, transform .15s ease;
}
.ed-card__bag svg { width: 17px; height: 17px; }
.ed-card__bag:hover,
.ed-card__bag:focus-visible {
color: var(--coral-deep);
border-color: var(--coral-deep);
background: rgba(var(--ed-glow), .06);
}
.ed-card__bag:active { transform: scale(.92); }
.ed-card--feature .ed-card__foot { padding-top: 18px; }
.ed-price {
/* Fonte display (a mesma dos títulos) tira o preço do registro de
"etiqueta" e o integra à composição. tnum mantém dígitos tabulares.
Cor: o acento vinho da casa — preço é detalhe ativo da vitrine. */
font-family: var(--f-display);
font-size: 16px;
color: var(--coral-deep);
font-feature-settings: "tnum" 1, "lnum" 1;
}
.ed-card--feature .ed-price { font-size: 19px; }
.ed-price__prefix {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ed-muted); margin-right: 6px;
}
.ed-price__old { color: var(--ed-muted); margin-right: 8px; text-decoration: line-through; }
.ed-price__new { color: var(--coral-deep); font-weight: 500; }
.ed-price__discount {
font-family: var(--f-mono);
font-size: .62em;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
margin-left: 6px;
}
.ed-modal__price-old { color: var(--ed-muted); font-weight: 400; margin-right: 6px; }
.ed-modal__price-new { color: var(--coral-deep); font-weight: 600; }
.ed-modal__price-discount {
font-family: var(--f-mono); font-size: .62em; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink); white-space: nowrap; margin-left: 5px;
}
/* Vitrine: "R$" menor e elevado, sem centavos quando o preço é redondo
(a precisão volta na sacola e no pedido, onde importa). */
.ed-price__cur, .pp-price__cur {
font-size: .64em;
vertical-align: .38em;
letter-spacing: .04em;
margin-right: 1px;
}
.ed-price--muted { font-style: italic; color: var(--ed-muted); }
.ed-card__cue {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--coral-deep);
transition: letter-spacing .25s ease, color .15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ed-card__cue svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* Cores nativas do canal — comunica imediatamente onde a conversa acontece. */
.ed-card__cue--whatsapp { color: #25D366; }
.ed-card__cue--instagram {
color: #E4405F; /* magenta Instagram (cor neutra do gradient) */
}
.ed-card__link:hover .ed-card__cue { letter-spacing: .26em; }
/* ─────────── Intermissão curatorial ─────────── */
.ed-intermission {
grid-column: 1 / -1;
padding: clamp(48px, 8vw, 96px) clamp(20px, 8vw, 120px);
text-align: center;
border-top: 1px solid var(--ed-line);
border-bottom: 1px solid var(--ed-line);
}
.ed-intermission__eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 18px;
}
.ed-intermission__text {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.3;
letter-spacing: -.01em;
color: var(--ink);
max-width: 32ch;
margin: 0 auto;
text-wrap: balance;
}
/* ─────────── Empty state ─────────── */
.ed-empty {
grid-column: 1 / -1;
text-align: center;
padding: clamp(80px, 12vw, 140px) 24px;
}
.ed-empty__eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0 0 16px;
}
.ed-empty__title {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 3.5vw, 48px);
line-height: 1.1;
letter-spacing: -.02em;
margin: 0 0 14px;
color: var(--ink);
}
.ed-empty__lede { color: var(--ed-muted); max-width: 38ch; margin: 0 auto 28px; }
.ed-empty__cta {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral-deep);
border-bottom: 1px solid var(--coral-deep);
padding-bottom: 3px;
}
/* v37: seção .ed-manifesto removida junto com o bloco no template. */
/* ─────────── Footer editorial — alma da marca ───────────
Estrutura: hero (marca + manifesto) → newsletter (opcional) →
colunas (atendimento + catálogo) → linha legal + crédito →
botão voltar ao topo.
Princípios:
- Tipografia mostra a marca, não decoração
- Coral discreto como acento (links de canal mantêm cor própria)
- Mobile sem accordion: 2 colunas lado a lado, tudo visível
- Padding generoso para respirar; gradient sutil ink no topo
*/
.ed-foot {
position: relative;
background: var(--ed-foot-bg);
color: rgb(var(--ed-foot-ink));
/* Antes: padding 64-110 / 28. Reduzido para ~40 top, manter 24 bottom.
Footer não é página em si — não precisa de respiro de página. */
padding: clamp(36px, 4.4vw, 56px) clamp(24px, 6vw, 80px) 20px;
overflow: hidden;
}
/* Linha decorativa coral no topo do footer — assinatura visual */
.ed-foot::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 64px;
height: 1px;
background: var(--ed-foot-accent);
opacity: .5;
}
/* ─── Hero do footer: marca + tagline (rúbrica editorial) ───
Antes tinha "credo" também; foi removido por redundância (tagline
já comunica, e /sobre tem manifesto completo). Wordmark menor pra
não eclipsar o header da página. */
.ed-foot__hero {
text-align: center;
max-width: 640px;
margin: 0 auto clamp(18px, 2.4vw, 24px);
}
.ed-foot__wordmark {
display: inline-block;
font-family: var(--f-display);
font-style: italic;
/* Antes 40-60px (ainda imponente). Agora 32-40px — assinatura, não eco. */
font-size: clamp(32px, 3.5vw, 40px);
line-height: 1;
letter-spacing: -0.02em;
/* cor: ver `.ed .ed-foot__wordmark` em style-refinements.css — aqui a
regra é (0,1,0) e perderia para `.ed a`. */
text-decoration: none;
margin-bottom: 8px;
}
.ed-foot__wordmark em {
font-style: italic;
color: var(--ed-foot-accent);
}
.ed-foot__tagline {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(13px, 1.1vw, 15px);
color: rgba(var(--ed-foot-ink-strong), .78); /* sutil, suporte à marca, não competidor */
margin: 0;
line-height: 1.5;
}
/* .ed-foot__credo permanece definido caso outro template ainda use,
mas não é mais renderizado em catalog/about. Sem prejuízo. */
.ed-foot__credo {
font-size: 12px;
line-height: 1.6;
color: var(--ed-foot-ink-soft);
margin: 0 auto;
max-width: 360px;
font-style: italic;
font-family: var(--f-display);
}
/* ─── Newsletter (opcional) ─── */
.ed-foot__newsletter {
text-align: center;
max-width: 440px;
margin: 0 auto clamp(40px, 6vw, 64px);
padding: clamp(28px, 4vw, 40px) 0;
border-top: 1px solid rgba(var(--ed-foot-ink), .08);
border-bottom: 1px solid rgba(var(--ed-foot-ink), .08);
}
.ed-foot__newsletter-eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ed-foot-accent);
margin: 0 0 10px;
}
.ed-foot__newsletter-intro {
font-family: var(--f-display);
font-style: italic;
font-size: 17px;
color: rgb(var(--ed-foot-ink-strong));
margin: 0 0 18px;
line-height: 1.4;
}
.ed-foot__newsletter-form {
display: flex;
gap: 0;
align-items: stretch;
background: rgba(var(--ed-foot-ink), .04);
border: 1px solid rgba(var(--ed-foot-ink), .12);
border-radius: 0;
overflow: hidden;
transition: border-color .2s ease;
}
.ed-foot__newsletter-form:focus-within {
border-color: var(--ed-foot-accent);
}
.ed-foot__newsletter-form input {
flex: 1;
background: transparent;
border: 0;
padding: 14px 16px;
color: rgb(var(--ed-foot-ink-strong));
font-family: var(--f-display);
font-style: italic;
font-size: 15px;
outline: none;
}
.ed-foot__newsletter-form input::placeholder {
color: rgba(var(--ed-foot-ink-strong), .4);
font-style: italic;
}
.ed-foot__newsletter-form button {
background: transparent;
border: 0;
border-left: 1px solid rgba(var(--ed-foot-ink), .12);
padding: 0 18px;
color: var(--ed-foot-accent);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: lowercase;
transition: background .15s ease, color .15s ease;
}
.ed-foot__newsletter-form button:hover {
background: rgba(var(--ed-foot-ink), .08);
color: rgb(var(--ed-foot-ink-strong));
}
.ed-foot__newsletter-form button svg {
width: 14px;
height: 14px;
}
.ed-foot__newsletter-status {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: lowercase;
margin: 12px 0 0;
min-height: 14px;
color: rgba(var(--ed-foot-ink), .6);
}
/* v72.5 · Eram hex cravados: no rodapé claro o verde dava 1,8:1. Passam a
token, invertido junto com a superfície. */
.ed-foot__newsletter-status.is-success { color: var(--ed-foot-ok); }
.ed-foot__newsletter-status.is-error { color: var(--ed-foot-err); }
.ed-foot__newsletter-status.is-pending { color: rgba(var(--ed-foot-ink), .5); }
/* ─── Colunas funcionais (Atendimento + Catálogo) ─── */
.ed-foot__cols {
display: grid;
/* 1.4fr para CATÁLOGO porque tem mais itens; 1fr para ATENDIMENTO */
grid-template-columns: 1fr 1.4fr;
/* Reduzido o gap entre colunas para liberar espaço pros itens. */
gap: clamp(24px, 4vw, 56px);
/* Antes: 1080px (catálogo quebrava em 2 linhas em desktop comum).
Agora: até 1320px — cabe a lista inteira em uma linha. */
max-width: 1320px;
/* Margens compactas para reduzir altura total. */
margin: 0 auto clamp(20px, 2.8vw, 28px);
padding-top: clamp(16px, 2.4vw, 24px);
border-top: 1px solid rgba(var(--ed-foot-ink), .08);
}
.ed-foot__col {
min-width: 0;
/* Layout: label à esquerda + lista inline à direita.
Antes: label em cima, lista em baixo (empilhado). Agora horizontal. */
display: flex;
align-items: baseline;
gap: 24px;
}
.ed-foot__label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ed-foot-accent);
margin: 0; /* removido margin-bottom (não há mais empilhamento) */
font-weight: 500;
flex-shrink: 0; /* label nunca encolhe */
white-space: nowrap; /* label sempre em uma linha */
}
.ed-foot__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row; /* desktop: lado a lado, separados por bullet */
flex-wrap: nowrap; /* desktop: força 1 linha — quebrar fica feio com bullets */
align-items: baseline;
gap: 0; /* separator faz o espaço */
min-width: 0; /* permite ellipsis se realmente passar */
}
/* Separador entre itens horizontais — bullet sutil em coral.
Margens reduzidas (8px) pra liberar espaço para mais itens em uma linha. */
.ed-foot__list li + li::before {
content: '·';
color: var(--ed-foot-accent);
margin: 0 8px;
opacity: .55;
font-weight: 600;
}
.ed-foot__list li {
white-space: nowrap; /* item não quebra no meio (ex: "Coleção atual" inteiro) */
}
.ed-foot__list a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px; /* antes 13.5 — economia leve para caber mais */
padding: 6px 0;
color: rgb(var(--ed-foot-ink));
text-decoration: none;
transition: color .15s ease, transform .15s ease;
font-family: var(--f-display);
font-style: italic;
}
.ed-foot__list a:hover,
.ed-foot__list a:focus {
color: rgb(var(--ed-foot-ink-strong));
/* sem translate — em layout horizontal ficaria estranho */
}
.ed-foot__list svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: .7;
transition: opacity .15s ease, color .15s ease;
}
.ed-foot__list a:hover svg { opacity: 1; }
/* Hover em cor do canal — sutil reconhecimento */
.ed-foot__link--wa:hover svg { color: #25D366; opacity: 1; }
.ed-foot__link--ig:hover svg { color: #E4405F; opacity: 1; }
/* ─── Linha legal: copyright + assinatura ─── */
.ed-foot__legal-row {
max-width: 1320px; /* alinhado com cols */
margin: 0 auto;
padding-top: 14px; /* linha legal mais compacta */
border-top: 1px solid rgba(var(--ed-foot-ink), .06);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ed-foot__legal {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(var(--ed-foot-ink), .64);
margin: 0;
}
.ed-foot__legal-aside {
font-family: var(--f-display);
font-style: italic;
font-size: 13px;
color: rgba(var(--ed-foot-ink), .68);
margin: 0;
}
.ed-foot__legal-row--center {
justify-content: center;
text-align: center;
}
.ed-foot__legal-row--center .ed-foot__legal {
text-align: center;
}
.ed-foot__credit {
max-width: 1200px;
margin: 8px auto 0;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .12em;
text-transform: lowercase;
/* v72.5 · .3 dava 2,2:1 — ilegível em qualquer tom. .7 é o piso medido
para 4,5:1 com a tinta suave sobre o chumbo, o mais claro dos escuros. */
color: rgba(var(--ed-foot-ink), .7);
text-align: center;
}
.ed-foot__origin {
max-width: 1320px;
margin: 6px auto 0;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(var(--ed-foot-ink), .64);
text-align: center;
}
/* ─── Botão "voltar ao topo" — sutil canto inferior direito ─── */
.ed-foot__top {
position: absolute;
right: clamp(24px, 5vw, 60px);
bottom: 24px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--ed-foot-ink), .12);
border-radius: 50%;
text-decoration: none;
transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
/* v72.5 · A cor vivia dentro de `.ed-foot__top` (0,1,0) e perdia para
`.ed a` (0,1,1): a declaração era código morto e a seta saía em tinta
cheia. Com o prefixo `.ed` ela passa a valer — mesma pegadinha da v71. */
.ed .ed-foot__top { color: rgba(var(--ed-foot-ink), .7); }
.ed-foot__top svg { width: 14px; height: 14px; }
.ed-foot__top:hover {
border-color: var(--ed-foot-accent);
color: var(--ed-foot-accent);
transform: translateY(-2px);
}
/* ─── Mobile: 2 colunas lado a lado, sem accordion ─── */
@media (max-width: 720px) {
.ed-foot {
padding: 40px 24px 64px; /* rodapé mais compacto, preservando respiro do botão */
}
.ed-foot__wordmark { font-size: 36px; }
.ed-foot__tagline { font-size: 13px; }
/* Colunas continuam 2 lado a lado em mobile, com gap menor */
.ed-foot__cols {
gap: 18px;
padding-top: 18px;
margin-bottom: 24px;
}
/* Em mobile, REVERTER o layout horizontal da coluna (label à esquerda
+ lista à direita) — em coluna estreita os dois textos se sobrepõem.
Volta a label em cima, lista embaixo (layout original). */
.ed-foot__col {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.ed-foot__label { font-size: 9.5px; margin-bottom: 12px; letter-spacing: .2em; }
/* Em mobile lista volta a vertical (alvo de toque maior, sem texto cortado). */
.ed-foot__list {
flex-direction: column;
flex-wrap: nowrap;
gap: 4px;
}
.ed-foot__list li { white-space: normal; }
.ed-foot__list li + li::before { content: none; }
.ed-foot__list a { font-size: 13px; padding: 5px 0; }
/* Newsletter mais compacto */
.ed-foot__newsletter {
padding: 24px 0;
margin-bottom: 32px;
}
.ed-foot__newsletter-intro { font-size: 15px; }
.ed-foot__newsletter-form input { font-size: 16px; padding: 12px 14px; } /* 16px evita zoom iOS */
.ed-foot__newsletter-form button { padding: 0 14px; }
.ed-foot__newsletter-form button span { display: none; } /* só ícone no mobile */
/* Legal row empilhada */
.ed-foot__legal-row {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
}
.ed-foot__legal { text-align: center; }
/* Botão topo recolhido pra centro inferior */
.ed-foot__top {
right: 50%;
bottom: 24px;
transform: translateX(50%);
}
.ed-foot__top:hover {
transform: translateX(50%) translateY(-2px);
}
}
/* iPhone SE e similares: ajustes finos para garantir respiro */
@media (max-width: 380px) {
.ed-foot__wordmark { font-size: 32px; }
.ed-foot__cols { gap: 16px; }
.ed-foot__list svg { width: 12px; height: 12px; }
}
/* ─────────── Modal de ficha ─────────── */
.ed-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.ed-modal.is-open { display: flex; }
.ed-modal__backdrop {
position: absolute; inset: 0;
background: rgba(var(--ed-shade), .66);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ed-modal__panel {
position: relative;
background: var(--ed-paper);
max-width: 980px; width: 100%;
/* v73.39 · O modal rápido precisa caber como um painel completo dentro da
viewport. Só max-height não bastava: em grid, o corpo mantinha a altura do
conteúdo, empurrava o painel além da tela e a borda inferior era cortada.
Ao fixar a altura útil e permitir que o texto role por dentro, a foto não
perde o topo e a narrativa não some na base. */
height: min(92vh, calc(100vh - 48px));
max-height: calc(100vh - 48px);
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: stretch;
box-shadow: 0 40px 100px rgba(0,0,0,.4);
animation: ed-modal-in .26s cubic-bezier(.2,.7,.2,1);
}
@keyframes ed-modal-in { from { opacity:0; transform: translateY(12px) } to { opacity:1; transform:none } }
/* ─────────── Bottom sheet em mobile (≤ 820px) ─────────── */
@media (max-width: 820px) {
/* Container alinha o panel embaixo da tela em vez de centralizar */
.ed-modal {
padding: 0;
align-items: flex-end;
justify-content: stretch;
}
/* Panel sobe de baixo, ocupa quase toda a altura, com cantos superiores
arredondados e drag handle visual no topo. */
.ed-modal__panel {
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
height: auto;
max-height: 92vh;
border-radius: 16px 16px 0 0;
animation: ed-sheet-in .32s cubic-bezier(.2, .8, .2, 1);
box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
/* permite scroll do conteúdo dentro do sheet, sem rolar a página de fundo */
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Drag handle visual (não funcional, só dica visual de bottom sheet) */
.ed-modal__panel::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
background: var(--ed-line);
border-radius: 2px;
pointer-events: none;
z-index: 4;
}
/* Topbar de ícones recua para abrir espaço para o handle */
.ed-modal__topbar {
top: 18px;
right: 14px;
}
/* A dimensão da foto do sheet é definida junto das regras-base da galeria,
mais abaixo, para não ser sobrescrita pela cascata. */
/* Body rolável dentro do sheet */
.ed-modal__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 22px 28px;
}
/* CTA sticky do rodapé: regra movida para DEPOIS das regras base de
.ed-modal__cta-row (mesma especificidade — aqui, antes no arquivo,
a base vencia e anulava margin/padding do mobile). */
}
@keyframes ed-sheet-in {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Topbar do modal: ícones discretos no canto superior direito ─── */
.ed-modal__topbar {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
gap: 4px;
align-items: center;
}
.ed-modal__icon-btn {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border-radius: 50%;
border: 0;
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 92%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ink);
cursor: pointer;
transition: background .15s ease, color .15s ease, transform .15s ease;
text-decoration: none;
padding: 0;
}
.ed-modal__icon-btn svg {
width: 16px;
height: 16px;
display: block;
}
.ed-modal__icon-btn:hover {
background: var(--ink);
color: var(--ed-paper);
transform: translateY(-1px);
}
.ed-modal__icon-btn:focus-visible {
outline: 2px solid var(--coral-deep);
outline-offset: 2px;
}
.ed-modal__media {
margin: 0;
background: var(--ed-media);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
min-height: 0;
height: 100%;
/* v73.39 · A mídia agora ocupa a coluna inteira do painel. O corte não é
controlado pela foto, e sim pela própria viewport; a imagem continua
inteira via object-fit: contain. */
aspect-ratio: auto;
max-height: none;
}
/* contain (não cover): a peça aparece INTEIRA no detalhe — cover cortava
fotos retrato (cliente reportou). As faixas do letterbox ficam no tom de
mídia do tema, lendo como fundo de estúdio, não como buraco. */
.ed-modal__media { background: var(--ed-media); position: relative; touch-action: pan-y; }
.ed-modal__media img {
width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block;
transition: opacity .18s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.ed-modal__media img.is-switching { opacity: 0; transform: scale(.992); }
/* Navegação consolidada da galeria no modal rápido. O card já informa a
quantidade de fotos; agora a mesma coleção pode ser percorrida sem sair
do catálogo. Swipe é o gesto principal no celular; setas/dots são fallback
visível e acessível. */
.ed-modal__gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 92%, transparent);
color: var(--ink);
display: grid;
place-items: center;
box-shadow: 0 4px 18px rgba(0,0,0,.12);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
}
.ed-modal__gallery-nav[hidden] { display: none; }
.ed-modal__gallery-nav--prev { left: 12px; }
.ed-modal__gallery-nav--next { right: 12px; }
.ed-modal__gallery-nav svg { width: 20px; height: 20px; }
.ed-modal__gallery-nav:focus-visible,
.ed-modal__gallery-dot:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }
.ed-modal__gallery-dots {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 2;
display: flex;
gap: 7px;
padding: 7px 9px;
border-radius: 999px;
background: rgba(255,255,255,.74);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.ed-modal__gallery-dots:empty { display: none; }
.ed-modal__gallery-dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 50%;
padding: 0;
background: rgba(20,20,20,.28);
cursor: pointer;
}
.ed-modal__gallery-dot.is-active { background: var(--ink); transform: scale(1.22); }
.ed-modal__gallery-count {
position: absolute;
left: 14px;
top: 14px;
z-index: 2;
padding: 6px 9px;
border-radius: 999px;
background: rgba(255,255,255,.82);
color: var(--ink);
font: 600 10px/1 var(--f-mono);
letter-spacing: .08em;
}
.ed-modal__gallery-count[hidden] { display: none; }
@media (max-width: 820px) {
.ed-modal__content { flex: 1 1 auto; min-height: 0; }
.ed-modal__floating-cta { display: none !important; }
/* Esta regra vem DEPOIS da base desktop: no bottom sheet a moldura tem
altura fixa e compacta; trocar de foto não altera as bordas. */
.ed-modal__media {
flex: 0 0 auto;
height: clamp(220px, 36vh, 320px);
min-height: 0;
max-height: none;
aspect-ratio: auto;
}
.ed-modal__gallery-nav { width: 40px; height: 40px; }
.ed-modal__gallery-nav--prev { left: 8px; }
.ed-modal__gallery-nav--next { right: 8px; }
.ed-modal__gallery-count { top: auto; bottom: 14px; left: 14px; }
.ed-modal__gallery-dots { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.ed-modal__media img,
.ed-modal__gallery-dot { transition: none; }
.ed-modal__media img.is-switching { opacity: 1; transform: none; }
}
.ed-modal__content {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ed-modal__floating-cta { display: none; }
@media (min-width: 821px) {
/* v73.42 · A ação principal é um dock real da coluna direita, não um
overlay sobre a narrativa. Assim “Sobre a peça” é lido primeiro, o
corpo pode rolar e resumo + compra permanecem sempre visíveis abaixo. */
.ed-modal__body {
flex: 1 1 auto;
min-height: 0;
padding-bottom: clamp(22px, 3vw, 34px);
}
.ed-modal__floating-cta {
position: relative;
right: auto;
bottom: auto;
z-index: 4;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: auto;
padding: 12px clamp(28px, 4vw, 44px) clamp(18px, 2.2vw, 28px);
background: var(--ed-paper);
background: linear-gradient(to bottom, color-mix(in srgb, var(--ed-paper) 84%, transparent), var(--ed-paper) 30%);
border-top: 1px solid var(--ed-line);
border-top: 1px solid color-mix(in srgb, var(--ed-line) 78%, transparent);
pointer-events: none;
}
.ed-modal__floating-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
min-height: 34px;
padding: 7px 14px;
border: 1px solid var(--ed-line);
border: 1px solid color-mix(in srgb, var(--ed-line) 78%, transparent);
border-radius: 999px;
background: var(--ed-paper);
color: var(--ink);
pointer-events: auto;
}
.ed-modal__floating-summary[hidden] { display: none; }
.ed-modal__floating-summary span {
display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
font-size: 12px; white-space: nowrap;
}
.ed-modal__floating-summary b {
font-family: var(--f-mono); font-size: 9px; font-weight: 500;
letter-spacing: .10em; text-transform: uppercase; color: var(--ed-muted);
}
.ed-modal__floating-summary strong { font-size: 12px; font-weight: 600; color: var(--ink); }
.ed-modal__floating-summary em { font-style: normal; color: var(--ed-muted); }
.ed-modal__floating-cta .product-choice-cta {
width: 100%; margin: 0; pointer-events: auto;
}
.ed-modal__cta-row { align-items: flex-start; }
}
.ed-modal__body {
padding: clamp(28px, 4vw, 44px);
overflow-y: auto;
min-height: 0;
min-width: 0;
display: flex; flex-direction: column; gap: 18px;
}
.ed-modal__h--about { margin-bottom: 9px; }
.ed-modal__eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0;
}
.ed-modal__title {
font-family: var(--f-display);
font-weight: 400; font-style: italic;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.05;
letter-spacing: -.015em;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.ed-modal__price {
font-size: 18px;
color: var(--coral-deep);
font-weight: 500;
margin: -4px 0 0;
}
.ed-modal__section { margin-top: 6px; }
.ed-modal__section--lede p {
font-family: var(--f-display);
font-size: 17px;
font-style: italic;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
.ed-modal__h {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 8px;
}
.ed-modal__section > div,
.ed-modal__section > p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.ed-modal__meta {
margin: 8px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--ed-line);
display: grid;
gap: 10px;
}
.ed-modal__meta dt {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0;
}
.ed-modal__meta dd {
margin: 2px 0 0;
font-size: 14px;
color: var(--ink);
}
/* ─── conteúdo dinâmico injetado pelo JS no modal ─── */
.ed-comp-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 14px;
}
.ed-comp-bar__seg {
height: 100%;
}
.ed-comp-legend {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.ed-comp-legend li {
display: grid;
grid-template-columns: 14px 40px 1fr;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--ink-soft);
}
.ed-comp-legend__dot {
width: 10px; height: 10px;
border-radius: 50%;
display: inline-block;
}
.ed-comp-legend__pct {
font-family: var(--f-mono);
font-size: 11px;
color: var(--ink);
font-feature-settings: "tnum" 1;
}
.ed-modal__extras {
margin-top: 14px;
display: grid;
gap: 8px;
}
.ed-modal__row {
font-size: 14px;
color: var(--ink-soft);
padding: 6px 0;
border-bottom: 1px solid var(--ed-line);
}
.ed-modal__row:last-child { border-bottom: 0; }
.ed-modal__row-lbl {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ed-muted);
margin-right: 8px;
}
.ed-modal__block-lg {
font-size: 15px;
color: var(--ink);
}
.ed-wash {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 0;
}
.ed-wash__icon {
width: 44px; height: 44px;
color: var(--ink);
flex-shrink: 0;
}
.ed-wash__label {
font-size: 14px;
color: var(--ink);
}
.ed-modal__tip {
margin-top: 12px;
font-size: 12.5px;
color: var(--ed-muted);
padding: 10px 12px;
background: var(--ed-bg);
border-left: 2px solid var(--coral-deep);
font-style: italic;
}
.ed-modal__cta-row {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid var(--ed-line);
}
.ed-modal__cta {
width: 100%;
background: var(--ink);
color: var(--ed-bg);
border: 0;
padding: 16px 20px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s ease;
}
.ed-modal__cta:hover { background: var(--coral-deep); }
/* ─── Mobile: CTA sticky no rodapé do bottom sheet ───
Colocado APÓS as regras base (mesma especificidade — antes, a base
sobrescrevia margin-top/padding-top e quebrava o layout).
Sem margem inferior negativa: com sticky bottom:0, margem negativa
fazia o rodapé flutuar acima da posição natural mesmo no fim do
scroll, cobrindo as últimas linhas do conteúdo. Agora a extensão de
scroll inclui o rodapé inteiro; no fim do scroll nada fica coberto. */
@media (max-width: 820px) {
/* O respiro inferior passa a ser do próprio rodapé (padding + safe
area), não do body — senão sobraria faixa de fundo sob o rodapé. */
.ed-modal__body { padding-bottom: 0; }
.ed-modal__cta-row {
position: sticky;
bottom: 0;
margin: 14px -22px 0;
padding: 14px 22px max(14px, env(safe-area-inset-bottom));
background: var(--ed-paper);
border-top: 1px solid var(--ed-line);
z-index: 2;
}
}
/* ───────────────────── Responsivo ─────────────────────── */
/* Tablet (entre 720 e 1100): 2 colunas. Feature ocupa 100%. */
@media (max-width: 1100px) {
.ed-card { grid-column: span 6; }
.ed-card--feature { grid-column: span 12; }
}
/* Hero cover: split vira empilhado em telas estreitas */
@media (max-width: 900px) {
.ed-hero--cover {
grid-template-columns: 1fr;
min-height: auto;
}
.ed-hero--cover .ed-hero__inner {
padding: clamp(48px, 8vw, 72px) var(--ed-gutter) clamp(36px, 6vw, 56px);
}
.ed-hero__cover {
border-left: 0;
border-top: 1px solid var(--ed-line);
}
.ed-hero__cover-media { min-height: clamp(320px, 50vh, 480px); }
}
@media (max-width: 720px) {
/* Grid em 2 colunas no mobile — dobra as peças por tela e usa a largura.
O card de destaque (feature) ocupa a linha inteira para dar ritmo. */
.ed-grid {
/* vertical > horizontal: leitura de editorial, não de planilha */
gap: 40px 14px;
padding: clamp(10px, 3vw, 18px) var(--ed-gutter) clamp(48px, 9vw, 96px);
}
.ed-card { grid-column: span 6; }
.ed-card--feature { grid-column: 1 / -1; }
.ed-card__media { margin-bottom: 12px; }
.ed-card__name { font-size: 17px; }
/* Meta com mono caps cansa em mobile — reduz letter-spacing e tamanho. */
.ed-card__meta { font-size: 9.5px; letter-spacing: .1em; margin-top: 5px; }
/* Card enxuto no 2-up: tamanho e o "cue" decorativo do canal saem da grade
(continuam no modal que abre ao tocar a peça). Reduz poluição. */
.ed-card__variants { gap: 8px; margin-bottom: 12px; }
.ed-card__sizes { display: none; }
.ed-card__foot .ed-card__cue { display: none; }
.ed-card__foot { padding-top: 10px; }
/* Nav: brand maior, links compactos.
Em mobile a nav NÃO é sticky — junto com os filtros sticky ela comia
~110px permanentes da tela e atrapalhava a rolagem. A nav rola com a
página; só a barra de filtros (busca + categorias) permanece fixa. */
.ed-nav {
position: static;
grid-template-columns: auto 1fr auto;
padding: 14px var(--ed-gutter);
}
.ed-nav__links { font-size: 10px; gap: 16px; }
.ed-nav__brand-mark { font-size: calc(26px * var(--nav-scale, 1.15)); } /* v39 */
/* Hero ajustes mobile */
.ed-hero__feature-block { max-width: 100%; margin-bottom: 18px; }
.ed-hero__cover-cap { left: 16px; bottom: 16px; padding: 12px 14px; }
/* CTAs empilham em mobile com largura cheia para alvo de toque grande */
.ed-hero__cta-group {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 320px;
gap: 8px;
}
.ed-hero__cta {
justify-content: center;
padding: 16px 24px;
}
/* Filtros sticky no topo ao rolar (UX comum em catálogos mobile) */
.ed-filters {
gap: 8px !important; /* !important vence o style-refinements.css (16px) escrito p/ DOM antigo */
position: sticky;
top: 0; /* nav não é mais sticky em mobile — filtros grudam no topo real */
z-index: 40;
background: var(--ed-bg);
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ed-line);
margin-bottom: 0;
overflow: visible !important;
}
/* Linha de filtros: chips em UMA linha à esquerda + lupa fixa à direita. */
.ed-filters__row {
flex-wrap: nowrap !important;
align-items: center;
gap: 6px;
overflow: visible !important;
}
.ed-filters__row .ed-search-details { margin-left: 0; flex: 0 0 auto; }
/* A linha "ordenar" tinha margin-top 12px QUE SOMAVA ao gap do grid
(espaçamento duplo). Zera no mobile — o gap já separa as linhas. */
.ed-filters__row--meta { margin-top: 0; }
/* Search ocupa toda largura, sem max-width */
.ed-search { max-width: 100%; }
.ed-search input { font-size: 16px; } /* evita zoom iOS */
/* Chips de categoria em UMA LINHA, sem scroll e sem wrap. Fonte e padding
reduzidos para caber todas as categorias + lupa na largura do mobile.
Os chips encolhem proporcionalmente (flex-shrink) e o texto trunca com
reticências só no caso extremo de não caber. */
.ed-filters__cats {
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap !important;
overflow: hidden !important;
gap: 2px !important;
padding-bottom: 0;
}
.ed-filters__cats::-webkit-scrollbar { display: none; }
.ed-filters__cats .ed-chip {
flex: 0 1 auto;
min-width: 0;
min-height: 30px;
padding: 5px 8px !important;
font-size: 10px !important;
letter-spacing: .04em !important;
border: 0 !important; /* sem pílula no mobile: vira texto enxuto */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Ativo: sublinhado em vez de fundo (combina com o visual sem borda). */
.ed-filters__cats .ed-chip.is-active {
background: transparent !important;
color: var(--ink) !important;
border-bottom: 1.5px solid var(--coral-deep) !important;
border-radius: 0 !important;
}
/* Swatch no 2-up: menor que os 40px antigos para equilibrar o card enxuto.
O alvo de toque principal é o card inteiro (abre o modal); o swatch é
secundário (troca a foto), então ~30px é suficiente e fica mais bonito. */
.ed-swatches { gap: 8px; }
.ed-swatch {
width: 30px;
height: 30px;
padding: 4px;
}
.ed-swatch__dot {
/* dot visual permanece compacto dentro do alvo maior */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
/* Modal: padding interno menor e botões com altura mínima */
.ed-modal__cta {
min-height: 56px;
font-size: 13px;
}
/* Footer mais respirado */
.ed-foot {
gap: 32px;
padding: clamp(40px, 7vw, 64px) var(--ed-gutter) 24px;
}
/* Footer: duas colunas lado a lado no mobile (Atendimento + Catálogo),
aproveitando a largura. Cada coluna com label em cima e lista vertical. */
.ed-foot__cols {
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
}
.ed-foot__col {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.ed-foot__list {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Sem o separador "·" entre itens quando empilhados verticalmente. */
.ed-foot__list li + li::before { content: none; }
}
/* iOS Safari notch — segura padding nas pontas em fullscreen */
@supports (padding: env(safe-area-inset-left)) {
.ed-nav,
.ed-filters,
.ed-grid,
.ed-foot,
.ed-hero {
padding-left: max(var(--ed-gutter), env(safe-area-inset-left));
padding-right: max(var(--ed-gutter), env(safe-area-inset-right));
}
}
/* ───────────────────── Reveal no scroll ─────────────────
Os cards entram no quadro com um fade-up curto e cadenciado,
como páginas viradas de um lookbook. Gate por JS: sem JS (ou
com reduced-motion) nada se esconde — o grid aparece inteiro. */
.ed-grid.ed-reveal-ready .ed-card {
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s cubic-bezier(.22, .61, .36, 1),
transform .6s cubic-bezier(.22, .61, .36, 1);
transition-delay: var(--reveal-delay, 0s);
}
.ed-grid.ed-reveal-ready .ed-card.is-revealed {
opacity: 1;
transform: none;
}
/* ───────────────────── Reduced motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
.ed-card__media img,
.ed-card__cue,
.ed-swatch,
.ed-modal__panel { transition: none; animation: none; }
.ed-grid.ed-reveal-ready .ed-card {
opacity: 1; transform: none; transition: none;
}
}
/* ─────────── Sort menu (compacto) ───────────
Substitui o trio de links que ocupava linha inteira.
nativo, semântico, sem JS. Posiciona-se à direita dos chips de
categoria em desktop; sob eles em mobile. */
.ed-sort-menu {
position: relative;
align-self: center;
}
.ed-sort-menu summary { list-style: none; }
.ed-sort-menu summary::-webkit-details-marker { display: none; }
.ed-sort-menu__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
/* Rótulos de 2 palavras ("maior preço") quebravam em 2 linhas quando a
faixa de tamanhos ao lado espremia o grupo — o texto transbordava o
botão. Controle de UI não quebra nem encolhe; quem cede é o scroller
de tamanhos (overflow-x). */
white-space: nowrap;
cursor: pointer;
user-select: none;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: lowercase;
color: var(--ed-muted);
padding: 8px 4px;
transition: color .15s ease;
}
.ed-sort-menu__trigger:hover { color: var(--ink); }
.ed-sort-menu__label { color: var(--ed-muted); }
.ed-sort-menu__current {
color: var(--ink);
font-weight: 500;
}
.ed-sort-menu__chevron {
width: 6px; height: 6px;
border-right: 1.4px solid currentColor;
border-bottom: 1.4px solid currentColor;
transform: rotate(45deg) translateY(-1px);
margin-left: 2px;
transition: transform .2s ease;
}
.ed-sort-menu[open] .ed-sort-menu__chevron {
transform: rotate(-135deg) translateY(-1px);
}
.ed-sort-menu__panel {
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
min-width: 180px;
background: var(--ed-bg);
border: 1px solid var(--ed-line);
border-radius: 4px;
padding: 6px 0;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
z-index: 50;
}
.ed-sort-menu__item {
display: block;
padding: 10px 16px;
font-family: var(--f-display);
font-style: italic;
font-size: 14px;
color: var(--ed-muted);
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.ed-sort-menu__item:hover {
background: var(--ed-surface-2);
color: var(--ink);
}
.ed-sort-menu__item.is-active {
color: var(--ink);
position: relative;
}
.ed-sort-menu__item.is-active::before {
content: '·';
position: absolute;
left: 7px;
color: var(--coral-deep);
font-size: 18px;
line-height: 1;
top: 50%;
transform: translateY(-50%);
}
@keyframes ed-sheet-up {
from { transform: translateY(28px); opacity: .5; }
to { transform: none; opacity: 1; }
}
@keyframes ed-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ed-size-menu[open]::before,
.ed-size-menu[open] .ed-size-menu__panel { animation: none; }
}
/* ── Filtro de tamanho: gêmeo do ordenar ──
Desktop: popover com chips (quebram linha — GG, GX, 10 tamanhos, tanto
faz). Mobile: vira GAVETA de baixo, padrão que a loja já usa na escolha
de cor/tamanho da peça. */
.ed-size-menu__panel { min-width: 220px; padding: 12px 14px; }
.ed-size-menu__title {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0 0 10px;
}
.ed-size-menu__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* is-active no painel: mesmo vocabulário do chip de categoria ativo */
.ed-size-menu__chips .ed-chip.is-active {
background: var(--ink);
color: var(--ed-bg);
border-color: var(--ink);
}
@media (max-width: 720px) {
/* backdrop: clique nele cai no próprio (pseudo-elemento) e o
JS de clique-fora fecha; ver script no template. */
.ed-size-menu[open]::before {
content: "";
position: fixed;
inset: 0;
background: rgba(var(--ed-shade), .42);
z-index: 90;
animation: ed-backdrop-in .2s ease;
}
.ed-size-menu[open] .ed-size-menu__panel {
/* Desliza de baixo: sem movimento a gaveta "brota" do nada e o olho
não liga o toque (no topo) à resposta (embaixo). A trilha do
deslize é o que torna a causalidade legível. */
animation: ed-sheet-up .28s cubic-bezier(.2, .7, .3, 1);
position: fixed;
left: 0; right: 0; bottom: var(--ed-lgpd-h, 0px); top: auto;
margin: 0;
border: 0;
border-top: 1px solid var(--ed-line);
border-radius: 16px 16px 0 0;
padding: 20px 22px calc(22px + env(safe-area-inset-bottom));
box-shadow: 0 -14px 44px rgba(0, 0, 0, .22);
z-index: 100;
}
.ed-size-menu[open] .ed-size-menu__chips { gap: 10px; }
.ed-size-menu[open] .ed-size-menu__chips .ed-chip {
min-height: 40px; /* alvo de toque confortável na gaveta */
padding: 9px 16px;
font-size: 12px;
}
}
/* Mobile: trigger menor mas painel mais largo */
@media (max-width: 720px) {
.ed-sort-menu__panel {
right: auto;
left: 0;
min-width: 200px;
}
.ed-sort-menu__trigger {
padding: 10px 4px;
font-size: 11px;
}
}
/* ─────────── Filtros refinados (busca colapsável) ───────────
Antes: search ocupava linha cheia no topo. Agora: chips de
categoria à esquerda, ícone de busca à direita que expande
ao clicar. Ordenação só aparece se há > 4 produtos. */
.ed-filters__row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
/* .ed-filters é GRID no mobile (só vira flex ≥721px). Item de grid tem
min-width: auto — se recusa a encolher abaixo do próprio conteúdo.
Os chips de categoria empurravam esta linha para 528px numa tela de
360px e a página inteira ganhava scroll lateral. */
min-width: 0;
}
.ed-filters__row--meta {
margin-top: 12px;
justify-content: space-between;
font-family: var(--f-mono);
}
/* Search colapsável */
.ed-search-details {
margin-left: auto;
flex-shrink: 0;
}
.ed-search-details summary { list-style: none; cursor: pointer; }
.ed-search-details summary::-webkit-details-marker { display: none; }
.ed-search-details__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--ed-muted);
transition: background .15s ease, color .15s ease;
}
.ed-search-details__trigger:hover {
background: var(--ed-surface-2);
color: var(--ink);
}
.ed-search-details__trigger svg { width: 16px; height: 16px; }
.ed-search-details[open] .ed-search-details__trigger {
background: var(--ink);
color: var(--ed-bg);
}
/* Quando aberto, search expande */
.ed-search--collapsed {
position: absolute;
right: var(--ed-gutter);
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
background: var(--white);
border: 1px solid var(--ed-line);
border-radius: var(--r-pill, 999px);
padding: 6px 14px;
width: clamp(220px, 80vw, 360px);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
z-index: 50;
}
.ed-search--collapsed input {
flex: 1;
border: 0;
background: transparent;
font-size: 14px;
outline: none;
font-family: inherit;
color: var(--ink);
}
.ed-search--collapsed input::placeholder {
color: var(--ed-muted);
font-style: italic;
}
@media (max-width: 720px) {
.ed-filters__row { gap: 10px; }
.ed-search--collapsed {
right: 12px;
width: calc(100vw - 24px);
max-width: none;
}
.ed-search--collapsed input { font-size: 16px; } /* evita zoom iOS */
}
/* ─────────── Swatch estático (produtos sem variantes) ───────────
Visualmente igual ao swatch interativo, mas sem hover/clicável.
Cria consistência visual no grid. */
.ed-swatch--static {
cursor: default;
pointer-events: none;
}
.ed-card__variants--single {
/* mais compacto que o multi-variant */
gap: 8px;
}
/* ─────────── Página /sobre — alma editorial ───────────
Estrutura: hero tipográfico (sem foto) → 3 chapters em grid →
CTA. Tipografia protagonista; respiro generoso; nenhuma decoração
(a marca já é o conteúdo). */
.ed-about {
max-width: 880px;
margin: 0 auto;
padding: clamp(48px, 9vw, 120px) clamp(24px, 6vw, 80px) clamp(56px, 9vw, 100px);
}
/* Hero tipográfico — wordmark gigante centralizado */
.ed-about__hero {
text-align: center;
margin-bottom: clamp(56px, 10vw, 100px);
padding-bottom: clamp(40px, 6vw, 64px);
border-bottom: 1px solid var(--ed-line);
}
.ed-about__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--ed-muted);
margin: 0 0 24px;
}
.ed-about__title {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(72px, 13vw, 160px);
line-height: .9;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 20px;
font-weight: 400;
}
.ed-about__title em {
font-style: italic;
color: var(--coral-deep);
}
.ed-about__lede {
font-family: var(--f-display);
font-style: italic;
font-size: clamp(16px, 1.6vw, 20px);
color: var(--ed-muted);
margin: 0;
letter-spacing: 0;
}
/* 3 chapters em coluna única, com gap generoso */
.ed-about__chapters {
display: flex;
flex-direction: column;
gap: clamp(48px, 7vw, 72px);
max-width: 600px;
margin: 0 auto;
}
.ed-about__chapter {
position: relative;
}
.ed-about__chapter-eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 16px;
}
/* v39 · Abertura de capítulo: traço fino no lugar da numeração */
.ed-about__chapter-eyebrow::before {
content: "";
display: block;
width: 28px;
height: 1px;
background: var(--coral-deep);
opacity: .55;
margin-bottom: 10px;
}
.ed-about__chapter-body {
/* v72.40 · O texto institucional usa explicitamente a fonte de leitura
do site. `inherit` dependia do ancestral e podia variar quando o bloco
era reutilizado ou recebia regras do navegador. */
display: block;
width: 100%;
max-width: none;
font-family: var(--f-body, 'Inter', system-ui, -apple-system, sans-serif);
font-style: normal;
font-weight: 400;
font-size: clamp(15.5px, 1.25vw, 17px);
line-height: 1.8;
color: var(--ink);
margin: 0;
letter-spacing: 0;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
text-align: justify !important;
text-align-last: left;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
/* `text-wrap: pretty` não entra aqui: ele disputa com a justificação. */
}
@media (max-width: 720px) {
.ed-about__chapters {
width: 100%;
max-width: none;
}
.ed-about__chapter-body {
width: 100%;
font-family: var(--f-body, 'Inter', system-ui, -apple-system, sans-serif);
font-size: 15px;
line-height: 1.75;
text-align: justify !important;
text-align-last: left;
text-justify: inter-word;
}
}
/* CTA group ao fim — centralizado */
.ed-about__cta-row {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: clamp(56px, 10vw, 100px);
padding-top: clamp(40px, 6vw, 64px);
border-top: 1px solid var(--ed-line);
}
@media (max-width: 540px) {
.ed-about__cta-row {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.ed-about__cta-row .ed-hero__cta {
justify-content: center;
}
}
/* ════════════════════════════════════════════════════════════
CARRINHO + CHECKOUT (venda online — Fase 1)
════════════════════════════════════════════════════════════ */
/* Botão flutuante do carrinho (canto inferior direito) */
/* Pilha de flutuantes: sacola (ícone) em cima, WhatsApp embaixo, borda
direita. A pilha é o único elemento fixed — os filhos fluem nela. */
.fab-stack {
position: fixed;
right: calc(18px + env(safe-area-inset-right));
bottom: calc(18px + env(safe-area-inset-bottom) + var(--ed-lgpd-h, 0px));
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.cart-fab {
position: relative;
display: inline-grid; place-items: center;
width: 56px; height: 56px;
background: var(--ed-paper);
background: color-mix(in srgb, var(--ed-paper) 96%, transparent);
color: var(--ink);
border: 1px solid var(--ed-line);
border: 1px solid color-mix(in srgb, var(--ed-line) 86%, transparent);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 8px 22px rgba(0,0,0,.12);
-webkit-backdrop-filter: blur(10px) saturate(120%);
backdrop-filter: blur(10px) saturate(120%);
transition: transform .15s ease;
}
.wa-fab {
display: inline-grid; place-items: center;
width: 56px; height: 56px;
background: #25d366; color: #fff;
border-radius: 50%;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
transition: transform .15s ease;
}
.wa-fab:hover { transform: translateY(-2px); }
.cart-fab:hover { transform: translateY(-2px); }
.cart-fab__count {
position: absolute;
top: -4px; right: -4px;
display: inline-grid; place-items: center;
min-width: 20px; height: 20px; padding: 0 5px;
background: var(--coral-deep); color: #fff;
border: 2px solid var(--ed-paper);
border-radius: 11px; font-size: 11px; font-weight: 700;
}
.cart-fab[hidden] { display: none; }
/* Drawer lateral — v73.16: animação reversível + swipe no mobile. */
.cart-drawer {
position: fixed; inset: 0; z-index: 300;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear .28s;
}
.cart-drawer.is-open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.cart-drawer__overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,.4);
opacity: 0;
transition: opacity .28s ease;
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 90vw);
/* v74.0.54 · fallback obrigatório: overlays nunca podem ficar
transparentes só porque uma página pública esqueceu o escopo `.ed`. */
background: var(--ed-bg, #f4f4f3);
color: var(--ink, #1b1b1a);
display: flex; flex-direction: column;
box-shadow: -8px 0 30px rgba(0,0,0,.2);
transform: translateX(102%);
transition: transform .28s cubic-bezier(.32,.72,.28,1);
touch-action: pan-y;
will-change: transform;
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
html.cart-drawer-lock,
html.cart-drawer-lock body { overflow: hidden; }
.cart-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; border-bottom: 1px solid var(--ed-line, #e2e2e0);
}
.cart-drawer__head h2 { font-family: var(--f-display); font-style: italic; font-size: 22px; margin: 0; }
.cart-drawer__close { background: 0; border: 0; font-size: 24px; cursor: pointer; color: var(--ink); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-drawer__foot { padding: 20px 24px; border-top: 1px solid var(--ed-line, #e2e2e0); background: var(--ed-bg, #f4f4f3); }
.cart-drawer__total { display: flex; justify-content: space-between; font-family: var(--f-mono); margin-bottom: 14px; }
.cart-drawer__total strong { font-size: 18px; }
.cart-drawer__cta {
display: block; width: 100%; text-align: center;
padding: 14px;
background: linear-gradient(115deg, #ffffff 0%, #e5e7ea 48%, #fafafa 100%);
color: #1c2025;
border: 1px solid #aeb3ba;
border-radius: var(--r-pill, 999px); cursor: pointer;
font-family: var(--f-mono); font-size: 14px; text-decoration: none;
box-shadow: 0 9px 24px rgba(28,32,37,.10), inset 0 1px rgba(255,255,255,.82);
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cart-drawer__cta:hover {
border-color: #737981;
background: linear-gradient(115deg, #fff 0%, #dfe2e6 50%, #fff 100%);
box-shadow: 0 12px 30px rgba(28,32,37,.14), inset 0 1px #fff;
transform: translateY(-1px);
}
.cart-drawer__cta:focus-visible {
outline: 2px solid #737981;
outline-offset: 3px;
}
[data-theme="dark"] .cart-drawer__cta {
background: linear-gradient(115deg, #24282e 0%, #181b1f 48%, #282c31 100%);
color: #f2f3f5;
border-color: #8e949d;
box-shadow: 0 9px 24px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] .cart-drawer__cta:hover {
border-color: #c2c6cc;
background: linear-gradient(115deg, #2b3037 0%, #1d2126 50%, #30353c 100%);
}
.cart-drawer__empty { text-align: center; color: var(--ed-muted, #998); padding: 40px 0; }
.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ed-line, #e2e2e0); }
.cart-line__img { width: 56px; height: 70px; object-fit: cover; border-radius: 6px; background: var(--ed-media, #eaeae8); flex: 0 0 auto; }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name { font-size: 14px; font-weight: 600; }
.cart-line__var { font-size: 12px; color: var(--ed-muted, #998); }
.cart-line__price { font-family: var(--f-mono); font-size: 13px; margin-top: 4px; }
.cart-line__qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-line__qty button { width: 24px; height: 24px; border: 1px solid var(--ed-line, #e2e2e0); background: var(--ed-paper, #fff); color: var(--ink, #1b1b1a); border-radius: 6px; cursor: pointer; }
.cart-line__remove { background: 0; border: 0; color: var(--magenta-deep); font-size: 11px; cursor: pointer; margin-top: 4px; }
/* Seletor de variante no produto (tam/cor obrigatórios p/ add) */
.pp-cart { margin-top: 16px; padding: 16px; border: 1px solid var(--ed-line); border-radius: 12px; }
.pp-cart__row { margin-bottom: 12px; }
.pp-cart__label { font-size: 12px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ed-muted,#998); display: block; margin-bottom: 6px; }
.pp-cart__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-cart__opt { padding: 7px 14px; border: 1px solid var(--ed-line); border-radius: 999px; background: var(--ed-paper, #fff); cursor: pointer; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pp-cart__opt.is-sel { background: var(--ink); color: var(--ed-bg); border-color: var(--ink); }
.pp-cart__opt:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.pp-cart__add {
display: block; width: 100%; padding: 14px; margin-top: 8px;
background: var(--ink); color: var(--ed-bg); border: 0;
border-radius: 999px; cursor: pointer; font-family: var(--f-mono); font-size: 14px;
}
.pp-cart__add:disabled { opacity: .4; cursor: not-allowed; }
.pp-cart__msg { font-size: 12px; color: var(--magenta-deep); margin-top: 8px; min-height: 16px; }
.pp-cart__add--bag {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 54px; letter-spacing: .04em;
}
.pp-cart__add-icon { width: 21px; height: 21px; flex: 0 0 auto; }
.pp-cart__choice-intro {
display: grid; gap: 3px; margin: 0 0 16px; padding-bottom: 14px;
border-bottom: 1px solid var(--ed-line);
}
.pp-cart__choice-intro strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.pp-cart__choice-kicker {
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ed-muted);
}
.pp-cart__label { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pp-cart__step {
width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
background: var(--ink); color: var(--ed-bg); font-size: 9px; font-style: normal;
}
.pp-cart__required {
margin-left: auto; font-style: normal; font-size: 8.5px; letter-spacing: .08em;
color: var(--ed-muted);
}
.pp-cart__row { border: 1px solid transparent; border-radius: 10px; padding: 8px; margin-left: -8px; margin-right: -8px; }
.pp-cart__row.is-missing { border-color: var(--ed-line); background: var(--ed-paper); }
.pp-cart__row.is-missing { border-color: var(--ed-line); background: color-mix(in srgb, var(--ed-paper) 88%, var(--ink) 12%); }
.pp-cart.is-attention { animation: cart-attention .55s ease; }
@keyframes cart-attention {
0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
45% { box-shadow: 0 0 0 4px rgba(24,24,22,.12); }
}
.pp-meta__long {
white-space: pre-line;
overflow-wrap: break-word;
}
.pp-meta__measurements {
line-height: 1.65;
}
@media (max-width: 520px) {
.pp-meta__measurements {
grid-column: 1 / -1;
margin-top: -2px;
text-align: left;
}
}
/* Página de checkout */
.co { max-width: 560px; margin: 0 auto; padding: clamp(24px,5vw,48px) var(--ed-gutter); }
.co h1 { font-family: var(--f-display); font-style: italic; font-size: clamp(28px,6vw,40px); margin: 0 0 24px; }
.co-field { margin-bottom: 18px; }
.co-field label { display: block; font-size: 13px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--ed-muted,#776); }
.co-field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ed-muted,#776); }
.co-field input, .co-field select {
width: 100%; padding: 12px 14px; border: 1px solid var(--ed-line);
border-radius: 10px; background: var(--ed-paper); color: var(--ink); font-size: 16px; font-family: inherit;
}
.co-delivery { display: flex; gap: 10px; }
.co-delivery label { flex: 1; border: 1px solid var(--ed-line); border-radius: 10px; padding: 14px; cursor: pointer; text-align: center; text-transform: none; letter-spacing: 0; }
.co-delivery input { width: auto; }
.co-delivery label.is-sel { border-color: var(--ink); background: var(--ink); color: var(--ed-bg); }
.co-summary { background: var(--ed-paper); border: 1px solid var(--ed-line); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.co-summary__line { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.co-summary__product {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--ed-line);
}
.co-summary__thumb {
display: block;
width: 54px;
height: 68px;
border-radius: 8px;
object-fit: cover;
background: var(--ed-media);
}
.co-summary__thumb--empty {
border: 1px solid var(--ed-line);
}
.co-summary__product-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.co-summary__product-name {
font-size: 14px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.co-summary__product-variant {
color: var(--ed-muted, #776);
font-size: 12px;
}
.co-summary__coupon-status {
display: inline-flex;
width: fit-content;
max-width: 100%;
margin-top: 3px;
padding: 3px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 650;
line-height: 1.25;
}
.co-summary__coupon-status.is-eligible {
color: #256b44;
background: rgba(46, 125, 79, .10);
}
.co-summary__coupon-status.is-excluded {
color: var(--ed-muted, #776);
background: rgba(var(--ed-shade), .055);
}
.co-summary__product-price {
align-self: center;
white-space: nowrap;
font-family: var(--f-mono);
font-size: 13px;
}
.co-summary__product-price--discounted {
display: grid;
justify-items: end;
gap: 2px;
}
.co-summary__product-price--discounted s {
color: var(--ed-muted, #776);
font-size: 10.5px;
text-decoration-thickness: 1px;
}
.co-summary__product-price--discounted strong {
color: var(--ed-ink, #26221f);
font-size: 13px;
font-weight: 700;
}
@media (max-width: 480px) {
.co-summary { padding: 14px; }
.co-summary__product {
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 10px;
}
.co-summary__thumb { width: 48px; height: 62px; }
.co-summary__product-name { font-size: 13px; }
.co-summary__product-price { font-size: 12px; }
}
.co-summary__total { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 18px; border-top: 1px solid var(--ed-line); margin-top: 8px; padding-top: 8px; }
.co-submit {
display: block; width: 100%; padding: 16px;
background: linear-gradient(115deg, #ffffff 0%, #e5e7ea 48%, #fafafa 100%);
color: #1c2025;
border: 1px solid #aeb3ba;
border-radius: 999px; cursor: pointer;
font-family: var(--f-mono); font-size: 15px;
box-shadow: 0 9px 24px rgba(28,32,37,.10), inset 0 1px rgba(255,255,255,.82);
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.co-submit:hover:not(:disabled) {
border-color: #737981;
background: linear-gradient(115deg, #fff 0%, #dfe2e6 50%, #fff 100%);
box-shadow: 0 12px 30px rgba(28,32,37,.14), inset 0 1px #fff;
transform: translateY(-1px);
}
.co-submit:focus-visible { outline: 2px solid #737981; outline-offset: 3px; }
[data-theme="dark"] .co-submit {
background: linear-gradient(115deg, #24282e 0%, #181b1f 48%, #282c31 100%);
color: #f2f3f5;
border-color: #8e949d;
box-shadow: 0 9px 24px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] .co-submit:hover:not(:disabled) {
border-color: #c2c6cc;
background: linear-gradient(115deg, #2b3037 0%, #1d2126 50%, #30353c 100%);
}
.co-submit:disabled { opacity: .5; cursor: not-allowed; }
.co-msg { color: var(--magenta-deep); font-size: 13px; margin-top: 12px; min-height: 18px; }
.co-wa-fallback { display: none; margin-top: 16px; padding: 16px; background: #e8f5e9; color: #14532d; border-radius: 12px; text-align: center; }
.co-wa-fallback.is-shown { display: block; }
.co-wa-fallback a { color: #128c7e; font-weight: 700; }
/* Página de sucesso / PIX */
.co-success { max-width: 480px; margin: 0 auto; padding: clamp(24px,5vw,48px) var(--ed-gutter); text-align: center; }
.co-success h1 { font-family: var(--f-display); font-style: italic; font-size: clamp(26px,6vw,36px); margin: 8px 0 16px; }
.co-success__eyebrow { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ed-muted,#998); }
.co-success__hint { color: var(--ink-soft,#665); font-size: 15px; line-height: 1.5; margin-bottom: 24px; }
.co-pix { background: #fff; color: var(--ed-dark); border: 1px solid var(--ed-line); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.co-pix__qr { display: block; margin: 0 auto 16px; border-radius: 8px; }
.co-pix__total { font-family: var(--f-mono); font-size: 18px; margin-bottom: 14px; }
.co-pix__coupon { display:inline-flex; align-items:center; gap:8px; margin:-4px auto 14px; padding:7px 11px; border-radius:999px; background:#f2f6ef; color:#31523f; font-size:12px; }
.co-pix__coupon strong { font-weight:650; }
.co-pix__coupon span { font-family:var(--f-mono); }
.co-pix__copy { padding: 12px 24px; background: var(--ed-dark); color: var(--ed-light); border: 0; border-radius: 999px; cursor: pointer; font-family: var(--f-mono); font-size: 13px; }
.co-pix__copied { color: #128c7e; font-size: 13px; margin-top: 8px; }
.co-items { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.co-items li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ed-line); font-size: 14px; }
.co-order-totals {
margin: -4px 0 22px;
padding-top: 10px;
border-top: 1px solid var(--ed-line);
text-align: left;
}
.co-order-totals__total {
margin-top: 7px;
padding-top: 10px;
border-top: 1px solid var(--ed-line);
font-size: 15px;
}
.co-success__wait { font-size: 13px; color: var(--ed-muted,#998); font-style: italic; }
.co-success__wa { display: inline-block; margin-top: 16px; color: #128c7e; font-weight: 700; text-decoration: none; }
.co-success__check { font-size: 48px; color: #128c7e; }
.co-success__paid h1 { color: #128c7e; }
/* Carrinho dentro do modal de produto do catálogo */
.px-cart { width: 100%; margin-bottom: 12px; }
.px-cart__row { margin-bottom: 10px; }
.px-cart__row[hidden] { display: none; }
.ed-modal__cta--ghost {
background: transparent;
border: 1px solid var(--ed-line);
/* A base .ed-modal__cta usa color: var(--ed-bg) (texto claro p/ pill
escuro). No ghost o fundo é transparente sobre --ed-paper — sem
redefinir a cor, o texto ficava branco sobre branco. */
color: var(--ink);
transition: border-color .2s ease, color .2s ease;
}
.ed-modal__cta--ghost:hover {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
/* Checkout: linha de 2 colunas (número + complemento) e seletor de pagamento */
.co-row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.co-pay label { font-size: 13px; }
@media (max-width: 480px) { .co-row2 { grid-template-columns: 1fr; } }
/* v45 · Endereço no cadastro + escolha de endereço salvo no checkout */
.co-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.co-row .co-field--uf { max-width: 96px; }
@media (max-width: 480px) { .co-row { grid-template-columns: 1fr; } }
.ed-account__addr {
border: 1px solid var(--ed-line, rgba(0,0,0,.12));
border-radius: 12px;
padding: 14px 16px 4px;
margin: 6px 0 4px;
}
.ed-account__addr legend {
padding: 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--ed-ink, inherit);
}
.co-addr-choice { margin-bottom: 4px; }
.co-addr-summary {
margin: 8px 2px 0;
font-size: 13px;
line-height: 1.45;
opacity: .8;
}
.co-addr-save {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
margin: 6px 2px 10px;
cursor: pointer;
opacity: .85;
}
.co-addr-save input { width: auto; margin: 0; }
/* Checkout: cálculo e opções de frete */
.co-ship-calc { width: 100%; padding: 11px; border: 1px solid var(--coral-deep); background: #fff; color: var(--coral-deep); border-radius: var(--r-md, 10px); font-weight: 600; cursor: pointer; transition: all .18s ease; }
.co-ship-calc:hover { background: var(--coral-deep); color: #fff; }
.co-ship-calc:disabled { opacity: .6; cursor: default; }
.co-ship-msg { font-size: 12.5px; color: var(--gray-700, #666); margin: 8px 0 4px; }
.co-ship-options { display: flex; flex-direction: column; gap: 8px; }
.co-ship-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-300, #ddd); border-radius: var(--r-md, 10px); cursor: pointer; transition: all .18s ease; }
.co-ship-opt:hover { background: var(--gray-100, #f7f7f7); }
.co-ship-opt.is-sel { border-color: var(--coral-deep); background: var(--ed-accent-wash); }
.co-ship-opt input { accent-color: var(--coral-deep); }
.co-ship-opt__name { flex: 1; font-size: 13px; }
.co-ship-opt__price { font-weight: 700; font-size: 13.5px; }
/* Checkout: dica do CPF */
.co-cpf-hint { display:block; margin-top:4px; font-size:11.5px; color: var(--gray-700, #777); }
.co-cep-city {
display: block;
margin-top: 6px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ed-muted, #8a7e6e);
}
/* ═══════════════ Fluidez: transições e carregamento ═══════════════ */
/* Cross-fade suave entre páginas (catálogo → peça → sacola) em browsers
com View Transitions (Chrome/Edge/Safari 18+). Ignorado nos demais —
navegação normal, sem quebra. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* Skeleton: enquanto a foto não chega, a moldura mostra um shimmer nos
tons da marca em vez de um retângulo branco. O aspect-ratio já reserva
o espaço (sem pulos de layout); isto cuida da estética da espera. */
.ed-card__media {
background: var(--ed-skel);
background-size: 200% 100%;
animation: ed-shimmer 1.6s linear infinite;
}
@keyframes ed-shimmer {
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ed-card__media { animation: none; }
}
/* Fade-in da foto ao carregar. A classe imgfade é adicionada pelo JS no
boot: sem JS, nada fica invisível (fallback seguro). */
.imgfade .ed-card__img {
opacity: 0;
transition: opacity .45s ease;
}
.imgfade .ed-card__img.is-loaded { opacity: 1; }
/* ─── v73.9 · Espera da foto na PÁGINA DA PEÇA ────────────────────────
As regras NÃO moram mais aqui. catalog-product.css carrega DEPOIS deste
arquivo e vence qualquer empate de especificidade sobre .pp-gallery__*,
então o brilho e a reserva de altura simplesmente não pintavam. Foram
para um