/* Forçar título e tabs a ficarem em linhas separadas,
		 * independentemente do número de tabs ou comprimento do título. */
		.three-tiles-header {
			flex-wrap: wrap !important;
			align-items: flex-start !important;
		}

		.three-tiles-header .three-tiles-title {
			flex: 0 0 100% !important;
			width: 100% !important;
		}

        .col-features-wrapper, .footer-seo { margin: auto; }

		.menu-container {
			max-width: 1320px;
			padding: 16px 0px 0px 0px;
			width: 100%;
			flex-basis: 100%;
		}

		.menu-tabs {
			display: flex;
			gap: 12px;
			justify-content: flex-start;
		}

		.menu-tab {
			border-radius: 80px;
			padding: 8px 24px;
			font-size: 14px;
			line-height: 20px;
			font-weight: 600;
			background: #F7F7F7;
			color: #32312D;
			border: 1px solid transparent;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.menu-tab:hover {
			opacity: 0.8;
		}

		.menu-tab.active {
			background: rgba(235, 2, 3, 0.15);
			border-color: #eb0203;
			color: #eb0203;
		}

		.carousel-campanha {
			display: none;
			width: 100%;
			margin: 0;
		}

		.carousel-campanha.visible {
			display: block;
		}

		/*
		 * Collapse the SFCC productCarousel host component when inactive
		 * to prevent Page Designer from stacking top spacing/margins.
		 */
		.carousel-host-hidden {
			display: none !important;
			margin-top: 0 !important;
			padding-top: 0 !important;
		}

		.carousel-host-visible {
			display: block !important;
			margin-top: 0 !important;
			padding-top: 0 !important;
		}

		/* Tablet: garantir alinhamento correto do menu com o título */
		@media (min-width: 769px) and (max-width: 1024px) {
			.row.three-tiles-header {
				margin-left: 0 !important;
				margin-right: 0 !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

			.three-tiles-header .three-tiles-title {
				padding-left: 0 !important;
				margin-left: 0 !important;
			}

			.three-tiles-header .menu-container {
				padding: 16px 0px 0px 0px !important;
				margin-left: 0 !important;
				margin-right: 0 !important;
				max-width: 100% !important;
			}

			.three-tiles-header .menu-tabs {
				justify-content: flex-start !important;
				padding-left: 0 !important;
				margin-left: 0 !important;
			}
			.menu-container{
				padding: 12px 0px 0px 22px !important;
			}
		}

		@media (max-width: 768px) {
			.three-tiles-header {
				margin-left: -22px;
			}

			/* Prevenir que JavaScript aplique dimensões erradas (> 200px largura) */
			.carousel-campanha .product-carousel-banner-container .ITC-image[style*="width: 2"],
			.carousel-campanha .product-carousel-banner-container .ITC-image[style*="width: 3"],
			.carousel-campanha .product-carousel-banner-container .image-desktop[style*="width: 2"],
			.carousel-campanha .product-carousel-banner-container .image-desktop[style*="width: 3"],
			.carousel-campanha .product-carousel-banner-container .image-mobile[style*="width: 2"],
			.carousel-campanha .product-carousel-banner-container .image-mobile[style*="width: 3"] {
				width: 187px !important;
				height: auto !important;
			}

			/* Garantir alinhamento pixel-perfect: forçar mesma largura em todos os slides */
			.carousel-campanha .slick-slide {
				max-width: 187px !important;
			}

			/* Garantir que imagens de produtos não ultrapassem o container */
			.carousel-campanha .product-tile .tile-image {
				width: 100% !important;
				max-width: 187px !important;
			}

			.carousel-campanha .product-tile .tile-image img[style*="--focal-point"] {
				width: 100% !important;
				height: auto !important;
				max-width: 187px !important;
				object-fit: contain;
			}

			.menu-container {
				padding: 12px 0px 0px 0px;
			}

			.menu-tabs {
				overflow-x: auto;
				padding-bottom: 2px;
				gap: 8px;
				justify-content: flex-start;
			}

			.menu-tab {
				padding: 8px 16px;
				font-size: 12px;
			}
		}