/* ==========================================================================
   Fuê — base (toda página)
   Tokens idênticos ao Figma e a docs/04-DESIGN-TOKENS.md. Valor solto = bug.
   Breakpoints: < 768 mobile · 768–1023 tablet · ≥ 1024 desktop · ≥ 1920 wide
   ========================================================================== */

:root {
	--fue-surface-primary: #fff;
	--fue-surface-secondary: #f5f4f2;
	--fue-surface-tertiary: #ebeae7;
	--fue-surface-inverse: #000;
	--fue-surface-dark: #1a1918;

	--fue-text-primary: #000;
	--fue-text-secondary: #4a4744;
	--fue-text-tertiary: #6b6864;
	--fue-text-disabled: #8e8b86;
	--fue-text-inverse: #fff;
	--fue-text-sale: #f00119;

	--fue-border-strong: #000;
	--fue-border-default: #b8b5b0;
	--fue-border-subtle: #d6d4d0;

	/* Paleta do brand book (rev. 30/09): preto, cinza, amarelo, vermelho, magenta, azul — sem laranja. */
	--fue-accent-new: #ffec01;   /* amarelo: lançamento, novidades */
	--fue-on-new: #000;          /* texto sobre o amarelo */
	--fue-gray: #494949;
	--fue-accent-collab: #de1fe8;
	--fue-accent-sale: #f00119;
	--fue-accent-system: #0045aa;
	--fue-success: #1f7a3d;     /* sistema: senha forte, confirmações */
	--fue-yellow: #ffec01;

	--fue-font-marca: "Bricolage Grotesque", "Archivo", sans-serif;
	--fue-font-estrutura: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--fue-space-1: 4px; --fue-space-2: 8px; --fue-space-3: 12px; --fue-space-4: 16px;
	--fue-space-5: 24px; --fue-space-6: 32px; --fue-space-7: 40px; --fue-space-8: 48px;
	--fue-space-9: 64px; --fue-space-10: 80px; --fue-space-11: 120px; --fue-space-12: 160px;

	--fue-margin: 20px;        /* margem lateral da grade */
	--fue-gap: 12px;           /* respiro entre fotos/cards */
	--fue-section: var(--fue-space-9);
	--fue-header-h: 64px;
	--fue-announce-h: 36px;

	--fue-fast: 250ms; --fue-base: 400ms; --fue-slow: 500ms;
	--fue-ease: cubic-bezier(.22, 1, .36, 1);
	--fue-logo: #000;
}

@media (min-width: 768px) {
	:root { --fue-margin: 40px; --fue-gap: 16px; --fue-section: var(--fue-space-10); }
}
@media (min-width: 1024px) {
	:root { --fue-gap: 24px; --fue-section: var(--fue-space-11); --fue-header-h: 76px; }
}
@media (min-width: 1920px) {
	:root { --fue-margin: 80px; }
}

