/**
 * MyBike Core — structural + component CSS. (v10.2.0)
 * ===================================================
 *
 * REWRITTEN IN 10.2. Versions 5.0 → 10.1 each appended a new block to the
 * bottom of this file without removing the block it superseded, so by 10.1
 * the file defined `.mybike-grid` twice, `.mybike-card` twice and
 * `.mybike-dashboard__quick-actions` three times, with border radii ranging
 * from 8px to 22px fighting the theme's 2px design token. Whichever rule
 * happened to be last won. That is what made the marketplace look like
 * several different products stitched together.
 *
 * This file is now a single pass: every selector appears exactly once, and
 * every colour, radius and spacing value comes from a token. The tokens
 * below are fallbacks only — the MyBike Avada Child theme redefines the
 * same custom properties on :root, so plugin and theme always render one
 * visual language even if the theme is swapped out.
 *
 * Order: tokens → layout shells → primitives → card/grid → empty states →
 * search → listing → account → offers/notifications → messaging →
 * dealers → feedback → a11y → responsive.
 */

/* ==================================================================== */
/* 1. Design tokens                                                      */
/* ==================================================================== */

/*
 * Guarantee the native `hidden` attribute always wins.
 *
 * Several scripts in this codebase (the sell wizard's step panels, the
 * messages thread panel, notification badge counters) toggle visibility
 * by setting `element.hidden = true/false` rather than a CSS class. The
 * browser's own stylesheet already hides `[hidden]` elements — but any
 * later author rule that sets `display` on the same element at equal
 * specificity (e.g. `.mybike-wizard__panel { display: none }` or
 * `.mybike-messages__thread { display: flex }`) silently overrides it,
 * because author styles always beat the UA stylesheet regardless of
 * selector type. That previously made the entire "Sell Your Bike"
 * wizard render empty (no step was ever visible) and forced the
 * messages thread panel to always show, breaking the mobile list <->
 * thread pattern. `!important` here is deliberate and narrow: it only
 * ever needs to beat a `display` declared elsewhere in this file.
 */
[hidden] { display: none !important; }

:root {
	--mb-red: #E1000F;
	--mb-red-dark: #B5000C;
	--mb-red-tint: #FFF1F1;
	--mb-red-line: #F5C2C4;
	--mb-ink: #16181D;
	--mb-ink-soft: #4A4E57;
	--mb-ink-faint: #8A8F99;
	--mb-paper: #FFFFFF;
	--mb-surface: #F5F5F3;
	--mb-surface-2: #ECECEA;
	--mb-line: #E1E1DD;
	--mb-line-strong: #C9C9C3;
	--mb-success: #1A7F37;
	--mb-success-tint: #EAF6ED;
	--mb-warning: #A16207;
	--mb-focus: #0B5FFF;

	/* Sharp, functional corners — not the rounded-card default. */
	--mb-radius: 2px;
	--mb-radius-lg: 4px;

	--mb-space-1: 4px;
	--mb-space-2: 8px;
	--mb-space-3: 16px;
	--mb-space-4: 24px;
	--mb-space-5: 40px;
	--mb-space-6: 64px;

	--mb-container: 1240px;

	/* One elevation step, used only where an element genuinely floats. */
	--mb-lift: 0 6px 20px rgba(22, 24, 29, .08);
	--mb-lift-strong: 0 14px 40px rgba(22, 24, 29, .16);
}

/* ==================================================================== */
/* 2. Layout shells                                                      */
/* ==================================================================== */

.mybike-container {
	width: 100%;
	max-width: var(--mb-container);
	margin-inline: auto;
	padding-inline: var(--mb-space-3);
}

.mybike-main-content {
	width: 100%;
	max-width: var(--mb-container);
	margin-inline: auto;
	padding: var(--mb-space-5) var(--mb-space-3) var(--mb-space-6);
}

.mybike-main-content--narrow { max-width: 720px; }
.mybike-main-content--full-width { max-width: none; }

/* Application views (dashboard, messaging) sit flush on the page
   background instead of inside a content card. */
.mybike-main-content--app { padding-top: var(--mb-space-4); }

.mybike-section { padding: var(--mb-space-6) 0; }
.mybike-section + .mybike-section { padding-top: 0; }

.mybike-section__title {
	margin: 0 0 var(--mb-space-4);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--mb-ink);
}

.mybike-section__eyebrow {
	margin-bottom: var(--mb-space-2);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mb-red);
}

.mybike-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-4);
}

.mybike-section__head .mybike-section__title { margin: 0; }

