/* 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%;
	/* Not hidden: Voxel's preview cards put tooltips on their action buttons,
	   and clipping to the card cut off any tooltip near an edge. The grid track
	   is sized by the column, not by this element, so `min-width: 0` above is
	   what actually stops a wide card stretching its cell — hiding the overflow
	   was never doing that work.
	   In slider layout a tooltip can still be clipped by the scroll container,
	   which needs its own overflow to scroll at all. */
	overflow: visible;
	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 {
	/* Own stacking context: Voxel preview cards carry elements at z-index 50,
	   which would otherwise paint over the nav arrows. Containing them here
	   means the arrows' z-index only has to beat this element, not whatever
	   a card template does internally. */
	position: relative;
	z-index: 0;
	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; }