/* ============================================================================
   WHEELT — BASE ZERO (styles.css mínimo)
   ----------------------------------------------------------------------------
   Fundação estrutural da plataforma, reescrita de raiz (2026-07-03).
   - Consome EXCLUSIVAMENTE os design tokens do theme.css (:root compilado
     por Helper_Theme_Compiler); zero cores/fontes/medidas de marca aqui.
   - Cobre o inventário estrutural REAL: views .phtml vivas (páginas, chrome,
     fallbacks de bloco) + as classes emitidas pelos twigs dos blocos na BD
     (os dois mecanismos paralelos de render dos cms_page_block).
   - O detalhe visual de cada bloco CMS vive no css_<variante> do próprio
     bloco (compilado em blocks.css); aqui está só a estrutura partilhada e
     a degradação segura.
   - Contrato JS respeitado (misc.js/auction.js/cart.js/confirm.js/message.js):
     .scroll-header.visible · .search .opened · #sidebar-cart-items-container.open
     · .customer-menu.open · .navigation left:-100% (off-canvas) ·
     #navigation-site-shadow.visible · .lot-list.grid · estados .open/.closed/
     .pending/.winner/.added · .filters .opened · tabs .active
   - Breakpoints = MEDIA_QUERIES do compilador: mobile ≤600 · tablet 600–1024
     · desktop ≥1024.
   ========================================================================== */

/* ==== 0. FUNDAÇÃO ======================================================== */

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

body {
	font: var(--body-font-size)/1.6 var(--primary-font-family);
	color: var(--color-text);
	background: var(--background-color);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); }

img, video, iframe { max-width: 100%; height: auto; }

.clear { clear: both; }
.hidden { display: none !important; }

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	padding: 8px 16px;
	background: var(--color-black);
	color: var(--color-white);
}
.skip-link:focus { top: 8px; }

main, .main { display: block; min-height: 40vh; }

.wrapper { width: 100%; max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 15px; }

/* overlay AJAX global */
#loading {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(255, 255, 255, 0.6);
}
#loading.force-show, body.loading #loading { display: block; }
#loading .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.button-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: none;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background: var(--color-black);
	color: var(--color-white);
	border-radius: var(--button-radius);
}
.button-top.visible { display: block; }

/* ==== 1. GRELHA DO CHROME (motor de layout) ============================== */
/* .layout-header-container/.layout-footer-container (fundo+largura) vêm do
   theme.css; aqui vive só a mecânica da grelha. O device é resolvido no
   servidor — body.layout-device-* apenas faz namespace do CSS por device
   compilado das rows. */

/* full-bleed: as barras pintam de borda a borda; o gutter lateral vive no
   ._col-container (que também carrega a max-width de conteúdo, via theme.css) */
.layout-header, .layout-footer { padding: 0; }

/* header em overlay (cms_page.header_overlay_content → body.header-overlay-
   content, Cms/PageController): o header sai do fluxo (o banner de topo
   encosta acima) e fica transparente por cima do conteúdo — as cores de
   TEXTO das rows mantêm-se (row_data.container_color); só os fundos somem.
   O sticky (.scroll-header) mantém o comportamento normal ao rolar. */
.header-overlay-content .layout-header-container:not(.scroll-header) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	background: none;
}
.header-overlay-content .layout-header-container:not(.scroll-header) .layout-header,
.header-overlay-content .layout-header-container:not(.scroll-header) .layout-header ._row { background: transparent; }

.layout-block-rows > ._row { display: flex; align-items: stretch; }
.layout-block-rows > ._row > ._col-container { display: flex; width: 100%; padding: 0 20px; box-sizing: border-box; }
.layout-block-rows > ._row > ._col-container > ._col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 33.333%;
	min-width: 0;
}
._col.left { justify-content: flex-start; }
._col.center { justify-content: center; }
._col.right { justify-content: flex-end; }

/* REGRA 4 (QA tema 540): no MOBILE o rodapé empilha as células a 100% por
   omissão — conteúdo texty lado a lado num ecrã estreito esmaga-se (título
   da newsletter apertado contra o texto). O motor deixa de aplicar larguras
   % globais ao mobile (applyEdits); uma edição @mobile explícita (mais
   específica: .layout-device-mobile .layout-footer ._row.x ._col.y) vence
   esta base. O header mobile mantém a linha (logo + drawer + ícones). */
.layout-device-mobile .layout-footer ._col-container { flex-wrap: wrap; }
.layout-device-mobile .layout-footer ._col { width: 100%; }

.layout-block { display: inline-block; }
.layout-block-content { display: block; }

/* Fase 2 track A — blocos UTILITÁRIOS do header alinhados numa linha:
   os ícones/controlos (pesquisa, idiomas, conta, favoritos, carrinho) são
   flex-items da coluna; sem isto empilham na vertical com baselines trocadas
   (QA tema #360). O gap dá o ritmo entre eles sem margens por bloco; os
   interiores ficam flex p/ centrar ícone+texto ao meio da barra. Logo e
   navegação NÃO entram (têm layout próprio). */
.layout-header ._col { column-gap: var(--chrome-icon-gap); row-gap: 4px; }

/* CAIXA DOS ÍCONES UTILITÁRIOS (QA Pedro 2026-08-17) ------------------------
   O gap acima só dá ritmo igual se as caixas dos blocos forem iguais — e não
   eram: a pesquisa e os favoritos traziam padding 8px, a conta ZERO e o
   hambúrguer 6px/10px, cada um cozido na sua regra. Resultado medido no header
   do tema 3940: 22px entre a lupa e a conta, 22px entre a conta e o coração e
   32px entre o coração e o menu — o desalinhamento que o QA apanhou.
   Agora TODOS os wrappers usam a mesma caixa, e o espaço entre dois ícones
   passa a ser sempre gap + 2×pad, por construção.
   O tamanho vem de --chrome-icon-size (ver normalização óptica mais abaixo) e
   NÃO de block_data: icon_size saiu do contrato da IA precisamente para os
   ícones deixarem de poder divergir uns dos outros. */
.chrome-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;                              /* ícone ↔ texto, quando há os dois */
	padding: var(--chrome-icon-pad);
	min-height: var(--chrome-icon-hit);
	font-size: var(--chrome-icon-size);
	line-height: 1;
}
/* o fontello mete margin: 0 .2em em TODOS os glifos. Sendo em em, vale 3.0px
   num ícone de 15px e 4.4px num de 22px — ou seja, quanto mais os tamanhos
   divergem mais os espaços divergem também, por cima do gap. Dentro da caixa
   o espaçamento é só nosso. */
.chrome-icon-box > [class^="icon-"]::before,
.chrome-icon-box > [class*=" icon-"]::before { margin: 0; }
/* a caixa NÃO é forçada a quadrada: com texto ao lado (favoritos com legenda,
   conta com "A Minha Conta") cresce em largura, e o que garante o ritmo é o
   padding lateral ser igual em todos — o espaço entre dois utilitários é
   sempre gap + 2×pad, com ou sem legenda. */

/* >>> ICON-METRICS (gerado por docs/tools/generate_icon_metrics.php — não editar à mão) */
/* Normalização óptica: ao mesmo font-size os glifos do fontello desenham
   áreas diferentes (o icon-user ocupa ~94% do em, o icon-menu ~72%). Cada
   fator repõe a MESMA presença visual a partir de --chrome-icon-size, para
   que ícones lado a lado no header/rodapé pareçam do mesmo tamanho.
   Medido de skin/default/font/fontello.svg (unitsPerEm=1000, ref=0.874). */
