/*
 * Shared public and portal components for A2 Javaherian Watch Bazaar.
 * Every selector is scoped to plugin wrappers.
 */

.a2-jwb .a2-jwb-marketplace-header,
.a2-jwb .a2-jwb-section-header {
	margin-block-end: var(--a2-jwb-space-5);
}

.a2-jwb .a2-jwb-marketplace-header h1,
.a2-jwb .a2-jwb-marketplace-header h2,
.a2-jwb .a2-jwb-section-header h2 {
	margin-block: 0 var(--a2-jwb-space-2);
	color: var(--a2-jwb-color-heading);
	font-size: var(--a2-jwb-font-size-xl);
	line-height: 1.5;
}

.a2-jwb .a2-jwb-watch-grid,
.a2-jwb .a2-jwb-card-grid,
.a2-jwb .a2-jwb-service-grid {
	display: grid;
	gap: var(--a2-jwb-space-4);
	grid-template-columns: repeat(auto-fit, minmax(var(--a2-jwb-card-min), 1fr));
}

.a2-jwb.a2-jwb-deposit-box,
.a2-jwb.a2-jwb-auction-box,
.a2-jwb.a2-jwb-offer-box,
.a2-jwb.a2-jwb-certificate-card,
.a2-jwb.a2-jwb-payment-status,
.a2-jwb .a2-jwb-watch-card,
.a2-jwb .a2-jwb-service-card,
.a2-jwb .a2-jwb-case-card,
.a2-jwb .a2-jwb-action-card,
.a2-jwb .a2-jwb-payment-status,
.a2-jwb .a2-jwb-upload-guide,
.a2-jwb .a2-jwb-timeline,
.a2-jwb .a2-jwb-price-box,
.a2-jwb .a2-jwb-trust-box,
.a2-jwb .a2-jwb-warning-box,
.a2-jwb .a2-jwb-deposit-box,
.a2-jwb .a2-jwb-auction-box,
.a2-jwb .a2-jwb-offer-box,
.a2-jwb .a2-jwb-certificate-card,
.a2-jwb .a2-jwb-locked-action,
.a2-jwb .a2-jwb-empty-state {
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-card);
	background: var(--a2-jwb-color-surface);
	box-shadow: var(--a2-jwb-shadow-card);
}

.a2-jwb.a2-jwb-deposit-box,
.a2-jwb.a2-jwb-auction-box,
.a2-jwb.a2-jwb-offer-box,
.a2-jwb.a2-jwb-certificate-card,
.a2-jwb.a2-jwb-payment-status,
.a2-jwb .a2-jwb-watch-card,
.a2-jwb .a2-jwb-service-card,
.a2-jwb .a2-jwb-case-card,
.a2-jwb .a2-jwb-action-card,
.a2-jwb .a2-jwb-payment-status,
.a2-jwb .a2-jwb-upload-guide,
.a2-jwb .a2-jwb-timeline,
.a2-jwb .a2-jwb-price-box,
.a2-jwb .a2-jwb-trust-box,
.a2-jwb .a2-jwb-warning-box,
.a2-jwb .a2-jwb-deposit-box,
.a2-jwb .a2-jwb-auction-box,
.a2-jwb .a2-jwb-offer-box,
.a2-jwb .a2-jwb-certificate-card,
.a2-jwb .a2-jwb-locked-action,
.a2-jwb .a2-jwb-empty-state {
	padding: var(--a2-jwb-space-4);
}

.a2-jwb .a2-jwb-watch-card {
	overflow: hidden;
	padding: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.a2-jwb .a2-jwb-watch-card:focus-within,
.a2-jwb .a2-jwb-watch-card:hover {
	border-color: var(--a2-jwb-color-border-strong);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
	transform: translateY(-1px);
}

.a2-jwb .a2-jwb-watch-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--a2-jwb-color-surface-muted);
}

.a2-jwb .a2-jwb-watch-card-media img,
.a2-jwb .a2-jwb-watch-gallery img,
.a2-jwb .a2-jwb-certificate-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.a2-jwb .a2-jwb-status-badge,
.a2-jwb .a2-jwb-certificate-badge,
.a2-jwb .a2-jwb-sla-badge,
.a2-jwb .a2-jwb-priority-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	width: fit-content;
	max-width: 100%;
	padding: 3px 10px;
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-pill);
	background: var(--a2-jwb-color-surface-muted);
	color: var(--a2-jwb-color-text);
	font-size: var(--a2-jwb-font-size-xs);
	font-weight: 600;
	line-height: 1.5;
	white-space: normal;
}

