/*
 * CS Journal — medidas do Figma (Campanhas › BLOG CS, frame desktop de 1440 px).
 * Tudo em px, igual ao Figma. Fonte: Avenir LT Std (300 Light · 400 Roman · 500 Medium · 700 Heavy).
 * Figma → Avenir: Times/Poppins Regular = 400, Poppins Light = 300, Poppins Medium = 500,
 * Times/Poppins Bold = 700, Times Italic = itálico (oblique) da Avenir.
 * De 1024 px para cima a página é o frame de 1440; abaixo disso, ver "celular e tablet em pé".
 */

:root {
	--cs-fonte: 'Avenir LT Std', 'Avenir', sans-serif;
	--cs-cinza-legenda: #5f5f5f;
	--cs-cinza-busca: #6e6e6e;
	--cs-cinza-news: #e3e3e3;
	--cs-cinza-botao: #d9d9d9;
}

body {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: var(--cs-fonte);
	-webkit-font-smoothing: antialiased;
	overflow-x: auto;
}

.wp-site-blocks { padding: 0; }

.cs-pagina {
	position: relative;
	width: 100%;
	min-width: 1440px; /* de 1024 a 1439 ainda rola para o lado; abaixo de 1024, layout de celular */
	overflow: hidden;
	container-type: inline-size; /* 100cqw = largura da página (foto larga de borda a borda) */
}