.mybike-archive-title {
	margin: 0 0 var(--mb-space-2);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ==================================================================== */
/* 3. Primitives: buttons, forms, badges, breadcrumbs                    */
/* ==================================================================== */

.mybike-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mb-space-2);
	min-height: 44px;
	padding: 0 var(--mb-space-4);
	border: 1px solid transparent;
	border-radius: var(--mb-radius);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.mybike-btn--primary {
	background: var(--mb-red);
	border-color: var(--mb-red);
	color: #fff;
}

.mybike-btn--primary:hover,
.mybike-btn--primary:focus-visible {
	background: var(--mb-red-dark);
	border-color: var(--mb-red-dark);
	color: #fff;
}

.mybike-btn--secondary {
	background: var(--mb-paper);
	border-color: var(--mb-line-strong);
	color: var(--mb-ink);
}

.mybike-btn--secondary:hover,
.mybike-btn--secondary:focus-visible {
	background: var(--mb-surface);
	border-color: var(--mb-ink);
	color: var(--mb-ink);
}

.mybike-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--mb-ink-soft);
	padding-inline: var(--mb-space-2);
}

.mybike-btn--ghost:hover { color: var(--mb-ink); }

.mybike-btn--danger {
	background: transparent;
	border-color: var(--mb-red-line);
	color: var(--mb-red-dark);
}

.mybike-btn--danger:hover { background: var(--mb-red-tint); border-color: var(--mb-red); }

.mybike-btn--small { min-height: 36px; padding-inline: var(--mb-space-3); font-size: .84rem; }
.mybike-btn--block { width: 100%; }
.mybike-btn[disabled],
.mybike-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Forms */
.mybike-form-group { margin-bottom: var(--mb-space-4); }

.mybike-form-group__label,
.mybike-form-group > label {
	display: block;
	margin-bottom: var(--mb-space-2);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mb-ink);
}

.mybike-form-group input[type="text"],
.mybike-form-group input[type="email"],
.mybike-form-group input[type="url"],
.mybike-form-group input[type="tel"],
.mybike-form-group input[type="number"],
.mybike-form-group input[type="password"],
.mybike-form-group input[type="search"],
.mybike-form-group select,
.mybike-form-group textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--mb-space-2) var(--mb-space-3);
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
	color: var(--mb-ink);
	font: inherit;
	font-size: .95rem;
}

.mybike-form-group textarea { min-height: 140px; resize: vertical; }

.mybike-form-group input:focus,
.mybike-form-group select:focus,
.mybike-form-group textarea:focus {
	outline: 2px solid var(--mb-focus);
	outline-offset: -1px;
	border-color: var(--mb-focus);
}

.mybike-field-help {
	display: block;
	margin-top: var(--mb-space-1);
	font-size: .78rem;
	color: var(--mb-ink-soft);
}

.mybike-form-error,
.mybike-form-message--error {
	margin-top: var(--mb-space-2);
	padding: var(--mb-space-2) var(--mb-space-3);
	border-left: 3px solid var(--mb-red);
	background: var(--mb-red-tint);
	color: var(--mb-red-dark);
	font-size: .88rem;
}

.mybike-form-message--success {
	margin-top: var(--mb-space-2);
	padding: var(--mb-space-2) var(--mb-space-3);
	border-left: 3px solid var(--mb-success);
	background: var(--mb-success-tint);
	color: var(--mb-success);
	font-size: .88rem;
}

/* Badges */
.mybike-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: var(--mb-radius);
	background: var(--mb-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mybike-badge--sold { background: var(--mb-ink); }
.mybike-badge--featured { background: var(--mb-red); }
.mybike-badge--new { background: var(--mb-success); }
.mybike-badge--ebike { background: #fff; color: var(--mb-ink); border: 1px solid var(--mb-line-strong); }

.mybike-verified-badge {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--mb-success);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.mybike-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 5px;
	border-radius: 99px;
	background: var(--mb-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.mybike-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-2);
	margin-bottom: var(--mb-space-4);
	font-size: .82rem;
	color: var(--mb-ink-soft);
}

.mybike-breadcrumbs a { color: var(--mb-ink-soft); text-decoration: none; }
.mybike-breadcrumbs a:hover { color: var(--mb-red); text-decoration: underline; }
.mybike-breadcrumbs [aria-current="page"] { color: var(--mb-ink); font-weight: 600; }

.mybike-svg-icon {
	width: 17px;
	height: 17px;
	display: inline-block;
	vertical-align: -3px;
	flex: 0 0 auto;
}

/* ==================================================================== */
/* 4. Listing card + grid                                                */
/* ==================================================================== */

.mybike-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.mybike-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mybike-card:hover {
	border-color: var(--mb-line-strong);
	box-shadow: var(--mb-lift);
	transform: translateY(-2px);
}

.mybike-card--featured { border-color: var(--mb-red-line); }

.mybike-card--sold .mybike-card__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
	pointer-events: none;
}