.a2-jwb .a2-jwb-certificate-badge {
	border-color: rgba(31, 122, 67, 0.24);
	background: var(--a2-jwb-color-success-bg);
	color: var(--a2-jwb-color-success);
}

.a2-jwb .a2-jwb-warning,
.a2-jwb .a2-jwb-form-warning,
.a2-jwb .a2-jwb-warning-box,
.a2-jwb .a2-jwb-locked-action {
	border-inline-start: 4px solid var(--a2-jwb-color-warning);
	background: var(--a2-jwb-color-warning-bg);
	color: var(--a2-jwb-color-text);
}

.a2-jwb .a2-jwb-notice,
.a2-jwb .a2-jwb-form-message,
.a2-jwb .a2-jwb-trust-note,
.a2-jwb .a2-jwb-helper,
.a2-jwb .a2-jwb-note {
	border-radius: var(--a2-jwb-radius-card);
	background: var(--a2-jwb-color-info-bg);
	color: var(--a2-jwb-color-text);
}

.a2-jwb .a2-jwb-notice,
.a2-jwb .a2-jwb-form-message,
.a2-jwb .a2-jwb-trust-note,
.a2-jwb .a2-jwb-helper,
.a2-jwb .a2-jwb-note,
.a2-jwb .a2-jwb-warning,
.a2-jwb .a2-jwb-form-warning {
	padding: var(--a2-jwb-space-3);
}

.a2-jwb .a2-jwb-notice.is-error,
.a2-jwb .a2-jwb-error,
.a2-jwb .a2-jwb-alert {
	border-inline-start: 4px solid var(--a2-jwb-color-danger);
	background: var(--a2-jwb-color-danger-bg);
	color: var(--a2-jwb-color-text);
}

.a2-jwb .a2-jwb-notice.is-success,
.a2-jwb .a2-jwb-alert-success {
	border-inline-start: 4px solid var(--a2-jwb-color-success);
	background: var(--a2-jwb-color-success-bg);
	color: var(--a2-jwb-color-text);
}

.a2-jwb .a2-jwb-primary,
.a2-jwb .a2-jwb-secondary,
.a2-jwb .a2-jwb-form button,
.a2-jwb .a2-jwb-purchase-request-form button,
.a2-jwb .a2-jwb-final-payment-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--a2-jwb-button-height);
	padding-block: 8px;
	padding-inline: 16px;
	border-radius: var(--a2-jwb-radius-button);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.a2-jwb .a2-jwb-primary,
.a2-jwb .a2-jwb-form button,
.a2-jwb .a2-jwb-purchase-request-form button,
.a2-jwb .a2-jwb-final-payment-form button {
	border: 1px solid var(--a2-jwb-color-primary);
	background: var(--a2-jwb-color-primary);
	color: var(--a2-jwb-color-primary-contrast);
}

.a2-jwb .a2-jwb-secondary {
	border: 1px solid var(--a2-jwb-color-primary);
	background: var(--a2-jwb-color-surface);
	color: var(--a2-jwb-color-primary);
}

.a2-jwb .a2-jwb-primary:focus,
.a2-jwb .a2-jwb-secondary:focus,
.a2-jwb .a2-jwb-form button:focus,
.a2-jwb .a2-jwb-purchase-request-form button:focus,
.a2-jwb .a2-jwb-final-payment-form button:focus {
	outline: 2px solid var(--a2-jwb-color-accent);
	outline-offset: 2px;
}

.a2-jwb .a2-jwb-primary:disabled,
.a2-jwb .a2-jwb-form button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.a2-jwb .a2-jwb-form,
.a2-jwb .a2-jwb-purchase-request-form,
.a2-jwb .a2-jwb-final-payment-form,
.a2-jwb .a2-jwb-buyer-offer form,
.a2-jwb .a2-jwb-auction-entry form {
	display: grid;
	gap: var(--a2-jwb-space-3);
}

.a2-jwb .a2-jwb-form label,
.a2-jwb .a2-jwb-purchase-request-form label,
.a2-jwb .a2-jwb-final-payment-form label {
	display: grid;
	gap: var(--a2-jwb-space-1);
	color: var(--a2-jwb-color-text);
	font-weight: 600;
}

