/*
 * Carveoo Marketplace Layout System v2.3.2
 * ----------------------------------------
 * One responsive container for the marketplace header, discovery homepage,
 * filtered results, sort/filter controls and shared frontend page geometry.
 * Airbnb is used only as a visual reference for spacing and proportions.
 */

:root {
	--cv-layout-max: 1760px;
	--cv-layout-viewport-width: 100vw;
	--cv-layout-gutter: 24px;
	--cv-layout-section-gap: 32px;
	--cv-layout-card-gap: 12px;
	--cv-layout-border: #eceeef;
	--cv-layout-bg: #ffffff;
}

@media (min-width: 48rem) {
	:root {
		--cv-layout-gutter: 32px;
		--cv-layout-section-gap: 40px;
		--cv-layout-card-gap: 14px;
	}
}

@media (min-width: 64rem) {
	:root {
		--cv-layout-gutter: 40px;
		--cv-layout-section-gap: 48px;
	}
}

@media (min-width: 90rem) {
	:root {
		--cv-layout-gutter: 80px;
		--cv-layout-section-gap: 52px;
	}
}

/* Reusable canonical content container. */
.cv-layout-container {
	box-sizing: border-box !important;
	width: min(
		var(--cv-layout-max),
		calc(var(--cv-layout-viewport-width) - var(--cv-layout-gutter) - var(--cv-layout-gutter))
	) !important;
	max-width: var(--cv-layout-max) !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Theme/Elementor breakout roots are normalized by marketplace.js. */
.cv-layout-viewport {
	box-sizing: border-box !important;
	max-width: none !important;
}

/* =========================================================
   MARKETPLACE APP / HEADER
   ========================================================= */

.cv-homepage-app {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	width: var(--cv-layout-viewport-width) !important;
	max-width: var(--cv-layout-viewport-width) !important;
	margin-right: 0 !important;
	margin-left: var(--cv-layout-breakout-x, 0px) !important;
	transform: none !important;
	overflow-x: visible !important;
	background: var(--cv-layout-bg) !important;
}

.cv-market-header {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	width: var(--cv-layout-viewport-width) !important;
	max-width: var(--cv-layout-viewport-width) !important;
	margin-right: 0 !important;
	margin-left: var(--cv-layout-breakout-x, 0px) !important;
	padding: 0 !important;
	transform: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cv-layout-border) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: 0 1px 0 rgba(15, 23, 42, .05) !important;
}

/* Do not break the header out twice when [carveoo_homepage] owns the shell. */
.cv-homepage-app > .cv-market-header {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
}

.cv-market-primary-row,
.cv-market-discovery-row {
	left: auto !important;
	right: auto !important;
	transform: none !important;
	background: #fff !important;
}

.cv-market-primary-row::before,
.cv-market-primary-row::after {
	display: none !important;
	content: none !important;
}

/* Mobile-first header: brand/actions then search. */
.cv-market-primary-row {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: auto auto !important;
	row-gap: 10px !important;
	min-height: 0 !important;
	padding: 10px 0 12px !important;
}