.chrome-icon-box > .icon-angle-double-left { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 539x557 */
.chrome-icon-box > .icon-angle-double-right { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 539x557 */
.chrome-icon-box > .icon-attention { font-size: calc(var(--chrome-icon-size) * 0.933); } /* 937x937 */
.chrome-icon-box > .icon-attention-alt { font-size: calc(var(--chrome-icon-size) * 0.933); } /* 937x937 */
.chrome-icon-box > .icon-award { font-size: calc(var(--chrome-icon-size) * 1.18); } /* 616x890 */
.chrome-icon-box > .icon-basket { font-size: calc(var(--chrome-icon-size) * 1.023); } /* 929x786 */
.chrome-icon-box > .icon-bell { font-size: calc(var(--chrome-icon-size) * 0.907); } /* 928x1000 */
.chrome-icon-box > .icon-calendar { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-cancel { font-size: calc(var(--chrome-icon-size) * 1.274); } /* 686x686 */
.chrome-icon-box > .icon-cancel-circled { font-size: calc(var(--chrome-icon-size) * 0.933); } /* 937x937 */
.chrome-icon-box > .icon-ccw { font-size: calc(var(--chrome-icon-size) * 0.895); } /* 1018x937 */
.chrome-icon-box > .icon-clock { font-size: calc(var(--chrome-icon-size) * 0.95); } /* 920x920 */
.chrome-icon-box > .icon-down-open { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 817x495 */
.chrome-icon-box > .icon-download { font-size: calc(var(--chrome-icon-size) * 0.948); } /* 1000x850 */
.chrome-icon-box > .icon-facebook { font-size: calc(var(--chrome-icon-size) * 1.254); } /* 486x1000 */
.chrome-icon-box > .icon-fax { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-grid { font-size: calc(var(--chrome-icon-size) * 0.932); } /* 938x938 */
.chrome-icon-box > .icon-heart { font-size: calc(var(--chrome-icon-size) * 0.944); } /* 1000x858 */
.chrome-icon-box > .icon-home-circled { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-left-open { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 495x818 */
.chrome-icon-box > .icon-linkedin { font-size: calc(var(--chrome-icon-size) * 1.043); } /* 857x819 */
.chrome-icon-box > .icon-list { font-size: calc(var(--chrome-icon-size) * 0.895); } /* 964x990 */
.chrome-icon-box > .icon-logout { font-size: calc(var(--chrome-icon-size) * 0.802); } /* 1188x1000 */
.chrome-icon-box > .icon-menu { font-size: calc(var(--chrome-icon-size) * 1.064); } /* 937x720 */
.chrome-icon-box > .icon-move { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-ok { font-size: calc(var(--chrome-icon-size) * 1.12); } /* 920x662 */
.chrome-icon-box > .icon-ok-circled { font-size: calc(var(--chrome-icon-size) * 0.933); } /* 937x937 */
.chrome-icon-box > .icon-phone { font-size: calc(var(--chrome-icon-size) * 1.112); } /* 786x786 */
.chrome-icon-box > .icon-phone-circled { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-reply { font-size: calc(var(--chrome-icon-size) * 1.096); } /* 921x691 */
.chrome-icon-box > .icon-right-open { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 495x818 */
.chrome-icon-box > .icon-search { font-size: calc(var(--chrome-icon-size) * 1.106); } /* 789x792 */
.chrome-icon-box > .icon-shop { font-size: calc(var(--chrome-icon-size) * 0.874); } /* 1000x1000 */
.chrome-icon-box > .icon-star { font-size: calc(var(--chrome-icon-size) * 0.968); } /* 931x875 */
.chrome-icon-box > .icon-star-empty { font-size: calc(var(--chrome-icon-size) * 0.904); } /* 998x937 */
.chrome-icon-box > .icon-trash { font-size: calc(var(--chrome-icon-size) * 0.96); } /* 885x937 */
.chrome-icon-box > .icon-trash-1 { font-size: calc(var(--chrome-icon-size) * 0.934); } /* 875x1000 */
.chrome-icon-box > .icon-twitter { font-size: calc(var(--chrome-icon-size) * 1.055); } /* 920x746 */
.chrome-icon-box > .icon-up-dir { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 571x321 */
.chrome-icon-box > .icon-up-open { font-size: calc(var(--chrome-icon-size) * 1.35); } /* 816x495 */
.chrome-icon-box > .icon-user { font-size: calc(var(--chrome-icon-size) * 0.892); } /* 1024x937 */
.chrome-icon-box > .icon-user-1 { font-size: calc(var(--chrome-icon-size) * 1.117); } /* 714x858 */
.chrome-icon-box > .icon-youtube { font-size: calc(var(--chrome-icon-size) * 1.042); } /* 1000x704 */
/* <<< ICON-METRICS */
/* tipografia do NÍVEL 1 da nav do header (tokens QA tema 540): caixa alta
   espaçada das referências (Clearbid) sem tocar nos painéis nem nas colunas
   do rodapé — neutro por omissão (none/normal/inherit). */
.layout-header .layout-block-navigation a.level-1 {
	text-transform: var(--nav-text-transform, none);
	letter-spacing: var(--nav-letter-spacing, normal);
	font-size: var(--nav-font-size, inherit);
}
.layout-header .layout-block-search .layout-block-content,
.layout-header .layout-block-languages .layout-block-content,
.layout-header .layout-block-customer .layout-block-content,
.layout-header .layout-block-wishlist .layout-block-content,
.layout-header .layout-block-cart .layout-block-content {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
/* seletor de idiomas compacto: inline, sem quebras nem floats herdados */
.layout-header .layout-block-languages .language-container.dropdown { float: none; display: flex; align-items: center; padding: 0; }
.layout-header .layout-block-languages ul { margin: 0; }

@media (max-width: 600px) {
	.layout-block-rows > ._row > ._col-container { flex-wrap: wrap; }
	.layout-block-rows > ._row > ._col-container > ._col { width: auto; flex: 1 1 auto; }
}

/* ==== 1b. GRELHA DE INSPEÇÃO (preview de temas, &theme_grid=1) ============ */
/* Ativada pelo botão "Grelha" do assistente (js/layout/grid-inspector.js).
   Tons: amarelo = padding da célula, azul = conteúdo útil (a sobreposição
   lê-se mais escura); as margens ficam para uma v2. Sem a classe no body,
   nada disto existe — zero efeito no site publicado. */
.theme-grid-inspect .layout-block-rows > ._row {
	position: relative;
	outline: 1px solid rgba(20, 20, 20, .5);
	outline-offset: -1px;
}
.theme-grid-inspect .layout-block-rows > ._row > ._col-container > ._col {
	position: relative;
	min-height: 30px;
	outline: 1px dashed rgba(20, 20, 20, .55);
	outline-offset: -1px;
	background-image:
		linear-gradient(rgba(64, 145, 255, .22), rgba(64, 145, 255, .22)),
		linear-gradient(rgba(255, 193, 64, .28), rgba(255, 193, 64, .28));
	background-clip: content-box, padding-box;
}
.theme-grid-inspect .grid-cell-tag {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	border: 0;
	border-radius: 3px;
	background: rgba(20, 20, 20, .8);
	color: #fff;
	font-family: monospace;
	font-size: 11px;
	line-height: 1.5;
	cursor: pointer;
	opacity: .85;
}
.theme-grid-inspect .grid-cell-tag:hover { opacity: 1; }
.theme-grid-inspect .grid-cell-tag.copied { background: rgba(30, 130, 60, .92); }
.theme-grid-inspect .grid-cell-tag .grid-cell-copy { font-size: 12px; }
/* tag da ROW (section.row — alvo do chrome_edits): canto superior ESQUERDO,
   tom azul-escuro para se distinguir das tags de célula */
.theme-grid-inspect .grid-row-tag {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	border: 0;
	border-radius: 3px;
	background: rgba(26, 60, 120, .85);
	color: #fff;
	font-family: monospace;
	font-size: 11px;
	line-height: 1.5;
	cursor: pointer;
	opacity: .85;
}
.theme-grid-inspect .grid-row-tag:hover { opacity: 1; }
.theme-grid-inspect .grid-row-tag.copied { background: rgba(30, 130, 60, .92); }
.theme-grid-inspect .grid-row-tag .grid-cell-copy { font-size: 12px; }
/* rodas dentadas do modo Grelha: configurar linha (junto à tag da row) e
   célula (canto inferior direito da célula) — paridade com a do bloco */
.theme-grid-inspect .grid-row-gear {
	position: absolute; top: 2px; right: 2px; z-index: 99999;
	padding: 1px 6px; border: 0; border-radius: 3px;
	background: rgba(26, 60, 120, .85); color: #fff; font-size: 12px;
	line-height: 1.5; cursor: pointer; opacity: .85;
}
.theme-grid-inspect .grid-row-gear:hover { opacity: 1; }
.theme-grid-inspect .grid-cell-gear {
	position: absolute; bottom: 2px; right: 2px; z-index: 99998;
	padding: 1px 6px; border: 0; border-radius: 3px;
	background: rgba(60, 90, 140, .85); color: #fff; font-size: 12px;
	line-height: 1.5; cursor: pointer; opacity: .85;
}
.theme-grid-inspect .grid-cell-gear:hover { opacity: 1; }
/* roda dentada do CONTENTOR principal (tokens do header/rodapé) — canto
   INFERIOR esquerdo da secção (QA Pedro: o superior colidia com as tags) */
.theme-grid-inspect .layout-header,
.theme-grid-inspect .layout-footer { position: relative; }
.theme-grid-inspect .grid-container-gear {
	position: absolute; bottom: 2px; left: 2px; z-index: 99999;
	padding: 1px 6px; border: 0; border-radius: 3px;
	background: rgba(120, 60, 20, .88); color: #fff; font-size: 12px;
	line-height: 1.5; cursor: pointer; opacity: .85;
}
.theme-grid-inspect .grid-container-gear:hover { opacity: 1; }

/* ==== 1c. INSPEÇÃO DE BLOCOS (preview de temas, &theme_blocks=1) ========= */
/* Independente da grelha (os dois modos compõem). Tons próprios para não
   confundir com as células: rosa = padding do bloco, verde = conteúdo útil.
   A tag mostra a REF que a conversa entende (b262 logo) — canto sup. esq. */
.theme-blocks-inspect .layout-header .layout-block,
.theme-blocks-inspect .layout-footer .layout-block {
	position: relative;
	outline: 1px solid rgba(140, 30, 90, .6);
	outline-offset: -1px;
	background-image:
		linear-gradient(rgba(80, 200, 120, .22), rgba(80, 200, 120, .22)),
		linear-gradient(rgba(230, 90, 160, .26), rgba(230, 90, 160, .26));
	background-clip: content-box, padding-box;
}
.theme-blocks-inspect .block-ref-tag {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	border: 0;
	border-radius: 3px;
	background: rgba(120, 20, 70, .85);
	color: #fff;
	font-family: monospace;
	font-size: 11px;
	line-height: 1.5;
	cursor: pointer;
	opacity: .85;
}
.theme-blocks-inspect .block-ref-tag:hover { opacity: 1; }
.theme-blocks-inspect .block-ref-tag.copied { background: rgba(30, 130, 60, .92); }
.theme-blocks-inspect .block-ref-tag .grid-cell-copy { font-size: 12px; }

/* roda dentada: abre o painel de edição manual no wizard. Canto INFERIOR
   direito — o superior sobrepunha-se à tag da ref em blocos estreitos.
   Sempre visível com o modo Blocos ligado (hover não existe em touch). */
.theme-blocks-inspect .block-config-gear {
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 99998;
	padding: 1px 6px;
	border: 0;
	border-radius: 3px;
	background: rgba(40, 60, 120, .85);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
	opacity: .85;
}
.theme-blocks-inspect .block-config-gear:hover { opacity: 1; }

/* drag & drop de blocos (modo Blocos): a tag é a pega. Durante o arrasto as
   células da MESMA secção acendem como alvos (as vazias ganham altura mínima
   para serem largáveis); as da outra secção esbatem — o motor bloqueia mover
   entre header e footer (cross_section_move). */
.theme-blocks-inspect .block-ref-tag[draggable="true"] { cursor: grab; }
.theme-block-dragging ._col.block-drop-target {
	outline: 2px dashed rgba(40, 60, 120, .55);
	outline-offset: -2px;
	min-height: 28px;
}
.theme-block-dragging ._col.block-drop-hover { background-color: rgba(40, 60, 120, .12); }
.theme-block-dragging ._col.block-drop-invalid { opacity: .45; }

/* sticky header (clonado pelo misc.js; .visible ao rolar).
   NUNCA usar transform aqui: um antecessor transformado vira o referencial
   dos descendentes position:fixed e o popup de pesquisa clonado colava-se à
   barra como uma folha branca (a "layer" que tapava logo/menu). top:-100vh
   esconde por inteiro sem transform. */
.scroll-header {
	position: fixed;
	top: -100vh;
	left: 0;
	width: 100%;
	max-width: none;
	z-index: 9998;
	/* OWN-SURFACE (QA Pedro 2026-07-24): a barra sticky tem fundo PRÓPRIO —
	   herdava --header-background-color e ficava transparente/ilegível quando
	   o tema pinta a row (pílula) em vez do container. Omissão: branco +
	   texto escuro (sempre legível); um tema pinta-a pelos 2 tokens. */
	background: var(--scroll-header-bg, var(--color-white));
	color: var(--scroll-header-color, var(--color-text));
	border-bottom: 1px solid var(--color-border);
	transition: top 0.3s ease;
	visibility: hidden;
}
/* os clones trazem as cores do header ORIGINAL (block_data/ herança da row —
   ex.: ícones brancos de um header escuro) e o CSS deles usa IDs; dentro da
   barra sticky a cor é FORÇADA à own-surface (o !important é o único que
   vence a especificidade de ID dos blocos) */
.scroll-header .navigation a,
.scroll-header .navigation a.level-1,
.scroll-header .layout-block-search .search-button span,
.scroll-header .layout-block-cart .customer-cart span,
.scroll-header .layout-block-cart .customer-cart i,
.scroll-header .layout-block-cart .cart-total,
.scroll-header .layout-block-cart .cart-counter,
.scroll-header .navigation .icon-down-open {
	color: var(--scroll-header-color, var(--color-text)) !important;
}
.scroll-header.visible { top: 0; visibility: visible; }
.scroll-header {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 4px 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.scroll-header .layout-block-navigation { flex: 1 1 auto; display: block; padding: 0 !important; margin: 0 !important; }
.scroll-header .layout-block-search { margin-left: auto; }
.scroll-header .navigation .menu-image-container img { max-height: 40px; width: auto; }
/* composição da barra sticky: logo (o mobile-top-image do clone da nav,
   promovido a logo da barra) + menu + pesquisa + carrinho */
/* tudo centrado verticalmente; logo→navegação = 30px */
.scroll-header > * { align-self: center; }
.scroll-header .layout-block-navigation .layout-block-content,
.scroll-header .navigation-container { display: flex; align-items: center; }
.scroll-header .navigation.nav-type-default { display: flex; align-items: center; gap: 30px; }
/* o anchor do logo herdaria o padding 10px/14px dos links da nav — é isso
   que descentrava e afastava do menu; flex + padding 0 alinham */
.scroll-header .navigation .mobile-top-image { display: flex; align-items: center; margin: 0; }
.scroll-header .navigation .mobile-top-image a { display: flex; align-items: center; padding: 0; }
.scroll-header .navigation .mobile-top-image img { display: block; max-height: 38px; width: auto; }
.scroll-header .navigation ul.level-1 { display: flex; align-items: center; margin: 0; }
.scroll-header .layout-block-search,
.scroll-header .layout-block-cart { display: flex; align-items: center; }
/* o padding vinha repetido aqui (8px cozido) — a caixa dos utilitários é a
   mesma dentro e fora da barra sticky */
.scroll-header .layout-block-search .search-button,
.scroll-header .layout-block-cart .customer-cart { display: flex; align-items: center; padding: var(--chrome-icon-pad); }
@media (max-width: 1024px) {
	/* a barra sticky é um extra de desktop; em mobile o header curto chega
	   (e o hambúrguer clonado abriria o off-canvas do clone) */
	.scroll-header { display: none !important; }
}

/* ==== 2. BLOCOS DE CHROME ================================================ */

/* -- logo: o asset carregado na config deve ser adequado ao layout (claro/
      escuro) — o CSS só limita a altura -- */
.layout-block-logo img { max-height: 70px; width: auto; }
.layout-block-logo h1 { margin: 0; font-size: 0; }

/* -- navegação -- */
.layout-block-navigation .navigation-container { position: relative; }
.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation li { position: relative; }
.navigation a { display: block; padding: 10px 14px; color: var(--color-text); }
.navigation a:hover, .navigation li.current > a { color: var(--link-hover-color); }
.navigation .menu-image-container img { display: block; }
.navigation .close-button { display: none; }
/* o burger é um utilitário como os outros: mesma caixa, mesmo tamanho óptico
   (tinha padding 6px/10px e font-size var(--fs-xl) próprios — era ele o
   responsável pelos 32px entre os favoritos e o menu, contra 22px nos outros
   pares). O display continua a ser dele: nasce escondido. */
.navigation-toggle { display: none; cursor: pointer; }
/* burger: sempre no modelo mobile; nos restantes de header só ao colapsar (≤1024) */
.navigation-toggle.nav-toggle-always { display: inline-flex; }

/* animações de abertura dos painéis desktop (default + dropdown-cols-preview).
   O mobile tem as suas próprias transições. Dois modos:
   · wof-nav-open  → o 1º dropdown (nível 2) desce: fade + ligeiro translateY.
   · wof-nav-open-x → os painéis laterais (nível 3+ e preview) entram da ESQUERDA
     para a DIREITA: opacity 0→1 + translateX(-50px)→0. Como o translateX move a
     caixa, o misc.js mede a posição FINAL do painel (desliga a animação por um
     instante) antes de decidir o flip — senão os -50px falseariam a margem direita. */
@keyframes wof-nav-open {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wof-nav-open-x {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}
/* respeita quem pede menos movimento */
@media (prefers-reduced-motion: reduce) {
	.navigation.nav-type-default li.hasSubMenu:hover > ul,
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu:hover > ul,
	.navigation.nav-type-dropdown-cols-preview li:hover > .nav-preview { animation: none !important; }
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu > ul,
	.navigation.nav-type-dropdown-cols-preview .nav-preview { transition: none; }
}

@media (min-width: 1024px) {
	.navigation.nav-type-default > ul, .navigation.nav-type-default ul.level-1 { display: flex; flex-wrap: wrap; align-items: center; }

	/* painéis (dropdown de nível 2 + flyouts de nível 3+): own-surface — fundo
	   próprio ⇒ cor própria, a propagação de inversão das rows (color:inherit)
	   pára aqui em vez de arrastar a cor da row. */
	.navigation.nav-type-default li.hasSubMenu > ul {
		display: none;
		position: absolute;
		z-index: 10000;
		min-width: 220px;
		padding: 8px 0;
		background: var(--nav-panel-bg);
		color: var(--nav-panel-color);
		border: 1px solid var(--nav-panel-border);
	}
	/* nível 2: dropdown para baixo, alinhado ao item pai */
	.navigation.nav-type-default li.hasSubMenu > ul.level-2 { top: 100%; left: 0; }
	/* nível 3+: painel em cascata lateral (flyout) — para a DIREITA por omissão;
	   o misc.js mede cada painel ao abrir e acrescenta .flip-left quando não cabe
	   no viewport (inverte para a ESQUERDA). */
	.navigation.nav-type-default li.hasSubMenu > ul:not(.level-2) { top: -9px; left: 100%; }
	.navigation.nav-type-default li.hasSubMenu > ul.flip-left { left: auto; right: 100%; }

	/* revelação por hover — a cascata de :hover mantém os ancestrais abertos.
	   NÃO há regra de display em classe de estado gerida por JS (o flip só troca
	   o lado, não a visibilidade), logo não há duplo mecanismo. */
	.navigation.nav-type-default li.hasSubMenu:hover > ul { display: block; }
	.navigation.nav-type-default li.hasSubMenu:hover > ul.level-2 { animation: wof-nav-open .3s ease; }
	.navigation.nav-type-default li.hasSubMenu:hover > ul:not(.level-2) { animation: wof-nav-open-x .1s ease; }

	.navigation.nav-type-default ul:not(.level-1) li a { padding: 6px 16px; }
	/* hover de item dentro dos painéis (own-surface) */
	.navigation.nav-type-default ul:not(.level-1) li > a:hover {
		background: var(--nav-item-hover-bg);
		color: var(--nav-item-hover-color);
	}
	/* itens COM filhos dentro dos painéis abrem flyout lateral: a seta aponta
	   para a direita (a seta dos itens de nível 1 mantém-se para baixo) */
	.navigation.nav-type-default ul:not(.level-1) li.hasSubMenu > a .icon-down-open {
		float: right;
		margin-left: 8px;
		transform: rotate(-90deg);
	}
	.navigation .mobile-top-image { display: none; }
	/* imagem-base opcional no topo do painel (menu-image-container, injetada no
	   level==3 do _renderNavigation). Encostada ao topo — o margin-top:-8px anula
	   o padding-top do ul do painel (senão fica uma faixa branca por cima) — e a
	   preencher a largura toda do painel (sem barra cinza à volta). max-height:none
	   anula o limite de 40px que a barra sticky impõe (regra .scroll-header acima),
	   que deformava a imagem quando o menu abre pelo scroll-header. */
	.navigation.nav-type-default .menu-image-container { margin: -8px 0 8px; }
	.navigation.nav-type-default .menu-image-container img {
		display: block;
		width: 100%;
		height: auto;
		max-height: none;
	}
}

/* ==== MODELO DROPDOWN COLS WITH PREVIEW (desktop) =======================
   1º nível horizontal (herda a row). Hover num item com filhos abre um painel
   com a coluna do 2º nível; hover num item com filhos abre a coluna seguinte à
   DIREITA (cascata "miller columns"), sempre alinhada ao TOPO do painel; hover
   num item-folha com dados mostra o cartão de preview como coluna seguinte.
   Técnica: li estáticos + cada ul/coluna position:absolute (é o contexto de
   posicionamento da coluna-filha) ⇒ left:100% encosta a coluna seguinte e top:0
   alinha-a ao topo do painel (cascata sem limite de profundidade). own-surface:
   os painéis têm fundo próprio ⇒ cor própria. ≤1024 colapsa no drawer mobile. */
@media (min-width: 1024px) {
	.navigation.nav-type-dropdown-cols-preview > ul,
	.navigation.nav-type-dropdown-cols-preview ul.level-1 { display: flex; flex-wrap: wrap; align-items: center; }

	/* li estáticos: as colunas ancoram ao ul-pai (não ao li) e alinham ao topo
	   do painel. Excepção: o li de nível 1 é o contexto do painel que desce. */
	.navigation.nav-type-dropdown-cols-preview li { position: static; }
	.navigation.nav-type-dropdown-cols-preview > ul.level-1 > li { position: relative; }

	/* colunas (2º nível e seguintes): largura fixa, own-surface. SEM overflow:
	   um overflow-y:auto forçaria overflow-x:auto (regra do CSS: eixo não-visible
	   torna o outro auto), cortando a coluna-filha (que abre a left:100%, fora do
	   pai) e gerando scroll lateral. A altura é igualada por JS (wofEqualizeDcp:
	   todas as colunas visíveis ficam com a altura da mais alta) — com as bordas a
	   sobrepor-se em -1px, o conjunto lê-se como um painel único e contínuo, com
	   separadores finos entre colunas. */
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu > ul {
		display: none;
		position: absolute;
		z-index: 10000;
		width: 232px;
		padding: 0;
		background: var(--nav-panel-bg);
		color: var(--nav-panel-color);
		border: 1px solid var(--nav-panel-border);
		/* equalização suave: a mudança de min-height (JS) anima entre colunas */
		transition: min-height .3s ease;
	}
	/* coluna do 2º nível = painel: desce, alinhado ao item de 1º nível. É a
	   coluna-âncora que leva a sombra exterior do painel. */
	.navigation.nav-type-dropdown-cols-preview > ul.level-1 > li.hasSubMenu > ul.level-2 {
		top: 100%;
		left: 0;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	}
	/* colunas seguintes (3º nível+): à direita da coluna-pai, topo alinhado, com
	   -1px para a borda se fundir na da coluna-pai (separador único, painel contínuo).
	   Direita por omissão; o misc.js acrescenta .flip-left quando não cabe. */
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu > ul:not(.level-2) { top: -1px; left: 100%; margin-left: -1px; }
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu > ul.flip-left { left: auto; right: 100%; margin-left: 0; margin-right: -1px; }

	/* revelação por hover — a cascata de :hover mantém a coluna-pai aberta
	   (a coluna-filha é descendente do li, logo hover-lá mantém o ramo). Ao
	   mudar de irmão, o :hover do anterior termina e a sua subárvore colapsa. */
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu:hover > ul { display: block; }
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu:hover > ul.level-2 { animation: wof-nav-open .3s ease; }
	.navigation.nav-type-dropdown-cols-preview li.hasSubMenu:hover > ul:not(.level-2) { animation: wof-nav-open-x .1s ease; }

	/* item hovered com estado visual (toda a cadeia hovered fica marcada) */
	.navigation.nav-type-dropdown-cols-preview ul:not(.level-1) li:hover > a {
		background: var(--nav-item-hover-bg);
		color: var(--nav-item-hover-color);
	}
	.navigation.nav-type-dropdown-cols-preview ul:not(.level-1) li a { padding: 13px 20px; }
	/* seta dos itens com filhos nas colunas aponta p/ a direita (abrem coluna
	   lateral); a do 1º nível mantém-se para baixo (painel desce) */
	.navigation.nav-type-dropdown-cols-preview ul:not(.level-1) li.hasSubMenu > a .icon-down-open {
		float: right;
		margin-left: 8px;
		transform: rotate(-90deg);
	}

	/* cartão de preview: coluna seguinte à direita do item-folha, topo alinhado.
	   flex-column: imagem full-bleed (cola aos bordos, sem padding) no topo + corpo
	   de texto com padding e fundo próprio (own-surface) a preencher o resto.
	   overflow:hidden clipa a imagem ao interior da borda. */
	.navigation.nav-type-dropdown-cols-preview .nav-preview {
		display: none;
		flex-direction: column;
		position: absolute;
		top: -1px;
		left: 100%;
		margin-left: -1px;
		z-index: 10000;
		width: 340px;
		overflow: hidden;
		background: var(--nav-preview-bg);
		color: var(--nav-panel-color);
		border: 1px solid var(--nav-panel-border);
		transition: min-height .3s ease;
	}
	.navigation.nav-type-dropdown-cols-preview li:hover > .nav-preview { display: flex; animation: wof-nav-open-x .1s ease; }
	.navigation.nav-type-dropdown-cols-preview .nav-preview.flip-left { left: auto; right: 100%; margin-left: 0; margin-right: -1px; }
	/* imagem colada ao topo/laterais, sem margem branca */
	.navigation.nav-type-dropdown-cols-preview .nav-preview-image img { display: block; width: 100%; height: auto; }
	/* área de texto: fundo distinto tokenizado + padding; cresce até ao fundo */
	.navigation.nav-type-dropdown-cols-preview .nav-preview-body {
		flex: 1 1 auto;
		padding: 24px;
		background: var(--nav-preview-body-bg);
		color: var(--nav-preview-body-color);
	}
	.navigation.nav-type-dropdown-cols-preview .nav-preview-title { font-weight: 700; font-size: var(--fs-lg); }
	.navigation.nav-type-dropdown-cols-preview .nav-preview-parent { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 16px; }
	.navigation.nav-type-dropdown-cols-preview .nav-preview-desc { font-size: var(--fs-sm); line-height: 1.5; }

	/* o dropdown-cols-preview usa a imagem de navegação (nav-preview), não a
	   imagem-base legacy do topo da coluna (menu-image-container) */
	.navigation.nav-type-dropdown-cols-preview .menu-image-container { display: none; }

	.navigation.nav-type-dropdown-cols-preview .mobile-top-image { display: none; }
}

/* ==== MODELO MEGA MENU (desktop) ========================================
   1º nível horizontal (herda a row). Hover num item com filhos abre um painel
   horizontal FULL-BLEED por baixo do header, com o conteúdo alinhado à grelha
   (max-width do header). Cada item de 2º nível é uma coluna: heading bold (link
   direto) + navigation_image opcional + itens de 3º nível listados. Oculta tudo
   abaixo do 3º nível (o render já corta a profundidade a 3). Colunas em flex-wrap
   (nunca scroll horizontal). ≤1024 colapsa no drawer mobile. */
@media (min-width: 1024px) {
	/* full-bleed: o painel ancora ao ._row (largura total). Torna estáticos os
	   contextos de posicionamento intermédios para o painel escapar até ao row.
	   :has() já é usado no projeto (browsers modernos). */
	.layout-block-rows > ._row:has(.navigation.nav-type-mega) { position: relative; }
	.navigation-container:has(.navigation.nav-type-mega) { position: static; }
	.navigation.nav-type-mega li { position: static; }

	.navigation.nav-type-mega > ul,
	.navigation.nav-type-mega ul.level-1 { display: flex; flex-wrap: wrap; align-items: center; }

	/* painel = ul.level-2: full-bleed abaixo do row; padding lateral centra o
	   conteúdo na max-width do header (max() evita padding negativo em ecrãs
	   estreitos). No clone sticky ancora ao .scroll-header (fixed, full-width). */
	.navigation.nav-type-mega > ul.level-1 > li.hasSubMenu > ul.level-2 {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 10000;
		box-sizing: border-box;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		gap: 32px;
		padding: 32px max(20px, calc((100% - var(--header-max-width, 1600px)) / 2));
		background: var(--nav-panel-bg);
		color: var(--nav-panel-color);
		border-top: 1px solid var(--nav-panel-border);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	}
	.navigation.nav-type-mega > ul.level-1 > li.hasSubMenu:hover > ul.level-2 { display: flex; animation: wof-nav-open .3s ease; }
	/* ponte transparente por cima do painel: elimina a zona morta entre o item
	   de 1º nível e o painel (sobretudo na barra sticky, onde os itens estão
	   centrados e sobra folga por baixo). É descendente do li ⇒ hover-lá mantém
	   o li:hover e o menu aberto até o rato chegar ao painel. */
	.navigation.nav-type-mega > ul.level-1 > li.hasSubMenu > ul.level-2::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 24px;
	}

	/* cada item de 2º nível = coluna de largura fixa, alinhada ao topo */
	.navigation.nav-type-mega ul.level-2 > li.level-2 { flex: 0 0 auto; width: 200px; }
	/* heading (link direto) a bold */
	.navigation.nav-type-mega ul.level-2 > li.level-2 > a { font-weight: 700; padding: 0 0 12px; }
	/* imagem de navegação por baixo do heading (opcional — sem ela a coluna alinha na mesma) */
	.navigation.nav-type-mega .nav-mega-image { margin: 0 0 12px; }
	.navigation.nav-type-mega .nav-mega-image img { display: block; width: 100%; height: auto; }
	/* 3º nível listado, sem cascata */
	.navigation.nav-type-mega ul.level-3 { display: block; position: static; }
	.navigation.nav-type-mega ul.level-3 > li > a { padding: 4px 0; font-size: var(--fs-sm); }
	/* dentro das colunas não há setas (o 3º nível é o fim) */
	.navigation.nav-type-mega ul:not(.level-1) .icon-down-open { display: none; }

	.navigation.nav-type-mega .menu-image-container { display: none; }
	.navigation.nav-type-mega .mobile-top-image { display: none; }
}

@media (max-width: 1024px) {
	/* burger dos restantes modelos de header aparece ao colapsar */
	.navigation-toggle.nav-toggle-responsive { display: inline-flex; }
}

/* ==== MODELO MOBILE / drawer partilhado ==================================
   Painel lateral deslizante da ESQUERDA, com 2 ecrãs (nível 1 → subárvore do
   ramo). Ativo SEMPRE no nav-type-mobile; nos restantes modelos de header o
   misc.js acrescenta .nav-collapsed abaixo de 1024 (fonte única, sem duplicar
   por media-query). own-surface: fundo próprio ⇒ cor própria — a propagação de
   inversão das rows (color:inherit) pára aqui. */
.navigation.nav-type-mobile,
.navigation.nav-collapsed {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100001;
	width: 82%;
	max-width: 360px;
	overflow: hidden;
	transform: translateX(-100%);
	transition: transform .3s ease;
	background: var(--nav-drawer-bg);
	color: var(--nav-drawer-color);
	border-right: 1px solid var(--color-border);
}
.navigation.nav-type-mobile.nav-drawer-open,
.navigation.nav-collapsed.nav-drawer-open { transform: translateX(0); }

/* dentro do drawer os li não posicionam: o painel do ecrã 2 é absoluto
   relativo ao .navigation (fixed) — não rola com o ecrã 1 */
.navigation.nav-type-mobile li,
.navigation.nav-collapsed li { position: static; }
/* own-surface: os links herdam a cor do drawer (não o var(--color-text) global).
   Sem padding horizontal próprio — o gutter (30px) vive nas áreas de conteúdo
   (ul.level-1 / painel do ecrã 2), para o recuo dar exatamente 30px. */
.navigation.nav-type-mobile a,
.navigation.nav-collapsed a { color: inherit; padding-left: 0; padding-right: 0; }

/* logo opcional no topo do drawer, à ESQUERDA (o text-align:right herdado do
   header e as regras horizontais do .scroll-header são anuladas aqui) */
.navigation.nav-type-mobile .mobile-top-image,
.navigation.nav-collapsed .mobile-top-image { flex: 0 0 auto; display: block; text-align: left; margin: 0; padding: 24px 30px 10px; }
.navigation.nav-type-mobile .mobile-top-image a,
.navigation.nav-collapsed .mobile-top-image a { display: inline-block; padding: 0; }
.navigation.nav-type-mobile .mobile-top-image img,
.navigation.nav-collapsed .mobile-top-image img { display: block; max-height: 38px; width: auto; }

/* ecrã 1 = lista de nível 1 (rola dentro do drawer). display:block anula o
   display:flex horizontal que o .scroll-header impõe ao ul.level-1 no clone
   da barra sticky. padding-top folga para o X quando não há logo; com logo
   (banda própria acima) reduz-se via o seletor de irmão abaixo. */
.navigation.nav-type-mobile > ul.level-1,
.navigation.nav-collapsed > ul.level-1 {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 44px 30px 80px;
}
.navigation.nav-type-mobile .mobile-top-image ~ ul.level-1,
.navigation.nav-collapsed .mobile-top-image ~ ul.level-1 { padding-top: 8px; }
.navigation.nav-type-mobile > ul.level-1 > li > a,
.navigation.nav-collapsed > ul.level-1 > li > a { display: flex; align-items: center; }
/* seta dos itens de nível 1 com filhos aponta p/ a direita (entra no ecrã 2) */
.navigation.nav-type-mobile > ul.level-1 > li.hasSubMenu > a .icon-down-open,
.navigation.nav-collapsed > ul.level-1 > li.hasSubMenu > a .icon-down-open {
	margin-left: auto;
	transform: rotate(-90deg);
}

/* ecrã 2 = subárvore do ramo: o ul.level-2 direto de um li de nível 1.
   Painel opaco full-cover que desliza da direita. */
.navigation.nav-type-mobile > ul.level-1 > li > ul.level-2,
.navigation.nav-collapsed > ul.level-1 > li > ul.level-2 {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	padding: 90px 30px 80px;
	background: var(--nav-drawer-bg);
	color: var(--nav-drawer-color);
	transform: translateX(100%);
	transition: transform .3s ease;
}
.navigation.nav-type-mobile > ul.level-1 > li.nav-open > ul.level-2,
.navigation.nav-collapsed > ul.level-1 > li.nav-open > ul.level-2 { transform: translateX(0); }

/* o drawer não mostra as imagens-base das categorias (injeção legacy
   menu-image-container no level==3 do _renderNavigation) — só o ícone de 20px
   por item. A remoção definitiva dessa injeção fica para o incremento do
   dropdown-cols-preview (plano §7). */
.navigation.nav-type-mobile .menu-image-container,
.navigation.nav-collapsed .menu-image-container { display: none; }
/* o cartão de preview (dropdown-cols-preview) é só do desktop; no drawer
   mobile (nav-collapsed) não aparece — a subárvore mostra-se em lista */
.navigation.nav-type-mobile .nav-preview,
.navigation.nav-collapsed .nav-preview { display: none; }
/* imagem por coluna do mega (nav-mega-image) — também só desktop */
.navigation.nav-type-mobile .nav-mega-image,
.navigation.nav-collapsed .nav-mega-image { display: none; }

/* nível 2 = heading bold (link direto); nível 3+ listado por baixo, sem setas */
.navigation.nav-type-mobile ul.level-2 > li > a,
.navigation.nav-collapsed ul.level-2 > li > a { font-weight: 700; }
.navigation.nav-type-mobile ul.level-2 .icon-down-open,
.navigation.nav-collapsed ul.level-2 .icon-down-open { display: none; }
.navigation.nav-type-mobile ul.level-3 > li > a,
.navigation.nav-collapsed ul.level-3 > li > a { font-weight: 400; }
/* itens do 3º nível para baixo: espaçamento vertical menor (3px, não 10px) —
   o seletor descendente ul.level-3 a apanha o 3º nível e todos os mais fundos */
.navigation.nav-type-mobile ul.level-3 a,
.navigation.nav-collapsed ul.level-3 a { padding-top: 3px; padding-bottom: 3px; }
/* nível 3 alinhado com o nível 2 (só a espessura os distingue). A indentação
   começa no 4º nível: como os ul estão aninhados, o padding é cumulativo —
   15px em cada ul a partir do 4º dá +15px por nível. */
.navigation.nav-type-mobile ul.level-4,
.navigation.nav-collapsed ul.level-4,
.navigation.nav-type-mobile ul.level-5,
.navigation.nav-collapsed ul.level-5,
.navigation.nav-type-mobile ul.level-6,
.navigation.nav-collapsed ul.level-6 { padding-left: 15px; }

/* barra de voltar (injetada por JS ao abrir o ecrã 2) */
.navigation .nav-mobile-back {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	align-items: center;
	gap: 8px;
	padding: 30px 20px 20px;
	background: var(--nav-drawer-bg);
	color: var(--nav-drawer-color);
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
}
.navigation.nav-screen-open .nav-mobile-back { display: flex; }
.navigation .nav-mobile-back-btn { cursor: pointer; }

/* botão fechar (X) do drawer */
.navigation.nav-type-mobile .close-button,
.navigation.nav-collapsed .close-button {
	display: block;
	position: absolute;
	top: 28px;
	right: 28px;
	z-index: 3;
	cursor: pointer;
	font-size: var(--fs-lg);
}

/* scrim partilhado (classe, não id — sobrevive ao clone da barra sticky) */
.nav-mobile-scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
}
.nav-mobile-scrim.visible { display: block; }

/* scroll do viewport bloqueado enquanto o drawer está aberto (o overflow do
   viewport, em standards mode, é do elemento html, não do body) */
html.nav-drawer-locked { overflow: hidden; }

/* navegação tipo COLS (footer): colunas expandidas, sem dropdown */
.navigation.nav-type-cols ul.level-1 { display: flex; flex-wrap: wrap; gap: 0 56px; }
.navigation.nav-type-cols li.level-1 { margin-bottom: 16px; }
.navigation.nav-type-cols li.level-1 > a { font-weight: 700; padding: 0 0 8px; cursor: default; }
.navigation.nav-type-cols ul.level-2 { display: block; position: static; border: 0; background: none; padding: 0; min-width: 0; }
.navigation.nav-type-cols li.level-2 a { padding: 3px 0; font-size: var(--fs-sm); }
.navigation.nav-type-cols .icon-down-open, .navigation.nav-type-cols .icon { display: none; }

/* -- pesquisa (popup) -- */
/* own-surface do chrome: o ícone vive num <button>, que NÃO herda color (o UA
   dá-lhe cor própria) e não é .button1 (que a inversão da row repõe) — ficava
   preto sobre header invertido. color:inherit fá-lo seguir a cor da row (branco
   no header escuro, escuro no claro); cobre também o clone da barra sticky. */
/* padding/display/font-size saíram para .chrome-icon-box (caixa única dos
   utilitários) — aqui fica só o que é próprio da pesquisa */
.layout-block-search .search-button { cursor: pointer; color: inherit; }
.layout-block-search .search-popup {
	position: fixed;
	top: -100%;
	right: 0;
	left: 0;
	z-index: 100002;
	height: 25vh;
	min-height: 300px;
	/* own-surface: o PAR move-se junto com o tema (surface+text); color-white
	   fixo deixava texto claro de tema escuro sobre branco */
	background: var(--color-surface);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	transition: top 0.3s ease;
}
.layout-block-search .search.opened .search-popup, .layout-block-search .search-popup.opened { top: 0; }
.layout-block-search .search-input-container {
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	width: min(90%, 640px);
}
/* no markup o botão vem ANTES do input — o flex + order põe a lupa logo a
   seguir à caixa, centrada verticalmente (igual no header e na barra sticky) */
.layout-block-search .search-input-container form {
	display: flex;
	align-items: center;
	gap: 8px;
}
.layout-block-search .search-input-container input {
	order: 1;
	flex: 1 1 auto;
	height: 50px;
	padding: 12px 16px;
	font-size: var(--fs-lg);
	border: 1px solid var(--color-border);
	background: var(--background-color);
	color: var(--color-text);
}
.layout-block-search .search-input-container form .search-button {
	order: 2;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: var(--fs-lg);
	color: var(--color-text);
	padding: 8px;
	display: flex;
	align-items: center;
}
.layout-block-search .close {
	position: absolute;
	top: 12px;
	right: 16px;
	cursor: pointer;
	font-size: var(--fs-lg);
}

/* pesquisa em modo caixa (box) */
.layout-block-search .search.box .search-input-wrapper { display: flex; align-items: center; }
input.search_terms { padding: 8px 12px; border: 1px solid var(--color-border); }

/* -- menu de cliente -- */
.layout-block-customer .customer-menu { position: relative; }
.layout-block-customer .customer-button,
.layout-block-customer .customer-no-button,
.layout-block-customer .login-button { cursor: pointer; white-space: nowrap; }
.layout-block-customer .customer-menu > .button1 { cursor: pointer; }
.layout-block-customer .customer-menu ul {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 100000;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}
/* o abrir/fechar é do slideToggle (misc.js) — uma regra display na classe
   .open duplicava o mecanismo e o 1.º clique abria+fechava de imediato;
   a classe fica só para estados decorativos */
.layout-block-customer .customer-menu ul li a { display: block; padding: 7px 16px; color: var(--color-text); }
.layout-block-customer .customer-menu ul li a:hover { color: var(--link-hover-color); }
.layout-block-customer .customer-menu ul li.label {
	padding: 12px 16px 4px;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* -- carrinho (ícone + drawer) -- */
/* display/padding vêm de .chrome-icon-box; o relative fica (é o contexto do
   badge .count, que é absolute no canto) */
.layout-block-cart .customer-cart {
	position: relative;
	cursor: pointer;
}
.layout-block-cart span.count,
.navigation-customer .customer-cart .count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: var(--fs-xs);
	text-align: center;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--color-white);
}
.layout-block-cart #sidebar-cart-items-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100003;
	width: min(400px, 92vw);
	padding: 50px 16px 16px;
	overflow-y: auto;
	background: var(--color-surface);
	color: var(--color-text);
	border-left: 1px solid var(--color-border);
}
.layout-block-cart #sidebar-cart-items-container:not(.open) { display: none; }
.layout-block-cart #sidebar-cart-items-container-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100002;
	background: rgba(0, 0, 0, 0.5);
}
.layout-block-cart #close { position: absolute; top: 12px; right: 16px; cursor: pointer; }
.layout-block-cart #cart-items-title { font: var(--title4-desktop-font); margin-bottom: 12px; }
.layout-block-cart #cart-items-list .cart-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
}
.layout-block-cart #cart-items-list .cart-item .col:nth-child(1) { width: 30%; }
.layout-block-cart #cart-items-list .cart-item .col:nth-child(2) { width: 50%; }
.layout-block-cart #cart-items-list .cart-item .col:nth-child(3) { width: 20%; text-align: right; }
.layout-block-cart #totals {
	display: flex;
	justify-content: space-between;
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid var(--color-border);
	font-weight: 600;
}
.layout-block-cart #actions { margin-top: 16px; text-align: right; }

/* -- wishlist / idiomas -- */
/* caixa dos utilitários: display/padding vêm de .chrome-icon-box */
.layout-block-wishlist a { color: inherit; }
.layout-block-languages .language-container { position: relative; padding: 5px; }
.layout-block-languages ul { list-style: none; margin: 0; padding: 0; }
.layout-block-languages .language-container.inline li { display: inline-block; margin: 0 3px; }
.layout-block-languages .language-container.dropdown .language-selector {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10000;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	padding: 4px;
}
.layout-block-languages .language-container.dropdown.open .language-selector,
.layout-block-languages .language-container.dropdown:hover .language-selector { display: block; }
.layout-block-languages .current, .layout-block-languages .switcher-option { cursor: pointer; }
.layout-block-languages img { width: 22px; height: auto; }

/* -- newsletter (footer) -- */
.layout-block-newsletter { padding: 24px 0; }
.layout-block-newsletter .title { font: var(--title3-desktop-font); display: block; margin-bottom: 6px; }
.layout-block-newsletter .subtitle { display: block; margin-bottom: 14px; color: inherit; opacity: .75; }
.layout-block-newsletter .subscribe { display: flex; gap: 8px; max-width: 420px; }
.layout-block-newsletter #subscribe_email {
	flex: 1 1 auto;
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	background: var(--background-color);
	color: var(--color-text);
}
.layout-block-newsletter .newsletter-privacy { margin-top: 10px; }
/* GLOBAL: label da política de privacidade (newsletter, form builder, forms
   da plataforma) — texto a fluir com o checkbox inline; flex partia os nós
   de texto do label em itens quando a coluna era estreita */
label.privacy-checkbox, label.terms-checkbox { display: block; text-align: left; font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; }
label.privacy-checkbox input[type="checkbox"], label.terms-checkbox input[type="checkbox"] { width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--primary-color); }

/* -- redes sociais -- */
.layout-block-social .title { font: var(--title4-desktop-font); display: block; margin-bottom: 10px; }
.layout-block-social ul { list-style: none; margin: 0; padding: 0; }
.layout-block-social ul li { display: inline-block; margin: 0 10px 8px 0; }
.layout-block-social ul li a {
	display: inline-flex; /* centra o glifo no círculo (o inline-block deixava
	   o ::before do fontello descentrado pelas margens próprias da fonte) */
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--color-text);
	font-size: 0; /* o markup traz texto ("Instagram") — só o ícone é visível */
	overflow: hidden;
	white-space: nowrap;
}
.layout-block-social ul li a::before { font-size: 15px; line-height: 1; margin: 0; }

/* -- avisos (dev mode / cookies / notificações do header) -- */
.layout-block-dev-mode-notice p {
	margin: 0;
	padding: 5px;
	text-align: center;
	background: var(--message-warning-background);
	color: var(--message-warning-color);
}
/* .cookie-info = cada grupo/secção de cookies DENTRO do popup de preferências
   e da página RGPD — é conteúdo normal, um cartão leve. (A antiga regra
   position:fixed presumia uma barra de aviso que não existe: fixava todos os
   grupos ao fundo do ecrã, colapsados uns sobre os outros.) */
.cookie-info {
	padding: 14px 20px;
	background: var(--color-surface);
	border-radius: 6px;
}
.notifications {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10000;
	width: min(360px, 92vw);
	max-height: 60vh;
	overflow-y: auto;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}
.notifications.visible { display: block; }

/* footer legado (composição alternativa) */
.before-footer { padding: 24px 0; }
.absolute-footer { padding: 12px 20px; font-size: var(--fs-sm); }
.copyright-container { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ==== 3. MOTOR CMS (contentores/blocos/página) =========================== */
/* O wrapper vem de cms/page/block/template.phtml (sempre usado); o MIOLO é
   twig da BD OU o .phtml fallback do tipo. O visual fino de cada bloco vive
   no css_<variante> do bloco (blocks.css); aqui só estrutura partilhada. */

.block-container { width: 100%; }
/* filho direto OBRIGATÓRIO: os twigs dos blocos também usam <div class="row">
   no miolo (tabs, painéis) — um seletor descendente tornava esses .row flex
   e o conteúdo transbordava os limites do bloco */
/* GOTEIRA entre colunas (decisão 2026-08-19): é do TEMA, via --row-gap
   (omissão 0px = nada muda; um tema liga-a com um só token, ex.:
   --row-gap: var(--block-gap)). Só horizontal: no mobile as colunas
   empilham a 100% e o ritmo vertical é dos blocos (--block-space-y). */
.block-container > .row { display: flex; flex-wrap: wrap; gap: 0 var(--row-gap, 0px); }
.block-container > .row.no-gutters { gap: 0; }
/* As colunas PRECISAM de largura explícita: um item flex sem basis encolhe
   para o conteúdo (listas/sliders ficavam estreitos). col-sm-N = N/12,
   menos a fatia proporcional da goteira: col-sm-N cede (12-N)/12 dela —
   numa linha qualquer mistura de N soma 100% outra vez. */
.block-container-col { min-width: 0; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 767px) {
	.block-container-col.col-sm-1 { flex: 0 0 calc(8.3333% - var(--row-gap, 0px)*11/12); max-width: calc(8.3333% - var(--row-gap, 0px)*11/12); }
	.block-container-col.col-sm-2 { flex: 0 0 calc(16.6667% - var(--row-gap, 0px)*10/12); max-width: calc(16.6667% - var(--row-gap, 0px)*10/12); }
	.block-container-col.col-sm-3 { flex: 0 0 calc(25% - var(--row-gap, 0px)*9/12); max-width: calc(25% - var(--row-gap, 0px)*9/12); }
	.block-container-col.col-sm-4 { flex: 0 0 calc(33.3333% - var(--row-gap, 0px)*8/12); max-width: calc(33.3333% - var(--row-gap, 0px)*8/12); }
	.block-container-col.col-sm-5 { flex: 0 0 calc(41.6667% - var(--row-gap, 0px)*7/12); max-width: calc(41.6667% - var(--row-gap, 0px)*7/12); }
	.block-container-col.col-sm-6 { flex: 0 0 calc(50% - var(--row-gap, 0px)*6/12); max-width: calc(50% - var(--row-gap, 0px)*6/12); }
	.block-container-col.col-sm-7 { flex: 0 0 calc(58.3333% - var(--row-gap, 0px)*5/12); max-width: calc(58.3333% - var(--row-gap, 0px)*5/12); }
	.block-container-col.col-sm-8 { flex: 0 0 calc(66.6667% - var(--row-gap, 0px)*4/12); max-width: calc(66.6667% - var(--row-gap, 0px)*4/12); }
	.block-container-col.col-sm-9 { flex: 0 0 calc(75% - var(--row-gap, 0px)*3/12); max-width: calc(75% - var(--row-gap, 0px)*3/12); }
	.block-container-col.col-sm-10 { flex: 0 0 calc(83.3333% - var(--row-gap, 0px)*2/12); max-width: calc(83.3333% - var(--row-gap, 0px)*2/12); }
	.block-container-col.col-sm-11 { flex: 0 0 calc(91.6667% - var(--row-gap, 0px)*1/12); max-width: calc(91.6667% - var(--row-gap, 0px)*1/12); }
	.block-container-col.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
	/* containers cujo nº de colunas NÃO divide 12 (5, 7, 8, 9, 10, 11, >12):
	   sem classe possível na grelha, dividem-se em partes iguais pelo flex.
	   Emitida por Helper_Cms_Page::getDefaultColClass(). */
	.block-container-col.col-eq { flex: 1 1 0; max-width: none; }
}
.block { position: relative; }
.block > .block-content { width: 100%; max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 32px 20px; }

.page-title-wrapper { width: 100%; }
.page-title-wrapper > .page-title {
	max-width: var(--content-max-width, 1600px);
	margin: 20px auto;
}

.breadcrumbs-wrapper { max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 20px 0; }
ul.breadcrumbs { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
ul.breadcrumbs li { display: inline; }
ul.breadcrumbs li + li::before { content: "/"; margin: 0 6px; color: var(--color-text-muted); }

.no-results { padding: 40px 20px; text-align: center; color: var(--color-text-muted); }
.no-results .icon { display: block; font-size: var(--fs-3xl); margin-bottom: 8px; }

/* ==== 4. COMPONENTES GLOBAIS ============================================= */

/* -- botões (tokens button1-5; lbt = sistema, buttonN = legado) -- */
.lbt, button.lbt, a.lbt,
.button1, .button2, .button3, .button4, .button5 {
	display: inline-block;
	font: var(--button-font);
	padding: var(--button-padding);
	border-radius: var(--button-radius);
	border-style: solid;
	border-width: var(--button-border-width);
	text-transform: var(--button-text-transform);
	letter-spacing: var(--button-letter-spacing);
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--motion-duration, .25s) var(--motion-ease, ease), color var(--motion-duration, .25s) var(--motion-ease, ease), border-color var(--motion-duration, .25s) var(--motion-ease, ease), opacity var(--motion-duration, .25s) var(--motion-ease, ease);
}
/* âncoras-botão: o vendor (bootstrap) sublinha a:hover — nunca em botões */
a.lbt:hover, a.button1:hover, a.button2:hover, a.button3:hover, a.button4:hover, a.button5:hover { text-decoration: none; }
.lbt1, .button1 { background: var(--button1-background); color: var(--button1-color); border-color: var(--button1-border-color); }
.lbt1:hover, .button1:hover { background: var(--button1-background-hover); color: var(--button1-color-hover); border-color: var(--button1-border-color-hover); }
.lbt2, .button2 { background: var(--button2-background); color: var(--button2-color); border-color: var(--button2-border-color); }
.lbt2:hover, .button2:hover { background: var(--button2-background-hover); color: var(--button2-color-hover); border-color: var(--button2-border-color-hover); }
.lbt3, .button3 { background: var(--button3-background); color: var(--button3-color); border-color: var(--button3-border-color); }
.lbt3:hover, .button3:hover { background: var(--button3-background-hover); color: var(--button3-color-hover); border-color: var(--button3-border-color-hover); }
.lbt4, .button4 { background: var(--button4-background); color: var(--button4-color); border-color: var(--button4-border-color); }
.lbt4:hover, .button4:hover { background: var(--button4-background-hover); color: var(--button4-color-hover); border-color: var(--button4-border-color-hover); }
.lbt5, .button5 { background: var(--button5-background); color: var(--button5-color); border-color: var(--button5-border-color); }
.lbt5:hover, .button5:hover { background: var(--button5-background-hover); color: var(--button5-color-hover); border-color: var(--button5-border-color-hover); }
.lbt-small { font: var(--button-font-small); padding: var(--button-padding-small); letter-spacing: var(--button-letter-spacing-small); }
.lbt.disabled, .lbt:disabled, button.lbt:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* estados de loading dos botões (registo, confirmação): o JS alterna a
   classe .loading — só um dos textos é visível de cada vez */
.lbt .text-loading { display: none; }
.lbt.loading .text-not-loading { display: none; }
.lbt.loading .text-loading { display: inline-flex; align-items: center; gap: 8px; }
.spinner-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: lbt-spin .8s linear infinite;
}
@keyframes lbt-spin { to { transform: rotate(360deg); } }

/* utilitários de cor legados de botões (semântica de encomendas) */
.lbt.green, .button3.green { background: var(--message-success-color); border-color: var(--message-success-color); color: var(--color-white); }
.lbt.blue { background: var(--message-info-color); border-color: var(--message-info-color); color: var(--color-white); }
.lbt.red { background: var(--message-error-color); border-color: var(--message-error-color); color: var(--color-white); }

/* -- mensagens (tokens message-*) -- */
.flash-messages { list-style: none; margin: 0; padding: 0; }
.message, .flash-messages .message {
	display: block;
	font: var(--message-font);
	padding: var(--message-padding);
	margin: 8px 0;
	border-radius: var(--message-radius);
	border: var(--message-border-width) solid var(--color-border);
	text-transform: var(--message-text-transform);
	letter-spacing: var(--message-letter-spacing);
	background: var(--color-surface);
	color: var(--color-text);
}
.message.success { background: var(--message-success-background); color: var(--message-success-color); border-color: var(--message-success-border-color); }
.message.error   { background: var(--message-error-background);   color: var(--message-error-color);   border-color: var(--message-error-border-color); }
.message.warning { background: var(--message-warning-background); color: var(--message-warning-color); border-color: var(--message-warning-border-color); }
.message.info    { background: var(--message-info-background);    color: var(--message-info-color);    border-color: var(--message-info-border-color); }

/* toast global (js/html/message.js) */
.message-box {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000000;
	min-width: 280px;
	max-width: min(480px, 92vw);
	padding: 12px 16px;
	border-radius: var(--message-radius);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.message-box .title {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	font-weight: 700;
	border-bottom: 1px solid var(--color-border);
}
.message-box.success { background: var(--message-success-background); color: var(--message-success-color); }
.message-box.error   { background: var(--message-error-background);   color: var(--message-error-color); }
.message-box.warning { background: var(--message-warning-background); color: var(--message-warning-color); }
.message-box.info    { background: var(--message-info-background);    color: var(--message-info-color); }

/* diálogo de confirmação (js/html/confirm.js) */
.confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000001;
	background: rgba(0, 0, 0, 0.5);
}
.confirm-box {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -30%);
	z-index: 1000002;
	width: min(440px, 92vw);
	padding: 20px;
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--message-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.confirm-box .title {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 8px;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border);
}
.confirm-box .message { border: 0; background: none; padding: 0; margin: 0 0 16px; }
.confirm-box .actions { display: flex; justify-content: center; gap: 10px; }

/* -- formulários -- */
.form { width: 100%; }
/* estrutura fields-group > col: as cols partilham a fila em desktop/tablet
   (partes iguais, qualquer que seja o nº de cols); em mobile empilham */
.fields-group { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 8px; }
.fields-group > .col { flex: 1 1 0; min-width: 0; }
.fields-group.cols2 > .col { flex-basis: calc(50% - 10px); }
.fields-group.cols3 > .col { flex-basis: calc(33.333% - 13.333px); }
.fields-group.cols4 > .col { flex-basis: calc(25% - 15px); }
.fields-group.cols5 > .col { flex-basis: calc(20% - 16px); }
.fields-group.cols6 > .col { flex-basis: calc(16.666% - 16.666px); }
@media (max-width: 766px) {
	.fields-group { display: block; }
	.fields-group > .col { width: 100%; }
}
.field { margin-bottom: 14px; }
/* o label é o bloco do campo — inline encolhia o input ao conteúdo */
.field label { display: block; width: 100%; }
.field label > span, .field .legend {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="tel"], .field input[type="date"],
.field input[type="file"], .field textarea, .field select,
input.data, textarea.data, select.data {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: var(--color-text);
	background: var(--background-color);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--primary-color); outline-offset: -1px; }
.field input[readonly], .field textarea[readonly], .field select[readonly],
input.data[readonly], textarea.data[readonly], select.data[readonly] { opacity: 0.5; }
.field.checkbox label, .field .switcher { display: flex; align-items: center; gap: 8px; }
.field.checkbox input, .field input[type="checkbox"], .field input[type="radio"] { width: auto; }
.input-box { position: relative; }
#button_save_container { text-align: right; margin-top: 12px; }

/* -- tabelas (datagrid) -- */
table.datagrid, .datagrid table, table#cart-items-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 50px;
}
.datagrid th {
	padding: 10px 8px;
	text-align: left;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}
.datagrid td { padding: 12px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.datagrid tr.link { cursor: pointer; }
.datagrid tr.link:hover td { background: var(--color-surface); }
.datagrid td.numbers { text-align: right; }

/* em mobile a datagrid converte-se em cards: cada tr é um cartão e cada td
   uma linha rótulo+valor (rótulo via data-label posto nos templates) */
@media (max-width: 766px) {
	table.datagrid, table.datagrid tbody, table.datagrid tr, table.datagrid td { display: block; width: 100%; box-sizing: border-box; }
	table.datagrid thead, table.datagrid tr:has(th) { display: none; }
	table.datagrid tr {
		margin-bottom: 14px;
		padding: 6px 14px;
		border: 1px solid var(--color-border);
		border-radius: 6px;
		background: var(--background-color);
	}
	table.datagrid td { padding: 8px 0; border-bottom: 0; }
	table.datagrid td + td { border-top: 1px solid var(--color-border); }
	table.datagrid td:empty { display: none; }
	table.datagrid td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: var(--fs-xs);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}
	table.datagrid td.numbers { text-align: left; }
}

/* -- paginação -- */
/* .pager = markup partilhado por catálogo, lotes por categoria e parcial de
   lotes (.pager > ul > li > span atual | a); mesmo desenho do .pagination */
.pager { padding: 16px 0; }
.pager ul, ul.personal-lots-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
ul.personal-lots-pagination { padding: 16px 0; }
.pager li a, .pager li span, .personal-lots-pagination li a {
	display: inline-block;
	min-width: 32px;
	padding: 4px 8px;
	text-align: center;
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	cursor: pointer;
}
.pager li a:hover, .personal-lots-pagination li a:hover { background: var(--color-surface); }
.pager li span, .personal-lots-pagination li.active a { background: var(--primary-color); color: var(--color-white); border-color: var(--primary-color); }
.pagination .numbers { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pagination .page, .pagination .next, .pagination .prev {
	display: inline-block;
	min-width: 32px;
	padding: 4px 8px;
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	cursor: pointer;
}
.pagination .current { background: var(--primary-color); color: var(--color-white); border-color: var(--primary-color); }

/* -- toolbar de listagens -- */
.toolbar-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 16px;
}
.toolbar-list .count-items { color: var(--color-text-muted); font-size: var(--fs-sm); }
.toolbar-list .modes span { cursor: pointer; padding: 4px 6px; opacity: 0.45; }
.toolbar-list .modes span.active { opacity: 1; }
.toolbar-list .sort-by { display: flex; align-items: center; gap: 8px; }

/* -- filtros -- */
.filters h2.title { display: flex; align-items: center; justify-content: space-between; }
.filters .filters-toggle-icon { cursor: pointer; }
.filters .filter { margin-bottom: 18px; }
.filters .options { max-height: 260px; overflow-y: auto; }
.filters .field.checkbox { margin-bottom: 6px; }
.filters .select-interval { display: flex; gap: 8px; }
.filters .clear-filters { margin-top: 8px; }

/* ==== 5. CARDS DE LOTE (listagens: leilões, catálogo, twigs de blocos) === */

.lot-list, .products-list { display: block; }
.lot-list > ul, .products-list > ul, ul.lots-list, .catalog-items-grid { list-style: none; margin: 0; padding: 0; }
/* grelha só fora dos sliders — o slick gere o layout dele.
   (No catálogo a UL usa as utilities lgrid/llist — trocadas pelo misc.js
   conforme o modo da toolbar; ver secção do catálogo.) */
.lot-list.grid > ul:not(.slick-initialized):not(.lgrid):not(.llist),
.lot-list:not(.slider) > ul:not(.slick-initialized):not(.lgrid):not(.llist) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}
.lot-list:not(.grid):not(.slider) > ul:not(.lgrid):not(.llist) { display: block; }
/* filas do modo lista: .image e .lot-content vivem DENTRO do .lot-preview
   (auction/view, lots/category) — é o preview que flexa, não o li.
   ul.llist li.lot = as mesmas filas quando a listagem usa a utility (catálogo) */
