/* VFG – Tienda */
:root {
	--vfg-rojo: #c8102e;
	--vfg-rojo-suave: #fde8ea;
	--vfg-texto: #111827;
	--vfg-gris: #6b7280;
	--vfg-gris-claro: #9ca3af;
	--vfg-borde: #e5e7eb;
}

/* ---------- Tarjeta de producto ---------- */
.vfg-dato {
	display: flex;
	gap: 10px;
	font-size: 12px;
	line-height: 16px;
	color: var(--vfg-texto);
}
.vfg-dato__label {
	color: var(--vfg-gris);
	min-width: 40px;
}
.vfg-dato__valor {
	font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.vfg-dato--rojo .vfg-dato__label,
.vfg-dato--rojo .vfg-dato__valor {
	color: var(--vfg-rojo);
	font-weight: 700;
}
.vfg-ref {
	font-size: 12px;
	color: var(--vfg-gris-claro);
	margin-top: 4px;
}
.vfg-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vfg-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff;
	color: var(--vfg-texto);
	border: 1px solid var(--vfg-borde);
}
.vfg-badge--alerta {
	background: var(--vfg-rojo-suave);
	color: var(--vfg-rojo);
	border-color: #f8c9cf;
}

/* ---------- Barra superior ---------- */
.vfg-resultados {
	font-size: 13px;
	font-weight: 600;
	color: var(--vfg-texto);
}
.vfg-ordenar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	background: #fff;
}
.vfg-ordenar__label {
	font-size: 11px;
	color: var(--vfg-gris);
	margin: 0;
}
.vfg-ordenar select {
	border: 0;
	padding: 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--vfg-texto);
	background: transparent;
	cursor: pointer;
	width: auto;
}
.vfg-vista {
	display: inline-flex;
	gap: 4px;
}
.vfg-vista__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	background: #fff;
	color: var(--vfg-gris);
	cursor: pointer;
}
.vfg-vista__btn.is-active,
.vfg-vista__btn:hover {
	color: var(--vfg-rojo);
	border-color: var(--vfg-rojo);
	background: #fff;
}

/* ---------- Grilla de productos (clase vfg-grid-productos en el Loop Grid) ---------- */
.vfg-grid-productos {
	flex: 1 1 0% !important;
	min-width: 0;
	align-self: stretch !important;
}
/* Columna de filtros (el contenedor hermano del Loop Grid): ancho fijo para que no cambie entre vistas. */
@media (min-width: 1025px) {
	.e-con:has(> .vfg-grid-productos) > .e-con:not(.vfg-grid-productos),
	.e-con-inner:has(> .vfg-grid-productos) > .e-con:not(.vfg-grid-productos) {
		flex: 0 0 240px !important;
		width: 240px !important;
		max-width: 240px;
	}
}

/* ---------- Vista en lista (clase vfg-card en la tarjeta y vfg-card__img en la imagen) ---------- */
.vfg-grid-productos.vfg-vista-lista .elementor-loop-container {
	grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
	.vfg-grid-productos.vfg-vista-lista .vfg-card.e-con-full,
	.vfg-grid-productos.vfg-vista-lista .vfg-card > .e-con-inner {
		display: grid !important;
		grid-template-columns: 240px minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: 24px;
		row-gap: 0 !important;
		align-content: start;
		padding: 0 !important;
	}
	.vfg-grid-productos.vfg-vista-lista .vfg-card > .e-con-inner > *,
	.vfg-grid-productos.vfg-vista-lista .vfg-card.e-con-full > * {
		grid-column: 2;
		width: auto !important;
		max-width: none !important;
		margin: 0 20px 10px 0 !important;
	}
	.vfg-grid-productos.vfg-vista-lista .vfg-card > .e-con-inner > :nth-child(2),
	.vfg-grid-productos.vfg-vista-lista .vfg-card.e-con-full > :nth-child(2) {
		margin-top: 18px !important;
	}
	.vfg-grid-productos.vfg-vista-lista .vfg-card > .e-con-inner > :last-child,
	.vfg-grid-productos.vfg-vista-lista .vfg-card.e-con-full > :last-child {
		margin-bottom: 18px !important;
	}
	.vfg-grid-productos.vfg-vista-lista .vfg-card .vfg-card__img {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: stretch;
		position: relative;
		min-height: 180px;
		height: 100%;
		margin: 0 !important;
	}
	.vfg-grid-productos.vfg-vista-lista .vfg-card .vfg-card__img img {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: contain;
	}
}

