/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Page Title Flexbox Fix (Prevents Title and Breadcrumbs Overlap)
-----------------------------------------------------------------*/
#page-title {
	padding: 2.5rem 0 !important;
	background-color: #F8F9FA !important;
	border-bottom: 1px solid #E9ECEF !important;
}

#page-title .container {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px 24px !important;
	position: relative !important;
}

#page-title h1 {
	flex: 1 1 320px !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(20px, 2.5vw, 28px) !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	color: #222222 !important;
	word-break: break-word !important;
}

#page-title .breadcrumb {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	flex-shrink: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	font-size: 13px !important;
}

@media (max-width: 767.98px) {
	#page-title {
		padding: 1.5rem 0 !important;
	}
	#page-title .container {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 10px !important;
	}
	#page-title h1 {
		flex: 0 0 auto !important;
		width: 100% !important;
		text-align: center !important;
	}
	#page-title .breadcrumb {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		margin: 4px 0 0 !important;
	}
}

/* ----------------------------------------------------------------
	Mobile Menu Fix — Jerarquía visual clara en móvil
-----------------------------------------------------------------*/
@media (max-width: 991.98px) {

	/* Ítems principales: azul oscuro, en mayúsculas */
	.menu-container > .menu-item > .menu-link {
		color: #001781 !important;
		font-weight: 700 !important;
		font-size: 0.8125rem !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		padding: 14px 5px !important;
	}

	/* Subítems: gris, más pequeños, con sangría */
	.sub-menu-container .menu-item > .menu-link {
		color: #555 !important;
		font-weight: 400 !important;
		font-size: 0.78rem !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		padding: 10px 5px 10px 10px !important;
	}

	/* Hover en subítems */
	.sub-menu-container .menu-item:hover > .menu-link {
		color: #4BA92A !important;
		font-weight: 600 !important;
	}

	/* Hover en ítems principales */
	.menu-container > .menu-item:hover > .menu-link,
	.menu-container > .menu-item.current > .menu-link {
		color: #4BA92A !important;
	}

	/* Línea separadora más visible entre ítems principales */
	.menu-item:not(:first-child) {
		border-top: 1px solid #DDD !important;
	}

	/* Fondo del submenú ligeramente diferenciado */
	.sub-menu-container {
		background-color: #F8F8F8 !important;
		border-left: 3px solid #4BA92A !important;
		padding-left: 10px !important;
	}
}

/* ----------------------------------------------------------------
	Mobile Mega Menu Fix — Productos legibles en móvil
-----------------------------------------------------------------*/
@media (max-width: 991.98px) {
	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-col {
		padding: 10px 0 8px !important;
	}

	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-col + .mm-col {
		margin-top: 8px !important;
	}

	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-col-title {
		font-size: 0.95rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.02em !important;
		text-transform: none !important;
		color: #1f2b45 !important;
		margin-bottom: 2px !important;
		padding: 0 !important;
		border-bottom: none !important;
	}

	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-list .mm-item {
		display: flex !important;
		align-items: flex-start !important;
		gap: 8px !important;
		padding: 6px 0 6px 14px !important;
		border-bottom: none !important;
	}

	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-list .mm-item::before {
		content: "•";
		color: #4BA92A;
		font-size: 0.95rem;
		line-height: 1.45;
	}

	.primary-menu .menu-item.mega-menu .mega-menu-panel .mm-list .mm-item .mm-title {
		font-size: 0.9rem !important;
		font-weight: 500 !important;
		color: #5a6470 !important;
		line-height: 1.45 !important;
	}
}

/* ----------------------------------------------------------------
	Global Mobile Quality Pass
	- No content changes
	- Responsive overrides for repeated fixed-height inline blocks
-----------------------------------------------------------------*/
@media (max-width: 991.98px) {
	body {
		overflow-x: hidden;
	}

	.content-wrap {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	/* Product gallery blocks with inline height:420px */
	a.d-flex.align-items-center.justify-content-center.rounded.shadow-sm[style*="height: 420px"] {
		height: auto !important;
		min-height: 220px !important;
		aspect-ratio: 4 / 3;
		padding: 12px !important;
	}

	a.d-flex.align-items-center.justify-content-center.rounded.shadow-sm[style*="height: 420px"] > img {
		max-height: 100% !important;
		max-width: 100% !important;
		object-fit: contain !important;
	}

	/* Category cards with inline height:280px */
	.card .card-img-top[style*="height: 280px"] {
		height: auto !important;
		min-height: 200px !important;
		aspect-ratio: 4 / 3;
		padding: 12px !important;
	}

	.card .card-img-top[style*="height: 280px"] img {
		max-height: 100% !important;
		width: 100% !important;
		object-fit: contain !important;
	}

	/* Home banners with fixed 420px height */
	a.d-block.position-relative.rounded.overflow-hidden.shadow-sm[style*="background-image"][style*="height: 420px"] {
		height: clamp(220px, 56vw, 320px) !important;
	}

	/* Contact map wrapper with inline height:450px */
	#content .col-12[style*="height: 450px"] {
		height: auto !important;
	}

	#content .gmap {
		height: clamp(260px, 62vw, 360px) !important;
	}
}

@media (max-width: 767.98px) {
	/* Tighten vertical rhythm on small devices */
	.row.col-mb-30,
	.row.col-mb-50,
	.row.col-mb-80 {
		--cnvs-col-mb: 20px;
	}

	/* Hero text with large inline font sizes */
	.slider-caption p[style*="font-size: 2.2rem"] {
		font-size: clamp(1.15rem, 5.2vw, 1.45rem) !important;
		line-height: 1.3 !important;
	}

	.slider-caption h2[style*="font-size: 5rem"] {
		font-size: clamp(1.85rem, 11vw, 2.55rem) !important;
		line-height: 1.1 !important;
		letter-spacing: -0.02em !important;
	}

	.slider-caption a.button[style*="font-size: 1.1rem"] {
		font-size: 0.92rem !important;
		padding: 0 18px !important;
	}
}