/*
 * Project-level styles for the Alfacom website.
 * Keep page-specific rules grouped and documented as the site grows.
 */

/* Keep the shared footer at the bottom when a catalog page is shorter than the viewport. */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

#content.site-content {
	flex: 1 0 auto;
	background: #f6f7f7;
}

#page.site > footer,
#page.site > .elementor-location-footer {
	flex: 0 0 auto;
}

/* Homepage redesign: restrained catalog grid and full-screen product map. */
body.home,
body.home #content.site-content {
	background: #f3f4f2;
}


.alfacom-home-hero {
	position: relative;
	margin: 0;
}

.alfacom-home-hero .home-hotspot-widget .osteo-tooltip-container > img {
	display: block;
	width: 100%;
	height: calc(100vh - 96px);
	min-height: 680px;
	object-fit: cover;
}

.alfacom-home-hero__copy {
	z-index: 2;
	pointer-events: none;
}

.alfacom-home-hero__title .elementor-heading-title {
	color: #fff !important;
	letter-spacing: -0.035em;
}

.alfacom-home-hero__text p {
	margin: 0;
	color: #fff;
}

@media (min-width: 768px) {
	.alfacom-home-hero__copy {
		/* Align the copy with the site's content grid without covering the main facade. */
		padding-left: clamp(52px, calc((100vw - 1360px) / 2 + 52px), 210px) !important;
	}
}

.alfacom-home-content,
.alfacom-home-contacts {
	box-shadow: none;
}

.alfacom-home-section-title .elementor-heading-title {
	letter-spacing: -0.025em;
}

.alfacom-home-group {
	margin-bottom: 30px;
}

.alfacom-home-lower-groups .alfacom-home-group {
	margin-bottom: 0;
}

/* Elementor may preserve an implicit grid track here; this row must fit its cards. */
.alfacom-home-lower-groups,
.alfacom-home-lower-groups > .e-con,
.alfacom-home-lower-groups > .e-con > .e-con-inner,
.alfacom-home-lower-groups .alfacom-home-group {
	height: auto !important;
	min-height: 0 !important;
	align-self: flex-start;
}

.alfacom-home-lower-groups > .e-con {
	flex-grow: 0 !important;
}

.alfacom-home-group__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 12px;
	color: #22292d;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.alfacom-home-group__title i {
	display: block;
	height: 1px;
	flex: 1 1 auto;
	background: #d9dedf;
}

.alfacom-home-card {
	min-height: 0;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.alfacom-home-card:hover {
	border-color: #477482 !important;
	transform: translateY(-2px);
}

.alfacom-home-card__visual {
	background: #e8eaeb;
}

.alfacom-home-card__image,
.alfacom-home-card__image .elementor-widget-container,
.alfacom-home-card__image img {
	display: block;
	width: 100%;
	height: 138px;
	margin: 0;
}

.alfacom-home-card__image img {
	object-fit: cover;
}

.alfacom-home-card .elementor-widget-text-editor {
	margin-top: auto;
}

.alfacom-home-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 11px 13px;
	color: #22292d;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

.alfacom-home-card__label span:last-child {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.alfacom-home-contacts__details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: #22292d;
	font-size: 16px;
	line-height: 1.38;
}

.alfacom-home-contacts__details > a,
.alfacom-home-contacts__details > div {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	color: inherit;
	text-decoration: none;
}

.alfacom-home-contacts__details i {
	width: 17px;
	margin-top: 2px;
	color: #22292d;
	font-size: 16px;
	text-align: center;
}

.alfacom-home-contacts__details svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 2px;
	fill: none;
	stroke: #22292d;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.alfacom-home-contacts__details svg path:not([fill="none"]),
.alfacom-home-contacts__details svg circle:not([fill="none"]) {
	fill: #22292d;
	stroke: none;
}

.alfacom-home-contacts__info {
	flex: 0 0 26% !important;
}

.alfacom-home-contacts__map-wrap {
	flex: 1 1 0 !important;
	min-width: 0;
}

.alfacom-home-map {
	height: 250px;
	overflow: hidden;
	border: 0;
	border-radius: 8px;
	background: #fff;
}

.alfacom-home-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Alternative home-page version built with native Elementor widgets. */
.alfacom-native-kicker p {
	margin: 0 0 8px;
	color: #477482;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.alfacom-native-group {
	margin-bottom: 34px;
}

.alfacom-native-group__title .elementor-heading-title {
	padding-bottom: 12px;
	border-bottom: 1px solid #d9dedf;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.alfacom-native-card {
	transition: border-color .18s ease, transform .18s ease;
}

.alfacom-native-card:hover {
	border-color: #477482 !important;
	transform: translateY(-2px);
}

.alfacom-native-card__title .elementor-heading-title {
	font-size: 14px;
}

.alfacom-native-icon .elementor-icon {
	color: #477482;
}

/* The whole card is a link, so the icon cannot receive hover on its own. */
.alfacom-native-card .alfacom-native-icon {
	transition: transform 200ms ease;
}

.alfacom-native-card:hover .alfacom-native-icon {
	transform: translateX(5px);
}

.alfacom-native-bottom-groups .alfacom-native-group {
	margin-bottom: 0;
}

.alfacom-native-contact-row .elementor-widget-text-editor p {
	margin: 0;
	color: #22292d;
	font-size: 16px;
	line-height: 1.4;
}

.alfacom-native-contact-row .alfacom-native-icon {
	flex: 0 0 20px;
}

.alfacom-native-contact-row .alfacom-native-icon .elementor-icon {
	font-size: 17px;
	color: #22292d;
}

.alfacom-native-map-wrap {
	flex: 1 1 0 !important;
	min-width: 0;
}

.alfacom-native-map {
	height: 260px;
	overflow: hidden;
	border-radius: 8px;
	background: #eef1f3;
}

.alfacom-native-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.alfacom-native-map {
		height: 230px;
	}
}