.lot-list:not(.grid):not(.slider) li.lot,
ul.llist > li.lot { display: block; margin-bottom: 0; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.lot-list:not(.grid):not(.slider) li.lot .lot-preview,
ul.llist > li.lot .lot-preview { display: flex; gap: 20px; }
.lot-list:not(.grid):not(.slider) li.lot .lot-preview > .image,
ul.llist > li.lot .lot-preview > .image { flex: 0 0 220px; align-self: flex-start; }
.lot-list:not(.grid):not(.slider) li.lot .lot-content,
ul.llist > li.lot .lot-content { flex: 1 1 auto; min-width: 0; padding: 0 2px; }
/* nas filas as ações fluem depois do conteúdo (o absolute do modo grelha
   pousava o botão em cima da descrição) */
.lot-list:not(.grid):not(.slider) li.lot .lot-content .actions,
ul.llist > li.lot .lot-content .actions { position: static; margin-top: 12px; }
.lot-list:not(.grid):not(.slider) li.lot .lot-content .actions .buttons,
ul.llist > li.lot .lot-content .actions .buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
	.lot-list:not(.grid):not(.slider) li.lot .lot-preview,
	ul.llist > li.lot .lot-preview { flex-direction: column; }
	.lot-list:not(.grid):not(.slider) li.lot .lot-preview > .image,
	ul.llist > li.lot .lot-preview > .image { flex: none; }
}
/* blocos CMS (.cms-block.lot-list): a vista "lista" é grelha de cartões (com
   botão Licitar), NÃO as filas do catálogo — o contrato de filas fica para a
   vista comutável das páginas de leilão */
