/* ============================================================
   EMANTONI — Fragancias Árabes
   "Perfumes intensos, de larga duración"

   Tema base: NOCHE + ORO (perfumería de nicho).
     Noche   #0B0B10 (fondo)        Panel   #14141C
     Panel 2 #191922 (apoyos)       Borde   #262633
     Oro     #C9A24D (acento/CTA)   Oro cl. #E3C77E
     Oro osc.#8C6B2F                Marfil  #F1ECE3 (texto)
     Humo    #9C96A6 (secundario)

   Tipografías: Cinzel (titulares, monograma) · Jost (funcional/cuerpo).
   Registradas en head.php → $google_fonts_por_proyecto["emantoni"].

   El sistema inyecta --color-primario (#C9A24D) y --color-secundario (#8C6B2F).
   ============================================================ */

:root {
	--em-noche: #0B0B10;
	--em-panel: #14141C;
	--em-panel-2: #191922;
	--em-borde: #262633;
	--em-borde-oro: rgba(201, 162, 77, .28);
	--em-oro: #C9A24D;
	--em-oro-claro: #E3C77E;
	--em-oro-oscuro: #8C6B2F;
	--em-marfil: #F1ECE3;
	--em-humo: #9C96A6;

	--em-font-titulos: "Cinzel", "Georgia", serif;
	--em-font-texto: "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Tipografía ---------- */

:root {
	--bs-font-sans-serif: "Jost", sans-serif;
	--bs-body-font-family: "Jost", sans-serif;
}

body, p, a, span, li, label, small, strong, em, blockquote, figcaption,
input, textarea, select, button, .btn, .nav-link, .lead, .form-control,
.dropdown-item, td, th {
	font-family: var(--em-font-texto) !important;
}

/* NO se tocan las fuentes de íconos: los selectores apuntan a elementos y
   clases concretas, nunca a <i> ni .uil / .material-symbols-* / .fa*. */

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--em-font-titulos) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--em-marfil);
}

.lead { font-weight: 300; }

/* ---------- Cuerpo / superficies oscuras ---------- */

body {
	background-color: var(--em-noche);
	color: var(--em-marfil);
}

.bg-light, .bg-white, .bg-gray, .bg-soft-primary {
	background-color: var(--em-noche) !important;
}

section, .wrapper {
	background-color: var(--em-noche);
}

.text-dark, .link-dark { color: var(--em-marfil) !important; }
.text-muted { color: var(--em-humo) !important; }
p { color: var(--em-marfil); }

/* Cards → paneles grafito con filete fino */
.card {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	color: var(--em-marfil);
	border-radius: 4px;
}
.card .text-muted { color: var(--em-humo) !important; }

/* Divisores SVG: el "papel" es noche, no blanco */
.divider .text-white, .divider path,
.divider .text-light, .divider .text-gray { color: var(--em-noche) !important; }

hr, .footer-hr { border-color: var(--em-borde); }

/* ---------- Links ---------- */

a { color: var(--em-marfil); text-decoration: none; }
a:hover { color: var(--em-oro); }
.follow-link:hover { color: var(--em-oro); }

/* ---------- Botones ---------- */

/* Primario = oro sólido, texto noche */
.btn-primary {
	background: var(--em-oro);
	border: 1px solid var(--em-oro);
	border-radius: 2px;
	color: var(--em-noche) !important;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background: var(--em-oro-claro);
	border-color: var(--em-oro-claro);
	color: var(--em-noche) !important;
}

.btn-outline-primary, .btn-secundario, .btn-secondary {
	background: transparent;
	border: 1px solid var(--em-oro);
	border-radius: 2px;
	color: var(--em-oro) !important;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}
.btn-outline-primary:hover, .btn-secundario:hover, .btn-secondary:hover {
	background: var(--em-oro);
	border-color: var(--em-oro);
	color: var(--em-noche) !important;
}

/* El ícono hereda el color del texto del botón */
.btn-primary i, .btn-outline-primary i, .btn-secundario i, .btn-secondary i {
	color: inherit !important;
}

/* ---------- Inputs ---------- */

.form-control, .form-select, .input-group-text {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	color: var(--em-marfil);
	border-radius: 2px;
}
.form-control:focus, .form-select:focus {
	background-color: var(--em-panel);
	border-color: var(--em-oro);
	color: var(--em-marfil);
	box-shadow: none;
}
.form-control::placeholder { color: var(--em-humo); }
.form-label, .form-check-label { color: var(--em-marfil); }

/* ---------- Navbar / logo ---------- */

.navbar-brand img { width: 165px; }
.logo-menu-mobile { width: 150px; }
@media (max-width: 991.98px) {
	.navbar-brand img { padding: 12px 10px 12px 0 !important; }
}

/* El tema pinta la barra con --color-secundario (bronce): sobre ese fondo el
   logo dorado no contrasta. Va todo en noche.
   Ojo: la franja del menú NO es el <nav> sino el .navbar-collapse /
   .offcanvas-body de adentro, así que hay que pintar los tres. */
.navbar-bg-color-secundario,
.navbar-bg-color-secundario.navbar-stick,
.navbar-bg-color-secundario .navbar-collapse,
.navbar-bg-color-secundario .offcanvas-body,
.navbar-bg-color-secundario .offcanvas-header,
#divBarraSuperior {
	background-color: var(--em-noche) !important;
}
.navbar-bg-color-secundario .navbar-collapse {
	border-bottom: 1px solid rgba(201, 162, 77, .16);
}

.navbar .nav-link {
	color: var(--em-marfil) !important;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12.5px;
	font-weight: 400;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--em-oro) !important; }

/* Dropdown del menú (Tienda → categorías) */
.navbar .dropdown-menu {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	border-radius: 3px;
}
.navbar .dropdown-menu .dropdown-item {
	color: var(--em-marfil);
	font-size: 13px;
	letter-spacing: .03em;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--em-panel-2);
	color: var(--em-oro);
}

/* Íconos del header (carrito, favoritos, cuenta, buscar) */
.navbar .navbar-other .nav-link i,
.navbar .navbar-other .list-inline-item a { color: var(--em-marfil) !important; }
.navbar .navbar-other .nav-link i:hover { color: var(--em-oro) !important; }

/* ---------- Footer ---------- */

.pie-pagina, footer {
	background-color: var(--em-noche) !important;
	color: var(--em-humo);
}
.pie-pagina a { color: var(--em-humo); }
.pie-pagina a:hover { color: var(--em-oro); }
.pie-pagina h4, .pie-pagina h5, .pie-pagina .widget-title { color: var(--em-marfil) !important; }

/* ---------- Títulos de bloques con degradé oro ---------- */