.cv-market-primary-row > .cv-market-topbar {
	display: flex !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	width: 100% !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cv-market-primary-row .cv-market-brand,
.cv-market-primary-row .cv-market-actions {
	position: static !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

.cv-market-primary-row .cv-market-brand__image {
	width: auto !important;
	max-width: 132px !important;
	max-height: 34px !important;
}

.cv-market-primary-row .cv-market-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	width: auto !important;
}

.cv-market-primary-row .cv-market-search-row {
	display: flex !important;
	grid-column: 1 !important;
	grid-row: 2 !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cv-market-primary-row .cv-marketplace-search-shell {
	width: min(760px, 100%) !important;
	max-width: 760px !important;
	margin: 0 auto !important;
}

.cv-market-primary-row .cv-search-trigger {
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto !important;
}

/* Categories and tools use the exact same left/right page edges. */
.cv-market-discovery-row {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 0 !important;
	padding: 8px 0 10px !important;
	border-top: 1px solid #f0f1f3 !important;
	border-bottom: 0 !important;
}

.cv-market-category-row {
	position: static !important;
	display: block !important;
	grid-column: auto !important;
	grid-row: auto !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
}

.cv-market-category-row .cv-car-types {
	width: 100% !important;
	max-width: none !important;
	overflow: hidden !important;
}

.cv-market-category-row .cv-car-types__track {
	display: flex !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 3px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-webkit-overflow-scrolling: touch !important;
}

.cv-market-category-row .cv-car-types__track::-webkit-scrollbar {
	display: none !important;
}

.cv-market-tools-row {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	display: flex !important;
	grid-column: auto !important;
	grid-row: auto !important;
	align-items: center !important;
	align-self: stretch !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	background: transparent !important;
	white-space: nowrap !important;
}

@media (min-width: 48rem) {
	.cv-market-primary-row {
		row-gap: 12px !important;
		padding: 12px 0 13px !important;
	}

	.cv-market-primary-row .cv-market-brand__image {
		max-width: 140px !important;
		max-height: 35px !important;
	}

	.cv-market-discovery-row {
		gap: 9px !important;
		padding: 8px 0 11px !important;
	}

	.cv-market-category-row .cv-car-types__track {
		gap: 5px !important;
	}
}

/* Desktop search and category navigation share one visual center line. */
@media (min-width: 64rem) {
	.cv-market-primary-row {
		row-gap: 12px !important;
		padding: 14px 0 13px !important;
	}

	.cv-market-primary-row > .cv-market-topbar {
		min-height: 44px !important;
	}

	.cv-market-primary-row .cv-market-brand__image {
		max-width: 146px !important;
		max-height: 36px !important;
	}

	.cv-market-primary-row .cv-market-actions {
		gap: 10px !important;
	}

	.cv-market-primary-row .cv-search-trigger,
	.cv-market-primary-row .cv-search-desktop-fields {
		min-height: 58px !important;
	}

	.cv-market-discovery-row {
		align-items: center !important;
		gap: 10px !important;
		padding: 7px 0 10px !important;
	}

	.cv-market-category-row .cv-car-types__track {
		justify-content: center !important;
	}
}

/* Large desktop: categories remain truly centered while controls pin right. */
@media (min-width: 75rem) {
	.cv-market-discovery-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 72px !important;
		padding: 6px 0 8px !important;
	}

	.cv-market-category-row {
		width: min(940px, calc(100% - 520px)) !important;
		max-width: 940px !important;
		margin: 0 auto !important;
	}

	.cv-market-tools-row {
		position: absolute !important;
		top: 50% !important;
		right: 0 !important;
		width: auto !important;
		max-width: 250px !important;
		transform: translateY(-50%) !important;
	}
}

/* =========================================================
   HOMEPAGE + RESULTS: SAME CANVAS
   ========================================================= */

.cv-home-marketplace.cv-layout-container {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	max-width: var(--cv-layout-max) !important;
	margin-top: 20px !important;
	margin-right: auto !important;
	margin-bottom: 56px !important;
	margin-left: auto !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	transform: none !important;
	box-sizing: border-box !important;
}

/* Separate Elementor shortcodes get centered by the JS theme bridge. */
.cv-home-marketplace[data-cv-layout-standalone="1"] {
	margin-right: 0 !important;
	margin-left: var(--cv-layout-content-shift, auto) !important;
}

.cv-home-section {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 var(--cv-layout-section-gap) !important;
	padding: 0 !important;
}

.cv-home-section__header,
.cv-results-heading {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.cv-home-marketplace--discovery .cv-home-rail,
.cv-home-marketplace--results .cv-results-grid {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Discovery density: 2 / 3 / 4 / 5 / 6 cards across the shared canvas. */
.cv-home-marketplace--discovery .cv-home-rail {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--cv-layout-card-gap) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-padding-inline: 0 !important;
	scrollbar-width: none !important;
	-webkit-overflow-scrolling: touch !important;
}

.cv-home-marketplace--discovery .cv-home-rail > .cv-vcard {
	flex: 0 0 calc((100% - var(--cv-layout-card-gap)) / 2) !important;
	width: calc((100% - var(--cv-layout-card-gap)) / 2) !important;
	min-width: 0 !important;
	max-width: none !important;
}

@media (min-width: 48rem) {
	.cv-home-marketplace.cv-layout-container {
		margin-top: 24px !important;
		margin-bottom: 64px !important;
	}

	.cv-home-marketplace--discovery .cv-home-rail > .cv-vcard {
		flex-basis: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 3) !important;
		width: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 3) !important;
	}
}

