@charset "UTF-8";

/* ==========================================================================
   Tokens visuais compartilhados pela loja e pelo painel.
   Cores das artes da marca: vermelho #A11A1C, vinho da faixa ondulada, ouro das
   etiquetas de preço, preto/grafite e cinzas neutros (#B1B1B1 do losango do logo,
   #666666 dos textos), sobre branco, cinza-claro e mármore.
   Jost (geométrica, como o logotipo) no texto, na interface, nos preços e nos
   nomes de produto; o "Letreiro Marmocenter" (--letreiro) só nos letreiros e
   títulos de seção, em caixa-alta, como o slogan das artes.
   As cores da marca (--brand*) e o --foco são redefinidos por /tema.css,
   gerado a partir da cor escolhida no painel (Identidade da loja). O vinho
   deriva de --brand-deep para acompanhar essa cor.
   ========================================================================== */

@font-face {
	font-family: 'Jost Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fontes/jost-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fontes/jost-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Letreiro Marmocenter: fonte dos títulos, no espírito do letreiro das artes
   ("A LOJA DO / MARMORISTA / CEARENSE"), recortado à mão como xilogravura.
   Subconjunto da Londrina Solid (SIL OFL 1.1), renomeado porque a licença reserva
   o nome original. 300 = linha fina (chamada), 400 = título. Licença em
   ../fontes/letreiro-OFL.txt */
@font-face {
	font-family: 'Letreiro Marmocenter';
	font-style: normal;
	font-display: swap;
	font-weight: 300;
	src: url('../fontes/letreiro-latin-300-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Letreiro Marmocenter';
	font-style: normal;
	font-display: swap;
	font-weight: 300;
	src: url('../fontes/letreiro-latin-ext-300-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Letreiro Marmocenter';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('../fontes/letreiro-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Letreiro Marmocenter';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('../fontes/letreiro-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--ink: #141414;
	--ink-2: #1c1c1c;
	--ink-3: #262626;
	--paper: #fafafa;
	--ivory: #f1f1f1; /* cinza-claro das artes (fundo das seções claras) */
	--stone: #e4e4e4;
	--sand: #b1b1b1; /* cinza do losango do logo */
	--text: #1a1a1a;
	--muted: #666666; /* cinza dos textos da marca: contraste AA sobre branco, --paper e --ivory */
	--muted-dark: #a6a6a6;
	--line: rgba(20, 20, 20, 0.12);
	--line-strong: rgba(20, 20, 20, 0.24);
	--line-dark: rgba(241, 241, 241, 0.14);
	--brand: #a11a1c;
	--brand-deep: #821517;
	--brand-light: #e14547; /* vermelho sobre fundo escuro, contraste AA */
	--foco: rgba(161, 26, 28, 0.14); /* realce translúcido da marca (foco de campos, toque) */
	--whats: #10783f; /* verde WhatsApp escurecido: contraste AA com branco */
	--ok: #1f6f43;
	--ok-bg: #e6f2ea;
	--warn: #8a5a00;
	--warn-bg: #fbf1dc;
	--danger: #a00106;
	--danger-bg: #fbe7e7;
	--info: #22486e;
	--info-bg: #e7eef6;

	/* Cores das artes. O vinho deriva de --brand-deep (tema.css) para acompanhar a cor do painel;
	   ouro, couro e mármore são fixos. Texto sobre ouro só em --ink ou --vinho. */
	--vinho: var(--brand-deep); /* faixa ondulada, rodapé, motivos */
	--vinho-escuro: color-mix(in srgb, var(--brand-deep) 72%, #000); /* rodapé inferior, sombras sobre vinho */
	--ouro: #ffab00; /* etiquetas de preço e oferta */
	--ouro-escuro: #e69500; /* hover e borda */
	--ouro-claro: #fff3d1; /* fundo suave de aviso de oferta */
	--couro: #8b4a24; /* acento raro (couro do chapéu): 6,8:1 sobre branco */
	--cinza-chapeu: #8a8a8a; /* cinza dos ornamentos (chapéu, estrelas): só decorativo */
	--marmore: #efefef; /* cor de reserva do fundo de mármore */

	--sans: 'Jost Variable', 'Jost', 'Segoe UI', system-ui, sans-serif;
	--display: var(--sans); /* títulos */
	/* Letreiro das artes: só letreiros e títulos de seção (nunca texto corrido, nome de produto, preço,
	   botão, campo ou menu). Pesos 300 e 400 apenas. */
	--letreiro: 'Letreiro Marmocenter', 'Jost Variable', 'Jost', 'Segoe UI', system-ui, sans-serif;

	--raio-sm: 6px;
	--raio: 10px;
	--raio-lg: 16px;
	--sombra-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 4px rgba(20, 20, 20, 0.06);
	--sombra-2: 0 8px 22px rgba(20, 20, 20, 0.1);
	--sombra-3: 0 18px 44px rgba(20, 20, 20, 0.18);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Navegador sem color-mix(): --vinho-escuro ficaria inválido, e o fundo que o usa (rodapé inferior, "Todas as
   categorias") sumiria sob o texto branco. Fica o vinho da marca (--brand-deep), escuro o bastante para o
   texto branco (10:1 com a cor padrão).
   Os demais color-mix() pintam textos e fundos claros: sem suporte, a declaração cai e o texto continua legível. */
@supports not (color: color-mix(in srgb, red, red)) {
	:root {
		--vinho-escuro: var(--brand-deep);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: var(--foco);
}

body {
	margin: 0;
	font-family: var(--sans);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a,
button,
input,
select,
textarea,
summary,
label {
	touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Palavra de destaque dos títulos: em vermelho, como o "CENTER" do logotipo (sem itálico) */
h1 em,
h2 em,
h3 em {
	font-style: normal;
	color: var(--brand);
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

::selection {
	background: var(--brand);
	color: #fff;
}

.icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon-fill {
	width: 1.2em;
	height: 1.2em;
	flex: none;
	fill: currentColor;
}

/* Sprite de ícones (Pages/Shared/_Icones.cshtml): fora do fluxo, sem atributo style (CSP) */
.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tabular {
	font-variant-numeric: tabular-nums;
}

/* Selos de status de pedido (loja e painel) */
.selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	background: var(--stone);
	color: var(--text);
}

.selo::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.selo--aguardando {
	background: var(--warn-bg);
	color: var(--warn);
}

.selo--pago {
	background: var(--info-bg);
	color: var(--info);
}

.selo--andamento {
	background: #efe9fb;
	color: #4b2f86;
}

.selo--concluido {
	background: var(--ok-bg);
	color: var(--ok);
}

.selo--encerrado {
	background: var(--stone);
	color: var(--muted);
}

.selo--alerta {
	background: var(--danger-bg);
	color: var(--danger);
}

/* ==========================================================================
   Primitivas da identidade das artes (loja e painel). Os ornamentos são máscaras
   de uma cor (o desenho fica no alfa do .webp/.svg) pintadas com a cor de fundo:
   acompanham a cor do painel e somem no modo de alto contraste. Tudo aqui é
   decorativo: pointer-events:none, sem foco; no HTML, aria-hidden="true".
   ========================================================================== */

/* Letreiro: o slogan recortado à mão das artes, em caixa-alta. 400 = título (mínimo 20 px),
   .letreiro--fino = 300, a linha fina de chamada ("A LOJA DO"). Funciona sozinho ou junto
   com .letreiro. Sem negrito ou itálico sintetizados (a fonte só tem 300 e 400). */
.letreiro,
.letreiro--fino {
	font-family: var(--letreiro);
	font-weight: 400;
	font-style: normal;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.letreiro--fino {
	font-weight: 300;
	letter-spacing: 0.06em;
}

/* Estrelas rústicas antes e depois do texto (o ✱ ao lado de "CEARENSE"). Usa ::before e ::after:
   não combine com .com-chapeu no mesmo elemento. A cor muda com --estrela-cor.
   As estrelas vão no fluxo do texto e o elemento mantém o próprio display (h2/p em bloco, span em
   linha; não o torne flex nem grid). Assim elas acompanham a quebra de linha: um <em> no meio segue
   na mesma linha e a estrela de trás fica colada à última palavra. Com flex, o texto virava um bloco
   anônimo da largura toda e a estrela final ia parar na borda.
   Cada estrela é uma caixa em linha (padding de .8em com a máscara), não inline-block: o Chrome abre
   ponto de quebra antes de um inline-block, e a estrela final descia sozinha para a linha de baixo.
   O conteúdo é o "word joiner" (U+2060, invisível e sem largura), que cola a estrela à palavra: com
   a caixa vazia, o Chrome deixa a estrela vazar pela borda em vez de levar a palavra junto para a
   linha seguinte. O centro da caixa (área de conteúdo da fonte) coincide com o meio das maiúsculas
   do letreiro e do Jost. */
.estrelado::before,
.estrelado::after {
	content: '\2060';
	padding-left: 0.8em;
	background: var(--estrela-cor, var(--cinza-chapeu));
	-webkit-mask: url('../midia/estrela.webp') no-repeat center / 0.8em 0.8em;
	mask: url('../midia/estrela.webp') no-repeat center / 0.8em 0.8em;
	pointer-events: none;
}

.estrelado::before {
	margin-right: 0.4em;
}

.estrelado::after {
	margin-left: 0.4em;
}

/* Chapéu de couro acima do bloco (como sobre "A LOJA DO"), centralizado; .com-chapeu--esquerda
   alinha à esquerda. Largura em --chapeu-largura, cor em --chapeu-cor. Usa ::before. */
.com-chapeu::before {
	content: '';
	display: block;
	width: var(--chapeu-largura, clamp(48px, 2.4em, 112px));
	aspect-ratio: 611 / 363;
	margin: 0 auto 0.3em;
	background: var(--chapeu-cor, var(--cinza-chapeu));
	-webkit-mask: url('../midia/chapeu.webp') no-repeat center / contain;
	mask: url('../midia/chapeu.webp') no-repeat center / contain;
	pointer-events: none;
}

.com-chapeu--esquerda::before {
	margin-left: 0;
}

/* Mármore claro das artes (textura sutil que repete sem emenda). Texto miúdo sobre ele pede
   --text ou um cartão branco por trás: --muted fica perto de 4:1 sobre os veios. Por isso o texto
   de apoio da loja (--apoio-cor: .lead, subtítulo da .secao-cabeca) escurece aqui, como o .eyebrow. */
.fundo-marmore {
	--apoio-cor: color-mix(in srgb, var(--muted) 70%, var(--ink));
	background: var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: 900px auto;
}

/* Motivos de xilogravura: <span class="ornamento ornamento--sol" aria-hidden="true"></span>.
   Pintado com currentColor (padrão: vinho; estrela e chapéu em cinza). Quem usa dá a largura
   (ou a altura); a proporção vem do desenho. */
.ornamento {
	display: block;
	flex: none;
	color: var(--vinho);
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	user-select: none;
}

/* Sol em espiral com raios (canto superior do banner) */
.ornamento--sol {
	aspect-ratio: 454 / 443;
	-webkit-mask-image: url('../midia/sol.webp');
	mask-image: url('../midia/sol.webp');
}

/* Revoada de asas-brancas */
.ornamento--passaros {
	aspect-ratio: 469 / 333;
	-webkit-mask-image: url('../midia/passaros.webp');
	mask-image: url('../midia/passaros.webp');
}

/* Touceiras de xique-xique com a base reta, para apoiar numa faixa vinho. A da direita é cortada
   pela borda: ancore em right:0 com a base no topo da faixa; espelhe com transform:scaleX(-1). */
.ornamento--vegetacao {
	aspect-ratio: 583 / 195;
	-webkit-mask-image: url('../midia/vegetacao.webp');
	mask-image: url('../midia/vegetacao.webp');
	-webkit-mask-position: right bottom;
	mask-position: right bottom;
}

/* Estrela rústica solta */
.ornamento--estrela {
	aspect-ratio: 255 / 248;
	color: var(--cinza-chapeu);
	-webkit-mask-image: url('../midia/estrela.webp');
	mask-image: url('../midia/estrela.webp');
}

/* Chapéu de couro com três estrelas */
.ornamento--chapeu {
	aspect-ratio: 611 / 363;
	color: var(--cinza-chapeu);
	-webkit-mask-image: url('../midia/chapeu.webp');
	mask-image: url('../midia/chapeu.webp');
}

/* Mandacaru em pé (base reta) */
.ornamento--cacto {
	aspect-ratio: 341 / 546;
	-webkit-mask-image: url('../midia/cacto.webp');
	mask-image: url('../midia/cacto.webp');
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
}

/* Borda de cima ondulada, recortada à mão como a faixa vinho da base das artes. O elemento leva o
   fundo (vinho) e a onda sobe por cima do que vem antes. Altura em --onda-altura; cor em --onda-cor
   (padrão --vinho: use o mesmo fundo do elemento). Usa ::before; o 1 px de sobreposição evita fresta. */
.onda-vinho {
	position: relative;
}

.onda-vinho::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: var(--onda-altura, clamp(16px, 2.4vw, 36px));
	background: var(--onda-cor, var(--vinho));
	-webkit-mask: url('../midia/onda-vinho.svg') no-repeat center bottom / 100% 100%;
	mask: url('../midia/onda-vinho.svg') no-repeat center bottom / 100% 100%;
	pointer-events: none;
}

/* Selo de desconto "-15%": ouro com texto --ink, no letreiro */
.selo-desconto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.16em 0.38em 0.1em;
	border-radius: var(--raio-sm);
	background: var(--ouro);
	color: var(--ink);
	font-family: var(--letreiro);
	font-size: 1.25rem;
	font-weight: 400;
	font-style: normal;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Etiqueta ouro do preço em oferta: vai no MESMO <span class="preco"> (o texto "R$ 99,90" continua
   inteiro, em Jost tabular), sem chip de "R$" separado */
.preco--etiqueta {
	display: inline-block;
	padding: 0.15em 0.45em;
	border-radius: var(--raio-sm);
	background: var(--ouro);
	color: var(--ink);
	line-height: 1.15;
}

/* Alto contraste: os ornamentos somem (o sistema pintaria a máscara com a cor do fundo) e selo e
   etiqueta ganham contorno para não perder a forma */
@media (forced-colors: active) {
	.ornamento,
	.estrelado::before,
	.estrelado::after,
	.com-chapeu::before,
	.onda-vinho::before {
		display: none !important;
	}

	.selo-desconto,
	.preco--etiqueta {
		border: 1px solid CanvasText;
	}
}