.cms-block.lot-list:not(.slider) > ul:not(.slick-initialized) { display: grid; }
.cms-block.lot-list:not(.grid):not(.slider) li.lot { display: block; padding: 0; border-bottom: none; }
.cms-block.lot-list:not(.grid):not(.slider) li.lot .lot-preview { display: block; }
/* slider de lotes: goteiras entre cartões + calhas para as setas */
.lot-list.slider > ul li.lot { padding: 0 12px; box-sizing: border-box; }
.lot-list.slider > ul.slick-initialized { padding-left: 36px; padding-right: 36px; }

li.lot { position: relative; min-width: 0; }
.lot-preview { position: relative; }
.lot-preview .image { position: relative; overflow: hidden; background: var(--color-surface); }
.lot-preview .image a.img { display: block; }
.lot-preview .image img { display: block; width: 100%; height: auto; object-fit: cover; }

/* barra de estado/valor sob a imagem */
.lot-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	background: var(--primary-color);
	color: var(--color-white);
	font-size: var(--fs-sm);
}
.lot-status .label { opacity: 0.9; }
.lot-status .value { display: flex; flex: 1 1 auto; gap: 6px; align-items: baseline; }
/* o preço/tag encosta à direita — o p.amount com .block-content (0-2-2) tem de
   bater a regra do texto branco (.block-content .lot-status p, 0-2-1);
   .price = variante do catalog_category */
.lot-status .amount, .block-content .lot-status p.amount,
.lot-status .price, .block-content .lot-status p.price { margin-left: auto; text-align: right; }
/* nos blocos CMS o compilador de temas pinta .block-content p (0-1-1) e
   esmagava a herança branca da faixa — bater com 0-2-1 */
.lot-status p, .block-content .lot-status p { margin: 0; color: var(--color-white); }
.block-content .lot-status span { color: var(--color-white); }
/* favoritos sem sessão iniciada (twigs auction/lots) */
.lot-list-login { padding: 24px 0; text-align: left; }
.lot-list-login p { margin: 0 0 12px; }
.lot-list-login .lbt { display: inline-block; }

.lot-content { padding: 10px 2px 60px; }
.lot-content .info > .ltitle, .lot-content .info .ltitle2, .lot-content .info .ltitle3, .lot-content .info .lot-title { margin: 6px 0; }
.lot-content .short-description, .lot-content .description { color: var(--color-text-muted); font-size: var(--fs-sm); }
.lot-content .licitations-count { font-size: var(--fs-sm); color: var(--color-text-muted); }
.lot-content .actions { position: absolute; right: 8px; bottom: 8px; }
/* nos blocos CMS as ações fluem DEPOIS do conteúdo (o absolute pousava o botão
   em cima de descrições compridas); alinhadas à direita como no layout esperado */
.cms-block.lot-list .lot-content { padding-bottom: 60px; }
.cms-block.lot-list .lot-content .actions { position: static; margin-top: 10px; }
.cms-block.lot-list .lot-content .actions .buttons { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }

/* countdown */
.countdown { font-size: var(--fs-sm); }
.countdown .countdown-label { margin-right: 6px; }
.countdown-container-hms, .countdown-container-dhms { display: inline-block; white-space: nowrap; }
/* plugin jQuery Countdown (auction.js): injeta .countdown_row > .countdown_section
   (.countdown_amount + <br> + .countdown_descr) — sem estas regras cada unidade
   cai numa linha; aqui fica "0d : 0h : 0m : 0s" inline */
.countdown_row { display: inline; width: auto; padding: 0; clear: none; text-align: inherit; }
.countdown_section { display: inline-block; float: none; width: auto; position: relative; padding: 0 8px 0 0; font-weight: 600; text-align: center; }
.countdown_section br { display: none; }
.countdown_section:not(:last-child):after { content: ":"; position: absolute; right: 1px; }
.countdown_amount { display: inline; }
.countdown_descr { display: inline; font-size: inherit; }

/* favoritos (coração sobre a imagem) */
.lot-preview .icon-heart, .lot-preview .icon-heart-empty {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: var(--auction-favorites-radius);
	background: var(--auction-favorites-background-color);
	color: var(--auction-favorites-icon-color);
	cursor: pointer;
}

/* estados de lote (auction.js) */
.lot.closed .lot-status, .lot .value.closed { background: var(--color-text-muted); }
/* dentro da faixa, os .value nunca têm fundo próprio (pill cinzenta a flutuar) */
.lot-status .value.open, .lot-status .value.closed { background: transparent; }
.lot.winner .lot-status { background: var(--message-success-color); }
.lot.pending .lot-status { background: var(--message-warning-color); color: var(--message-warning-background); }
.winning-message, .winner-message { font-size: var(--fs-sm); font-weight: 600; color: var(--message-success-color); }
.partner-closed-message { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -- RÁCIO DE IMAGEM DOS CARTÕES (themable) --------------------------------
   Todas as imagens de LISTAGENS encaixam num rácio fixo — evita cartões com
   alturas dispares (fotos verticais/horizontais misturadas). Hierarquia de
   tokens: --<família>-image-ratio → --card-image-ratio → 1/1 (base zero).
   Modo de encaixe: --card-image-fit (cover|contain) global; lotes e leilões
   (mercadoria) têm token próprio com default CONTAIN — nunca cortar a peça
   (decisão Pedro); o letterbox assenta no fundo surface do contentor.
   Só CARTÕES — as galerias das páginas de detalhe (image-wall, .images)
   ficam de fora.
   ⚠ ITEM P/ LISTA DE IMPLEMENTAÇÕES: registar no Helper_Theme_Schema:
   --card-image-ratio (ratio), --card-image-fit (enum cover|contain),
   --lot-image-fit, --auction-image-fit, --lot-image-ratio,
   --auction-image-ratio, --category-image-ratio, --news-image-ratio,
   --blog-image-ratio, --article-image-ratio */
/* lotes/produtos (cartões .lot-preview: leilões, catálogo, blocos CMS) */
.lot-preview .image { aspect-ratio: var(--lot-image-ratio, var(--card-image-ratio, 1 / 1)); }
.lot-preview .image a.img { display: block; width: 100%; height: 100%; }
.lot-preview .image img, .lot-preview .image video { width: 100%; height: 100%; object-fit: var(--lot-image-fit, var(--card-image-fit, contain)); }
/* cartões de leilões (auction-grid) */
.auction-grid li .image { aspect-ratio: var(--auction-image-ratio, var(--card-image-ratio, 1 / 1)); overflow: hidden; background: var(--color-surface); }
.auction-grid li .image img { width: 100%; height: 100%; object-fit: var(--auction-image-fit, var(--card-image-fit, contain)); }
/* grelhas de categorias (catálogo + leilões) */
.categories-grid .category img { aspect-ratio: var(--category-image-ratio, var(--card-image-ratio, 1 / 1)); object-fit: var(--card-image-fit, cover); }
/* notícias e blog */
.news-grid .image img { aspect-ratio: var(--news-image-ratio, var(--card-image-ratio, 1 / 1)); object-fit: var(--card-image-fit, cover); }
.blog-items .image img, .blog-posts .image img { aspect-ratio: var(--blog-image-ratio, var(--card-image-ratio, 1 / 1)); object-fit: var(--card-image-fit, cover); }
/* artigos e restantes utilities com .lmedia (blocos de conteúdo) */
.lgrid .lmedia img, .llist .lmedia img, .lrow .lmedia img { aspect-ratio: var(--article-image-ratio, var(--card-image-ratio, 1 / 1)); object-fit: var(--card-image-fit, cover); }
/* resultados de pesquisa: maioritariamente mercadoria ⇒ contain */
.search-results-list .lmedia img { aspect-ratio: var(--search-image-ratio, var(--card-image-ratio, 1 / 1)); object-fit: var(--search-image-fit, var(--card-image-fit, contain)); background: var(--color-surface); }

/* -- rácio nas PÁGINAS DE VISUALIZAÇÃO (news/view, post do blog, capa do
   leilão, galeria do lote/produto, header de categoria): mesmos princípios,
   tokens próprios — mas default AUTO (mantém o layout natural da base zero;
   o tema define o rácio quando quiser). Mercadoria (leilão/lote/produto)
   com fit próprio → contain quando houver rácio.
   ⚠ registar também no Helper_Theme_Schema: --view-image-ratio,
   --view-image-fit, --news-view-image-ratio, --blog-view-image-ratio,
   --auction-view-image-ratio, --auction-view-image-fit,
   --lot-view-image-ratio, --lot-view-image-fit, --category-view-image-ratio */
.news-view .image img { width: 100%; aspect-ratio: var(--news-view-image-ratio, var(--view-image-ratio, auto)); object-fit: var(--view-image-fit, cover); }
.blog-post .image img { width: 100%; aspect-ratio: var(--blog-view-image-ratio, var(--view-image-ratio, auto)); object-fit: var(--view-image-fit, cover); }
/* capa do leilão (auction/view) */
.auction-info-content .image img { width: 100%; aspect-ratio: var(--auction-view-image-ratio, var(--view-image-ratio, auto)); object-fit: var(--auction-view-image-fit, var(--view-image-fit, contain)); background: var(--color-surface); }
/* header de categoria (catálogo e lotes por categoria) */
.category-info .image img { width: 100%; aspect-ratio: var(--category-view-image-ratio, var(--view-image-ratio, auto)); object-fit: var(--view-image-fit, cover); }
/* galeria do lote/produto em modo DEFAULT: rácio na imagem principal.
   ⚠ A image-wall fica FORA do sistema de rácio (decisão Pedro) — a colagem
   gere as próprias proporções (bootstrap cols + resize JS). */
:is(.lot-view-page, .catalog-product-view) .images .image-wrapper > a { display: block; aspect-ratio: var(--lot-view-image-ratio, var(--view-image-ratio, auto)); }
:is(.lot-view-page, .catalog-product-view) .images .image-wrapper > a img { width: 100%; height: 100%; object-fit: var(--lot-view-image-fit, var(--view-image-fit, cover)); background: var(--color-surface); }

/* ==== 6. PÁGINA DE LOTE / PRODUTO ======================================== */

.auctions-view, .auction-view { max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 0 20px; }
.auction-info-content { padding: 16px 0; }
.auction-info-content .date-count { color: var(--secondary-color); font-size: var(--fs-sm); }
/* .auction-grid-wrapper = grelha de leilões + sidebar (auction/list.phtml);
   .auction-list-wrapper = o mesmo layout nas páginas de LOTES (auction/view,
   lots/category, …) — a rever/renomear quando essas páginas passarem no QA. */
.auction-grid-wrapper, .auction-list-wrapper { display: flex; gap: 28px; align-items: flex-start; }
.auction-grid-wrapper .auction-view-sidebar, .auction-list-wrapper .auction-view-sidebar { flex: 0 0 260px; }
.auction-grid-wrapper .auction-grid, .auction-list-wrapper .lot-list,
.auction-list-wrapper > .search-results { flex: 1 1 auto; min-width: 0; }
.auction-list-wrapper.full .lot-list, .lot-list.full { width: 100%; }

@media (max-width: 1024px) {
	.auction-grid-wrapper, .auction-list-wrapper { flex-direction: column; }
	.auction-grid-wrapper .auction-view-sidebar, .auction-list-wrapper .auction-view-sidebar { width: 100%; flex: none; }
}

/* -- catálogo: página de categoria (catalog/category/view.phtml +
   catalog/product/list.phtml) — sidebar de filtros + lista de produtos
   (mesma anatomia do layout de leilões) -- */
.auction-category-wrapper,
.auction-lot-category:not(body),
.catalog-category-view:not(body) { max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 0 20px; }
.catalog-products-wrapper .block-container-col { display: flex; gap: 28px; align-items: flex-start; }
.catalog-products-wrapper .products-sidebar { flex: 0 0 260px; }
.catalog-products-wrapper .products-list { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) {
	.catalog-products-wrapper .block-container-col { flex-direction: column; }
	.catalog-products-wrapper .products-sidebar { width: 100%; flex: none; }
}
/* grelha de subcategorias (ul.lgrid categories-grid) — só conteúdo; a
   margem para a lista de produtos vive no wrapper (.lgrid zera margens) */
.block-categories { margin: 0 0 36px; }
.categories-grid { --item-min: 280px; }
.categories-grid .category { display: block; color: inherit; text-decoration: none; }
.categories-grid .category img { display: block; width: 100%; height: auto; }
.categories-grid .category .category-title { margin: 8px 0 0; }
.categories-grid .category:hover .category-title { color: var(--primary-color); }

/* -- vista de lote (view-full.phtml, body.lot-view-page) ------------------
   Os hooks de id/classe (countdown_N, lot-value-info, auto_licitation,
   licitation_amount, max-offer-amount, …) são consumidos pelo auction.js —
   NÃO renomear no markup; aqui só se estiliza. */
/* o wrapper genérico .auction-list-wrapper é flex (sidebar+lista) — na página
   de lote não há sidebar e o flex fazia do botão de login uma coluna à esquerda */
.lot-view-page .auction-list-wrapper.lot-list { display: block; }
/* linha própria, alinhado à direita, entre breadcrumbs e galeria (modelo a4) */
.lot-view-page .autentication { display: block; float: none; margin: 0 0 20px auto; }
.lot-view-page .lot-list > .title h1, .catalog-product-view .products-view > .title h1 { margin-bottom: 4px; }
:is(.lot-view-page, .catalog-product-view) .title :is(.lot-ref, .product-ref) { font-size: var(--fs-md); color: var(--color-text-muted); text-transform: uppercase; }
:is(.lot-view-page, .catalog-product-view) .title .lot-ref p, .catalog-product-view .title p.product-ref { margin: 0 0 24px; }

/* modo WALL (config gallery_frontend_layout=wall): galeria a toda a largura,
   depois duas colunas — detalhes (colapsáveis) | ações (countdown+licitação) */
.lot-view-page .lot-info.wall > .lot-view.full > .lot-info,
.catalog-product-view .product-info.wall > .lot-view.full > .lot-info { display: flex; gap: 48px; align-items: flex-start; width: 100%; }
.lot-view-page .lot-info.wall > .lot-view.full > .lot-info > .details,
.catalog-product-view .product-info.wall > .lot-view.full > .lot-info > .details { flex: 1 1 50%; min-width: 0; }
.lot-view-page .lot-info.wall > .lot-view.full > .lot-info > .lot-actions,
.catalog-product-view .product-info.wall > .lot-view.full > .lot-info > .product-actions { flex: 1 1 50%; min-width: 0; }
/* modo default: galeria na coluna esquerda, ações à direita — FLOAT (o
   inline-block quebrava: o whitespace do markup soma ao 50%+50%; o markup
   traz div.clear antes dos relacionados, é um layout de floats de origem) */
.lot-view-page .lot-view.full > .lot-info:not(.wall),
.catalog-product-view .product-view > .product-info:not(.wall) { float: left; width: 50%; }
.lot-view-page .lot-view.full > .lot-actions,
.catalog-product-view .product-view > .product-actions { float: left; width: 50%; box-sizing: border-box; padding-left: 48px; }
.catalog-product-view .product-view > .product-actions { width: 47%; }
@media (max-width: 1024px) {
	.lot-view-page .lot-info.wall > .lot-view.full > .lot-info,
	.catalog-product-view .product-info.wall > .lot-view.full > .lot-info { flex-direction: column; gap: 32px; }
	.lot-view-page .lot-view.full > .lot-info:not(.wall),
	.catalog-product-view .product-view > .product-info:not(.wall),
	.lot-view-page .lot-view.full > .lot-actions,
	.catalog-product-view .product-view > .product-actions { float: none; width: 100%; padding-left: 0; }
	.lot-view-page .lot-view.full > .lot-actions,
	.catalog-product-view .product-view > .product-actions { margin-top: 32px; }
}

/* colapsáveis (Descrição / Detalhes / Envio / Vendedor) — toggle no misc.js */
:is(.lot-view-page, .catalog-product-view) .details .detail-info h2.tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0; font: 500 var(--fs-xl)/1.4 var(--primary-font-family); color: var(--color-text); border-bottom: 1px solid var(--color-border); cursor: pointer; }
:is(.lot-view-page, .catalog-product-view) .details .detail-info h2.tab .title { margin: 0; }
:is(.lot-view-page, .catalog-product-view) .details .detail-info h2.tab .icon-down-open { font-size: 20px; color: var(--color-text-muted); transition: transform .3s; }
:is(.lot-view-page, .catalog-product-view) .details .detail-info.open h2.tab .icon-down-open { transform: rotate(180deg); color: var(--color-text); }
:is(.lot-view-page, .catalog-product-view) .details .detail-info .tab-content { display: none; padding: 16px 20px; background: var(--color-surface); font-size: var(--fs-sm); }

/* caixa do countdown (preenchida pelo auction.js) */
.lot-view-page .lot-actions .countdown { display: block; padding: 14px 8px 16px; background: var(--primary-color); color: var(--color-white); text-align: center; font-size: var(--fs-md); }
.lot-view-page .lot-actions .countdown .countdown-label { display: block; margin: 0 0 6px; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-white); }
.lot-view-page .lot-actions .countdown .countdown-container-dhms { display: block; font-size: var(--fs-2xl); font-weight: 600; }
.lot-view-page .lot-actions .countdown .countdown_section { padding-right: 14px; }
.lot-view-page .lot-actions .countdown .countdown_section:not(:last-child):after { right: 4px; }
.lot-view-page .lot-actions .countdown .countdown_amount,
.lot-view-page .lot-actions .countdown .countdown_descr { color: var(--color-white); }

/* valor atual + contadores (preenchidos pelo auction.js) — display:block
   anula a regra genérica .lot-value-info (flex, blocos CMS) que punha o
   contador de licitações a meio da fila */
