.container-products {min-height: 50vh;}
.container-products .container-list {position: relative;}
.container-products .section-products .column {float: none;display: inline-block;vertical-align: top;}

.wrapper-products.overlay {position: relative;}
.list-overlay {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.8) url(/sysimages/listloader.gif) center 20vh/60px no-repeat;z-index: 85;}

/* == Ver mais produtos == */
.bottom-list {text-align: center;}
.bottom-list .loadingIcon {display: none;line-height: 0;}
.bottom-list .loadingIcon img {max-width: 36px;}
#morep.hidden {display: none !important;}

/* == Visual Merchandising == */
	/* Listagem de produtos */
	.container-products.listBreakAvailable .section-products,
	.container-products.productListColumnFullWidth .section-products {text-align: center;}
	.section-products .columnWidth2 article.product-item figure,
	.section-products .columnWidth3 article.product-item figure,
	.section-products .columnWidth4 article.product-item figure {overflow: hidden;}

	/* Texto descritivo - truncamento em cascata (titulo -> subtitulo -> descricao) por JS: truncateWithTextBlocks() */
	.rdc-wt-el {position: relative;}
	.rdc-wt-el--subtitle {padding-top: 15px;}
	.rdc-wt-el--description {padding-top: 20px;}
	.rdc-wt-el:first-child {padding-top: 0;}
	/* Estado de clamp aplicado inline pelo JS (-webkit-line-clamp) */
	.rdc-wt-clamp {-webkit-box-orient: vertical;-moz-box-orient: vertical;box-orient: vertical;display: -webkit-box;overflow: hidden;}
	/* Ver mais decorativo: fade adaptado a cor de fundo do bloco (var --wt-bg definida em JS) */
	.rdc-wt-el .rdc-see-more {position: absolute;bottom: 0;padding-left: 3px;background: var(--wt-bg, #fff);}
	.rdc-wt-el .rdc-see-more::before {content: '...';display: inline;margin-left: 6px;background: linear-gradient(to right, transparent, var(--wt-bg, #fff) 20px);}
	/* "Ver mais" clicavel: abre o popup reutilizavel com o conteudo completo do bloco */
	/* Sem sublinhado/cor de link: funde-se com o texto truncado (cor/tamanho/peso aplicados inline pelo JS) */
	.rdc-wt-el .rdc-see-more a {pointer-events: auto;cursor: pointer;text-decoration: underline;}
	@media (hover: hover) {
		.rdc-wt-el .rdc-see-more a:hover {text-decoration: none;}
	}
	/* Estado inicial: oculta o contentor ate o JS aplicar o truncamento (evita flickering)
	.rdc-product-item-with_text_content.rdc-wt-pending {opacity: 0;} */
	/* Transicao suave ao revelar (apos remocao de rdc-wt-pending pelo JS) 
	.rdc-product-item-with_text_content {transition: opacity 0.15s ease;}*/
	@media screen and (max-width: 767px){
		.section-products .column.rdc-product-item-with_text {width: 100% !important;}
		/* Split mobile: wrap dentro da coluna de texto independente (col-xs-6) */
		.section-products.row2 .column.rdc-productlist-with_text.col-xs-6 {display: inline-flex;opacity: 0;}
		.section-products .column.rdc-productlist-with_text .rdc-product-item-with_text_wrap {position: static;transform: none !important;width: 100%;inset: auto;display: block;padding-bottom: 0;}
	}

	/* Destaque (Imagem e vídeo) */
	.section-products .rdc-product-item-enhance-type-1:not(.rdc-product-item-enhance-full-height) .img-default,
	#main .section-products .rdc-product-item-enhance-type-2 .img-default,
	#main .section-products .columnWidth2 .img-default, .section-products .columnWidth3 .img-default {display: none;}
	.section-products .rdc-product-item-enhance figure {overflow: hidden;}
	.section-products .rdc-product-item-enhance-full-height .img-feautured-custom,
	.section-products .rdc-product-item-enhance-type-2 .img-feautured-custom {width: auto;height: 100%;max-width: none;transform: translate(-50%, -50%);top: 50%;left: 50%;}
	.section-products .rdc-product-item-enhance-type-3 .video-js,
	.section-products .rdc-product-item-enhance-type-3 .video-js + .img-feautured-custom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: white;}
	@media screen and (min-width: 767px) {
		.section-products .columnWidth2:not(.rdc-product-item-enhance-type-2):not(.rdc-product-item-enhance-full-height) figure.loader .img-feautured-custom,
		.section-products .columnWidth3:not(.rdc-product-item-enhance-type-2):not(.rdc-product-item-enhance-full-height) figure.loader .img-feautured-custom {top: 50%;transform: translateY(-50%);}
	}
	@media screen and (min-width: 992px) {
		.section-products .columnWidth4:not(.rdc-product-item-enhance-type-2):not(.rdc-product-item-enhance-full-height) figure.loader .img-feautured-custom {top: 50%;transform: translateY(-50%);}
	}
	@media screen and (min-width: 1200px) {
		body:not(.tablet) .section-products .rdc-product-item-enhance-type-3 .img-default {visibility: hidden;}
		body:not(.tablet) .section-products .columnWidth2.rdc-product-item-enhance-type-3 figure.loader .img-feautured-custom,
		body:not(.tablet) .section-products .columnWidth3.rdc-product-item-enhance-type-3 figure.loader .img-feautured-custom,
		body:not(.tablet) .section-products .columnWidth4.rdc-product-item-enhance-type-3 figure.loader .img-feautured-custom {display: none;}
		body:not(.tablet) .section-products .rdc-product-item-enhance-type-3 .video-js + .img-feautured-custom {display: none;}
	}

	/* Exibir imagem em área total (Full height) */
	.section-products .rdc-product-item-enhance-full-height article.product-item{position: relative;overflow: hidden;}
	.section-products .rdc-product-item-enhance-full-height .image, .section-products .rdc-product-item-enhance-full-height .image figure{position: static;}
	.section-products .rdc-product-item-enhance-full-height .image *:not(.img-feautured-custom){z-index: 0;}
	.section-products .rdc-product-item-enhance-full-height .img-default, .section-products .rdc-product-item-enhance-full-height .desc{visibility: hidden;}
	.section-products .rdc-product-item-enhance-full-height .img-feautured-custom{position: absolute;z-index: 1;width: 100%;height: calc(100% + 2px);object-fit: cover;}
	.section-products .rdc-product-item-enhance-full-height .image .slick-slider, .section-products .rdc-product-item-enhance-full-height .image .slick-list,
	.section-products .rdc-product-item-enhance-full-height .image .slick-track, .section-products .rdc-product-item-enhance-full-height .image .slick-slide,
	.section-products .rdc-product-item-enhance-full-height .image .slick-slide *:not(img){position: static !important;transform: none !important;}
	.section-products .rdc-product-item-enhance-full-height .image .slick-slide:not(.slick-active),
	.section-products .rdc-product-item-enhance-full-height .product-item .flags{display: none;}


/* Only Tablet (Portrait and Landscape) */
@media screen and (pointer: coarse) and (min-width: 700px) and (min-device-height: 1000px) and (orientation: portrait), 
screen and (pointer: coarse) and (min-device-width: 768px) and (min-device-height: 700px) and (orientation: landscape) {
	body:not(.rdc-platform-api-device-mobile) .container-products {min-height: 50vh;}
}

/* Mobile (Portrait) */
@media screen and (max-width: 767px) {
	.wrapper-products-container {padding-left: 0;padding-right: 0;}
}

/* Mobile (Landscape), Tablet (Portrait) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.section-products.row4 .rdc-tablet-p-show {display: block !important;}
	.section-products.row4 .rdc-tablet-p-hide {display: none !important;}
}

/* Mobile and Tablet (Landscape) */
@media screen and (max-width: 1199px) {
	.container-products {min-height: 40vh;}
	.products .wrapper-page {padding: 0;}
	.container-products, .wrapper-side-menu {float: none;width: 100%;}
	.container-list {float: none;padding-top: 0;}
}

/* Desktop */
@media screen and (min-width: 1200px) {
	.wrapper-side-menu {float: left;}
	.section-products .columnWidth4 .img-default {display: none;}
	.wrapper-products {position: relative;}
	.container-products.overlay::before {z-index: 40;}
}

/* Product Item - Mobile*(only large) (Landscape) */
@media screen and (pointer: coarse) and (min-width: 768px) and (max-device-width: 1020px) and (max-device-height: 1000px) and (orientation: landscape)  {
	body.rdc-platform-api-device-mobile .wrapper-side-menu {width: auto !important;float: none !important;}
	body.rdc-platform-api-device-mobile .container-products {min-height: 0 !important;}
	body.rdc-platform-api-device-mobile .container-products.list_area_b_active {width: 100% !important;}
}

/* (First Line) Product Item - Mobile (only large) and Tablet (Landscape and Portrait) */
@media screen and (pointer: coarse) and (min-width: 768px) and (max-device-width: 1020px) and (max-device-height: 1000px) and (orientation: landscape),
screen and (pointer: coarse) and (min-device-width: 768px) and (min-device-height: 700px) and (orientation: landscape),
screen and (pointer: coarse) and (min-width: 700px) and (min-device-height: 1000px) {
	.section-products .rdc-productlist-desktop-first-row:not(.first-line) {padding-top: 0 !important;}
}


/* SECTION: CSS Grid Layout */
	.section-products.rdc-grid-layout {
		display: grid;
	}
	
	/* Neutralizar pseudo-elementos clearfix do .row herdados pelo container da grid */
	.section-products.rdc-grid-layout::before,
	.section-products.rdc-grid-layout::after {
		display: none !important;
		content: none !important;
	}

	/* Numero de colunas desktop por classe rowN (actualizada pelo buildGrid() no JS) */
	.section-products.rdc-grid-layout.row4 { grid-template-columns: repeat(4, 1fr); }
	.section-products.rdc-grid-layout.row3 { grid-template-columns: repeat(3, 1fr); }
	.section-products.rdc-grid-layout.row2 { grid-template-columns: repeat(2, 1fr); }
	.section-products.rdc-grid-layout.row1 { grid-template-columns: 1fr; }

	/* Spacer do with_text: artefacto do sistema float (0x0 em inline-block); em CSS Grid vira item com dimensões próprias e desloca os restantes — ocultar */
	.section-products.rdc-grid-layout > .rdc-product-item-with_text-spacer {
		display: none !important;
	}

	/* --- Override de largura float: anular col-* nos filhos directos --- */
	.section-products.rdc-grid-layout > .column,
	.section-products.rdc-grid-layout > .column-default {
		width: 1px !important;
		min-width: 100% !important;
		float: none !important;
		display: block !important;
	}

	/* --- Span CSS Grid via classes columnWidth (ja presentes no HTML) --- */
	.section-products.rdc-grid-layout > .columnWidth1 { grid-column: span 1; }
	.section-products.rdc-grid-layout > .columnWidth2 { grid-column: span 2; }
	.section-products.rdc-grid-layout > .columnWidth3 { grid-column: span 3; }
	.section-products.rdc-grid-layout > .columnWidth4 { grid-column: span 4; }

	/* --- Largura total: banner horizontal, quebras VM, blocos e divisor --- */
	.section-products.rdc-grid-layout > .rdc-productlist-break-column,
	.section-products.rdc-grid-layout > .column-horizontal,
	.section-products.rdc-grid-layout > .column-productlist-blocks,
	.section-products.rdc-grid-layout > .rdc-product-suggest-divider {
		grid-column: 1 / -1;
		width: 1px !important;
		min-width: 100% !important;
	}

	/* Angular (ng-repeat): selecionar via .rdc-pl-ng-row (> não atravessa display:contents) */
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .column:not([ng-cloak]),
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-default {
		width: 1px !important;
		min-width: 100% !important;
		float: none !important;
		display: block !important;
	}

	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth1 { grid-column: span 1; }
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth2 { grid-column: span 2; }
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth3 { grid-column: span 3; }
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth4 { grid-column: span 4; }
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-productlist-break-column,
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-horizontal,
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-productlist-blocks,
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-product-suggest-divider {
		grid-column: 1 / -1;
		width: 1px !important;
		min-width: 100% !important;
	}
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-product-item-with_text-spacer {
		display: none !important;
	}

/* SECTION: CSS Grid Layout - Vista de 2 colunas */
	/* Span maior que as colunas da vista cria tracks implícitas: colapsar para linha completa */
@media screen and (min-width: 768px) {
	.section-products.rdc-grid-layout.row2 > .columnWidth3,
	.section-products.rdc-grid-layout.row2 > .columnWidth4,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .columnWidth3,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .columnWidth4 { grid-column: 1 / -1; }

	/* with_text: o texto já ocupa 1 coluna, o produto fica com a restante */
	.section-products.rdc-grid-layout.row2 > .rdc-productlist-with_text.columnWidth2,
	.section-products.rdc-grid-layout.row2 > .rdc-productlist-with_text.columnWidth3,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .rdc-productlist-with_text.columnWidth2,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .rdc-productlist-with_text.columnWidth3 { grid-column: span 1; }

	/* Overlay do texto: o 50% de .columnWidth2 assume 2 colunas */
	.section-products.rdc-grid-layout.row2 > .rdc-productlist-with_text.columnWidth2 .rdc-product-item-with_text_wrap,
	.section-products.rdc-grid-layout.row2 > .rdc-productlist-with_text.columnWidth3 .rdc-product-item-with_text_wrap,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .rdc-productlist-with_text.columnWidth2 .rdc-product-item-with_text_wrap,
	.section-products.rdc-grid-layout.row2 > .rdc-pl-ng-row > .rdc-productlist-with_text.columnWidth3 .rdc-product-item-with_text_wrap { width: 100%; }
}

/* SECTION: CSS Grid Layout - Produtos ao centro */
	.container-products.listBreakAvailable .section-products.rdc-grid-layout,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	/* Numero de colunas base (slot) por rowN - usado no calc() das larguras abaixo */
	.container-products.listBreakAvailable .section-products.rdc-grid-layout.row1,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout.row1 { --vm-cols: 1; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout.row2,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout.row2 { --vm-cols: 2; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout.row3,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout.row3 { --vm-cols: 3; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout.row4,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout.row4 { --vm-cols: 4; }

	/* Largura por slot (replica col-sm-*) para render Twig (filho directo) e Angular (.rdc-pl-ng-row): !important vence o width:auto do override grid; max-width:100% evita >100% quando span > colunas */
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .columnWidth1,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth1,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .columnWidth1,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth1 { width: calc(100% / var(--vm-cols)) !important; max-width: 100%; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .columnWidth2,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth2,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .columnWidth2,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth2 { width: calc(100% / var(--vm-cols) * 2) !important; max-width: 100%; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .columnWidth3,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth3,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .columnWidth3,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth3 { width: calc(100% / var(--vm-cols) * 3) !important; max-width: 100%; }
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .columnWidth4,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth4,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .columnWidth4,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .columnWidth4 { width: calc(100% / var(--vm-cols) * 4) !important; max-width: 100%; }

	/* Quebras VM e banner horizontal: largura total para forçar nova linha no flex (width:auto não força a quebra pois o div de quebra é vazio) */
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-productlist-break-column,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .column-horizontal,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-productlist-break-column,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-horizontal,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-productlist-break-column,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .column-horizontal,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-productlist-break-column,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-horizontal,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .column-productlist-blocks,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-product-suggest-divider,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-productlist-blocks,
	.container-products.listBreakAvailable .section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-product-suggest-divider,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .column-productlist-blocks,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-product-suggest-divider,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .column-productlist-blocks,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout > .rdc-pl-ng-row > .rdc-product-suggest-divider { width: 100% !important; flex-basis: 100%; }

/* Tablet (768-991px): buildGrid força 3 colunas para row4 (JS usa row4 no container mas col-sm-4 nos itens); em CSS Grid o span é definido pelo container */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.section-products.rdc-grid-layout.row4 { grid-template-columns: repeat(3, 1fr); }
	/* Modo VM em tablet: buildGrid força 3 colunas mesmo com row4 — basta ajustar o slot base para 3 (flex + justify-content:center já centra) */
	.container-products.listBreakAvailable .section-products.rdc-grid-layout.row4,
	.container-products.productListColumnFullWidth .section-products.rdc-grid-layout.row4 { --vm-cols: 3; }
	/* columnWidth3/4: span 3 ou 4 em grid de 3 colunas criaria tracks implicitas - forcar linha completa */
	.section-products.rdc-grid-layout.row4 > .columnWidth3,
	.section-products.rdc-grid-layout.row4 > .columnWidth4,
	.section-products.rdc-grid-layout.row4 > .rdc-pl-ng-row > .columnWidth3,
	.section-products.rdc-grid-layout.row4 > .rdc-pl-ng-row > .columnWidth4 { grid-column: 1 / -1; }
}

/* --- Mobile --- */
@media screen and (max-width: 767px) {
	.section-products.rdc-grid-layout.rdc-grid-mobile-2 { grid-template-columns: repeat(2, 1fr); }
	.section-products.rdc-grid-layout.rdc-grid-mobile-1 { grid-template-columns: 1fr; }
	/* col-xs-12 (enhance.width>1 ou list_mobile_grid=100): produto ocupa linha completa */
	.section-products.rdc-grid-layout > .col-xs-12.column,
	.section-products.rdc-grid-layout > .col-xs-12.column-default,
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .col-xs-12.column,
	.section-products.rdc-grid-layout > .rdc-pl-ng-row > .col-xs-12.column-default {
		grid-column: 1 / -1;
	}
}