.mybike-card__image-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--mb-surface);
	overflow: hidden;
}

.mybike-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.mybike-card:hover .mybike-card__image { transform: scale(1.03); }

.mybike-card__image--placeholder {
	width: 100%;
	height: 100%;
	display: block;
	background: repeating-linear-gradient(45deg, var(--mb-surface) 0 10px, var(--mb-surface-2) 10px 20px);
}

/* Full-card click target that still leaves the overlay buttons clickable. */
.mybike-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-indent: -9999px;
	overflow: hidden;
}

.mybike-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 64px);
}

.mybike-card__overlay-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 1;
	transition: opacity .18s ease;
}

/* Hidden until hover on precise pointers; always visible on touch, where
   there is no hover state to reveal them. */
@media (hover: hover) and (pointer: fine) {
	.mybike-card__overlay-actions { opacity: 0; }
	.mybike-card:hover .mybike-card__overlay-actions,
	.mybike-card:focus-within .mybike-card__overlay-actions { opacity: 1; }
	.mybike-card__overlay-actions:has(.is-active) { opacity: 1; }
}

.mybike-card-action {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(22, 24, 29, .08);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--mb-ink-soft);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.mybike-card-action:hover { background: #fff; color: var(--mb-ink); transform: scale(1.06); }
.mybike-card-action.is-active { background: var(--mb-red); color: #fff; border-color: var(--mb-red); }
.mybike-card-action.is-active .mybike-svg-icon { fill: currentColor; }
.mybike-card-action .mybike-svg-icon { width: 16px; height: 16px; }

.mybike-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	pointer-events: none;
}

.mybike-card__body a,
.mybike-card__body button { pointer-events: auto; }

.mybike-card__price {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mb-ink);
}

.mybike-card__price-note {
	margin-left: 6px;
	font-size: .75rem;
	font-weight: 500;
	color: var(--mb-ink-soft);
}

.mybike-card__title {
	margin: 0;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.35;
}

.mybike-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--mb-ink);
	text-decoration: none;
}

.mybike-card__title a:hover { color: var(--mb-red); }

.mybike-card__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	color: var(--mb-ink-soft);
}

.mybike-card__meta-item:not(:last-child)::after {
	content: "·";
	margin-left: 6px;
	opacity: .55;
}

.mybike-card__category {
	margin: 2px 0 0;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mb-ink-faint);
}

/* ==================================================================== */
/* 5. Empty states                                                       */
/* ==================================================================== */

.mybike-empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mb-space-3);
	padding: var(--mb-space-6) var(--mb-space-4);
	border: 1px dashed var(--mb-line-strong);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
	text-align: center;
}

.mybike-empty-state__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--mb-ink);
}

.mybike-empty-state__body {
	margin: 0;
	max-width: 46ch;
	color: var(--mb-ink-soft);
	font-size: .92rem;
}

.mybike-empty-notifications {
	padding: var(--mb-space-6) var(--mb-space-4);
	border: 1px dashed var(--mb-line-strong);
	border-radius: var(--mb-radius-lg);
	text-align: center;
	color: var(--mb-ink-soft);
}

/* ==================================================================== */
/* 6. Search: filters sidebar + results                                  */
/* ==================================================================== */

.mybike-search-page {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--mb-space-5);
	align-items: start;
}

.mybike-filters {
	position: sticky;
	top: var(--mb-space-3);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-filters__title {
	margin: 0 0 var(--mb-space-3);
	padding-bottom: var(--mb-space-2);
	border-bottom: 1px solid var(--mb-line);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mb-ink-soft);
}

.mybike-filters__form { display: grid; gap: var(--mb-space-3); }
.mybike-filters__form .mybike-form-group { margin-bottom: 0; }

.mybike-filter-drawer-toggle { display: none; }

.mybike-search-results { min-width: 0; }

.mybike-search-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-4);
	padding-bottom: var(--mb-space-3);
	border-bottom: 1px solid var(--mb-line);
}

.mybike-search-results__count { font-size: .9rem; color: var(--mb-ink-soft); }
.mybike-search-results__count strong { color: var(--mb-ink); }

.mybike-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mb-space-1);
	margin-top: var(--mb-space-5);
}

.mybike-pagination a,
.mybike-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--mb-space-2);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	color: var(--mb-ink);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
}

.mybike-pagination a:hover { border-color: var(--mb-ink); }
.mybike-pagination .current { background: var(--mb-ink); border-color: var(--mb-ink); color: #fff; }

/* ==================================================================== */
/* 7. Single listing: gallery, summary, specs                            */
/* ==================================================================== */

.mybike-listing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
	gap: var(--mb-space-5);
	align-items: start;
}