/* ---------- reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	background: var(--fue-surface-primary);
	color: var(--fue-text-primary);
	font: 400 15px/1.6 var(--fue-font-estrutura);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
del { color: var(--fue-text-tertiary); }
ins { text-decoration: none; }
:focus-visible { outline: 2px solid var(--fue-accent-system); outline-offset: 2px; }
[hidden] { display: none !important; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fue-skip { position: absolute; left: -9999px; top: 0; z-index: 800; background: #000; color: #fff; padding: 12px 16px; }
.fue-skip:focus { left: 8px; top: 8px; }
.fue-hp { position: absolute !important; left: -9999px; }
.fue-cover { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- tipografia (docs/04 §2) ---------- */
.t-display-xl, .t-display-l, .t-display-m, .t-display-s {
	font-family: var(--fue-font-marca); font-weight: 800; font-variation-settings: "opsz" 96;
}
.t-display-xl { font-size: 40px; line-height: .96; letter-spacing: -.035em; }
.t-display-l  { font-size: 32px; line-height: 1;    letter-spacing: -.03em; }
.t-display-m  { font-size: 26px; line-height: 1.06; letter-spacing: -.03em; font-variation-settings: "opsz" 36; }
.t-display-s  { font-size: 21px; line-height: 1.14; letter-spacing: -.02em; font-variation-settings: "opsz" 14; }
.t-page-l { font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.t-title-s { font-size: 16px; line-height: 1.4; font-weight: 500; }
.t-title-m { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.t-body-l  { font-size: 16px; line-height: 1.6; }
.t-body-m  { font-size: 15px; line-height: 1.6; }
.t-body-s  { font-size: 13px; line-height: 1.5; }
.t-label-l, .t-label-m, .t-label-s { font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.t-label-l { font-size: 13px; letter-spacing: .08em; }
.t-label-m { font-size: 12px; letter-spacing: .10em; }
.t-label-s { font-size: 11px; letter-spacing: .12em; }
.t-price-l { font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.t-price-m { font-size: 14px; line-height: 1.2; font-weight: 500; }
.t-price-s { font-size: 13px; line-height: 1.2; font-weight: 400; }

@media (min-width: 768px) {
	.t-display-xl { font-size: 76px; }
	.t-display-l  { font-size: 56px; }
	.t-display-m  { font-size: 40px; }
	.t-display-s  { font-size: 28px; }
	.t-title-m    { font-size: 20px; }
	.t-page-l     { font-size: 32px; }
	.t-body-l     { font-size: 17px; }
	.t-price-l    { font-size: 24px; }
}

/* ---------- átomos ---------- */
/* Tracinho: segue a cor sorteada do logo (--fue-logo, a cada carregamento).
   Em fundo escuro fica no magenta de sempre — tracinho preto sumiria no preto. */
.fue-tracinho { display: block; width: 48px; height: 2px; background: var(--fue-traco, var(--fue-logo, var(--fue-accent-collab))); }
.fue-final, .fue-manifesto, .fue-footer, .fue-colecao, .fue-hero, .fue-cortina, .fue-newsbloco { --fue-traco: var(--fue-accent-collab); }
.fue-tracinho--amarelo { background: var(--fue-yellow); }
@media (min-width: 1024px) { .fue-tracinho { width: 72px; } }

.fue-cta {
	display: inline-flex; flex-direction: column; gap: 8px; align-self: flex-start;
	font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.fue-cta::after { content: ""; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--fue-fast) var(--fue-ease); }
.fue-cta:hover::after { transform: scaleX(.5); }
.fue-cta--inverso { color: var(--fue-text-inverse); }

.fue-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px;
	font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
	border: 1px solid var(--fue-border-strong); transition: background var(--fue-fast), color var(--fue-fast);
}
.fue-btn--cheio { background: #000; color: #fff; }
.fue-btn--cheio:hover { background: var(--fue-surface-dark); }
.fue-btn--contorno:hover { background: #000; color: #fff; }
.fue-btn--bloco { width: 100%; }
@media (min-width: 1024px) { .fue-btn { min-height: 48px; } }

.fue-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; color: inherit; }

.fue-badge {
	display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
	background: var(--fue-accent-new); color: var(--fue-on-new);
}
.fue-badge--collab   { background: var(--fue-accent-collab); color: #fff; }
/* Selo em branco sobre vermelho/magenta (pedido do cliente, 30/09); sobre o amarelo, preto (brand book). */
.fue-badge { font-weight: 600; }
.fue-badge--promo    { background: var(--fue-accent-sale); color: #fff; }
.fue-badge--esgotado { background: #000; color: #fff; }
/* Coleção sem peças ainda (feedback 09/10: collab "em breve" no lugar das fotos de marcação) */
.fue-colecao__breve { z-index: 1; position: absolute; top: 20px; left: 20px; }
@media (min-width: 1024px) { .fue-colecao__breve { top: 40px; left: 40px; } }
.fue-mega__campanha .fue-colecao__breve { top: 28px; left: 28px; }

.fue-swatch {
	display: inline-block; width: 20px; height: 20px; border-radius: 999px;
	background: var(--sw, #000); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.fue-chip {
	display: inline-flex; align-items: center; gap: 10px; min-height: 37px; padding: 0 16px;
	border: 1px solid var(--fue-border-strong); background: #fff;
}

.fue-breadcrumb { color: var(--fue-text-tertiary); padding: 12px 0; }
.fue-breadcrumb a:hover { color: #000; }
.fue-breadcrumb .sep { margin: 0 8px; }
.fue-breadcrumb .breadcrumb_last, .fue-breadcrumb > span > span:last-child { color: #000; }

/* ---------- announcement bar (Figma: 36px; mensagens e estilo no painel) ---------- */
.fue-announce {
	position: relative; display: flex; align-items: center; justify-content: center; height: var(--fue-announce-h);
	padding: 0 var(--fue-margin); background: var(--fue-accent-new); color: var(--fue-on-new);
	white-space: nowrap; overflow: hidden; text-align: center;
}
.fue-announce--collab { background: var(--fue-accent-collab); color: #fff; }
.fue-announce--preto  { background: #000; color: #fff; }
.fue-announce--azul   { background: var(--fue-accent-system); color: #fff; }
.fue-announce--novo .fue-announce__btn:hover, .fue-announce--novo .fue-announce__btn:focus-visible { background: #000; color: var(--fue-accent-new); }
.fue-announce__txt { white-space: nowrap; }
.fue-announce__full { display: none; }
/* Botão da mensagem: contorno fino na cor do texto; no hover inverte. */
.fue-announce__btn {
	display: inline-flex; align-items: center; height: 22px; margin-left: 14px; padding: 0 10px;
	border: 1px solid currentColor; color: inherit; font: inherit; letter-spacing: inherit; vertical-align: middle;
	transition: background var(--fue-fast), color var(--fue-fast);
}
.fue-announce__btn:hover, .fue-announce__btn:focus-visible { background: #fff; color: #000; }
.fue-announce--preto .fue-announce__btn:hover { color: #000; }
.fue-announce__cobre { position: absolute; inset: 0; }
@media (max-width: 767px) { .fue-announce { letter-spacing: .08em; } .fue-announce__btn { margin-left: 10px; padding: 0 8px; } }
@media (min-width: 768px) {
	.fue-announce__full { display: inline; }
	.fue-announce__short { display: none; }
}
/* Suave e deslizar: mensagens empilhadas na mesma célula — nada pula ao trocar. */
.fue-announce__viewport { display: grid; align-items: center; width: 100%; height: 100%; }
.fue-announce__item { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity 450ms var(--fue-ease), visibility 450ms var(--fue-ease), transform 450ms var(--fue-ease); }
.fue-announce__item[data-current] { opacity: 1; visibility: visible; }
.fue-announce--slide .fue-announce__item { transform: translateY(110%); }
.fue-announce--slide .fue-announce__item[data-current] { transform: none; }
.fue-announce--slide .fue-announce__item[data-leaving] { transform: translateY(-110%); opacity: 0; visibility: visible; }
/* Corrida contínua: duas cópias da fila; a duração vem do JS (px/s constante). */
.fue-announce--marquee { justify-content: flex-start; padding: 0; }
.fue-announce__marquee { display: flex; width: max-content; }
.fue-announce__run { display: flex; align-items: center; flex: none; margin: 0; padding: 0 0 0 32px; list-style: none; animation: fue-run var(--fue-run, 30s) linear infinite; }
.fue-announce__unit { display: flex; align-items: center; white-space: nowrap; }
.fue-announce__unit::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 32px; border-radius: 50%; background: currentColor; opacity: .5; }
@keyframes fue-run { to { transform: translateX(-100%); } }
.fue-announce--marquee:hover .fue-announce__run, .fue-announce--marquee:focus-within .fue-announce__run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.fue-announce__item { transition: none; }
	.fue-announce--slide .fue-announce__item { transform: none; }
	.fue-announce--marquee { overflow-x: auto; scrollbar-width: none; }
	.fue-announce__run { animation: none; }
	.fue-announce__marquee > .fue-announce__run:last-child { display: none; }
}
/* Celular: texto + botão não cabem em 390 px — a mensagem inteira vira o link. */
.fue-announce__cobre--m { display: none; }
@media (max-width: 767px) {
	.fue-announce__btn { display: none; }
	.fue-announce__cobre--m { display: block; position: absolute; inset: 0; }
	.fue-announce__item, .fue-announce__unit { position: relative; }
}

/* ---------- header ---------- */
.fue-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--fue-surface-primary); color: var(--fue-text-primary);
	border-bottom: 1px solid var(--fue-border-subtle);
	transition: transform var(--fue-base) var(--fue-ease), background var(--fue-fast), color var(--fue-fast);
}
.fue-header.is-solto { transform: translateY(-110%); }
.fue-header__bar {
	position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	height: var(--fue-header-h); padding: 0 var(--fue-margin);
}
.fue-header__menu { justify-self: start; margin-left: -10px; }
.fue-header__logo { position: relative; justify-self: center; display: block; }
.fue-header__logo .fue-logo svg { width: 72px; height: auto; }
.fue-header__utils { justify-self: end; display: flex; align-items: center; margin-right: -10px; }
.fue-logo { color: var(--fue-logo, #000); display: block; }
.fue-logo svg path, .fue-logo svg g { fill: currentColor; }
.fue-hide-mobile { display: none; }
.fue-nav { display: none; }

/* Header sobre a foto do hero: transparente, branco, logo com halo vermelho */
.has-hero .fue-header--transparente {
	position: fixed; left: 0; right: 0; top: var(--fue-header-top, var(--fue-announce-h));
	background: transparent; color: var(--fue-text-inverse); border-bottom-color: transparent;
}
.has-hero .fue-header--transparente .fue-logo { color: #fff; }
.has-hero .fue-header--transparente.is-solido {
	background: var(--fue-surface-primary); color: var(--fue-text-primary); border-bottom-color: var(--fue-border-subtle);
}
.has-hero .fue-header--transparente.is-solido .fue-logo { color: var(--fue-logo, #000); }
.has-hero .fue-header--transparente.is-solido .fue-halo { opacity: 0; }
.fue-halo {
	position: absolute; left: 50%; top: 50%; width: 180px; height: 115px; z-index: -1;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: var(--fue-accent-sale); filter: blur(28px); opacity: .92;
	transition: opacity var(--fue-fast);
	pointer-events: none;
	/* o halo não pode subir para cima da barra de aviso: corta no topo do header */
	clip-path: inset(calc(50% - var(--fue-header-h) / 2) -80px -80px -80px);
}

@media (min-width: 1024px) {
	/* Colunas laterais iguais: o menu fica no centro exato da página, seja qual for a largura do logo ou dos ícones. */
	.fue-header__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 28px; }
	.fue-header__menu { display: none; }
	.fue-header__logo { justify-self: start; }
	.fue-header__logo .fue-logo svg { width: 96px; }
	.fue-halo { width: 240px; height: 153px; filter: blur(38px); }
	.fue-nav { display: block; justify-self: center; }
	.fue-nav__list { display: flex; gap: 28px; }
	.fue-nav__link { display: inline-flex; align-items: center; height: var(--fue-header-h); }
	.fue-nav__link[aria-expanded="true"], .fue-nav__link:hover { text-decoration: underline; text-underline-offset: 6px; }
	.fue-header__utils { gap: 0; } /* cada ícone já tem 44px de área de toque: o respiro visual fica em ~22px */
	.fue-hide-mobile { display: inline-grid; }
}

/* sacola */
.fue-sacola { display: inline-flex; align-items: center; gap: 12px; }
.fue-sacola__icone { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; }
.fue-sacola__contador {
	position: absolute; left: 26px; top: 6px; display: grid; place-items: center; min-width: 18px; height: 18px;
	padding: 0 4px; border-radius: 999px; background: var(--fue-accent-new); color: var(--fue-on-new); font-size: 10px; font-weight: 500;
}
.fue-sacola__valor { display: none; flex-direction: column; gap: 2px; }
.fue-sacola.is-empty .fue-sacola__contador { display: none; }
@media (min-width: 1024px) {
	.fue-sacola__valor { display: flex; }
	.fue-sacola.is-empty .fue-sacola__valor { display: none; }
}

/* ---------- mega menu (desktop) ---------- */
.fue-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--fue-surface-primary); color: var(--fue-text-primary);
	border-top: 1px solid var(--fue-border-subtle); border-bottom: 1px solid var(--fue-border-subtle);
	visibility: hidden; opacity: 0; transform: translateY(-8px);
	transition: opacity var(--fue-fast) var(--fue-ease), transform var(--fue-fast) var(--fue-ease), visibility 0s linear var(--fue-fast);
	z-index: 200;
}
.fue-nav__item.is-open > .fue-mega,
.fue-nav__item:focus-within > .fue-mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.fue-mega__inner { display: flex; gap: 48px; max-width: 1600px; margin: 0 auto; padding: 48px var(--fue-margin); }
.fue-mega__eyebrow { color: var(--fue-text-tertiary); margin-bottom: 18px; }
.fue-mega__nav { display: flex; flex-direction: column; gap: 0; min-width: 190px; }
.fue-mega__cols { display: flex; gap: 28px; margin-bottom: 28px; }
.fue-mega__list { display: flex; flex-direction: column; gap: 14px; }
.fue-mega__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fue-mega__picks { flex: 1; }
.fue-mega__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 252px)); gap: 16px; }
.fue-mega__picks--wide .fue-mega__cards { grid-template-columns: repeat(2, minmax(0, 328px)); }
.fue-mega__campanha {
	position: relative; display: flex; align-items: flex-end; width: 304px; aspect-ratio: 304 / 430; flex-shrink: 0;
	background: var(--fue-surface-dark); color: #fff; overflow: hidden;
}
.fue-mega__campanha--wide { width: 400px; aspect-ratio: 400 / 430; }
.fue-mega__campanha img { position: absolute; inset: 0; }
.fue-mega__campanha::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72)); }
.fue-mega__campanha-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 28px; }

/* ---------- cortina (mobile/tablet) e busca ---------- */
.fue-veu { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .6); }
.fue-cortina {
	position: fixed; inset: 0 auto 0 0; z-index: 400; width: min(100%, 420px); overflow-y: auto;
	background: var(--fue-surface-inverse); color: var(--fue-text-inverse);
	padding-bottom: 48px; overscroll-behavior: contain;
}
.fue-cortina .fue-logo { color: #fff; }
.fue-cortina__topo { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
.fue-cortina__fechar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.fue-cortina__nav { padding: 40px 20px 0; }
.fue-cortina__nav > ul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fue-cortina__nav summary { list-style: none; cursor: pointer; }
.fue-cortina__nav summary::-webkit-details-marker { display: none; }
.fue-cortina__cats { display: flex; flex-direction: column; gap: 12px; padding: 14px 2px 18px; }
.fue-cortina__cats a { opacity: .72; }
.fue-cortina__sec { padding: 48px 20px 0; }
.fue-cortina__sec a { display: flex; justify-content: space-between; align-items: center; min-height: 51px; border-bottom: 1px solid rgba(255, 255, 255, .24); }
@media (min-width: 1024px) { .fue-cortina { display: none !important; } }

.fue-busca {
	position: fixed; left: 0; right: 0; top: 0; z-index: 400;
	background: var(--fue-surface-primary); padding: 20px var(--fue-margin) 32px;
	border-bottom: 1px solid var(--fue-border-subtle);
}
.fue-busca__form { display: flex; align-items: center; gap: 12px; max-width: 1600px; margin: 0 auto; border-bottom: 1px solid #000; }
.fue-busca__form input { flex: 1; min-width: 0; height: 64px; border: 0; background: none; outline: none; }
.fue-busca__sugestoes { max-width: 1600px; margin: 24px auto 0; }
.fue-busca__sugestoes p { color: var(--fue-text-tertiary); margin-bottom: 12px; }
.fue-busca__sugestoes ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
body.is-locked { overflow: hidden; }

/* ---------- product card (Figma: Product Card) ---------- */
.fue-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; background: #fff; min-width: 0; }
.fue-card__foto { position: relative; aspect-ratio: 3 / 4; background: var(--fue-surface-secondary); overflow: hidden; }
.fue-card__link { position: absolute; inset: 0; }
.fue-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--fue-slow) var(--fue-ease); }
.fue-card__img.is-on { opacity: 1; }
.fue-card__vazio { position: absolute; inset: 0; background: var(--fue-surface-secondary); }
.fue-card__topo { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.fue-card__topo > * { pointer-events: auto; }
.fue-card__acoes { display: flex; gap: 6px; margin-left: auto; }
.fue-acao { display: grid; place-items: center; width: 40px; height: 40px; background: #fff; transition: background var(--fue-fast), color var(--fue-fast); }
.fue-acao[aria-pressed="true"] { background: #000; color: #fff; }
.fue-acao[data-fue-fav][aria-pressed="true"] svg path { fill: currentColor; }

/* pontinhos das fotos */
.fue-card__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1; display: flex; justify-content: center; gap: 6px; transition: opacity var(--fue-fast), bottom var(--fue-fast) var(--fue-ease); }
.fue-card__dot { width: 14px; height: 2px; padding: 8px 0; background: none; position: relative; }
.fue-card__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: rgba(255,255,255,.55); transition: background var(--fue-fast); }
.fue-card__dot.is-on::before { background: #fff; }

/* compra rápida: tamanhos no hover (Figma) viram botões de adicionar */
.fue-card__compra {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: #fff;
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity var(--fue-fast), transform var(--fue-base) var(--fue-ease);
}
.fue-card__compra-t { padding: 14px 14px 10px; color: var(--fue-text-tertiary); }
.fue-card__tamanhos { display: flex; gap: 6px; padding: 0 14px 14px; }
.fue-card__tamanhos li { flex: 1; display: flex; }
.fue-card__tamanhos button { flex: 1; height: 40px; border: 1px solid var(--fue-border-default); transition: background var(--fue-fast), color var(--fue-fast), border-color var(--fue-fast); }
.fue-card__tamanhos button:hover:not(:disabled) { border-color: #000; }
.fue-card__tamanhos button:hover:not(:disabled) { background: #000; color: #fff; }
.fue-card__tamanhos button:disabled { color: var(--fue-text-disabled); text-decoration: line-through; cursor: not-allowed; }
.fue-card__tamanhos button.is-loading { background: var(--fue-surface-secondary); }
.fue-card__compra--simples button { width: 100%; height: 44px; }
.fue-card__compra--simples button:hover { background: #000; color: #fff; }
.fue-card__bag { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: none; place-items: center; width: 36px; height: 36px; background: #fff; }
@media (hover: hover) {
	.fue-card:hover .fue-card__compra, .fue-card:focus-within .fue-card__compra { opacity: 1; transform: none; pointer-events: auto; }
	.fue-card:hover .fue-card__dots { bottom: 112px; }
	.fue-card:hover .fue-card__compra--simples ~ .fue-card__dots, .fue-card:hover:not(:has(.fue-card__compra)) .fue-card__dots { bottom: 12px; }
}
@media (hover: none) {
	.fue-card__bag { display: grid; }
	.fue-card.is-quick .fue-card__compra { opacity: 1; transform: none; pointer-events: auto; }
	.fue-card.is-quick .fue-card__bag { background: #000; color: #fff; }
	.fue-card__compra { left: 8px; right: 8px; bottom: 50px; }
}
.fue-card__cores button.fue-swatch { cursor: pointer; transition: transform var(--fue-fast) var(--fue-ease), box-shadow var(--fue-fast); }
.fue-card__cores button.fue-swatch:hover { transform: scale(1.12); }
.fue-card__cores button.fue-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3px #000; }
.fue-card__info { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.fue-card__nome a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.fue-card__nome { position: static; }
.fue-card__acoes, .fue-card__topo { z-index: 1; }
.fue-card__cores { display: flex; align-items: center; gap: 6px; }
.fue-card__mais { color: var(--fue-text-tertiary); }
@media (max-width: 767px) {
	.fue-card__compra-t { display: none; }
	.fue-card__tamanhos { padding: 8px; gap: 4px; }
	.fue-card__tamanhos button { height: 38px; }
	.fue-card { gap: 12px; padding-bottom: 20px; }
	.fue-card__info { padding: 0 4px; gap: 8px; }
	.fue-card__topo { left: 8px; right: 8px; top: 8px; }
	.fue-acao { width: 36px; height: 36px; }
}

/* preço */
.fue-price { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fue-price__valor { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fue-price__valor ins { color: var(--fue-text-sale); }
.fue-price__parcela { color: var(--fue-text-tertiary); }
.fue-price--pdp .fue-price__parcela { color: var(--fue-text-secondary); }
.fue-pix { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--fue-surface-secondary); white-space: nowrap; }
.fue-price--pdp .fue-pix { gap: 10px; padding: 10px 14px; }

/* ---------- grade ---------- */
.fue-grade {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px var(--fue-gap); padding: 0 var(--fue-margin);
}
@media (min-width: 768px) { .fue-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (min-width: 1280px) { .fue-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- section header ---------- */
.fue-sh { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 0 var(--fue-margin); margin-bottom: 32px; }
.fue-sh__text { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.fue-sh__eyebrow { color: var(--fue-text-tertiary); }
.fue-sh__lead { color: var(--fue-text-secondary); }
.fue-sh__link { flex-shrink: 0; margin-top: 40px; }
@media (max-width: 767px) { .fue-sh__lead { display: none; } .fue-sh__link { margin-top: 44px; } }

/* ---------- rodapé ---------- */
.fue-footer { background: var(--fue-surface-inverse); color: var(--fue-text-inverse); }
.fue-footer .fue-logo { color: #fff; }
.fue-footer__corpo { display: flex; flex-direction: column; gap: 0; padding: 48px var(--fue-margin) 40px; max-width: 1600px; margin: 0 auto; }
.fue-footer__marca { display: flex; flex-direction: column; gap: 24px; padding-bottom: 20px; }
.fue-footer__marca > p { opacity: .62; }
.fue-footer__logo svg { width: 100px; }
.fue-footer__social { display: flex; gap: 12px; margin-left: -10px; }
.fue-footer__col { border-bottom: 1px solid rgba(255, 255, 255, .24); }
.fue-footer__col summary {
	display: flex; justify-content: space-between; align-items: center; min-height: 59px;
	list-style: none; cursor: pointer;
}
.fue-footer__col summary::-webkit-details-marker { display: none; }
.fue-footer__col[open] summary svg { transform: rotate(45deg); }
.fue-footer__links { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.fue-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fue-footer__news { padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.fue-footer__coltitle, .fue-footer__col summary { opacity: 1; }
.fue-footer__coltitle { opacity: .55; }
.fue-footer__muted { opacity: .62; }
.fue-footer__base {
	display: flex; flex-direction: column; gap: 16px; padding: 28px var(--fue-margin);
	border-top: 1px solid rgba(255, 255, 255, .24); max-width: 1600px; margin: 0 auto;
}
.fue-footer__base > p { opacity: .45; }
.fue-footer__pay { display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 1024px) {
	.fue-footer__corpo { flex-direction: row; gap: 64px; padding: 80px var(--fue-margin) 64px; }
	.fue-footer__corpo > * { flex: 1 1 0; min-width: 0; }
	.fue-footer__logo svg { width: 120px; }
	.fue-footer__col { border: 0; }
	.fue-footer__col summary { min-height: 0; margin-bottom: 16px; pointer-events: none; opacity: .55; }
	.fue-footer__col summary svg { display: none; }
	.fue-footer__links { padding: 0; }
	.fue-footer__news { padding-top: 0; }
	.fue-footer__base { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 1023px) {
	.fue-footer__col:not([open]) .fue-footer__links { display: none; }
}

/* newsletter (formulário) */
.fue-news__campos { display: flex; align-items: center; }
.fue-news--linha .fue-news__campos { border-bottom: 1px solid currentColor; padding-bottom: 12px; }
.fue-news--linha .fue-news__email { flex: 1; min-width: 0; border: 0; background: none; outline: none; }
.fue-news--linha .fue-news__email::placeholder { color: inherit; opacity: .45; }
.fue-news__status:empty { display: none; }
.fue-news__status { margin-top: 10px; }
.fue-news.is-ok .fue-news__campos { opacity: .45; pointer-events: none; }

/* ---------- WhatsApp fixo ---------- */
.fue-fab {
	position: fixed; right: 16px; bottom: 16px; z-index: 700;
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
	background: #000; color: #fff; transition: transform var(--fue-fast) var(--fue-ease);
}
.fue-fab:hover { transform: scale(1.06); }
@media (min-width: 1024px) { .fue-fab { right: 24px; bottom: 24px; } }
.single-product .fue-fab { bottom: 96px; }
@media (min-width: 1024px) { .single-product .fue-fab { bottom: 24px; } }

/* toast */
.fue-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 600; transform: translateX(-50%);
	background: #000; color: #fff; padding: 14px 20px; font-size: 13px;
}
.fue-footer__col summary svg { transition: transform var(--fue-base) var(--fue-ease); }

/* ==========================================================================
   Rodada 2 · Etapa 3 — header: sacola lateral, conta, favoritos, busca
   ========================================================================== */

/* stepper [− 1 +] — base (PDP, gaveta e sacola usam) */
.fue-stepper { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--fue-border-default); background: #fff; }
.fue-stepper__btn { display: grid; place-items: center; width: 44px; color: var(--fue-text-primary); transition: background var(--fue-fast); }
.fue-stepper__btn:hover { background: var(--fue-surface-secondary); }
.fue-stepper__btn:disabled { color: var(--fue-text-disabled); cursor: default; background: none; }
.fue-stepper input { width: 40px; border: 0; text-align: center; font-size: 15px; font-weight: 500; background: none; -moz-appearance: textfield; appearance: textfield; }
.fue-stepper input::-webkit-outer-spin-button, .fue-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fue-stepper input:focus { outline: none; }
.fue-stepper:focus-within { border-color: #000; }
.fue-stepper { overflow: hidden; }
.is-num-sobe { animation: fue-num-sobe 260ms var(--fue-ease); }
.is-num-desce { animation: fue-num-desce 260ms var(--fue-ease); }
@keyframes fue-num-sobe { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fue-num-desce { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-num-sobe, .is-num-desce { animation: none; } }

/* sacola lateral (item 2) */
.fue-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 400; width: min(100%, 440px);
	display: flex; flex-direction: column; background: #fff; color: var(--fue-text-primary);
	animation: fue-drawer-in var(--fue-base) var(--fue-ease);
}
@keyframes fue-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.fue-drawer__topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-drawer__corpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Esqueleto enquanto a sacola carrega: mesmo desenho do item, com brilho. */
.fue-drawer__carregando { padding: 0 24px; }
.fue-skel-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-skel-item__linhas { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.fue-skel { display: block; height: 12px; background: linear-gradient(90deg, #ebe9e5 0%, #f7f6f4 50%, #ebe9e5 100%) 0 0 / 200% 100%; animation: fue-skel 1.2s linear infinite; }
.fue-skel--foto { width: 88px; height: auto; aspect-ratio: 3 / 4; }
.fue-skel--qtd { width: 96px; height: 32px; margin-top: auto; }
@keyframes fue-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .fue-skel { animation: none; } }
.fue-drawer__itens { flex: 1; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }
.fue-drawer__item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--fue-border-subtle); transition: opacity var(--fue-fast); }
.fue-drawer__item.is-loading { opacity: .4; pointer-events: none; }
.fue-drawer__foto img { width: 88px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--fue-surface-secondary); }
.fue-drawer__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fue-drawer__var { color: var(--fue-text-tertiary); }
.fue-drawer__linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }
.fue-drawer__remover { align-self: flex-start; color: var(--fue-text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.fue-drawer__remover:hover { color: var(--fue-text-sale); }
/* Rodapé da gaveta: total com o que ele significa, duas saídas lado a lado
   (a principal mais larga), e a confiança em uma linha discreta. */
.fue-drawer__rodape { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 20px; border-top: 1px solid var(--fue-border-subtle); background: #fff; }
.fue-drawer__soma { display: flex; flex-direction: column; gap: 4px; }
.fue-drawer__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fue-drawer__total .t-label-s { color: var(--fue-text-secondary); }
.fue-drawer__parc { color: var(--fue-text-tertiary); text-align: right; }
.fue-drawer__acoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.fue-drawer__acoes .fue-btn { min-height: 52px; padding: 0 12px; white-space: nowrap; }
.fue-drawer__confianca { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; color: var(--fue-text-tertiary); }
.fue-drawer__confianca li { display: inline-flex; align-items: center; gap: 6px; }
.fue-drawer__confianca svg { flex: none; color: #000; }
.fue-drawer__vazio { display: flex; flex-direction: column; gap: 14px; padding: 48px 24px; }
.fue-drawer__vazio .t-body-m { color: var(--fue-text-secondary); margin-bottom: 8px; }
.fue-stepper--p { height: 40px; }
.fue-stepper--p .fue-stepper__btn { width: 36px; }
.fue-stepper__n { display: grid; place-items: center; min-width: 28px; font-size: 14px; font-weight: 500; }
.fue-frete-gratis { padding: 16px 24px; background: var(--fue-surface-secondary); }
.fue-frete-gratis__barra { display: block; height: 3px; margin-top: 10px; background: var(--fue-border-subtle); }
.fue-frete-gratis__barra span { display: block; height: 100%; background: #000; transition: width var(--fue-slow) var(--fue-ease); }

/* menus do header (itens 8 e 9) */
.fue-hmenu { position: relative; }
.fue-hmenu .fue-iconbtn { position: relative; }
.fue-hmenu__n { position: absolute; top: 6px; right: 4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #000; color: #fff; font-size: 10px; font-weight: 500; }
.has-hero .fue-header--transparente:not(.is-solido) .fue-hmenu__n { background: #fff; color: #000; }
.fue-hmenu__painel {
	position: absolute; right: -12px; top: calc(100% + 4px); z-index: 200; width: 320px;
	display: flex; flex-direction: column; gap: 12px; padding: 24px;
	background: #fff; color: var(--fue-text-primary); border: 1px solid var(--fue-border-subtle);
	/* transição (não keyframes): com animação de opacidade o Chrome chegou a
	   pintar o título da PDP por cima do painel depois do fim da animação */
	visibility: hidden; opacity: 0; transform: translateY(-6px);
	transition: opacity var(--fue-fast) var(--fue-ease), transform var(--fue-fast) var(--fue-ease), visibility 0s linear var(--fue-fast);
}
.fue-hmenu.is-open .fue-hmenu__painel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.fue-hmenu__painel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* ponte do hover */
.fue-hmenu__lead { color: var(--fue-text-secondary); margin-bottom: 4px; }
.fue-hmenu__lista { display: flex; flex-direction: column; }
.fue-hmenu__lista a { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.fue-hmenu__lista a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.fue-hmenu__lista--solta { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--fue-border-subtle); }
.fue-hmenu__eu { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-hmenu__eu > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fue-hmenu__nome { font-size: 16px; font-weight: 500; }
.fue-hmenu__email { color: var(--fue-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fue-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: #000; color: #fff; font: 800 18px/1 var(--fue-font-marca); }
.fue-hmenu__sair { padding-top: 12px; border-top: 1px solid var(--fue-border-subtle); color: var(--fue-text-tertiary); }
.fue-hmenu__sair:hover { color: #000; }
.fue-hmenu__titulo { color: var(--fue-text-tertiary); }
.fue-hmenu__vazio { display: flex; flex-direction: column; gap: 8px; }
.fue-hmenu__vazio .t-body-s { color: var(--fue-text-tertiary); margin-bottom: 8px; }
.fue-hmenu__todos { margin-top: 12px; }
.fue-favlist { display: flex; flex-direction: column; }
.fue-favlist__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-favlist__foto img { width: 56px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--fue-surface-secondary); }
.fue-favlist__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fue-favlist__info .t-label-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fue-favlist__item--skel .fue-favlist__foto { display: block; width: 56px; height: 75px; }
.fue-favlist__item--skel .fue-favlist__info { gap: 8px; }
.fue-favlist__x { width: 32px; height: 32px; color: var(--fue-text-tertiary); }
.fue-favlist__x:hover { color: #000; }

/* busca com sugestões (item 4) */
.fue-busca__form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fue-busca__res { max-width: 1600px; margin: 8px auto 0; display: grid; gap: 24px; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; transition: opacity var(--fue-fast); }
.fue-busca__res.is-loading { opacity: .5; }
.fue-sug-rot { margin: 0 0 12px; color: var(--fue-text-tertiary); }
.fue-sug mark, .fue-sug-cat mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--fue-traco, var(--fue-logo, var(--fue-accent-collab))); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Celular: lista compacta (foto 3:4 pequena, nome, preço). */
.fue-sug-grade { display: flex; flex-direction: column; }
.fue-sug { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 8px 10px; margin: 0 -10px; transition: background var(--fue-fast); }
.fue-sug:hover, .fue-sug.is-active { background: var(--fue-surface-secondary); }
.fue-sug__foto { display: block; width: 56px; aspect-ratio: 3 / 4; background: var(--fue-surface-secondary); overflow: hidden; }
.fue-sug__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fue-ease); }
.fue-sug__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fue-sug__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fue-sug__txt .t-body-s { color: var(--fue-text-tertiary); }
.fue-sug__preco { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fue-sug-lado { display: flex; flex-direction: column; }
.fue-sug-cats { display: flex; flex-direction: column; margin-bottom: 16px; }
.fue-sug-cat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-sug-cat .t-label-s { color: var(--fue-text-tertiary); }
.fue-sug-cat:hover span:first-child, .fue-sug-cat.is-active span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.fue-sug__todos { width: 100%; min-height: 48px; padding: 12px 16px; justify-content: center; text-align: center; line-height: 1.35; white-space: normal; }
.fue-sug__todos.is-active { background: #000; color: #fff; }
.fue-sug__nada { padding: 8px 0 16px; color: var(--fue-text-secondary); }
/* Computador: peças em cards lado a lado + coluna de categorias. */
@media (min-width: 1024px) {
	.fue-busca__res { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
	.fue-sug-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
	.fue-sug { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; margin: 0; background: none; }
	.fue-sug:hover, .fue-sug.is-active { background: none; }
	.fue-sug__foto { width: 100%; }
	.fue-sug:hover .fue-sug__foto img, .fue-sug.is-active .fue-sug__foto img { transform: scale(1.04); }
	.fue-sug.is-active .fue-sug__foto { outline: 2px solid #000; outline-offset: 2px; }
	.fue-sug__preco { align-items: flex-start; }
	.fue-sug-lado { padding-left: 32px; border-left: 1px solid var(--fue-border-subtle); }
}
.fue-pdp__erro { margin-top: 8px; color: var(--fue-text-sale); }

/* cupom de primeira compra (item 21) */
.fue-cupom1 { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px dashed var(--fue-border-default); }
.fue-cupom1 .t-body-s { color: var(--fue-text-secondary); }
.fue-cupom1__linha { display: flex; }
.fue-cupom1__code { flex: 1; display: flex; align-items: center; padding: 0 14px; height: 40px; border: 1px solid #000; letter-spacing: .16em; background: #fff; }
.fue-cupom1__btn { display: grid; place-items: center; padding: 0 18px; height: 40px; background: #000; color: #fff; }
.fue-cupom1__btn:hover { background: var(--fue-surface-dark); }
.fue-cupom1--sacola { background: #fff; }

/* Medidor de força da senha (cadastro, nova senha e criar conta no checkout). */
.fue-forca { display: flex; flex-direction: column; gap: 10px; margin-top: -8px; }
.fue-forca__barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fue-forca__barras i { height: 3px; background: var(--fue-border-subtle); transition: background var(--fue-base) var(--fue-ease); }
/* Semáforo: fraca vermelho, razoável amarelo (cores da marca), boa/forte verde. */
.fue-forca[data-n="1"] { --forca: var(--fue-accent-sale); }
.fue-forca[data-n="2"] { --forca: var(--fue-accent-new); }
.fue-forca[data-n="3"], .fue-forca[data-n="4"] { --forca: var(--fue-success); }
.fue-forca[data-n="1"] i:nth-child(-n+1), .fue-forca[data-n="2"] i:nth-child(-n+2), .fue-forca[data-n="3"] i:nth-child(-n+3), .fue-forca[data-n="4"] i { background: var(--forca); }
.fue-forca__txt { color: var(--fue-text-tertiary); }

/* Caixa de seleção da marca (acesso, checkout). */
.fue-check { display: flex; gap: 10px; align-items: flex-start; color: var(--fue-text-secondary); cursor: pointer; }
.fue-check input { appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--fue-border-default); background: #fff; display: grid; place-items: center; cursor: pointer; }
.fue-check input:checked { background: #000; border-color: #000; }
.fue-check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.fue-check a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* Campo de texto da marca (acesso, cupom da sacola e do checkout). */
.fue-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--fue-border-default); border-radius: 0; background: #fff; font-size: 15px; transition: border-color var(--fue-fast); }
.fue-input:focus { border-color: #000; outline: none; }
.fue-input[aria-invalid="true"] { border-color: var(--fue-accent-sale); }

/* "Talvez você procure · Mais vendidos" (404 e busca sem resultado). */
.fue-sugestoes { padding-bottom: var(--fue-section); }
/* Figma (404 — Grade): faixa cinza de ponta a ponta atrás dos cards brancos. */
.fue-sugestoes .fue-grade { background: var(--fue-border-subtle); }
.fue-sugestoes .fue-card { background: #fff; padding-bottom: 24px; }
.fue-sugestoes .fue-card__info { padding-left: 10px; padding-right: 10px; }
@media (min-width: 768px) { .fue-sugestoes .fue-card__info { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 768px) and (max-width: 1023px) { .fue-sugestoes .fue-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fue-sugestoes .fue-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Compare Tray (Figma: barra preta fixa no pé da tela) ---------- */
.fue-cmpbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 10px var(--fue-margin);
	background: var(--fue-surface-dark); color: #fff;
	animation: fue-cmpbar-in var(--fue-base) var(--fue-ease);
}
.fue-cmpbar[hidden] { display: none; }
@keyframes fue-cmpbar-in { from { transform: translateY(100%); } to { transform: none; } }
.fue-cmpbar__t { color: rgba(255, 255, 255, .7); }
.fue-cmpbar__slots { display: flex; gap: 8px; }
.fue-cmpbar__slot { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .45); }
.fue-cmpbar__slot.is-cheio { border-color: transparent; background: rgba(255, 255, 255, .08); }
.fue-cmpbar__slot img { width: 100%; height: 100%; object-fit: cover; }
.fue-cmpbar__slot button { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity var(--fue-fast); }
.fue-cmpbar__slot button:hover, .fue-cmpbar__slot button:focus-visible { opacity: 1; }
.fue-cmpbar__n { color: rgba(255, 255, 255, .7); }
.fue-cmpbar__limpar { margin-left: auto; color: rgba(255, 255, 255, .7); }
.fue-cmpbar__limpar:hover { color: #fff; }
.fue-cmpbar__ir { background: #fff; color: #000; min-height: 48px; padding: 0 28px; }
.fue-cmpbar__ir:hover { background: var(--fue-surface-secondary); color: #000; }
.fue-cmpbar__ir.is-off { opacity: .55; }
@media (max-width: 767px) {
	.fue-cmpbar { gap: 10px; }
	.fue-cmpbar__t, .fue-cmpbar__n { display: none; }
	.fue-cmpbar__slot { width: 40px; height: 40px; }
	.fue-cmpbar__slot button { opacity: 1; background: rgba(0, 0, 0, .25); }
	.fue-cmpbar__ir { padding: 0 16px; }
}
/* Com a barra aberta, o botão de WhatsApp e o fim da página sobem. */
.has-cmpbar { padding-bottom: 68px; }
.has-cmpbar .fue-fab { bottom: calc(68px + 16px); }

/* ---------- Favoritar: pulso + "tracinhos" nas cores da marca ---------- */
.fue-acao[data-fue-fav], .fue-hmenu .fue-iconbtn { position: relative; overflow: visible; }
.fue-acao.is-pop svg { animation: fue-fav-pop 560ms cubic-bezier(.34, 1.56, .64, 1); }
.fue-acao.is-unpop svg { animation: fue-fav-unpop 320ms var(--fue-ease); }
@keyframes fue-fav-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes fue-fav-unpop { 0% { transform: scale(1); } 50% { transform: scale(.78); } 100% { transform: scale(1); } }
.fue-favfx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.fue-favfx i {
	position: absolute; left: -1px; top: -5px; width: 2px; height: 10px; border-radius: 1px; background: var(--c);
	transform: rotate(var(--a)) translateY(0) scaleY(.3); opacity: 0;
	animation: fue-fav-tracinho 700ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes fue-fav-tracinho {
	0% { opacity: 1; transform: rotate(var(--a)) translateY(-9px) scaleY(.4); }
	55% { opacity: 1; transform: rotate(var(--a)) translateY(-21px) scaleY(1); }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scaleY(.2); }
}
.fue-hmenu__n.is-bump { animation: fue-fav-bump 480ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fue-fav-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fue-acao.is-pop svg, .fue-acao.is-unpop svg, .fue-hmenu__n.is-bump { animation: none; } .fue-favfx { display: none; } }
.fue-cupom1--checkout { background: #fff; margin-top: 20px; }

/* Campo com rótulo (acesso, contato, rastreio). */
.fue-campo { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fue-campo label { color: var(--fue-text-tertiary); }

/* ---------- Aviso de cookies: cartão no canto, sem tapar a compra ---------- */
.fue-cookies {
	position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120;
	display: flex; flex-direction: column; gap: 14px; padding: 18px;
	background: #fff; border: 1px solid #000; box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
	opacity: 0; transform: translateY(12px); transition: opacity var(--fue-base) var(--fue-ease), transform var(--fue-base) var(--fue-ease);
}
.fue-cookies.is-on { opacity: 1; transform: none; }
.fue-cookies[hidden] { display: none; }
.fue-cookies__texto { display: flex; flex-direction: column; gap: 6px; }
.fue-cookies__texto .t-label-s { color: var(--fue-text-tertiary); }
.fue-cookies__texto .t-body-s { color: var(--fue-text-secondary); }
.fue-cookies__texto a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.fue-cookies__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fue-cookies__acoes .fue-btn { min-height: 44px; padding: 0 10px; font-size: 11px; }
@media (min-width: 768px) { .fue-cookies { left: 24px; right: auto; bottom: 24px; width: 420px; padding: 22px; } }
.has-cmpbar .fue-cookies { bottom: calc(68px + 12px); }

.fue-favlist__item.is-saindo { opacity: 0; transform: translateX(12px); transition: opacity 220ms var(--fue-ease), transform 220ms var(--fue-ease); }

/* Logado no painel: a barra do WordPress ocupa o topo (32 px; 46 px no celular, que rola junto abaixo de 600 px). */
.admin-bar .fue-header { top: 32px; }
.admin-bar.has-hero .fue-header--transparente { top: var(--fue-header-top, calc(32px + var(--fue-announce-h))); }
@media (max-width: 782px) { .admin-bar .fue-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .fue-header { top: 0; } }

/* Sem barra de aviso: nada reservado no topo. */
body.sem-aviso { --fue-announce-h: 0px; }

/* ---------- popup de cupom (painel Fuê → Cabeçalho, aviso e popup) ---------- */
.fue-popup { width: min(100% - 32px, 440px); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; background: #fff; color: #000; overflow: hidden auto; }
.fue-popup.tem-foto { width: min(100% - 32px, 800px); }
.fue-popup::backdrop { background: rgba(0, 0, 0, .55); }
.fue-popup[open] { animation: fue-popup-in var(--fue-slow, .4s) var(--fue-ease, ease) both; }
.fue-popup[open]::backdrop { animation: fue-popup-fundo var(--fue-slow, .4s) ease both; }
@keyframes fue-popup-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes fue-popup-fundo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fue-popup[open], .fue-popup[open]::backdrop { animation: none; } }
.fue-popup__caixa { display: grid; grid-template-columns: minmax(0, 1fr); }
.fue-popup__foto { display: none; margin: 0; position: relative; background: var(--fue-surface-secondary); }
.fue-popup__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) { .fue-popup.tem-foto .fue-popup__caixa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .fue-popup__foto { display: block; } }
.fue-popup__corpo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px 32px 28px; }
.fue-popup__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; }
.fue-popup__rotulo { color: var(--fue-text-tertiary); margin-top: -4px; }
.fue-popup__txt { color: var(--fue-text-secondary); }
.fue-popup__cupom { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 12px 12px 12px 16px; border: 1px dashed #000; }
.fue-popup__cupom .t-label-s { color: var(--fue-text-tertiary); }
.fue-popup__codigo { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; letter-spacing: .08em; overflow-wrap: anywhere; }
/* Celular: a linha "Cupom + código + Copiar" não cabia e o popup rolava de
 * lado, cortando o texto à esquerda (print 13/10). Rótulo vai para cima. */
@media (max-width: 479px) {
	.fue-popup__corpo { padding: 48px 24px 24px; }
	.fue-popup__cupom { flex-wrap: wrap; row-gap: 4px; }
	.fue-popup__cupom > .t-label-s:first-child { flex-basis: 100%; }
	.fue-popup__codigo { font-size: 16px; letter-spacing: .04em; }
}
/* 320px: o código não cabe ao lado do botão — Copiar desce para a linha de baixo. */
@media (max-width: 359px) { .fue-popup__copiar { flex-basis: 100%; } }
.fue-popup__copiar { min-height: 36px; padding: 0 14px; background: #000; color: #fff; transition: background var(--fue-fast); }
.fue-popup__copiar:hover { background: var(--fue-surface-dark); }
.fue-popup__copiar.is-ok { background: var(--fue-success); }
.fue-popup__cta { width: 100%; }
.fue-popup__depois { align-self: center; padding: 8px; color: var(--fue-text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.fue-popup__depois:hover { color: #000; }

/* ---------- estrelas (pretas, por decisão de marca) e nota no card ---------- */
.fue-estrelas { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; vertical-align: middle; }
.fue-estrelas__fundo, .fue-estrelas__cheia { display: inline-flex; gap: 2px; }
.fue-estrelas__fundo { color: var(--fue-border-default); }
.fue-estrelas svg { flex-shrink: 0; } /* a camada cheia é cortada pela largura, sem espremer os ícones */
.fue-estrelas__cheia { position: absolute; inset: 0 auto 0 0; width: var(--nota, 0%); overflow: hidden; color: #000; white-space: nowrap; }
.fue-card__nota { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--fue-text-primary); }
.fue-card__nota-n { color: var(--fue-text-tertiary); }

/* Tabela de medidas — página do guia e pop-up da PDP */
.fue-medidas { overflow-x: auto; }
.fue-medidas table { width: 100%; max-width: 480px; border-collapse: collapse; font-size: 16px; }
.fue-medidas th, .fue-medidas td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--fue-border-subtle); }
.fue-medidas thead th { font: 500 12px/1 var(--fue-font-estrutura); letter-spacing: .12em; text-transform: uppercase; color: var(--fue-text-tertiary); }
.fue-medidas tbody th { font-weight: 600; color: #000; width: 40%; }
.fue-guia { width: min(100% - 32px, 560px); }
.fue-guia__texto { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--fue-text-secondary); }
.fue-guia__texto h2 { margin-top: 12px; font: 500 18px/1.3 var(--fue-font-estrutura); color: #000; }
.fue-guia__texto strong { color: #000; }
.fue-guia .fue-medidas table { max-width: none; }

/* Aviso de prazo da pré-venda (PDP, sacola, checkout, confirmação). */
.fue-prevenda { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--fue-surface-secondary); border-left: 2px solid var(--fue-yellow); }
.fue-prevenda svg { flex-shrink: 0; margin-top: 1px; }
.fue-prevenda p { color: var(--fue-text-primary); }
.fue-pdp__compra .fue-prevenda { margin-bottom: 20px; }
.fue-prevenda--sacola, .fue-prevenda--checkout { margin-bottom: 16px; }
.fue-co__resumo .fue-prevenda { background: var(--fue-surface-primary); margin: 0 0 16px; }
.fue-prevenda--obrigado { margin: 24px 0; }
.fue-prevenda__selo { display: inline-block; margin-top: 6px; padding: 2px 8px; background: var(--fue-yellow); color: #000; }

/* Selo do card: nunca quebra; no celular e no mega menu fica acima do nome,
   e não sobre a foto (cobria a cabeça dos modelos — auditoria 12/10). */
.fue-badge { white-space: nowrap; }
.fue-card__selo { display: none; align-self: flex-start; }
.fue-mega .fue-card__selo-foto { display: none; }
.fue-mega .fue-card__selo { display: inline-flex; }
@media (max-width: 767px) {
	.fue-card__selo-foto { display: none; }
	.fue-card__selo { display: inline-flex; }
	.fue-card__topo { left: 8px; right: 8px; top: 8px; }
	.fue-acao { width: 32px; height: 32px; }
	.fue-acao[data-fue-compare] { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.fue-acao { width: 36px; height: 36px; }
}
/* Mega menu em 1024–1279: não cabem os destaques (cards de 45 px); ficam só categorias e campanha. */
@media (max-width: 1279px) {
	.fue-mega__picks { display: none; }
	.fue-mega__campanha { margin-left: auto; }
}

/* Botão flutuante do WhatsApp (plugin) não cobre as barras fixas da loja:
 * subia por cima do "Adicionar à sacola" e do "Aceitar todos" (QA 14/10). */
@media (max-width: 1023px) { body:has(.fue-pdp__fixo:not([hidden])) .wlb-container { bottom: 92px !important; } }
.has-cmpbar .wlb-container { bottom: 92px !important; }
@media (max-width: 767px) { body:has(.fue-cookies.is-on) .wlb-container { display: none !important; } }