[id^="divBloque"] .display-4,
[id^="divBloque"] .display-5,
[id^="divBloque"] .display-6 {
	line-height: 1.3;
	background-image: linear-gradient(to right, var(--em-oro-claro) 10%, var(--em-oro-oscuro) 82%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

/* Antetítulo (uppercase chico) en oro */
.text-line, .post-category, .badge-oro {
	color: var(--em-oro) !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---------- Fichas de producto ---------- */

/* Las fotos de frasco vienen recortadas sobre blanco, así que la figura del
   producto lleva fondo blanco. Se apunta a .project (que es lo que marca una
   tarjeta de producto) y NO a .item a secas: el blog usa .item sin .project, y
   ahí el blanco asomaba por las esquinas de la imagen. */
.project figure,
.swiper-slide.project figure {
	background-color: #ffffff;
	border-radius: 4px;
}

#divBloqueCategorias .project figure,
#divBloqueCategorias .swiper-slide figure,
#divBloqueMarcas .project figure,
#divBloqueMarcas .swiper-slide figure,
#divBloquePromociones .project figure,
#divBloquePromociones .swiper-slide figure,
#divBloqueNotas .project figure,
#divBloqueNotas .swiper-slide figure,
#swiperPortadasHorizontal figure,
#swiperPortadasVertical figure {
	background-color: transparent !important;
}

/* Las tarjetas del blog: imagen sin fondo y con el mismo radio que el contenedor,
   así no queda el borde claro asomando en las esquinas (ni al hacer zoom). */
.widget .image-list figure,
.blog .item figure,
.blog figure.hover-scale,
figure.hover-scale.rounded {
	background-color: transparent !important;
	overflow: hidden;
}
.widget .image-list figure img,
.blog .item figure img,
figure.hover-scale.rounded img {
	border-radius: inherit;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project.item .post-header h2 a,
.swiper-slide.project .post-header h2 a,
.project.item .post-header h3 a {
	color: var(--em-marfil) !important;
	font-family: var(--em-font-texto) !important;
	letter-spacing: .02em;
}
.project.item .post-header h2 a:hover,
.swiper-slide.project .post-header h2 a:hover { color: var(--em-oro) !important; }

.price, .price ins, .amount { color: var(--em-oro) !important; }
.price del, .price del span, del.amount { color: var(--em-humo) !important; }

/* El % de descuento viene como .amount.text-danger: la regla de arriba lo
   pinta de oro y se pierde contra el precio. Se lo devuelve a badge sólido. */
[id^="txtDescuento_"] {
	background-color: var(--em-oro);
	color: var(--em-noche) !important;
	border-radius: 2px;
	padding: .12rem .4rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.item figure .item-cart, .swiper-slide figure .item-cart { padding: .4rem; }

.borde-encabezado-listado-productos { border-bottom: 1px solid var(--em-borde-oro); }

/* Badges de novedad / oferta */
.badge.bg-primary, .badge.bg-secondary {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
	letter-spacing: .08em;
	font-weight: 500;
}

/* ---------- Newsletter (card oscura con filete oro) ---------- */

#divBloqueNewsletter .card {
	background-image: none !important;
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde-oro);
}
#divBloqueNewsletter .card :is(h1, h2, h3, h4),
#divBloqueNewsletter .card .text-white { color: var(--em-marfil) !important; }
#divBloqueNewsletter .card p { color: var(--em-humo); }
#divBloqueNewsletter p { text-align: center; font-size: .9rem !important; }

/* ---------- Bloque de marcas: fondo oscuro, logos oro ---------- */

#divBloqueMarcas, #divBloqueMarcas .container { background-color: var(--em-noche) !important; }

/* ---------- Hero ---------- */

#swiperPortadasHorizontal, #swiperPortadasHorizontal .swiper-slide {
	height: calc(100vw / 2.65);
}

/* Bug de 100vh en Chrome/Safari mobile: usar svh para que el hero no se pase
   del viewport visible (el chrome del browser no cuenta). */
@media (max-width: 575.98px) {
	#swiperPortadasVertical,
	#swiperPortadasVertical .swiper-slide {
		height: calc(100svh - 110px) !important;
	}
}

/* Velo para que el texto se lea sobre cualquier foto */
#swiperPortadasHorizontal .swiper-slide figure::after,
#swiperPortadasVertical .swiper-slide figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11,11,16,.82) 0%, rgba(11,11,16,.45) 45%, rgba(11,11,16,.15) 100%);
	pointer-events: none;
}
@media (max-width: 575.98px) {
	#swiperPortadasVertical .swiper-slide figure::after {
		background: linear-gradient(180deg, rgba(11,11,16,.35) 0%, rgba(11,11,16,.75) 65%, rgba(11,11,16,.92) 100%);
	}
}

/* El titular del hero se comía media pantalla y quedaba encima de los frascos.
   Se le pone tope de ancho y un cuerpo acorde. */
@media (min-width: 992px) {
	/* El texto se alinea con el container del sitio (máx. 1320px centrado),
	   no con el borde de la pantalla. */
	#swiperPortadasHorizontal .swiper-content {
		max-width: min(46%, 620px);
		margin-left: 0;
		margin-right: auto;
		padding-left: max(1.5rem, calc((100vw - 1320px) / 2)) !important;
	}
	#swiperPortadasHorizontal .swiper-content h1,
	#swiperPortadasHorizontal .swiper-content h2,
	#swiperPortadasHorizontal .swiper-content .display-4 {
		font-size: clamp(1.9rem, 2.7vw, 3rem) !important;
		line-height: 1.15;
	}
	#swiperPortadasHorizontal .swiper-content p {
		font-size: .98rem;
	}
}

/* Los dos swipers del hero son independientes: siempre targetear ambos */
#swiperPortadasHorizontal .btn-primary,
#swiperPortadasVertical .btn-primary {
	background: var(--em-oro);
	border-color: var(--em-oro);
	color: var(--em-noche) !important;
}
#swiperPortadasHorizontal h1, #swiperPortadasHorizontal h2,
#swiperPortadasVertical h1, #swiperPortadasVertical h2 {
	color: var(--em-marfil) !important;
}

/* ---------- Categorías: nombre superpuesto sobre la imagen ---------- */

#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide { position: relative; }

#divBloqueCategorias figure.card-img-top::after,
#divBloqueCategorias figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 45%, transparent 70%);
	pointer-events: none;
	border-radius: 4px;
}
#divBloqueCategorias h4, #divBloqueCategorias h4 a {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 1rem;
	margin: 0;
	color: #ffffff !important;
	text-align: center;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 1rem;
}

/* ---------- Banners de beneficios ---------- */

#divBloqueBeneficios i, #divBloqueBanners i { color: var(--em-oro) !important; }
#divBloqueBeneficios h4, #divBloqueBanners h4 {
	font-family: var(--em-font-texto) !important;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Testimonios ---------- */

#divBloqueTestimonios .card { background-color: var(--em-panel); border: 1px solid var(--em-borde); }
#divBloqueTestimonios .text-warning { color: var(--em-oro) !important; }

/* ---------- Preguntas frecuentes (accordion) ---------- */

.accordion-item { background-color: var(--em-panel); border: 1px solid var(--em-borde); }
.accordion-button { background-color: var(--em-panel); color: var(--em-marfil); }
.accordion-button:not(.collapsed) { background-color: var(--em-panel-2); color: var(--em-oro); box-shadow: none; }
.accordion-body { color: var(--em-humo); }

/* ---------- Tablas ---------- */

.table { color: var(--em-marfil); }
.table > :not(caption) > * > * { background-color: transparent; border-color: var(--em-borde); }

/* ---------- Modales / offcanvas ---------- */

.modal-content, .offcanvas { background-color: var(--em-panel); color: var(--em-marfil); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--em-borde); }

/* El btn-close del tema NO es el de Bootstrap (SVG): es un ícono Unicons dentro
   de un círculo rgba(0,0,0,.08). Un filter:invert lo daba vuelta entero y dejaba
   un círculo gris claro con la X oscura. Se repinta a mano. */