.mybike-listing__gallery { min-width: 0; }

.mybike-listing__summary {
	position: sticky;
	top: var(--mb-space-3);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-listing__title {
	margin: 0 0 var(--mb-space-2);
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.mybike-listing__price {
	margin: 0 0 var(--mb-space-3);
	font-size: clamp(1.6rem, 3.2vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--mb-ink);
}

.mybike-listing__description {
	margin-top: var(--mb-space-5);
	max-width: 70ch;
	line-height: 1.7;
	color: var(--mb-ink-soft);
}

.mybike-listing__description p { margin: 0 0 1em; }

.mybike-listing__seller-link {
	font-weight: 600;
	color: var(--mb-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mb-line-strong);
}

.mybike-listing__seller-link:hover { color: var(--mb-red); border-color: var(--mb-red); }

.mybike-listing__seller-location {
	display: block;
	margin-top: 2px;
	font-size: .84rem;
	color: var(--mb-ink-soft);
}

.mybike-listing__external-link { margin-top: var(--mb-space-3); }
.mybike-listing__external-link .mybike-svg-icon { vertical-align: -4px; }

.mybike-share-listing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-2);
	margin-top: var(--mb-space-3);
	padding-top: var(--mb-space-3);
	border-top: 1px solid var(--mb-line);
}

/* Gallery */
.mybike-gallery { display: grid; gap: var(--mb-space-2); }

.mybike-gallery--placeholder {
	aspect-ratio: 4 / 3;
	border-radius: var(--mb-radius-lg);
	background: repeating-linear-gradient(45deg, var(--mb-surface) 0 12px, var(--mb-surface-2) 12px 24px);
}

.mybike-gallery__main-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
	overflow: hidden;
}

.mybike-gallery__main-button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.mybike-gallery__main { display: block; width: 100%; height: 100%; object-fit: cover; }

.mybike-gallery__thumbs {
	display: flex;
	gap: var(--mb-space-2);
	overflow-x: auto;
	padding-bottom: var(--mb-space-1);
	scrollbar-width: thin;
}

.mybike-gallery__thumb {
	flex: 0 0 82px;
	width: 82px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--mb-radius);
	background: var(--mb-surface);
	overflow: hidden;
	cursor: pointer;
}

.mybike-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mybike-gallery__thumb.is-active { border-color: var(--mb-ink); }

.mybike-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--mb-space-5);
	background: rgba(12, 13, 16, .94);
}

.mybike-lightbox.is-open { display: flex; }
.mybike-lightbox__image { max-width: min(92vw, 1400px); max-height: 88vh; object-fit: contain; }

.mybike-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.mybike-lightbox button:hover { background: rgba(255, 255, 255, .22); }
.mybike-lightbox__close { top: var(--mb-space-4); right: var(--mb-space-4); }
.mybike-lightbox__prev { left: var(--mb-space-4); }
.mybike-lightbox__next { right: var(--mb-space-4); }
.mybike-lightbox-open { overflow: hidden; }

/* Specs */
.mybike-spec-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--mb-space-5);
	margin-top: var(--mb-space-4);
}

.mybike-spec-list__row {
	display: flex;
	justify-content: space-between;
	gap: var(--mb-space-3);
	padding: 10px 0;
	border-bottom: 1px solid var(--mb-line);
	font-size: .9rem;
}

.mybike-spec-list__row dt,
.mybike-spec-list__row > span:first-child { color: var(--mb-ink-soft); }

.mybike-spec-list__row dd,
.mybike-spec-list__row > span:last-child {
	margin: 0;
	font-weight: 600;
	color: var(--mb-ink);
	text-align: right;
}

/* ==================================================================== */
/* 8. Account: nav, dashboard, listings table, sell wizard               */
/* ==================================================================== */

.mybike-dashboard {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--mb-space-5);
	align-items: start;
}

.mybike-dashboard__main,
.mybike-dealer-dashboard__main { min-width: 0; }

.mybike-account-nav {
	position: sticky;
	top: var(--mb-space-3);
	display: grid;
	gap: 2px;
	padding: var(--mb-space-2);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
}

.mybike-account-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--mb-radius);
	color: var(--mb-ink);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.mybike-account-nav a:hover { background: var(--mb-paper); }
.mybike-account-nav a.is-active { background: var(--mb-ink); color: #fff; }
.mybike-account-nav a.is-active .mybike-nav-badge { background: #fff; color: var(--mb-ink); }

.mybike-nav-icon,
.mybike-account-nav .mybike-svg-icon { flex: 0 0 20px; width: 20px; height: 20px; }

.mybike-dashboard__quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-5);
}