.a2-jwb .a2-jwb-form input,
.a2-jwb .a2-jwb-form textarea,
.a2-jwb .a2-jwb-form select,
.a2-jwb .a2-jwb-purchase-request-form input,
.a2-jwb .a2-jwb-final-payment-form input,
.a2-jwb .a2-jwb-buyer-offer input,
.a2-jwb .a2-jwb-buyer-offer textarea,
.a2-jwb .a2-jwb-auction-entry input {
	min-height: var(--a2-jwb-input-height);
	width: 100%;
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-button);
	background: var(--a2-jwb-color-surface);
	color: var(--a2-jwb-color-text);
	font: inherit;
	padding-block: 8px;
	padding-inline: 12px;
}

.a2-jwb .a2-jwb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--a2-jwb-space-2);
}

.a2-jwb .a2-jwb-checkbox input {
	flex: 0 0 auto;
	width: auto;
	margin-block-start: 0.45em;
}

.a2-jwb.a2-jwb-watch-detail,
.a2-jwb .a2-jwb-watch-detail {
	display: grid;
	gap: var(--a2-jwb-space-6);
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	align-items: start;
}

.a2-jwb .a2-jwb-watch-gallery {
	display: grid;
	gap: var(--a2-jwb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.a2-jwb .a2-jwb-watch-gallery figure {
	overflow: hidden;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--a2-jwb-radius-card);
	background: var(--a2-jwb-color-surface-muted);
}

.a2-jwb .a2-jwb-price,
.a2-jwb .a2-jwb-price-box {
	color: var(--a2-jwb-color-heading);
	font-size: var(--a2-jwb-font-size-lg);
	font-weight: 800;
}

.a2-jwb .a2-jwb-progress-stepper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a2-jwb-space-2);
	margin-block: var(--a2-jwb-space-4);
	padding: 0;
	list-style: none;
}

.a2-jwb .a2-jwb-progress-stepper li,
.a2-jwb .a2-jwb-progress-stepper-item {
	flex: 1 1 140px;
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-pill);
	background: var(--a2-jwb-color-surface);
	padding-block: 6px;
	padding-inline: 10px;
	text-align: center;
}

.a2-jwb .a2-jwb-upload-grid,
.a2-jwb .a2-jwb-file-grid {
	display: grid;
	gap: var(--a2-jwb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.a2-jwb .a2-jwb-upload-guide,
.a2-jwb .a2-jwb-evidence-card {
	display: grid;
	gap: var(--a2-jwb-space-2);
}

.a2-jwb .a2-jwb-timeline {
	display: grid;
	gap: var(--a2-jwb-space-3);
}

.a2-jwb .a2-jwb-timeline-item {
	border-inline-start: 3px solid var(--a2-jwb-color-border-strong);
	padding-inline-start: var(--a2-jwb-space-3);
}

.a2-jwb .a2-jwb-empty,
.a2-jwb .a2-jwb-empty-state {
	padding: var(--a2-jwb-space-5);
	color: var(--a2-jwb-color-muted);
	text-align: center;
}

.a2-jwb .a2-jwb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a2-jwb-space-2);
	margin-block-start: var(--a2-jwb-space-5);
}

.a2-jwb .a2-jwb-pagination a {
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-button);
	padding-block: 8px;
	padding-inline: 12px;
	text-decoration: none;
}

@media (max-width: 720px) {
	.a2-jwb .a2-jwb-marketplace-search,
	.a2-jwb.a2-jwb-watch-detail,
	.a2-jwb .a2-jwb-watch-detail,
	.a2-jwb .a2-jwb-auction-stats,
	.a2-jwb .a2-jwb-auction-forms {
		display: grid;
		grid-template-columns: 1fr;
	}

	.a2-jwb .a2-jwb-primary,
	.a2-jwb .a2-jwb-secondary,
	.a2-jwb .a2-jwb-form button,
	.a2-jwb .a2-jwb-purchase-request-form button,
	.a2-jwb .a2-jwb-final-payment-form button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Public composite components (R-series): KPI cards, tables, landing blocks,
 * status pills, and portal/identity wrappers. Token-driven, so they pick up the
 * storefront-matching public palette automatically. RTL + mobile-first.
 * ------------------------------------------------------------------------- */

/* KPI / summary cards (seller portal, command-center-style summaries). */
.a2-jwb-public .a2-jwb-finance-kpis,
.a2-jwb-portal .a2-jwb-finance-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--a2-jwb-space-3);
	margin-top: var(--a2-jwb-space-3);
}

