/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ─── HEADER: FONDO SIEMPRE VISIBLE EN MODO OVERLAP ───────────────────────── */

/* En homepage y cualquier página con overlap, el header tiene fondo oscuro sólido */
.whb-header.whb-overcontent .whb-main-header,
.whb-header.whb-overcontent .whb-row.whb-general-header {
	background-color: #1a1a1a !important;
}

/* El header sticky también mantiene fondo oscuro */
.whb-header.whb-sticky-real .whb-row.whb-general-header,
.whb-header.whb-scroll-stick .whb-row.whb-general-header {
	background-color: #1a1a1a !important;
}

/* Asegurar altura mínima visible */
.whb-header.whb-overcontent {
	min-height: auto !important;
	height: auto !important;
}

/* ─── TRANSICIONES Y ANIMACIONES DE PRODUCTOS ──────────────────────────────── */

/* Tarjeta de producto: transicion base (el hover solo aplica en mouse real) */
.products .product,
.wd-product-grid .product,
.woodmart-product-list-item {
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.products .product:hover,
	.wd-product-grid .product:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
}

/* Imagen del producto: zoom suave — solo en dispositivos con mouse */
.products .product .wp-post-image,
.woocommerce-LoopProduct-link img,
.product-image-wrap img {
	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.products .product:hover .wp-post-image,
	.products .product:hover .woocommerce-LoopProduct-link img {
		transform: scale(1.04);
		opacity: 0.93;
	}
}

/* Boton "Añadir al carrito": transicion base */
.products .product .button,
.add_to_cart_button,
.single_add_to_cart_button {
	transition: background-color 0.2s ease-out, color 0.2s ease-out,
	            border-color 0.2s ease-out, transform 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.add_to_cart_button:hover,
	.single_add_to_cart_button:hover {
		transform: translateY(-1px);
	}
}

/* Feedback de pulsacion: el boton se hunde al presionar (como boton fisico) */
.products .product .button:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	transform: scale(0.97);
	transition: transform 100ms ease-out;
}

/* Titulo del producto: transicion de color — solo en mouse */
.woocommerce-loop-product__title,
.wd-entities-title {
	transition: color 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-loop-product__title:hover,
	.wd-entities-title:hover {
		color: var(--wd-primary-color, inherit);
	}
}

/* Precio: transicion suave */
.price,
.woocommerce-Price-amount {
	transition: color 0.2s ease;
}

/* ─── IMAGENES DE PRODUCTO INDIVIDUAL ──────────────────────────────────────── */

/* Galeria de producto: transicion al cambiar imagen */
.woocommerce-product-gallery__image img {
	transition: opacity 0.3s ease;
}

/* Imagen principal al hacer hover en miniaturas */
.flex-active-slide img {
	transition: opacity 0.3s ease;
}

/* ─── BOTONES Y CTA ─────────────────────────────────────────────────────────── */

/* Todos los botones con transicion consistente */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ─── MENSAJES Y NOTIFICACIONES ─────────────────────────────────────────────── */

/* Mensajes de WooCommerce con transicion */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	animation: slideInNotice 0.3s ease-out;
}