.mybike-dashboard-action {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--mb-space-2);
	min-height: 104px;
	padding: var(--mb-space-3);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
	color: var(--mb-ink);
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mybike-dashboard-action:hover {
	transform: translateY(-2px);
	border-color: var(--mb-line-strong);
	box-shadow: var(--mb-lift);
}

.mybike-dashboard-action strong {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mb-radius);
	background: var(--mb-surface);
	color: var(--mb-ink);
	font-size: 18px;
	line-height: 1;
}

.mybike-dashboard-action span { font-size: .84rem; font-weight: 600; color: var(--mb-ink-soft); }
.mybike-dashboard-action .mybike-nav-badge { position: absolute; top: 12px; right: 12px; margin: 0; }

.mybike-dashboard-section,
.mybike-settings-section,
.mybike-dealer-dashboard__section {
	margin-bottom: var(--mb-space-4);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-dashboard-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-3);
}

.mybike-dashboard-section__head h2,
.mybike-dashboard-section__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }

.mybike-dashboard-list { display: grid; }

.mybike-dashboard-list-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mb-space-3);
	padding: 12px 0;
	border-bottom: 1px solid var(--mb-line);
}

.mybike-dashboard-list-item:last-child { border-bottom: 0; }

.mybike-dashboard-list-item__media {
	width: 64px;
	height: 50px;
	border-radius: var(--mb-radius);
	background: var(--mb-surface);
	overflow: hidden;
}

.mybike-dashboard-list-item__media img { width: 100%; height: 100%; object-fit: cover; }
.mybike-dashboard-list-item h3 { margin: 0 0 3px; font-size: .95rem; font-weight: 600; }
.mybike-dashboard-list-item span { font-weight: 700; }

/* Stats */
.mybike-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-4);
}

.mybike-stat-card {
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-stat-card__value {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--mb-ink);
}

.mybike-stat-card__label {
	display: block;
	margin-top: var(--mb-space-1);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mb-ink-soft);
}

/* Listings table */
.mybike-my-listings__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-3);
	margin-bottom: var(--mb-space-4);
}

.mybike-listings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.mybike-listings-table th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mb-line-strong);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mb-ink-soft);
	text-align: left;
}

.mybike-listings-table td {
	padding: 12px;
	border-bottom: 1px solid var(--mb-line);
	vertical-align: middle;
	text-align: left;
}

.mybike-listings-table tr:last-child td { border-bottom: 0; }
.mybike-listings-table__actions { width: 1%; white-space: nowrap; }

.mybike-action-icon-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mybike-action-icon {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
	color: var(--mb-ink-soft);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.mybike-action-icon:hover { border-color: var(--mb-line-strong); background: var(--mb-surface); color: var(--mb-ink); }
.mybike-action-icon--pause:hover { color: var(--mb-warning); }
.mybike-action-icon--resume:hover { color: var(--mb-success); }
.mybike-action-icon--sold:hover,
.mybike-action-icon--delete:hover { color: var(--mb-red-dark); }

/* Sell wizard */
/*
 * The wizard's step panels (add-listing.php) are shown/hidden by
 * dashboard.js toggling the native `hidden` attribute on each
 * .mybike-wizard__panel — never an `.is-active` class. That attribute
 * already hides the element on its own (the browser's default stylesheet
 * has `[hidden] { display: none }`), so no CSS is needed here at all.
 *
 * The previous rule pair — `.mybike-wizard__panel { display: none; }`
 * plus a `.is-active` variant to reveal it — silently broke the entire
 * sell wizard: that blanket `display: none` overrides the `hidden`
 * attribute regardless of its state (author CSS always beats the
 * browser's default UA rule), and nothing in dashboard.js ever added the
 * `.is-active` class this depended on. Every step, including the first,
 * rendered empty; "Publish Listing" was never reachable because there
 * was never a visible form to submit.
 */

.mybike-wizard-preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: var(--mb-space-2);
	margin-top: var(--mb-space-3);
}

.mybike-wizard-preview img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
}

.mybike-free-publish-card {
	display: flex;
	align-items: flex-start;
	gap: var(--mb-space-2);
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
}

.mybike-free-publish-card strong { display: flex; align-items: center; gap: var(--mb-space-2); }
.mybike-free-publish-card p { margin: var(--mb-space-1) 0 0; color: var(--mb-ink-soft); }

.mybike-featured-checkout-card {
	display: grid;
	gap: var(--mb-space-3);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-red-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-red-tint);
}