@media (max-width: 767px) {
	.vfg-vista {
		display: none;
	}
}

/* ---------- Botón limpiar filtros ---------- */
.vfg-limpiar--boton {
	width: 100%;
	padding: 9px 14px;
	border: 1px solid var(--vfg-texto);
	border-radius: 6px;
	background: #fff;
	color: var(--vfg-texto);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.vfg-limpiar--boton:hover,
.vfg-limpiar--boton:focus {
	background: var(--vfg-texto);
	color: #fff;
}

.vfg-filtro .e-filter {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}
.vfg-filtro .e-filter-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 0;
	border: 0;
	background: none !important;
	color: var(--vfg-texto);
	font-size: 12px;
	font-weight: 400;
	text-align: left;
	white-space: normal;
	cursor: pointer;
}
.vfg-filtro .e-filter-item::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 1px solid #d1d5db;
	border-radius: 3px;
	background: #fff;
}
.vfg-filtro .e-filter-item:hover {
	color: var(--vfg-rojo);
}
.vfg-filtro .e-filter-item[aria-pressed="true"] {
	color: var(--vfg-rojo);
	font-weight: 600;
}
.vfg-filtro .e-filter-item[aria-pressed="true"]::before {
	background: var(--vfg-rojo);
	border-color: var(--vfg-rojo);
	box-shadow: inset 0 0 0 2px #fff;
}
.e-filter-item.vfg-oculto {
	display: none !important;
}

/* ---------- Buscador dentro del filtro de vehículo ---------- */
.vfg-buscar-filtro input {
	width: 100%;
	padding: 7px 10px 7px 30px;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	font-size: 11px;
	background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
}
.vfg-buscar-filtro input:focus {
	outline: none;
	border-color: var(--vfg-rojo);
	background-color: #fff;
}

/* ---------- Filtros en modal para móvil y tablet ----------
 */
.vfg-boton-filtros {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	background: #fff;
	color: var(--vfg-texto);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.vfg-boton-filtros:hover,
.vfg-boton-filtros:focus {
	border-color: var(--vfg-rojo);
	color: var(--vfg-rojo);
	background: #fff;
}
.vfg-boton-filtros__contador {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--vfg-rojo);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}
.vfg-boton-filtros__contador[hidden] {
	display: none;
}
.vfg-panel-filtros__cerrar,
.vfg-panel-filtros__pie,
.vfg-filtros-overlay {
	display: none;
}

@media (max-width: 1024px) {
	.vfg-boton-filtros {
		display: inline-flex;
	}

	body:not(.elementor-editor-active) .vfg-panel-filtros {
		position: fixed !important;
		inset: 0 auto 0 0 !important;
		z-index: 100000 !important;
		width: min(88vw, 380px) !important;
		max-width: none !important;
		height: 100vh;
		height: 100dvh;
		margin: 0 !important;
		padding: 56px 20px 0 !important;
		flex: none !important;
		flex-wrap: nowrap !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #fff;
		box-shadow: 0 0 40px rgba(17, 24, 39, 0.25);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0.3s;
	}
	body.vfg-filtros-abierto .vfg-panel-filtros {
		transform: none;
		visibility: visible;
	}
	body.vfg-filtros-abierto {
		overflow: hidden;
	}

	.vfg-panel-filtros__cerrar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #f3f4f6;
		color: var(--vfg-texto);
		cursor: pointer;
	}
	.vfg-panel-filtros__cerrar:hover,
	.vfg-panel-filtros__cerrar:focus {
		background: var(--vfg-rojo-suave);
		color: var(--vfg-rojo);
	}

	.vfg-panel-filtros__pie {
		display: block;
		align-self: stretch !important;
		width: auto !important;
		box-sizing: border-box;
		position: sticky;
		bottom: 0;
		margin: auto -20px 0 !important;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--vfg-borde);
	}
	.vfg-panel-filtros__ver {
		display: block;
		width: 100% !important;
		padding: 12px;
		border: 0;
		border-radius: 6px;
		background: var(--vfg-rojo);
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}
	.vfg-panel-filtros__ver:hover,
	.vfg-panel-filtros__ver:focus {
		background: #a50d26;
		color: #fff;
	}

	.vfg-filtros-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(17, 24, 39, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s;
	}
	body.vfg-filtros-abierto .vfg-filtros-overlay {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- Sin resultados  ---------- */
:is(.vfg-grid-productos, .vfg-grid-blog) .e-loop-nothing-found-message.vfg-vacio-mensaje {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 48px 20px;
	border: 1px dashed var(--vfg-borde);
	border-radius: 12px;
	background: #fff;
	text-align: center;
}
:is(.vfg-grid-productos, .vfg-grid-blog) .vfg-vacio-mensaje .e-loop-nothing-found-message__text {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vfg-texto);
}
.vfg-vacio__ayuda {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--vfg-gris);
}
.vfg-vacio__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.vfg-vacio__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--vfg-texto);
	border-radius: 6px;
	background: #fff;
	color: var(--vfg-texto) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.vfg-vacio__btn:hover,