.btn-close {
	color: var(--em-marfil) !important;
	filter: none;
	opacity: 1;
}
.btn-close::before {
	background: rgba(255, 255, 255, .08) !important;
	color: var(--em-marfil);
}
.btn-close:hover { color: var(--em-oro) !important; }
.btn-close:hover::before { background: rgba(201, 162, 77, .18) !important; }

/* ============================================================
   Contraste tema oscuro (patrón 3dproductos): carrito + buscador
   ============================================================ */

/* El panel arranca con .bg-white en el HTML y el tema le pinta el pie de blanco:
   los dos tienen que ir a noche o queda una franja clara bajo los botones. */
#carritoMenu, #favoritosMenu, #filtrosMenu,
#carritoMenu.bg-white, #carritoMenu .offcanvas-footer {
	background-color: var(--em-noche) !important;
}
/* Sin raya bajo el encabezado: separaba de mas y dejaba el primer producto pegado. */
#carritoMenu .offcanvas-header { border-bottom: 0; padding-bottom: 1.1rem; }

#carritoMenu .text-white, #carritoMenu p, #carritoMenu .link-light { color: var(--em-marfil) !important; }
#carritoMenu i, #favoritosMenu i { color: var(--em-marfil); }
#carritoMenu .variante-light { color: var(--em-humo) !important; }
#carritoMenu del span { color: var(--em-humo) !important; }
#carritoMenu .amount, #carritoMenu ins { color: var(--em-oro) !important; }
#carritoMenu .shopping-cart .link-titulo-carrito { color: var(--em-marfil) !important; }
#carritoMenu .shopping-cart .link-titulo-carrito:hover { color: var(--em-oro) !important; }
#carritoMenu .fp-shipbar-txt, #carritoMenu .fp-shipbar-labels b { color: var(--em-marfil); }

/* Carrito vacío: el tema pinta el ícono de #1f263c (invisible sobre negro) */
#carritoMenu .div-carrito-vacio i,
#favoritosMenu .div-favorito-vacio i {
	color: var(--em-oro) !important;
	opacity: .55;
}
#carritoMenu .div-carrito-vacio p,
#favoritosMenu .div-favorito-vacio p { color: var(--em-humo) !important; }

/* Carrito CON productos: el tema fuerza #1f263c en todos los totales */
#carritoMenu .totales-carrito-menu,
#carritoMenu .totales-carrito-menu td,
#carritoMenu .totales-carrito-menu strong,
#carritoMenu .totales-carrito-menu p,
#carritoMenu .totales-carrito-menu span { color: var(--em-marfil) !important; }
#carritoMenu .totales-carrito-menu .price,
#carritoMenu .totales-carrito-menu tr:last-child strong { color: var(--em-oro) !important; }
#carritoMenu .totales-carrito-menu .text-green,
#carritoMenu .totales-carrito-menu .text-success { color: #4ADE80 !important; }
#carritoMenu .totales-carrito-menu td { border-color: var(--em-borde) !important; }

/* Íconos de acción de cada ítem (quitar, editar) */
#carritoMenu .link-dark.cursor-pointer i,
#carritoMenu .shopping-cart-item i { color: var(--em-humo) !important; }
#carritoMenu .link-dark.cursor-pointer:hover i,
#carritoMenu .shopping-cart-item i:hover { color: var(--em-oro) !important; }

/* Tarjetas de sugeridos y fila del cupón */
#carritoMenu .sugerido-carrito-item {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde);
}
#carritoMenu .sugerido-carrito-item, #carritoMenu .sugerido-carrito-item * { color: var(--em-marfil); }
#carritoMenu .sugerido-carrito-item figure { background-color: #ffffff; border-radius: 3px; }
#carritoMenu #divCuponCarritoMenu .btn-primary { color: var(--em-noche) !important; }
#carritoMenu .fp-shipbar { background-color: transparent !important; }

