/*
 * Marketplace + watch detail — premium, token-driven, RTL, mobile-first.
 * Rebuilt to match the storefront palette (white + gold #D4AF37 + teal CTA).
 */

.a2-jwb-marketplace,
.a2-jwb-watch-detail {
	box-sizing: border-box;
	direction: rtl;
	font-family: var(--a2-jwb-font-family);
	color: var(--a2-jwb-color-text);
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--a2-jwb-space-5);
}

/* --- Header --- */
.a2-jwb-marketplace-header {
	text-align: center;
	margin-block: var(--a2-jwb-space-6) var(--a2-jwb-space-8);
}

.a2-jwb-marketplace-header h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	color: var(--a2-jwb-color-heading);
	margin: 0 0 var(--a2-jwb-space-3);
}

.a2-jwb-marketplace-header p {
	max-width: 70ch;
	margin: 0 auto;
	color: var(--a2-jwb-color-muted);
	line-height: var(--a2-jwb-line-height);
}

/* --- Search / filter bar --- */
.a2-jwb-marketplace-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--a2-jwb-space-3);
	margin-bottom: var(--a2-jwb-space-8);
	padding: var(--a2-jwb-space-4);
	background: var(--a2-jwb-color-surface-muted);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-card);
}

.a2-jwb-marketplace-search label {
	flex: 1 1 180px;
	display: flex;
	flex-direction: column;
	gap: var(--a2-jwb-space-1);
	font-size: var(--a2-jwb-font-size-sm);
	color: var(--a2-jwb-color-muted);
}

.a2-jwb-marketplace-search input {
	width: 100%;
	min-height: var(--a2-jwb-input-height);
	padding-inline: var(--a2-jwb-space-3);
	border: 1px solid var(--a2-jwb-color-border-strong);
	border-radius: var(--a2-jwb-radius-sm);
	background: var(--a2-jwb-color-surface);
	color: var(--a2-jwb-color-text);
	font-family: inherit;
}

.a2-jwb-marketplace-search input:focus {
	outline: none;
	border-color: var(--a2-jwb-color-primary);
	box-shadow: var(--a2-jwb-ring-primary);
}

.a2-jwb-marketplace-search button {
	min-height: var(--a2-jwb-button-height);
	padding-inline: var(--a2-jwb-space-6);
	border: none;
	border-radius: var(--a2-jwb-radius-sm);
	background: var(--a2-jwb-color-primary);
	color: var(--a2-jwb-color-primary-contrast);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.a2-jwb-marketplace-search button:hover {
	background: var(--a2-jwb-color-primary-hover);
}

/* --- Grid --- */
.a2-jwb-watch-grid {
	display: grid;
	gap: var(--a2-jwb-space-5);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* --- Card --- */
.a2-jwb-watch-card {
	display: flex;
	flex-direction: column;
	background: var(--a2-jwb-color-surface);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-card);
	overflow: hidden;
	box-shadow: var(--a2-jwb-shadow-card);
	transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.a2-jwb-watch-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--a2-jwb-shadow-raised);
	border-color: var(--a2-jwb-color-accent);
}

.a2-jwb-watch-card-media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--a2-jwb-color-surface-sunken);
	overflow: hidden;
}

.a2-jwb-watch-card-media img,
.a2-jwb-watch-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.a2-jwb-watch-card:hover .a2-jwb-watch-card-media img {
	transform: scale(1.05);
}

.a2-jwb-watch-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--a2-jwb-space-2);
	padding: var(--a2-jwb-space-4);
}

.a2-jwb-watch-card-body h3 {
	margin: 0;
	font-size: var(--a2-jwb-font-size-md);
	line-height: 1.5;
}

.a2-jwb-watch-card-body h3 a {
	color: var(--a2-jwb-color-heading);
	text-decoration: none;
}

.a2-jwb-watch-card-body h3 a:hover {
	color: var(--a2-jwb-color-primary);
}

.a2-jwb-watch-card-body p {
	margin: 0;
	color: var(--a2-jwb-color-muted);
	font-size: var(--a2-jwb-font-size-sm);
}

.a2-jwb-watch-card-body strong {
	font-size: var(--a2-jwb-font-size-lg);
	color: var(--a2-jwb-color-heading);
	font-variant-numeric: tabular-nums;
}

