/**
 * ONE CATÁLOGO - Estilos CSS para páginas de catálogo
 * Bajar todos los z-index del catálogo para que queden por debajo del stuck-nav
 * El stuck-nav tiene z-index: 9999, así que bajamos todo el catálogo a z-index: 0 o inferior
 */

/* ============================================================
   BLOG - Estética one-titulo-faqs / one-ficha54-copete (igual que home_modulo_textos_categoria)
   Selectores con mayor especificidad que .pt-post .pt-post-content .pt-title de style.css
   para que los títulos del blog apliquen correctamente el CSS.
   ============================================================ */
.one-modulo-textos-categoria .pt-post .pt-post-content .one-titulo-faqs,
.one-modulo-textos-categoria .pt-post .pt-post-content h2.one-titulo-faqs {
	font-size: 24px !important;
	line-height: 35px !important;
	font-weight: 700 !important;
	color: #333333 !important;
}
.one-modulo-textos-categoria .pt-post .pt-post-content .one-titulo-faqs a {
	color: inherit !important;
	text-decoration: none;
}
.one-modulo-textos-categoria .pt-post .pt-post-content .one-titulo-faqs a:hover {
	color: #00a89d !important;
	text-decoration: none;
}

/* ============================================================
   BLOG - Alineación del contenido de la columna lateral según layout_tipo
   columna_izquierda = sidebar a la izquierda → contenido alineado a la izquierda
   columna_derecha = sidebar a la derecha → contenido alineado a la derecha
   ============================================================ */
.pt-aside-align-left .pt-block-aside,
.pt-aside-align-left .pt-aside-title,
.pt-aside-align-left .pt-aside-content,
.pt-aside-align-left .pt-aside-post,
.pt-aside-align-left ul,
.pt-aside-align-left .pt-list-row,
.pt-aside-align-left .pt-list-inline {
	text-align: left;
}
.pt-aside-align-left .pt-list-inline {
	justify-content: flex-start;
}
.pt-aside-align-right .pt-block-aside,
.pt-aside-align-right .pt-aside-title,
.pt-aside-align-right .pt-aside-content,
.pt-aside-align-right .pt-aside-post,
.pt-aside-align-right ul,
.pt-aside-align-right .pt-list-row,
.pt-aside-align-right .pt-list-inline {
	text-align: right;
}
.pt-aside-align-right .pt-list-inline {
	justify-content: flex-end;
}

/* ============================================================
   BLOG - Columna lateral: aumentar tamaño de fuente (títulos y descripciones)
   ============================================================ */
.pt-block-aside .pt-aside-post .item .pt-title,
.pt-block-aside .pt-aside-post .item .pt-description {
	font-size: 18px;
	line-height: 26px;
}

/* ============================================================
   BLOG - pt-filter-nav solo en columna de posts (no ocupar todo el ancho)
   ============================================================ */
.pt-col-posts-blog {
	min-width: 0; /* Evita que flex items desborden su columna */
}

/* Etiquetas del blog: borde, solo la activa marcada */
.pt-list-inline li a.active {
	color: #48CAB2;
	border-color: #48CAB2;
}

/* ============================================================
   BLOG - 5 columnas (Bootstrap no tiene col-lg para 12/5)
   ============================================================ */