.number-picker-cart .input-group input { color: #ffffff !important; }
.number-picker .input-group { border-radius: 2rem; }
.number-picker .btn-increment, .btn-decrement { border-radius: 2rem !important; }

.div-buscar-header .link-dark { color: #ffffff !important; }

#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
	border-color: var(--em-borde);
	background-color: var(--em-panel);
	color: var(--em-marfil);
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	border-color: var(--em-oro) !important;
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

.buscador-resultados .picker.picker-botones label:not([for*=radColor]),
.buscador-resultados .picker.picker-botones label:not([for*=radColor]) > span {
	border-color: var(--em-borde);
	background-color: transparent;
	color: var(--em-marfil);
}
.buscador-resultados .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	border-color: var(--em-oro) !important;
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

.picker label[for*=radVariante] > input:checked ~ span {
	background-color: var(--em-oro);
	color: var(--em-noche);
}
.picker label[for*=radVariante] > span { padding: .3rem; }

/* Las dos opciones de tamaño salian con distinto alto (20 px la elegida, 30 la otra) pese
   a tener el mismo padding, borde y contenido: los 10 px de diferencia se mantenian al
   cambiar el padding, asi que no venian de ahi. Se les fija el alto para emparejarlas.
   El ancho sigue dependiendo del texto, que es lo que se queria conservar. */
.picker label[for*=radVariante] {
	height: 32px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center;
}

#filtrosMenu { color: var(--em-marfil); }

/* ============================================================
   Alineación de productos en grilla y sliders (patrón 3dproductos)
   ============================================================ */

.row > .project.item[class*="col-"] { display: flex; flex-direction: column; }
.row > .project.item[class*="col-"] > div { display: flex; flex-direction: column; flex: 1; }
.row > .project.item[class*="col-"] .post-header { display: flex; flex-direction: column; flex: 1; }
.row > .project.item[class*="col-"] .post-header .price { margin-top: auto; }

.swiper-slide.project.item:not(:has(> .row)) {
	display: flex;
	flex-direction: column;
	height: auto !important;
}
.swiper-container:has(.swiper-slide.project.item:not(:has(> .row))) .swiper-wrapper {
	align-items: stretch !important;
}
.swiper-slide.project.item:not(:has(> .row)) > div { display: flex; flex-direction: column; flex: 1; }
.swiper-slide.project.item:not(:has(> .row)) .post-header { display: flex; flex-direction: column; flex: 1; }
.swiper-slide.project.item:not(:has(> .row)) .post-header .price { margin-top: auto; }
.swiper-slide.project.item:not(:has(> .row)) > [id^="btnAgregarProductoCarrito_"] { margin-top: auto; }

.swiper-slide.project.item:not(:has(> .row)) .picker.picker-botones label:not([for*=radColor]),
.project.item[class*="col-"] .picker.picker-botones label:not([for*=radColor]) {
	padding: 0.15rem;
	margin-right: 0.25rem;
	margin-bottom: 0.25rem;
}
.swiper-slide.project.item:not(:has(> .row)) .picker label[for*=radVariante] > span,
.project.item[class*="col-"] .picker label[for*=radVariante] > span { font-size: .65rem; }

[id^="btnAgregarProductoCarrito_"]:not(#divAgregarProductoCarrito *):not(#divBloqueDestacados *) {
	width: 100% !important;
}

/* ---------- Navegación del swiper de anuncios (chevrons Unicons) ---------- */

[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button {
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button.swiper-button-prev:after { content: "\e92f" !important; }
[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button.swiper-button-next:after { content: "\e931" !important; }

/* ============================================================
   FICHA PREMIUM en tema oscuro
   ficha-premium.css está diseñada para fondo claro: define --fp-ink oscuro
   y varios paneles con background:#fff. Acá se repintan sus tokens y los
   paneles que traen el blanco hardcodeado.
   ============================================================ */

:root {
	--fp-ink: #F1ECE3;
	--fp-muted: #9C96A6;
	--fp-border: #262633;
	--fp-border-strong: #3A3A4A;
}

/* Paneles con blanco fijo → panel grafito */
.fp-pickup,
.fp-linkrow,
.fp-acc,
.fp-plan,
.fp-cd-box,
.fp-despacho-countdown,
.fp-garantia,
.fp-cupon,
.fp-combo,
.fp-gift,
.fp-countdown,
.fp-barra {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil);
}

.fp-linkrow:hover,
.fp-plan:hover,
.fp-pickup:hover { background: var(--em-panel-2) !important; }

.fp-linkrow-title, .fp-pickup-title, .fp-plan-title,
.fp-acc-head, .fp-garantia-titulo { color: var(--em-marfil) !important; }
.fp-linkrow-sub, .fp-pickup-sub, .fp-plan-sub,
.fp-garantia-texto, .fp-pickup-item { color: var(--em-humo) !important; }
.fp-linkrow-ico, .fp-pickup-ico, .fp-garantia-ico { background: var(--em-panel-2) !important; }
.fp-linkrow-ico i, .fp-pickup-ico i, .fp-garantia-ico i,
.fp-linkrow-chev i { color: var(--em-oro) !important; }

/* Franja de despacho: el fondo es oro al 10%, el texto tiene que leerse */
.fp-despacho { border-color: var(--em-borde-oro) !important; }
.fp-despacho-txt, .fp-despacho-txt span { color: var(--em-marfil) !important; }
.fp-despacho-dia { background: var(--em-oro) !important; color: var(--em-noche) !important; }
.fp-despacho-countdown { color: var(--em-oro) !important; }

/* Cuenta regresiva de la promoción */
.fp-cd-box { color: var(--em-oro) !important; }
#divCuentaRegresivaPromocion .fp-countdown-title,
#divCuentaRegresivaPromocion span:not(.fp-cd-num):not(.fp-cd-lbl) { color: var(--em-marfil) !important; }
.fp-cd-num { color: var(--em-oro) !important; }
.fp-cd-lbl { color: var(--em-humo) !important; }

/* Barra sticky de compra */
.fp-barra { border-top: 1px solid var(--em-borde) !important; }

/* Acordeón de la ficha (Descripción, Ficha técnica) */
.fp-acc-head { background: var(--em-panel) !important; }
.fp-acc-body { background: var(--em-panel) !important; color: var(--em-marfil); }
.fp-acc-body li, .fp-acc-body p, .fp-acc-body strong { color: var(--em-marfil) !important; }

/* El badge de cuotas usa background:var(--fp-ink); al repintar ese token a
   marfil quedaba blanco sobre blanco. Vuelve a ser un chip oscuro. */
.fp-badge-info {
	background: var(--em-panel-2) !important;
	border: 1px solid var(--em-borde);
	color: var(--em-marfil) !important;
}
.fp-badge-info::before { color: var(--em-oro); }
.fp-badge-envio { background: #1E7A4B !important; border-color: #1E7A4B; color: #ffffff !important; }
.fp-badge-envio::before { color: #ffffff; }

/* Picker de variante (Tamaño). El fondo lo pinta el <label>, no el <span>:
   pintar el span dejaba un recuadro dentro de otro. */
.picker label[for*=radVariante] {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde) !important;
	border-radius: 3px;
	padding: .1rem .25rem;
}
.picker label[for*=radVariante] > span {
	background: transparent !important;
	color: var(--em-marfil) !important;
	border: 0 !important;
	padding: .3rem .45rem;
}
.picker label[for*=radVariante]:hover {
	border-color: var(--em-oro) !important;
}
.picker label[for*=radVariante]:has(input:checked) {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
}
.picker label[for*=radVariante] > input:checked ~ span {
	background: transparent !important;
	color: var(--em-noche) !important;
	font-weight: 600;
}

/* ============================================================
   LISTADO DE PRODUCTOS — panel de categorías y pickers
   Ambos vienen del tema con blancos fijos (#fff, rgba(0,0,0,...)).
   ============================================================ */

/* Picker de tamaño en las tarjetas: el fondo lo pone el label, no el span */
.picker.picker-botones label:not([for*=radColor]) {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil);
}
.picker.picker-botones label:not([for*=radColor]) > span { color: var(--em-marfil) !important; }
.picker.picker-botones label:not([for*=radColor]):hover { border-color: var(--em-oro) !important; }
.picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
}
.picker.picker-botones label:not([for*=radColor]) > input:checked ~ span {
	color: var(--em-noche) !important;
	font-weight: 600;
}

/* Panel lateral de categorías */
.aside-categorias .widget,
.categorias-nav {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
}
.categorias-nav .widget-title,
.categorias-nav-item { border-color: var(--em-borde) !important; }
.categorias-nav .widget-title {
	color: var(--em-oro) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.categorias-nav .link-body { color: var(--em-marfil) !important; }
.categorias-nav .link-body:hover {
	background-color: var(--em-panel-2) !important;
	color: var(--em-oro) !important;
}
.categorias-nav .link-body.active {
	background-color: var(--em-panel-2) !important;
	border-left-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
.categorias-nav .link-body .count {
	background-color: var(--em-panel-2) !important;
	color: var(--em-humo) !important;
}
.categorias-nav .link-body.active .count {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.categorias-nav .categorias-subnav {
	background-color: rgba(255, 255, 255, .02) !important;
	border-top-color: var(--em-borde) !important;
}

/* La barra del buscador toma --buscador-fondo, que por default es
   --color-secundario (el bronce). Va en noche como el resto del header. */
:root { --buscador-fondo: #0B0B10; }

/* ============================================================
   HEADER — aire y alineación
   Sin la barra superior de redes, el logo quedaba pegado a la barra de
   anuncios y la franja del menú tenía el padding de 1.7rem del tema
   (más de 40px de aire arriba y abajo de cada link).
   ============================================================ */

@media (min-width: 992px) {
	/* Aire entre la barra de anuncios y la fila del logo/buscador */
	.header-nav > .container {
		padding-top: .9rem;
	}

	/* El tema pone padding-top/bottom 1.7rem en los nav-link del menú */
	.navbar-expand-lg[class*="navbar-bg-"]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
		padding-top: .85rem !important;
		padding-bottom: .85rem !important;
	}

	/* Todos los items del menú alineados sobre la misma línea base: el
	   dropdown-toggle de Perfumes traía su propio alto por el chevron. */
	.navbar-nav > .nav-item > .nav-link {
		display: flex;
		align-items: center;
		line-height: 1.2;
	}
	.navbar-nav > .nav-item {
		display: flex;
		align-items: stretch;
	}
}

/* Barra de anuncios: sin filete inferior */
[id^="divAnuncio_"] {
	border-bottom: 0px solid;
}

/* El tema tiene reglas propias con #carritoMenu (especificidad de id) que hay
   que igualar: pinta los importes del pie de #1f263c y el botón secundario de
   blanco, pensados para un carrito de fondo claro. */
#carritoMenu .offcanvas-footer span,
#carritoMenu .offcanvas-body > .d-flex p,
#carritoMenu .offcanvas-footer .h6,
#carritoMenu .offcanvas-footer strong,
#carritoMenu .offcanvas-footer label,
#carritoMenu .offcanvas-footer .text-dark {
	color: var(--em-marfil) !important;
}
/* El importe final, en oro */
#carritoMenu .offcanvas-footer .h6.text-dark,
#carritoMenu .offcanvas-footer .h5.text-dark {
	color: var(--em-oro) !important;
}

#carritoMenu .btn-secundario,
#carritoMenu .btn-secondary,
#carritoMenu .btn-seguir-comprando {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--em-oro) !important;
	color: var(--em-oro) !important;
}
#carritoMenu .btn-secundario:hover,
#carritoMenu .btn-secondary:hover,
#carritoMenu .btn-seguir-comprando:hover {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
#carritoMenu .btn-seguir-comprando i,
#carritoMenu .btn-secundario i,
#carritoMenu .btn-secondary i { color: inherit !important; }

/* ============================================================
   MEGAMENÚ
   ============================================================ */

/* La columna de Casas tiene 12 items y estiraba el panel al doble de alto que las
   otras tres. Ahora que son logos sin texto se reparten en una grilla de dos (ver el
   bloque "Megamenú: logos de las casas" mas abajo), asi que aca solo queda el resto. */
@media (min-width: 992px) {
	.megamenu-panel .megamenu-col:nth-child(4) .megamenu-items > li {
		break-inside: avoid;
	}
}

/* Encabezado de columna en oro, como el resto de los antetítulos del sitio.
   Mismo padding lateral que los ítems (el tema los deja en `padding: 0 0 .9rem`),
   así el título y su lista arrancan en la misma línea y el hover del título
   clickeable no queda pegado al texto. */
.megamenu-panel .megamenu-col-titulo {
	color: var(--em-oro) !important;
	letter-spacing: .12em;
	font-family: var(--em-font-titulos) !important;
	padding-left: .7rem;
	padding-right: .7rem;
	/* El theme deja 18 px de padding SOLO abajo (padding: 0 0 .9rem): el fondo del hover
	   se estiraba hacia abajo y el texto quedaba pegado arriba. Ese aire pasa a margen,
	   que no se pinta, y el padding vertical queda parejo. */
	padding-top: .35rem;
	padding-bottom: .35rem;
	margin-left: -.7rem;
	/* Pegado a su lista: el primer enlace ya aporta 9 px de padding propio. */
	margin-bottom: .25rem;
	border-radius: 3px;
}
.megamenu-panel a.megamenu-col-titulo[href]:hover,
.megamenu-panel a.megamenu-col-titulo[href]:focus {
	background: rgba(255, 255, 255, .05);
	color: var(--em-oro-claro) !important;
}
.megamenu-panel .megamenu-item:hover .megamenu-item-titulo { color: var(--em-oro); }

/* Logo del pie */
.footer-logo {
	width: 200px;
}

/* ============================================================
   BLOG / GUÍAS en tema oscuro
   ============================================================ */

/* Columna lateral: categorías, archivo y tags venían con el gris del tema claro */
.widget .link-body,
.widget .unordered-list a,
.widget .image-list .post-content a {
	color: var(--em-marfil) !important;
}
.widget .link-body:hover,
.widget .unordered-list a:hover { color: var(--em-oro) !important; }
.widget .unordered-list.bullet-primary li::before,
.widget .unordered-list li::marker { color: var(--em-oro); }

/* Tags: el btn-soft-ash es un gris claro con texto oscuro */
.tag-list .btn-soft-ash,
.tag-list .btn {
	background-color: var(--em-panel-2) !important;
	border: 1px solid var(--em-borde) !important;
	color: var(--em-humo) !important;
	letter-spacing: .02em;
}
.tag-list .btn-soft-ash:hover, .tag-list .btn:hover {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

/* Paginación: .page-link viene en blanco con texto oscuro */
.pagination { box-shadow: none; }
.page-link {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.page-link:hover {
	background-color: var(--em-panel-2) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
.page-item.active .page-link,
.page-link.active {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.page-item.disabled .page-link {
	background-color: var(--em-panel) !important;
	color: rgba(156, 150, 166, .45) !important;
}

/* El teléfono de la sección queda como un ícono suelto cuando no hay número */
.enlace-telefono-seccion[href="tel:"] { display: none !important; }

/* Ítems del megamenú: el tema los deja sin padding lateral, así que en el hover
   el resaltado quedaba pegado al texto. Se les da aire y se compensa con un
   margen negativo para que sigan alineados con el título de la columna. */
.megamenu-panel .megamenu-item {
	padding-left: .7rem;
	padding-right: .7rem;
	margin-left: -.7rem;
	border-radius: 3px;
}
.megamenu-panel .megamenu-item:hover,
.megamenu-panel .megamenu-item:focus {
	background: rgba(255, 255, 255, .05);
	color: var(--em-oro) !important;
}

/* ============================================================
   FICHA DE PRODUCTO — ajustes del modo oscuro
   ============================================================ */

/* Acordeones (Descripción / Información adicional): el contenedor y cada ítem
   traían borde propio, así que se veía un marco dentro de otro y las esquinas
   no coincidían. Ahora el contenedor es transparente y cada ítem es un panel
   separado, con aire entre ellos y por dentro. */
.card.accordion.accordion-wrapper,
.accordion-wrapper {
	background: transparent !important;
	border: 0 !important;
}
.accordion-wrapper .accordion-item {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde) !important;
	border-radius: 4px !important;
	margin-bottom: .75rem;
	overflow: hidden;
}
.accordion-wrapper .accordion-item:last-child { margin-bottom: 0; }
.accordion-wrapper .card-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 1rem 1.25rem !important;
}
.accordion-wrapper .card-header button {
	color: var(--em-marfil);
	font-weight: 500;
	letter-spacing: .02em;
}
.accordion-wrapper .card-header button:not(.collapsed) { color: var(--em-oro); }
.accordion-wrapper .card-body {
	background: transparent !important;
	color: var(--em-marfil);
	padding: .25rem 1.25rem 1.25rem !important;
}
.accordion-wrapper .card-body p,
.accordion-wrapper .card-body li,
.accordion-wrapper .card-body strong { color: var(--em-marfil) !important; }
.accordion-wrapper .card-body ul { margin-bottom: .5rem; }

/* Franja de beneficios dentro de la ficha: viene con fondo blanco */
#divBanners,
#divBanners.wrapper,
#divBanners.bg-color-secundario {
	background-color: var(--em-noche) !important;
}
#divBanners i { color: var(--em-oro) !important; }
#divBanners h4, #divBanners p { color: var(--em-marfil) !important; }

/* Barra flotante de compra: el glass NO está en el div sino en su ::before
   (un panel blanco al 82% con brightness(1.5), definido en un <style> inline de
   la página y con z-index:-1, así que tapa cualquier fondo que se le ponga al
   elemento). Se repinta el pseudo-elemento conservando el desenfoque. */
/* La barra sticky de compra pinta su glass en un `:before` con `background-clip:
   content-box, border-box` y `backdrop-filter: brightness(1.5)`, todo declarado en un
   <style> del body. Repintar ese pseudo-elemento funciona pero queda a merced de cómo
   resuelva el navegador el clip múltiple. Se hace al revés: el fondo va en el elemento
   —que ya trae el `backdrop-filter` del glass— y el pseudo se apaga por completo. */
#divBarraCompraProducto {
	background: linear-gradient(rgba(20, 20, 28, .90) 0%, rgba(14, 14, 20, .94) 100%) !important;
	border: 1px solid var(--em-borde-oro) !important;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .45) !important;
	-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
	backdrop-filter: blur(20px) saturate(140%) !important;
}
#divBarraCompraProducto::before,
#divBarraCompraProducto:before {
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
#divBarraCompraProducto .fp-stickybar-thumb {
	background-color: #ffffff !important;
	border-color: var(--em-borde) !important;
}
#divBarraCompraProducto,
#divBarraCompraProducto span,
#divBarraCompraProducto label { color: var(--em-marfil); }
#divBarraCompraProducto .amount, #divBarraCompraProducto ins { color: var(--em-oro) !important; }

/* Reseñas de clientes */
#listadoCalificaciones .fp-resena-card,
#listadoCalificaciones .calificacion-item,
#listadoCalificaciones .card,
.fp-resena-card {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde) !important;
	color: var(--em-marfil);
}
.fp-resena-card p, .fp-resena-card span, .fp-resena-card strong,
.fp-resena-card .fp-resena-texto { color: var(--em-marfil) !important; }
.fp-resena-card .fp-resena-fecha,
.fp-resena-card small, .fp-resena-card .text-muted { color: var(--em-humo) !important; }
.fp-resena-card .fp-resena-autor, .fp-resena-card h6 { color: var(--em-marfil) !important; }
/* El avatar por defecto viene con fondo claro */
.fp-resena-card img, .fp-resena-avatar { border-radius: 50%; }
#listadoCalificaciones .text-muted, #listadoCalificaciones small { color: var(--em-humo) !important; }
#listadoCalificaciones .text-warning, .fp-resenas-resumen .text-warning { color: var(--em-oro) !important; }