.lot-view-page .lot-value-info { display: block; padding: 20px 0 6px; }
.lot-view-page .lot-value-info > p { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; flex-wrap: wrap; }
.lot-view-page .lot-value-info > p .label { font-weight: 600; text-transform: uppercase; font-size: var(--fs-lg); }
.lot-view-page .lot-value-info > p .amount { font-weight: 600; font-size: var(--fs-xl); text-align: right; }
.lot-view-page .lot-value-info > p .amount.secondary-currency { width: 100%; font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: 400; }
.lot-view-page .lot-value-info .value { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 6px; text-align: right; }
.lot-view-page .lot-value-info .value .amount { color: var(--color-text); }
.lot-view-page .minimum-value-info { padding: 4px 0 10px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.lot-view-page .minimum-value-info p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.lot-view-page .minimum-value-info .amount { color: var(--color-text); }

/* caixa de licitação — anular a moldura da regra genérica .licitation-box
   (blocos/live); aqui é secção da coluna, separada só por linha superior */
.lot-view-page .licitation-box, .lot-view-page .proposal-files-box { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: 20px 0; }
.lot-view .auto-licitation { margin-bottom: 20px; }
.lot-view .auto-licitation p { margin: 0 0 8px; font-weight: 500; }
.lot-view .auto-licitation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.lot-view .auto-licitation li { flex: 1 1 0; min-width: 90px; padding: 12px 8px; text-align: center; border: 1px solid var(--color-border); cursor: pointer; font-weight: 500; transition: all .2s; }
.lot-view .auto-licitation li:hover { background: var(--primary-color); border-color: var(--primary-color); color: var(--color-white); }
.lot-view .custom-licitation .title p { margin: 0 0 8px; font-weight: 500; }
.lot-view .custom-licitation .input-box { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); box-sizing: border-box; }
.lot-view .custom-licitation .input-box .currency { font-weight: 500; }
.lot-view .custom-licitation .input-box input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--primary-font-family); font-size: var(--fs-md); color: var(--color-text); }
.lot-view .custom-licitation .buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.lot-view .custom-licitation .buttons .lbt { flex: 1 1 0; white-space: nowrap; }
.lot-view .direct-sell-container { padding: 16px 0; }
.lot-view .final-price-info { margin: 6px 0 0; font-size: var(--fs-sm); }
.lot-view .actions-info { margin-top: 16px; }
.lot-view .contact-form-container { border-top: 1px solid var(--color-border); margin-top: 16px; padding: 20px 0; }

/* -- vista de produto (catalog/product/view.phtml, body.catalog-product-view)
   — reutiliza a anatomia da vista de lote (âncoras :is() acima); aqui só
   ficam os elementos exclusivos do produto -- */
.catalog-product-view .products-view { max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 0 20px; }
.catalog-product-view .product-actions .product-short-description { margin-bottom: 16px; }
.catalog-product-view .product-actions .short-description { color: var(--color-text-muted); }
.catalog-product-view .direct-sell-container { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.catalog-product-view .direct-sell-container .price { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
.catalog-product-view .product-actions .contact-form-container { border-top: 1px solid var(--color-border); margin-top: 16px; padding: 20px 0; }
.catalog-product-view .product-actions .actions-info { margin-top: 16px; }

/* -- galeria image-wall (media/wall.phtml — lógica original do auction4,
   re-ligada aos tokens; o resize/expansão vive no próprio template) -- */
.image-wall { position: relative; margin-bottom: 30px; }
.image-wall img { width: 100%; height: 100%; object-fit: cover; }
.image-wall .hidden { display: none; }
.image-wall .main-image-inner, .image-wall .thumb-inner { position: relative; overflow: hidden; height: 100%; width: 100%; }
.image-wall .thumbs a { display: block; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }
.image-wall .main-image a img, .image-wall .thumbs a { transition: transform 3s ease; }
.image-wall .main-image a:hover img, .image-wall .thumbs a:hover { transform: scale(1.3); }
.image-wall .images-count { position: absolute; bottom: 20px; right: 10px; z-index: 5; padding: 5px 10px; border-radius: 5px; background: var(--primary-color); color: var(--color-white); font-size: var(--fs-sm); }
/* o <a> do badge herda .base-image (fundo surface p/ contentores de imagem) —
   tem de ficar transparente sobre a pastilha primária */
.image-wall .images-count a, .image-wall .images-count a span, .image-wall .images-count a:hover { background: transparent; color: var(--color-white); text-decoration: none; }
.image-wall .placeholder span { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--color-surface); position: relative; }
.image-wall .placeholder span em { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; color: var(--color-border); }
.image-wall .favorite,
:is(.lot-view-page, .catalog-product-view) .images .image-wrapper .favorite { position: absolute; top: 10px; right: 16px; z-index: 5; width: 36px; height: 36px; line-height: 36px; text-align: center; text-decoration: none; cursor: pointer; border-radius: var(--auction-favorites-radius); background: var(--auction-favorites-background-color); color: var(--auction-favorites-icon-color); }

/* galeria modo DEFAULT (media/default.phtml): imagem principal com favorito
   sobreposto + fila de miniaturas por baixo. O JS do template (slider
   vertical de thumbs) aplica max-height/top inline — anulados aqui, o
   layout de fila não precisa deles; as setas só existem c/ >4 imagens. */
:is(.lot-view-page, .catalog-product-view) .images .image-wrapper { position: relative; }
:is(.lot-view-page, .catalog-product-view) .images .image-wrapper img { display: block; width: 100%; height: auto; }
:is(.lot-view-page, .catalog-product-view) .images .thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; max-height: none !important; overflow: visible; }
:is(.lot-view-page, .catalog-product-view) .images .thumbnails .thumbnail-image { position: static; top: auto !important; }
:is(.lot-view-page, .catalog-product-view) .images .thumbnails .thumbnail-image img { display: block; width: 135px; height: 135px; object-fit: cover; }
:is(.lot-view-page, .catalog-product-view) .images .thumbnails-controllers { display: none; }
/* vista expandida (todas as fotos) — overlay de página inteira, acima do
   chrome do site (header/sticky usam 100000+). Transição: DESCE ao entrar,
   SOBE ao fechar — gerida por .opened (o .hidden global é display:none
   !important e mataria a transição; o JS do wall.phtml tira o .hidden,
   força reflow, e só depois liga o .opened) */
.image-wall.full { position: fixed; left: 0; top: -100%; width: 100%; height: 100%; margin-bottom: 0; background: var(--color-surface);
	color: var(--color-text); z-index: 1000010; transition: top .4s ease; }
.image-wall.full.opened { top: 0; }
.image-wall.full.hidden { display: none; }
.image-wall.full .controls { background: var(--color-surface); text-align: left; padding: 20px; margin-top: 20px; }
.image-wall.full .controls a { color: var(--color-text); text-decoration: none; transition: .2s all; }
.image-wall.full .controls a:hover { color: var(--primary-color); }
/* seta do "Fechar" desliza ligeiramente no hover */
.image-wall.full .controls a [class^="icon-"] { display: inline-block; transition: transform .2s ease; }
.image-wall.full .controls a:hover [class^="icon-"] { transform: translateX(-4px); }
.image-wall.full .thumbs { overflow: auto; height: calc(100vh - 50px); padding: 0 20px 100px; }

/* -- form builder (form-builder-form: form de contactos do lote + blocos
   CMS de formulário) — grelha própria col-desktop/tablet/mobile-N (12 avos) */
.form-builder-form .fields-group { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.form-builder-form .fields-group .col { box-sizing: border-box; padding: 0 8px; flex: 0 0 100%; max-width: 100%; }
.form-builder-form .col-desktop-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
.form-builder-form .col-desktop-2 { flex-basis: 16.6666%; max-width: 16.6666%; }
.form-builder-form .col-desktop-3 { flex-basis: 25%; max-width: 25%; }
.form-builder-form .col-desktop-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.form-builder-form .col-desktop-5 { flex-basis: 41.6666%; max-width: 41.6666%; }
.form-builder-form .col-desktop-6 { flex-basis: 50%; max-width: 50%; }
.form-builder-form .col-desktop-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
.form-builder-form .col-desktop-8 { flex-basis: 66.6666%; max-width: 66.6666%; }
.form-builder-form .col-desktop-9 { flex-basis: 75%; max-width: 75%; }
.form-builder-form .col-desktop-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.form-builder-form .col-desktop-11 { flex-basis: 91.6666%; max-width: 91.6666%; }
.form-builder-form .col-desktop-12 { flex-basis: 100%; max-width: 100%; }
.form-builder-form .field { margin-bottom: 14px; }
/* labels inline encolhem os filhos — os campos só enchem a coluna com o label block */
.form-builder-form .field label { display: block; width: 100%; }
.form-builder-form .field label > span { display: block; margin-bottom: 4px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.form-builder-form .field input[type="text"],
.form-builder-form .field input[type="email"],
.form-builder-form .field input[type="tel"],
.form-builder-form .field input[type="number"],
.form-builder-form .field textarea,
.form-builder-form .field select { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--background-color); font-family: var(--primary-font-family); font-size: var(--fs-md); color: var(--color-text); }
.form-builder-form .field textarea { min-height: 120px; resize: vertical; }
.form-builder-form input[type="checkbox"], .form-builder-form input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-color); }
.form-builder-form .checkbox.field-label label span { display: block; margin-bottom: 4px; font-weight: 500; }
.form-builder-form .field.checkbox .checkbox-item { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 8px 0; cursor: pointer; font-size: var(--fs-sm); }
.form-builder-form .privacy-checkbox { margin: 12px 0; }
@media (max-width: 1024px) {
	.form-builder-form .col-tablet-3 { flex-basis: 25%; max-width: 25%; }
	.form-builder-form .col-tablet-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.form-builder-form .col-tablet-6 { flex-basis: 50%; max-width: 50%; }
	.form-builder-form .col-tablet-12 { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
	.form-builder-form .col-mobile-6 { flex-basis: 50%; max-width: 50%; }
	.form-builder-form .col-mobile-12 { flex-basis: 100%; max-width: 100%; }
}

/* validação de formulários (Form_Validator: marca label.validate-error e
   injeta span.error-message no .field) — serve form builder e forms gerais.
   O .field no seletor é necessário: a regra base dos campos usa [type="text"]
   (0-3-1) e ganharia o border-color a um seletor mais fraco. */
.form label.validate-error > span { color: var(--message-error-color); }
.form .field label.validate-error input,
.form label.validate-error input,
.form .field label.validate-error textarea,
.form .field label.validate-error select { border-color: var(--message-error-color) !important; }
.form .error-message { display: block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--message-error-color); }
/* erro da política de privacidade (classes próprias: span.privacy-error) */
.form .privacy-error { display: block; margin: 4px 0 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--message-error-color); }

/* -- listagem de leilões (auction/list.phtml + tabs.phtml) -- */
ul.auctions-type-tabs { display: flex; flex-wrap: wrap; gap: 8px 40px; list-style: none; margin: 0 0 28px; padding: 0; }
ul.auctions-type-tabs li a { display: inline-block; position: relative; padding-bottom: 7px; text-decoration: none; text-transform: uppercase; font-size: var(--fs-lg); color: var(--color-text); }
ul.auctions-type-tabs li:hover a, ul.auctions-type-tabs li.active a { color: var(--primary-color); }
ul.auctions-type-tabs li.active a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-color); }
.auction-list-page h1.auctions-view-title { text-align: center; margin-bottom: 24px; }

/* grelha de cartões de leilões — a GRELHA vem do catálogo (ul.lgrid no
   list.phtml); .auction-grid fica como gancho de tema + estilos de conteúdo */
.auction-grid li .image img { display: block; } /* dimensões/rácio: secção 'rácio de imagem dos cartões' */
.auction-grid .content .title h2 { margin-top: 10px; }
.auction-grid .date-count { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -- .lfilters: componente GENÉRICO de caixas de pesquisa/filtragem
   (sidebar dos leilões, lista de lotes, catálogo …). A classe específica
   (ex. .auction-search-box) fica no HTML como gancho de tema.
   ESTADO INICIAL POR DISPOSITIVO themable por tokens (a registar no
   Theme_Schema — item na lista de implementações):
     --lfilters-desktop / --lfilters-tablet / --lfilters-mobile = block|none
   Default Base Zero: EXPANDIDO em todos os dispositivos (regra do Pedro,
   2026-07-07 — facilita a análise); um tema colapsa definindo `none`.
   O toggle (slideToggle) sobrepõe-se sempre; o misc.js sincroniza o ícone. */
.lfilters { padding: 16px; border: 1px solid var(--color-border); border-radius: 6px; }
.lfilters h2.title { margin-bottom: 0; }
.lfilters .filters-toggle-icon { float: right; font-size: 20px; cursor: pointer; color: var(--link-color); transition: transform .2s; }
.lfilters .filters-toggle-icon.opened { transform: rotate(180deg); }
.lfilters .filters-container { display: var(--lfilters-desktop, block); padding-top: 12px; }
@media (min-width: 601px) and (max-width: 1024px) {
	.lfilters .filters-container { display: var(--lfilters-tablet, block); }
}
@media (max-width: 600px) {
	.lfilters .filters-container { display: var(--lfilters-mobile, block); }
}
/* tudo a 100% da largura; lado-a-lado SÓ em grupos de intervalo */
.lfilters .fields-group { display: block; }
.lfilters .fields-group .col { width: 100%; box-sizing: border-box; }
.lfilters .fields-group.select-interval { display: flex; gap: 8px; }
.lfilters .fields-group.select-interval .col { flex: 1 1 0; min-width: 0; width: auto; }
.lfilters .fields-group { margin-bottom: 12px; }
/* labels inline encolhem os filhos para o conteúdo — a 100% ficam block */
.lfilters .field label { display: block; width: 100%; }
.lfilters .field .title { display: block; margin-bottom: 4px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.lfilters .input-text { width: 100%; padding: 10px 14px; box-sizing: border-box; font-family: var(--primary-font-family); font-size: var(--fs-md); color: var(--color-text); background: var(--background-color); border: 1px solid var(--color-border); border-radius: 4px; }
.lfilters .input-text::placeholder { color: var(--color-text-muted); opacity: 1; }
.lfilters .field.slider { padding: 4px 2px 0; }
.lfilters .field.checkbox label,
.lfilters .field.select-checkbox .options label { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: var(--fs-sm); color: var(--color-text); cursor: pointer; }
.lfilters input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--primary-color); }
.lfilters .field.select-checkbox .options { padding: 2px 0; }
.lfilters .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin-top: 8px; }
.lfilters .actions .filt { font-size: var(--fs-sm); color: var(--link-color); text-decoration: none; cursor: pointer; }
.lfilters .no-filters-message { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.form_search { display: flex; align-items: center; justify-content: center; }

.lot-view { max-width: var(--content-max-width, 1600px); margin: 0 auto; padding: 0; }
.lot-view.full { display: flex; flex-wrap: wrap; gap: 32px; }
.lot-view .lot-images, .lot-view .media { flex: 1 1 560px; min-width: 0; }
.lot-view .lot-info { flex: 1 1 380px; min-width: 300px; }

.lot-view .title .lot-ref { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* galeria */
.base-image { position: relative; background: var(--color-surface); }
.base-image img { display: block; width: 100%; }
.other-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 8px; }
.thumbnails-controllers, .thumbnails-controller { text-align: center; cursor: pointer; }
.thumbs .thumb-inner { cursor: pointer; }
.lot-video-thumb { position: relative; display: block; }
.lot-video-play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-3xl);
	color: var(--color-white);
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

/* valores + caixa de licitação */
.lot-value-info { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; }
.lot-value-info .label { color: var(--color-text-muted); font-size: var(--fs-sm); text-transform: uppercase; }
.lot-value-info .amount { font-weight: 700; }
.lot-value-info .amount.secondary-currency { font-weight: 400; color: var(--color-text-muted); }
.minimum-value-info { font-size: var(--fs-sm); color: var(--color-text-muted); }

.licitation-box {
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-surface);
	color: var(--color-text);
}
.licitation-box .messages { min-height: 0; }
.custom-licitation .input-box { display: flex; align-items: center; gap: 8px; }
.custom-licitation .input-box .currency { font-weight: 600; }
.custom-licitation .input-box input { flex: 1 1 auto; }
.licitation-box .buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.direct-sell-container { margin-top: 10px; }
.direct-sell-price { font-size: var(--fs-xl); font-weight: 700; color: var(--secondary-color); }
.final-price-info { font-weight: 700; }

/* separadores colapsáveis (descrição/detalhes/envio/vendedor) */
.detail-info { border-bottom: 1px solid var(--secondary-color); }
.detail-info h2.tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	margin: 0;
	cursor: pointer;
}
.detail-info .tab-content { display: none; padding: 0 0 16px; }
/* sem regra display em .open: o slideToggle (misc.js) gere o abrir/fechar —
   as duas coisas juntas faziam o 1.º clique abrir e fechar de seguida */
.lot-details table { width: 100%; border-collapse: collapse; }
.lot-details td, .lot-details th { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: left; }

/* relacionados — o .lot-view.full é flex c/ wrap (1704): sem flex-basis 100%
   estes contentores caíam para a linha de baixo mas em shrink-to-fit
   (min-content = um cartão de largura); a fila inteira devolve-lhes o ecrã */
.lot-related-container, .items-related-container, .related { margin-top: 40px; flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box; }

/* produto (loja) — mesmo vocabulário */
.catalog-product-view .product-view { display: flex; flex-wrap: wrap; gap: 32px; }
.catalog-product-view .product-view .price { font-size: var(--fs-xl); font-weight: 700; color: var(--secondary-color); }
.product-short-description { color: var(--color-text-muted); }
.product-ref { font-size: var(--fs-sm); color: var(--color-text-muted); }
.product-actions { margin: 14px 0; }
.catalog-category-view .category-header { padding: 16px 0; }
/* cabeçalho da categoria: texto | imagem lado a lado (a imagem vem do helper
   a 378px); escopado ao header para não tocar noutros .category-info */
.catalog-category-view .category-header .category-info { display: flex; gap: 28px; align-items: flex-start; }
.catalog-category-view .category-header .category-info .content { flex: 1 1 auto; min-width: 0; }
.catalog-category-view .category-header .category-info .image { flex: 0 0 378px; max-width: 40%; }
@media (max-width: 766px) {
	.catalog-category-view .category-header .category-info { flex-direction: column; }
	.catalog-category-view .category-header .category-info .image { flex: none; max-width: 100%; width: 100%; }
}
.catalog-products-wrapper { display: flex; gap: 28px; align-items: flex-start; }
.catalog-products-wrapper > .filters { flex: 0 0 260px; }
.catalog-products-wrapper > div:not(.filters) { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) {
	.catalog-products-wrapper { flex-direction: column; }
	.catalog-products-wrapper > .filters { width: 100%; flex: none; }
}

/* ==== 7. AUCTION LIVE ==================================================== */
/* Estrutura copiada do auction4 (pedido Pedro) e tokenizada; seletores
   adaptados ao markup em divs (.lot-media substitui o td .images legado). */

.auction-live-page { background: var(--background-color); }

/* header próprio da live (grid 3 colunas: logo centrado, menu legal à direita) */
.auction-live-page .header {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 10px;
	background-color: var(--color-black);
	color: var(--color-white);
	box-sizing: border-box;
}
.auction-live-page .header .header-content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-gap: 10px;
	width: 100%;
	max-width: var(--content-max-width, 1600px);
	margin: 0 auto;
	padding: 15px 20px;
	box-sizing: border-box;
	justify-items: center;
}
.auction-live-page .header .logo { width: 100%; padding: 0; }
.auction-live-page .header .menu-container {
	grid-column: 2;
	justify-self: center;
	max-width: none;
	padding: 12px 20px;
	text-align: center;
	background: var(--color-black);
}
.auction-live-page .header .top-menu-container { grid-column: 3; justify-self: end; }
.auction-live-page .header .top-menu { display: block; margin: 0 auto; padding: 5px; text-align: right; list-style: none; }
.auction-live-page .header .top-menu li { display: inline; margin-right: 10px; }
.auction-live-page .header .top-menu li a { color: var(--color-white); text-decoration: none; font-size: var(--fs-sm); }
@media only screen and (max-width: 910px) {
	.auction-live-page .header .top-menu-container { width: 163px; }
	.auction-live-page .header .top-menu { text-align: right; padding: 10px 0; }
}

/* zona do lote atual */
.auction-live-page .lot-info-container {
	box-sizing: border-box;
	max-width: var(--content-max-width, 1600px);
	margin: 0 auto;
	overflow: auto;
	padding: 40px 10px 20px;
}
@media only screen and (max-width: 1324px) {
	.auction-live-page .lot-info-container { padding-top: 50px; }
}
.auction-live-page .lot-info {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 20px 0;
	padding-top: 0;
	overflow: auto;
	height: auto !important; /* anula o height fixo do resizeElements legado */
}
.auction-live-page .lot-media { flex: 1 1 520px; min-width: 0; padding-right: 35px; box-sizing: border-box; }
.auction-live-page .lot-panel { flex: 1 1 360px; min-width: 300px; }
.auction-live-page h2#lot_name { margin-bottom: 0; }
.auction-live-page .lot-info .estimated-value { color: var(--color-text-muted); margin-bottom: 15px; }

/* imagens: thumbs verticais (20%) + imagem principal (80%), injetadas pelo JS */
.auction-live-page .lot-media .images-container { display: flex; }
.auction-live-page .lot-media .base-image { display: block; width: 80%; margin-bottom: 35px; }
.auction-live-page .lot-media .base-image img { display: block; width: 100%; }
.auction-live-page .lot-media .other-images { overflow: hidden; width: 20%; position: relative; }
.other-images .pan { position: relative; top: 0; left: 0; width: 100%; transition: top 0.3s ease; }
.auction-live-page .lot-media .other-images a { display: inline-block; vertical-align: top; margin-bottom: 10px; }
.auction-live-page .lot-media .other-images img { width: 90%; }
.auction-live-page .lot-media .other-images .thumbnails-controllers {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	text-align: center;
	background-color: var(--color-surface);
	color: var(--color-text);
	color: var(--primary-color);
	font-size: var(--fs-2xl);
	cursor: pointer;
}
@media only screen and (max-width: 555px) {
	.auction-live-page .lot-media .other-images .thumbnails-controllers { font-size: var(--fs-lg); }
}
.auction-live-page .lot-media .description {
	font-size: var(--fs-base);
	line-height: 25px;
	color: var(--color-text);
	text-align: justify;
}
.auction-live-page .lot-media .description p { font-size: var(--fs-base); line-height: 24px; }

/* painel de ações */
.auction-live-page .lot-info .actions { border: 1px solid var(--color-border); }
.auction-live-page .lot-info .actions .actions-title {
	padding: 20px;
	background: var(--color-black);
	color: var(--primary-color);
	text-align: center;
	text-transform: uppercase;
	font-size: var(--fs-2xl);
	font-weight: normal;
	letter-spacing: 2.8px;
}
.auction-live-page .lot-info .actions .reserve-amount {
	margin-bottom: 8px;
	padding: 40px 40px 30px;
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
	vertical-align: middle;
	text-transform: uppercase;
	font-size: var(--fs-lg);
	letter-spacing: .9px;
	line-height: 40px;
}
.auction-live-page .lot-info .actions .reserve-amount #reserve_amount { float: right; font-weight: 600; letter-spacing: 0.5px; }

.auction-live-page .lot-info .licitations-container { padding: 30px 40px; }
.auction-live-page .lot-info .licitations { max-height: 128px; overflow: auto; margin-bottom: 20px; }
.auction-live-page .lot-info .licitations ul { list-style: none; margin: 0; padding: 0; }
.auction-live-page .lot-info .licitations li { font-size: var(--fs-base); color: var(--color-text-muted); letter-spacing: 0.4px; font-weight: 400; line-height: 30px; }
.auction-live-page .lot-info .licitations-inside-container h3,
.auction-live-page .lot-info .live-message-container h3 {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 5px;
	color: var(--color-text);
	font-size: var(--fs-base);
	line-height: 20px;
	font-weight: 500;
	letter-spacing: .4px;
	text-transform: none;
}