.a2-jwb-public .a2-jwb-finance-card,
.a2-jwb-portal .a2-jwb-finance-card {
	display: flex;
	flex-direction: column;
	gap: var(--a2-jwb-space-1);
	padding: var(--a2-jwb-space-4);
	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-public .a2-jwb-finance-card span,
.a2-jwb-portal .a2-jwb-finance-card span {
	color: var(--a2-jwb-color-muted);
	font-size: var(--a2-jwb-font-size-sm);
}

.a2-jwb-public .a2-jwb-finance-card strong,
.a2-jwb-portal .a2-jwb-finance-card strong {
	color: var(--a2-jwb-color-heading);
	font-size: var(--a2-jwb-font-size-xl);
	font-variant-numeric: tabular-nums;
}

/* Tables (portal watch list etc.). */
.a2-jwb-public table.widefat,
.a2-jwb-portal table.widefat {
	width: 100%;
	border-collapse: collapse;
	background: var(--a2-jwb-color-surface);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: var(--a2-jwb-radius-card);
	overflow: hidden;
}

.a2-jwb-public table.widefat th,
.a2-jwb-portal table.widefat th {
	text-align: right;
	background: var(--a2-jwb-color-surface-muted);
	color: var(--a2-jwb-color-heading);
	font-weight: 600;
	padding: var(--a2-jwb-space-3);
	font-size: var(--a2-jwb-font-size-sm);
}

.a2-jwb-public table.widefat td,
.a2-jwb-portal table.widefat td {
	padding: var(--a2-jwb-space-3);
	border-top: 1px solid var(--a2-jwb-color-border);
	font-size: var(--a2-jwb-font-size-sm);
}

.a2-jwb-public table.widefat tbody tr:hover,
.a2-jwb-portal table.widefat tbody tr:hover {
	background: var(--a2-jwb-color-surface-muted);
}

/* Status pills. */
.a2-jwb-public .a2-jwb-status-pill,
.a2-jwb-portal .a2-jwb-status-pill {
	display: inline-block;
	padding: 2px var(--a2-jwb-space-3);
	border-radius: 999px;
	background: var(--a2-jwb-color-accent-soft);
	color: var(--a2-jwb-color-accent-hover);
	font-size: var(--a2-jwb-font-size-xs);
	font-weight: 600;
}

/* Landing blocks. */
.a2-jwb-landing .a2-jwb-landing-header {
	text-align: center;
	margin-bottom: var(--a2-jwb-space-6);
}

.a2-jwb-landing h1 {
	color: var(--a2-jwb-color-heading);
	font-size: var(--a2-jwb-font-size-2xl);
	margin-bottom: var(--a2-jwb-space-3);
}

.a2-jwb-landing .a2-jwb-landing-intro {
	color: var(--a2-jwb-color-muted);
	max-width: 60ch;
	margin: 0 auto;
}

.a2-jwb-landing .a2-jwb-landing-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a2-jwb-space-2);
	list-style: none;
	padding: 0;
	margin: var(--a2-jwb-space-5) 0;
	justify-content: center;
}

.a2-jwb-landing .a2-jwb-landing-keywords li {
	padding: var(--a2-jwb-space-1) var(--a2-jwb-space-3);
	border: 1px solid var(--a2-jwb-color-border);
	border-radius: 999px;
	font-size: var(--a2-jwb-font-size-sm);
	color: var(--a2-jwb-color-text);
}

.a2-jwb-landing .a2-jwb-landing-cta {
	text-align: center;
	margin-top: var(--a2-jwb-space-6);
}

.a2-jwb-landing .a2-jwb-landing-cta-label {
	font-weight: 600;
	color: var(--a2-jwb-color-accent-hover);
	margin-bottom: var(--a2-jwb-space-3);
}

/* Portal / identity wrappers stack their cards with breathing room. */
.a2-jwb-seller-portal > .a2-jwb-card,
.a2-jwb-seller-identity {
	margin-bottom: var(--a2-jwb-space-5);
}