.fp-resenas-dist-btn {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.fp-resenas-dist-btn:hover,
.fp-resenas-dist-btn.activo {
	background-color: var(--em-panel-2) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
/* Panel de distribución de puntajes. Las clases reales son -track y -fill (antes esto
   apuntaba a un inexistente -bar, por eso el panel seguía en claro): el contenedor usa
   --fp-soft y la pista un #e9e9ec fijo, los dos claros. */
.fp-resenas-dist {
	background: var(--em-panel) !important;
	border: 1px solid var(--em-borde);
}
.fp-resenas-dist-lbl { color: var(--em-marfil); }
.fp-resenas-dist-lbl i { color: var(--em-oro); }
.fp-resenas-dist-track { background: rgba(241, 236, 227, .10) !important; }
.fp-resenas-dist-fill { background: var(--em-oro) !important; }
.fp-resenas-dist-cant { color: var(--em-tenue, #9C96A6); }

#selectOrdenCalificaciones,
.fp-resenas-orden {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
#selectOrdenCalificaciones option { background-color: var(--em-panel); color: var(--em-marfil); }

/* ============================================================
   SECCIÓN CONTACTO
   ============================================================ */

/* El botón de WhatsApp tomaba el padding y el radio de .btn-primary y quedaba
   como un cuadrado dorado suelto arriba del formulario. Va circular. */
.btn-whatsapp-contacto {
	width: 64px;
	height: 64px;
	min-width: 64px;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 1px solid var(--em-oro) !important;
	color: var(--em-oro) !important;
	transition: background-color .2s ease, color .2s ease;
}
.btn-whatsapp-contacto:hover {
	background: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.btn-whatsapp-contacto i { color: inherit !important; }

/* Teléfono / WhatsApp de la sección */
.titulo-whatsapp-contacto, .enlace-whatsapp-contacto {
	color: var(--em-marfil) !important;
	letter-spacing: .04em;
}
.enlace-whatsapp-contacto:hover { color: var(--em-oro) !important; }

/* Aire entre el texto de la sección y el bloque de contacto */
.div-texto-seccion { margin-bottom: 1.5rem; }

/* blog.php imprime un h1 con ucfirst(BLOG_URL_CUSTOM), o sea el slug crudo
   ("Guias", sin tilde), que además duplica el título de la sección. */
.container:has(> h1.display-6 + .row > #divBlog) > h1.display-6 { display: none; }

/* ============================================================
   PIE DE PÁGINA EN MOBILE
   El accordion (Categorías / Marcas / Legales) usa .card.plain, que en el tema
   claro no se ve; sobre fondo oscuro cada ítem quedaba como un panel con borde
   pegado al borde de la pantalla.
   ============================================================ */

@media (max-width: 991.98px) {
	footer .accordion-wrapper,
	.pie-pagina-mobile .accordion-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
	footer .accordion-wrapper .card.plain.accordion-item {
		background: var(--em-noche) !important;
		border: 0 !important;
		border-bottom: 0px solid var(--em-borde) !important;
		border-radius: 0 !important;
		margin-bottom: 0;
	}
	footer .accordion-wrapper .card-header {
		padding: .95rem 0 !important;
	}
	footer .accordion-wrapper .card-header button {
		padding-left: 1.6rem !important;
		font-size: .95rem;
		color: var(--em-marfil);
	}
	footer .accordion-wrapper .card-body {
		padding: 0 0 .9rem 1.6rem !important;
	}
	footer .accordion-wrapper .card-body ul { margin-bottom: 0; }
}

/* ---------- Secciones con portada propia (Nosotros, Contacto) ----------
   El contenido arrancaba a 70px de la portada y, con todo oscuro, quedaba
   pegado: no se leía dónde termina una cosa y empieza la otra. */
#divContenido.seccion-hero > .container {
	margin-top: 7rem !important;
	padding-top: 0 !important;
}
#divContenido.seccion-hero {
	padding-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
	#divContenido.seccion-hero > .container {
		margin-top: 3.5rem !important;
	}
}

/* ---------- Contacto: bloque de atención al cliente ----------
   El botón de WhatsApp es un `.icon.btn` (círculo de tamaño fijo), así que el
   texto se le salía por los costados. Se lo pasa a píldora y se le baja el aire. */
#divAtencionCliente .row.mt-9 {
	margin-top: 2.25rem !important;
}
#divAtencionCliente .btn-whatsapp-contacto {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem !important;
	padding: .6rem 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
#divAtencionCliente .btn-whatsapp-contacto i {
	font-size: 1.4rem !important;
	line-height: 1;
}
#divAtencionCliente .btn-whatsapp-contacto p {
	margin-left: 0 !important;
	font-size: .95rem !important;
	white-space: nowrap;
	letter-spacing: .02em;
}
/* El título y el botón venían centrados y el teléfono/horarios alineados a la
   izquierda (con la sangría del bullet). Se unifica todo al centro. */
#divAtencionCliente .icon-list {
	text-align: center;
}
#divAtencionCliente .icon-list li {
	padding-left: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}
