/**
 * Estilos del frontend - Envy Club
 *
 * Se carga en todas las paginas del frontend.
 * Prefijo: .envy- para evitar conflictos con Elementor/WooCommerce.
 */


/* =============================================================================
   SHORTCODE [categorias-envy] / [nav-genero-envy] — Menú de navegación
   ============================================================================= */

.envy-categorias {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;                /* Evita el "arrastre" vertical en touch */
	touch-action: pan-x;               /* El navegador solo captura gestos horizontales */
	-webkit-overflow-scrolling: touch; /* Inercia en iOS */
	scrollbar-width: none;             /* Oculta scrollbar en Firefox */
	gap: 1.25rem;
	/* padding-bottom deja espacio al ::after de .p-menu (bottom: -2px).
	   overflow-x:auto + overflow-y:hidden crean un contexto de recorte; el
	   pseudo-elemento a bottom:-2px queda dentro del área de padding → visible. */
	padding-bottom: 4px;
}

/* Oculta scrollbar en Chrome/Safari sin perder la funcionalidad */
.envy-categorias::-webkit-scrollbar {
	display: none;
}

.envy-cat-sep {
	display: none;
}

/* nav-genero: texto siempre negro puro, sin estado activo */
.envy-nav-genero .envy-cat-item,
.envy-nav-genero .envy-cat-item:hover,
.envy-nav-genero .envy-cat-item:visited,
.envy-nav-genero .envy-cat-item:focus {
	color: #000000 !important;
}

.envy-nav-genero .envy-cat-item.envy-cat-active::after {
	width: 0 !important;
}


.envy-cat-item {
	font-weight: 300 !important;
	font-size: 1rem !important;
	color: rgba(0, 0, 0, 0.45);
	text-decoration: none !important;
	letter-spacing: inherit;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.envy-cat-item:hover {
	color: rgba(0, 0, 0, 0.7);
}

/* Activo: subrayado estático vía ::after (coherente con la animación de p-menu) */
.envy-cat-item.envy-cat-active {
	color: rgba(0, 0, 0, 0.88);
}

.envy-cat-item.envy-cat-active::after {
	width: 100% !important;
}


/* =============================================================================
   MENÚ — Subrayado animado desde el centro hacia afuera (.p-menu)
   ============================================================================= */

.p-menu {
	position: relative;
	text-decoration: none;
}

.p-menu::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.3s ease;
}

.p-menu:hover::after {
	width: 100%;
}

.p-menu-blanco {
	position: relative;
	text-decoration: none;
}

.p-menu-blanco::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background: #fff;
	transition: width 0.3s ease;
}

.p-menu-blanco:hover::after {
	width: 100%;
}


/* =============================================================================
   BUSCADOR — Overlay + Panel
   El panel se posiciona bajo el header vía CSS custom property --envy-header-h,
   que el JS actualiza en tiempo real.
   ============================================================================= */

/* Overlay oscuro de fondo */
#envy-search-overlay {
	position: fixed;
	top: var(--envy-header-h, 80px);
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

#envy-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Panel de búsqueda */
#envy-search-panel {
	position: fixed;
	top: var(--envy-header-h, 80px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	padding: 0.25rem 1rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#envy-search-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Contenedor interno del formulario */
#envy-search-panel form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

/* Input de búsqueda */
#envy-search-input {
	flex: 1;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 0.5rem 0;
	outline: none;
	box-shadow: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

#envy-search-input::-webkit-search-decoration,
#envy-search-input::-webkit-search-cancel-button {
	display: none;
}

#envy-search-input::placeholder {
	font: inherit;
	letter-spacing: inherit;
	font-weight: 300;
	color: #000;
	opacity: 1;
}

/* Botón enviar (icono lupa) — !important para neutralizar tema y Elementor */
.envy-search-submit {
	all: unset !important;
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	color: #000 !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1 !important;
	transition: opacity 0.15s ease !important;
}

.envy-search-submit:hover {
	opacity: 0.6 !important;
}

/* Botón cerrar (X) */
#envy-search-close {
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: #000;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 1;
	transition: opacity 0.15s ease;
}

#envy-search-close:hover {
	opacity: 0.6;
}


/* =============================================================================
   WooCommerce — Descripción corta del producto
   ============================================================================= */

.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.elementor-widget-woocommerce-product-etheme_short_description,
.elementor-widget-woocommerce-product-etheme_short_description p {
	font-size: 1rem !important;
}