@media (max-width: 1024px) {
	.alfacom-home-hero .home-hotspot-widget .osteo-tooltip-container > img {
		height: 74vh;
		min-height: 560px;
	}

	.alfacom-home-group--facade > .e-con-inner,
	.alfacom-home-group--facade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.alfacom-home-hero .home-hotspot-widget .osteo-tooltip-container > img {
		height: 68vh;
		min-height: 430px;
	}

	.alfacom-home-hero__copy {
		background: linear-gradient(90deg, rgba(16, 23, 28, 0.88), rgba(16, 23, 28, 0));
	}

	.alfacom-home-content {
		padding-top: 26px !important;
		padding-bottom: 30px !important;
	}

	.alfacom-home-card__image,
	.alfacom-home-card__image .elementor-widget-container,
	.alfacom-home-card__image img {
		height: 148px;
	}

	.alfacom-home-lower-groups {
		gap: 22px !important;
	}

	.alfacom-home-map {
		height: 230px;
	}
}

/* Mobile drawer contacts */
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone {
	margin-top: 18px !important;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a,
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 12px !important;
	padding-left: 0 !important;
	border-bottom: 0 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	opacity: 0.96;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a:hover,
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a:hover {
	color: #c29a5c !important;
	opacity: 1;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a::before,
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a::before {
	display: inline-flex;
	width: 18px;
	flex: 0 0 18px;
	justify-content: center;
	font-family: FontAwesome;
	font-size: 15px;
	font-weight: 400;
	color: #c29a5c;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a::before {
	content: "\f095";
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a::before {
	content: "\f0e0";
}

/* Mobile navigation drawer: align the inherited theme menu with the site shell. */
.mmenu-wrapper {
	width: min(360px, 100vw) !important;
	background: #192429 !important;
	box-shadow: -18px 0 42px rgba(10, 18, 22, 0.3);
}

.mmenu-wrapper .mmenu-inner {
	width: 100% !important;
	padding: 20px 26px 34px !important;
}

.mmenu-wrapper .mmenu-close {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 0 22px auto !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #ffffff !important;
	font-size: 18px;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.mmenu-wrapper .mmenu-close:hover {
	border-color: #2c86c7;
	background: #2c86c7;
}

.mmenu-wrapper .mobile-nav {
	min-width: 0 !important;
}

.mmenu-wrapper .mobile_mainmenu > li > a {
	padding: 14px 38px 14px 0 !important;
	border-bottom-color: rgba(255, 255, 255, 0.13) !important;
	color: #f5f8f8 !important;
	font-family: Roboto, sans-serif;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

.mmenu-wrapper .mobile_mainmenu > li > a:hover,
.mmenu-wrapper .mobile_mainmenu > li.current-menu-item > a,
.mmenu-wrapper .mobile_mainmenu > li.current-menu-ancestor > a {
	color: #8fc6e5 !important;
}

.mmenu-wrapper .mobile_mainmenu > li.current-menu-item > a::after,
.mmenu-wrapper .mobile_mainmenu > li.current-menu-ancestor > a::after {
	position: absolute;
	left: -26px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	background: #2c86c7;
	content: "";
}

.mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow {
	top: 7px !important;
	width: 38px !important;
	padding: 9px 0 !important;
	color: #9bb3bd !important;
	text-align: center !important;
}

.mmenu-wrapper .mobile_mainmenu ul {
	margin: 0 !important;
	padding: 4px 0 8px 14px !important;
	border-left: 0 !important;
}

.mmenu-wrapper .mobile_mainmenu li li a {
	padding: 9px 8px 9px 0 !important;
	border: 0 !important;
	color: #b7c6cb !important;
	font-family: Roboto, sans-serif;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.35;
}

.mmenu-wrapper .mobile_mainmenu li li a:hover {
	color: #ffffff !important;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone {
	margin-top: 24px !important;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a,
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a {
	color: #e8f0f2 !important;
	font-family: Roboto, sans-serif;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.mmenu-wrapper .mobile_mainmenu > li.menu-contact-phone > a::before,
.mmenu-wrapper .mobile_mainmenu > li.menu-contact-email > a::before {
	color: #8fc6e5 !important;
}

.mmenu-active .mmenu-overlay {
	background: rgba(8, 15, 18, 0.64) !important;
	backdrop-filter: blur(2px);
}

@media (max-width: 480px) {
	.mmenu-wrapper .mmenu-inner {
		padding-right: 22px !important;
		padding-left: 22px !important;
	}

	.mmenu-wrapper .mobile_mainmenu > li.current-menu-item > a::after,
	.mmenu-wrapper .mobile_mainmenu > li.current-menu-ancestor > a::after {
		left: -22px;
	}
}

/* Polymer coatings page */
.polymer-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 14px;
	align-items: flex-start;
}

.polymer-swatch {
	width: 88px;
	text-align: center;
}

.polymer-swatch__dot {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 10px;
	border: 1px solid #c9d8e4;
	border-radius: 50%;
}

.polymer-swatch__label {
	display: block;
	color: #556170;
	font-size: 12px;
	line-height: 1.35;
}

.catalog-swatch-groups {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.catalog-swatch-group__title {
	margin-bottom: 8px;
	color: #2a84ca;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.foramina-round-mobile-image {
	display: none;
}

.foramina-quadro-mobile-image {
	display: none;
}

.foramina-round-mobile-specs {
	display: none;
}

.foramina-quadro-mobile-specs {
	display: none;
}

@media (max-width: 767px) {
	.foramina-round-desktop-image {
		display: none;
	}

	.foramina-round-mobile-image {
		display: block;
	}

	.foramina-round-desktop-specs {
		display: none;
	}

	.foramina-round-mobile-specs {
		display: flex;
	}

	.foramina-quadro-desktop-image {
		display: none;
	}

	.foramina-quadro-mobile-image {
		display: block;
	}

	.foramina-quadro-desktop-specs {
		display: none;
	}

	.foramina-quadro-mobile-specs {
		display: flex;
	}
}

@media (max-width: 767px) {
	.polymer-swatches {
		justify-content: center;
		gap: 16px 8px;
	}

	.polymer-swatch {
		width: calc(33.333% - 8px);
		max-width: 92px;
	}
}

/* Roof trim page */
.page-id-212 .osteo-tooltip [class^="pointer-"],
.page-id-212 .osteo-tooltip [class*=" pointer-"],
.home-hotspot-widget .osteo-tooltip [class^="pointer-"],
.home-hotspot-widget .osteo-tooltip [class*=" pointer-"],
.roof-hotspot-widget .osteo-tooltip [class^="pointer-"],
.roof-hotspot-widget .osteo-tooltip [class*=" pointer-"],
.facade-hotspot-widget .osteo-tooltip [class^="pointer-"],
.facade-hotspot-widget .osteo-tooltip [class*=" pointer-"],
.sandwich-hotspot-widget .osteo-tooltip [class^="pointer-"],
.sandwich-hotspot-widget .osteo-tooltip [class*=" pointer-"] {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.page-id-212 .osteo-tooltip [class^="pointer-"] svg,
.page-id-212 .osteo-tooltip [class*=" pointer-"] svg,
.home-hotspot-widget .osteo-tooltip [class^="pointer-"] svg,
.home-hotspot-widget .osteo-tooltip [class*=" pointer-"] svg,
.roof-hotspot-widget .osteo-tooltip [class^="pointer-"] svg,
.roof-hotspot-widget .osteo-tooltip [class*=" pointer-"] svg,
.facade-hotspot-widget .osteo-tooltip [class^="pointer-"] svg,
.facade-hotspot-widget .osteo-tooltip [class*=" pointer-"] svg,
.sandwich-hotspot-widget .osteo-tooltip [class^="pointer-"] svg,
.sandwich-hotspot-widget .osteo-tooltip [class*=" pointer-"] svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.page-id-212 .tooltipster-content h4 {
	margin: 0 0 10px;
	color: #152534;
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.page-id-212 .tooltipster-content p {
	color: #556170;
	font-size: 15px;
	line-height: 1.5;
}

.home-hotspot-widget .tooltipster-content h4 {
	margin: 0 0 10px;
	color: #152534;
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.home-hotspot-widget .tooltipster-content p {
	color: #556170;
	font-size: 15px;
	line-height: 1.5;
}

/* Osteo does not expose popup width or a page link as widget controls. */
body.home .tooltipster-content {
	width: 360px;
	max-width: calc(100vw - 56px);
}

body.home .tooltipster-content img {
	display: block;
	width: 100% !important;
	max-width: 360px;
	height: auto;
	margin-bottom: 18px;
}

body.home .tooltipster-content .osteo-hotspot-page-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	color: #477482;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform 180ms ease, color 180ms ease;
}

body.home .tooltipster-content .osteo-hotspot-page-link span:last-child {
	font-size: 28px;
	font-weight: 400;
}

body.home .tooltipster-content .osteo-hotspot-page-link:hover {
	color: #1d2529;
	transform: translateX(4px);
}

.home-hotspot-widget .osteo-tooltip-container > img {
	display: block;
	width: 100%;
	height: calc(100vh - 96px);
	min-height: 760px;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.home-hotspot-widget .osteo-tooltip-container > img {
		height: 74vh;
		min-height: 560px;
	}
}

@media (max-width: 767px) {
	.home-hotspot-widget .osteo-tooltip-container > img {
		height: 68vh;
		min-height: 420px;
	}
}

/* Main catalog dropdown */
@media (min-width: 992px) {
	.main-navigation > ul > li.menu-item-387 > ul.sub-menu,
	.main-navigation > ul > li.menu-item-406 > ul.sub-menu {
		left: 50%;
		top: 100% !important;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
		width: min(1040px, calc(100vw - 48px));
		min-width: 0;
		padding: 18px;
		background: rgba(255, 255, 255, 0.98);
		border: 1px solid #dde3e5;
		border-radius: 10px;
		box-shadow: 0 22px 48px rgba(10, 20, 24, 0.2);
		white-space: normal;
		transform: translateX(-50%) translateY(8px);
		z-index: 9999;
	}

	.main-navigation > ul > li.menu-item-387:hover > ul.sub-menu,
	.main-navigation > ul > li.menu-item-406:hover > ul.sub-menu {
		top: 100% !important;
		transform: translateX(-50%) translateY(0);
	}

	.main-navigation > ul > li.menu-item-387 > ul.sub-menu::before,
	.main-navigation > ul > li.menu-item-406 > ul.sub-menu::before {
		display: none;
	}

	.main-navigation > ul > li.menu-item-387 > ul.sub-menu > li,
	.main-navigation > ul > li.menu-item-406 > ul.sub-menu > li {
		border: 0;
		min-width: 0;
	}

	body .site-header .main-navigation > ul > li.menu-item-387 > ul.sub-menu > li > a,
	body .site-header .main-navigation > ul > li.menu-item-406 > ul.sub-menu > li > a,
	body .main-navigation > ul > li.menu-item-387 > ul.sub-menu > li > a,
	body .main-navigation > ul > li.menu-item-406 > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 12px 15px;
		color: #222c31 !important;
		background: #ffffff;
		border: 1px solid #dfe5e7;
		border-radius: 7px;
		font-family: Roboto, sans-serif;
		font-size: 12px !important;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1.28;
		text-transform: none;
		transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	}

	.main-navigation > ul > li.menu-item-387 > ul.sub-menu > li:hover > a,
	.main-navigation > ul > li.menu-item-406 > ul.sub-menu > li:hover > a,
	.main-navigation > ul > li.menu-item-387 > ul.sub-menu > li.current-menu-item > a,
	.main-navigation > ul > li.menu-item-406 > ul.sub-menu > li.current-menu-item > a {
		color: #f3f4f2 !important;
		background: #1d2529;
		border-color: #1d2529;
		box-shadow: none;
	}

	/* Elementor's header CSS loads after this file, so match its widget selector. */
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-387 > ul.sub-menu > li:hover > a,
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-406 > ul.sub-menu > li:hover > a,
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-387 > ul.sub-menu > li.current-menu-item > a,
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-406 > ul.sub-menu > li.current-menu-item > a,
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-387 > ul.sub-menu > li.current-menu-ancestor > a,
	body .elementor-11 .elementor-element.elementor-element-0460fe1 .main-navigation > ul > li.menu-item-406 > ul.sub-menu > li.current-menu-ancestor > a {
		color: #f3f4f2 !important;
		background-color: #1d2529 !important;
		border-color: #1d2529 !important;
	}
}