/*
 * JL Mobile Menu — Rediseño visual premium
 * v4: NO interferimos con la animación GSAP de Oxygen.
 * Solo estilos visuales: colores, fuentes, espaciado.
 * Oxygen maneja altura y visibilidad. Nosotros manejamos el look.
 */

@media (max-width: 767px) {

	/* ─── Contenedor del menú ────────────────────────────────────────────── *
	 * Oxygen pone: display:block, height:0px (cerrado) → height:auto (abierto).
	 * Solo añadimos fondo y borde — sin tocar overflow, height ni opacity.   */
	.mobile-menu {
		background: #fffaf4 !important;
		border-bottom: 1px solid rgba(178, 146, 71, 0.18) !important;
	}

	/* Borde dorado superior solo cuando está abierto (.visible lo pone Oxygen) */
	.mobile-menu.visible {
		border-top: 2.5px solid #b29247 !important;
		box-shadow: 0 8px 32px rgba(36, 31, 27, 0.10) !important;
	}

	/* ─── Items principales ──────────────────────────────────────────────── */
	.mobile-menu .nav {
		margin: 0 !important;
		padding: 4px 0 8px !important;
		list-style: none !important;
	}

	.mobile-menu .nav > li {
		margin: 0 !important;
		border-bottom: 1px solid rgba(178, 146, 71, 0.09) !important;
	}

	.mobile-menu .nav > li:last-child {
		border-bottom: none !important;
	}

	.mobile-menu .nav > li > a {
		display: flex !important;
		align-items: center !important;
		min-height: 58px !important;
		padding: 14px 22px !important;
		color: #241f1b !important;
		font-size: 19px !important;
		font-weight: 300 !important;
		letter-spacing: 0.04em !important;
		text-decoration: none !important;
		line-height: 1.3 !important;
	}

	.mobile-menu .nav > li > a:hover,
	.mobile-menu .nav > li > a:focus {
		color: #9b7c39 !important;
		background: rgba(178, 146, 71, 0.05) !important;
		text-decoration: none !important;
	}

	/* Item activo */
	.mobile-menu .nav > li.current-menu-item > a,
	.mobile-menu .nav > li.current-menu-parent > a,
	.mobile-menu .nav > li.current_page_parent > a,
	.mobile-menu .nav > li.current_page_ancestor > a {
		color: #9b7c39 !important;
		font-weight: 500 !important;
	}

	/* ─── Botón expand de Oxygen (.expand) ──────────────────────────────── */
	.mobile-menu .expand {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		width: 58px !important;
		height: 58px !important;
		color: rgba(36, 31, 27, 0.35) !important;
		font-size: 18px !important;
		background: none !important;
		border: none !important;
		cursor: pointer !important;
		transition: color 0.18s ease, transform 0.22s ease !important;
	}

	.mobile-menu .nav > li > a {
		position: relative !important;
		padding-right: 60px !important; /* espacio para .expand */
	}

	/* Girar ícono cuando está expandido (.visible lo añade Oxygen al <li>) */
	.mobile-menu .nav > li.visible > a > .expand,
	.mobile-menu .nav > li.visible .expand {
		transform: rotate(45deg) !important;
		color: #9b7c39 !important;
	}

	/* SVG que nuestro JS inyecta en .expand */
	.mobile-menu .jl-chevron-svg {
		width: 20px !important;
		height: 20px !important;
		stroke: currentColor !important;
		fill: none !important;
	}

	/* Cuando está expandido: girar el SVG */
	.mobile-menu .nav > li.visible .jl-chevron-svg {
		transform: rotate(180deg) !important;
	}

	/* ─── Submenús ───────────────────────────────────────────────────────── */
	.mobile-menu .sub-menu {
		background: rgba(247, 245, 243, 0.8) !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
		border-top: 1px solid rgba(178, 146, 71, 0.08) !important;
	}

	.mobile-menu .sub-menu li a {
		display: flex !important;
		align-items: center !important;
		min-height: 50px !important;
		padding: 10px 22px 10px 38px !important;
		color: rgba(36, 31, 27, 0.7) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		letter-spacing: 0.02em !important;
		text-decoration: none !important;
		border-bottom: 1px solid rgba(178, 146, 71, 0.06) !important;
	}

	.mobile-menu .sub-menu li:last-child a {
		border-bottom: none !important;
	}

	.mobile-menu .sub-menu li a:hover,
	.mobile-menu .sub-menu li.current-menu-item a {
		color: #9b7c39 !important;
		background: rgba(178, 146, 71, 0.05) !important;
	}

	/* ─── Ítem del carrito ───────────────────────────────────────────────── */
	.mobile-menu a.cart-items {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		min-height: 56px !important;
		padding: 14px 22px !important;
		background: rgba(178, 146, 71, 0.07) !important;
		border-top: 1px solid rgba(178, 146, 71, 0.14) !important;
		border-bottom: 1px solid rgba(178, 146, 71, 0.14) !important;
		color: #9b7c39 !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		letter-spacing: 0.02em !important;
		text-decoration: none !important;
	}

	.mobile-menu .cart-items span {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 24px !important;
		height: 24px !important;
		padding: 0 6px !important;
		border-radius: 999px !important;
		background: #b29247 !important;
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
	}

} /* end @media */