.auction-live-page .lot-info .live-message-container { padding: 30px 40px; background: var(--color-surface);
	color: var(--color-text); }
.auction-live-page .lot-info .live-message {
	display: none;
	margin-bottom: 20px;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	min-height: 130px;
	max-height: 250px;
	overflow: auto;
}
.auction-live-page .lot-info .live-message ul { list-style: none; margin: 0; padding: 0; }
.auction-live-page .lot-info .live-message li {
	padding: 3px 20px;
	margin-bottom: 10px;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0.4px;
}
.auction-live-page .lot-info .live-message li:first-child { animation: live-message-pulse 1s infinite alternate; padding: 6px 0 0; }
@keyframes live-message-pulse {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

.auction-live-page .lot-info .live-message-container .submit-licitation { display: flex; gap: 10px; align-content: center; justify-content: center; }
.auction-live-page .lot-info .submit-licitation input {
	width: 200px;
	padding: 6px;
	vertical-align: bottom;
	text-align: center;
	font-size: var(--fs-sm);
	letter-spacing: 1.4px;
	line-height: 25px;
	border: 1px solid var(--color-black);
}
/* cores/hover do botão vêm do sistema lbt (tokens button1) — só dimensões aqui */
.auction-live-page .lot-info .submit-licitation button { width: 200px; margin: 0; vertical-align: bottom; }

.auction-live-page .lot-info .messages .message {
	text-align: center;
	margin-bottom: 5px;
	font: var(--message-font);
	text-transform: var(--message-text-transform);
	letter-spacing: var(--message-letter-spacing);
	padding: var(--message-padding);
	border-radius: var(--message-radius);
	border: var(--message-border-width) solid;
	box-sizing: border-box;
	font-size: var(--fs-xs);
}
.auction-live-page .lot-info .messages .message.success { border-color: var(--message-success-border-color); background: var(--message-success-background); color: var(--message-success-color); }
.auction-live-page .lot-info .messages .message.error { border-color: var(--message-error-border-color); background: var(--message-error-background); color: var(--message-error-color); }
.auction-live-page .lot-info .messages .message.warning { border-color: var(--message-warning-border-color); background: var(--message-warning-background); color: var(--message-warning-color); }

/* faixa de lotes (slider) */
.auction-live-page .lots-slider-container {
	position: relative;
	z-index: 9999;
	display: block;
	width: auto;
	max-width: 100%;
	margin: 40px 0;
}
.auction-live-page .lots-slider-container .lots-slider { max-width: 766px; margin: 0 auto; }
@media only screen and (max-width: 1600px) {
	.auction-live-page .lots-slider-container .lots-slider { max-width: 751px; }
}
@media only screen and (max-width: 1324px) {
	.auction-live-page .lots-slider-container .lots-slider { max-width: calc(1324px - 200px); }
}
.auction-live-page .lots-slider-container .lots-slider .arrow { position: absolute; z-index: 999999; }
.auction-live-page .lots-slider-container .lots-slider.slick-slider { position: unset; }
.auction-live-page .lots-slider-container .lot-container .image img { display: inline-block; width: 100%; height: 100%; }

.auction-live-page .lots-slider .lot { text-align: center; cursor: pointer; transition: .2s all; }
.auction-live-page .lots-slider .lot .lot-container { margin: 5px; padding: 5px; }
.auction-live-page .lots-slider .lot.live .lot-container { background: var(--color-black); padding: 10px; }
.auction-live-page .lots-slider .lot .image { position: relative; overflow: hidden; background: var(--color-surface); }
.auction-live-page .lots-slider .lot .image .lot-container-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 99999; }
.auction-live-page .lots-slider .lot .image .live-text.up {
	position: absolute;
	right: 0;
	margin: 5px;
	z-index: 9;
	width: 25px;
	height: 25px;
	background: var(--message-success-color);
	border: 3px solid var(--color-white);
	border-radius: 50%;
}
.auction-live-page .lots-slider .lot .order { display: inline-block; font-weight: normal; color: var(--secondary-color); font-size: var(--fs-base); }
.auction-live-page .lots-slider .lot .status-text,
.auction-live-page .lots-slider .lot .live-text {
	display: none;
	visibility: hidden;
	opacity: 0;
	transition: .2s all;
	color: var(--message-error-color);
	font-weight: 400;
	font-size: var(--fs-base);
	letter-spacing: 1.6px;
}
.auction-live-page .lots-slider .lot .status-text { color: var(--secondary-color); }
.auction-live-page .lots-slider .lot.closed .status-text,
.auction-live-page .lots-slider .lot.live .live-text {
	display: inline-block;
	visibility: visible;
	opacity: 1;
	width: 100%;
	height: 43px;
	align-content: center;
	background: #0000008f; /* scrim preto 56% deliberado */
	color: var(--color-white);
}
.auction-live-page .lots-slider .lot.closed .live-text { display: none !important; }
.auction-live-page .lots-slider .lot.closed .status-text span,
.auction-live-page .lots-slider .lot.live .live-text span { color: var(--secondary-color); }

@media only screen and (max-width: 555px) {
	.auction-live-page .lot-info .actions .reserve-amount,
	.auction-live-page .lot-info .licitations-container,
	.auction-live-page .lot-info .live-message-container { padding: 15px 20px 16px; }
	.auction-live-page .lot-info .submit-licitation input,
	.auction-live-page .lot-info .submit-licitation button { width: 142px; }
	.auction-live-page .lot-info .live-message { min-height: 80px; }
	.auction-live-page .lot-info .licitations-inside-container { padding: 15px 22px; }
}

/* mobile: galeria a toda a largura — imagem principal primeiro e thumbs em
   fila horizontal com swipe nativo (os controlos verticais deixam de fazer
   sentido; o .pan em static ignora o offset top do JS) */
@media only screen and (max-width: 766px) {
	.auction-live-page .lot-media { padding-right: 0; }
	.auction-live-page .lot-media .images-container { flex-direction: column-reverse; }
	.auction-live-page .lot-media .base-image { width: 100%; margin-bottom: 12px; }
	/* fila de thumbs em flex: itens fixos a 90px, sem wrap possível, swipe nativo */
	.auction-live-page .lot-media .other-images {
		display: flex;
		gap: 8px;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px; /* respiro para a scrollbar */
		box-sizing: border-box;
	}
	.auction-live-page .lot-media .other-images .pan,
	.auction-live-page .lot-media .other-images a { position: static; flex: 0 0 90px; width: 90px; margin: 0; }
	.auction-live-page .lot-media .other-images img { display: block; width: 100%; }
	.auction-live-page .lot-media .other-images .thumbnails-controllers { display: none; }
}

/* ==== 8. CLIENTE ========================================================= */

/* a montagem é por IRMÃOS no .wrapper da página CMS (after_blocks =
   customer/top.phtml + vista) — o menu de conta é uma barra horizontal
   acima do conteúdo, coerente com as .tabs-customer do login */
.customer-content { padding: 50px 0; }
.customer-content > *:first-child { margin-top: 0; }

.customer-welcome { font-weight: 600; margin-bottom: 10px; }
.customer-links { margin: 20px 0 0; border-bottom: 1px solid var(--color-border); }
.customer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.customer-links li a { display: block; padding: 10px 16px; color: var(--color-text); }
.customer-links li.active { border-bottom: 3px solid var(--secondary-color); }
.customer-links li.active a, .customer-links li a:hover { color: var(--link-hover-color); }

/* tabs de autenticação */
.tabs-customer { display: flex; justify-content: center; gap: 4px; margin: 20px 0 0; }
.tabs-customer button.tablinks {
	padding: 12px 22px;
	font: var(--button-font);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	color: var(--color-text);
}
.tabs-customer button.tablinks.current {
	background: var(--primary-color);
	color: var(--color-white);
}
.tabcontent-customer { display: none; max-width: 760px; margin: 0 auto; padding: 24px 20px; background: var(--background-color); }
.tabcontent-customer.current { display: block; }
.customer-login .page-link, .customer-login a { color: var(--link-color); }

/* popup de login (fancybox) */
.customer-login.popup { max-width: 420px; padding: 10px; }
.customer-login.popup .page-title { font: var(--title3-desktop-font); margin-bottom: 14px; }

/* moradas (cliente + checkout) */
.order-addresses-list { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 24px; }
.order-addresses-list-item { flex: 1 1 280px; max-width: 380px; }
.order-addresses-list-item-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-surface);
	color: var(--color-text);
}
.order-adresses-list-item-button-container { margin-top: 10px; text-align: right; }

/* encomendas */
.order-status-info { margin-bottom: 14px; }
.payment-info .info { padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; }
.licitations-history .datagrid { margin-top: 10px; }

/* ==== 9. CARRINHO / CHECKOUT ============================================= */

#cart-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.cart-page-empty-message { padding: 40px 0; text-align: center; color: var(--color-text-muted); }
/* métodos de envio/pagamento: a row toda é clicável (JS no cart.phtml) */
#cart-shipping-methods-list table tr, #payment-methods-list table tr { cursor: pointer; }
/* a media do item vem direta no <a> (getBaseMediaTag, cache 400px) — limitar;
   o !important vence o style inline do thumb de vídeo do helper */
#cart-items-table td img, #cart-items-table td video { width: 200px !important; height: auto; }
#cart-items-table td .lot-video-thumb { width: 200px !important; }
#cart-items-table td a { display: flex; align-items: center; gap: 16px; color: inherit; }
#cart-container .actions { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0; }
#cart-shipping-methods-list, #payment-methods-list { margin-bottom: 20px; }
.cart-submit-button { text-align: right; margin-top: 16px; }

/* ==== 10. VOCABULÁRIO DOS BLOCOS (twigs BD + fallbacks .phtml) =========== */
/* Estrutura partilhada e degradação segura; o visual fino de cada bloco vive
   no css_<variante> do próprio bloco (blocks.css). */

/* categorias / experts (grelhas de cartões) */
/* categorias de leilão — o .experts-content NÃO é grelha (o dos experts é o
   ul.experts-grid, vocabulário mais abaixo). A grelha própria serve o twig
   (ul.lgrid > li) e o fallback .phtml (a.category direto no wrapper). */
.categories-grid { --cols: 4; --item-min: 220px; --gap: 20px; }
.categories-grid:not(.slick-initialized) {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(var(--item-min, 220px), 1fr));
	gap: var(--gap, 20px);
}
@media (max-width: 900px) {
	.categories-grid:not(.slick-initialized) { grid-template-columns: repeat(auto-fill, minmax(var(--item-min, 220px), 1fr)); }
}
.categories-grid .category { position: relative; min-width: 0; display: block; text-decoration: none; }
.categories-grid .category img { display: block; width: 100%; }
.categories-grid .category h2, .categories-grid .category .title { margin: 8px 0 0; }
.categories-list > li { border-bottom: 1px solid var(--color-border); padding: 14px 0; margin-bottom: 0; align-items: center; }
.categories-list > li:last-child { border-bottom: none; }
.categories-list .lmedia { flex: 0 0 auto; }
.categories-list .lmedia img { width: 150px; height: auto; }
.categories-list .category-info h2 { margin: 0; }
.categories-list .category-description { margin: 4px 0 0; color: var(--color-text-muted); }
/* fallback .phtml da lista (markup bootstrap-like sem utilities) */
.categories-list .category-item { display: flex; align-items: center; gap: 16px; }
.categories-list .category-item .category-image img { width: 150px; display: block; }

/* counter — elementos ordenáveis (imagem/título/descrição/número) num flex;
   a contagem animada é o init genérico do misc.js (.counter-number[data-to]) */
.counter { display: flex; gap: 8px; }
.counter-vertical { flex-direction: column; align-items: center; text-align: center; }
.counter-horizontal { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 16px; }
.counter .counter-number { font: var(--title2-desktop-font); }
.counter .counter-title { font-weight: 600; }
.counter .counter-description { color: var(--color-text-muted); }
.counter .counter-image { display: block; }

/* artigos (grid/list/slider/tabs/collapsable) */
.block-articles-grid .articles:not(.slick-initialized), .articles-grid:not(.slick-initialized) { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.articles-grid { --item-min: 260px; --gap: 20px; } /* knobs p/ quando vem via .lgrid */
.article { min-width: 0; }
.article-header img, .article-image img { display: block; width: 100%; }
.article-image { overflow: hidden; }
.article-content { padding: 8px 0; }
.article-info { color: var(--color-text-muted); font-size: var(--fs-sm); }
.article-link { margin-top: 6px; }
.tabs-titles { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); }
.tabs-titles > * { padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs-titles > .active { border-bottom-color: var(--primary-color); font-weight: 600; }
/* estado inicial das páginas: o JS alterna com jQuery .hide()/.show() (inline),
   mas a 1.ª pintura depende destas duas regras */
.tabs .tab-page { display: none; padding: 14px 0; }
.tabs .tab-page:first-child { display: block; }
/* painéis extensíveis (.collapsable-pannels) — utility completa: estado
   inicial fechado (dd) + chevron; o misc.js faz o slideToggle */
.collapsable-pannels .collapsable-tab, .collapsable-tab { border-bottom: 1px solid var(--color-border); }
.collapsable-pannels dt {
	color: var(--link-color);
	padding: 14px 0;
	margin-bottom: 0;
	cursor: pointer;
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
}
.collapsable-pannels dt p {
	display: inline-block;
	margin: 0;
	font-weight: bold;
	max-width: calc(100% - 35px);
	transition: 0.3s all;
}
/* chevron = o span FILHO DIRETO do dt; os spans dentro do <p> (kicker,
   badge) não são seta — o seletor descendente rodava-os/floatava-os */
.collapsable-pannels dt > span {
	float: right;
	margin: 0;
	font-size: var(--fs-lg);
	transition: 0.3s all;
	color: var(--primary-color);
}
.collapsable-pannels dt.open > span { transform: rotate(-180deg); }
.collapsable-pannels dt > span::before { margin: 0; }
.collapsable-pannels dd { padding: 15px 22px; display: none; }
.collapsable-pannels img { max-width: 100%; }

/* vídeo (modal dos twigs + fallback phtml) */
.video-thumb, .video .video-container { position: relative; cursor: pointer; }
.player-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--fs-3xl);
	color: var(--color-white);
}
/* twig: o JS alterna .show e ESPERA transitionend para pausar o vídeo —
   tem de ser opacity/pointer-events, display:none nunca dispararia a transição */
.modal-video {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 1000000;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.modal-video.show { opacity: 1; pointer-events: all; }
/* fallback phtml (demo): sem mecanismo .show próprio, fica escondido */
.video .modal, #videoModal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000000;
	background: rgba(0, 0, 0, 0.75);
}
.modal-video-content, .video .modal .modal-content, #videoModal .modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(900px, 94vw);
}
.close-video-modal, .video .modal .close, #videoModal .close {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: var(--fs-2xl);
	color: var(--color-white);
	cursor: pointer;
}

/* ---- CATÁLOGO DE UTILITIES (.l*, à moda da casa: lbt/ltitle) ----------
   Estrutura genérica HARDCODED; a classe específica ao lado (ex.
   "lgrid news-grid") serve os ajustes finos e os deltas do tema.
   Knobs por custom property: --cols (n.º colunas; sem ela auto-fill),
   --item-min (largura mínima do cartão), --gap.
   JS: .lslider tem init genérico no misc.js (data-columns/data-autoplay/
   data-speed); .tabs e .collapsable-pannels são as utilities de tabs e
   painéis — handlers globais no misc.js. .modal-video é a utility de
   modal (mecanismo .show acima). */
.lgrid, .llist, .lslider { list-style: none; margin: 0; padding: 0; }

/* .lempty: estado vazio normalizado ("não há dados") — usar SEMPRE com uma
   classe específica ao lado para refinar (ex. lempty auction-grid-empty).
   flex:1 para ocupar a largura disponível ao lado de sidebars. */
.lempty { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 48px 24px; text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: 6px; }

/* headings dentro das utilities: escala de cartão por omissão, SEJA QUAL FOR
   o nível (h2, h3, …) — o bootstrap (vendor) estiliza h1-h6 por elemento e
   desvirtuava os cartões. O :where() zera a especificidade do argumento,
   pelo que um .ltitleN explícito (theme.css, carregado depois) vence no
   desempate por ordem. */
.lgrid :where(h1, h2, h3, h4, h5, h6),
.llist :where(h1, h2, h3, h4, h5, h6),
.lrow :where(h1, h2, h3, h4, h5, h6),
.lslider :where(h1, h2, h3, h4, h5, h6),
.lot-list li.lot :where(h1, h2, h3, h4, h5, h6) { font: 500 var(--fs-md)/1.35 var(--primary-font-family); margin: 0 0 6px; }
.lgrid :where(h1, h2, h3, h4, h5, h6) a,
.llist :where(h1, h2, h3, h4, h5, h6) a,
.lrow :where(h1, h2, h3, h4, h5, h6) a,
.lslider :where(h1, h2, h3, h4, h5, h6) a,
.lot-list li.lot :where(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; }
.lgrid :where(h1, h2, h3, h4, h5, h6) a:hover,
.llist :where(h1, h2, h3, h4, h5, h6) a:hover,
.lrow :where(h1, h2, h3, h4, h5, h6) a:hover,
.lslider :where(h1, h2, h3, h4, h5, h6) a:hover,
.lot-list li.lot :where(h1, h2, h3, h4, h5, h6) a:hover { color: var(--card-title-hover-color, currentColor); opacity: .75; }
.lgrid:not(.slick-initialized) {
	display: grid;
	grid-template-columns: repeat(var(--cols, auto-fill), minmax(var(--item-min, 260px), 1fr));
	gap: var(--gap, 24px);
}
.lgrid > * { min-width: 0; }
@media (max-width: 900px) {
	.lgrid:not(.slick-initialized) { grid-template-columns: repeat(auto-fill, minmax(var(--item-min, 240px), 1fr)); }
}
/* .lrow = a mesma linha media+conteúdo fora de listas (miolo de tabs,
   painéis extensíveis, …) */
.llist > li, .lrow { display: flex; gap: 24px; align-items: flex-start; }
.llist > li { margin-bottom: 40px; }
.llist .lmedia, .lrow .lmedia { flex: 0 0 min(400px, 40%); }
.llist .lmedia img, .lrow .lmedia img { display: block; width: 100%; }
.llist .lbody, .lrow .lbody { flex: 1; min-width: 0; }
@media (max-width: 766px) {
	.llist > li, .lrow { flex-direction: column; }
	.llist .lmedia, .lrow .lmedia { flex-basis: auto; width: 100%; }
}
.lslider li { padding: 0 12px; box-sizing: border-box; }

/* ==== MOTION — micro-interações dos cartões (tokens do grupo motion) =====
   Regras transversais: SÓ transform/opacity/color/background animam (GPU, sem
   reflow — nunca larguras/alturas/margens). Semântica "neutro = desligado"
   (zoom 1, lift 0px, scrim transparent, duration 0s) para o motor de temas
   poder desativar cada efeito por token. O prefers-reduced-motion no fim zera
   os tokens (styles.css carrega DEPOIS do theme.css ⇒ a override vence). */

/* transições base: mudanças de cor/fundo/borda deixam de ser secas em links
   e controlos de formulário (os botões lbt têm a sua própria regra, já sobre
   os mesmos tokens). Elementos com transition própria mais específica (setas,
   painéis da nav, drawers) mantêm-na — a cascata resolve. */
a,
input, select, textarea {
	transition:
		color var(--motion-duration, .25s) var(--motion-ease, ease),
		background-color var(--motion-duration, .25s) var(--motion-ease, ease),
		border-color var(--motion-duration, .25s) var(--motion-ease, ease),
		opacity var(--motion-duration, .25s) var(--motion-ease, ease);
}

/* elevação: o cartão sobe no hover; a sombra vai na MOLDURA da imagem (os
   cartões lgrid não têm superfície própria — uma sombra no li inteiro
   flutuaria à volta de texto solto). llist fica de fora do lift (filas
   largas a levitar leem-se mal); leva só zoom + scrim. */
.lgrid > li, .categories-grid .category {
	transition: transform var(--motion-duration, .25s) var(--motion-ease, ease);
}
.lgrid > li:hover, .categories-grid .category:hover {
	transform: translateY(var(--card-hover-lift, -4px));
}

/* molduras de imagem dos cartões: clipping do zoom + âncora do scrim.
   (.lot-preview .image já era relative+hidden — idempotente.) */
.lgrid .image, .llist .image, .lgrid .lmedia, .llist .lmedia,
.categories-grid .category .image {
	position: relative;
	overflow: hidden;
}
.lgrid .image, .lgrid .lmedia, .categories-grid .category .image {
	transition: box-shadow var(--motion-duration, .25s) var(--motion-ease, ease);
}
.lgrid > li:hover .image, .lgrid > li:hover .lmedia,
.categories-grid .category:hover .image {
	box-shadow: var(--card-hover-shadow, 0 10px 24px rgba(0, 0, 0, 0.12));
}

/* zoom da imagem dentro da moldura */
.lgrid .image img, .llist .image img, .lgrid .lmedia img, .llist .lmedia img,
.categories-grid .category .image img {
	transition: transform var(--motion-duration, .25s) var(--motion-ease, ease);
}
.lgrid > li:hover .image img, .llist > li:hover .image img,
.lgrid > li:hover .lmedia img, .llist > li:hover .lmedia img,
.categories-grid .category:hover .image img {
	transform: scale(var(--card-hover-zoom, 1.05));
}
/* o mosaico de leilões (várias imagens em table-cells, sem clipping por img)
   fica fora do zoom — regra DEPOIS da de zoom, mesma especificidade ⇒ vence */
.auction-grid li .image:has(.auctions-item-wrapper) img { transform: none; }

/* scrim: véu subtil sobre a imagem no hover. ::after pinta por cima do img
   (ordem DOM) e por baixo dos overlays com z-index (coração de favoritos). */
.lgrid .image::after, .llist .image::after,
.lgrid .lmedia::after, .llist .lmedia::after,
.categories-grid .category .image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--card-hover-scrim, rgba(0, 0, 0, 0.08));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-duration, .25s) var(--motion-ease, ease);
}
.lgrid > li:hover .image::after, .llist > li:hover .image::after,
.lgrid > li:hover .lmedia::after, .llist > li:hover .lmedia::after,
.categories-grid .category:hover .image::after { opacity: 1; }

/* entrada escalonada das grelhas (1º paint): cada cartão entra em fade+subida
   com um atraso em cascata (stagger × índice, primeiros 12; seguintes entram
   todos com o atraso máximo). CSS puro — corre uma vez no load da página; a
   variante scroll-reveal (IntersectionObserver) fica para uma 2ª ronda.
   fill backwards: o cartão espera invisível pelo seu atraso. Desligar =
   grid-enter-duration 0s + grid-enter-stagger 0s. Sliders (slick) excluídos:
   o slick reestrutura os li e os clones ficariam a piscar. Enquanto a animação
   corre, o transform dela ganha ao lift de hover — irrelevante (<1s). */