/* Responsive: turn wide tables into stacked cards on small screens. */
@media (max-width: 640px) {
	.a2-jwb-public table.a2-jwb-responsive-table thead,
	.a2-jwb-portal table.a2-jwb-responsive-table thead {
		display: none;
	}
	.a2-jwb-public table.a2-jwb-responsive-table tr,
	.a2-jwb-portal table.a2-jwb-responsive-table tr {
		display: block;
		margin-bottom: var(--a2-jwb-space-3);
		border: 1px solid var(--a2-jwb-color-border);
		border-radius: var(--a2-jwb-radius-card);
		padding: var(--a2-jwb-space-2);
	}
	.a2-jwb-public table.a2-jwb-responsive-table td,
	.a2-jwb-portal table.a2-jwb-responsive-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--a2-jwb-space-3);
		border: none;
	}
	.a2-jwb-public table.a2-jwb-responsive-table td::before,
	.a2-jwb-portal table.a2-jwb-responsive-table td::before {
		content: attr(data-label);
		color: var(--a2-jwb-color-muted);
		font-size: var(--a2-jwb-font-size-xs);
	}
}

/* ---------------------------------------------------------------------------
 * Home hero + feature grid. Full-width friendly (works inside an Elementor
 * full-width / canvas section): the hero is full-bleed while a centered
 * container keeps content readable on wide screens. RTL + mobile-first.
 * ------------------------------------------------------------------------- */

.a2-jwb-landing .a2-jwb-container {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--a2-jwb-space-5);
}

.a2-jwb-landing .a2-jwb-hero {
	width: 100%;
	background: linear-gradient(180deg, var(--a2-jwb-color-surface-muted), var(--a2-jwb-color-surface));
	border-bottom: 1px solid var(--a2-jwb-color-border);
	padding-block: clamp(40px, 8vw, 96px);
	text-align: center;
}

.a2-jwb-landing .a2-jwb-hero h1 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	color: var(--a2-jwb-color-heading);
	margin: 0 0 var(--a2-jwb-space-4);
}

.a2-jwb-landing .a2-jwb-hero .a2-jwb-landing-intro {
	max-width: 64ch;
	margin: 0 auto var(--a2-jwb-space-6);
	color: var(--a2-jwb-color-muted);
	font-size: var(--a2-jwb-font-size-lg);
}

.a2-jwb-landing .a2-jwb-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a2-jwb-space-3);
	justify-content: center;
}

.a2-jwb-landing .a2-jwb-hero-actions .a2-jwb-button {
	min-width: 200px;
	font-size: var(--a2-jwb-font-size-md);
}

/* Secondary (outline) button — gold outline to complement the gold primary. */
.a2-jwb-public .a2-jwb-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--a2-jwb-button-height);
	padding-inline: var(--a2-jwb-space-5);
	border-radius: var(--a2-jwb-radius-sm);
	border: 1px solid var(--a2-jwb-color-accent);
	background: transparent;
	color: var(--a2-jwb-color-accent-hover);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.a2-jwb-public .a2-jwb-button-secondary:hover {
	background: var(--a2-jwb-color-accent-soft);
}

/* Feature grid. */
.a2-jwb-landing .a2-jwb-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--a2-jwb-space-4);
	margin-block: var(--a2-jwb-space-8);
}

.a2-jwb-landing .a2-jwb-feature {
	padding: 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);
	text-align: center;
}

.a2-jwb-landing .a2-jwb-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--a2-jwb-color-accent-soft);
	color: var(--a2-jwb-color-accent-hover);
	font-size: 1.4rem;
	margin-bottom: var(--a2-jwb-space-3);
}

.a2-jwb-landing .a2-jwb-feature h3 {
	margin: 0 0 var(--a2-jwb-space-2);
	color: var(--a2-jwb-color-heading);
	font-size: var(--a2-jwb-font-size-lg);
}

.a2-jwb-landing .a2-jwb-feature p {
	margin: 0;
	color: var(--a2-jwb-color-muted);
	font-size: var(--a2-jwb-font-size-sm);
}

/* ---------------------------------------------------------------------------
 * Full-width page wrapper + a strong PUBLIC BASELINE so every front-end
 * surface (even templates without bespoke CSS) looks clean and consistent:
 * headings, paragraphs, links, lists, form fields, buttons, and boxes — all
 * token-driven and RTL. This is the backbone of the user-facing redesign.
 * ------------------------------------------------------------------------- */

.a2-jwb-fullwidth-main {
	width: 100%;
	margin: 0;
	padding-block: var(--a2-jwb-space-6);
	background: var(--a2-jwb-color-bg);
}

/* Center the bespoke marketplace/landing blocks inside the full-width area. */
.a2-jwb-fullwidth-main > .a2-jwb-public,
.a2-jwb-fullwidth-main > .a2-jwb-landing,
.a2-jwb-fullwidth-main > .a2-jwb {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--a2-jwb-space-5);
}
.a2-jwb-fullwidth-main > .a2-jwb-landing { max-width: none; padding-inline: 0; }