.mybike-featured-checkout-card p { margin: var(--mb-space-1) 0 0; color: var(--mb-ink-soft); }
.mybike-featured-checkout-card select { max-width: 360px; }
.mybike-pay-featured-btn { width: 100%; }

/* ==================================================================== */
/* 9. Offers + notifications                                             */
/* ==================================================================== */

.mybike-offer-list { display: grid; gap: var(--mb-space-2); }

.mybike-offer-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-4);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-offer-card h3 { margin: 0 0 var(--mb-space-2); font-size: 1rem; }
.mybike-offer-card strong { display: block; font-size: 1.2rem; font-weight: 700; }
.mybike-offer-card span { display: inline-block; margin-top: var(--mb-space-2); font-size: .82rem; color: var(--mb-ink-soft); }

.mybike-offer-actions { display: flex; gap: var(--mb-space-2); flex-wrap: wrap; }

/* No longer centers/caps its own width — it now sits inside
   .mybike-dashboard__main like every other account page, which already
   constrains the column. */
.mybike-notifications-page { padding-bottom: var(--mb-space-5); }

.mybike-notifications-page__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mb-space-4);
	margin-bottom: var(--mb-space-4);
}

.mybike-notification-list { display: grid; gap: var(--mb-space-2); }

.mybike-notification-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mb-space-3);
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-left: 3px solid transparent;
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-notification-item.is-unread { border-left-color: var(--mb-red); background: var(--mb-red-tint); }

.mybike-notification-item__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mb-radius);
	background: var(--mb-surface);
	color: var(--mb-ink);
}

.mybike-notification-item h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 600; }
.mybike-notification-item p { margin: 0 0 4px; font-size: .9rem; color: var(--mb-ink-soft); }
.mybike-notification-item time { font-size: .75rem; color: var(--mb-ink-faint); }

/* ==================================================================== */
/* 10. Messaging                                                         */
/* ==================================================================== */

.mybike-messages {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	overflow: hidden;
	background: var(--mb-paper);
}

.mybike-messages__list {
	border-right: 1px solid var(--mb-line);
	background: var(--mb-surface);
	overflow-y: auto;
	max-height: 70vh;
}

.mybike-conversation-list { list-style: none; margin: 0; padding: 0; }
.mybike-conversation-list__item { border-bottom: 1px solid var(--mb-line); }

/*
 * Only chrome shared by any button/link inside a conversation row lives
 * here — width, cursor, text color, no decoration. The button's own
 * internal layout (avatar + name/listing side by side) is owned entirely
 * by the child theme's marketplace.css, which matches the actual
 * .mybike-conversation-list__button markup dashboard.js builds. This
 * used to also set `display: block`, which — being one class plus one
 * element in specificity — silently beat marketplace.css's own
 * `display: flex` on the same button and stacked the avatar above the
 * name instead of beside it.
 */
.mybike-conversation-list__item a,
.mybike-conversation-list__item button {
	width: 100%;
	border: 0;
	background: none;
	color: var(--mb-ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
}

.mybike-conversation-list__item:hover { background: var(--mb-paper); }
.mybike-conversation-list__item.is-active { background: var(--mb-paper); box-shadow: inset 3px 0 0 var(--mb-red); }
.mybike-conversation-list__item.has-unread { font-weight: 700; }

.mybike-messages__thread {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 70vh;
}

.mybike-messages__thread-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-3);
	padding: var(--mb-space-3);
	border-bottom: 1px solid var(--mb-line);
}

.mybike-messages__back { display: none; }

.mybike-messages__bubbles {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
	padding: var(--mb-space-4);
	overflow-y: auto;
}

.mybike-message-bubble {
	max-width: 74%;
	padding: 10px var(--mb-space-3);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
	font-size: .92rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/*
 * dashboard.js builds these bubbles at runtime (renderMessages()) using
 * --mine / --theirs and a __text / __meta pair of children — not the
 * --own modifier or a <time> element this rule used to assume. Every
 * message bubble in the live messaging UI was rendering as the
 * "theirs" bystander style, own messages included, until this matched
 * the actual generated markup.
 */
.mybike-message-bubble--mine {
	align-self: flex-end;
	background: var(--mb-ink);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.mybike-message-bubble--theirs {
	align-self: flex-start;
	background: var(--mb-surface);
	color: var(--mb-ink);
	border-bottom-left-radius: 4px;
}

.mybike-message-bubble__text { white-space: pre-wrap; word-break: break-word; }

.mybike-message-bubble__meta {
	margin-top: 4px;
	font-size: .7rem;
	opacity: .7;
}

.mybike-message-form {
	display: flex;
	gap: var(--mb-space-2);
	padding: var(--mb-space-3);
	border-top: 1px solid var(--mb-line);
}

.mybike-message-form textarea {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 140px;
	padding: 10px var(--mb-space-3);
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	font: inherit;
	resize: vertical;
}

/* ==================================================================== */
/* 11. Dealers                                                           */
/* ==================================================================== */

.mybike-dealer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--mb-space-3);
}