#divAtencionCliente .icon-list li::before,
#divAtencionCliente .icon-list li::marker {
	content: none;
}
#divAtencionCliente .icon-list li > a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
#divAtencionCliente .icon-list li i {
	position: static !important;
	flex: 0 0 auto;
}

/* ---------- Menú mobile ---------- */
@media (max-width: 991.98px) {
	#mobileMenu .mobile-menu-panel {
		background: var(--em-noche);
	}
}

/* ---------- Bullets de las listas con ícono (todo el sitio) ----------
   El theme los dibuja al revés para un fondo oscuro: círculo gris claro con el
   ícono dorado. Se invierten —círculo dorado, ícono claro— para que el bullet
   lea como una marca de la casa y no como un parche gris. */
.icon-list.bullet-soft-primary.bullet-bg i {
	background-color: var(--color-primario) !important;
}
.icon-list.bullet-soft-primary i {
	color: #eeeeee !important;
}

/* ---------- Ficha: aire entre las reseñas y la franja de beneficios ----------
   Quedaban a 20px, pegadas. */
#divCalificacionesProducto {
	padding-bottom: 3.5rem;
}

/* ---------- Perfil de la fragancia (panel Perfumería) ----------
   ficha-premium.css lo dibuja sobre --fp-soft, que es claro. Se repintan las
   tres superficies del bloque para que acompañen al resto de la ficha. */