/* Headings + text baseline. */
.a2-jwb-public h1, .a2-jwb-public h2, .a2-jwb-public h3,
.a2-jwb-portal h1, .a2-jwb-portal h2, .a2-jwb-portal h3 {
	color: var(--a2-jwb-color-heading);
	line-height: 1.4;
}

.a2-jwb-public p, .a2-jwb-portal p { line-height: var(--a2-jwb-line-height); }

.a2-jwb-public a, .a2-jwb-portal a { color: var(--a2-jwb-color-primary); }
.a2-jwb-public a:hover, .a2-jwb-portal a:hover { color: var(--a2-jwb-color-primary-hover); }

/* Form fields baseline. */
.a2-jwb-public label, .a2-jwb-portal label {
	display: block;
	margin-bottom: var(--a2-jwb-space-3);
	color: var(--a2-jwb-color-text);
	font-size: var(--a2-jwb-font-size-sm);
}

.a2-jwb-public input[type="text"],
.a2-jwb-public input[type="tel"],
.a2-jwb-public input[type="number"],
.a2-jwb-public input[type="email"],
.a2-jwb-public input[type="search"],
.a2-jwb-public input[type="file"],
.a2-jwb-public select,
.a2-jwb-public textarea,
.a2-jwb-portal input[type="text"],
.a2-jwb-portal input[type="tel"],
.a2-jwb-portal input[type="number"],
.a2-jwb-portal select,
.a2-jwb-portal textarea {
	width: 100%;
	min-height: var(--a2-jwb-input-height);
	margin-top: var(--a2-jwb-space-1);
	padding: var(--a2-jwb-space-2) 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;
	font-size: var(--a2-jwb-font-size-md);
}

.a2-jwb-public textarea, .a2-jwb-portal textarea { min-height: 96px; }

.a2-jwb-public input:focus,
.a2-jwb-public select:focus,
.a2-jwb-public textarea:focus,
.a2-jwb-portal input:focus,
.a2-jwb-portal select:focus,
.a2-jwb-portal textarea:focus {
	outline: none;
	border-color: var(--a2-jwb-color-primary);
	box-shadow: var(--a2-jwb-ring-primary);
}

.a2-jwb-public input[type="checkbox"],
.a2-jwb-public input[type="radio"] { width: auto; min-height: 0; margin-inline-start: 0; }

/* Buttons baseline — any button/submit inside a public surface. */
.a2-jwb-public button,
.a2-jwb-public input[type="submit"],
.a2-jwb-public .a2-jwb-button,
.a2-jwb-portal button,
.a2-jwb-portal .a2-jwb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--a2-jwb-button-height);
	padding-inline: var(--a2-jwb-space-6);
	border: 1px solid var(--a2-jwb-color-primary);
	border-radius: var(--a2-jwb-radius-sm);
	background: var(--a2-jwb-color-primary);
	color: var(--a2-jwb-color-primary-contrast);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--a2-jwb-font-size-md);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.08s ease;
}

.a2-jwb-public button:hover,
.a2-jwb-public input[type="submit"]:hover,
.a2-jwb-public .a2-jwb-button:hover,
.a2-jwb-portal button:hover {
	background: var(--a2-jwb-color-primary-hover);
	border-color: var(--a2-jwb-color-primary-hover);
}

.a2-jwb-public .a2-jwb-button-primary { background: var(--a2-jwb-color-primary); }

/* Generic boxes used by deposit / certificate / final-payment / submission. */
.a2-jwb-public .a2-jwb-card,
.a2-jwb-public .a2-jwb-buyer-deposit,
.a2-jwb-public .a2-jwb-final-payment-invitation,
.a2-jwb-public .a2-jwb-certificate,
.a2-jwb-public .a2-jwb-deposit-box,
.a2-jwb-public .a2-jwb-final-payment-box,
.a2-jwb-public .a2-jwb-seller-submission-form {
	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);
	padding: var(--a2-jwb-space-6);
	margin-bottom: var(--a2-jwb-space-5);
	max-width: 720px;
	margin-inline: auto;
}