.mybike-dealer-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
	color: var(--mb-ink);
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.mybike-dealer-card:hover { border-color: var(--mb-line-strong); box-shadow: var(--mb-lift); }

.mybike-dealer-card__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin-bottom: var(--mb-space-2);
}

.mybike-dealer-card__name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.mybike-dealer-card__location { font-size: .85rem; color: var(--mb-ink-soft); }
.mybike-dealer-card__count { font-size: .78rem; color: var(--mb-ink-faint); }

.mybike-dealer-storefront__about { max-width: 70ch; line-height: 1.7; color: var(--mb-ink-soft); }

.mybike-dealer-storefront__contact,
.mybike-dealer-storefront__location {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-3);
	margin-top: var(--mb-space-3);
	font-size: .9rem;
	color: var(--mb-ink-soft);
}

.mybike-dealer-storefront__listings { margin-top: var(--mb-space-5); }

.mybike-dealer-image-upload {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	padding: var(--mb-space-3);
	border: 1px dashed var(--mb-line-strong);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-surface);
}

.mybike-dealer-image-upload__input { flex: 1 1 auto; font-size: .88rem; }

/* ==================================================================== */
/* 12. Feedback: toasts, skeletons, loading                              */
/* ==================================================================== */

.mybike-toast-stack {
	position: fixed;
	z-index: 100000;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
	width: min(420px, calc(100vw - 32px));
	pointer-events: none;
}

.mybike-toast {
	padding: 12px var(--mb-space-3);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-ink);
	color: #fff;
	font-size: .9rem;
	box-shadow: var(--mb-lift-strong);
	animation: mybike-toast-in .22s ease;
}

.mybike-toast--error { background: var(--mb-red-dark); }
.mybike-toast--success { background: var(--mb-success); }

@keyframes mybike-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.mybike-skeleton-card {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	overflow: hidden;
	background: var(--mb-paper);
}

.mybike-skeleton-card::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background: linear-gradient(90deg, var(--mb-surface) 25%, var(--mb-surface-2) 37%, var(--mb-surface) 63%);
	background-size: 400% 100%;
	animation: mybike-shimmer 1.3s ease infinite;
}

@keyframes mybike-shimmer {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

.mybike-is-loading { opacity: .55; pointer-events: none; }

/* ==================================================================== */
/* 13. Accessibility                                                     */
/* ==================================================================== */

/* One visible focus treatment for every interactive element, instead of
   relying on each component to remember its own. */
.mybike-btn:focus-visible,
.mybike-card-action:focus-visible,
.mybike-action-icon:focus-visible,
.mybike-card__title a:focus-visible,
.mybike-card__link:focus-visible,
.mybike-account-nav a:focus-visible,
.mybike-gallery__thumb:focus-visible,
.mybike-dashboard-action:focus-visible,
.mybike-dealer-card:focus-visible,
.mybike-pagination a:focus-visible {
	outline: 2px solid var(--mb-focus);
	outline-offset: 2px;
}

.mybike-card:focus-within { border-color: var(--mb-line-strong); }

.mybike-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	padding: 10px var(--mb-space-3);
	background: var(--mb-ink);
	color: #fff;
}

.mybike-skip-link:focus { left: 8px; top: 8px; }

.mybike-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.mybike-card,
	.mybike-card__image,
	.mybike-card-action,
	.mybike-dashboard-action,
	.mybike-toast,
	.mybike-skeleton-card::before {
		transition: none !important;
		animation: none !important;
	}
	.mybike-card:hover,
	.mybike-dashboard-action:hover { transform: none; }
	.mybike-card:hover .mybike-card__image { transform: none; }
}

/* ==================================================================== */
/* 14. Responsive                                                        */
/* ==================================================================== */

@media (max-width: 1024px) {
	.mybike-listing__layout { grid-template-columns: minmax(0, 1fr); }
	.mybike-listing__summary { position: static; }
	.mybike-dashboard { grid-template-columns: minmax(0, 1fr); }
	.mybike-account-nav {
		position: static;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
	}
}