.vfg-vacio__btn:focus-visible {
	background: var(--vfg-texto);
	color: #fff !important;
}
.vfg-vacio__btn--principal {
	border-color: var(--vfg-rojo);
	background: var(--vfg-rojo);
	color: #fff !important;
}
.vfg-vacio__btn--principal:hover,
.vfg-vacio__btn--principal:focus-visible {
	border-color: #a50d26;
	background: #a50d26;
}
@media (max-width: 767px) {
	:is(.vfg-grid-productos, .vfg-grid-blog) .e-loop-nothing-found-message.vfg-vacio-mensaje {
		padding: 32px 16px;
	}
	:is(.vfg-grid-productos, .vfg-grid-blog) .vfg-vacio-mensaje .e-loop-nothing-found-message__text {
		font-size: 16px;
	}
	.vfg-vacio__btn {
		width: 100%;
	}
}

/* ---------- Paginación de la tienda (Loop Grid con clase vfg-grid-productos) ---------- */
.vfg-grid-productos .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 32px;
}
.vfg-grid-productos .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0 !important;
	padding: 0 12px;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	background: #fff;
	color: var(--vfg-texto);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.vfg-grid-productos .elementor-pagination .page-numbers.prev,
.vfg-grid-productos .elementor-pagination .page-numbers.next {
	padding: 0 18px;
	font-weight: 700;
}
.vfg-grid-productos .elementor-pagination a.page-numbers:hover,
.vfg-grid-productos .elementor-pagination a.page-numbers:focus-visible {
	border-color: var(--vfg-texto);
}
.vfg-grid-productos .elementor-pagination .page-numbers.current {
	border-color: var(--vfg-texto);
	background: var(--vfg-texto);
	color: #fff;
	font-weight: 700;
}
.vfg-grid-productos .elementor-pagination .page-numbers.dots {
	color: var(--vfg-gris);
}

.vfg-grid-productos .elementor-pagination span.page-numbers.prev,
.vfg-grid-productos .elementor-pagination span.page-numbers.next {
	color: var(--vfg-gris-claro);
	cursor: default;
}

.vfg-grid-productos .vfg-paginacion__conteo {
	margin-right: auto;
	color: var(--vfg-gris);
	font-size: 12px;
	font-weight: 400;
}
@media (max-width: 767px) {
	.vfg-grid-productos .elementor-pagination {
		justify-content: center;
		gap: 4px;
	}
	.vfg-grid-productos .elementor-pagination .page-numbers {
		min-width: 32px;
		height: 32px;
		padding: 0 10px;
	}
	.vfg-grid-productos .elementor-pagination .page-numbers.prev,
	.vfg-grid-productos .elementor-pagination .page-numbers.next {
		padding: 0 12px;
	}
	.vfg-grid-productos .elementor-pagination .page-numbers.prev,
	.vfg-grid-productos .elementor-pagination .page-numbers.next {
		min-width: 32px;
		padding: 0;
		font-size: 0;
	}
	.vfg-grid-productos .elementor-pagination .page-numbers.prev::before {
		content: "‹";
		font-size: 18px;
	}
	.vfg-grid-productos .elementor-pagination .page-numbers.next::before {
		content: "›";
		font-size: 18px;
	}
	.vfg-grid-productos .vfg-paginacion__conteo {
		order: 1;
		width: 100%;
		margin: 8px 0 0;
		text-align: center;
	}
}

.vfg-card:not(:has(img)) .elementor-widget-shortcode.elementor-absolute:has(.vfg-badges) {
	position: static !important;
	order: -1;
	width: auto !important;
	margin: 0 0 calc(6px - var(--row-gap, 0px)) !important;
	inset: auto !important;
	padding-top: 10px;
	padding-left: 10px;
}