/* Summary tables inside payment/certificate boxes. */
.a2-jwb-public .a2-jwb-summary-table {
	width: 100%;
	border-collapse: collapse;
}
.a2-jwb-public .a2-jwb-summary-table th,
.a2-jwb-public .a2-jwb-summary-table td {
	text-align: right;
	padding: var(--a2-jwb-space-3);
	border-bottom: 1px solid var(--a2-jwb-color-border);
	font-size: var(--a2-jwb-font-size-sm);
}
.a2-jwb-public .a2-jwb-summary-table th { color: var(--a2-jwb-color-muted); font-weight: 600; }

/* Notices. */
.a2-jwb-public .a2-jwb-notice,
.a2-jwb-public .a2-jwb-notice-error {
	padding: var(--a2-jwb-space-3) var(--a2-jwb-space-4);
	border-radius: var(--a2-jwb-radius-sm);
	margin-bottom: var(--a2-jwb-space-4);
	font-size: var(--a2-jwb-font-size-sm);
}
.a2-jwb-public .a2-jwb-notice { background: var(--a2-jwb-color-accent-soft); color: var(--a2-jwb-color-accent-hover); }
.a2-jwb-public .a2-jwb-notice-error { background: var(--a2-jwb-color-danger-bg); color: var(--a2-jwb-color-danger); }

/* ---------------------------------------------------------------------------
 * Shared bazaar top navigation (rendered on every full-width bazaar page).
 * Sticky, RTL, premium, with a CSS-only mobile toggle.
 * ------------------------------------------------------------------------- */
.a2-jwb-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--a2-jwb-color-surface);
	border-bottom: 1px solid var(--a2-jwb-color-border);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.a2-jwb-nav-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--a2-jwb-space-3) var(--a2-jwb-space-5);
	display: flex;
	align-items: center;
	gap: var(--a2-jwb-space-4);
	flex-wrap: wrap;
}

.a2-jwb-nav-brand {
	font-weight: 700;
	font-size: var(--a2-jwb-font-size-md);
	color: var(--a2-jwb-color-heading);
	text-decoration: none;
	margin-inline-end: auto;
}