.fp-perfumeria-puntaje,
.fp-perfumeria-grupo,
.fp-perfumeria-piramide {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
}
.fp-perfumeria-titulo {
	font-family: 'Cinzel', serif;
	color: var(--em-marfil);
}
.fp-perfumeria-barra-pista {
	background: rgba(241, 236, 227, .07);
}
.fp-perfumeria-nota-img {
	background: var(--em-noche);
	border-color: var(--em-borde-oro);
}
.fp-perfumeria-estrella-vacia {
	color: #3A3A4A;
}

/* ---------- Breadcrumb: separadores en oro ----------
   El theme los deja en gris al 35%, que sobre el fondo oscuro casi no se ven. */
.breadcrumb-item + .breadcrumb-item::before {
	color: var(--em-oro) !important;
}

/* ---------- Aviso flotante de envío gratis ----------
   El flotante se dibuja fuera de #carritoMenu y trae `background:#fff` fijo de
   ficha-premium.css, así que el texto (que en este tenant es marfil por --fp-ink)
   quedaba blanco sobre blanco. Se lo pasa al panel oscuro como el resto. */
.fp-progreso-flotante {
	background: var(--em-panel) !important;
	border-color: var(--em-borde-oro) !important;
}
.fp-progreso-flotante .fp-shipbar-txt {
	color: var(--em-marfil);
}
.fp-progreso-flotante .fp-shipbar-track {
	background: rgba(241, 236, 227, .10);
}
.fp-progreso-flotante-cerrar {
	background: rgba(241, 236, 227, .08);
	color: var(--em-marfil);
}

/* ---------- Megamenú: logos de las casas ----------
   Los logos son claros sobre transparente: el cuadrito gris del theme los apagaba.
   Se les saca el fondo y se agrandan para que la casa se reconozca de un vistazo. */
/* El nombre al lado del logo era redundante (el logo ya dice la casa) y ademas partia
   el resaltado del hover en dos. La columna pasa a ser una grilla de logos: cada celda
   es toda clickeable y el hover la cubre entera. */
.megamenu-panel .megamenu-estilo-4 .megamenu-item-texto {
	display: none;
}

/* megamenu.css fuerza `display:block !important` sobre el .dropdown-menu de cada columna
   con un selector de 5 clases (.navbar-nav .megamenu-panel .megamenu-col:not()...), asi que
   un `display:grid !important` normal pierde y la grilla queda en una sola columna. Hay que
   igualar el peso: por eso el selector largo con .dropdown-menu incluido. */
.navbar-expand-lg:not(.hover-none) .navbar-nav .megamenu-panel .megamenu-col.megamenu-estilo-4:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu.megamenu-items,
.navbar-nav .megamenu-panel .megamenu-col.megamenu-estilo-4:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu.megamenu-items,
.megamenu-panel.preview-megamenu-panel .megamenu-col.megamenu-estilo-4:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu.megamenu-items {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: .3rem;
	/* Si las casas no entran, scrollea SOLO esta columna y no el panel entero. */
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.megamenu-panel .megamenu-estilo-4 .megamenu-items > li {
	margin: 0;
	display: flex;
}

.megamenu-panel .megamenu-estilo-4 .megamenu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	/* height 100% para que el fondo del hover cubra toda la celda: con min-height el <a>
	   quedaba mas bajo que su fila y el resaltado se veia pegado arriba. */
	height: 100%;
	min-height: 62px;
	padding: .5rem;
	margin: 0;
	border-radius: 6px;
}

/* Barra de scroll discreta, al tono del panel */
.megamenu-panel .megamenu-estilo-4 .megamenu-items::-webkit-scrollbar {
	width: 6px;
}
.megamenu-panel .megamenu-estilo-4 .megamenu-items::-webkit-scrollbar-thumb {
	background: rgba(201, 162, 77, .35);
	border-radius: 999px;
}

.megamenu-panel .megamenu-estilo-4 .megamenu-item-imagen {
	background-color: transparent !important;
	/* Los logos son apaisados (320x120): en la caja cuadrada del theme quedaban
	   reducidos a una franja de 16 px y no se reconocía ninguno. */
	width: 100%;
	max-width: 96px;
	height: 42px;
	border-radius: 0;
}

/* ---------- Modales de la ficha (reseña, guía de talles) ----------
   ficha-premium.css le pone `background:#fff` fijo al encabezado, así que el cuerpo
   quedaba oscuro y la cabecera blanca con el título ilegible. */
.fp-modal-talles .modal-header {
	background: var(--em-panel) !important;
	border-bottom-color: var(--em-borde) !important;
}
.fp-modal .modal-title {
	color: var(--em-marfil);
}
.fp-modal .modal-title i {
	color: var(--em-oro);
}

/* Chip de envío de la ficha: en oro, como el resto de los destacados del sitio. */
.fp-badge-envio {
	background: #c9a24d !important;
	border-color: #c9a24d;
	color: #ffffff !important;
}

/* ---------- Avisos del checkout ----------
   `.alert-custom` del theme viene con fondo blanco y texto gris: sobre el checkout
   oscuro los dos avisos de arriba quedaban ilegibles. */
.alert.alert-custom {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.alert.alert-custom p,
.alert.alert-custom span {
	color: var(--em-marfil) !important;
}
.alert.alert-custom i {
	color: var(--em-oro) !important;
}
.alert.alert-custom .alert-link {
	color: var(--em-oro) !important;
	text-decoration: underline;
}

/* Bullet activo de los sliders: aro en oro en vez de relleno. */
.swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	transform: scale(1);
	background: 0 0;
	border-color: var(--color-primario);
}

.swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: 0 0;
	border-color: var(--color-primario);
}

/* ---------- Resumen del pedido (checkout) ---------- */

/* La línea que separa el producto de Subtotal/Promociones/Total salía casi blanca
   (borde por defecto de .table de Bootstrap): va al mismo gris que el borde de la tarjeta. */
/* La raya que separa los productos de los totales la dibuja el <tbody> (border-top
   #edeff3 del theme), no las celdas: por eso pintar td/th/tr no la cambiaba. */
.table-order,
.table-order tbody,
.table-order thead,
.table-order td,
.table-order th,
.table-order tr {
	border-color: var(--em-borde) !important;
}

/* Tacho de quitar el producto: se perdía contra el fondo. */
/* El ícono del tacho trae su propio color gris: hay que pintar el <i>, no solo el <p>. */
p[onclick^="eliminarProductoCheckout"],
p[onclick^="eliminarProductoCheckout"] i {
	color: #ffffff !important;
	opacity: 1;
	transition: color .18s ease;
}
p[onclick^="eliminarProductoCheckout"]:hover,
p[onclick^="eliminarProductoCheckout"]:hover i {
	color: var(--em-oro) !important;
	opacity: 1;
}