@keyframes wof-grid-enter {
	from { opacity: 0; transform: translateY(var(--grid-enter-distance, 12px)); }
	to   { opacity: 1; transform: translateY(0); }
}
.lgrid:not(.slick-initialized) > li,
.llist > li,
.categories-grid:not(.slick-initialized) > .category {
	animation: wof-grid-enter var(--grid-enter-duration, 0s) var(--motion-ease, ease) backwards;
	animation-delay: calc(var(--grid-enter-stagger, 0s) * var(--wof-enter-i, 12));
}
.lgrid:not(.slick-initialized) > li:nth-child(1),
.llist > li:nth-child(1),
.categories-grid:not(.slick-initialized) > .category:nth-child(1) { --wof-enter-i: 0; }
.lgrid:not(.slick-initialized) > li:nth-child(2),
.llist > li:nth-child(2),
.categories-grid:not(.slick-initialized) > .category:nth-child(2) { --wof-enter-i: 1; }
.lgrid:not(.slick-initialized) > li:nth-child(3),
.llist > li:nth-child(3),
.categories-grid:not(.slick-initialized) > .category:nth-child(3) { --wof-enter-i: 2; }
.lgrid:not(.slick-initialized) > li:nth-child(4),
.llist > li:nth-child(4),
.categories-grid:not(.slick-initialized) > .category:nth-child(4) { --wof-enter-i: 3; }
.lgrid:not(.slick-initialized) > li:nth-child(5),
.llist > li:nth-child(5),
.categories-grid:not(.slick-initialized) > .category:nth-child(5) { --wof-enter-i: 4; }
.lgrid:not(.slick-initialized) > li:nth-child(6),
.llist > li:nth-child(6),
.categories-grid:not(.slick-initialized) > .category:nth-child(6) { --wof-enter-i: 5; }
.lgrid:not(.slick-initialized) > li:nth-child(7),
.llist > li:nth-child(7),
.categories-grid:not(.slick-initialized) > .category:nth-child(7) { --wof-enter-i: 6; }
.lgrid:not(.slick-initialized) > li:nth-child(8),
.llist > li:nth-child(8),
.categories-grid:not(.slick-initialized) > .category:nth-child(8) { --wof-enter-i: 7; }
.lgrid:not(.slick-initialized) > li:nth-child(9),
.llist > li:nth-child(9),
.categories-grid:not(.slick-initialized) > .category:nth-child(9) { --wof-enter-i: 8; }
.lgrid:not(.slick-initialized) > li:nth-child(10),
.llist > li:nth-child(10),
.categories-grid:not(.slick-initialized) > .category:nth-child(10) { --wof-enter-i: 9; }
.lgrid:not(.slick-initialized) > li:nth-child(11),
.llist > li:nth-child(11),
.categories-grid:not(.slick-initialized) > .category:nth-child(11) { --wof-enter-i: 10; }
.lgrid:not(.slick-initialized) > li:nth-child(12),
.llist > li:nth-child(12),
.categories-grid:not(.slick-initialized) > .category:nth-child(12) { --wof-enter-i: 11; }

/* quem pede menos movimento leva o site quieto: zera os tokens de movimento
   (cobre transições, transforms de hover E a entrada escalonada num só sítio) */
@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-duration: 0s;
		--card-hover-zoom: 1;
		--card-hover-lift: 0px;
		--grid-enter-duration: 0s;
		--grid-enter-stagger: 0s;
	}
}

/* ---- semântica de conteúdo dos artigos (Fase 1: kicker/badge/date/icon/
   summary) — estrutura comum a todos os tipos de bloco que a adotem;
   branding via tokens. */
.article-kicker {
	display: block; /* linha própria mesmo quando é <span> (dt dos painéis) */
	margin: 0 0 4px;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
}
.article-badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 10px;
	font-size: var(--fs-xs);
	line-height: 1.6;
	border: 1px solid var(--color-border);
	border-radius: var(--button-radius);
	background: var(--color-surface);
	/* cor fixa ao token de texto: a pill tem fundo claro próprio, não pode
	   herdar o branco de .tone-light */
	color: var(--color-text);
}
.article-date { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }
.article-icon { font-size: var(--fs-3xl); line-height: 1; color: var(--primary-color); }
.article-summary { margin: 8px 0 0; }

/* destaque (intenção "featured"): cartão maior na grelha; em ecrãs
   estreitos (1 coluna) volta ao normal para não rebentar a grelha */
.lgrid:not(.slick-initialized) > .featured { grid-column: span 2; }
@media (max-width: 600px) {
	.lgrid:not(.slick-initialized) > .featured { grid-column: auto; }
}

/* media_position (intenção declarada por artigo; 'auto' é resolvido no twig
   — zigzag nas listas, esquerda em tabs/painéis) */
.llist > li.media-right, .lrow.media-right { flex-direction: row-reverse; }
.llist > li.media-top, .lrow.media-top { flex-direction: column; }
.llist > li.media-top .lmedia, .lrow.media-top .lmedia { flex-basis: auto; width: 100%; }
/* média no topo em largura total: recorta em faixa (o ponto focal decide o
   enquadramento) em vez de deixar a imagem crescer ao tamanho natural */
.llist > li.media-top .lmedia img, .lrow.media-top .lmedia img,
.llist > li.media-top .lmedia video, .lrow.media-top .lmedia video {
	max-height: 340px;
	object-fit: cover;
}
.media-background { position: relative; overflow: hidden; }
.media-background .lmedia, .media-background .article-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.media-background .lmedia img, .media-background .article-image img,
.media-background .lmedia video, .media-background .article-image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-background .lbody, .media-background .article-content {
	position: relative;
	z-index: 1;
	/* respiro: o corpo assenta diretamente sobre a imagem */
	padding: 16px 20px;
	/* o overlay não pode engolir os cliques da média por baixo (controlos
	   de vídeo, link do vídeo) — só os links do corpo são clicáveis */
	pointer-events: none;
}
.media-background .lbody a, .media-background .article-content a { pointer-events: auto; }
/* .article-content também é o wrapper INTERNO do conteúdo (dentro de
   .lbody/.article-info) — o padding do overlay é só para o nível de topo,
   senão o corpo fica desalinhado do resto (padding em dobro) */
.media-background .lbody .article-content,
.media-background .article-content .article-content { padding: 0; }

/* vídeo da média dos artigos (.article-video > video) — mesmo contrato de
   dimensionamento das imagens; o ponto focal também se aplica */
.article-video video, .lmedia video { display: block; width: 100%; height: auto; }
.lmedia video, .article-image video { object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* tone (intenção "texto claro/escuro sobre a média") — mapeia para tokens,
   nunca hexes. O compilador de temas põe cor DIRETA nos descendentes
   (.block-content p, .article-info, etc.), que ganha à herança — por isso
   o tom recolore TODOS os descendentes com âmbito .block-content
   (0-2-0 > 0-1-1). A .article-badge fica de fora: é uma pill com fundo
   claro próprio e mantém a sua cor de texto. */
.tone-light { color: var(--color-white); }
.block-content .tone-light,
.block-content .tone-light *:not(.article-badge) { color: var(--color-white); }
.tone-dark { color: var(--color-black); }
.block-content .tone-dark,
.block-content .tone-dark *:not(.article-badge) { color: var(--color-black); }

/* ponto focal (article_image.focal_x/y em %): os twigs põem --focal-x/--focal-y
   no img; sem crop (object-fit) a propriedade é inócua */
.lmedia img, .article-image img { object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* sliders (slick) — setas comuns a todos os sliders de blocos; os banners
   têm overrides próprios mais abaixo. O vendor slick.css esconde as setas
   (font-size:0 + color:transparent, para os glifos font-family "slick") —
   as nossas usam ícones fontello no span interior, por isso repõe-se tudo. */
.slick-slider { position: relative; overflow: visible !important; }
/* calhas laterais: as setas vivem fora do conteúdo, nunca por cima dele */
.lslider.slick-initialized { padding-left: 36px; padding-right: 36px; }
.slick-slider .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
	width: auto;
	height: auto;
	line-height: 1;
	z-index: 2;
	cursor: pointer;
	font-size: var(--fs-2xl);
	color: var(--color-text);
}
.slick-slider .slick-prev { left: 0; }
.slick-slider .slick-next { right: 0; }

/* notícias / blog — knobs da família + visual fino; a estrutura vem do
   .lgrid/.llist do twig (o fallback phtml usa markup próprio block-news) */
.news-grid { --item-min: 280px; }
.blog-posts { --item-min: 280px; } /* grelha vem do .lgrid (ul.lgrid blog-posts) */
.news-grid > li, .news-grid .new, .blog-posts .item { min-width: 0; }
.news-grid .image img, .blog-items .image img { display: block; width: 100%; }
.news-grid .date, .news-list .date, .blog-posts .date { font-size: var(--fs-sm); color: var(--color-text-muted); }
.news-grid .intro, .news-list .intro, .news-grid .short-description, .blog-posts .intro, .blog-items .intro { color: var(--color-text-muted); }
.news-grid .action, .news-grid .actions { margin-top: 12px; }
/* cartões da página /news (ul.lgrid news-grid, fallback phtml) — botão
   alinha em rodapé por flex, como nos blog-items */
.news-grid > li.new { display: flex; flex-direction: column; }
.news-grid > li.new .new-content { flex: 1; display: flex; flex-direction: column; }
.news-grid > li.new .actions { margin-top: auto; padding-top: 16px; }
.news-grid > li.new .image { display: block; margin-bottom: 12px; }
.news-grid > li.new .date { margin: 4px 0 8px; }

/* vista de notícia (news/view) — coluna de leitura centrada */
.news-view { }
.news-view .news-view-header { margin-bottom: 16px; }
.news-view .news-view-title { margin-bottom: 4px; }
.news-view .date { font-size: var(--fs-sm); color: var(--color-text-muted); }
.news-view .image img { display: block; width: 100%; height: auto; }
.news-view .news-view-content { margin: 20px 0; }
.news-view .actions { margin-top: 24px; }
/* bloco blog (.lgrid blog-items) — cartões flex-coluna: os botões alinham
   em rodapé por CSS (substitui o equalize de alturas por JS) */
.blog-items { --cols: 4; }
.blog-items > li { display: flex; flex-direction: column; }
.blog-items .description { flex: 1; display: flex; flex-direction: column; }
.blog-items .action { margin-top: auto; padding-top: 20px; text-align: right; }
/* páginas do blog (blog/list + blog/post): sidebar de categorias/arquivo
   (left.phtml) + conteúdo */
.blog-wrapper { display: flex; gap: 28px; align-items: flex-start; }
.blog-wrapper .blog-left { flex: 0 0 220px; }
.blog-wrapper .blog-posts, .blog-wrapper .blog-post, .blog-wrapper .lempty { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) {
	.blog-wrapper { flex-direction: column; }
	.blog-wrapper .blog-left { width: 100%; flex: none; }
}
.blog-left .blog-categories { list-style: none; margin: 0 0 24px; padding: 0; }
.blog-left .blog-categories li { margin-bottom: 6px; }
.blog-left .blog-categories a, .blog-left .blog-categories .link { color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); }
.blog-left .blog-categories a:hover { color: var(--primary-color); }
.blog-left .blog-categories li.active > a { font-weight: 700; color: var(--primary-color); }
.blog-left .blog-categories ul { list-style: none; margin: 4px 0 0; padding-left: 18px; }
/* cartões da lista (ul.lgrid blog-posts) — botão em rodapé, como as notícias */
.blog-posts > li.item { display: flex; flex-direction: column; }
.blog-posts > li.item .post-info { flex: 1; display: flex; flex-direction: column; }
.blog-posts > li.item .actions { margin-top: auto; padding-top: 16px; }
.blog-posts > li.item .image { display: block; margin-bottom: 12px; }
.blog-posts .post-title { margin: 0 0 6px; }
/* página do post */
.blog-post .blog-post-title { margin: 16px 0 8px; }
.blog-post .post-info { margin-bottom: 16px; }
.blog-post .post-info .intro { color: var(--color-text-muted); margin-bottom: 16px; }
.blog-post .post-content { margin-bottom: 20px; }
.blog-post .post-content.left .images { float: left; max-width: 45%; margin: 0 20px 10px 0; }
.blog-post .post-content.right .images { float: right; max-width: 45%; margin: 0 0 10px 20px; }
.blog-post .post-content .images img { display: block; width: 100%; height: auto; margin-bottom: 10px; }
@media (max-width: 600px) {
	.blog-post .post-content.left .images, .blog-post .post-content.right .images { float: none; max-width: 100%; margin: 0 0 12px; }
}
.blog-post .next-previous { display: flex; justify-content: space-between; margin-top: 24px; }
.blog-post .next-previous a { text-decoration: none; color: var(--color-text); }
.blog-post .next-previous a:hover { color: var(--primary-color); }

/* link-grid (tile escuro: texto+botão | imagem de fundo lado a lado —
   estrutura do a4 em flex; sem o fundo preto o h2 branco ficava invisível) */
.link-grid { position: relative; }
.static-block.link-grid { display: flex; align-items: stretch; background: var(--color-black); }
.static-block.link-grid .info { flex: 1 1 51%; min-width: 0; min-height: 160px; padding: 36px 40px; box-sizing: border-box; }
.static-block.link-grid .info .lbt { margin-top: 12px; }
.link-grid .info h2 { color: var(--color-white); }
.link-grid .info p { color: var(--color-white); }
.link-grid .image { background-size: cover; background-position: center; min-height: 160px; }
.static-block.link-grid .image { flex: 1 1 49%; }
@media (max-width: 766px) {
	.static-block.link-grid { flex-direction: column; }
	.static-block.link-grid .info { padding: 24px 20px; }
}

/* slider de leilões (block-auction-grid) — colagem de lotes + tipografia.
   Estrutura do slider (colunas/goteiras/calhas/setas) vem do .lslider. */
.block-auction-grid .item { text-align: left; margin-bottom: 30px; }
/* colagem imagem principal (75%) + mosaico de lotes (25%) — partilhada pelo
   bloco twig e pelos cartões da categoria de leilões (auction/category/
   auctions.phtml); na categoria o :has ativa o layout só quando há mosaico
   (as listas de leilões sem mosaico mantêm a imagem simples) */
.block-auction-grid .item .image,
.auction-grid li .image:has(.auctions-item-wrapper) { display: table; position: relative; height: auto; overflow: hidden; }
.block-auction-grid .item .image > a,
.auction-grid li .image:has(.auctions-item-wrapper) > a.img { display: table-cell; width: 75%; }
.block-auction-grid .auctions-item-wrapper,
.auction-grid li .image .auctions-item-wrapper { display: table-cell; vertical-align: top; height: 100%; }
.block-auction-grid .auctions-item-lots-list,
.auction-grid li .image .auctions-item-lots-list { display: table; height: 100%; margin: 0; padding: 0; list-style: none; font-size: 0; }
.block-auction-grid .auctions-item-lots-list li,
.auction-grid li .image .auctions-item-lots-list li { cursor: pointer; display: block; font-size: 0; line-height: 0; position: relative; width: 100%; height: 33.33%; margin: 0; padding: 0; box-sizing: border-box; }
.auction-grid li .image .auctions-item-lots-list li img,
.auction-grid li .image .auctions-item-lots-list li video { display: block; width: 100%; height: 100%; object-fit: cover; }
.auctions-item-lots-counter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); /* scrim deliberado */ }
.auctions-item-lots-counter span { color: var(--color-white); font-size: var(--fs-base); line-height: normal; }
.block-auction-grid h2 a, .block-auction-grid h4 a { font-size: 18px; line-height: 20px; margin: 10px 0 20px; font-weight: 500; font-family: var(--primary-font-family); color: var(--ul-desktop-color); text-decoration: none; display: block; }
.block-auction-grid .date-count { color: var(--ul-desktop-color); display: block; font-size: 16px; font-family: var(--primary-font-family); }
.block-auction-grid .date-count p { margin-bottom: 0; }

/* experts (grid via .lgrid, lista via .llist, slider via .lslider) —
   o fallback phtml também usa ul.lgrid agora; a grelha própria saiu */
.experts-grid { --cols: 6; --item-min: 140px; --gap: 24px; text-align: center; }
.experts-grid li img, .experts-slide li img { max-width: 100%; }
.experts-grid .expert { display: block; color: inherit; text-decoration: none; text-align: left; }
.experts-grid .expert-name { margin: 8px 0 2px; }
.experts-grid .expert:hover .expert-name { color: var(--primary-color); }
.experts-grid .category { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* detalhe de especialista (auction/experts/details.phtml, /pt/expert/detail) */
.expert-info .block-content { display: flex; gap: 40px; align-items: flex-start; padding: 28px 0; }
.expert-info .block-content .info { flex: 1 1 auto; min-width: 0; }
.expert-info .block-content .image { flex: 0 0 320px; }
.expert-info .block-content .image img { display: block; width: 100%; height: auto; }
.expert-info .specialty { color: var(--color-text-muted); }
.expert-info .catch-phrase { margin: 12px 0; font-size: var(--fs-xl); font-weight: 500; }
.expert-info .description { color: var(--color-text-muted); }
@media (max-width: 766px) {
	.expert-info .block-content { flex-direction: column; }
	.expert-info .block-content .image { flex: none; width: 100%; max-width: 400px; }
}
.expert-lots > h2 { margin: 28px 0 4px; }
.experts-list > li { border-bottom: 1px solid var(--color-border); padding: 20px 0; margin-bottom: 0; align-items: center; }
.experts-list > li:last-child { border-bottom: none; }
.experts-list .lmedia { flex: 0 0 auto; }
.experts-list .lmedia img { width: 120px; height: auto; }
.experts-list .category { margin: 0; color: var(--color-text-muted); }
@media (max-width: 766px) {
	.experts-list > li { text-align: center; }
	.experts-list .lmedia img { width: 90px; }
}

/* próximo leilão (block-auction-next; .lrow = imagem + conteúdo) */
.auction-next .tag { display: inline-block; padding: 4px 12px; margin-bottom: 8px; background: var(--primary-color); color: var(--color-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.auction-next .info { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 6px; }
.auction-next .description { margin: 10px 0; }
.auction-next .licitation-box .title { font-weight: 600; margin-bottom: 6px; }
.auction-next .licitation-box .actions { margin: 12px 0; }
.auction-next .licitation-box .actions p { margin: 0 0 8px; }
.auction-next .licitation-box .how-to { margin: 10px 0 0; font-size: var(--fs-sm); }

/* calendário de leilões (auction-card no .lslider; dia/mês sobre o ícone svg) */
.auction-card a { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.auction-card .calendar-date { position: relative; flex: 0 0 auto; width: 72px; }
.auction-card .calendar-date svg { display: block; width: 100%; height: auto; }
.auction-card .calendar-date .day { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-lg); font-weight: 600; line-height: 1; }
.auction-card .calendar-date small { position: absolute; top: 82%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-xs); text-transform: uppercase; line-height: 1; }
.auction-card .auction-info { min-width: 0; }
.auction-card .auction-info h3 { margin: 0 0 4px; }
.auction-card .auction-date { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* catálogo em bloco CMS (catalog_category): itens usam o contrato de cards de
   lote; grelhas via .lgrid com knobs. O phtml fallback usa os ULs a seco. */
.catalog-items { --cols: 4; --item-min: 240px; --gap: 24px; }
.catalog-items:not(.slick-initialized):not(.lgrid) {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(var(--item-min, 240px), 1fr));
	gap: var(--gap, 24px);
}
.subcategories { --cols: 4; --item-min: 220px; --gap: 20px; list-style: none; margin: 24px 0 0; padding: 0; }
.subcategories:not(.lgrid) {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(var(--item-min, 220px), 1fr));
	gap: var(--gap, 20px);
}
.subcategories .category-preview img { display: block; width: 100%; }
.subcategories .category-preview h2 { margin: 8px 0 0; }
.subcategories a.category { display: block; text-decoration: none; min-width: 0; }

/* bloco de imagem (block-image) — cartão com sombra e efeito zoom-in/out;
   sombras rgba-alpha = scrims deliberados. NOTA: tudo scoped ao bloco — o
   default antigo tinha .image a seco, que colidia com o resto do site. */
.block-image .image_wrapper { width: 320px; height: 220px; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); cursor: pointer; display: block; transition: transform 0.6s ease, border-radius 0.6s ease; }
.block-image .image_wrapper:hover { transform: scale(0.96); border-radius: 10px; }
.block-image .image_wrapper img.zoom-in { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.6s ease, filter 0.6s ease; }
.block-image .image_wrapper:hover img.zoom-in { transform: scale(1.15); filter: brightness(1.2); }
.block-image .image_wrapper img.zoom-out { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transform: scale(1.15); transition: transform 0.6s ease, filter 0.6s ease; }
.block-image .image_wrapper:hover img.zoom-out { transform: scale(1); filter: brightness(1.2); }
.block-image .image { display: flex; flex-direction: column; }
.block-image .image.align-left { align-items: flex-start; }
.block-image .image.align-center { align-items: center; }
.block-image .image.align-right { align-items: flex-end; }
.block-image .image figcaption { display: flex; justify-content: center; width: 320px; margin-top: 8px; }

/* resultados de pesquisa (search/results.phtml — llist + lmedia/lbody) */
.search-results .result { padding: 14px 0 40px; border-bottom: 1px solid var(--color-border); }
.search-results .llist > li.result { margin-bottom: 0; }
.search-results .pagination { margin: 16px 0; }
.search-results .article-kicker { margin-bottom: 8px; }
.search-results .pagination .page a { display: block; color: inherit; }
.auction-search-box { padding: 16px; border: 1px solid var(--color-border); border-radius: 6px; }

/* calendário lateral (auction/search/calendar.phtml + Helper_Calendar):
   dia com leilões = pastilha primária com o número por cima; os links dos
   leilões vivem num tooltip que abre no hover do dia. */
.calendar-sidebar { position: relative; margin: 20px 0; padding: 14px 16px; box-sizing: border-box; background: var(--color-surface);
	color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; }
.calendar-sidebar span.title { display: block; text-align: center; margin-bottom: 10px; font-size: var(--fs-md); font-weight: 500; color: var(--primary-color); }
.calendar-sidebar .calendar-navigation { position: absolute; top: 14px; right: 14px; }
.calendar-sidebar .calendar-navigation a { display: inline-block; width: 22px; text-align: center; text-decoration: none; font-size: var(--fs-lg); color: var(--color-text); }
.calendar-sidebar table.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-sidebar th.header { padding: 4px 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); border-bottom: 2px solid var(--color-border); }
.calendar-sidebar td { position: relative; padding: 6px 0; text-align: center; vertical-align: top; font-size: var(--fs-sm); color: var(--color-text); }
.calendar-sidebar td.weekend { color: var(--color-text-muted); }
.calendar-sidebar td.day > a:first-child { display: block; width: 25px; height: 25px; margin: 0 auto; border-radius: 50%; background: var(--primary-color); font-size: 0; line-height: 0; text-decoration: none; }
.calendar-sidebar td.day > a:first-child ~ .calendar-day-number { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 25px; line-height: 25px; color: var(--color-white); pointer-events: none; }
.calendar-sidebar .auction-links-container { position: absolute; top: 32px; right: 0; z-index: 50; min-width: 200px; max-width: 240px; padding: 10px; text-align: left; background: var(--color-surface);
	color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); /* véu deliberado */ }