@media (min-width: 992px) {
	.pt-product-listing.pt-blog-listing .blog-col-5,
	.pt-listing-post.one-modulo-textos-categoria .blog-col-5 {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* ============================================================
   BAJAR Z-INDEX DE TODOS LOS ELEMENTOS DEL CATÁLOGO
   ============================================================ */

/* Contenedor principal del catálogo - crear contexto de apilamiento */
#pt-pageContent,
.pt-pageContent,
.container-indent,
.pt-product-listing,
.pt-layout-product-item,
.modulo-productos {
	position: relative;
	z-index: 0 !important;
	isolation: isolate; /* Crear nuevo contexto de apilamiento */
}

/* Productos individuales */
.pt-product {
	position: relative;
	z-index: 0 !important;
}

/* Cajas de imagen */
.pt-product .pt-image-box {
	z-index: 0 !important;
}

/* Imagen roll-over - bajar de z-index: 1 a 0 */
.pt-product .pt-image-box .pt-img-roll-over {
	z-index: 0 !important;
}

/* Labels (SALE, NEW, etc.) - mantener z-index pero no cambiar position */
/* IMPORTANTE: Mantener position: absolute para que se posicionen correctamente */
.pt-product .pt-image-box .pt-label-location {
	z-index: 5 !important;
	/* NO cambiar position: absolute, ya está definido en style.css */
}

.pt-product .pt-image-box .pt-label-location [class^=pt-label-] {
	z-index: 5 !important;
	/* NO cambiar position, mantener el original */
}

/* Botones de aplicación (wishlist, compare, quickview) - mantener z-index alto para que se vean por encima del enlace */
/* IMPORTANTE: Mantener position: absolute para que se posicionen correctamente */
.pt-product .pt-image-box .pt-app-btn {
	z-index: 10 !important;
	/* NO cambiar position: absolute, ya está definido en style.css */
}

.pt-product .pt-image-box .pt-app-btn > * {
	z-index: 10 !important;
	/* NO cambiar position, mantener el original */
}

/* Asegurar que los botones individuales sean clickeables */
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn] {
	z-index: 11 !important;
	pointer-events: auto !important;
	/* NO cambiar position, mantener el original */
}

/* Countdown box - bajar de z-index: 5 a 0 */
.pt-product .pt-image-box .pt-countdown_box {
	z-index: 0 !important;
}

/* Descripción del producto - bajar de z-index: 2 a 0 */
.pt-product .pt-description {
	z-index: 0 !important;
}

/* Opciones de producto (swatches) */
.pt-product .pt-options-swatch,
.pt-options-swatch {
	z-index: 0 !important;
}

.pt-product .pt-options-swatch li,
.pt-options-swatch li {
	z-index: 0 !important;
}

/* Availability icon - bajar z-index */
.pt-options-swatch li[data-availability=false] .availability-icon,
.availability-icon {
	z-index: 0 !important;
}

/* Options color img y sus pseudo-elementos */
.pt-options-swatch li a.options-color-img {
	z-index: 0 !important;
}

.pt-options-swatch li a.options-color-img:before {
	z-index: 0 !important;
}

.pt-options-swatch li a.options-color-img:after {
	z-index: 0 !important;
}

/* Row hover */
.pt-product .pt-description .pt-row-hover {
	z-index: 0 !important;
}

/* Wrapper de botones */
.pt-product .pt-description .pt-wrapper-btn {
	z-index: 0 !important;
}

/* Botones de acción */
.pt-product .pt-description .pt-btn-addtocart,
.pt-product .pt-description .pt-btn-wishlist,
.pt-product .pt-description .pt-btn-compare,
.pt-product .pt-description .pt-btn-quickview {
	z-index: 0 !important;
}

/* Precios */
.pt-product .pt-description .pt-price {
	z-index: 0 !important;
}

/* Opciones de bloque */
.pt-product .pt-description .pt-option-block {
	z-index: 0 !important;
}

/* Columnas */
.pt-product .pt-description .pt-col {
	z-index: 0 !important;
}

/* Excepciones: elementos que NO deben tener z-index bajo (modales, tooltips, etc.) */
.pt-product .modal,
.pt-product .modal *,
.pt-product [data-toggle="modal"],
.pt-product [data-toggle="modal"] * {
	z-index: 999999 !important; /* Mantener alto para modales */
}

/* Tooltips - mantener z-index alto si están fuera del contexto del producto */
[data-tooltip],
[data-tooltip] * {
	z-index: 9999 !important;
}

/* ============================================================
   ALINEACIÓN DE ELEMENTOS EN PT-FILTERS-OPTIONS
   ============================================================ */

/* Asegurar que pt-filters-options use space-between para que contador quede a la izquierda y controles a la derecha */
.pt-filters-options {
	justify-content: space-between !important;
	align-items: center !important;
}

/* Contador de productos dentro de pt-filters-options - a la izquierda */
.pt-filters-options .pt-showing-results {
	flex: 0 0 auto;
	margin-right: auto;
	display: flex;
	align-items: center;
}

/* Asegurar que el texto del contador esté alineado verticalmente */
.pt-filters-options .pt-showing-results .pt-text {
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}

/* Números del contador - misma fuente que el selector de ordenamiento */
.pt-showing-results .pt-numbers {
	font-weight: 700;
	font-size: 14px;
	line-height: 22px;
	color: #333333;
}

/* ============================================================
   AJUSTES DE ESPACIADO DEL TÍTULO
   ============================================================ */

/* Asegurar que el título tenga espacio arriba (sobrescribir el margin-top negativo) */
.pt-title-subpages {
	margin-top: 20px !important;
}

/* Reducir el espacio abajo del título (de 37px a 15px) */
.pt-title-subpages.noborder {
	padding-bottom: 15px !important;
}

/* ============================================================
   MODAL DE FILTROS - Z-INDEX MÁS ALTO ABSOLUTO (SIN MEDIA QUERY)
   ============================================================ */

/* MODAL DE FILTROS - Z-INDEX MANEJADO POR JAVASCRIPT */
/* El z-index se aplica dinámicamente desde one-modal-filtros-zindex.js */
/* IMPORTANTE: El overlay (modal-filter) debe estar DEBAJO del sidebar */
.modal-filter {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999998 !important; /* DEBAJO del sidebar */
}

/* Sidebar cuando está abierto - DEBE estar ARRIBA del overlay */
.leftColumn.aside.column-open,
.aside.leftColumn.column-open,
.col-md-4.col-lg-3.col-xl-3.leftColumn.aside.column-open {
	z-index: 99999999 !important; /* ARRIBA del overlay */
	position: fixed !important;
}

/* Botón cerrar - mismo z-index que sidebar */
.pt-btn-col-close {
	z-index: 99999999 !important;
	position: fixed !important;
}

/* ============================================================
   VERSIÓN MÓVIL - CONTADOR ARRIBA Y CENTRADO
   ============================================================ */

@media (max-width: 1024px) {
	/* En móvil, permitir que el contador se separe */
	.pt-filters-options {
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
	}
	
	/* Contador separado y centrado arriba en móvil - como el título */
	.pt-filters-options .pt-showing-results {
		order: -1;
		width: 100%;
		text-align: center;
		margin-right: 0;
		margin-top: 4px;
		margin-bottom: 4px;
		justify-content: center;
		display: flex;
		align-items: center;
	}
	
	/* Asegurar que el texto del contador esté centrado en móvil */
	.pt-filters-options .pt-showing-results .pt-text {
		text-align: center;
		width: 100%;
		display: block;
	}
}

/* ============================================================
   BOTÓN DE VISTA HORIZONTAL - Siempre visible
   ============================================================ */
.one-horizontal-switch {
	display: inline-block !important;
	color: #333333;
	font-size: 20px;
	margin-left: 7px;
	margin-top: -1px;
	text-decoration: none;
	transition: color 0.2s;
	vertical-align: middle;
	visibility: visible !important;
	opacity: 1 !important;
}
/* Estilos para spans de líneas horizontales - NO aplicar a icon-listing-four */
.one-horizontal-switch > span:not(.icon-listing-four) {
	width: 24px;
	height: 5px;
	display: block;
	position: relative;
	background-color: #D0D0D0;
	transition: background-color 0.2s;
}
.one-horizontal-switch > span:not(.icon-listing-four):not(:first-child) {
	margin-top: 2px;
}
.one-horizontal-switch > span:not(.icon-listing-four):before {
	content: "";
	position: absolute;
	top: 0;
	left: 6px;
	background-color: #ffffff;
	display: block;
	width: 2px;
	height: 5px;
}
.one-horizontal-switch:hover > span:not(.icon-listing-four), 
.one-horizontal-switch.active > span:not(.icon-listing-four) {
	background-color: #333333;
}