@media (min-width: 64rem) {
	.cv-home-marketplace.cv-layout-container {
		margin-top: 30px !important;
		margin-bottom: 72px !important;
	}

	.cv-home-marketplace--discovery .cv-home-rail > .cv-vcard {
		flex-basis: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 4) !important;
		width: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 4) !important;
	}
}

@media (min-width: 75rem) {
	.cv-home-marketplace--discovery .cv-home-rail > .cv-vcard {
		flex-basis: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 5) !important;
		width: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 5) !important;
	}
}

@media (min-width: 100rem) {
	.cv-home-marketplace--discovery .cv-home-rail > .cv-vcard {
		flex-basis: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 6) !important;
		width: calc((100% - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap) - var(--cv-layout-card-gap)) / 6) !important;
	}
}

/* Results use the same canvas and a predictable responsive grid. */
.cv-home-marketplace--results .cv-results-grid,
.cv-home-marketplace--results .cv-results-grid--count-1,
.cv-home-marketplace--results .cv-results-grid--count-2,
.cv-home-marketplace--results .cv-results-grid--count-3 {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 20px var(--cv-layout-card-gap) !important;
	align-items: stretch !important;
}

.cv-home-marketplace--results .cv-vcard {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
}

@media (min-width: 48rem) {
	.cv-home-marketplace--results .cv-results-grid,
	.cv-home-marketplace--results .cv-results-grid--count-1,
	.cv-home-marketplace--results .cv-results-grid--count-2,
	.cv-home-marketplace--results .cv-results-grid--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 64rem) {
	.cv-home-marketplace--results .cv-results-grid,
	.cv-home-marketplace--results .cv-results-grid--count-1,
	.cv-home-marketplace--results .cv-results-grid--count-2,
	.cv-home-marketplace--results .cv-results-grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 75rem) {
	.cv-home-marketplace--results .cv-results-grid,
	.cv-home-marketplace--results .cv-results-grid--count-1,
	.cv-home-marketplace--results .cv-results-grid--count-2,
	.cv-home-marketplace--results .cv-results-grid--count-3 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 100rem) {
	.cv-home-marketplace--results .cv-results-grid,
	.cv-home-marketplace--results .cv-results-grid--count-1,
	.cv-home-marketplace--results .cv-results-grid--count-2,
	.cv-home-marketplace--results .cv-results-grid--count-3 {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

/* =========================================================
   SORT + FILTER SURFACES
   ========================================================= */

.cv-sort,
.cv-filter {
	max-width: none !important;
}

.cv-sort__menu {
	right: 0 !important;
	left: auto !important;
	width: 224px !important;
	max-width: min(
		224px,
		calc(var(--cv-layout-viewport-width) - var(--cv-layout-gutter) - var(--cv-layout-gutter))
	) !important;
}

/* Desktop/tablet filters use a centered marketplace modal. */
@media (min-width: 48rem) {
	.cv-filter-panel {
		position: absolute !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		left: 50% !important;
		width: min(
			760px,
			calc(var(--cv-layout-viewport-width) - var(--cv-layout-gutter) - var(--cv-layout-gutter))
		) !important;
		height: min(820px, calc(100dvh - 64px)) !important;
		max-width: 760px !important;
		max-height: calc(100dvh - 64px) !important;
		border: 1px solid #e4e5e7 !important;
		border-radius: 24px !important;
		box-shadow: 0 28px 80px rgba(15, 23, 42, .24) !important;
		transform: translate(-50%, -50%) !important;
		overflow: hidden !important;
	}

	.cv-filter-panel__header {
		border-radius: 24px 24px 0 0 !important;
	}
}

@media (max-width: 47.999rem) {
	.cv-filter-panel {
		top: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		left: 0 !important;
		width: 100% !important;
		height: var(--cv-filter-viewport-h, 100dvh) !important;
		max-width: none !important;
		max-height: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		transform: none !important;
	}
}

/* Search modal follows the same width language on larger screens. */
@media (min-width: 48rem) {
	.cv-search-panel {
		width: min(
			640px,
			calc(var(--cv-layout-viewport-width) - var(--cv-layout-gutter) - var(--cv-layout-gutter))
		) !important;
		max-width: 640px !important;
	}
}

/* Remove the legacy second mobile inset inside the shared page gutter. */
@media (max-width: 47.999rem) {
	.cv-home-section__header,
	.cv-results-heading,
	.cv-home-marketplace--discovery .cv-home-rail,
	.cv-home-marketplace--results .cv-results-grid,
	.cv-home-empty {
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}


/* =========================================================
   v2.3.1 DESKTOP OPTICAL ALIGNMENT + DISCOVERY RHYTHM
   Presentation-only polish on top of the shared layout system.
   ========================================================= */

/* The logo artwork contains a small amount of transparent breathing room.
 * Nudge the rendered mark back to the canonical content edge so its visible
 * artwork aligns with section headings and cards, not just its image box. */
.cv-market-primary-row .cv-market-brand__image {
	transform: translateX(-2px) !important;
}

/* Discovery sections must always size from their actual header + rail content.
 * This neutralizes any legacy fixed/minimum heights from earlier iterations. */
.cv-home-marketplace--discovery .cv-home-section,
.cv-home-marketplace--discovery .cv-home-rail {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

.cv-home-marketplace--discovery .cv-home-rail {
	align-items: flex-start !important;
}

/* Sparse rails should not visually reserve the rhythm of a six-card row. */
.cv-home-marketplace--discovery .cv-home-section--sparse {
	margin-bottom: clamp(28px, 2.2vw, 38px) !important;
}

/* Desktop category navigation is centered independently of the utility pills.
 * Sort + Filters are removed from normal flow and pinned to the exact shared
 * container edge, so they can never pull the category center to the left. */
@media (min-width: 75rem) {
	.cv-market-discovery-row {
		position: relative !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		width: min(
			var(--cv-layout-max),
			calc(var(--cv-layout-viewport-width) - var(--cv-layout-gutter) - var(--cv-layout-gutter))
		) !important;
		max-width: var(--cv-layout-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding: 6px 0 8px !important;
	}

	.cv-market-category-row {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		width: min(980px, calc(100% - 540px)) !important;
		max-width: 980px !important;
		min-width: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		transform: none !important;
	}

	.cv-market-category-row .cv-car-types__track {
		justify-content: center !important;
		margin: 0 auto !important;
	}

	.cv-market-tools-row {
		position: absolute !important;
		top: 50% !important;
		right: 0 !important;
		left: auto !important;
		align-self: auto !important;
		width: auto !important;
		max-width: 260px !important;
		margin: 0 !important;
		transform: translateY(-50%) !important;
	}

	.cv-market-primary-row .cv-market-brand__image {
		transform: translateX(-3px) !important;
	}
}

/* On very wide screens there is room for the full category set while keeping
 * its mathematical center exactly aligned with the search field above. */
@media (min-width: 100rem) {
	.cv-market-category-row {
		width: min(1040px, calc(100% - 560px)) !important;
		max-width: 1040px !important;
	}
}

/* =========================================================
   v2.3.2 DESKTOP HEADER ACTION EDGE ALIGNMENT
   Keep the topbar on the full canonical container width.
   Older marketplace.css versions capped .cv-market-topbar at 760px;
   this explicit reset prevents the account actions from clustering
   around the centered search instead of the right page edge.
   ========================================================= */
@media (min-width: 64rem) {
	.cv-market-primary-row > .cv-market-topbar {
		width: 100% !important;
		max-width: none !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.cv-market-primary-row .cv-market-actions {
		margin-right: 0 !important;
		margin-left: auto !important;
		justify-self: end !important;
		justify-content: flex-end !important;
	}
}