@keyframes slideInNotice {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ─── CARRITO MINI / WIDGET ─────────────────────────────────────────────────── */

/* Dropdown del mini carrito */
.woodmart-mini-cart,
.widget_shopping_cart_content {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ─── MOVIL: REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE ─────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN: RENDIMIENTO, ACCESIBILIDAD Y EXPERIENCIA EN TODOS LOS DISPOSITIVOS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── DESKTOP: DROPDOWNS MÁS RÁPIDOS ───────────────────────────────────────── */

.wd-dropdown {
	transition: opacity 0.18s ease-out,
	            visibility 0.18s ease-out,
	            transform 0.18s ease-out !important;
	transform: translateY(6px) translateZ(0) !important;
	will-change: opacity, transform;
}

.wd-event-hover:hover > .wd-dropdown,
.wd-event-click.wd-opened > .wd-dropdown,
.wd-dropdown.wd-opened {
	transform: translateY(0) translateZ(0) !important;
}

/* Aceleración GPU para el menú pegajoso (sticky header) */
.whb-sticky-header,
.whb-clone {
	will-change: transform;
	transform: translateZ(0);
}

/* ─── ELIMINAR DELAY DE 300ms EN DISPOSITIVOS TÁCTILES ─────────────────────── */

.wd-nav a,
.wd-nav span,
.wd-nav .wd-nav-opener,
.mobile-nav a,
.mobile-nav .wd-nav-opener,
.wd-header-nav a,
.wd-tools-element a {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* ─── DESKTOP: ÁREA DE HOVER EXTENDIDA PARA EVITAR CIERRE ACCIDENTAL ───────── */

.wd-event-hover > .wd-dropdown:after {
	height: 20px;
}

/* ─── MÓVIL/TABLET: TARGETS TÁCTILES MÍNIMOS (WCAG 2.5.5: 44×44px) ─────────── */

@media (max-width: 1024px) {

	/* Links del menú móvil — altura mínima garantizada */
	.mobile-nav .wd-nav-mobile > li > a,
	.mobile-nav .wd-nav-mobile .sub-menu > li > a,
	.mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
	.mobile-nav .wd-drilldown-back > a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* Flecha de abrir submenú — área de toque mínima */
	.mobile-nav .wd-nav-opener,
	.wd-nav-opener {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	/* Panel de menú lateral: aceleración GPU para slide-in suave */
	.wd-side-hidden-nav {
		will-change: transform;
		transform: translateZ(0);
		-webkit-overflow-scrolling: touch;
	}

	/* Evitar que el fondo se desplace cuando el menú está abierto */
	body.wd-mobile-nav-opened {
		overflow: hidden;
	}

	/* Scroll interno del panel de menú móvil */
	.mobile-nav {
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}

/* ─── MENÚ HAMBURGUESA: TRANSICIÓN SUAVE ───────────────────────────────────── */

.wd-header-mobile-nav > a,
.wd-tools-element.wd-header-fs-nav > a {
	transition: opacity 0.15s ease;
}

.wd-header-mobile-nav > a:active,
.wd-tools-element.wd-header-fs-nav > a:active {
	opacity: 0.6;
}

/* ─── ACCESIBILIDAD: FOCUS VISIBLE PARA TECLADO ────────────────────────────── */

.wd-nav a:focus-visible,
.mobile-nav a:focus-visible,
.wd-nav .wd-nav-opener:focus-visible,
.wd-tools-element a:focus-visible {
	outline: 2px solid var(--wd-primary-color, #333);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ─── SUBMENÚS: PREVENIR SALIDA DEL VIEWPORT EN PANTALLAS PEQUEÑAS ─────────── */

@media (max-width: 480px) {
	.wd-dropdown-menu,
	.wd-dropdown-menu.wd-design-sized,
	.wd-dropdown-menu.wd-design-full-width {
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
	}
}

/* ─── SEGUNDO NIVEL: SUBMENÚS DE SUBMENÚS (3er nivel) ──────────────────────── */

.wd-dropdown .wd-dropdown {
	z-index: 9999;
}

/* ─── LINKS ACTIVOS: INDICAR SECCIÓN ACTUAL ────────────────────────────────── */

.wd-nav > li.current-menu-item > a,
.wd-nav > li.current-menu-ancestor > a,
.wd-nav > li.current-page-ancestor > a {
	opacity: 1;
}

.wd-nav.wd-style-default > li.current-menu-item > a .woodmart-nav-link,
.wd-nav.wd-style-default > li.current-menu-ancestor > a .woodmart-nav-link {
	position: relative;
}

/* ─── RENDIMIENTO: EVITAR REFLOW EN HEADER STICKY ──────────────────────────── */

.whb-header {
	contain: layout style;
}

.wd-header-nav {
	position: relative;
	z-index: 100;
}

/* ─── SEPARAR BOTONES FLOTANTES: WHATSAPP Y ACCESIBILIDAD ────────────────── */

/* El botón de accesibilidad (ea11y) usa Shadow DOM con estilos inline
   !important — solo se puede mover con JS (ver functions.php).
   Aquí movemos WhatsApp por encima de ea11y y del toolbar de Woodmart. */

/* Desktop: WhatsApp sube por encima del botón de accesibilidad */
.joinchat {
	--bottom: 100px !important;
}

/* Móvil: subir más para liberar toolbar (55px) + ea11y (120px) + gap */
@media (max-width: 767px) {
	.joinchat {
		--bottom: 180px !important;
	}
}

/* ─── MENÚ DROPDOWN: VISIBILIDAD Y TRANSICIÓN ────────────────────────────── */

/* Fondo del dropdown más visible con contraste */
.wd-dropdown-menu.wd-dropdown,
.wd-header-nav .wd-dropdown {
	background-color: rgba(30, 30, 30, 0.97) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	padding: 8px 0 !important;
}

/* Links del dropdown con mejor visibilidad */
.wd-dropdown-menu.wd-dropdown li > a,
.wd-header-nav .wd-dropdown li > a {
	color: #fff !important;
	padding: 10px 24px !important;
	font-size: 14px !important;
	transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}

/* Hover en los items del dropdown */
.wd-dropdown-menu.wd-dropdown li > a:hover,
.wd-header-nav .wd-dropdown li > a:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	padding-left: 30px !important;
}

/* Submenú indicador (flecha) más visible */
.wd-dropdown .menu-item-has-children > a::after {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Imagen dentro del dropdown */
.wd-dropdown .menu-item-image {
	border-radius: 6px;
	overflow: hidden;
}

/* ─── CONTENEDOR PRINCIPAL: MÁS ANCHO ───────────────────────────────────── */

.container,
.woodmart-container,
.whb-row .container {
	max-width: 1500px !important;
}

/* Secciones de Elementor más anchas */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1500px !important;
}

/* Contenido de página y tienda usan el nuevo ancho */
.site-content .container,
.wd-content-layout .container {
	max-width: 1500px !important;
}

/* ─── HOMEPAGE: SLIDER A ANCHO COMPLETO ──────────────────────────────────── */

/* En la homepage el contenido usa todo el ancho del navegador */
.home main.wd-content-layout.container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* El slider ocupa el ancho total, sin franjas a los lados */
.home sr7-module {
	width: 100% !important;
}

/* Las demás secciones de la homepage mantienen su respiro interior */
.home .entry-content > .wp-block-group,
.home .entry-content > section,
.home .entry-content > div:not(:first-child) {
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── OCULTAR "SOLO COLOMBIA" DEL MENÚ ───────────────────────────────────── */

.menu-item-28248 {
	display: none !important;
}

/* ─── PRODUCTOS: FEEDBACK TÁCTIL PARA PANTALLAS TOUCH ────────────────────── */

/* Estado active para touch - feedback inmediato al tocar */
.products .product:active,
.wd-product-grid .product:active {
	transform: scale(0.97);
	transition: transform 0.1s ease-out;
}

/* Overlay sutil al tocar un producto en touch */
.products .product .product-wrapper {
	position: relative;
	transition: opacity 0.15s ease;
}

.products .product:active .product-wrapper {
	opacity: 0.85;
}

/* Botón añadir al carrito - feedback táctil más evidente */
.add_to_cart_button:active,
.single_add_to_cart_button:active {
	transform: scale(0.94) !important;
	opacity: 0.8;
	transition: transform 0.1s ease, opacity 0.1s ease !important;
}

/* ─── SLIDER REVOLUTION: AJUSTE DE TEXTO EN MÓVIL ─────────────────────────── */

@media (max-width: 480px) {
	#woodmart-slider-hardware h4.sr7-layer {
		font-size: 18px !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		line-height: 1.2 !important;
		max-width: 320px !important;
		text-align: center !important;
	}
	#woodmart-slider-hardware p.sr7-layer {
		font-size: 11px !important;
		white-space: normal !important;
		max-width: 320px !important;
		text-align: center !important;
	}
}