/*
 * JL Mobile Core — Mejoras globales para la experiencia móvil
 * Cargado en todas las páginas del frontend.
 * Breakpoint principal: 767px (móvil) / 768px (tablet+)
 */

/* ─── 1. iOS: Prevenir zoom automático al hacer focus en inputs ──────────── *
 * iOS Safari hace zoom si font-size < 16px. Este es el fix #1 en conversión. */
@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* ─── 2. Touch targets mínimos — WCAG 2.5.5 y Apple HIG recomiendan 44×44px */
@media (max-width: 767px) {
	/* Botones WooCommerce principales */
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.single_add_to_cart_button,
	.checkout-button,
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		min-height: 52px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100%;
		font-size: 15px;
		letter-spacing: 0.04em;
	}

	/* ATC en listado de productos: no full-width */
	.woocommerce ul.products li.product .add_to_cart_button {
		min-height: 44px !important;
		width: auto !important;
		padding: 10px 16px !important;
	}

	/* Items del menú móvil */
	.mobile-menu .nav > li > a,
	.mobile-menu .nav ul > li > a {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	/* Botón hamburguesa */
	.mobile-menu-link a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ─── 3. Tap highlight dorado y eliminación del delay de 300ms ───────────── */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.button {
	-webkit-tap-highlight-color: rgba(178, 146, 71, 0.14);
	touch-action: manipulation;
}

/* ─── 4. Scroll suave nativo ─────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

/* ─── 5. Evitar scroll horizontal no deseado en móvil ───────────────────── */
@media (max-width: 767px) {
	body {
		overflow-x: hidden;
	}
}

/* ─── 6. Menú móvil — mejoras de espaciado y legibilidad ────────────────── */
@media (max-width: 767px) {
	/* ── Hamburger premium: 3 líneas finas con acento dorado ─────────── *
	 * Líneas exterior: #241f1b (negro JL)                                *
	 * Línea central: #b29247 (dorado JL) — firma visual de marca         */
	.mobile-menu-link {
		padding: 0 2px;
	}

	.mobile-menu-link a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 4px;
	}

	.mobile-menu-link a .glyphicon-align-justify {
		display: block;
		position: relative;
		width: 24px;
		height: 15px;
		font-size: 0 !important;
		background-image:
			linear-gradient(#241f1b, #241f1b),
			linear-gradient(#b29247, #b29247),
			linear-gradient(#241f1b, #241f1b);
		background-repeat: no-repeat;
		background-size:
			24px 1.5px,
			16px 1.5px,
			24px 1.5px;
		background-position:
			0 0,
			4px 6.75px,
			0 13.5px;
	}

	/* Cancelar el ::before del glyphicon */
	.mobile-menu-link a .glyphicon-align-justify::before {
		content: "" !important;
	}

	/* Separadores y espaciado generoso en items del menú */
	.mobile-menu .nav > li {
		border-bottom: 1px solid rgba(178, 146, 71, 0.12);
	}

	.mobile-menu .nav > li > a {
		padding: 14px 20px;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0.03em;
		color: #241f1b;
	}

	.mobile-menu .nav ul > li > a {
		padding: 12px 20px 12px 32px;
		font-size: 14px;
		color: rgba(36, 31, 27, 0.72);
	}

	/* Carrito en el menú móvil */
	.mobile-menu a.cart-items {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 14px 20px;
		border-top: 1px solid rgba(178, 146, 71, 0.18);
		color: #9b7c39;
		font-weight: 700;
		text-decoration: none;
		font-size: 15px;
	}

	.mobile-menu .cart-items span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		min-height: 22px;
		border-radius: 50%;
		background: #d9b865;
		color: #241f1b;
		font-size: 11px;
		font-weight: 700;
	}
}

/* ─── 7. WooCommerce: input de cantidad táctil ───────────────────────────── */
@media (max-width: 767px) {
	.woocommerce .quantity .qty {
		min-width: 52px;
		min-height: 52px;
		font-size: 16px !important;
		text-align: center;
	}

	.woocommerce .quantity .minus,
	.woocommerce .quantity .plus {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}
}

/* ─── 8. Scroll momentum para carruseles (iOS legacy) ───────────────────── */
@media (max-width: 767px) {
	.jl-testimonials__carousel,
	.slick-list,
	.slick-track {
		-webkit-overflow-scrolling: touch;
	}
}

/* ─── 9. prefers-reduced-motion — accesibilidad ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.jl-home-category-card__image,
	.jl-instagram-community__tile img,
	.joyeria-hero-slide {
		transition: none !important;
	}
}

/* ─── 10. Focus ring accesible en toda la UI ─────────────────────────────── */
:focus-visible {
	outline: 2px solid #b29247;
	outline-offset: 3px;
}
/* 11. Hero Slider: texto primero y fotografia debajo en movil. */
@media (max-width: 767px) {
	body.home .joyeria-hero-slider,
	body.front-page .joyeria-hero-slider {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-right: calc(50% - 50vw) !important;
		margin-left: calc(50% - 50vw) !important;
		overflow: hidden !important;
		background: #f7f5f3 !important;
		box-sizing: border-box !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__viewport,
	.joyeria-hero-slider .joyeria-hero-slide,
	.joyeria-hero-slider .joyeria-hero-slide__inner {
		min-height: clamp(650px, 82svh, 730px) !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100vw !important;
		padding: 22px 18px 38px !important;
		gap: 8px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__content,
	.joyeria-hero-slider .joyeria-hero-slide--image-right .joyeria-hero-slide__content {
		position: relative !important;
		z-index: 2 !important;
		order: 1 !important;
		width: 100% !important;
		max-width: min(330px, calc(100vw - 40px)) !important;
		margin: 0 auto !important;
		padding: 0 2px 10px !important;
		text-align: center !important;
		transform: none !important;
		color: #27272d !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__media,
	.joyeria-hero-slider .joyeria-hero-slide--image-right .joyeria-hero-slide__media,
	body.home .joyeria-hero-slide__media,
	body.front-page .joyeria-hero-slide__media {
		position: relative !important;
		z-index: 1 !important;
		order: 2 !important;
		display: flex !important;
		flex: 1 1 330px !important;
		align-items: flex-end !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 300px !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__media::after {
		content: none !important;
		display: none !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__image-frame,
	.joyeria-hero-slider .joyeria-hero-slide__picture {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 430px !important;
		margin: 0 !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__image {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center bottom !important;
		transform: none !important;
		transform-origin: center bottom !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__eyebrow {
		margin: 0 0 9px !important;
		color: #a18143 !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
		text-transform: uppercase !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__title {
		display: block !important;
		width: min(100%, 285px) !important;
		max-width: calc(100vw - 44px) !important;
		margin: 0 0 10px !important;
		color: #232329 !important;
		font-family: Georgia, "Times New Roman", serif !important;
		font-size: clamp(25px, 6.9vw, 28px) !important;
		font-weight: 400 !important;
		line-height: 1.08 !important;
		letter-spacing: 0 !important;
		text-wrap: balance !important;
		white-space: normal !important;
		overflow: visible !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__description {
		max-width: 300px !important;
		margin: 0 auto 11px !important;
		color: rgba(39, 39, 45, 0.72) !important;
		font-size: 13.5px !important;
		line-height: 1.42 !important;
		white-space: normal !important;
		overflow-wrap: normal !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__description p {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: inherit !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__price {
		margin: 0 0 10px !important;
		color: #b29247 !important;
		font-size: 22px !important;
		font-weight: 400 !important;
		line-height: 1.1 !important;
		letter-spacing: 0 !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__fine-print {
		display: none !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__button {
		display: inline-flex !important;
		width: auto !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 11px 22px !important;
		border: 1px solid #27272d !important;
		border-radius: 0 !important;
		background: #27272d !important;
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__arrow {
		display: none !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__dots {
		bottom: 13px !important;
		z-index: 4 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__dot {
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
		flex: 0 0 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: rgba(39, 39, 45, 0.2) !important;
		font-size: 0 !important;
		line-height: 0 !important;
		text-indent: -9999px !important;
		appearance: none !important;
		-webkit-appearance: none !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__dot.is-active {
		background: #b29247 !important;
		transform: none !important;
	}

	/* Product cards: evitar que la cinta Featured se corte dentro del carrusel. */
	.jl-home-product-band .products .product .product-featured,
	.woocommerce .products .product .product-featured,
	.jl-home-product-band .products .product .sale_tag,
	.woocommerce .products .product .sale_tag {
		overflow: visible !important;
	}

	.jl-home-product-band .products .product .ribbon,
	.woocommerce .products .product .ribbon {
		top: -8px !important;
		left: 20px !important;
		position: absolute !important;
	}

	.jl-home-product-band .products .product .product-featured .ribbon .ribbon-content,
	.woocommerce .products .product .product-featured .ribbon .ribbon-content {
		padding-top: 7px !important;
		padding-bottom: 7px !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}
}

@media (max-width: 390px) {
	.joyeria-hero-slider .joyeria-hero-slider__viewport,
	.joyeria-hero-slider .joyeria-hero-slide,
	.joyeria-hero-slider .joyeria-hero-slide__inner {
		min-height: 650px !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__inner {
		padding-top: 18px !important;
	}

	.joyeria-hero-slider .joyeria-hero-slide__media {
		min-height: 285px !important;
	}
}

/* 11b. Tablet/movil Oxygen: mantener dots y cintas de producto sin deformarse. */
@media (max-width: 991px) {
	.joyeria-hero-slider .joyeria-hero-slider__dots {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__dot {
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
		flex: 0 0 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		font-size: 0 !important;
		line-height: 0 !important;
		text-indent: -9999px !important;
		appearance: none !important;
		-webkit-appearance: none !important;
	}

	.joyeria-hero-slider .joyeria-hero-slider__dot.is-active {
		transform: none !important;
	}

	.jl-home-product-band .products .product .product-featured,
	.woocommerce .products .product .product-featured,
	.jl-home-product-band .products .product .sale_tag,
	.woocommerce .products .product .sale_tag {
		overflow: visible !important;
	}

	.jl-home-product-band .products .product .ribbon,
	.woocommerce .products .product .ribbon {
		top: -10px !important;
		left: 20px !important;
		position: absolute !important;
	}

	.jl-home-product-band .products .product .product-featured .ribbon .ribbon-content,
	.woocommerce .products .product .product-featured .ribbon .ribbon-content {
		padding-top: 7px !important;
		padding-bottom: 7px !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}
}

/* 12. Controles flotantes: separar la flecha del carrito en movil. */
@media (max-width: 767px) {
	.go-to-top.go-to-top--bottom-right {
		right: auto !important;
		left: 18px !important;
		bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)) !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		box-shadow: 0 4px 16px rgba(36, 31, 27, 0.14) !important;
	}
}

/* 13. Footer movil: navegacion compacta, centrada y facil de recorrer. */
@media (max-width: 767px) {
	.footer-env-container {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	footer .footer_main .footer-nav {
		width: 100%;
		max-width: 320px;
		margin: 18px auto 0 !important;
		padding: 0 8px;
		box-sizing: border-box;
		overflow: hidden;
	}

	footer .footer_main .footer-nav ul.menu {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 4px;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-sizing: border-box;
		text-align: center !important;
	}

	footer .footer_main .footer-nav ul.menu > li {
		display: flex !important;
		align-items: stretch;
		justify-content: center;
		min-width: 0;
		max-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-sizing: border-box;
	}

	footer .footer_main .footer-nav ul.menu > li::after {
		display: none !important;
	}

	footer .footer_main .footer-nav ul.menu > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-height: 46px;
		padding: 9px 8px;
		box-sizing: border-box;
		color: rgba(36, 31, 27, 0.68);
		font-size: 12px !important;
		font-weight: 500;
		line-height: 1.25;
		letter-spacing: 0.03em;
		white-space: normal !important;
		overflow-wrap: anywhere;
		text-align: center;
	}

	footer .footer_main .footer-nav ul.menu > li.lang-item {
		grid-column: 1 / -1;
	}

	footer .footer_main .footer-nav ul.menu > li.lang-item > a {
		min-height: 42px;
	}

	footer .footer_main .footer-nav ul.menu > li.lang-item img {
		display: block;
		margin: 0 auto;
	}

	footer .footer_main .footer-columns {
		gap: 8px;
		margin-top: 16px !important;
		margin-bottom: 20px;
	}

	footer .footer_main .footer-columns .footer-column,
	footer .footer_main .footer-columns .footer-column--right {
		margin: 0 !important;
		padding: 0 10px !important;
		text-align: center !important;
	}

	footer .footer_main .copyright_text {
		max-width: 360px;
		margin: 0 auto;
		font-size: 13px;
		line-height: 1.5;
	}
}

/* 14. Header movil: reducir el espacio vertical entre logo y hero. */
@media (max-width: 767px) {
	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .tl-header {
		min-height: 76px;
		padding: 9px 16px !important;
	}

	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .logo-entry,
	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .logo-entry > a,
	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .brand-logo {
		line-height: 1 !important;
	}

	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .logo-entry .logo-element.general {
		height: 58px !important;
		overflow: hidden;
	}

	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .logo-entry .logo-element.general > span {
		transform: translateY(-37px);
	}

	.oxygen-top-menu > .wrapper > .top-menu.main-menu-top > .main .mobile-menu-link {
		align-self: center;
	}
}

/* 15. Catalogo movil: chips rapidos para encontrar piezas en menos pasos. */
@media (min-width: 768px) {
	.jl-shop-mobile-chips {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.woocommerce .jl-shop-mobile-chips,
	.jl-shop-mobile-chips {
		display: flex !important;
		align-items: center;
		gap: 8px;
		width: auto;
		max-width: none;
		margin: 0 -14px 16px !important;
		padding: 0 14px 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.jl-shop-mobile-chips::-webkit-scrollbar {
		display: none;
	}

	.jl-shop-mobile-chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-height: 40px;
		padding: 10px 15px;
		border: 1px solid rgba(178, 146, 71, 0.24);
		border-radius: 999px;
		background: #fff;
		color: rgba(36, 31, 27, 0.78);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		text-decoration: none !important;
		box-shadow: 0 5px 18px rgba(36, 31, 27, 0.05);
		white-space: nowrap;
	}

	.jl-shop-mobile-chip--gender {
		background: #f7f4ed;
		color: #8a6f37;
	}

	.jl-shop-mobile-chip.is-active,
	.jl-shop-mobile-chip:hover,
	.jl-shop-mobile-chip:focus {
		border-color: #b29247;
		background: #1f1e22;
		color: #fff;
	}
}