/* --- Badges --- */
.a2-jwb-status-badge,
.a2-jwb-certificate-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	padding: 3px var(--a2-jwb-space-3);
	border-radius: 999px;
	font-size: var(--a2-jwb-font-size-xs);
	font-weight: 600;
}

.a2-jwb-status-badge {
	background: var(--a2-jwb-color-accent-soft);
	color: var(--a2-jwb-color-accent-hover);
}

.a2-jwb-certificate-badge {
	background: rgba(212, 180, 95, 0.14);
	color: var(--a2-jwb-color-primary);
}

/* --- Card CTA --- */
.a2-jwb-watch-card-body .a2-jwb-secondary {
	margin-top: var(--a2-jwb-space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	border: 1px solid var(--a2-jwb-color-primary);
	border-radius: var(--a2-jwb-radius-sm);
	color: var(--a2-jwb-color-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--a2-jwb-font-size-sm);
	transition: background 0.15s ease, color 0.15s ease;
}

.a2-jwb-watch-card-body .a2-jwb-secondary:hover {
	background: var(--a2-jwb-color-primary);
	color: var(--a2-jwb-color-primary-contrast);
}

/* --- Empty + pagination --- */
.a2-jwb-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--a2-jwb-space-10);
	color: var(--a2-jwb-color-muted);
	background: var(--a2-jwb-color-surface-muted);
	border: 1px dashed var(--a2-jwb-color-border-strong);
	border-radius: var(--a2-jwb-radius-card);
}

.a2-jwb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a2-jwb-space-2);
	justify-content: center;
	margin-block: var(--a2-jwb-space-8);
}

.a2-jwb-pagination a,
.a2-jwb-pagination span {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--a2-jwb-space-2);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-sm);
	background: var(--a2-jwb-color-surface);
	color: var(--a2-jwb-color-text);
	text-decoration: none;
}

.a2-jwb-pagination a:hover,
.a2-jwb-pagination .is-current {
	border-color: var(--a2-jwb-color-primary);
	background: var(--a2-jwb-color-primary);
	color: var(--a2-jwb-color-primary-contrast);
}

/* --- Watch detail --- */
.a2-jwb-watch-detail {
	display: grid;
	gap: var(--a2-jwb-space-8);
	margin-block: var(--a2-jwb-space-6);
}

@media (min-width: 860px) {
	.a2-jwb-watch-detail.a2-jwb-watch-detail--has-gallery {
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
	}
}

.a2-jwb-watch-detail h1,
.a2-jwb-watch-detail h2 {
	color: var(--a2-jwb-color-heading);
	margin-top: 0;
}

.a2-jwb-watch-gallery {
	border-radius: var(--a2-jwb-radius-card);
	overflow: hidden;
	background: var(--a2-jwb-color-surface-sunken);
	aspect-ratio: 4 / 3;
}

.a2-jwb-watch-detail .a2-jwb-price {
	font-size: var(--a2-jwb-font-size-2xl);
	color: var(--a2-jwb-color-heading);
	font-variant-numeric: tabular-nums;
}

/* --- Premium empty state (no approved watches yet) --- */
.a2-jwb-empty-state {
	text-align: center;
	max-width: 560px;
	margin: var(--a2-jwb-space-6) auto var(--a2-jwb-space-10);
	padding: var(--a2-jwb-space-10) var(--a2-jwb-space-6);
	background: var(--a2-jwb-color-surface);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-card);
	box-shadow: var(--a2-jwb-shadow-card);
}

.a2-jwb-empty-state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: var(--a2-jwb-space-4);
	border-radius: 999px;
	background: var(--a2-jwb-color-accent-soft);
	font-size: 40px;
	line-height: 1;
}

.a2-jwb-empty-state h3 {
	margin: 0 0 var(--a2-jwb-space-3);
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	color: var(--a2-jwb-color-heading);
}

.a2-jwb-empty-state p {
	margin: 0 auto var(--a2-jwb-space-6);
	max-width: 46ch;
	color: var(--a2-jwb-color-muted);
	line-height: var(--a2-jwb-line-height);
}

/* --- Image placeholder when a listing has no photo yet --- */
.a2-jwb-watch-card-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--a2-jwb-color-surface-muted), var(--a2-jwb-color-surface-sunken));
}

.a2-jwb-watch-card-placeholder {
	font-size: 56px;
	line-height: 1;
	opacity: 0.5;
	filter: grayscale(1);
}