/* Selector de cantidad: el input traía un borde grueso propio y rompía la línea del
   control. El borde queda en el grupo, y adentro los tres elementos van al tono. */
.number-picker-checkout .input-group {
	border: 1px solid var(--em-borde) !important;
	border-radius: 2rem;
	overflow: hidden;
	background-color: transparent;
}
.number-picker-checkout .input-group .form-control {
	border: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	color: var(--em-marfil) !important;
	text-align: center;
}
.number-picker-checkout .btn-increment,
.number-picker-checkout .btn-decrement {
	border: 0 !important;
	background-color: transparent !important;
	color: var(--em-oro) !important;
}
.number-picker-checkout .btn-increment:hover,
.number-picker-checkout .btn-decrement:hover {
	background-color: rgba(201, 162, 77, .12) !important;
}

/* ---------- Carrito lateral: detalles ---------- */

/* Tacho de quitar: blanco en reposo, oro al pasar por encima. */
#carritoMenu .shopping-cart-item i.uil-trash-alt,
#carritoMenu [onclick*="eliminarProductoCarrito"],
#carritoMenu [onclick*="eliminarProductoCarrito"] i {
	color: var(--em-marfil) !important;
}
#carritoMenu [onclick*="eliminarProductoCarrito"]:hover,
#carritoMenu [onclick*="eliminarProductoCarrito"]:hover i {
	color: var(--em-oro) !important;
}

/* La cantidad, en blanco (venia en el gris del theme). */
#carritoMenu .number-picker .input-group input,
#carritoMenu .number-picker-cart .input-group input,
#carritoMenu input[type="number"],
#carritoMenu .form-control {
	color: var(--em-marfil) !important;
}

/* La cinta de envio gratis comparte el fondo del carrito, sin cortes de color. El pie
   NO va transparente: es fijo sobre la lista, y sin fondo se le vería el contenido pasar
   por debajo al scrollear. */
#carritoMenu .fp-shipbar,
#carritoMenu .fp-shipbar-wrap {
	background-color: transparent !important;
}
#carritoMenu .offcanvas-footer {
	background-color: var(--em-noche) !important;
}

/* La raya que separa los productos de los totales venía del theme en un gris claro:
   va al mismo tono que las de Subtotal / Promociones / Total. */
#resumenProductos,
#resumenProductos > div,
#resumenCalculos,
#divProductosResumenCheckout {
	border-color: var(--em-borde) !important;
}

/* Tipo de entrega: los dos botones venían blancos (btn-outline-primary del theme). */
.checkout-check .form-check-label.btn-outline-primary {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.checkout-check .form-check-label.btn-outline-primary i {
	color: var(--em-oro) !important;
}
.checkout-check .form-check-label.btn-outline-primary:hover {
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
.checkout-check .form-check-label.btn-outline-primary.active {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.checkout-check .form-check-label.btn-outline-primary.active i {
	color: var(--em-noche) !important;
}

/* Opciones desplegadas de los <select>: las dibuja el navegador y heredaban un gris
   oscuro que sobre el fondo negro casi no se leía. */
select option,
select.form-control option,
select.form-select option {
	background-color: var(--em-panel);
	color: var(--em-marfil);
}
select option:disabled {
	color: var(--em-humo, #9C96A6);
}

/* ---------- Checkout: métodos de pago ----------
   Los botones (btn-outline-primary) y los paneles de cada método vienen del theme con
   fondo blanco y textos grises: sobre el checkout oscuro quedaban ilegibles. */

/* Botones de método de pago: mismo criterio que los de tipo de entrega. */
label[for^="metodoPago_"].btn-outline-primary {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
label[for^="metodoPago_"].btn-outline-primary i {
	color: var(--em-oro) !important;
}
label[for^="metodoPago_"].btn-outline-primary:hover {
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
label[for^="metodoPago_"].btn-outline-primary.active {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
label[for^="metodoPago_"].btn-outline-primary.active i {
	color: var(--em-noche) !important;
}

/* Panel de cada método (efectivo, transferencia, Mercado Pago, presupuesto). */
.mp-checkout-pro-container {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
}
.mp-checkout-pro-benefits-title,
.mp-checkout-pro-redirect-title {
	color: var(--em-marfil) !important;
}
.mp-checkout-pro-benefit-title,
.mp-checkout-pro-benefit strong {
	color: var(--em-marfil) !important;
}
.mp-checkout-pro-benefit-description,
.mp-checkout-pro-redirect-description {
	color: var(--em-humo, #9C96A6) !important;
}
.mp-checkout-pro-benefit-icon,
.mp-checkout-pro-redirect-icon,
.mp-checkout-pro-benefit i,
.mp-checkout-pro-redirect i {
	color: var(--em-oro) !important;
}

/* ---------- Alerts de Bootstrap en el sitio ----------
   Vienen con fondo pastel y texto oscuro: sobre el tema oscuro no se leen. Se pasan a
   panel con el color semántico en el borde y el ícono, que es lo que hay que distinguir. */
.alert.alert-info,
.alert.alert-warning,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-primary,
.alert.alert-secondary {
	background-color: var(--em-panel) !important;
	color: var(--em-marfil) !important;
}
.alert.alert-info { border-color: rgba(56, 189, 248, .35) !important; }
.alert.alert-warning { border-color: rgba(201, 162, 77, .45) !important; }
.alert.alert-success { border-color: rgba(74, 222, 128, .35) !important; }
.alert.alert-danger { border-color: rgba(248, 113, 113, .35) !important; }
.alert.alert-primary,
.alert.alert-secondary { border-color: var(--em-borde) !important; }

.alert.alert-info i { color: #7dd3fc !important; }
.alert.alert-warning i { color: var(--em-oro) !important; }
.alert.alert-success i { color: #86efac !important; }
.alert.alert-danger i { color: #fca5a5 !important; }

.alert.alert-info a,
.alert.alert-warning a,
.alert.alert-success a,
.alert.alert-danger a {
	color: var(--em-oro) !important;
}

/* El botón de Mercado Pago con el mismo radio que el resto de los botones del sitio. */
.btn-mercadopago {
	border-radius: 2px;
}

/* Logos de la cinta del megamenú en oro. Se hace con filter y no con mask: la máscara
   resuelve su url contra el CSS (no contra el documento) y ademas colapsaba la celda. */
.megamenu-panel .megamenu-cinta-item img {
	/* Cadena calculada simulando los filtros CSS sobre el color real de los logos
	   (#dbd7cf). Apunta a un oro mas luminoso que el primario (#dcb65e): con el oro
	   exacto de la marca la cinta quedaba apagada sobre el panel oscuro. */
	filter: brightness(0.70) sepia(1) saturate(2.1) hue-rotate(4deg);
}

/* Los titulos de producto de "Productos recomendados" y "Visto recientemente" quedaban en
   el gris oscuro del theme (#3c3c3b) sobre el fondo casi negro: ilegibles. El encabezado de
   cada seccion ya venia claro, solo faltaban los de las tarjetas. */
#divRecomendados h2,
#divRecomendados h2 a,
#divRecientes h2,
#divRecientes h2 a {
	color: var(--em-texto) !important;
}

#divRecomendados h2 a:hover,
#divRecientes h2 a:hover {
	color: var(--color-primario) !important;
}