/* VanHaven Product Showcase — frontend styles */

.vhsc {
	--vhsc-accent: #F37021;
	--vhsc-bg: #201F1F;
	--vhsc-card: #2A2A2A;
	--vhsc-text: #F5F3F3;
	--vhsc-muted: #B5B3B3;
	--vhsc-radius: 6px;
	padding: 0;
}

/* ---- Tabs ---- */
.vhsc__tabs {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: none;
	margin-bottom: 2rem;
}
.vhsc__tab {
	appearance: none;
	background: none;
	border: 0;
	letter-spacing: 0.04em;
	color: var(--vhsc-muted);
	font-family: 'Blauer Nue', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	padding: 0 0 0.75rem;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}
.vhsc__tab:hover { color: var(--vhsc-text); }
.vhsc__tab.is-active { color: var(--primary) !important; }
.vhsc__tab.is-active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 30%;
	height: 2px;
	background: var(--vhsc-accent);
	transform: translateX(-50%);
}

/* ---- Viewport ---- */
.vhsc__viewport { position: relative; }

.vhsc__rail {
	display: flex;
	gap: 10px;
	overflow-y: hidden;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	cursor: grab;
}
.vhsc__rail::-webkit-scrollbar { display: none; }
.vhsc__rail.is-grabbing { cursor: grabbing; user-select: none; }
.vhsc__rail.is-loading { opacity: 0.4; pointer-events: none; }

/* ---- Card — desktop ---- */
.vhsc__card {
	flex: 0 0 min(1200px, 92%);
	scroll-snap-align: start;
}

/* ---- Media — desktop ---- */
.vhsc__media {
	position: relative;
	border-radius: var(--vhsc-radius);
	overflow: hidden;
	aspect-ratio: 24 / 10;
	background: var(--vhsc-card);
	border: 1px solid rgba(255,255,255,0.06);
}
.vhsc__img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.vhsc__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
}

/* ---- Badge ---- */
.vhsc__badge {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	padding: 8px 16px;
	border-radius: 40px;
	border: 1px solid var(--primary);
	background-color: rgba(0,0,0,0.1);
	color: var(--white);
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 400;
}

/* ---- Body ---- */
.vhsc__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: clamp(1.25rem, 3vw, 2rem);
}
.vhsc__name { font-size: 32px; font-weight: 600; margin: 0 0 0.5rem; }
.vhsc__specs { color: var(--vhsc-muted); font-size: 0.85rem; letter-spacing: 0.03em; margin: 0 0 1rem; }
.vhsc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.vhsc__price { font-size: 1rem; color: var(--vhsc-text); }
.vhsc__price strong { font-weight: 700; }