@media (max-width: 860px) {
	.mybike-search-page { grid-template-columns: minmax(0, 1fr); }

	/* Filters become a full-screen drawer rather than a squashed column. */
	.mybike-filters {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 10000;
		border: 0;
		border-radius: 0;
		overflow-y: auto;
		padding: var(--mb-space-4);
	}

	.mybike-filters.is-open { display: block; }
	.mybike-filter-drawer-toggle { display: inline-flex; }

	.mybike-messages { grid-template-columns: minmax(0, 1fr); }
	.mybike-messages__list { border-right: 0; border-bottom: 1px solid var(--mb-line); max-height: 40vh; }
	/* Mobile list<->thread switching (.mybike-messages.is-thread-open
	   hiding .mybike-messages__list) is handled in the child theme's
	   responsive.css, matching how dashboard.js actually toggles it —
	   on the .mybike-messages container, not on the list itself. */
	.mybike-messages__back { display: inline-flex; }

	.mybike-spec-list { grid-template-columns: minmax(0, 1fr); }
	.mybike-offer-card { flex-direction: column; align-items: flex-start; }
	.mybike-notifications-page__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
	.mybike-section { padding: var(--mb-space-5) 0; }
	.mybike-notification-item { grid-template-columns: 36px minmax(0, 1fr); }
	.mybike-notification-item > .mybike-btn { grid-column: 2; justify-self: start; }
	.mybike-dashboard-list-item { grid-template-columns: 54px minmax(0, 1fr); }
	.mybike-dashboard-list-item > .mybike-btn { grid-column: 2; justify-self: start; }

	/* A 6-column table at 375px is unreadable; reflow into stacked rows. */
	.mybike-listings-table thead { display: none; }
	.mybike-listings-table tr {
		display: grid;
		gap: 4px;
		padding: var(--mb-space-3) 0;
		border-bottom: 1px solid var(--mb-line);
	}
	.mybike-listings-table td { padding: 0; border: 0; }
	.mybike-listings-table__actions { width: auto; white-space: normal; }
}

/* ==================================================================== */
/* 15. Auxiliary pages: compare, offers list, saved searches, panels     */
/* ==================================================================== */

/*
 * A small set of pages (compare, offers, saved searches, notifications)
 * are built by echoing HTML directly from PHP rather than through a
 * template file. They share this handful of classes, none of which had
 * any CSS at all before 10.2 — each one rendered as plain unstyled text.
 */

.mybike-eyebrow,
.mybike-section-heading > span:first-child {
	display: inline-block;
	margin-bottom: var(--mb-space-2);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mb-red);
}

.mybike-section-heading {
	max-width: 640px;
	margin: 0 auto var(--mb-space-5);
	text-align: center;
}

.mybike-section-heading h1 {
	margin: 0 0 var(--mb-space-2);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

.mybike-section-heading p { margin: 0; color: var(--mb-ink-soft); }

/* Simple fallback panel (e.g. "please log in") on pages that don't go
   through login-required.php. */
.mybike-panel {
	max-width: 480px;
	margin: var(--mb-space-6) auto;
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
	text-align: center;
	color: var(--mb-ink-soft);
}

.mybike-offers,
.mybike-saved-searches {
	max-width: 1000px;
	margin-inline: auto;
	padding: var(--mb-space-3) 0 var(--mb-space-6);
}

.mybike-saved-search-list { display: grid; gap: var(--mb-space-2); }

.mybike-saved-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-4);
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-lg);
	background: var(--mb-paper);
}

.mybike-saved-search strong { display: block; font-size: 1rem; }
.mybike-saved-search small { display: block; margin-top: 4px; color: var(--mb-ink-soft); }
.mybike-saved-search > div:last-child { display: flex; gap: var(--mb-space-2); flex-wrap: wrap; }

.mybike-compare-page { padding: var(--mb-space-5) 0 var(--mb-space-6); }

.mybike-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mb-space-3);
}

/* Glyph icons: a lighter alternative to the SVG set for a few
   text-only contexts (notification bell, empty-state illustration). */
.mybike-icon {
	display: inline-block;
	position: relative;
	width: 22px;
	height: 22px;
	vertical-align: middle;
}

.mybike-icon--bell::before {
	content: "\25C9";
	font-size: 15px;
	opacity: .85;
}

/* The favourite toggle also appears as a full-width secondary button on
   the single listing page, not just as a round card overlay action —
   .mybike-card-action already turns red on .is-active, but plain
   .mybike-btn--secondary had no matching state, so saving a favourite
   from the listing page itself gave no visual confirmation at all. */
.mybike-btn.mybike-favorite-toggle.is-active {
	background: var(--mb-red-tint);
	border-color: var(--mb-red);
	color: var(--mb-red-dark);
}

@media (max-width: 700px) {
	.mybike-saved-search { flex-direction: column; align-items: flex-start; }
	.mybike-saved-search > div:last-child { width: 100%; }
	.mybike-saved-search > div:last-child .mybike-btn { flex: 1; }
}