.calendar-sidebar td:not(:hover) .auction-links-container { display: none; }
.calendar-sidebar .auction-links-container a { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--link-color); text-decoration: underline; }
.calendar-sidebar .auction-links-container a + a { margin-top: 5px; }

/* -- banners de topo (cms/page/banners.phtml + responsive.js data-proportion) -- */
.block-banners { position: relative; width: 100%; overflow: hidden; }
.block-banners .banner {
	position: relative;
	width: 100%;
	min-height: 40vh; /* fallback até o responsive.js aplicar o data-proportion */
	overflow: hidden;
	/* SEM cor de fundo: o universal-parallax mete a imagem num
	   .parallax__container com z-index:-100 — um fundo opaco aqui tapava-a.
	   O posicionamento do .parallax é da lib (position:fixed + inline). */
	/* ponto focal (cms_banner_image.focal_x/y em %): os renders põem
	   --focal-x/--focal-y inline; sem eles = centro (comportamento antigo).
	   Longhand DE PROPÓSITO: `background: no-repeat / cover` é shorthand inválido
	   (o /size exige posição antes da barra) e reativava o repeat. */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
/* Parallax por JS (transform no scroll, misc.js). A imagem vai numa camada
   SOBREDIMENSIONADA (top:-25%; height:150%) para haver folga de deslocamento sem
   revelar bordas; o JS aplica translateY/scale por intensidade/direção/zoom.
   z-index:0 = por baixo do overlay (::after z-index:1) e da mensagem (z-index:2).
   Sem JS fica estática (mostra o centro) — degradação aceitável. */
.block-banners .banner.parallax-js { overflow: hidden; }
.block-banners .banner.parallax-js .parallax-layer {
	position: absolute; left: 0; right: 0; top: -40%; height: 180%; z-index: 0;
	background-repeat: no-repeat; background-size: cover;
	background-position: var(--focal-x, 50%) var(--focal-y, 50%);
	will-change: transform; pointer-events: none;
}
.block-banners .banner img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); display: block; }
.block-banners .banner.video video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); transform: translate(-50%, -50%); }
/* .message e .wrapper são classes genéricas que colidem com utilities globais
   (.message = alertas/flash L584; .wrapper = container de layout L55). Neutralizar
   aqui (mesmo padrão de .confirm-box .message) — a caixa visível é a .wrapper com
   o scrim rgba inline do slide (Fase 2: substituir por tone/overlay/tokens). */
.block-banners .banner .message { position: absolute; z-index: 2; max-width: var(--message-width, 50%); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.block-banners .banner .message .wrapper { max-width: none; width: auto; margin: 0; padding: 16px 20px; border-radius: 4px; }
.block-banners .banner .message .text-link { color: inherit; }
/* Fase 2 — content_width (largura da caixa da mensagem) via knob --message-width */
.block-banners .banner .message.content-narrow { --message-width: 34%; }
.block-banners .banner .message.content-half { --message-width: 50%; }
.block-banners .banner .message.content-wide { --message-width: 72%; }
/* content_width=full: caixa a toda a largura, para tipografia de display centrada */
.block-banners .banner .message.content-full { --message-width: 92%; }
/* Tipografia de DISPLAY para heros (art direction) — usar via o campo "Classe CSS"
   da linha (avançado). clamp() escala com o viewport; line-height apertado para
   títulos gigantes empilhados (estilo editorial/agência). */
.block-banners .banner .message .l-display { font-size: clamp(2.75rem, 11vw, 10rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.block-banners .banner .message .l-display-md { font-size: clamp(1.75rem, 6vw, 4.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.block-banners .banner .message .l-kicker { font-size: clamp(0.75rem, 1.4vw, 1rem); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; }
.block-banners .banner .message .l-tight { line-height: 1; margin: 0; }
/* CTA em pílula (estilo moderno) — combina com qualquer lbt */
.block-banners .banner .message a.lbt.l-pill { border-radius: 999px; padding: 14px 34px; }
/* Fase 2 — tone: cor do texto por tokens (substitui o hex por linha). Âmbito no
   hero (o topo-global não vive em .block-content) e nos descendentes, para
   bater as regras diretas do compilador; a caixa (.wrapper) mantém o scrim. */
/* texto do hero: branco por omissão (heros vivem sobre imagem); o tone-dark e as
   cores por linha (color/color_token, inline) sobrepõem-se. */
.block-banners .banner .message, .block-banners .banner .message * { color: var(--color-white); }
.block-banners .message.tone-light, .block-banners .message.tone-light * { color: var(--color-white); }
.block-banners .message.tone-dark, .block-banners .message.tone-dark * { color: var(--color-black); }
/* §2b: botões NÃO participam na propagação de tom (banners e conteúdo) —
   mantêm a identidade dos tokens; o tom forçava texto branco sobre botão de
   fundo claro (QA 2026-07-10) */
.block-banners .banner .message :is(.lbt1, .button1), .block-content :is(.tone-light, .tone-dark) :is(.lbt1, .button1) { color: var(--button1-color); }
.block-banners .banner .message :is(.lbt1, .button1):hover, .block-content :is(.tone-light, .tone-dark) :is(.lbt1, .button1):hover { color: var(--button1-color-hover); }
.block-banners .banner .message :is(.lbt2, .button2), .block-content :is(.tone-light, .tone-dark) :is(.lbt2, .button2) { color: var(--button2-color); }
.block-banners .banner .message :is(.lbt2, .button2):hover, .block-content :is(.tone-light, .tone-dark) :is(.lbt2, .button2):hover { color: var(--button2-color-hover); }
.block-banners .banner .message :is(.lbt3, .button3), .block-content :is(.tone-light, .tone-dark) :is(.lbt3, .button3) { color: var(--button3-color); }
.block-banners .banner .message :is(.lbt3, .button3):hover, .block-content :is(.tone-light, .tone-dark) :is(.lbt3, .button3):hover { color: var(--button3-color-hover); }
.block-banners .banner .message :is(.lbt4, .button4), .block-content :is(.tone-light, .tone-dark) :is(.lbt4, .button4) { color: var(--button4-color); }
.block-banners .banner .message :is(.lbt4, .button4):hover, .block-content :is(.tone-light, .tone-dark) :is(.lbt4, .button4):hover { color: var(--button4-color-hover); }
.block-banners .banner .message :is(.lbt5, .button5), .block-content :is(.tone-light, .tone-dark) :is(.lbt5, .button5) { color: var(--button5-color); }
.block-banners .banner .message :is(.lbt5, .button5):hover, .block-content :is(.tone-light, .tone-dark) :is(.lbt5, .button5):hover { color: var(--button5-color-hover); }
/* Fase 2 — overlay: scrim de legibilidade sobre a imagem (rgba-alpha deliberado,
   ILHA documentada — é um véu de contraste, não identidade de marca). Fica sob a
   .message (z-index) e sobre a imagem/vídeo. */
.block-banners .banner.overlay-soft::after,
.block-banners .banner.overlay-strong::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.block-banners .banner.overlay-soft::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%); }
.block-banners .banner.overlay-strong::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 78%); }
.block-banners .banner .message.top_left { left: 8%; top: 24px; }
.block-banners .banner .message.top_center { left: 50%; top: 24px; transform: translateX(-50%); text-align: center; }
.block-banners .banner .message.top_right { right: 8%; top: 24px; text-align: right; }
.block-banners .banner .message.center_left { left: 8%; top: 50%; transform: translateY(-50%); }
.block-banners .banner .message.center_center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.block-banners .banner .message.center_right { right: 8%; top: 50%; transform: translateY(-50%); text-align: right; }
.block-banners .banner .message.bottom_left { left: 8%; bottom: 24px; }
.block-banners .banner .message.bottom_center { left: 50%; bottom: 24px; transform: translateX(-50%); text-align: center; }
.block-banners .banner .message.bottom_right { right: 8%; bottom: 24px; text-align: right; }
.block-banners .slick-arrow { position: absolute; top: calc(50% - 16px); left: 16px; z-index: 9; color: var(--color-white); cursor: pointer; }
.block-banners .slick-arrow.slick-next { left: auto; right: 16px; }
.block-banners .slick-dots { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.block-banners .slick-dots li button { width: 32px; height: 3px; padding: 0; font-size: 0; border: 0; background: var(--color-white); cursor: pointer; }
.block-banners .slick-dots li.slick-active button { background: var(--primary-color); }

/* ===== Controlos dos dots (Fase 5): posição / forma / preenchimento ===== */
.banners-container.has-dots .slick-dots { --dots-accent: var(--dots-color, var(--primary-color)); align-items: center; }

/* posição */
.banners-container.dots-pos-bottom_center .slick-dots { top: auto; bottom: 20px; left: 50%; right: auto; transform: translateX(-50%); justify-content: center; }
.banners-container.dots-pos-bottom_left   .slick-dots { top: auto; bottom: 20px; left: 15px;  right: auto; transform: none; justify-content: flex-start; }
.banners-container.dots-pos-bottom_right  .slick-dots { top: auto; bottom: 20px; left: auto; right: 15px;  transform: none; justify-content: flex-end; }
.banners-container.dots-pos-top_center    .slick-dots { bottom: auto; top: 20px; left: 50%; right: auto; transform: translateX(-50%); justify-content: center; }
.banners-container.dots-pos-top_left      .slick-dots { bottom: auto; top: 20px; left: 15px;  right: auto; transform: none; justify-content: flex-start; }
.banners-container.dots-pos-top_right     .slick-dots { bottom: auto; top: 20px; left: auto; right: 15px;  transform: none; justify-content: flex-end; }

/* forma: bolas */
.banners-container.dots-shape-dots .slick-dots li { width: 12px; height: 12px; }
.banners-container.dots-shape-dots .slick-dots li button { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); position: relative; overflow: hidden; }
.banners-container.dots-shape-dots.dots-fill-solid .slick-dots li.slick-active button { background: var(--dots-accent); }

/* forma: retângulos (barras) */
.banners-container.dots-shape-bars .slick-dots li { width: 34px; height: 5px; }
.banners-container.dots-shape-bars .slick-dots li button { width: 34px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); position: relative; overflow: hidden; }
.banners-container.dots-shape-bars.dots-fill-solid .slick-dots li.slick-active button { background: var(--dots-accent); }

/* forma: previews (miniaturas do slide) */
.banners-container.dots-shape-previews .slick-dots { gap: 10px; }
.banners-container.dots-shape-previews .slick-dots li { width: 56px; height: 34px; }
.banners-container.dots-shape-previews .slick-dots li button { width: 56px; height: 34px; padding: 0; background: none; border: 2px solid rgba(255,255,255,.55); border-radius: 5px; position: relative; overflow: hidden; opacity: .7; transition: opacity .2s; }
.banners-container.dots-shape-previews .slick-dots li button .dot-thumb { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.banners-container.dots-shape-previews .slick-dots li button .dot-thumb.is-video { background: #222; }
.banners-container.dots-shape-previews .slick-dots li.slick-active button { border-color: var(--dots-accent); opacity: 1; }

/* preenchimento "loader": o dot ativo enche-se durante o tempo de autoplay */
.banners-container.dots-fill-loader .slick-dots li button::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--dots-accent); }
.banners-container.dots-fill-loader .slick-dots li.dot-run button::after { animation: dots-load var(--dots-duration, 5000ms) linear forwards; }
/* Slider pausado no hover (autoplay parado) -> o loader dos dots também congela. */
.banners-container.slider-hover-paused .slick-dots li.dot-run button::after { animation-play-state: paused; }
.banners-container.dots-shape-previews.dots-fill-loader .slick-dots li button::after { top: auto; bottom: 0; height: 4px; }
@keyframes dots-load { from { width: 0; } to { width: 100%; } }
/* Alternância desktop/mobile (o phtml renderiza AS DUAS instâncias; só uma
   deve aparecer por viewport). Breakpoint 767 = o que o responsive.js usa
   para escolher a instância a dimensionar — NÃO usar os 600/1024 do compilador. */
.block-banners.desktop { display: none; }
.block-banners.mobile { display: none; }
@media (min-width: 768px) { .block-banners.desktop { display: block; } }
@media (max-width: 767px) { .block-banners.mobile { display: block; } }

/* ==== 11. RESPONSIVO GERAL ============================================== */

@media (max-width: 600px) {
	.block > .block-content, .customer-content, .lot-view,
	.auctions-view, .auction-view, #cart-container { padding-left: 14px; padding-right: 14px; }
	.lot-list.grid > ul, .lot-list > ul { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.lot-view.full, .catalog-product-view .product-view { flex-direction: column; }
	.tabs-customer { flex-wrap: wrap; }
	.layout-block-newsletter .subscribe { flex-direction: column; }
}

/* ==== 11b. POPUPS GENÉRICOS + COOKIES =================================== */
/* .popup-dialog é o modal genérico do frontend (cookies, confirmações).
   Scrim rgba deliberado (véu de contraste, não identidade). */
/* acima do chrome (100000+), do drawer (100001), da pesquisa (100002) e dos
   toasts (100003) — um modal tapado pelo header não é um modal */
.popup-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100004; }
.popup-dialog-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; max-width: 92%; max-height: 90%; overflow: auto; box-sizing: border-box; padding: 40px; background: var(--color-surface);
	color: var(--color-text); border-radius: 6px; }
.popup-dialog-container .close { position: absolute; top: 10px; right: 12px; cursor: pointer; transition: color .2s; }
.popup-dialog-container .close:hover { color: var(--color-text-muted); }
/* cookies: ancorado ao topo para caber a lista de grupos */
.popup-dialog.cookie-popup .popup-dialog-container { top: 90px; transform: translateX(-50%); max-height: calc(100% - 130px); }

.cookie-accept .cookie-info { margin-bottom: 18px; padding: 20px 24px; }
.cookie-accept .cookie-info .title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cookie-accept .cookie-info .title h2 { margin: 0; }
.cookie-accept .cookie-info .title .switcher { order: 2; margin-left: auto; }
.cookie-accept .cookie-info .description p { margin: 0 0 12px; line-height: 1.55; }
.cookie-accept > .accept p { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0; }
.cookie-accept .see-more { margin: 14px 0 0; }
.cookie-accept .see-more a { cursor: pointer; }
.cookie-accept .cookie-details { display: none; overflow-x: auto; margin-top: 8px; }
.cookie-accept .cookie-details table { width: 100%; border-collapse: collapse; }
.cookie-accept .cookie-details th, .cookie-accept .cookie-details td { padding: 6px 8px; font-size: var(--fs-xs); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cookie-accept .cookie-details th { font-weight: 600; white-space: nowrap; }

/* ==== 11c. VENDOR OVERRIDES ============================================= */
/* Widgets de vendor não leem tokens (docs/theme_vendor_css_inventory.md) —
   re-ligamos os visíveis à paleta. Estrutura/sombras dos vendors intactas.
   ⚠ Os CSS de vendor carregam DEPOIS do styles.css: os seletores levam
   prefixo `body` para vencer o desempate por ordem sem !important. */

/* jquery.pan (zoom das imagens do lote): o wrapper do plugin vem com
   z-index 9999 e ficava ATRÁS da .image-wall.full (1000010); os controlos
   são PNGs cinzentos invisíveis sobre o fundo escuro — substituídos por
   glifos CSS brancos em pastilha translúcida. Posições do plugin mantidas
   (in/out em baixo ao centro, close no topo direito). */
body .panWrapper { z-index: 1000012; background-color: rgba(0, 0, 0, 0.92); }
body .panWrapper a.controls,
body .panWrapper a.controls.in,
body .panWrapper a.controls.out,
body .panWrapper a.controls.close { background-image: none; /* os PNGs do plugin vêm nas variantes .in/.out/.close (especificidade maior) e sobrepunham-se aos glifos */ width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.65); text-decoration: none; transition: background-color .2s; }
body .panWrapper a.controls:hover { background-color: rgba(255, 255, 255, 0.35); text-decoration: none; }
/* símbolos desenhados com barras posicionadas ao centro geométrico —
   glifos de texto assentam na baseline da fonte e descaíam do centro */
body .panWrapper a.controls::before,
body .panWrapper a.controls.close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
body .panWrapper a.controls.in::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 18px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
body .panWrapper a.controls.close::before { transform: translate(-50%, -50%) rotate(45deg); }
body .panWrapper a.controls.close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* select2 3.5 (js/bootstrap-select2) — usado nos filtros/checkout/formulários.
   Nos .field/.form o plugin copia a width do elemento original para style
   inline — o !important garante a largura total, como os input text. */
body .lfilters .select2-container,
body .field .select2-container,
body .form .select2-container { display: block; width: 100% !important; }
/* mesmo box dos input text: padding 10px 12px + line-height do body,
   em vez de height fixa — cresce/encolhe com o tema como os inputs */
body .select2-container .select2-choice { height: auto; line-height: 1.6; padding: 10px 30px 10px 12px; box-sizing: border-box; background: var(--background-color); background-image: none; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); box-shadow: none; }
body .select2-container .select2-choice > .select2-chosen { color: var(--color-text); margin-right: 0; }
body .select2-container .select2-choice .select2-arrow { background: transparent; background-image: none; border-left: 0; }
/* seta na métrica nativa do sprite (26px @ 0 1px), centrada seja qual for a altura */
body .select2-container .select2-choice .select2-arrow b { position: relative; top: 50%; height: 26px; margin-top: -13px; background-position: 0 1px; }
body .select2-container .select2-choice abbr { top: 50%; margin-top: -6px; }
body .select2-dropdown-open .select2-choice, body .select2-container-active .select2-choice { border-color: var(--primary-color); box-shadow: none; background-image: none; }
body .select2-drop { border-color: var(--color-border); border-radius: 0 0 4px 4px; }
body .select2-drop-active { border-color: var(--color-border); }
body .select2-search input { border: 1px solid var(--color-border); }
body .select2-results .select2-highlighted { background: var(--primary-color); color: var(--color-white); }

/* ion-rangeSlider (skinNice usa sprite — sobrepomos com cores sólidas) */
body .irs .irs-bar, body .irs .irs-bar-edge { background: var(--primary-color); border-color: var(--primary-color); background-image: none; }
body .irs .irs-slider { background-image: none; background: var(--color-white); border: 2px solid var(--primary-color); border-radius: 50%; }
body .irs .irs-from, body .irs .irs-to, body .irs .irs-single { background: var(--primary-color); color: var(--color-white); background-image: none; }

/* notifyjs (toasts das notificações do cliente — printNotification no misc.js,
   estilo "metro" definido no fim de js/jquery.notify/notify.js). As CORES por
   tipo vêm do próprio plugin (preto translúcido — monocromático, Base Zero);
   aqui vive a FORMA: card, tipografia e espaçamento. O plugin injeta o seu CSS
   num <style> depois do nosso, daí o prefixo body para vencer por especificidade. */
body .notifyjs-corner { z-index: 100003; margin: 12px; }
body .notifyjs-corner .notifyjs-wrapper { margin-bottom: 10px; }
body .notifyjs-metro-base {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 260px;
	max-width: 340px;
	box-sizing: border-box;
	padding: 14px 16px;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* véu de sombra deliberado */
	cursor: pointer; /* clickToHide */
	white-space: normal;
}
body .notifyjs-metro-base .image { flex: 0 0 auto; }
body .notifyjs-metro-base .image:empty { display: none; }
body .notifyjs-metro-base .image img { display: block; width: 28px; height: 28px; }
body .notifyjs-metro-base .text-wrapper { flex: 1 1 auto; min-width: 0; }
body .notifyjs-metro-base .title { font: 600 var(--fs-sm)/1.35 var(--primary-font-family); margin-bottom: 2px; }
body .notifyjs-metro-base .text { font: 400 var(--fs-xs)/1.45 var(--primary-font-family); overflow-wrap: break-word; }
body .notifyjs-metro-base .text a { color: inherit; text-decoration: underline; }

/* ==== 12. CHATBOT (widget injetado por js/chatbot/widget.js) ============ */

/* ===== Chatbot widget (frontend) ===== */
.chatbot-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	background: var(--primary-color);
	color: var(--color-white);
	font-size: 24px;
	line-height: 56px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	z-index: 99998;
}
.chatbot-launcher:hover { background: var(--color-black); }
.chatbot-launcher-icon { pointer-events: none; }

.chatbot-panel {
	position: fixed;
	right: 20px;
	bottom: 88px;
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 120px);
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	display: none;
	flex-direction: column;
	overflow: hidden;
	z-index: 99999;
}
.chatbot-panel.chatbot-open { display: flex; }

.chatbot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--primary-color);
	color: var(--color-white);
}
.chatbot-title { font-weight: 600; font-size: 15px; }
.chatbot-close {
	background: transparent;
	border: 0;
	color: var(--color-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.chatbot-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	background: var(--color-surface);
}
.chatbot-msg {
	max-width: 80%;
	margin-bottom: 10px;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
}
.chatbot-msg-user {
	margin-left: auto;
	background: var(--primary-color);
	color: var(--color-white);
	border-bottom-right-radius: 3px;
}
.chatbot-msg-bot {
	margin-right: auto;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-bottom-left-radius: 3px;
}
.chatbot-msg strong { font-weight: 600; }
.chatbot-msg .chatbot-list { margin: 6px 0; padding-left: 18px; }
.chatbot-msg .chatbot-list li { margin: 2px 0; }

.chatbot-typing span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	border-radius: 50%;
	background: var(--color-text-muted);
	animation: chatbot-blink 1.2s infinite both;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatbot-blink {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

.chatbot-input-row {
	display: flex;
	align-items: flex-end;
	padding: 10px;
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
}
.chatbot-input {
	flex: 1 1 auto;
	resize: none;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	max-height: 96px;
	font-family: inherit;
}
.chatbot-send {
	flex: 0 0 auto;
	margin-left: 8px;
	width: 40px;
	height: 38px;
	border: 0;
	border-radius: 8px;
	background: var(--primary-color);
	color: var(--color-white);
	font-size: 16px;
	cursor: pointer;
}
.chatbot-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
	.chatbot-panel {
		right: 10px;
		left: 10px;
		bottom: 80px;
		width: auto;
		max-width: none;
	}
}

/* ==== 13. WIDGETS DE TERCEIROS =========================================== */
/* userway (acessibilidade): canto inferior ESQUERDO, fora do caminho do
   chatbot (inferior direito) */
#userwayAccessibilityIcon, .userway_buttons_wrapper, .uwy.userway_p1 .userway_buttons_wrapper {
	top: auto !important;
	right: auto !important;
	bottom: 5px !important;
	left: 5px !important;
	transform: translate(0) !important;
}