/* Voxel Recently Viewed v1.2.0 */

/* Header: title left, clear link right */
.vxrv-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 15px;
}
.vxrv-header .vxrv-title {
	margin: 0;
}
.vxrv-clear-link {
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
	cursor: pointer;
}
.vxrv-header--empty .vxrv-clear-link {
	display: none !important;
}

/* Standalone shortcode title */
.vxrv-title { margin-bottom: 15px; }

/* Columns and gap flow through custom properties so grid and slider share one
   source of truth. The widget's responsive controls set --vxrv-cols/--vxrv-gap
   per breakpoint; bare shortcodes set them through the .vxrv-cols-N classes
   below. Slider cards compute their width from the same variables, which is
   why slider layout is responsive at all (its flex container can't use
   grid-template-columns). */
.vxrv-grid {
	display: grid !important;
	gap: var(--vxrv-gap, 20px);
	grid-template-columns: repeat(var(--vxrv-cols, 3), 1fr);
}

.vxrv-cols-1 { --vxrv-cols: 1; }
.vxrv-cols-2 { --vxrv-cols: 2; }
.vxrv-cols-3 { --vxrv-cols: 3; }
.vxrv-cols-4 { --vxrv-cols: 4; }
.vxrv-cols-5 { --vxrv-cols: 5; }
.vxrv-cols-6 { --vxrv-cols: 6; }
.vxrv-cols-7 { --vxrv-cols: 7; }
.vxrv-cols-8 { --vxrv-cols: 8; }
.vxrv-cols-9 { --vxrv-cols: 9; }
.vxrv-cols-10 { --vxrv-cols: 10; }

/* Shortcode-only responsive fallback. Widget instances carry no vxrv-cols-N
   class — their breakpoints come from the widget's own responsive controls. */
@media (max-width: 1024px) {
	.vxrv-cols-3, .vxrv-cols-4, .vxrv-cols-5,
	.vxrv-cols-6, .vxrv-cols-7, .vxrv-cols-8,
	.vxrv-cols-9, .vxrv-cols-10 {
		--vxrv-cols: 2;
	}
}
@media (max-width: 767px) {
	.vxrv-grid[class*="vxrv-cols-"] {
		--vxrv-cols: 1;
	}
}

/* ── Force Elementor card content to fill grid cells ── */
.vxrv-card {
	min-width: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* Only target Elementor structural wrappers, NOT card content */
.vxrv-card > [data-elementor-type] {
	max-width: none !important;
	width: 100% !important;
}

.vxrv-card .e-con.e-parent,
.vxrv-card .e-con.e-parent > .e-con-inner,
.vxrv-card > .elementor > .elementor-inner,
.vxrv-card > .elementor > .elementor-inner > .elementor-section-wrap,
.vxrv-card .elementor-section > .elementor-container,
.vxrv-card .elementor-column > .elementor-widget-wrap {
	max-width: none !important;
	width: 100% !important;
}

/* States */
.vxrv-loading { opacity: .5; min-height: 120px; }
.vxrv-empty p { text-align: center; padding: 30px 15px; color: #888; font-size: 14px; }

/* Slider layout (scroll-snap) */
.vxrv-slider-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
}
.vxrv-grid.vxrv-slider {
	display: flex !important;
	grid-template-columns: none !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}
.vxrv-grid.vxrv-slider::-webkit-scrollbar { display: none; }
.vxrv-grid.vxrv-slider .vxrv-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
}
/* One formula for every column count, and it accounts for the real gap
   instead of assuming 20px the way the old per-count rules did. */
.vxrv-grid.vxrv-slider .vxrv-card {
	width: calc(
		(100% - (var(--vxrv-cols, 3) - 1) * var(--vxrv-gap, 20px))
		/ var(--vxrv-cols, 3)
	);
}
.vxrv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.08);
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}
.vxrv-prev { left: -10px; }
.vxrv-next { right: -10px; }
.vxrv-nav:hover { background: #f5f5f5; }