/* =============================================================================
   WooCommerce — Producto limitado en grids
   ============================================================================= */

.envy-limited-product {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.72);
	text-transform: uppercase;
	letter-spacing: 0;
}

.envy-limited-product__mark {
	width: 0.42rem;
	height: 0.42rem;
	border: 1px solid rgba(178, 147, 89, 0.8);
	background: #b29359;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(178, 147, 89, 0.12);
	flex: 0 0 auto;
}

.envy-limited-product__label {
	display: inline-block;
}

.etheme-product-grid-content .envy-limited-product {
	width: fit-content;
}


/* =============================================================================
   ICONIC WLV (Linked Products) + ICONIC WAS (Attribute Swatches)
   Oculta labels innecesarios y aplica el subrayado animado de .p-menu
   a los swatches de texto (tallas) y a los términos de productos enlazados.
   ============================================================================= */

/* --- Ocultar elementos de UI no deseados --- */
/* Solo ocultamos los elementos internos del label, NO el tr completo
   porque el shortcode [iconic_wlv_links] vive dentro de ese mismo tr */
strong.iconic-wlv-variations__label,
.iconic-wlv-variations__colon,
.iconic-wlv-variations__selection,
.reset_variations {
	display: none !important;
}

/* Ocultar la celda del label (primera columna) sin dejar espacio */
td.label.iconic-wlv-variations__label {
	width: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}

/* --- Tabla de variaciones WooCommerce --- */
table.variations {
	border-bottom: 1px solid #00000030 !important;
	padding-top: 1.25rem !important;
	padding-bottom: 1.5rem !important;
}


