:root{
	--gradient-store-card: linear-gradient(135deg, #fdf6f0e0 40%, #899fd3);
}

/* NX::Merchant Store Pro — estilos base del catálogo */
.nx-categorias-grid,
.nx-productos-grid,
.nx-destacados-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 24px 0;
}

.nx-productos-grid a h3{
	font-size:1.1rem !important;
	font-weight:500 !important;
}
.nx-categoria-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	background: #fff;
}

.nx-categoria-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.nx-categoria-imagen {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f3f3;
}

.nx-categoria-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nx-categoria-icono {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50%;
	background: #fff;
	padding: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	object-fit: contain;
}

.nx-categoria-info {
	padding: 14px 16px;
}

.nx-categoria-titulo {
	margin: 0 0 6px !important;
	font-size: 1.4rem !important;
}

.nx-categoria-desc {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: #666;
}

.nx-categoria-contador,
.nx-categoria-contador-total {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #2c7a4b;
	background: #eaf7ee;
	padding: 3px 10px;
	border-radius: 999px;
}

.nx-categoria-header {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.nx-categoria-header-imagen {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
}

.nx-producto-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 12px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
	transform: translate3d(0,0,0);
	will-change: transform, box-shadow;
	transition:
			transform .22s ease,
			box-shadow .22s ease;
}
.nx-producto-card h3{color: #246D61;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.nx-producto-card:hover {
	transform: translate3d(0,-3px,0);
	box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.nx-producto-card img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 10px;
}

.nx-producto-card-imagen {
	position: relative;
}

.nx-producto-card-imagen img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 10px;
	display: block;
}

.nx-producto-card-precio {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: baseline;
	gap: 8px;
	display: flex;
justify-content: center;
}

.nx-producto-card-precio-normal {
	color: #1a1a1a;
}

.nx-producto-card-precio-anterior {
	color: #999;
	font-weight: 400;
	font-size: 13px;
	text-decoration: line-through;
}

.nx-producto-card-precio-oferta {
	color: #d3242c;
}

@media (max-width: 480px) {
	.nx-categoria-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

.nx-categoria-header-texto{
	max-width:990px;
	width:100%;
}

@media (max-width: 1440px) {
	.nx-categoria-header-texto{
		max-width:800px;
	}
}

/* NX v2.5 category UX additions */
/* NX v2.6 — breadcrumb de la ficha de categoría/subcategoría. */
.nx-categoria-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: #666;
}
.nx-categoria-breadcrumb a {
	color: #2c7a4b;
	text-decoration: none;
}
.nx-categoria-breadcrumb a:hover {
	text-decoration: underline;
}
.nx-categoria-breadcrumb-sep {
	color: #b7b7b7;
}
.nx-categoria-breadcrumb-actual {
	color: #666;
	font-weight: 600;
}

.nx-categoria-header-v25{
	display:flex;
	gap:30px;
	align-items:
	flex-start;
}
.nx-categoria-header-v25 .nx-categoria-header-imagen{
	max-width:400px;
	width:40%;
	height:auto;
}
.nx-categoria-titulo-v25{
	text-align:center;
	font-size:34px;
	color:#246D61;
}
@media(max-width:768px){
	.nx-categoria-header-v25{
		flex-direction:column;
	}
	.nx-categoria-header-v25 .nx-categoria-header-imagen{
		width:100%;
		max-width:400px;
	}
	.nx-categoria-titulo-v25{
		text-align:center;
	}
	.nx-categoria-header-desc{
		text-align:left;
	}
}

/* ---------- "Ocultar precios en el frontend" (Ajustes → Moneda, v2.26) ----------
 * Los precios ya no se pintan desde PHP/JS cuando el interruptor está activo;
 * estas reglas (con la clase que NX_Frontend añade a <body>) son solo una red
 * de seguridad por si un tema o un JS externo los inserta.
 */
.nx-producto-oferta-aviso {
	margin-bottom: 16px;
}

body.nx-ms-precios-ocultos .nx-producto-precio,
body.nx-ms-precios-ocultos .nx-producto-card-precio,
body.nx-ms-precios-ocultos .nx-precio-actual,
body.nx-ms-precios-ocultos .nx-precio-anterior,
body.nx-ms-precios-ocultos .nx-carrito-modal-item-precio,
body.nx-ms-precios-ocultos .nx-carrito-resumen-fila,
body.nx-ms-precios-ocultos .nx-carritop-lista-resumen strong,
body.nx-ms-precios-ocultos .nx-pedido-modal-precio,
body.nx-ms-precios-ocultos #nx-pedido-conf-precio-fila,
body.nx-ms-precios-ocultos .nx-filtro-precio-campos {
	display: none !important;
}

