/* Navegacion horizontal de escritorio. */

.ace-desktop-nav {
	border-block-start: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	inline-size: 100%;
	padding-inline: var(--wp--custom--gutter, 1rem);
	position: relative;
	z-index: calc(var(--wp--custom--layer--header, 100) - 1);
}

.ace-desktop-nav.is-sticky {
	position: sticky;
	top: var(--wp--custom--bar--header-desktop, 6rem);
}

.elementor-widget-ace-desktop-navigation {
	flex-grow: 1;
	inline-size: 100%;
}

.ace-desktop-nav__row {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size, 80rem);
}

.ace-desktop-nav__inner {
	min-inline-size: 0;
	overflow-x: auto;
	padding-block: 0.25rem 0;
	scrollbar-width: none;
}

.ace-desktop-nav__inner::-webkit-scrollbar {
	display: none;
}

/* Acceso fijo a "Seguir mi pedido": se ve como cualquier otro link de esta
barra (mismo tamano, mismo subrayado al pasar el mouse), pero vive fuera de
la lista que se hace scroll y queda empujado al extremo derecho. */
.ace-desktop-nav__tracking {
	flex-shrink: 0;
	gap: 0.375rem;
	margin-inline-start: auto;
}

.ace-desktop-nav__tracking-icon {
	block-size: 1.125rem;
	inline-size: 1.125rem;
}

.ace-desktop-nav__list {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ace-desktop-nav__item {
	margin: 0;
}

.ace-desktop-nav__link {
	align-items: center;
	border-block-end: 2px solid transparent;
	color: inherit;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	padding-block: 0;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}

/* Area de toque de 44px sin agrandar la caja visible: la linea del link
queda pegada al texto y el radio clickeable/tocable sigue cumpliendo el
minimo de accesibilidad. */
.ace-desktop-nav__link::after {
	block-size: var(--wp--custom--target--min, 2.75rem);
	content: "";
	inset-block-start: 50%;
	inset-inline: 0;
	position: absolute;
	transform: translateY(-50%);
}

.ace-desktop-nav__link:hover,
.ace-desktop-nav__link.is-active {
	border-block-end-color: var(--wp--preset--color--accent, #3f4a5a);
	color: var(--wp--preset--color--accent, #3f4a5a);
	text-decoration: none;
}

/* Un item destacado (ej. "Ofertas") lleva el color todo el tiempo, sin el
subrayado de foco: ese subrayado queda reservado para hover y pagina activa,
tal como esta aprobado en el prototipo. */
.ace-desktop-nav__link.is-emphasized {
	color: var(--wp--preset--color--accent, #3f4a5a);
}

/* El componente debe seguir editable aunque el lienzo del editor sea angosto. */
.block-editor-block-list__block .ace-desktop-nav,
.elementor-editor-active .ace-desktop-nav {
	display: block !important;
	position: relative;
	top: auto;
}

@media (max-width: 64rem) {
	.ace-desktop-nav.is-collapse-1024 {
		display: none;
	}
}

@media (max-width: 48rem) {
	.ace-desktop-nav.is-collapse-768 {
		display: none;
	}
}