.iconic-was-swatches--text-swatch.iconic-was-swatches--tick.iconic-was-swatches {
	margin-left: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.woocommerce-variation-add-to-cart {
	padding-top: 0.75rem !important;
}

/* --- Limpiar márgenes base y fondo --- */
.iconic-was-swatches,
.iconic-wlv-terms {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.iconic-wlv-terms__term {
	margin: 0 1.5rem 0.25rem 0 !important;
}

.iconic-wlv-variations__row {
	margin-bottom: 0px !important;
}

@media (max-width: 768px) {
	.iconic-wlv-variations__row {
		margin-bottom: 1.15rem !important;
	}

	.iconic-was-swatches,
	.iconic-wlv-terms {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	.iconic-was-swatches::-webkit-scrollbar,
	.iconic-wlv-terms::-webkit-scrollbar {
		display: none !important;
	}
}

td.value.iconic-wlv-variations__value {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.iconic-was-swatches__item {
	background: transparent !important;
	margin-right: 2rem !important;
}

/* --- Swatches de texto (tallas: XS, S, M, L, XL, XXL) --- */
.iconic-was-swatches .iconic-was-swatch--text-swatch,
.iconic-was-swatches .iconic-was-swatch--text-swatch.iconic-was-swatch--selected,
.iconic-was-swatches .iconic-was-swatch--text-swatch.iconic-was-swatch,
.iconic-was-swatches__item .iconic-was-swatch--text-swatch,
.iconic-was-swatches__item--selected .iconic-was-swatch--text-swatch {
	position: relative !important;
	display: inline-block !important;
	border: none !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	text-decoration: none !important;
	padding: 8px 12px 10px 12px !important;
	font-size: 1rem !important;
	transition: color 0.2s ease !important;
}

/* Subrayado animado desde el centro — mismo efecto que .p-menu */
.iconic-was-swatches .iconic-was-swatch--text-swatch::after {
	content: '' !important;
	position: absolute !important;
	bottom: -8px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 0 !important;
	height: 1px !important;
	background: #000000 !important;
	transition: width 0.3s ease !important;
}

.iconic-was-swatches .iconic-was-swatch--text-swatch:hover,
.iconic-was-swatches .iconic-was-swatch--text-swatch:focus,
.iconic-was-swatches .iconic-was-swatch--text-swatch.iconic-was-swatch--selected:hover,
.iconic-was-swatches .iconic-was-swatch--text-swatch.iconic-was-swatch--selected:focus,
.iconic-was-swatches__item--selected .iconic-was-swatch--text-swatch:hover,
.iconic-was-swatches__item--selected .iconic-was-swatch--text-swatch:focus,
.iconic-was-swatches__item .iconic-was-swatch--text-swatch:hover,
.iconic-was-swatches__item .iconic-was-swatch--text-swatch:focus {
	color: #000000 !important;
	background-color: #ffffff !important;
	opacity: 1 !important;
}

/* Refuerzo: forzar negro en hover sobre enlaces de swatch dentro de variaciones */
table.variations a.iconic-was-swatch:hover,
table.variations a.iconic-was-swatch:focus,
table.variations a.iconic-was-swatch:active,
.variations_form a.iconic-was-swatch:hover,
.variations_form a.iconic-was-swatch:focus,
.variations_form a.iconic-was-swatch:active,
td.value a.iconic-was-swatch--text-swatch:hover,
td.value a.iconic-was-swatch--text-swatch:focus {
	color: #000000 !important;
	opacity: 1 !important;
}

.iconic-was-swatches .iconic-was-swatch--text-swatch:hover::after {
	width: 100% !important;
}

/* Talla seleccionada: subrayado permanente */
.iconic-was-swatches .iconic-was-swatch--text-swatch.iconic-was-swatch--selected::after,
.iconic-was-swatches__item--selected .iconic-was-swatch--text-swatch::after {
	width: 100% !important;
}

/* --- Linked Products [iconic_wlv_links] — términos de texto --- */
.iconic-wlv-terms__term-content {
	position: relative !important;
	display: inline-block !important;
	border: none !important;
	text-decoration: none !important;
	padding-bottom: 5px !important;
}

/* Subrayado animado desde el centro — mismo efecto que .p-menu */
.iconic-wlv-terms__term-content::after {
	content: '' !important;
	position: absolute !important;
	bottom: -2px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 0 !important;
	height: 1px !important;
	background: currentColor !important;
	transition: width 0.3s ease !important;
}

.iconic-wlv-terms__term:hover .iconic-wlv-terms__term-content::after {
	width: 100% !important;
}

/* Término activo (producto actual): subrayado permanente + fondo blanco */
.iconic-wlv-terms__term--current .iconic-wlv-terms__term-content {
	background-color: #ffffff !important;
}

.iconic-wlv-terms__term--current .iconic-wlv-terms__term-content::after {
	width: 100% !important;
}

.wcpay-express-checkout-wrapper{
	margin-top: 0.25rem !important;
	margin-bottom: 0rem !important;
}




/* =============================================================================
   Mensaje de Klarna [envy_klarna_message]
   ============================================================================= */

.envy-klarna-message {
	font-size: 0.9rem;
	font-weight: 300;
	color: #000000;
	text-align: center;
	letter-spacing: -0.05rem;
	margin: 0;
	padding: 0;
}

.envy-klarna-message__amount {
	font-weight: 700;
}

.envy-klarna-message__brand {
	font-weight: 700;
}

.swiper-pagination {
    margin-top: -2.5rem !important;
}

.product_list_widget .variation {
    display: none !important;
}


/* =============================================================================
   SHORTCODE [envy-envio-gratis] — Mensaje envío premium
   ============================================================================= */

.envy-shipping-bar {
	all: inherit;
	text-align: center;
	margin: 0 !important;
	padding: 0.5rem 0 0 !important;
	font-size: 0.85rem !important;
}


/* =============================================================================
   Mini-cart — pie del off-canvas (etheme)
   ============================================================================= */

.woocommerce-mini-cart__footer {
	margin: 0 !important;
	padding: 0 !important;
}

#product-info .screen-reader-text {
	display: none !important;
}

#product-info .text .qty .input-text {
	display: none !important;
}

#product-info .type-simple.quantity-wrapper {
	display: none !important;
}


/* =============================================================================
   Checkout — resumen del pedido (columna derecha)
   ============================================================================= */

.wc-block-checkout__main {
	align-items: stretch !important;
}

.wc-block-checkout__sidebar {
	top: 0 !important;
}

.wp-block-woocommerce-checkout-totals-block {
	position: relative;
	background: #f2f2f2;
	padding: 2rem !important;
	padding-top: 0 !important;
	border-radius: 0;
	align-self: stretch !important;
}

.wp-block-woocommerce-checkout-totals-block::after {
	content: '';
	position: absolute;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100%;
	background: #f2f2f2;
}

@media (max-width: 768px) {
	.wp-block-woocommerce-checkout-totals-block::before {
		content: '';
		position: absolute;
		top: 0;
		left: -50vw;
		width: 50vw;
		height: 100%;
		background: #f2f2f2;
	}
}