/**
 * Glassmorphism Utilities
 * Matt Van Buren — Luxury Watch Dealership
 *
 * Glass card system with dark base, frosted blur, and gold accent variants.
 */

/* === Base Glass Card === */
.glass-card {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

/* === Gold Accent Variant === */
.glass-card--gold {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(198, 167, 94, 0.2);
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card--gold:hover {
	border-color: rgba(198, 167, 94, 0.35);
	box-shadow:
		0 12px 48px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(198, 167, 94, 0.06);
}

/* === Elevated Glass (for featured items) === */
.glass-card--elevated {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(198, 167, 94, 0.15);
	border-radius: 10px;
	box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card--elevated:hover {
	transform: translateY(-4px);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.5),
		0 0 60px rgba(198, 167, 94, 0.08);
}

/* === Glass Surface (for form containers, sections) === */
.glass-surface {
	background: rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}

/* === Glass Overlay (for hero overlays) === */
.glass-overlay {
	background: rgba(10, 10, 10, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* === Glass Input Fields === */
.glass-input {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	color: #F5F5F0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	padding: 0.875rem 1.25rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	width: 100%;
}

.glass-input::placeholder {
	color: rgba(138, 138, 138, 0.7);
}

.glass-input:focus {
	border-color: rgba(198, 167, 94, 0.5);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 1px rgba(198, 167, 94, 0.2);
}

.glass-input:hover:not(:focus) {
	border-color: rgba(255, 255, 255, 0.18);
}

/* === Glass Textarea === */
textarea.glass-input {
	min-height: 120px;
	resize: vertical;
}

/* === Glass Select === */
select.glass-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23C6A75E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	padding-right: 3rem;
}

/* === Glass Checkbox === */
.glass-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.glass-checkbox input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 2px;
}

.glass-checkbox input[type="checkbox"]:checked {
	background: #C6A75E;
	border-color: #C6A75E;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5.5L4 8.5L11 1.5' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.glass-checkbox label {
	color: #9AADCA;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* === Gold Divider === */
.gold-divider {
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, #C6A75E, rgba(198, 167, 94, 0.3));
	border: none;
	margin: 1.5rem 0;
}

.gold-divider--center {
	margin-left: auto;
	margin-right: auto;
}

/* === Watch Price Tag === */
.price-tag {
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #C6A75E;
	letter-spacing: 0.05em;
}

.price-tag--large {
	font-size: 1.5rem;
}

.price-tag--request {
	font-style: italic;
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* === Availability Badge === */
.badge {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.375rem 0.875rem;
	border-radius: 0;
}

.badge--available {
	background: rgba(198, 167, 94, 0.15);
	color: #C6A75E;
	border: 1px solid rgba(198, 167, 94, 0.3);
}

.badge--sold {
	background: rgba(138, 138, 138, 0.1);
	color: #9AADCA;
	border: 1px solid rgba(138, 138, 138, 0.2);
}

.badge--reserved {
	background: rgba(255, 255, 255, 0.05);
	color: #F5F5F0;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge--coming-soon {
	background: rgba(198, 167, 94, 0.08);
	color: #D4B96E;
	border: 1px solid rgba(198, 167, 94, 0.15);
}

/* === Watch Spec Row === */
.spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spec-row:last-child {
	border-bottom: none;
}

.spec-label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9AADCA;
}

.spec-value {
	font-size: 0.9375rem;
	color: #F5F5F0;
}

/* ===================================================================
   ANCHOR NAVIGATION
   =================================================================== */
.mvb-anchor-nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.mvb-anchor-nav a {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #F5F5F0;
	text-decoration: none;
	transition: color 0.3s ease;
	white-space: nowrap;
}

.mvb-anchor-nav a:hover,
.mvb-anchor-nav a.is-active {
	color: #C6A75E;
}

.mvb-anchor-nav .mvb-nav-shop {
	color: #C6A75E;
}

@media (max-width: 900px) {
	.mvb-nav-anchors {
		display: none !important;
	}
}

/* ===================================================================
   VIDEO HERO  (moved to video-hero.css + mvb-design.css)
   =================================================================== */

/* ===================================================================
   CAROUSEL
   =================================================================== */
.mvb-carousel {
	position: relative;
	overflow: hidden;
}

.mvb-carousel__track {
	display: flex;
	gap: 16px;
	will-change: transform;
}

.mvb-carousel__slide {
	flex-shrink: 0;
}

.mvb-carousel__card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: rgba(8, 8, 8, 0.72);
	border: none;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 20px 40px rgba(0,0,0,0.4);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mvb-carousel__card:hover {
	box-shadow: 0 0 0 1px rgba(198,167,94,0.1) inset, 0 32px 64px rgba(0,0,0,0.55), 0 0 40px rgba(198,167,94,0.06);
	transform: translateY(-5px);
}

.mvb-carousel__img {
	aspect-ratio: 1;
	overflow: hidden;
	background: #111;
}

.mvb-carousel__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mvb-carousel__card:hover .mvb-carousel__img img {
	transform: scale(1.05);
}

.mvb-carousel__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #132234, #0c1829);
}

.mvb-carousel__info {
	padding: 1.25rem;
}

.mvb-carousel__brand {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #C6A75E;
	margin-bottom: 0.25rem;
}

.mvb-carousel__title {
	font-size: 1rem;
	font-weight: 500;
	color: #F5F5F0;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.mvb-carousel__price {
	font-size: 1rem;
	font-weight: 600;
	color: #C6A75E;
	letter-spacing: 0.03em;
}

.mvb-carousel__price--inquire {
	font-weight: 400;
	font-style: italic;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mvb-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding-top: 2rem;
}

.mvb-carousel__prev,
.mvb-carousel__next {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #F5F5F0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1.125rem;
	border-radius: 0;
}

.mvb-carousel__prev:hover,
.mvb-carousel__next:hover {
	background: rgba(198, 167, 94, 0.15);
	border-color: rgba(198, 167, 94, 0.3);
	color: #C6A75E;
}

.mvb-carousel__dots {
	display: flex;
	gap: 0.5rem;
}

.mvb-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.2s ease;
}

.mvb-carousel__dot.is-active {
	background: #C6A75E;
	transform: scale(1.25);
}

.mvb-carousel__dot:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.3);
}

.mvb-carousel__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	width: 100%;
	color: #9AADCA;
	font-size: 0.875rem;
}

.mvb-spinner {
	width: 32px;
	height: 32px;
	border: 2px solid rgba(198, 167, 94, 0.2);
	border-top-color: #C6A75E;
	border-radius: 50%;
	animation: mvb-spin 0.8s linear infinite;
	margin-bottom: 1rem;
}

@keyframes mvb-spin {
	to { transform: rotate(360deg); }
}

/* ===================================================================
   FAQ ACCORDION
   =================================================================== */
.mvb-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mvb-faq-item:last-child {
	border-bottom: none;
}

.mvb-faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.25rem 0;
	background: none;
	border: none;
	color: #F5F5F0;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	text-align: left;
	transition: color 0.2s ease;
}

.mvb-faq-item__trigger:hover {
	color: #C6A75E;
}

.mvb-faq-item__trigger svg {
	flex-shrink: 0;
	margin-left: 1rem;
	color: #C6A75E;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mvb-faq-item__trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.mvb-faq-item__content {
	padding: 0 0 1.25rem;
}