.cs-pagina a { color: inherit; text-decoration: none; }
.cs-pagina svg { display: block; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================ topo */

.cs-topo { position: relative; height: 250px; }

.cs-topo__logo {
	position: absolute;
	left: calc(50% - 287px); /* x=433 no frame de 1440 */
	top: 87px;
	width: 580px;
	height: 76px;
}

.cs-topo__journal {
	position: absolute;
	left: 0; right: 0;
	top: 178px;
	margin: 0;
	text-align: center;
	font: 400 48px/72px var(--cs-fonte);
	letter-spacing: 12px;
}

/* ================================================================ menu */

.cs-menu { min-height: 64px; margin-top: 39px; background: #000; }
.cs-pagina--home .cs-menu { margin-top: 20px; }

.cs-menu ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* muitas seções: quebra em mais linhas em vez de vazar */
	gap: 0 40px;
	min-height: 64px;
	margin: 0;
	padding: 0 16px;
	list-style: none;
}

.cs-menu a {
	display: block;
	color: #fff;
	font: 300 14px/21px var(--cs-fonte);
	text-transform: uppercase; /* o nome da categoria sai em maiúsculas, como no Figma */
}

.cs-menu a:hover,
.cs-menu a.is-ativo { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ busca */

.cs-busca { position: relative; height: 117px; }
.cs-pagina--home .cs-busca { height: 116px; }

.cs-busca__form {
	position: absolute;
	left: calc(50% + 264px); /* x=984 no frame */
	top: 60px;
	width: 324px;
	height: 20px;
	border-bottom: 1px solid #060606;
}
.cs-pagina--home .cs-busca__form { left: calc(50% + 270px); }

.cs-busca__form input {
	width: 290px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	font: 400 12px/18px var(--cs-fonte);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.cs-busca__form input::placeholder { color: var(--cs-cinza-busca); opacity: 1; }
.cs-busca__form input::-webkit-search-cancel-button { display: none; }

.cs-busca__form button {
	position: absolute;
	right: 0;
	top: 0;
	width: 19px;
	height: 19px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* ================================================================ capa da home */

.cs-capa-home { aspect-ratio: 1440 / 961; width: 100%; margin-top: 74px; overflow: hidden; } /* 961 em 1440; cresce com a largura, sem teto: tela grande não corta mais a foto */
.cs-capa-home--vazia { background: #f2f2f2; }

.cs-capa-home img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ================================================================ grade de cards (home, categoria, busca) */

.cs-grade {
	position: relative;
	width: 1196px;
	height: 2516px;
	margin: 0 auto 62px;
}

/* com menos de 7 matérias (categoria, busca), a grade encolhe até o último card */
.cs-grade--1, .cs-grade--2, .cs-grade--3 { height: 953px; }
.cs-grade--4 { height: 1597px; }
.cs-grade--5 { height: 1921px; }

.cs-card { position: absolute; margin: 0; }

.cs-card--p1 { left: 0;     top: 0;     width: 586px;  height: 953px; }
.cs-card--p2 { left: 611px; top: 0;     width: 585px;  height: 763px; }
.cs-card--p3 { left: 611px; top: 803px; width: 424px;  height: 135px; }
.cs-card--p4 { left: 0;     top: 981px; width: 1196px; height: 616px; }
.cs-card--p5 { left: 0;     top: 1643px; width: 424px; height: 278px; }
.cs-card--p6 { left: 0;     top: 1967px; width: 586px; height: 549px; }
.cs-card--p7 { left: 610px; top: 1627px; width: 585px; height: 889px; }

.cs-card__foto {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #ececec;
}
.cs-card__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-card__foto::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

/* "Só a imagem": a arte já tem o texto; sem degradê por cima */
.cs-card--so-imagem .cs-card__foto::after,
.cs-card--so-imagem.cs-card[class*='cs-card--p'] .cs-card__foto::after { display: none; }

/* matéria sem foto numa posição de foto: fundo escuro para o texto branco aparecer */
.cs-card--sem-foto { background: #1a1a1a; }

/* degradês do Figma (preto 50% a 25% → transparente) */
.cs-card--p2 .cs-card__foto::after { inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .5) 25%, rgba(102, 102, 102, 0) 100%); }
.cs-card--p4 .cs-card__foto::after { left: 0; top: 0; bottom: 0; width: 761px; background: linear-gradient(to right, rgba(0, 0, 0, .5) 25%, rgba(102, 102, 102, 0) 100%); }
.cs-card--p6 .cs-card__foto::after { inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72) 25%, rgba(102, 102, 102, 0) 100%); }
.cs-card--p7 .cs-card__foto::after { left: 0; right: 0; bottom: 0; top: 128px; background: linear-gradient(to top, rgba(0, 0, 0, .5) 25%, rgba(102, 102, 102, 0) 100%); }

.cs-card__titulo,
.cs-card__chamada,
.cs-card__data,
.cs-card__pe {
	position: absolute;
	margin: 0;
	z-index: 1;
}
.cs-card__pe { display: flex; flex-direction: column; align-items: flex-start; }
.cs-card__texto { margin: 0; }

.cs-card__titulo { font-weight: 400; }
.cs-card__l1,
.cs-card__l2 { display: block; }
.cs-card__l2 { font-style: italic; }

.cs-card__texto { width: 421px; font: 400 24px/24px var(--cs-fonte); }

.cs-card__botao {
	display: inline-flex;
	align-items: center;
	font: 400 24px/24px var(--cs-fonte);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.cs-card__botao:hover { opacity: .75; }

/* cards com foto: texto branco */
.cs-card--p1, .cs-card--p2, .cs-card--p4, .cs-card--p6, .cs-card--p7 { color: #fff; }

/*
 * Cada posição tem uma área fixa para o título (medidas do Figma). Título maior que a área
 * diminui sozinho (journal.js ajusta --e, a escala da fonte) — assim qualquer matéria cabe
 * em qualquer posição quando a grade anda.
 */
.cs-card__titulo a { display: block; }
.cs-card__chamada { display: none; }
.cs-card__texto {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 1 — alto à esquerda (Python Club) */
.cs-card--p1 .cs-card__titulo { right: 13px; top: 38px; width: 560px; max-height: 740px; text-align: right; }
.cs-card--p1 .cs-card__l1 { font: 500 calc(122px * var(--e, 1))/calc(123px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p1 .cs-card__l2 { margin-top: calc(-14px * var(--e, 1)); font: 300 calc(101px * var(--e, 1))/calc(102px * var(--e, 1)) var(--cs-fonte); font-style: normal; }
.cs-card--p1 .cs-card__pe { left: 79px; top: 791px; width: 421px; align-items: center; gap: 27px; }
.cs-card--p1 .cs-card__texto { text-align: center; }
.cs-card--p1 .cs-card__botao { margin-left: -10px; } /* caixa do botão no Figma: x=178 (5 px antes do centro do texto) */

/* 2 — alto à direita (Backstage): as duas linhas escalonadas, cada uma numa linha só */
.cs-card--p2 .cs-card__titulo { left: 147px; top: 427px; width: 411px; max-height: 226px; }
.cs-card--p2 .cs-card__l1,
.cs-card--p2 .cs-card__l2 { width: 298px; white-space: nowrap; overflow: hidden; text-align: center; font: 400 calc(112px * var(--e, 1))/calc(113px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p2 .cs-card__l2 { margin: calc(-43px * var(--e, 1)) 0 0 102px; font-style: italic; }
.cs-card--p2 .cs-card__chamada { display: block; left: 27px; top: 540px; width: 235px; text-align: right; text-transform: uppercase; font: 400 19.44px/20px var(--cs-fonte); }
.cs-card--p2 .cs-card__texto { display: none; }
.cs-card--p2 .cs-card__pe { left: 181px; top: 678px; width: 213px; align-items: center; }

/* 3 — só texto (Trend Look) */
.cs-card--p3 .cs-card__titulo { left: 3px; top: 0; width: 421px; max-height: 105px; font: 400 calc(50px * var(--e, 1))/calc(50px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p3 .cs-card__texto { display: none; }
.cs-card--p3 .cs-card__pe { left: 0; top: 112px; }
.cs-card--p3 .cs-card__botao { gap: 7px; font-size: 16px; line-height: 23px; }
.cs-card--p3 .cs-card__botao > span:first-child { min-width: 92px; text-align: center; }

/* 4 — largo (New In) */
.cs-card--p4 .cs-card__titulo { left: 119px; top: 232px; width: 440px; max-height: 120px; text-align: center; font: 400 calc(112px * var(--e, 1))/calc(113px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p4 .cs-card__titulo a { display: flex; align-items: flex-start; }
.cs-card--p4 .cs-card__l1 { flex: none; width: 298px; white-space: nowrap; text-align: center; }
.cs-card--p4 .cs-card__l2 { flex: none; min-width: 137px; margin-left: -14px; white-space: nowrap; text-align: center; }
.cs-card--p4 .cs-card__pe { left: 119px; top: 358px; width: 421px; align-items: center; gap: 46px; }
.cs-card--p4 .cs-card__texto { text-align: center; }

/* título comprido demais para a linha única das posições 2 e 4: quebra linha (journal.js) */
.cs-card__titulo--quebra .cs-card__l1,
.cs-card__titulo--quebra .cs-card__l2 { white-space: normal; overflow: visible; overflow-wrap: break-word; }

/* 5 — só texto (Highlights da semana) */
.cs-card--p5 .cs-card__titulo { left: 3px; top: 0; width: 421px; max-height: 112px; font: 400 calc(50px * var(--e, 1))/calc(50px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p5 .cs-card__data { left: 3px; top: 122px; font: 400 16px/23px var(--cs-fonte); text-decoration: underline; text-underline-offset: 3px; }
.cs-card--p5 .cs-card__pe { left: 3px; top: 160px; width: 421px; gap: 23px; }
.cs-card--p5 .cs-card__texto { -webkit-line-clamp: 3; }
.cs-card--p5 .cs-card__botao { margin-left: -3px; gap: 10px; font-size: 16px; line-height: 23px; }
.cs-card--p5 .cs-card__botao > span:first-child { min-width: 87px; text-align: center; }

/* 6 — baixo à esquerda (Campanha) */
.cs-card--p6 .cs-card__titulo { left: 109px; top: 258px; width: 367px; max-height: 100px; }
.cs-card--p6 .cs-card__l1 { width: 213px; text-align: center; font: 400 calc(45px * var(--e, 1))/calc(45px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p6 .cs-card__l2 { margin-top: calc(4px * var(--e, 1)); text-align: center; font: italic 400 calc(46px * var(--e, 1))/calc(47px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p6 .cs-card__pe { left: 82px; top: 361px; width: 421px; align-items: center; gap: 43px; }
.cs-card--p6 .cs-card__texto { -webkit-line-clamp: 3; text-align: center; }

/* 7 — alto à direita, embaixo (Suspensórios) */
.cs-card--p7 .cs-card__titulo { left: 31px; top: 540px; width: 530px; max-height: 104px; font: 400 calc(87px * var(--e, 1))/calc(79px * var(--e, 1)) var(--cs-fonte); }
.cs-card--p7 .cs-card__pe { left: 30px; top: 646px; width: 421px; gap: 42px; }
.cs-card--p7 .cs-card__botao > span:first-child { min-width: 213px; margin-left: -44px; text-align: center; } /* caixa x=718, 213 px */

.cs-card__seta svg { width: 70px; height: auto; }

.cs-grade-vazia { padding: 80px 0 120px; text-align: center; font: 400 16px/21px var(--cs-fonte); }
.cs-grade-vazia a { text-decoration: underline; }

/* paginação "1 2 3 4 >" */
.cs-paginacao {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	margin: 0 0 0 calc(50% - 84px); /* x=636 no frame */
}
/* o WordPress zera a margem do último bloco do grupo; o espaço até a newsletter vai no padding */
.cs-principal:has(.cs-paginacao) { padding-bottom: 88px; }
.cs-principal:has(.cs-grade):not(:has(.cs-paginacao)) { padding-bottom: 182px; } /* grade sem paginação: mesmo respiro do Figma */
.cs-paginacao__num {
	width: 36px;
	text-align: center;
	font: 400 20px/20px var(--cs-fonte);
}
.cs-paginacao__num.is-atual { font-size: 24px; line-height: 24px; text-decoration: underline; text-underline-offset: 3px; }
.cs-paginacao a.cs-paginacao__num:hover { text-decoration: underline; }
.cs-paginacao__prox { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -3px; }

/* ================================================================ capa da matéria */

.cs-capa { position: relative; aspect-ratio: 1440 / 1067; width: 100%; overflow: hidden; } /* 1067 em 1440; cresce com a largura, sem teto: tela grande não corta mais a foto */
/* --u = 1 px do frame de 1440: foto extra e texto sobre a foto crescem junto com a capa (em 1440, --u = 1px) */
.cs-capa { --u: calc(100cqw / 1440); }

.cs-capa__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-capa__foto2 {
	position: absolute;
	left: calc(70 * var(--u)); /* x=70 no frame */
	top: calc(176 * var(--u));
	width: calc(521 * var(--u));
	height: calc(730 * var(--u));
	object-fit: cover;
}

.cs-capa__texto { position: absolute; left: 0; top: 0; color: #656b6b; }
.cs-capa__texto span { position: absolute; white-space: nowrap; }
.cs-capa__t1 { left: calc(302.5 * var(--u)); top: calc(155 * var(--u)); transform: translateX(-50%); text-align: center; font: 400 calc(112 * var(--u))/calc(113 * var(--u)) var(--cs-fonte); }
.cs-capa__t2 { left: calc(365 * var(--u)); top: calc(249 * var(--u)); transform: translateX(-50%); text-align: center; font: italic 400 calc(84 * var(--u))/calc(85 * var(--u)) var(--cs-fonte); }
.cs-capa__t3 { left: calc(541 * var(--u)); top: calc(329 * var(--u)); transform: translateX(-100%); text-align: right; font: 400 calc(30 * var(--u))/calc(30 * var(--u)) var(--cs-fonte); text-transform: uppercase; }

/* legenda vertical (lê de baixo para cima, como no Figma) */
.cs-legenda-vertical {
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	color: var(--cs-cinza-legenda);
	font: 400 10px/15px var(--cs-fonte);
	text-transform: uppercase;
}
.cs-legenda-vertical--branca { color: #fff; }
.cs-conteudo p.cs-legenda-vertical { font: 400 10px/15px var(--cs-fonte); text-align: left; }
.cs-capa__legenda { position: absolute; right: 14px; bottom: 23%; } /* x=1411, rente à borda direita */

/* cartão branco do título, 66 px por cima da capa */
.cs-titulo-card {
	position: relative;
	width: 1205px;
	margin: -66px auto 0;
	padding-top: 17px;
	background: #fff;
	text-align: center;
}

.cs-titulo-card__meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	height: 26px;
	margin: 0;
	font: 400 14px/14px var(--cs-fonte);
}
.cs-titulo-card__tags { color: #222; font: 300 14px/21px var(--cs-fonte); }
.cs-titulo-card__tags a:hover { text-decoration: underline; }

.cs-titulo-card__titulo {
	width: 1063px;
	margin: 5px auto -5px; /* linha de 48 como no Figma, sem mudar a altura do cartão */
	font: 400 48px/48px var(--cs-fonte);
}
.cs-titulo-card__titulo strong,
.cs-foto-larga__titulo strong { font-weight: 700; font-style: italic; }
.cs-titulo-card__meta time { min-width: 152px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.cs-titulo-card--esquerda .cs-titulo-card__titulo { text-align: left; }
/* matéria sem imagem destacada: sem a área da capa, o título sobe */
.cs-capa--vazia { aspect-ratio: auto; height: 0; }
.cs-titulo-card--sem-capa { margin-top: 0; }

/* ================================================================ texto da matéria (coluna de 960) */

.cs-conteudo {
	width: 960px;
	margin: 46px 0 0 calc(50% - 476px); /* x=244 no frame */
}

.cs-conteudo > * { margin: 0 0 46px; }
.cs-conteudo > :last-child { margin-bottom: 0; }

.cs-conteudo p {
	font: 400 16px/21px var(--cs-fonte);
	text-align: justify;
}
.cs-conteudo > p:has(+ p) { margin-bottom: 21px; }

.cs-conteudo > h2,
.cs-conteudo > h3 {
	margin-bottom: 11px;
	font: 700 20px/26px var(--cs-fonte);
}

.cs-conteudo a { text-decoration: underline; }
.cs-conteudo ul, .cs-conteudo ol { padding-left: 20px; font: 400 16px/21px var(--cs-fonte); }
.cs-conteudo blockquote { margin-left: 0; padding-left: 20px; border-left: 1px solid #000; }

.cs-conteudo .wp-block-image { margin: 0; }
.cs-conteudo .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* legenda de produto embaixo das fotos: 11 px abaixo */
.cs-conteudo > .cs-legenda.has-text-align-right { margin-left: 472px; text-align: left; } /* embaixo da foto da direita */
.cs-conteudo > .cs-legenda {
	margin-top: -35px;
	margin-left: -4px;
	color: var(--cs-cinza-legenda);
	font: 400 10px/15px var(--cs-fonte);
	text-align: left;
	text-transform: uppercase;
}

/* mosaico de 3 fotos */
.cs-mosaico { display: grid; grid-template-rows: 416px 240px; row-gap: 12px; }
.cs-mosaico--alta-direita { width: 952px; grid-template-columns: 527px 405px; column-gap: 20px; }
.cs-mosaico--alta-direita .cs-mosaico__larga { grid-area: 1 / 1; }
.cs-mosaico--alta-direita .cs-mosaico__baixa { grid-area: 2 / 1; }
.cs-mosaico--alta-direita .cs-mosaico__alta  { grid-area: 1 / 2 / 3 / 3; }
.cs-mosaico--alta-esquerda { width: 960px; grid-template-columns: 405px 527px; column-gap: 28px; }
.cs-mosaico--alta-esquerda .cs-mosaico__alta  { grid-area: 1 / 1 / 3 / 2; }
.cs-mosaico--alta-esquerda .cs-mosaico__larga { grid-area: 1 / 2; }
.cs-mosaico--alta-esquerda .cs-mosaico__baixa { grid-area: 2 / 2; }

/* duas fotos lado a lado */
.cs-duas-fotos { position: relative; display: grid; grid-template-columns: 458px 488px; column-gap: 14px; height: 511px; }
.cs-duas-fotos .cs-legenda-vertical { position: absolute; left: 973px; bottom: 1px; }

/* três fotos verticais */
.cs-tres-fotos { display: grid; grid-template-columns: 321px 320px 321px; column-gap: 8px; width: 978px; height: 736px; margin-left: -4px !important; }

/* foto larga com título de seção num cartão branco (38 px por cima da foto) */
.cs-conteudo > .cs-foto-larga { width: 100cqw; margin-left: calc(476px - 50cqw); margin-bottom: 12px; }
.cs-foto-larga .wp-block-image { max-height: 1000px; width: 100%; overflow: hidden; } /* altura = proporção da foto enviada */
.cs-conteudo .cs-foto-larga .wp-block-image img { height: auto; }
.cs-foto-larga__titulo {
	position: relative;
	width: 1205px;
	margin: -38px auto 0;
	padding: 26px 41px 20px;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	font: 400 48px/55px var(--cs-fonte);
}
.cs-conteudo > .cs-foto-larga { position: relative; }
.cs-conteudo > .cs-foto-larga:not(:has(.cs-foto-larga__titulo:not(:empty))) { margin-bottom: 46px; }
.cs-foto-larga__titulo:empty { display: none; }
.cs-foto-larga .cs-legenda-vertical { position: absolute; right: 13px; top: 135px; color: #fff; }
.cs-legenda-vertical:empty { display: none; }

/* ================================================================ vitrine de produtos (coleção do OCC) */

.cs-conteudo > .cs-vitrine {
	display: flex;
	justify-content: center;
	gap: 2px;
	width: 100cqw;
	margin-left: calc(476px - 50cqw); /* centrada na página, como no Figma */
}
.cs-produto { display: block; width: 299px; color: #000; text-decoration: none !important; }
/* Card QUADRADO de 299 × 299, como no Figma. Foto inteira no meio (contain); foto em pé (roupa
   vem 2:3) ganha as laterais como continuação da borda da própria foto (degradê medido no
   servidor, coluna por coluna), então o quadrado fica cheio sem cortar o produto e sem faixa branca. */
.cs-produto__foto { position: relative; display: block; box-sizing: border-box; width: 299px; height: 299px; border: 1px solid #d9d9d9; background: #fff; overflow: hidden; }
.cs-produto__img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-produto__info { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 2px; }
.cs-produto__linha { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 16px; }
.cs-produto__nome, .cs-produto__preco { font: 300 12px/15px var(--cs-fonte); }
.cs-produto__nome { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-produto__coracao svg { width: 16px; height: 16px; }
.cs-produto__preco s { color: #6e6e6e; margin-right: 4px; }
.cs-produto:hover .cs-produto__nome { text-decoration: underline; }
.cs-vitrine-vazia { padding: 24px; border: 1px dashed #bbb; font: 400 13px/18px var(--cs-fonte); color: #555; }

/* ================================================================ compartilhe */

.cs-compartilhe { display: flex; flex-direction: column; align-items: center; margin: 46px 0 0; padding-bottom: 46px; }

.cs-compartilhe__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 150px;
	height: 25px;
	padding: 0;
	border: 1px solid #000;
	background: var(--cs-cinza-botao);
	color: #000;
	font: 300 12px/18px var(--cs-fonte);
	cursor: pointer;
}
.cs-compartilhe__botao:hover { background: #cfcfcf; }
.cs-compartilhe__aviso { min-height: 18px; margin-top: 6px; font: 300 12px/18px var(--cs-fonte); }
.cs-compartilhe__aviso:empty { display: none; }

/* páginas institucionais (sem Figma): mesmo texto da matéria */
.cs-materia--pagina .cs-pagina__titulo { width: 960px; margin: 0 0 0 calc(50% - 476px); font: 400 48px/55px var(--cs-fonte); }
.cs-materia--pagina { padding-bottom: 46px; }

/* ================================================================ newsletter */

.cs-news { position: relative; height: 132px; background: var(--cs-cinza-news); }

.cs-news__inner {
	position: absolute;
	left: calc(50% - 610px); /* x=110 no frame */
	top: 27px;
	display: flex;
	align-items: flex-start;
	gap: 56px;
	width: 1219px;
	height: 78px;
}

.cs-news__titulo { width: 299px; margin-top: 11px; }
.cs-news__titulo h2 { margin: 0 0 13px; font: 700 16px/24px var(--cs-fonte); letter-spacing: 1.6px; }
.cs-news__titulo p { margin: 0; font: 400 12px/18px var(--cs-fonte); }

.cs-news__form { position: relative; display: flex; align-items: flex-start; gap: 56px; margin: 0; }

.cs-news__campos { display: flex; flex-direction: column; gap: 8px; width: 350px; }
.cs-news__campo { display: block; height: 35px; }
.cs-news__campo input {
	display: block;
	box-sizing: border-box;
	width: 324px;
	height: 31px;
	margin-left: 18px;
	padding: 4px 0 8px;
	border: 0;
	border-bottom: 1px solid #a7a7a7;
	background: none;
	color: #000;
	font: 400 12px/18px var(--cs-fonte);
	outline: none;
}
.cs-news__campo input::placeholder { color: #a7a7a7; opacity: 1; }
.cs-news__mel { position: absolute; left: -9999px; width: 1px; height: 1px; }

.cs-news__botao {
	width: 148px;
	height: 35px;
	margin-top: 21px;
	border: 1px solid #a7a7a7;
	background: none;
	color: #000;
	font: 400 12px/18px var(--cs-fonte);
	cursor: pointer;
}
.cs-news__botao:hover { background: #fff; }

.cs-news__aviso { position: absolute; left: 424px; top: 60px; margin: 0; white-space: nowrap; font: 400 11px/14px var(--cs-fonte); }

.cs-news__redes { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 8px; }
.cs-news__rede { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.cs-news__rede--instagram { width: 36px; height: 36px; }
.cs-news__rede:hover { opacity: .6; }

/* ================================================================ rodapé */

.cs-rodape { position: relative; height: 416px; background: #fff; }
.cs-rodape__menu { position: absolute; top: 0; bottom: 0; left: calc(50% - 720px); width: 1440px; }

.cs-rodape__col { position: absolute; top: 66px; }
.cs-rodape__col--ajuda { left: 145px; color: #000; }
.cs-rodape__col--institucional { left: 410px; color: #222; }
.cs-rodape__col--franquias { left: 658px; color: #000; }
.cs-rodape__col--privacidade { left: 905px; color: #222; }
.cs-rodape__col--app { left: 1162px; display: flex; flex-direction: column; gap: 16px; }

.cs-rodape__col h2 { margin: 0 0 16px; color: #000; font: 400 14px/21px var(--cs-fonte); }
.cs-rodape__col--app h2 { margin: 0; }
.cs-rodape__col ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cs-rodape__col--institucional ul { gap: 8px; }
.cs-rodape__col--institucional li:nth-child(2) { margin-top: -4px; } /* Figma: 26 px entre A Marca e Journal, 30 nos demais */
.cs-rodape__col li { padding: 2px; font: 300 12px/18px var(--cs-fonte); }
.cs-rodape__col li a:hover { text-decoration: underline; }

.cs-rodape__loja {
	display: flex;
	align-items: center;
	gap: 11px;
	box-sizing: border-box;
	width: 133px;
	height: 48px;
	padding: 6px 14px;
	border: 1px solid #cdcdcd;
	font: 300 12px/18px var(--cs-fonte);
	letter-spacing: .1px;
}
.cs-rodape__loja strong { font-weight: 500; }
.cs-rodape__loja svg { flex: none; }
.cs-rodape__loja:hover { border-color: #000; }

.cs-rodape__cnpj {
	position: absolute;
	left: calc(50% - 591px); /* x=129 no frame */
	top: 381px;
	width: 1182px;
	margin: 0;
	text-align: center;
	font: 300 8px/12px var(--cs-fonte);
}

/* ================================================================ celular e tablet em pé (até 1023 px) */

/*
 * O Figma só tem o desktop. Abaixo de 1024 px a página deixa de ser o frame de 1440 e vira uma
 * coluna: mesmas peças, mesma fonte e mesmas cores, com as posições absolutas trocadas por fluxo.
 * Campos de texto com 16 px: abaixo disso o iPhone dá zoom ao tocar no campo.
 */
@media (max-width: 1023px) {
	.cs-pagina { min-width: 0; }

	/* topo */
	.cs-topo { height: auto; padding: 32px 16px 0; }
	.cs-topo__logo { position: static; display: block; width: min(580px, 78%); height: auto; margin: 0 auto; }
	.cs-topo__logo svg { width: 100%; height: auto; }
	.cs-topo__journal { position: static; margin-top: 10px; font-size: clamp(20px, 6vw, 40px); line-height: 1.4; letter-spacing: .25em; text-indent: .25em; }

	/* menu: uma linha só, rola para o lado quando tem muita seção */
	.cs-menu, .cs-pagina--home .cs-menu { min-height: 48px; margin-top: 24px; }
	.cs-menu ul {
		flex-wrap: nowrap;
		justify-content: safe center;
		gap: 0 28px;
		min-height: 48px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.cs-menu ul::-webkit-scrollbar { display: none; }
	.cs-menu a { padding: 12px 0; white-space: nowrap; }

	/* busca */
	.cs-busca, .cs-pagina--home .cs-busca { height: auto; padding: 24px 16px; }
	.cs-busca__form, .cs-pagina--home .cs-busca__form { position: relative; left: auto; top: auto; width: auto; max-width: 420px; height: 28px; margin-left: auto; }
	.cs-busca__form input { width: calc(100% - 30px); height: 26px; font-size: 16px; }
	.cs-busca__form button { top: 3px; }

	.cs-capa-home { margin-top: 24px; }

	/* grade: um card embaixo do outro, foto de borda a borda */
	.cs-grade,
	.cs-grade--1, .cs-grade--2, .cs-grade--3, .cs-grade--4, .cs-grade--5 {
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: auto;
		height: auto;
		margin: 0 0 48px;
	}
	.cs-card,
	.cs-card[class*='cs-card--p'] { position: relative; left: auto; top: auto; width: auto; height: auto; }

	.cs-card__titulo,
	.cs-card__chamada,
	.cs-card__data,
	.cs-card__pe,
	.cs-card[class*='cs-card--p'] .cs-card__titulo,
	.cs-card[class*='cs-card--p'] .cs-card__chamada,
	.cs-card[class*='cs-card--p'] .cs-card__data,
	.cs-card[class*='cs-card--p'] .cs-card__pe { position: relative; left: auto; right: auto; top: auto; width: auto; max-height: none; }

	.cs-card__l1, .cs-card__l2,
	.cs-card[class*='cs-card--p'] .cs-card__l1,
	.cs-card[class*='cs-card--p'] .cs-card__l2 { width: auto; min-width: 0; margin: 0; white-space: normal; overflow: visible; overflow-wrap: break-word; }
	.cs-card--p4 .cs-card__titulo a { display: block; }
	.cs-card--p4.cs-card[class*='cs-card--p'] .cs-card__l1,
	.cs-card--p4.cs-card[class*='cs-card--p'] .cs-card__l2 { display: inline; } /* "NEW IN" numa linha, como no desktop */
	/* área do título no celular: título maior que isso diminui sozinho (journal.js), como no desktop */
	.cs-card[class*='cs-card--p'] .cs-card__titulo { max-height: 172px; }
	.cs-card--p1.cs-card[class*='cs-card--p'] .cs-card__titulo { max-height: 260px; }
	.cs-card--p3.cs-card[class*='cs-card--p'] .cs-card__titulo,
	.cs-card--p5.cs-card[class*='cs-card--p'] .cs-card__titulo { max-height: 124px; }

	.cs-card__texto { width: auto; max-width: 421px; font-size: 17px; line-height: 22px; }
	.cs-card__botao { font-size: 18px; line-height: 22px; }
	.cs-card--p1 .cs-card__botao { margin-left: 0; }
	.cs-card--p7 .cs-card__botao > span:first-child { min-width: 0; margin-left: 0; }

	/* cards com foto: texto por cima da foto, embaixo, sobre o degradê */
	.cs-card--p1, .cs-card--p2, .cs-card--p4, .cs-card--p6, .cs-card--p7 {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 18px;
		aspect-ratio: 4 / 5;
		padding: 28px 20px 32px;
		text-align: center;
	}
	.cs-card[class*='cs-card--p'] .cs-card__foto::after { inset: 0; width: auto; background: linear-gradient(to top, rgba(0, 0, 0, .6) 20%, rgba(102, 102, 102, 0) 65%); }
	.cs-card[class*='cs-card--p'] .cs-card__pe { align-items: center; gap: 22px; }
	.cs-card__texto { margin: 0 auto; }

	/* 1: título grande no alto, à direita, como no desktop */
	.cs-card--p1 { justify-content: space-between; aspect-ratio: 586 / 953; max-height: 720px; }
	.cs-card--p1 .cs-card__titulo { text-align: right; }
	.cs-card--p1 .cs-card__l1 { font-size: calc(64px * var(--e, 1)); line-height: calc(64px * var(--e, 1)); }
	.cs-card--p1 .cs-card__l2 { margin-top: calc(-4px * var(--e, 1)); font-size: calc(54px * var(--e, 1)); line-height: calc(56px * var(--e, 1)); }
	.cs-card--p1 .cs-card__foto::after { background: linear-gradient(to top, rgba(0, 0, 0, .6) 15%, rgba(102, 102, 102, 0) 45%); }

	.cs-card--p2 .cs-card__l1,
	.cs-card--p2 .cs-card__l2,
	.cs-card--p4 .cs-card__titulo,
	.cs-card--p7 .cs-card__titulo { font-size: calc(56px * var(--e, 1)); line-height: calc(56px * var(--e, 1)); }
	.cs-card--p2 .cs-card__l2 { padding-left: 1.2em; }
	.cs-card--p2 .cs-card__chamada { display: block; text-align: center; font-size: 15px; line-height: 19px; }

	.cs-card--p6 .cs-card__l1 { font-size: calc(40px * var(--e, 1)); line-height: calc(42px * var(--e, 1)); }
	.cs-card--p6 .cs-card__l2 { margin-top: 2px; font-size: calc(40px * var(--e, 1)); line-height: calc(42px * var(--e, 1)); }

	/* 7: alinhado à esquerda, como no desktop */
	.cs-card--p7 { text-align: left; }
	.cs-card--p7.cs-card[class*='cs-card--p'] .cs-card__pe { align-items: flex-start; }
	.cs-card--p7 .cs-card__texto { margin: 0; }

	/* "Só a imagem": mesma proporção do desktop, para a arte cortar igual nos dois */
	.cs-card--so-imagem { padding: 0; }
	.cs-card--p1.cs-card--so-imagem { aspect-ratio: 586 / 953; max-height: none; }
	.cs-card--p2.cs-card--so-imagem { aspect-ratio: 585 / 763; }
	.cs-card--p4.cs-card--so-imagem { aspect-ratio: 1196 / 616; }
	.cs-card--p6.cs-card--so-imagem { aspect-ratio: 586 / 549; }
	.cs-card--p7.cs-card--so-imagem { aspect-ratio: 585 / 889; }

	/* cards só de texto (3 e 5) */
	.cs-card--p3, .cs-card--p5 { padding: 8px 16px; }
	.cs-card--p3 .cs-card__titulo,
	.cs-card--p5 .cs-card__titulo { font-size: calc(38px * var(--e, 1)); line-height: calc(40px * var(--e, 1)); }
	.cs-card--p3 .cs-card__pe { margin-top: 12px; }
	.cs-card--p5 .cs-card__data { margin-top: 10px; }
	.cs-card--p5.cs-card[class*='cs-card--p'] .cs-card__pe,
	.cs-card--p3.cs-card[class*='cs-card--p'] .cs-card__pe { align-items: flex-start; gap: 16px; }
	.cs-card--p5 .cs-card__pe { margin-top: 14px; }
	.cs-card--p5 .cs-card__texto { margin: 0; }
	.cs-card--p3 .cs-card__botao, .cs-card--p5 .cs-card__botao { margin-left: 0; gap: 16px; }
	.cs-card--p3 .cs-card__botao > span:first-child,
	.cs-card--p5 .cs-card__botao > span:first-child { min-width: 0; }
	.cs-card__seta svg { width: 56px; }

	.cs-paginacao { justify-content: center; margin: 0; }
	.cs-principal:has(.cs-paginacao) { padding-bottom: 56px; }
	.cs-principal:has(.cs-grade):not(:has(.cs-paginacao)) { padding-bottom: 32px; }

	/* capa e título da matéria (a capa já segue a largura: --u acompanha a página) */
	.cs-capa__legenda { top: 12px; bottom: 38px; right: 4px; white-space: normal; font-size: 8px; line-height: 11px; } /* capa baixa: a legenda comprida quebra em colunas */
	.cs-titulo-card { width: auto; margin: -28px 16px 0; padding: 12px 12px 0; }
	.cs-titulo-card--sem-capa { margin-top: 0; }
	.cs-titulo-card__meta { flex-wrap: wrap; gap: 2px 10px; height: auto; font-size: 12px; }
	.cs-titulo-card__tags { font-size: 12px; line-height: 18px; }
	.cs-titulo-card__meta time { min-width: 0; }
	.cs-titulo-card__titulo { width: auto; margin: 10px 0 0; font-size: clamp(28px, 7.5vw, 44px); line-height: 1.15; }

	/* texto da matéria */
	.cs-conteudo { width: auto; max-width: 960px; margin: 32px 16px 0; }
	.cs-conteudo > * { margin-bottom: 32px; }
	.cs-conteudo p { font-size: 17px; line-height: 26px; text-align: left; }
	.cs-conteudo > p:has(+ p) { margin-bottom: 18px; }
	.cs-conteudo > .cs-legenda { margin-top: -24px; margin-left: 0; }
	.cs-conteudo > .cs-legenda.has-text-align-right { margin-left: 50%; }

	/* moldes de foto: mesmo desenho, na proporção do desktop */
	.cs-mosaico { gap: 6px; width: auto; height: auto; grid-template-rows: minmax(0, 416fr) minmax(0, 240fr); }
	.cs-mosaico--alta-direita { width: auto; aspect-ratio: 952 / 668; grid-template-columns: minmax(0, 527fr) minmax(0, 405fr); column-gap: 8px; }
	.cs-mosaico--alta-esquerda { width: auto; aspect-ratio: 960 / 668; grid-template-columns: minmax(0, 405fr) minmax(0, 527fr); column-gap: 8px; }
	.cs-mosaico .wp-block-image, .cs-duas-fotos .wp-block-image, .cs-tres-fotos .wp-block-image { min-height: 0; overflow: hidden; }

	.cs-duas-fotos { height: auto; aspect-ratio: 960 / 511; grid-template-columns: minmax(0, 458fr) minmax(0, 488fr); column-gap: 6px; }
	.cs-duas-fotos .cs-legenda-vertical { left: calc(100% + 1px); bottom: 0; font-size: 8px; line-height: 12px; } /* na margem de 16 px, como fora da foto no desktop */

	.cs-tres-fotos { width: auto; height: auto; aspect-ratio: 978 / 736; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: 4px; margin-left: 0 !important; }

	.cs-conteudo > .cs-foto-larga { margin-left: -16px; margin-bottom: 8px; }
	.cs-foto-larga__titulo { width: auto; margin: -24px 16px 0; padding: 16px 12px 12px; font-size: clamp(26px, 7vw, 40px); line-height: 1.2; }
	/* legenda na mesma célula da foto (não do bloco todo, que inclui o título): quebra em colunas, como na capa */
	.cs-conteudo > .cs-foto-larga { display: grid; }
	.cs-foto-larga > * { grid-column: 1; }
	.cs-foto-larga .wp-block-image, .cs-foto-larga .cs-legenda-vertical { grid-row: 1; }
	.cs-foto-larga .cs-legenda-vertical { position: static; justify-self: end; align-self: stretch; contain: inline-size; /* vertical: a altura vem da foto, não do texto */ margin: 12px 4px 30px 0; white-space: normal; font-size: 8px; line-height: 11px; }

	/* vitrine: fileira que rola para o lado (2 produtos e meio na tela), de borda a borda */
	.cs-conteudo > .cs-vitrine {
		justify-content: safe center;
		gap: 6px;
		margin-left: -16px;
		padding: 0 16px;
		box-sizing: border-box;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 16px;
		scrollbar-width: none;
	}
	.cs-vitrine::-webkit-scrollbar { display: none; }
	.cs-produto { flex: none; width: min(42cqw, 299px); scroll-snap-align: start; }
	.cs-produto__foto { width: 100%; height: auto; aspect-ratio: 1; }

	/* páginas institucionais */
	.cs-materia--pagina .cs-pagina__titulo { width: auto; margin: 32px 16px 0; font-size: 32px; line-height: 38px; }

	/* newsletter */
	.cs-news { height: auto; padding: 32px 16px 28px; }
	.cs-news__inner { position: static; flex-direction: column; align-items: stretch; gap: 20px; width: auto; max-width: 480px; height: auto; margin: 0 auto; }
	.cs-news__titulo { width: auto; margin: 0; }
	.cs-news__form { flex-direction: column; align-items: stretch; gap: 16px; }
	.cs-news__campos { width: auto; }
	.cs-news__campo { height: auto; }
	.cs-news__campo input { width: 100%; height: 36px; margin-left: 0; font-size: 16px; }
	.cs-news__botao { width: 100%; height: 44px; margin-top: 4px; font-size: 14px; }
	.cs-news__aviso { position: static; white-space: normal; }
	.cs-news__redes { justify-content: center; margin-top: 0; padding: 0; gap: 16px; }

	/* rodapé: colunas em grade de 2 */
	.cs-rodape { height: auto; padding: 40px 16px 24px; }
	.cs-rodape__menu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; width: auto; max-width: 560px; margin: 0 auto; }
	.cs-rodape__col { position: static; }
	.cs-rodape__col ul, .cs-rodape__col--institucional ul { gap: 6px; }
	.cs-rodape__col--institucional li:nth-child(2) { margin-top: 0; }
	.cs-rodape__col li { font-size: 13px; line-height: 20px; }
	.cs-rodape__col--app { grid-column: 1 / -1; flex-flow: row wrap; gap: 12px; }
	.cs-rodape__col--app h2 { width: 100%; }
	.cs-rodape__cnpj { position: static; width: auto; margin: 32px auto 0; font-size: 10px; line-height: 14px; }
}

/* tablet em pé: a grade em 2 colunas; o card largo (4) e os de texto (3, 5) ocupam a linha toda */
@media (min-width: 600px) and (max-width: 1023px) {
	.cs-grade,
	.cs-grade--1, .cs-grade--2, .cs-grade--3, .cs-grade--4, .cs-grade--5 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		padding: 0 24px;
	}
	.cs-card--p3, .cs-card--p4, .cs-card--p5 { grid-column: 1 / -1; }
	.cs-card--p3, .cs-card--p5 { padding: 8px 0; }
	.cs-card--p1, .cs-card--p2, .cs-card--p7 { aspect-ratio: 3 / 5; max-height: none; }
	.cs-card--p6 { aspect-ratio: auto; }
	.cs-card--p4 { aspect-ratio: 1196 / 616; }
	.cs-card--p1 .cs-card__l1 { font-size: calc(56px * var(--e, 1)); line-height: calc(56px * var(--e, 1)); }
	.cs-card--p1 .cs-card__l2 { font-size: calc(46px * var(--e, 1)); line-height: calc(48px * var(--e, 1)); }
	.cs-card--p2 .cs-card__l1,
	.cs-card--p2 .cs-card__l2,
	.cs-card--p7 .cs-card__titulo { font-size: calc(46px * var(--e, 1)); line-height: calc(48px * var(--e, 1)); }
	.cs-conteudo { margin-left: 24px; margin-right: 24px; }
	@media (min-width: 1008px) { .cs-conteudo { margin-left: auto; margin-right: auto; } }
	.cs-conteudo > .cs-foto-larga,
	.cs-conteudo > .cs-vitrine { margin-left: calc(-1 * max(24px, (100cqw - 960px) / 2)); }
	.cs-conteudo > .cs-vitrine { padding: 0 max(24px, (100cqw - 960px) / 2); }
}

/* ================================================================ editor (painel) */

/* no editor, a matéria aparece na coluna de 960 com o mesmo texto do site */
.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper { max-width: 960px; margin-left: auto !important; margin-right: auto !important; }
.editor-styles-wrapper .wp-block-post-title { font: 400 48px/48px var(--cs-fonte); }
.editor-styles-wrapper .is-root-container > p { margin: 0 0 21px; font: 400 16px/21px var(--cs-fonte); text-align: justify; }
.editor-styles-wrapper .is-root-container > h2,
.editor-styles-wrapper .is-root-container > h3 { margin: 46px 0 11px; font: 700 20px/26px var(--cs-fonte); }
.editor-styles-wrapper .is-root-container > .wp-block-group,
.editor-styles-wrapper .is-root-container > .wp-block-image { margin-top: 46px; margin-bottom: 46px; }
.editor-styles-wrapper .cs-legenda { margin: -35px 0 46px; color: var(--cs-cinza-legenda); font: 400 10px/15px var(--cs-fonte); text-transform: uppercase; }
.editor-styles-wrapper .cs-foto-larga .wp-block-image { height: auto; aspect-ratio: 1440 / 812; }
.editor-styles-wrapper .cs-foto-larga__titulo { width: 84%; }
.editor-styles-wrapper .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.editor-styles-wrapper .cs-vitrine { width: auto; margin-left: 0; flex-wrap: wrap; }

.editor-styles-wrapper .cs-conteudo,
.editor-styles-wrapper.cs-conteudo { margin: 0 auto; }
.editor-styles-wrapper .cs-foto-larga { width: auto; min-width: 0; margin-left: 0; }
.editor-styles-wrapper .cs-legenda-vertical { writing-mode: horizontal-tb; transform: none; position: static; }