/*
 * ============================================
 * ONE-CARRITO.CSS
 * ============================================
 * Estilos centralizados para el carrito de compras
 * - Carrito en header normal (.pt-desctop-parent-cart)
 * - Carrito en menú flotante (.pt-stuck-nav.stuck)
 * - Estilos para móvil y desktop
 * ============================================
 */

/* ============================================
   Z-INDEX BASE - ELEMENTOS DEL HEADER
   ============================================ */
/* Z-index bajo para elementos del header (regla general) */
header .pt-cart {
	z-index: 1 !important;
	position: relative !important;
}

/* Asegurar que los contenedores de WhatsApp en el header tengan z-index bajo por defecto */
/* Esto previene que los iconos de WhatsApp queden por encima del dropdown del carrito */
header .pt-header-row.pt-top-row,
header .pt-header-row.pt-top-row .pt-box-info,
header .pt-header-row.pt-top-row .pt-box-info ul,
header .pt-header-row.pt-top-row .pt-box-info li,
header .pt-header-row.pt-top-row .pt-box-info a {
	z-index: 1 !important;
	position: relative !important;
}

/* ============================================
   Z-INDEX Y POSICIONAMIENTO - HEADER NORMAL
   ============================================ */
/* Asegurar que el carrito en el header tenga z-index alto cuando está activo */
@media (min-width: 1025px) {
	/* Excepción: Carrito desplegado - z-index MUY ALTO para quedar por encima del WhatsApp fixed */
	/* El WhatsApp tiene position: fixed con z-index: 19, necesitamos un z-index mucho más alto */
	header .pt-cart.active {
		z-index: 999999 !important;     /* MUY ALTO - por encima de WhatsApp (19) y otros elementos fixed */
		position: relative !important;
		overflow: visible !important;
	}
	
	/* Asegurar que el dropdown del carrito también tenga z-index MUY ALTO */
	/* IMPORTANTE: position fixed con top y right 50px para posicionar desde el viewport (absoluto a la web) */
	header .pt-cart.active .pt-dropdown-menu,
	header .pt-cart.active .pt-dropdown-menu.pt-is-include {
		z-index: 999999 !important;     /* MUY ALTO - por encima de WhatsApp (19) con position fixed */
		position: fixed !important;     /* FIXED para posicionar desde el viewport (absoluto a la web) */
		right: 50px !important;         /* 50px desde la derecha del viewport */
		top: 50px !important;           /* 50px desde arriba del viewport */
		left: auto !important;
		overflow: visible !important;
		max-height: calc(100vh - 60px) !important;
	}
	
	/* Asegurar que los contenedores padres también tengan z-index alto cuando el carrito está activo */
	/* Esto es necesario porque el WhatsApp tiene position: fixed y necesita un contexto de apilamiento alto */
	header .pt-desctop-parent-cart:has(.pt-cart.active),
	header .pt-parent-box:has(.pt-cart.active),
	header .headinfo-box:has(.pt-cart.active),
	header .pt-desktop-header:has(.pt-cart.active) {
		z-index: 999999 !important;
		position: relative !important;
	}
	
	/* Regla directa sin :has() para compatibilidad - aplicar a contenedores cuando contienen carrito activo */
	header .pt-desctop-parent-cart.pt-parent-box {
		position: relative !important;
	}
	
	/* Cuando el carrito está activo, el contenedor padre también debe tener z-index alto */
	header .pt-desctop-parent-cart.pt-parent-box .pt-cart.active {
		z-index: 999999 !important;
	}
	
	/* Alternativa: Bajar el z-index del WhatsApp cuando el carrito está abierto */
	body:has(header .pt-cart.active) .pt-whatsapp-floating,
	header .pt-cart.active ~ * .pt-whatsapp-floating {
		z-index: 18 !important;         /* Bajar el WhatsApp cuando el carrito está abierto */
	}
	
	/* Bajar el z-index de los iconos de WhatsApp en el header cuando el carrito está abierto */
	/* Los iconos de WhatsApp están en .pt-header-row.pt-top-row con .pt-box-info */
	/* Reglas con :has() para navegadores modernos */
	header:has(.pt-cart.active) .pt-header-row.pt-top-row,
	header:has(.pt-cart.active) .pt-header-row.pt-top-row .pt-box-info,
	header:has(.pt-cart.active) .pt-header-row.pt-top-row .pt-box-info ul,
	header:has(.pt-cart.active) .pt-header-row.pt-top-row .pt-box-info li,
	header:has(.pt-cart.active) .pt-header-row.pt-top-row .pt-box-info a,
	header:has(.pt-cart.active) .pt-header-row.pt-top-row .pt-box-info * {
		z-index: 1 !important;          /* Z-index bajo para que queden debajo del dropdown del carrito */
		position: relative !important;
	}
	
	/* Reglas alternativas sin :has() para compatibilidad - aplicar cuando el carrito está activo */
	/* Usar JavaScript para agregar clase .pt-cart-open al body cuando el carrito está activo */
	body.pt-cart-open .pt-header-row.pt-top-row,
	body.pt-cart-open .pt-header-row.pt-top-row .pt-box-info,
	body.pt-cart-open .pt-header-row.pt-top-row .pt-box-info ul,
	body.pt-cart-open .pt-header-row.pt-top-row .pt-box-info li,
	body.pt-cart-open .pt-header-row.pt-top-row .pt-box-info a,
	body.pt-cart-open .pt-header-row.pt-top-row .pt-box-info * {
		z-index: 1 !important;          /* Z-index bajo para que queden debajo del dropdown del carrito */
		position: relative !important;
	}
	
	/* Asegurar que todos los elementos internos del carrito también tengan z-index alto */
	header .pt-cart.active .pt-dropdown-menu * {
		position: relative;
		z-index: inherit;
	}
	
	/* Posición: 50px del margen derecho y 50px del top en PC - FIXED para posicionar desde viewport (absoluto a la web) */
	header .pt-cart .pt-dropdown-menu,
	header .pt-cart.active .pt-dropdown-menu,
	.pt-stuck-nav .pt-stuck-parent-cart .pt-cart .pt-dropdown-menu,
	.pt-stuck-nav .pt-stuck-parent-cart .pt-cart.active .pt-dropdown-menu {
		position: fixed !important; /* FIXED para posicionar desde viewport (absoluto a la web) */
		right: 50px !important;    /* 50px desde la derecha del viewport */
		top: 50px !important;       /* 50px desde arriba del viewport */
		left: auto !important;
	}
	
	/* Asegurar que .pt-dropdown-inner no bloquee el scroll */
	header .pt-cart.active .pt-dropdown-menu .pt-dropdown-inner {
		overflow: visible !important;  /* Permitir que el scroll funcione en hijos */
		height: auto !important;
		max-height: none !important;
	}
	
	/* Contenedor del carrito: altura será establecida por JS (suma de partes) */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-layout {
		box-sizing: border-box !important;
		overflow: visible !important;  /* Cambiar a visible para que el scroll funcione en .pt-cart-content */
		max-height: calc(100vh - 100px) !important;  /* Limitar altura máxima del layout */
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* .pt-cart-content: TODO el contenido hace scroll junto */
	/* IMPORTANTE: El JavaScript aplica estilos inline con !important, pero el CSS debe asegurar que el scroll funcione */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content {
		/* Sin flex, todo el contenido hace scroll junto */
		overflow-y: auto !important;  /* Habilitar scroll vertical - FORZAR siempre */
		overflow-x: hidden !important;  /* Ocultar scroll horizontal */
		/* El JavaScript aplicará height con !important cuando detecte que necesita scroll */
		/* Pero necesitamos asegurar que overflow-y funcione siempre */
		max-height: calc(100vh - 120px) !important;  /* Altura máxima para activar scroll - más espacio */
		height: auto !important;  /* Permitir que la altura sea automática hasta que JS la establezca */
		flex: 1 1 auto !important;  /* Permitir que crezca y haga scroll */
		min-height: 0 !important;  /* Importante para que el scroll funcione en flex */
		/* Asegurar que el scroll se active cuando el contenido sea más alto que max-height */
		position: relative !important;  /* Necesario para que el scroll funcione correctamente */
	}
	
	/* Asegurar que cuando el JS aplica height inline, el scroll funcione */
	/* Selector más específico para sobrescribir estilos inline del JS */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content[style*="height"],
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content[style*="overflow"] {
		overflow-y: auto !important;  /* FORZAR scroll cuando hay height definido por JS */
		overflow-x: hidden !important;
	}
	
	/* IMPORTANTE: Asegurar que el scroll funcione incluso si el JS quita overflow-y */
	/* Usar selector más específico para sobrescribir cualquier estilo inline */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-layout .pt-cart-content {
		overflow-y: auto !important;  /* FORZAR scroll siempre - sobrescribe estilos inline del JS */
		overflow-x: hidden !important;
		max-height: calc(100vh - 100px) !important;  /* Asegurar altura máxima para activar scroll */
	}
	
	/* FORZAR scroll incluso si el JS quita la propiedad - usar selector aún más específico */
	header .pt-cart.active .pt-dropdown-menu .pt-dropdown-inner .pt-cart-layout .pt-cart-content {
		overflow-y: auto !important;  /* FORZAR scroll siempre */
		overflow-x: hidden !important;
		max-height: calc(100vh - 100px) !important;  /* Asegurar altura máxima para activar scroll */
		height: auto !important;
		min-height: 0 !important;  /* Importante para que el scroll funcione en flex */
	}
	
	/* Asegurar que el contenedor tenga altura suficiente para activar el scroll */
	/* Si el contenido es más alto que max-height, el scroll se activará automáticamente */
	header .pt-cart.active .pt-dropdown-menu .pt-dropdown-inner .pt-cart-layout {
		display: flex !important;
		flex-direction: column !important;
		max-height: calc(100vh - 100px) !important;
		height: auto !important;
	}
	
	/* 1) Título: altura fija de 50px - DENTRO del scroll */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content > .pt-title {
		height: 50px !important;
		min-height: 50px !important;
		max-height: 50px !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 50px !important;
	}
	
	/* 2) Lista de items: altura automática - DENTRO del scroll */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-list {
		height: auto !important;
		overflow: visible !important;
		min-height: 0 !important;  /* Importante para que el scroll funcione en flex */
	}
	
	/* 3) Total: altura fija de 50px - DENTRO del scroll */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-total-row {
		height: 50px !important;
		min-height: 50px !important;
		max-height: 50px !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 50px !important;
	}
	
	/* 4) Botón: altura fija de 130px - DENTRO del scroll */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-btn {
		height: 130px !important;
		min-height: 130px !important;
		max-height: 130px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Scrollbar sutil - máximo 3px de ancho */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content::-webkit-scrollbar {
		width: 3px !important;
		max-width: 3px !important;
	}
	
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content::-webkit-scrollbar-track {
		background: transparent;
		border-radius: 2px;
	}
	
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content::-webkit-scrollbar-thumb {
		background-color: rgba(170, 170, 170, 0.5);
		border-radius: 2px;
		transition: background-color 0.2s linear;
	}
	
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content::-webkit-scrollbar-thumb:hover {
		background-color: rgba(153, 153, 153, 0.7);
	}
	
	/* Para Firefox - scrollbar más delgado */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-content {
		scrollbar-width: thin;
		scrollbar-color: rgba(170, 170, 170, 0.5) transparent;
	}
	
	/* Asegurar espacio al final del contenido dentro de perfectScrollbar */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-layout.ps-container .ps-content {
		padding-bottom: 15px !important;            /* Espacio al final para que el botón sea accesible */
	}
	
	/* Cuando el carrito está vacío, no agregar espacio extra */
	header .pt-cart.active .pt-dropdown-menu .pt-cart-layout .pt-cart-empty {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	/* Scrollbar visible cuando sea necesario */
	header .pt-cart.active .pt-dropdown-menu .ps-container .ps-scrollbar-y-rail {
		opacity: 1 !important;
		right: 0 !important;
		z-index: 1001 !important;
	}
	
	/* Asegurar que perfectScrollbar calcule correctamente la altura del contenido */
	header .pt-cart.active .pt-dropdown-menu .ps-container .ps-scrollbar-y {
		right: 0 !important;
	}
}

/* ============================================
   Z-INDEX Y POSICIONAMIENTO - MENÚ FLOTANTE (STUCK)
   ============================================ */
/* Carrito dentro de .pt-stuck-nav.stuck: z-index MUY ALTO para quedar por encima */
.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart.active .pt-dropdown-menu,
.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart.active .pt-dropdown-menu.pt-is-include {
	z-index: 999999 !important; /* MUY ALTO - por encima de .pt-stuck-nav.stuck (20) */
	position: fixed !important;
}

/* Asegurar que .pt-stuck-nav y sus contenedores no tengan overflow que corte el dropdown */
.pt-stuck-nav.stuck {
	overflow: visible !important;
}

.pt-stuck-nav.stuck .pt-stuck-parent-cart {
	overflow: visible !important;
	z-index: 999999 !important; /* Asegurar que el contenedor también tenga z-index alto */
	position: relative !important;
}

.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart.active {
	z-index: 999999 !important;
	position: relative !important;
}

/* ============================================
   OVERFLOW VISIBLE - HEADER NORMAL
   ============================================ */
/* Asegurar que los contenedores del header permitan que el dropdown se muestre correctamente */
header .pt-desctop-parent-cart,
header .pt-desktop-header,
header .headinfo-box,
header .navinfo {
	overflow: visible !important;
}

/* ============================================
   MÓVIL - FULL SCREEN MODAL
   ============================================ */
/* En móvil, el carrito debe abrirse como modal full-screen */
@media (max-width: 1024px) {
	/* Header normal - móvil */
	header .pt-cart.active .pt-dropdown-menu,
	header .pt-cart.active .pt-dropdown-menu.pt-is-include {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		min-width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh !important;
		min-height: 100vh !important;
		max-height: 100vh !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		z-index: 999999 !important;
		-webkit-transform: translate3d(0, 0, 0) !important;
		transform: translate3d(0, 0, 0) !important;
		display: block !important;
		box-sizing: border-box !important;
	}
	
	/* Stuck nav - móvil */
	.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart.active .pt-dropdown-menu,
	.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart.active .pt-dropdown-menu.pt-is-include {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		min-width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh !important;
		min-height: 100vh !important;
		max-height: 100vh !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		z-index: 999999 !important;
		-webkit-transform: translate3d(0, 0, 0) !important;
		transform: translate3d(0, 0, 0) !important;
		display: block !important;
		box-sizing: border-box !important;
	}
}

/* ============================================
   ESTILOS BASE DEL DROPDOWN
   ============================================ */
header .pt-cart .pt-dropdown-menu {
	border-top: 1px solid #ebebeb;
	box-shadow: 0px 4px 6px rgba(51, 51, 51, 0.08);
}

@media (min-width: 1025px) {
	header .pt-cart .pt-dropdown-menu {
		width: 360px;
	}
}

@media (max-width: 1024px) {
	header .pt-cart .pt-dropdown-menu {
		width: 315px;
	}
	header .pt-cart .pt-dropdown-menu .pt-cart-layout .pt-cart-content {
		padding: 20px 20px 19px 20px;
	}
}

header .pt-cart .ps-container {
	position: relative;
}

/* ============================================
   BOTÓN DEL CARRITO EN STUCK NAV
   ============================================ */
/* El carrito debe alinearse con los otros iconos (search, account, compare, wishlist) */
/* Todos están en .pt-header-row con clase .pt-parent-box y se alinean naturalmente con flexbox */
/* NO usar position: fixed para que se pegue al grupo de iconos */
.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart .pt-dropdown-toggle {
	position: relative !important; /* RELATIVE para mantener el flujo normal con los otros iconos */
	right: auto !important;        /* Auto para que use el flujo normal */
	top: auto !important;          /* Auto para que use el flujo normal */
	z-index: 999999 !important;    /* Mantener z-index alto para el dropdown */
}

/* ============================================
   BOTÓN DEL CARRITO EN STUCK NAV MÓVIL - A LA DERECHA JUNTO A LA LUPA
   ============================================ */
/* En móvil, el carrito debe estar a la derecha junto a la lupa (buscador) */
/* Esta regla sobrescribe la regla general para desktop */
@media (max-width: 1024px) {
	.pt-stuck-nav.stuck .pt-stuck-parent-cart .pt-cart .pt-dropdown-toggle,
	.pt-stuck-nav .pt-stuck-parent-cart .pt-cart .pt-dropdown-toggle {
		position: relative !important;  /* RELATIVE para mantener el flujo normal dentro del contenedor */
		left: auto !important;          /* Sin posición izquierda */
		right: auto !important;         /* Sin posición derecha */
		top: 8px !important;           /* 8px desde arriba (alineado con la lupa) */
		margin: 0 !important;
		z-index: 22 !important;        /* Por encima del menú hamburguesa (z-index: 21) */
	}
}

/* ============================================
   BACKDROP PARA MÓVIL
   ============================================ */
/* Fondo oscuro cuando el carrito está abierto en móvil */
html.pt-popup-dropdown .pt-stuck-nav.stuck:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999998;
	pointer-events: none;
}