.a2-jwb-nav-list {
	display: flex;
	align-items: center;
	gap: var(--a2-jwb-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.a2-jwb-nav-list a {
	display: inline-flex;
	align-items: center;
	padding: var(--a2-jwb-space-2) var(--a2-jwb-space-4);
	border-radius: var(--a2-jwb-radius-sm);
	color: var(--a2-jwb-color-text);
	text-decoration: none;
	font-size: var(--a2-jwb-font-size-sm);
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.a2-jwb-nav-list a:hover { background: var(--a2-jwb-color-surface-muted); color: var(--a2-jwb-color-primary); }
.a2-jwb-nav-list a.is-active { background: var(--a2-jwb-color-primary); color: var(--a2-jwb-color-primary-contrast); }

.a2-jwb-nav-toggle {
	display: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: var(--a2-jwb-space-1) var(--a2-jwb-space-2);
	border-radius: var(--a2-jwb-radius-sm);
	color: var(--a2-jwb-color-heading);
}

@media (max-width: 768px) {
	.a2-jwb-nav-brand { margin-inline-end: auto; }
	.a2-jwb-nav-toggle { display: inline-flex; }
	.a2-jwb-nav-list {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		display: none;
		padding-block: var(--a2-jwb-space-2);
	}
	.a2-jwb-nav-checkbox:checked ~ .a2-jwb-nav-list { display: flex; }
	.a2-jwb-nav-list a { padding: var(--a2-jwb-space-3) var(--a2-jwb-space-4); }
}

/* Hide the site-wide Xoo wishlist/login widget (xoo-wl / xoo-aff plugin — NOT
 * part of this plugin) on bazaar full-width pages so its login/quantity popup
 * does not clutter the marketplace footer. */
.a2-jwb-fullwidth-page .xoo-wl-sidebar,
.a2-jwb-fullwidth-page .xoo-wl-launcher,
.a2-jwb-fullwidth-page .xoo-wl-popup,
.a2-jwb-fullwidth-page .xoo-wl-modal,
.a2-jwb-fullwidth-page .xoo-aff-modal-wrap,
.a2-jwb-fullwidth-page [class^="xoo-wl-"],
.a2-jwb-fullwidth-page [class^="xoo-aff-"] { display: none !important; }

/* Inline back/forward links between bazaar steps. */
.a2-jwb-backlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: var(--a2-jwb-space-4) 0;
	color: var(--a2-jwb-color-primary);
	text-decoration: none;
	font-size: var(--a2-jwb-font-size-sm);
	font-weight: 600;
}
.a2-jwb-backlink:hover { color: var(--a2-jwb-color-primary-hover); }

/* ---------------------------------------------------------------------------
 * Multi-step wizard shell (auth, watch submission, …) — RTL, mobile-first.
 * ------------------------------------------------------------------------- */
.a2-jwb-wizard {
	max-width: 540px;
	margin: var(--a2-jwb-space-8) auto;
}

.a2-jwb-wizard-steps {
	display: flex;
	gap: var(--a2-jwb-space-2);
	list-style: none;
	margin: 0 0 var(--a2-jwb-space-6);
	padding: 0;
	counter-reset: a2step;
}
.a2-jwb-wizard-steps li {
	flex: 1;
	text-align: center;
	font-size: var(--a2-jwb-font-size-sm);
	font-weight: 600;
	color: var(--a2-jwb-color-muted);
	padding-bottom: var(--a2-jwb-space-2);
	border-bottom: 3px solid var(--a2-jwb-color-border);
}
.a2-jwb-wizard-steps li.is-active { color: var(--a2-jwb-color-primary); border-bottom-color: var(--a2-jwb-color-primary); }
.a2-jwb-wizard-steps li.is-done { color: var(--a2-jwb-color-accent-hover); border-bottom-color: var(--a2-jwb-color-accent); }

.a2-jwb-wizard-panel {
	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);
	padding: var(--a2-jwb-space-6);
}
.a2-jwb-wizard-panel h2 { margin-top: 0; }

.a2-jwb-role-choice {
	border: 0;
	margin: var(--a2-jwb-space-4) 0;
	padding: 0;
	display: flex;
	gap: var(--a2-jwb-space-3);
}
.a2-jwb-role-choice legend { font-size: var(--a2-jwb-font-size-sm); color: var(--a2-jwb-color-muted); margin-bottom: var(--a2-jwb-space-2); }
.a2-jwb-role-option {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: var(--a2-jwb-space-3) var(--a2-jwb-space-4);
	border: 1px solid var(--a2-jwb-color-border-strong);
	border-radius: var(--a2-jwb-radius-sm);
	cursor: pointer;
}
.a2-jwb-role-option:has(input:checked) { border-color: var(--a2-jwb-color-primary); background: rgba(212, 180, 95, 0.10); }

.a2-jwb-auth .a2-jwb-wizard-panel button { width: 100%; margin-top: var(--a2-jwb-space-4); }

/* Highlighted nav action (login / my-panel). */
.a2-jwb-nav-cta {
	background: var(--a2-jwb-color-primary) !important;
	color: var(--a2-jwb-color-primary-contrast) !important;
}
.a2-jwb-nav-cta:hover { background: var(--a2-jwb-color-primary-hover) !important; }

/* Wizard step visibility + nav. No-JS: all steps show, only submit acts.
 * With JS (.a2-jwb-wizard--js): one step at a time; JS drives prev/next/submit. */
.a2-jwb-wizard-nav {
	display: flex;
	gap: var(--a2-jwb-space-3);
	justify-content: space-between;
	margin-top: var(--a2-jwb-space-6);
}
.a2-jwb-wizard-prev,
.a2-jwb-wizard-next { display: none; }
.a2-jwb-wizard--js .a2-jwb-wizard-panel { display: none; }
.a2-jwb-wizard--js .a2-jwb-wizard-panel.is-current { display: block; }
/* The script clears the inline display to reveal Next, so the resting rule it
   falls back to has to be visible or the wizard has no way forward at all. */
.a2-jwb-wizard--js .a2-jwb-wizard-next { display: inline-flex; }
/* Prev gets the same resting rule for the same reason: the script sets its
   inline display to 'none' on the first step and clears it on every later
   one, so the stylesheet it falls back to has to be visible. (Today the
   blanket `.a2-jwb button:not(...)` rule in override.css out-specifies both
   of these; this keeps the wizard shell correct on its own terms rather
   than depending on that.) */
.a2-jwb-wizard--js .a2-jwb-wizard-prev { display: inline-flex; }
.a2-jwb-wizard-step h3 { margin-top: 0; color: var(--a2-jwb-color-heading); }
.a2-jwb-upload-grid {
	display: grid;
	gap: var(--a2-jwb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.a2-jwb-wizard .a2-jwb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.a2-jwb-wizard .a2-jwb-checkbox input { width: auto; min-height: 0; margin-top: 4px; }