.mvb-faq-item__content p {
	color: #9AADCA;
	font-size: 0.9375rem;
	line-height: 1.8;
	margin: 0;
}

/* ===================================================================
   EMAIL CAPTURE FORM
   =================================================================== */
.mvb-email-capture__row {
	display: flex;
	gap: 0;
	max-width: 500px;
	margin: 0 auto;
}

.mvb-email-capture__input {
	flex: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-right: none;
	color: #F5F5F0;
	padding: 1rem 1.25rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	outline: none;
	transition: border-color 0.3s ease;
}

.mvb-email-capture__input::placeholder {
	color: rgba(138, 138, 138, 0.7);
}

.mvb-email-capture__input:focus {
	border-color: rgba(198, 167, 94, 0.5);
}

.mvb-email-capture__btn {
	background: #C6A75E;
	color: #0A0A0A;
	border: 1px solid #C6A75E;
	padding: 1rem 1.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.mvb-email-capture__btn:hover {
	background: #D4B96E;
	border-color: #D4B96E;
}

.mvb-email-capture__note {
	text-align: center;
	color: #9AADCA;
	font-size: 0.75rem;
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.mvb-email-capture__row {
		flex-direction: column;
	}
	.mvb-email-capture__input {
		border-right: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: none;
	}
}

/* ===================================================================
   ARCHIVE FILTER BAR (Extended)
   =================================================================== */

/* Legacy alias kept for back-compat */
.mvb-filter-bar { margin-bottom: 2.5rem; }
.mvb-filter-bar__count {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9AADCA;
}

/* New form-based filter */
.mvb-watch-filters {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 1.5rem 1.75rem;
	margin-bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Shared row */
.mvb-filter-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Row 1: Search + count + reset */
.mvb-filter-row--top {
	justify-content: space-between;
}

.mvb-filter-search-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
}

.mvb-filter-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.mvb-filter-search {
	width: 100%;
	padding: 0.6rem 0.75rem 0.6rem 2.25rem;
	font-size: 0.8125rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	color: #F5F5F0;
	outline: none;
	transition: border-color 0.2s;
}

.mvb-filter-search::placeholder { color: #8A9BB5; }
.mvb-filter-search:focus { border-color: rgba(198, 167, 94, 0.4); }

.mvb-filter-count {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8A9BB5;
	white-space: nowrap;
}

.mvb-filter-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9AADCA;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	transition: color 0.2s, border-color 0.2s;
}

.mvb-filter-reset:hover { color: #C6A75E; border-color: rgba(198, 167, 94, 0.3); }

/* Row 2: Taxonomy selects */
.mvb-filter-row--selects {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
}

.mvb-filter-select {
	padding: 0.7rem 0.875rem;
	font-size: 0.8125rem;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: 0.02em;
	appearance: none;
	-webkit-appearance: none;
	background-color: rgba(255, 255, 255, 0.04);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6A75E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 10px;
	padding-right: 2rem;
	cursor: pointer;
	border-radius: 3px;
	transition: border-color 0.2s, background-color 0.2s;
}

.mvb-filter-select:hover {
	border-color: rgba(198, 167, 94, 0.4);
	background-color: rgba(255, 255, 255, 0.06);
}

.mvb-filter-select:focus {
	border-color: rgba(198, 167, 94, 0.6);
	background-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 1px rgba(198, 167, 94, 0.15);
	outline: none;
}

.mvb-filter-select option {
	background-color: #132234;
	color: #F5F5F0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.8125rem;
	padding: 0.5rem 0.75rem;
}

.mvb-filter-select option:checked {
	background-color: rgba(198, 167, 94, 0.2);
	color: #C6A75E;
}

/* Row 3: Price slider */
.mvb-filter-row--price {
	flex-wrap: nowrap;
	gap: 1rem;
}

.mvb-filter-row__label {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8A9BB5;
	white-space: nowrap;
	flex-shrink: 0;
}

.mvb-price-slider-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mvb-price-slider {
	position: relative;
	height: 4px;
}

.mvb-price-slider__track {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}

.mvb-price-slider__fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: #C6A75E;
	border-radius: 2px;
	pointer-events: none;
}

/* Dual range inputs — stacked */
.mvb-range {
	position: absolute;
	top: -6px;
	width: 100%;
	height: 16px;
	appearance: none;
	background: transparent;
	pointer-events: none;
	outline: none;
}

.mvb-range::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #C6A75E;
	border: 2px solid #111;
	cursor: pointer;
	pointer-events: all;
	transition: transform 0.15s;
}

.mvb-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #C6A75E;
	border: 2px solid #111;
	cursor: pointer;
	pointer-events: all;
}

.mvb-range:hover::-webkit-slider-thumb,
.mvb-range:focus::-webkit-slider-thumb { transform: scale(1.2); }

.mvb-price-slider__labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: #9AADCA;
	font-variant-numeric: tabular-nums;
}

/* Row 4: Availability pills + box/papers */
.mvb-filter-row--pills {
	gap: 1.25rem;
	flex-wrap: nowrap;
}

.mvb-availability-pills {
	display: flex;
	gap: 0.375rem;
}

.mvb-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: #9AADCA;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
}