/* ---- CTA ---- */
.vhsc__cta {
	color: var(--white, #fff);
	border-radius: 6px;
	padding: 12px 20px;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--primary, #F37021);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.vhsc__cta::after { content: "↗"; font-size: 15px; }
.vhsc__cta span { display: none; }
.vhsc__cta:hover { filter: brightness(1.1); }
.vhsc__cta:active { transform: translateY(1px); }
.vhsc__cta--inline { display: inline-flex; }
.vhsc__cta--below  { display: none; }

/* ---- Nav arrows — desktop (inside .vhsc__viewport) ---- */
.vhsc__nav {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: var(--vhsc-accent);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.4);
	transition: filter 0.2s ease;
}
.vhsc__nav:hover { filter: brightness(1.1); }
.vhsc__nav--prev { left: -10px; }
.vhsc__nav--next { right: -10px; left: auto; }
.vhsc__nav:disabled { opacity: 0.35; cursor: default; }

.vhsc__empty { color: var(--vhsc-muted); padding: 3rem 0; text-align: center; width: 100%; }
.vhsc__tab:focus-visible, .vhsc__cta:focus-visible, .vhsc__nav:focus-visible {
	outline: 2px solid var(--vhsc-accent); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .vhsc__rail { scroll-behavior: auto; } }

/* ==============================================================
   MOBILE ≤ 781px — Exact Figma layout:

   Card structure (HTML order inside .vhsc__card):
   1. .vhsc__media   — square image with overlaid text
   2. .vhsc__cta--below — orange full-width button

   Card has overflow:hidden so [image + button] are both clipped
   to the card border-radius, giving a tight unified container.

   Arrows are kept OUTSIDE .vhsc__card (in .vhsc__viewport).
   JS on mobile moves them to .vhsc__viewport and positions them
   via CSS so they sit at the right/left edges of the card image.
   ============================================================== */
@media (max-width: 781px) {

	/* Tabs */
	.vhsc__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 16px; margin: 1rem 0; }
	.vhsc__tabs::-webkit-scrollbar { display: none; }
	.vhsc__tab { font-size: 12px; padding: 0 0 6px; white-space: nowrap; }
	.vhsc__head { flex-direction: column; align-items: flex-start; }

	/* Card: white bordered pill — overflow:hidden clips BOTH image
	   corners and button into a single unified container            */
	.vhsc__card {
		flex: 0 0 88%;
		max-width: 88%;
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(255,255,255,0.15);
		border-radius: 8px;
		overflow: hidden;        /* clips image + button to card shape */
		background: var(--vhsc-card);
	}

	/* Image: square, fills card top, no own border/radius (card clips) */
	.vhsc__media {
		aspect-ratio: 1 / 1;
		border: 0;
		border-radius: 0;
		overflow: hidden;
		flex-shrink: 0;
	}
	.vhsc__overlay {
		background: linear-gradient(to top,
			rgba(0,0,0,0.92) 0%,
			rgba(0,0,0,0.60) 35%,
			rgba(0,0,0,0.10) 60%,
			transparent 100%);
	}

	/* Body: text overlaid on image */
	.vhsc__body { padding: 12px; }
	.vhsc__name { font-size: 20px; margin-bottom: 4px; }
	.vhsc__specs { margin: 0 0 4px; font-size: 12px; }
	.vhsc__foot { gap: 0.5rem; }

	/* Hide inline CTA (inside image overlay) */
	.vhsc__cta--inline { display: none !important; }

	/* VIEW DETAILS: full-width orange, flush below the image */
	.vhsc__cta--below {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		flex-shrink: 0;
		padding: 15px 16px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		color: #fff;
		background-color: var(--primary, #F37021);
		border-radius: 0;   /* card overflow:hidden clips the corners */
	}
	.vhsc__cta--below::after { content: "↗"; font-size: 14px; }
	.vhsc__cta--below span { display: none; }

	/* Arrows: stay in .vhsc__viewport (NOT moved into card).
	   On mobile they sit at the left/right edges of the card image.
	   Card is 88vw wide → card left edge ≈ 6vw from viewport edge.
	   Image is 1:1 square at 88vw → height ≈ 88vw.
	   Arrow center = image mid-height = 44vw from top of viewport.
	   These are overridden per-instance by JS-injected inline styles. */
	.vhsc__nav {
		top: 44vw;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		font-size: 0.95rem;
		z-index: 20;
	}
	/* ← sits on left edge of visible card */
	.vhsc__nav--prev {
		left: 8px;
	}
	/* → sits on right edge of visible card (card is ~88% = ~88vw,
	   right edge ≈ viewport_width - 6%) */
	.vhsc__nav--next {
		right: calc(12% - 20px);   /* 12% = 100% - 88%, 20px = half arrow */
		left: auto;
	}
}

@media (max-width: 425px) {
	.vhsc__name { font-size: 18px !important; margin-bottom: 0; }
	.vhsc__price { font-size: 12px; }
	.vhsc__body { padding: 8px; }
	.vhsc__badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; }
	.vhsc__cta--below { font-size: 12px; padding: 12px 10px; }
	.vhsc__nav { width: 36px; height: 36px; }
}