/*=========== Send form from Checkout Card ========*/
.nx-pedido-switch-wrapper{
	display:flex;
	align-content:center;
	justify-content:center;
	gap:14px;
	margin:14px auto;
	padding:12px;
}
@media (max-width:648px){
	.nx-pedido-switch-wrapper{
		display:flex;
		flex-direction: column;
		align-content:center;
		justify-content:center;
		gap:18px;
		margin:14px auto;
		padding:12px;
	}
}

/* ==========================================================
   Tiendas (v2.29): listado [nx_tiendas] y ficha de detalle
   ========================================================== */
.nx-tiendas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 2rem;
	margin: 20px 0;
}

.nx-tienda-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	min-width:19rem;
	border-radius: 10px;
	border:2px solid #cecedf;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 14px 20px -12px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nx-tienda-card:hover {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}

@media (max-width:1280px){
	.nx-tienda-card {
		flex-direction: column;
	}
}

.nx-tienda-card-info{
	background: var(--gradient-store-card);
	padding: 30px;
	border-radius: 32px 0px;
}
.nx-tienda-card-info h3{
	color:#000000;
	font-size:1.3rem;
}


.nx-tienda-card-logo {
	width: 125px;
	height: 125px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.nx-tienda-card-titulo {
	margin: 0 0 4px;
	font-size: 1.05rem;
	color:#eeeeee;
}

.nx-tienda-card-slogan {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-style: italic;
	color: #414e73;
}

.nx-tienda-card-direccion {
	margin: 0;
	font-size: 0.85rem;
	color: #081b53;
}

.nx-tienda-single {
	max-width: 1600px;
	margin: 0 auto;
	padding: 20px 16px 40px;
}

/* ----------------------------------------------------------
   HERO de la ficha de tienda (v2.32): fondo = imagen .webp
   (2560×700), cover, sin repetir. Dos mitades; texto en blanco.
   ---------------------------------------------------------- */
.nx-tienda-hero {
	max-width: 1600px;
	margin: 0 auto 32px;
	padding: 48px 20px;
	box-sizing: border-box;
	border-radius: 14px;
	color: #fff;
	/* Fondo de seguridad si la tienda no tiene imagen HERO (con imagen, el estilo en línea lo sustituye). */
	background-color: #1d2327;
	background-image: linear-gradient(135deg, #1d2327, #2c3338);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	min-height: 600px;
}
@media (max-width:1440px){
	.nx-tienda-hero {
		background-size: cover;
	}
}

.nx-tienda-hero-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.nx-tienda-hero-col {
	min-width: 0;
}

/* Desktop: contenido a la izquierda e imagen de tienda a la derecha. */
.nx-tienda-hero-col--izq {
	grid-column: 1 !important;
	grid-row: 1;
}

.nx-tienda-hero-col--der {
	grid-column: 2 !important;
	grid-row: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.nx-tienda-hero-col--der img,
.nx-tienda-hero-col--der video {
	border: 2px solid rgba(251, 230, 120, 0.75);
	padding: 10px;
	background-color: rgba(251, 230, 120, 0.2);
	backdrop-filter: blur(8px);
}

/* Wrapper de la mitad izquierda: logo | título, eslogan, dirección. */
.nx-tienda-hero-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
}

.nx-tienda-hero-wrapper-izq {
	display: flex;
	justify-content: center;
}

.hero-wrapper-logo {
	width: 133px;
	height: 133px;
	object-fit: cover;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	padding: 8px;
	/*transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
	animation: nxMsHeroLogoDepth 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;*/
}
.hero-wrapper-logo img,
.hero-wrapper-logo svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	border:1px solid rgba(255,255,255,.5);
	z-index: 2;
}

:root {
	--nx-ms-perspective-left: -45deg;
	--nx-ms-perspective-right: 45deg;
}

@keyframes nxMsHeroLogoDepth {
	0% { transform: perspective(1000px) rotateY(0deg) rotateX(2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
	20% { transform: perspective(1000px) rotateY(var(--nx-ms-perspective-left)) rotateX(3deg); box-shadow: 18px 10px 28px rgba(0, 0, 0, 0.65); }
	40% { transform: perspective(1000px) rotateY(0deg) rotateX(2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
	60% { transform: perspective(1000px) rotateY(var(--nx-ms-perspective-right)) rotateX(3deg); box-shadow: -18px 10px 28px rgba(0, 0, 0, 0.65); }
	80% { transform: perspective(1000px) rotateY(0deg) rotateX(2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
	100% { transform: perspective(1000px) rotateY(0deg) rotateX(2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
}

/*.hero-wrapper-logo::before {
	content: "";
	position: absolute;
	inset: -60%;
	border-radius: 50%;
	background: linear-gradient(135deg, #d7edf0, #15b2ff, #0682f0, #f9a910, #049ae3, #02a240, #d20421);
	background-size: 600% 600%;
	animation: nxMsGradientMove 6s ease infinite, nxMsRotateBg 40s linear infinite;
	z-index: 0;
}

.hero-wrapper-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: linear-gradient(to right, rgba(215, 3, 122, 0.29), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35));
	pointer-events: none;
	z-index: 1;
}*/

/*@keyframes nxMsGradientMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes nxMsRotateBg {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}*/

.nx-tienda-hero .nx-tienda-hero-titulo {
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1.15;
}

.nx-tienda-hero .nx-tienda-hero-slogan {
	margin: 0 0 10px;
	color: #fff;
	font-size: 1.1rem;
	font-style: italic;
}

.nx-tienda-hero .nx-tienda-hero-direccion {
	margin: 0;
	color: #fff;
	font-size: 0.95rem;
}

/* Badges de contacto, a lo largo de la mitad izquierda. */
.nx-tienda-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.nx-tienda-hero-badges li {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.nx-tienda-hero .nx-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 14px;
	border: 1px solid rgba(236, 255, 145, 0.45);
	border-radius: 999px;
	background: rgba(234, 255, 133, 0.14);
	color: #f8fbab;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background 0.15s ease;
	backdrop-filter: blur(10px);
}

.nx-tienda-hero .nx-hero-badge:hover,
.nx-tienda-hero .nx-hero-badge:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	text-decoration: none;
}

.nx-hero-badge-icono {
	flex-shrink: 0;
}

/* Vídeo promocional (v2.37): ocupa el lugar de la imagen (mismas medidas y marco), sin controles ni clic. */
.nx-tienda-hero-video {
	pointer-events: none;
}

/* Mitad derecha del HERO: imagen de tienda. */
.nx-tienda-hero-imagen {
	display: block;
	width: 100%;
	max-width: 533px;
	height: auto;
	aspect-ratio: 533 / 350;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 900px) {
	.nx-tienda-hero {
		padding: 32px 10px;
	}

	.nx-tienda-hero-row {
		display: flex;
		flex-direction: column;
	gap: 40px;
	align-items: inherit;
	}

	.nx-tienda-hero-col--izq,
	.nx-tienda-hero-col--der {
		grid-column: 1;
	}
}

@media (max-width: 560px) {
	.nx-tienda-hero-wrapper {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.nx-tienda-hero-wrapper-izq {
		justify-content: flex-start;
	}
}

/* ----------------------------------------------------------
   Secciones bajo el HERO (siguen el ancho de .nx-tienda-single)
   ---------------------------------------------------------- */
.nx-tienda-seccion {
	max-width: 1600px;
	margin: 0 auto 48px;
	padding:1rem;
}

.nx-tienda-seccion h2 {
	margin: 0 0 16px;
	font-size: 1.4rem;
}

/* "Sobre nosotros" (izquierda) + horario (derecha). */
.nx-tienda-info {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	align-items: start;
}

.nx-tienda-info > * {
	min-width: 0;
}

/* Sin descripción: el horario se queda solo, en una columna más estrecha. */
.nx-tienda-info--solo-horario {
	grid-template-columns: 1fr;
}

.nx-tienda-info--solo-horario .nx-tienda-horario-seccion {
	max-width: 420px;
}

.nx-tienda-descripcion h3 {
	margin: 1rem 0;
	line-height: 1.5;
	color: #333;
	font-weight:600;
}

.nx-tienda-descripcion p {
	margin: 0 0 1em;
	line-height: 1.7;
	color: #333;
}

.nx-tienda-horario-seccion {
	padding: 24px;
	border-radius: 12px;
	background: linear-gradient(135deg, #fff7de82 25%, #7cc6bf);
}

.nx-tienda-horario-seccion h2 {
	font-size: 1.15rem;
}

.nx-tienda-horario-tabla {
	border-collapse: collapse;
	width: 100%;
}

.nx-tienda-horario-tabla th,
.nx-tienda-horario-tabla td {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid #eee;
}

.nx-tienda-cerrado {
	color: #b32d2e;
}

.nx-tienda-mapa-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 360px;
	border: 0;
	border-radius: 10px;
}

@media (max-width: 900px) {
	.nx-tienda-info {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}