.mvb-pill:hover { border-color: rgba(198, 167, 94, 0.3); color: #C6A75E; }
.mvb-pill.is-active { border-color: #C6A75E; color: #C6A75E; background: rgba(198, 167, 94, 0.07); }
.mvb-pill input[type="radio"] { display: none; }

.mvb-filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: #9AADCA;
	cursor: pointer;
	transition: color 0.2s;
	user-select: none;
	white-space: nowrap;
}

.mvb-filter-checkbox:hover { color: #C6A75E; }
.mvb-filter-checkbox input[type="checkbox"] { display: none; }

.mvb-filter-checkbox__icon { opacity: 0.35; transition: opacity 0.2s; }
.mvb-filter-checkbox:has(input:checked) .mvb-filter-checkbox__icon { opacity: 1; }
.mvb-filter-checkbox:has(input:checked) { color: #C6A75E; }

/* Loading state overlay */
.mvb-watch-grid.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* Responsive filter */
@media (max-width: 1024px) {
	.mvb-filter-row--selects {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.mvb-watch-filters { padding: 1rem; }

	.mvb-filter-row--selects {
		grid-template-columns: repeat(2, 1fr);
	}

	.mvb-filter-row--price { flex-wrap: wrap; }
	.mvb-filter-row--pills { flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.mvb-filter-row--top { flex-wrap: wrap; }
	.mvb-filter-search-wrap { flex: 1 1 100%; }

	.mvb-filter-row--selects {
		grid-template-columns: 1fr 1fr;
	}
}

/* ===================================================================
   PREVIOUSLY SOLD GRID
   =================================================================== */
.mvb-sold-preview-section { min-height: 200px; }

.mvb-sold-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.mvb-sold-card {
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mvb-sold-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.mvb-sold-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	filter: grayscale(20%);
	transition: filter 0.3s;
}

.mvb-sold-card:hover img { filter: grayscale(0%); }

.mvb-sold-card__no-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.04);
}

.mvb-sold-card__body {
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.mvb-sold-card__brand {
	font-size: 0.8125rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #C6A75E;
}

.mvb-sold-card__title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #F5F5F0;
	line-height: 1.3;
}

.mvb-sold-card__date {
	font-size: 0.75rem;
	color: #8A9BB5;
	margin-top: 0.1rem;
}

.mvb-sold-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: rgba(139, 92, 92, 0.85);
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 2px;
	backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
	.mvb-sold-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.mvb-sold-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}
}

/* ===================================================================
   WATCH CARD (Shop Grid)
   =================================================================== */
.mvb-watch-card {
	overflow: hidden;
	position: relative;
}

/* Wishlist button — absolute over card image */
.mvb-watch-card .wp-block-shortcode {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	z-index: 2;
	line-height: 0;
}

.mvb-watch-card__price {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #C6A75E;
	letter-spacing: 0.03em;
}

.mvb-watch-card__price--inquire {
	font-weight: 400;
	font-style: italic;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mvb-watch-card__cta {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #F5F5F0;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: all 0.2s ease;
}

.mvb-watch-card__cta:hover {
	border-color: #C6A75E;
	color: #C6A75E;
}

/* ===================================================================
   STICKY CTA BAR (Single Watch)
   =================================================================== */
.mvb-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: rgba(10, 10, 10, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid rgba(198, 167, 94, 0.2);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mvb-sticky-cta.is-visible {
	transform: translateY(0);
}

.mvb-sticky-cta.is-dismissed {
	display: none;
}

.mvb-sticky-cta__title {
	font-size: 0.875rem;
	font-weight: 500;
	color: #F5F5F0;
}

.mvb-sticky-cta__price {
	font-size: 1rem;
	font-weight: 600;
	color: #C6A75E;
}

.mvb-sticky-cta__btn {
	background: #C6A75E;
	color: #0A0A0A;
	border: none;
	padding: 0.75rem 2rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mvb-sticky-cta__btn:hover {
	background: #D4B96E;
}

.mvb-sticky-cta__close {
	background: none;
	border: none;
	color: #9AADCA;
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.25rem;
}

/* ===================================================================
   FLOATING ACTION BUTTON (Contact)
   =================================================================== */
.mvb-fab {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 80;
}

.mvb-fab__toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #C6A75E;
	color: #0A0A0A;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease;
}

.mvb-fab__toggle:hover {
	background: #D4B96E;
	transform: scale(1.05);
}

.mvb-fab.is-open .mvb-fab__toggle {
	background: rgba(255, 255, 255, 0.1);
	color: #F5F5F0;
}

.mvb-fab__menu {
	position: absolute;
	bottom: 70px;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	animation: mvb-fab-in 0.2s ease;
}

@keyframes mvb-fab-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mvb-fab__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: rgba(10, 10, 10, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	color: #F5F5F0;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.mvb-fab__item:hover {
	border-color: rgba(198, 167, 94, 0.3);
	color: #C6A75E;
}

/* ===================================================================
   SERVICE CARDS
   =================================================================== */
.mvb-service-card {
	text-align: center;
}

.mvb-service-card h3 {
	margin-bottom: 1rem;
}

/* ===================================================================
   RESPONSIVE WATCH GRID
   =================================================================== */
@media (max-width: 768px) {
	.mvb-watch-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.mvb-watch-grid {
		grid-template-columns: 1fr !important;
	}

/* ===================================================================
   PHASE 1: PRODUCT PRESENTATION — CONDITION BARS + SPECS
   =================================================================== */

/* --- Condition grade chip (overall) --- */
.mvb-grade-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 2px;
	border: 1px solid rgba(198, 167, 94, 0.3);
	background: rgba(198, 167, 94, 0.08);
	margin-bottom: 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mvb-grade-chip__score { color: #C6A75E; font-weight: 700; }
.mvb-grade-chip__label { color: rgba(255,255,255,0.55); }
.mvb-grade-chip.is-mint    { border-color: rgba(80,200,120,0.4); background: rgba(80,200,120,0.08); }
.mvb-grade-chip.is-mint .mvb-grade-chip__score    { color: #50C878; }
.mvb-grade-chip.is-excellent { border-color: rgba(198,167,94,0.4); background: rgba(198,167,94,0.08); }
.mvb-grade-chip.is-good    { border-color: rgba(255,200,80,0.4);  background: rgba(255,200,80,0.08); }
.mvb-grade-chip.is-good .mvb-grade-chip__score    { color: #FFC850; }
.mvb-grade-chip.is-fair    { border-color: rgba(255,160,60,0.4);  background: rgba(255,160,60,0.08); }
.mvb-grade-chip.is-fair .mvb-grade-chip__score    { color: #FFA03C; }
.mvb-grade-chip.is-poor    { border-color: rgba(220,80,80,0.4);   background: rgba(220,80,80,0.08); }
.mvb-grade-chip.is-poor .mvb-grade-chip__score    { color: #DC5050; }

/* --- Specs grid --- */
.mvb-specs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-bottom: 1rem;
}
.mvb-spec-row {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mvb-spec-row:nth-child(odd)  { padding-right: 1rem; border-right: 1px solid rgba(255,255,255,0.05); }
.mvb-spec-row:nth-child(even) { padding-left: 1rem; }
.mvb-spec-row__label {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 2px;
}
.mvb-spec-row__value {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.85);
	font-weight: 500;
}

/* --- Caliber section title --- */
.mvb-specs-caliber { margin-top: 1rem; }
.mvb-specs-caliber__title,
.mvb-condition-bars__title,
.mvb-includes__title {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 0.75rem;
	font-weight: 600;
}

/* --- Condition grade bars --- */
.mvb-condition-bars { margin-top: 1.25rem; }
.mvb-condition-bar { margin-bottom: 0.75rem; }
.mvb-condition-bar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.mvb-condition-bar__label {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.6);
}
.mvb-condition-bar__score {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.mvb-condition-bar__score.is-mint     { color: #50C878; }
.mvb-condition-bar__score.is-excellent { color: #C6A75E; }
.mvb-condition-bar__score.is-good     { color: #FFC850; }
.mvb-condition-bar__score.is-fair     { color: #FFA03C; }
.mvb-condition-bar__score.is-poor     { color: #DC5050; }
.mvb-condition-bar__track {
	height: 4px;
	background: rgba(255,255,255,0.08);
	border-radius: 2px;
	overflow: hidden;
}
.mvb-condition-bar__fill {
	height: 100%;
	border-radius: 2px;
	background: #C6A75E;
	transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mvb-condition-bar__fill.is-mint      { background: #50C878; }
.mvb-condition-bar__fill.is-excellent  { background: #C6A75E; }
.mvb-condition-bar__fill.is-good      { background: #FFC850; }
.mvb-condition-bar__fill.is-fair      { background: #FFA03C; }
.mvb-condition-bar__fill.is-poor      { background: #DC5050; }

/* --- Box & Papers checklist --- */
.mvb-includes { margin-top: 1.25rem; }
.mvb-includes__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mvb-includes__item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.7);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 2px;
	padding: 4px 8px;
}
.mvb-includes__icon { flex-shrink: 0; width: 16px; height: 16px; }

/* --- Warranty tracker --- */
.mvb-warranty-tracker {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.625rem 0.875rem;
	background: rgba(198,167,94,0.06);
	border: 1px solid rgba(198,167,94,0.15);
	border-radius: 2px;
	margin-top: 1.25rem;
}
.mvb-warranty-tracker__icon { width: 16px; height: 16px; flex-shrink: 0; }
.mvb-warranty-tracker__label {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
}
.mvb-warranty-tracker__value {
	font-size: 0.8125rem;
	color: #C6A75E;
	font-weight: 500;
}

/* --- Digital Passport / NFC --- */
.mvb-digital-passport {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.625rem 0.875rem;
	background: rgba(100,180,255,0.05);
	border: 1px solid rgba(100,180,255,0.15);
	border-radius: 2px;
	margin-top: 0.75rem;
}
.mvb-digital-passport__icon { width: 20px; height: 20px; flex-shrink: 0; }
.mvb-digital-passport__label {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
}
.mvb-digital-passport__value {
	font-size: 0.75rem;
	color: rgba(180,220,255,0.8);
}

/* ===================================================================
   PHASE 1: PRICE DISPLAY + BADGES
   =================================================================== */

.mvb-listing-price { margin-bottom: 0.75rem; }
.mvb-price-display {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}
.mvb-price-display__amount {
	font-size: 1.625rem;
	font-weight: 600;
	color: #C6A75E;
	letter-spacing: 0.02em;
	font-family: var(--wp--preset--font-family--playfair-display, Georgia, serif);
}
.mvb-price-display__amount--strikethrough {
	text-decoration: line-through;
	opacity: 0.45;
}
.mvb-price-display__por {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

/* Badges */
.mvb-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 2px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.mvb-badge--limited {
	background: rgba(198,167,94,0.12);
	border: 1px solid rgba(198,167,94,0.3);
	color: #C6A75E;
}
.mvb-badge--sold {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.45);
}
.mvb-badge--coming {
	background: rgba(100,180,255,0.08);
	border: 1px solid rgba(100,180,255,0.2);
	color: rgba(150,210,255,0.8);
}

/* Make an Offer button */
.mvb-offer-btn {
	background: transparent;
	border: 1px solid rgba(198,167,94,0.35);
	color: rgba(198,167,94,0.8);
	padding: 5px 14px;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.mvb-offer-btn:hover {
	background: rgba(198,167,94,0.1);
	border-color: rgba(198,167,94,0.6);
	color: #C6A75E;
}

/* ===================================================================
   PHASE 1: MAKE AN OFFER MODAL
   =================================================================== */

.mvb-offer-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.mvb-offer-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.mvb-offer-modal__box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem;
	border-radius: 2px;
	background: rgba(18,18,18,0.95);
	border: 1px solid rgba(198,167,94,0.25);
	box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.mvb-offer-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.4);
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s;
}
.mvb-offer-modal__close:hover { color: rgba(255,255,255,0.8); }
.mvb-offer-modal__title {
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #fff;
	margin-bottom: 0.25rem;
}
.mvb-offer-modal__subtitle {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.4);
	margin-bottom: 1.5rem;
}
.mvb-offer-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.mvb-offer-modal__form .glass-input { margin-bottom: 0.75rem; }
.mvb-offer-modal__amount-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}
.mvb-offer-modal__currency {
	padding: 0.625rem 0.875rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-right: none;
	color: rgba(255,255,255,0.4);
	font-size: 1rem;
	border-radius: 2px 0 0 2px;
}
.mvb-offer-modal__amount-row .glass-input {
	border-radius: 0 2px 2px 0;
	margin-bottom: 0;
}
.mvb-offer-modal__message {
	font-size: 0.8125rem;
	margin-top: 0.75rem;
	min-height: 1.5em;
	text-align: center;
}
.mvb-offer-modal__message.is-success { color: #50C878; }
.mvb-offer-modal__message.is-error   { color: #DC5050; }

/* ===================================================================
   PHASE 1: MEDIA PANEL (3D Viewer, Lume, Audio)
   =================================================================== */

.mvb-media-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.875rem;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 2px;
}
.mvb-media-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 2px;
	color: rgba(255,255,255,0.6);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
}
.mvb-media-toggle:hover {
	background: rgba(198,167,94,0.08);
	border-color: rgba(198,167,94,0.3);
	color: #C6A75E;
}
.mvb-media-toggle[aria-pressed="true"] {
	background: rgba(198,167,94,0.12);
	border-color: rgba(198,167,94,0.4);
	color: #C6A75E;
}

/* 3D Viewer container */
.mvb-3d-viewer {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(0,0,0,0.5);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.75rem;
}
.mvb-3d-viewer model-viewer {
	width: 100%;
	height: 100%;
	--progress-bar-color: #C6A75E;
}
.mvb-3d-viewer__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.7);
	padding: 6px;
	border-radius: 2px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s;
}
.mvb-3d-viewer__close:hover { color: #fff; background: rgba(0,0,0,0.8); }

/* AR button */
.mvb-ar-btn {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(198,167,94,0.9);
	color: #000;
	border: none;
	padding: 8px 20px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
}

/* Audio player */
.mvb-audio-player {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	width: 100%;
}
.mvb-audio-waveform {
	display: none;
	align-items: center;
	gap: 2px;
	height: 20px;
}
.mvb-audio-waveform.is-playing { display: flex; }
.mvb-audio-waveform__bar {
	width: 2px;
	background: #C6A75E;
	border-radius: 1px;
	animation: mvb-bar-bounce 0.8s ease-in-out infinite alternate;
	height: 4px;
}
.mvb-audio-waveform__bar:nth-child(odd)  { animation-delay: 0.1s; }
.mvb-audio-waveform__bar:nth-child(3n)   { animation-delay: 0.2s; }
.mvb-audio-waveform__bar:nth-child(4n)   { animation-delay: 0.3s; }
@keyframes mvb-bar-bounce {
	from { height: 4px; }
	to   { height: 16px; }
}

/* YouTube embed */
.mvb-yt-embed {
	width: 100%;
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.75rem;
}
.mvb-yt-embed iframe {
	width: 100%;
	aspect-ratio: 16/9;
	border: none;
	display: block;
}

/* ===================================================================
   PHASE 1: WISHLIST BUTTON
   =================================================================== */

.mvb-wishlist-btn {
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.5);
	padding: 7px 8px;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mvb-wishlist-btn:hover {
	border-color: rgba(198,167,94,0.4);
	color: #C6A75E;
}
.mvb-wishlist-btn.is-saved {
	background: rgba(198,167,94,0.1);
	border-color: rgba(198,167,94,0.4);
	color: #C6A75E;
}
.mvb-wishlist-btn.is-saved svg path { fill: rgba(198,167,94,0.6); }

/* Wishlist toast */
.mvb-wishlist-toast {
	position: fixed;
	bottom: 80px;
	right: 1.5rem;
	background: rgba(18,18,18,0.95);
	border: 1px solid rgba(198,167,94,0.25);
	color: rgba(255,255,255,0.85);
	padding: 10px 16px;
	font-size: 0.8125rem;
	border-radius: 2px;
	z-index: 9000;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.mvb-wishlist-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Product gallery wishlist control */
.mvb-product-gallery__controls {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	display: flex;
	gap: 0.5rem;
}
.mvb-product-gallery { position: relative; }

/* ===================================================================
   PHASE 1: VERIFIED DEALER BADGES (trust-signals pattern)
   =================================================================== */

.mvb-dealer-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}
.mvb-dealer-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
}
.mvb-dealer-badge svg { flex-shrink: 0; }

/* ===================================================================
   PHASE 1: RECENT SALES POPUP (social proof)
   =================================================================== */

#mvb-recent-sales-popup {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 8000;
	max-width: 280px;
	background: rgba(18,18,18,0.95);
	border: 1px solid rgba(198,167,94,0.2);
	border-left: 3px solid #C6A75E;
	border-radius: 2px;
	padding: 12px 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}
#mvb-recent-sales-popup.mvb-rsp-visible {
	opacity: 1;
	transform: translateX(0);
}
.mvb-rsp-action {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 4px;
}
.mvb-rsp-watch { font-size: 0.875rem; color: rgba(255,255,255,0.85); font-weight: 500; }
.mvb-rsp-location { font-size: 0.8125rem; color: rgba(198,167,94,0.7); margin-top: 4px; }
@media (max-width: 768px) {
	#mvb-recent-sales-popup {
		left: 50%;
		right: auto;
		bottom: 80px;
		transform: translateX(-50%) translateY(10px);
	}
	#mvb-recent-sales-popup.mvb-rsp-visible {
		transform: translateX(-50%) translateY(0);
	}
}

/* ===================================================================
   PHASE 1: LISTING SIDEBAR LAYOUT
   =================================================================== */

.mvb-listing-sidebar { overflow-y: auto; max-height: calc(100vh - 120px); }
.mvb-watch-specs { font-size: 0.875rem; }

/* ===================================================================
   PHASE 2: LIMITED EDITION COUNTDOWN TIMER
   =================================================================== */

.mvb-countdown {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.mvb-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 56px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(198,167,94,0.15);
	border-radius: 2px;
	padding: 10px 8px 8px;
}
.mvb-countdown__value {
	font-size: 1.75rem;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	color: #C6A75E;
	line-height: 1;
	letter-spacing: 0.02em;
}
.mvb-countdown__label {
	font-size: 0.5rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
	margin-top: 4px;
}
.mvb-countdown__sep {
	font-size: 1.5rem;
	color: rgba(198,167,94,0.4);
	line-height: 1;
	margin-bottom: 14px;
}
@media (max-width: 480px) {
	.mvb-countdown__unit { min-width: 48px; padding: 8px 6px 6px; }
	.mvb-countdown__value { font-size: 1.375rem; }
}

/* ===================================================================
   PHASE 2: WATCH FINDER QUIZ
   =================================================================== */

.mvb-quiz-section { background: transparent; }

.mvb-quiz {
	max-width: 680px;
	margin: 2.5rem auto 0;
}

/* Progress bar */
.mvb-quiz__progress-track {
	height: 2px;
	background: rgba(255,255,255,0.08);
	border-radius: 2px;
	margin-bottom: 2.5rem;
	overflow: hidden;
}
.mvb-quiz__progress {
	height: 100%;
	background: linear-gradient(90deg, #C6A75E, #D4B96E);
	border-radius: 2px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Question heading */
.mvb-quiz__question {
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: #F5F5F0;
	margin: 0 0 1.5rem;
}

/* Option grid */
.mvb-quiz__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
@media (max-width: 480px) {
	.mvb-quiz__options { grid-template-columns: 1fr; }
}

.mvb-quiz__option {
	position: relative;
	cursor: pointer;
}
.mvb-quiz__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.mvb-quiz__option-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 1rem 1.25rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 2px;
	transition: all 0.2s ease;
	cursor: pointer;
}
.mvb-quiz__option:hover .mvb-quiz__option-label {
	border-color: rgba(198,167,94,0.3);
	background: rgba(255,255,255,0.07);
}
.mvb-quiz__option input:checked ~ .mvb-quiz__option-label {
	border-color: #C6A75E;
	background: rgba(198,167,94,0.08);
	box-shadow: 0 0 0 1px rgba(198,167,94,0.4);
}
.mvb-quiz__option-icon {
	font-size: 1.375rem;
	margin-bottom: 4px;
}
.mvb-quiz__option-text {
	font-size: 0.9375rem;
	color: #F5F5F0;
	font-weight: 400;
}
.mvb-quiz__option-sub {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.4);
}

/* Step unanswered shake */
@keyframes mvb-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60%  { transform: translateX(-6px); }
	40%, 80%  { transform: translateX(6px); }
}
.mvb-quiz__step.is-unanswered {
	animation: mvb-shake 0.5s ease;
}

/* Lead capture on last step */
.mvb-quiz__lead-capture {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.mvb-quiz__lead-intro {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.5);
	margin: 0 0 0.75rem;
}
.mvb-quiz__lead-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
	.mvb-quiz__lead-fields { grid-template-columns: 1fr; }
}
.mvb-quiz__gdpr {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.4);
	cursor: pointer;
}
.mvb-quiz__gdpr input { flex-shrink: 0; margin-top: 2px; cursor: pointer; }

/* Navigation buttons */
.mvb-quiz__nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	align-items: center;
}
.mvb-quiz__btn {
	padding: 12px 28px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.mvb-quiz__btn--next,
.mvb-quiz__btn--submit {
	background: #C6A75E;
	color: #0A0A0A;
}
.mvb-quiz__btn--next:hover,
.mvb-quiz__btn--submit:hover { background: #D4B96E; }
.mvb-quiz__btn--prev {
	background: transparent;
	color: rgba(255,255,255,0.5);
	border: 1px solid rgba(255,255,255,0.12);
}
.mvb-quiz__btn--prev:hover { border-color: rgba(198,167,94,0.3); color: #C6A75E; }

/* Loading & error */
.mvb-quiz__loading,
.mvb-quiz__error { text-align: center; font-size: 0.9375rem; padding: 1rem; margin-top: 1rem; }
.mvb-quiz__loading { color: rgba(255,255,255,0.5); }
.mvb-quiz__error { color: #e57373; }

/* Results */
.mvb-quiz__results { padding-top: 1rem; }
.mvb-quiz__results-heading {
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #C6A75E;
	text-align: center;
	margin: 0 0 1.75rem;
}
.mvb-quiz__result-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 768px) {
	.mvb-quiz__result-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.mvb-quiz__result-grid { grid-template-columns: 1fr; }
}

/* Quiz recommendation cards */
.mvb-quiz-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 2px;
	overflow: hidden;
	transition: all 0.3s ease;
}
.mvb-quiz-card:hover {
	border-color: rgba(198,167,94,0.25);
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.mvb-quiz-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}
.mvb-quiz-card__no-img {
	width: 100%;
	aspect-ratio: 1;
	background: rgba(255,255,255,0.03);
}
.mvb-quiz-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0.875rem 1rem;
}
.mvb-quiz-card__brand {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C6A75E;
}
.mvb-quiz-card__title { font-size: 0.875rem; color: #F5F5F0; }
.mvb-quiz-card__price { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-top: 4px; }

.mvb-quiz__no-results { text-align: center; color: rgba(255,255,255,0.5); }
.mvb-quiz__no-results a { color: #C6A75E; }
.mvb-quiz__browse-link { color: #C6A75E; font-size: 0.875rem; text-decoration: none; }
.mvb-quiz__browse-link:hover { color: #D4B96E; }
}


/* ==========================================================================
   Phase 3 — Wire Transfer Modal
   ========================================================================== */

.mvb-wire-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9998;
	align-items: center;
	justify-content: center;
}
.mvb-wire-modal-overlay.is-open {
	display: flex;
}
.mvb-wire-modal {
	background: #0d0d1a;
	border: 1px solid rgba(198, 167, 94, 0.25);
	border-radius: 4px;
	padding: 2.5rem;
	max-width: 540px;
	width: calc(100% - 2rem);
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	z-index: 9999;
}
.mvb-wire-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 1rem;
}
.mvb-wire-modal__title {
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #C6A75E;
	margin: 0;
}
.mvb-wire-modal__close {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
	transition: color 0.2s;
}
.mvb-wire-modal__close:hover { color: #fff; }

.mvb-wire-modal__row {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 0.625rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mvb-wire-modal__row:last-of-type { border-bottom: none; }
.mvb-wire-modal__label {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.mvb-wire-modal__value {
	font-size: 0.9375rem;
	color: #F5F5F0;
	font-family: ui-monospace, 'Courier New', monospace;
}
.mvb-wire-modal__copy-btn {
	background: rgba(198, 167, 94, 0.12);
	border: 1px solid rgba(198, 167, 94, 0.3);
	border-radius: 3px;
	color: #C6A75E;
	cursor: pointer;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s;
}
.mvb-wire-modal__copy-btn:hover,
.mvb-wire-modal__copy-btn.is-copied {
	background: rgba(198, 167, 94, 0.25);
	color: #D4B96E;
}
.mvb-wire-modal__note {
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid #C6A75E;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
}
.mvb-wire-transfer-wrapper {
	margin: 0.5rem 0;
}
.mvb-wire-btn.button {
	background: transparent;
	border: 1px solid rgba(198, 167, 94, 0.5);
	color: #C6A75E;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	transition: background 0.2s, border-color 0.2s;
}
.mvb-wire-btn.button:hover {
	background: rgba(198, 167, 94, 0.1);
	border-color: #C6A75E;
}

/* ==========================================================================
   Phase 3 — Deposit Reservation Button
   ========================================================================== */

.mvb-deposit-wrapper {
	margin: 0.5rem 0;
}
.mvb-deposit-button.button {
	background: linear-gradient(135deg, #C6A75E, #a88c4d);
	border: none;
	color: #0d0d1a;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: opacity 0.2s, transform 0.2s;
}
.mvb-deposit-button.button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #0d0d1a;
}
.mvb-deposit-note {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
	margin: 0.375rem 0 0;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Phase 3 — QR Code
   ========================================================================== */

.mvb-qr-wrapper {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.mvb-qr-canvas {
	background: #fff;
	padding: 6px;
	border-radius: 3px;
}
.mvb-qr-canvas img,
.mvb-qr-canvas canvas {
	display: block;
}
.mvb-qr-label {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

/* ==========================================================================
   Phase 3 — Currency Toggle
   ========================================================================== */

.mvb-currency-toggle {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 3px;
	color: #F5F5F0;
	cursor: pointer;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	padding: 6px 10px;
	transition: border-color 0.2s;
}
.mvb-currency-toggle:hover,
.mvb-currency-toggle:focus {
	border-color: rgba(198, 167, 94, 0.4);
	outline: none;
}
.mvb-currency-toggle option {
	background: #1a1a2e;
	color: #F5F5F0;
}
/* Prices tagged with data-usd-price are switched by currency-toggle.js */
.mvb-price-converted::after {
	content: attr(data-currency);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.4);
	margin-left: 4px;
	vertical-align: super;
}

@media (max-width: 600px) {
	.mvb-wire-modal__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.mvb-wire-modal__copy-btn {
		justify-self: start;
	}
}

/* ===================================================================
   PHASE 4 — SEO / COMPARISON / GLOSSARY / TIMELINE / AS SEEN ON
   =================================================================== */

/* ── Glossary Tooltips ─────────────────────────────────────────────── */

abbr.mvb-gloss {
	text-decoration: underline dotted rgba(198, 167, 94, 0.6);
	cursor: help;
	position: relative;
}

.mvb-gloss__tip {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	width: 280px;
	max-width: 90vw;
	padding: 0.875rem 1rem;
	background: rgba(15, 15, 25, 0.97);
	border: 1px solid rgba(198, 167, 94, 0.25);
	border-radius: 8px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	color: #E0E0E0;
	font-size: 0.8125rem;
	line-height: 1.55;
	font-style: normal;
	text-decoration: none;
	pointer-events: none;
	white-space: normal;
}

.mvb-gloss__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(198, 167, 94, 0.25);
}

.mvb-gloss__tip.is-visible {
	display: block;
}

/* ── Watch Comparison Table ────────────────────────────────────────── */

.mvb-compare-table-scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
}

.mvb-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(255, 255, 255, 0.03);
}

.mvb-compare-table col.mvb-compare-col-label {
	width: 180px;
}

.mvb-compare-table th,
.mvb-compare-table td {
	padding: 0.875rem 1.125rem;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	vertical-align: top;
}

.mvb-compare-corner {
	background: transparent;
}

.mvb-compare-col {
	min-width: 220px;
	text-align: center;
}

.mvb-compare-thumb {
	display: block;
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 auto 0.75rem;
	border: 1px solid rgba(198, 167, 94, 0.15);
}

.mvb-compare-thumb--placeholder {
	background: rgba(255, 255, 255, 0.05);
}

.mvb-compare-title {
	display: block;
	color: #F5F5F0;
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	line-height: 1.35;
	margin-bottom: 0.5rem;
}

.mvb-compare-title:hover {
	color: #C6A75E;
}

.mvb-compare-remove {
	background: none;
	border: none;
	color: #9AADCA;
	font-size: 1rem;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s;
}

.mvb-compare-remove:hover {
	color: #E57373;
}

.mvb-compare-row-label {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.mvb-compare-cell {
	color: #E0E0E0;
	font-size: 0.9375rem;
	text-align: center;
}

/* Highlight rows where values differ */
.mvb-compare-cell--diff {
	background: rgba(198, 167, 94, 0.06);
	font-weight: 500;
	color: #F5F5F0;
}

.mvb-compare-cell--cta {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	text-align: center;
}

.mvb-compare-diff-note {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 0.75rem;
	text-align: center;
}

.mvb-compare-empty,
.mvb-compare-error {
	text-align: center;
	color: #9AADCA;
	padding: 3rem 0;
}

.mvb-compare-loading {
	text-align: center;
	color: #9AADCA;
	padding: 2rem 0;
	animation: mvb-pulse 1.5s ease-in-out infinite;
}

/* ── Comparison Tray (floating) ────────────────────────────────────── */

#mvb-compare-tray {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(10, 10, 18, 0.97);
	border-top: 1px solid rgba(198, 167, 94, 0.2);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

#mvb-compare-tray.is-visible {
	transform: translateY(0);
}

.mvb-compare-tray__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.mvb-compare-tray__label {
	color: #C6A75E;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.mvb-compare-tray__chips {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	flex: 1;
}

.mvb-compare-tray__chip {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	background: rgba(198, 167, 94, 0.12);
	border: 1px solid rgba(198, 167, 94, 0.3);
	border-radius: 50px;
	color: #E0E0E0;
	font-size: 0.8125rem;
}

.mvb-compare-tray__chip button {
	background: none;
	border: none;
	color: #9AADCA;
	cursor: pointer;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1;
	transition: color 0.2s;
}

.mvb-compare-tray__chip button:hover {
	color: #E57373;
}

.mvb-compare-tray__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mvb-compare-tray__hint {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.8125rem;
}

.mvb-compare-tray__go {
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	border-radius: 50px;
	background: linear-gradient(135deg, #C6A75E, #E8C97A);
	color: #0A0A0A;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s;
}

.mvb-compare-tray__go:hover {
	opacity: 0.88;
}

.mvb-compare-tray__clear {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.8125rem;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

/* "Add to Compare" button state on watch cards */
[data-compare-id] {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: all 0.2s;
}

[data-compare-id].is-active {
	background: rgba(198, 167, 94, 0.15);
	border-color: rgba(198, 167, 94, 0.4);
	color: #C6A75E;
}

[data-compare-id]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Brand History Timeline ─────────────────────────────────────────── */

.mvb-timeline {
	position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mvb-timeline::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(198, 167, 94, 0.4) 10%, rgba(198, 167, 94, 0.4) 90%, transparent);
	transform: translateX(-50%);
}

.mvb-timeline__item {
	display: flex;
	justify-content: flex-end;
	padding-right: calc(50% + 2rem);
	margin-bottom: 3rem;
	position: relative;
}

.mvb-timeline__item--right {
	justify-content: flex-start;
	padding-right: 0;
	padding-left: calc(50% + 2rem);
}

.mvb-timeline__marker {
	position: absolute;
	left: 50%;
	top: 1.25rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}

.mvb-timeline__year {
	color: #C6A75E;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.mvb-timeline__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(198, 167, 94, 0.4);
	border: 2px solid #C6A75E;
}

.mvb-timeline__dot--gold {
	background: #C6A75E;
	box-shadow: 0 0 12px rgba(198, 167, 94, 0.5);
}

.mvb-timeline__content {
	width: 100%;
	padding: 1.5rem;
	transition: transform 0.2s;
}

.mvb-timeline__content:hover {
	transform: translateY(-2px);
}

.mvb-timeline__badge {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #C6A75E;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.mvb-timeline__title {
	font-size: 1.0625rem;
	font-weight: 500;
	color: #F5F5F0;
	margin: 0 0 0.75rem;
}

.mvb-timeline__body {
	font-size: 0.9375rem;
	color: #9AADCA;
	line-height: 1.6;
	margin: 0;
}

/* ── As Seen On Gallery ─────────────────────────────────────────────── */

.mvb-as-seen-grid {
	gap: 1.5rem;
}

.mvb-as-seen-card {
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.25s;
}

.mvb-as-seen-card:hover {
	transform: translateY(-4px);
}

.mvb-as-seen-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin: 0;
}

.mvb-as-seen-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Responsive adjustments ─────────────────────────────────────────── */

@media (max-width: 720px) {
	.mvb-timeline::before {
		left: 20px;
	}

	.mvb-timeline__item,
	.mvb-timeline__item--right {
		padding-left: 3.5rem;
		padding-right: 0;
		justify-content: flex-start;
	}

	.mvb-timeline__marker {
		left: 20px;
	}

	.mvb-compare-tray__inner {
		padding: 0.75rem 1rem;
	}

	.mvb-compare-tray__chips {
		order: 3;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.mvb-compare-thumb {
		width: 100px;
		height: 100px;
	}

	.mvb-compare-col {
		min-width: 160px;
	}
}

/* ====================================================
   HOME PAGE — Dark Luxury Parallax Background
   Photo: dark velvet/marble texture (1920×2880)
   ==================================================== */

body.home main.wp-block-group {
	background-image: url('/wp-content/uploads/mvb-watches/rolex-submariner.jpg') !important;
	background-size: cover !important;
	background-position: center top !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-color: #0c1829 !important;
}

/* All top-level section groups — semi-transparent so the poster peeks through */
body.home main.wp-block-group > .wp-block-group {
	background-color: rgba(10, 20, 38, 0.72) !important;
	background-image: none !important;
}

/* Charcoal sections get a slightly cooler dark tone */
body.home main.wp-block-group > .wp-block-group.has-charcoal-background-color {
	background-color: rgba(10, 20, 38, 0.78) !important;
}

/* Gold shimmer divider between sections */
body.home main.wp-block-group > .wp-block-group + .wp-block-group::before {
	content: '';
	display: block;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(198, 167, 94, 0.12) 20%,
		rgba(198, 167, 94, 0.32) 50%,
		rgba(198, 167, 94, 0.12) 80%,
		transparent 100%
	);
}

/* Disable fixed attachment on mobile — iOS Safari perf + visual glitch fix */
@media (max-width: 768px) {
	body.home main.wp-block-group {
		background-attachment: scroll !important;
	}
}

/* ====================================================
   FUNNEL HERO — Rich Gradient Background
   ==================================================== */

/* Funnel hero: navy luxury gradient instead of flat black */
.mvb-funnel-hero .wp-block-cover__background {
	background: linear-gradient(
		135deg,
		#0c1829 0%,
		#091420 40%,
		#081220 70%,
		#0a1525 100%
	) !important;
}

/* Gold shimmer highlight at top of hero */
.mvb-funnel-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(198, 167, 94, 0.2) 20%,
		rgba(198, 167, 94, 0.5) 50%,
		rgba(198, 167, 94, 0.2) 80%,
		transparent 100%
	);
	z-index: 2;
}

/* Subtle vignette at bottom of hero to transition to content */
.mvb-funnel-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, rgba(10, 20, 35, 0.6));
	pointer-events: none;
}

/* Funnel main background */
.mvb-funnel-main {
	background: linear-gradient(180deg, #0c1829 0%, #081220 100%) !important;
}

/* ====================================================
   FUNNEL / LANDING PAGES — Rich Dark Sections
   Makes all glass-card sections visually distinct
   instead of indistinguishable flat navy boxes.
   ==================================================== */

/* Navy gradient page background on all non-home pages */
body:not(.home) main.wp-block-group.has-black-background-color,
body:not(.home) main.wp-block-group {
	background: linear-gradient(160deg, #0c1829 0%, #091420 60%, #0a1525 100%) !important;
}

/* ---- Glass-card global improvements ---------------------------------------- */

/* Slightly rounder corners — reduces the "boxy" look */
.glass-card {
	border-radius: 10px !important;
}

/* ---- Funnel section colour overrides ---------------------------------------- */

/* "Black" sections: navy base — clearly readable as a section */
.wp-block-group.glass-card.has-black-background-color,
.wp-block-group.glass-card.has-black-background-color.has-background {
	background: linear-gradient(180deg, #0e1a2e 0%, #0a1522 100%) !important;
	border: 1px solid rgba(180, 200, 240, 0.05) !important;
}

/* "Charcoal" sections: navy surface — creates real alternating rhythm */
.wp-block-group.glass-card.has-charcoal-background-color,
.wp-block-group.glass-card.has-charcoal-background-color.has-background {
	background: linear-gradient(180deg, #152438 0%, #111e30 100%) !important;
	border: 1px solid rgba(198, 167, 94, 0.12) !important;
}

/* Full-bleed sections (alignfull) in funnels — keep the alternating feel */
.wp-block-group.alignfull.has-charcoal-background-color.has-background {
	background: linear-gradient(180deg, #152438 0%, #111e30 100%) !important;
	border-top: 1px solid rgba(198, 167, 94, 0.15) !important;
	border-bottom: none !important;
}

/* ---- Gold shimmer divider between all post-content sections ----------------- */

.wp-block-post-content .wp-block-group.glass-card + .wp-block-group.glass-card {
	margin-top: 2px;
}

.wp-block-post-content .wp-block-group.glass-card + .wp-block-group.glass-card::before,
body:not(.home) main.wp-block-group > .wp-block-group + .wp-block-group::before {
	content: '';
	display: block;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(198, 167, 94, 0.10) 20%,
		rgba(198, 167, 94, 0.28) 50%,
		rgba(198, 167, 94, 0.10) 80%,
		transparent 100%
	);
}

/* ---- Form section — more polished surface ----------------------------------- */

.wp-block-group.glass-card #inquiry {
	border-top: 2px solid rgba(198, 167, 94, 0.3) !important;
}

/* Glass surface for forms — brighter so inputs pop against the background */
.mvb-funnel-form.glass-surface {
	background: rgba(255, 255, 255, 0.035) !important;
	border: 1px solid rgba(198, 167, 94, 0.18) !important;
	border-radius: 10px !important;
}

/* Glass inputs — slightly more visible border */
.mvb-funnel-form .glass-input {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Hero cover on funnel pages — gradient overlay so it doesn't look pure black */
body:not(.home) .wp-block-cover .wp-block-cover__background {
	background: linear-gradient(
		135deg,
		rgba(8, 18, 35, 0.92) 0%,
		rgba(12, 24, 42, 0.85) 100%
	) !important;
}

/* ---- Sections with no explicit glass-card class (non-funnel dark pages) ------ */
body:not(.home) main > .wp-block-group.has-charcoal-background-color:not(.glass-card) {
	background: #152438 !important;
}

body:not(.home) main > .wp-block-group.has-black-background-color:not(.glass-card) {
	background: #0c1829 !important;
}

/* ---- Text contrast improvements -------------------------------------------- */

/* Body copy in funnel sections — ensure it's readable */
.wp-block-group.glass-card p:not([class*="has-"]) {
	color: rgba(220, 225, 240, 0.85);
}

/* Muted text — cool tone on navy backgrounds */
.has-muted-color {
	color: rgba(140, 158, 185, 0.9) !important;
}

/* ---- Section spacing — breathing room between funnel sections -------------- */

/* Add vertical gap between adjacent glass-card sections in post content */
.wp-block-post-content > .wp-block-group.glass-card {
	margin-bottom: 0;
	margin-top: 0;
}

/* Trust signals, feature grid, FAQ sections — slightly wider max-width */
.wp-block-post-content > .wp-block-group.glass-card > .wp-block-columns,
.wp-block-post-content > .wp-block-group.glass-card > .wp-block-list {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- List and FAQ styling inside funnel sections --------------------------- */

/* Bullet list items */
.wp-block-group.glass-card .wp-block-list li {
	color: rgba(220, 225, 240, 0.9);
	margin-bottom: 0.5em;
}

/* FAQ accordion items */
.wp-block-group.glass-card details summary {
	color: rgba(235, 238, 248, 0.95);
}

/* ---- Hero / Cover improvements for funnel pages ---------------------------- */

/* Make the funnel hero text crisp */
body:not(.home) .wp-block-cover h1,
body:not(.home) .wp-block-cover .wp-block-post-title {
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Ensure hero has at least a subtle gradient even without a background image */
body:not(.home) .wp-block-cover:not([style*="background-image"]) {
	background: linear-gradient(160deg, #0c1829 0%, #081220 50%, #0a1525 100%) !important;
}

/* ---- Heading contrast improvements ----------------------------------------- */

/* H2 headings in sections — ensure visibility */
.wp-block-group.glass-card h2.wp-block-heading:not([class*="has-"]) {
	color: rgba(235, 238, 248, 0.98);
}

.wp-block-group.glass-card h3.wp-block-heading:not([class*="has-"]) {
	color: rgba(228, 232, 245, 0.95);
}

/* Strong text */
.wp-block-group.glass-card strong {
	color: rgba(235, 238, 248, 1);
}

/* ---- Links inside funnel sections ------------------------------------------ */

.wp-block-group.glass-card a:not(.wp-block-button__link) {
	color: #C6A75E;
	text-decoration: none;
}

.wp-block-group.glass-card a:not(.wp-block-button__link):hover {
	color: #d4b870;
	text-decoration: underline;
}

/* ---- Mobile ----------------------------------------------------------------- */
@media (max-width: 768px) {
	body:not(.home) main.wp-block-group {
		background-attachment: scroll !important;
	}

	.glass-card {
		border-radius: 6px !important;
	}

	/* Full-bleed sections on mobile: remove horizontal border radius */
	.wp-block-group.alignfull.glass-card {
		border-radius: 0 !important;
	}
}


/* ── AR Launcher (model-viewer 3D + View on Wrist via slot) ─────────────── */

.mvb-ar-launch-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(198,167,94,0.15);
}

.mvb-model-viewer-ar {
    display: block;
    width: 100%;
    height: 220px;
    --poster-color: transparent;
}

/*
 * .mvb-ar-direct-btn is used as slot="ar-button" inside model-viewer.
 * model-viewer positions slotted ar-button at the bottom of the canvas.
 * We override its default positioning to make it full-width at the bottom.
 */
.mvb-ar-direct-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 0 16px 14px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #C6A75E, #a8893e);
    color: #0c1118;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(198,167,94,0.5);
    transition: background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mvb-ar-direct-btn:hover,
.mvb-ar-direct-btn:active {
    background: linear-gradient(135deg, #d4b86a, #C6A75E);
    box-shadow: 0 6px 28px rgba(198,167,94,0.7);
}

.mvb-ar-direct-btn svg {
    flex-shrink: 0;
    color: #0c1118;
}


/* ── Single Timepiece — Mobile Responsive ────────────────────────────────── */

@media (max-width: 781px) {

    /* Stack columns vertically; sidebar comes first on mobile so price/CTA is top */
    .single-mvb_timepiece .wp-block-columns {
        flex-direction: column-reverse !important;
    }

    /* Remove sticky positioning on mobile (causes scroll issues) */
    .mvb-listing-sidebar {
        position: static !important;
        top: auto !important;
    }

    /* Full-width on mobile */
    .single-mvb_timepiece .wp-block-column {
        flex-basis: 100% !important;
        min-width: 100% !important;
    }

    /* Model viewer — taller on mobile for better 3D interaction */
    .mvb-model-viewer-ar {
        height: 280px;
    }

    /* AR button — slightly larger touch target on mobile */
    .mvb-ar-direct-btn {
        padding: 16px 24px;
        font-size: 0.95rem;
    }

    /* Media panel toggles — wrap nicely on small screens */
    .mvb-media-panel {
        flex-wrap: wrap;
        gap: 10px;
    }

    .mvb-media-toggle {
        flex: 1 1 auto;
        min-width: 130px;
        justify-content: center;
    }

    /* Specs grid — single column on mobile */
    .mvb-specs-grid {
        grid-template-columns: 1fr;
    }

    /* Offer modal — full screen on mobile */
    .mvb-offer-modal__box {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none !important;
    }

    .mvb-offer-modal {
        align-items: flex-end;
    }
}