/**
 * GMP Listings — front-end styles.
 *
 * Inherits the tokens declared by gmp-core.css, which read from the theme's
 * theme.json custom properties. No framework, no page builder.
 *
 * Sections:
 *   1. Page shell and hero
 *   2. Archive layout, toolbar, chips
 *   3. Filter panel (and its mobile drawer)
 *   4. Listing cards
 *   5. Single listing: header, gallery, panels, aside
 *   6. Submission wizard
 *   7. Pagination and empty states
 */

/* ------------------------------------------------------- 1. Shell and hero */

.gmp-archive,
.gmp-single {
	display: block;
	padding-bottom: var( --gmp-space-7 );
}

/*
 * A full-bleed band: the template renders as a direct child of .wp-site-blocks,
 * so the tint runs edge to edge and .gmp-wide re-constrains the contents.
 */
.gmp-hero {
	background: linear-gradient(
		180deg,
		color-mix( in srgb, var( --gmp-accent ) 10%, var( --gmp-surface ) ),
		var( --gmp-surface )
	);
	border-bottom: 1px solid var( --gmp-border );
	margin-bottom: var( --gmp-space-6 );
	padding: var( --gmp-space-6 ) var( --gmp-space-4 ) var( --gmp-space-5 );
}

.gmp-hero__title {
	font-size: clamp( 1.75rem, 1.2rem + 2vw, 2.75rem );
	line-height: 1.15;
	margin: 0;
}

.gmp-hero__lede {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-lg );
	margin: var( --gmp-space-3 ) 0 0;
	max-width: 60ch;
}

.gmp-hero__search {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	margin-top: var( --gmp-space-5 );
	max-width: 42rem;
}

.gmp-hero__search input[type="search"] {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border-strong );
	border-radius: var( --gmp-radius );
	color: inherit;
	flex: 1 1 16rem;
	font: inherit;
	min-width: 0;
	padding: 0.7rem 0.9rem;
}

.gmp-hero__search input[type="search"]:focus-visible {
	border-color: var( --gmp-accent );
	box-shadow: var( --gmp-focus );
	outline: none;
}

.gmp-breadcrumb {
	color: var( --gmp-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: var( --gmp-text-sm );
	gap: var( --gmp-space-2 );
	margin-bottom: var( --gmp-space-3 );
}

.gmp-breadcrumb a {
	color: inherit;
}

.gmp-eyebrow {
	color: var( --gmp-accent );
	font-size: var( --gmp-text-xs );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------- 2. Archive */

.gmp-archive__layout {
	display: grid;
	gap: var( --gmp-space-6 );
	padding-inline: var( --gmp-space-4 );
}

@media ( min-width: 60rem ) {
	.gmp-archive__layout {
		align-items: start;
		grid-template-columns: 18rem minmax( 0, 1fr );
	}

	.gmp-archive__sidebar {
		position: sticky;
		top: var( --gmp-space-4 );
	}
}

/* A grid item defaults to min-width:auto, which lets a wide table push the
 * column past its track and the whole layout sideways. */
.gmp-archive__results {
	min-width: 0;
}

.gmp-report__form {
	margin-top: var( --gmp-space-3 );
}

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

.gmp-toolbar__count {
	color: var( --gmp-muted );
	margin: 0;
}

.gmp-toolbar__count strong {
	color: var( --gmp-ink );
	font-size: var( --gmp-text-lg );
}

.gmp-toolbar__sort {
	align-items: center;
	display: flex;
	gap: var( --gmp-space-2 );
}

.gmp-toolbar__sort label {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	white-space: nowrap;
}

.gmp-toolbar__sort select {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border-strong );
	border-radius: var( --gmp-radius-sm );
	color: inherit;
	font: inherit;
	font-size: var( --gmp-text-sm );
	padding: 0.4rem 0.6rem;
}

.gmp-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	list-style: none;
	margin: 0 0 var( --gmp-space-4 );
	padding: 0;
}

.gmp-chip--removable .gmp-chip__label {
	color: var( --gmp-muted );
}

.gmp-chip--removable .gmp-chip__label::after {
	content: ":";
}

.gmp-chip--removable .gmp-chip__value {
	font-weight: 600;
}

.gmp-chip__x {
	color: var( --gmp-muted );
	font-size: 1.1em;
	line-height: 1;
}

.gmp-chip--removable:hover .gmp-chip__x,
.gmp-chip--removable:focus-visible .gmp-chip__x {
	color: var( --gmp-danger );
}

.gmp-chip--clear {
	background: transparent;
	border-style: dashed;
	color: var( --gmp-muted );
}

/* ---------------------------------------------------------- 3. Filters */

.gmp-filters,
.gmp-save-search {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	padding: var( --gmp-space-4 );
}

.gmp-save-search {
	background: var( --gmp-surface-alt );
	border-style: dashed;
	margin-top: var( --gmp-space-4 );
}

.gmp-filters__head {
	align-items: baseline;
	border-bottom: 1px solid var( --gmp-border );
	display: flex;
	gap: var( --gmp-space-3 );
	justify-content: space-between;
	margin-bottom: var( --gmp-space-4 );
	padding-bottom: var( --gmp-space-3 );
}

.gmp-filters__title,
.gmp-save-search__title {
	font-size: var( --gmp-text-lg );
	margin: 0;
}

.gmp-save-search__body {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	margin: var( --gmp-space-1 ) 0 var( --gmp-space-4 );
}

.gmp-filters .gmp-field,
.gmp-save-search .gmp-field {
	margin-bottom: var( --gmp-space-4 );
}

.gmp-filters .gmp-field > label,
.gmp-filters .gmp-field--range legend {
	font-size: var( --gmp-text-sm );
	font-weight: 600;
}

.gmp-field--range {
	border: 0;
	margin: 0 0 var( --gmp-space-4 );
	padding: 0;
}

.gmp-field--range legend {
	margin-bottom: var( --gmp-space-1 );
	padding: 0;
}

.gmp-field--range .gmp-unit {
	font-weight: 400;
}

.gmp-field__pair {
	align-items: center;
	display: flex;
	gap: var( --gmp-space-2 );
}

.gmp-field__pair input {
	min-width: 0;
	width: 100%;
}

.gmp-field__dash {
	color: var( --gmp-faint );
}

.gmp-button--block {
	width: 100%;
}

/*
 * On a phone the filter panel is a disclosure rather than a column: showing a
 * dozen controls above the results would push the listings off the screen.
 */
.gmp-filters__toggle {
	display: none;
	width: 100%;
}

@media ( max-width: 59.999rem ) {
	.gmp-filters__toggle {
		display: inline-flex;
	}

	.gmp-filters__panel {
		display: none;
	}

	.gmp-filters__panel.is-open {
		display: block;
		margin-top: var( --gmp-space-3 );
	}
}

/* ------------------------------------------------------------ 4. Cards */

.gmp-cards {
	display: grid;
	gap: var( --gmp-space-5 );
	grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
}

/*
 * Rows, for archives whose results are text rather than stock -- jobs. A card
 * grid is built around a photograph and a price; an advert has neither, so the
 * same grid renders a screen of mostly-empty boxes with "Price not stated"
 * where the money should be. A list reads the way a job board is read: title
 * first, the facts that decide whether to keep reading pinned to the right.
 */
.gmp-rows {
	display: flex;
	flex-direction: column;
	gap: var( --gmp-space-3 );
}

.gmp-row {
	align-items: flex-start;
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius-sm );
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-3 ) var( --gmp-space-5 );
	justify-content: space-between;
	padding: var( --gmp-space-4 );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gmp-row:hover,
.gmp-row:focus-within {
	border-color: var( --gmp-accent );
	box-shadow: 0 1px 10px rgba( 0, 0, 0, 0.06 );
}

.gmp-row__main {
	flex: 1 1 22rem;
	min-width: 0;
}

.gmp-row__title {
	font-size: var( --gmp-text-lg, 1.125rem );
	margin: 0 0 var( --gmp-space-2 );
}

.gmp-row__title a {
	color: inherit;
	text-decoration: none;
}

.gmp-row__title a:hover,
.gmp-row__title a:focus-visible {
	text-decoration: underline;
}

.gmp-row__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	margin: 0 0 var( --gmp-space-2 );
}

/* Static chips are labels, not links: no hover affordance on something inert. */
.gmp-chip--static {
	cursor: default;
}

.gmp-row__excerpt {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	margin: 0;
}

/*
 * Laid out as a row of pairs rather than a grid of them. As a grid the three
 * facts stacked into a single tall column and space-between threw it against
 * the far edge, so every result was three lines of text on the left and three
 * on the right with a chasm between -- a 190px-tall row carrying two lines of
 * information.
 */
.gmp-row__facts {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 ) var( --gmp-space-5 );
	margin: 0;
}

.gmp-row__fact {
	min-width: 5rem;
}

.gmp-row__fact dt {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-xs, 0.75rem );
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gmp-row__fact dd {
	font-weight: 600;
	margin: 0;
}

@media ( max-width: 40rem ) {
	.gmp-row__facts {
		width: 100%;
	}
}

.gmp-card--listing {
	position: relative;
	transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.gmp-card--listing:hover,
.gmp-card--listing:focus-within {
	border-color: var( --gmp-accent );
	box-shadow: var( --gmp-shadow );
	transform: translateY( -2px );
}

.gmp-card__media {
	background: var( --gmp-surface-alt );
	position: relative;
}

.gmp-card__media img,
.gmp-card__placeholder {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gmp-card__placeholder {
	background:
		repeating-linear-gradient( 135deg, transparent, transparent 12px, color-mix( in srgb, var( --gmp-border ) 55%, transparent ) 12px, color-mix( in srgb, var( --gmp-border ) 55%, transparent ) 24px ),
		var( --gmp-surface-alt );
}

.gmp-card__kind,
.gmp-card__status {
	backdrop-filter: blur( 4px );
	left: var( --gmp-space-3 );
	position: absolute;
	top: var( --gmp-space-3 );
}

.gmp-card__kind {
	background: color-mix( in srgb, var( --gmp-surface ) 88%, transparent );
	border-radius: var( --gmp-radius-pill );
	color: var( --gmp-ink );
	font-size: var( --gmp-text-xs );
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.65rem;
}

.gmp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --gmp-space-3 );
	padding: var( --gmp-space-4 );
}

.gmp-card__title {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0;
}

.gmp-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the whole card is the target, but only the title is read as
 * one by a screen reader, and the favourite button still sits above it. */
.gmp-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.gmp-card__title a:hover,
.gmp-card__title a:focus-visible {
	color: var( --gmp-accent );
}

.gmp-card__specs {
	display: grid;
	gap: var( --gmp-space-2 ) var( --gmp-space-3 );
	grid-template-columns: repeat( auto-fit, minmax( 4.5rem, 1fr ) );
	margin: 0;
}

.gmp-card__spec dt {
	color: var( --gmp-faint );
	font-size: var( --gmp-text-xs );
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.gmp-card__spec dd {
	font-size: var( --gmp-text-sm );
	font-weight: 600;
	margin: 0;
}

.gmp-card__excerpt {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	margin: 0;
}

.gmp-card__foot {
	align-items: baseline;
	border-top: 1px solid var( --gmp-border );
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-1 ) var( --gmp-space-3 );
	justify-content: space-between;
	margin-top: auto;
	padding-top: var( --gmp-space-3 );
}

.gmp-card__price {
	font-size: var( --gmp-text-lg );
	font-weight: 700;
	margin: 0;
}

.gmp-card__price.is-muted {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	font-weight: 500;
}

.gmp-card__place {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	margin: 0;
}

.gmp-card__place span {
	color: var( --gmp-faint );
	font-size: 0.6em;
	vertical-align: middle;
}

/* Favourite */

.gmp-favourite {
	align-items: center;
	background: color-mix( in srgb, var( --gmp-surface ) 88%, transparent );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius-pill );
	color: var( --gmp-muted );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: var( --gmp-space-2 );
	justify-content: center;
	line-height: 1;
	padding: 0.45rem;
	position: absolute;
	right: var( --gmp-space-3 );
	top: var( --gmp-space-3 );
	z-index: 2;
}

.gmp-favourite:hover,
.gmp-favourite:focus-visible {
	border-color: var( --gmp-accent );
	color: var( --gmp-accent );
}

.gmp-favourite.is-saved {
	background: var( --gmp-accent );
	border-color: var( --gmp-accent );
	color: var( --gmp-accent-ink );
}

.gmp-favourite__icon {
	font-size: 1rem;
}

.gmp-favourite[disabled] {
	opacity: 0.6;
}

/* In the aside it is a normal full-width button, not a floating pill. */
.gmp-favourite--wide {
	border-radius: var( --gmp-radius );
	padding: 0.7rem 1.35rem;
	position: static;
	width: 100%;
}

/* ----------------------------------------------------------- 5. Single */

.gmp-single__header {
	background: var( --gmp-surface-alt );
	border-bottom: 1px solid var( --gmp-border );
	margin-bottom: var( --gmp-space-6 );
	padding: var( --gmp-space-5 ) var( --gmp-space-4 );
}

.gmp-single__headline {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-4 );
	justify-content: space-between;
}

.gmp-single__identity {
	display: flex;
	flex-direction: column;
	gap: var( --gmp-space-2 );
}

.gmp-single__title {
	font-size: clamp( 1.5rem, 1.1rem + 1.6vw, 2.25rem );
	line-height: 1.15;
	margin: 0;
}

.gmp-single__place {
	color: var( --gmp-muted );
	margin: 0;
}

.gmp-single__place span {
	color: var( --gmp-faint );
	font-size: 0.6em;
	vertical-align: middle;
}

.gmp-single__price {
	font-size: clamp( 1.35rem, 1.1rem + 1vw, 1.9rem );
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}

.gmp-single__price.is-muted {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-lg );
	font-weight: 500;
}

.gmp-details {
	padding-inline: var( --gmp-space-4 );
}

/* Gallery viewer */

.gmp-viewer {
	margin-bottom: var( --gmp-space-6 );
}

.gmp-viewer__stage {
	background: var( --gmp-surface-alt );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	margin: 0;
	overflow: hidden;
}

.gmp-viewer__stage img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gmp-viewer__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	list-style: none;
	margin: var( --gmp-space-2 ) 0 0;
	padding: 0;
}

.gmp-viewer__thumb {
	border: 2px solid transparent;
	border-radius: var( --gmp-radius-sm );
	display: block;
	overflow: hidden;
}

.gmp-viewer__thumb img {
	display: block;
	height: 4rem;
	object-fit: cover;
	width: 5.5rem;
}

.gmp-viewer__thumb.is-current,
.gmp-viewer__thumb:hover,
.gmp-viewer__thumb:focus-visible {
	border-color: var( --gmp-accent );
}

.gmp-details__grid {
	display: grid;
	gap: var( --gmp-space-6 );
}

@media ( min-width: 60rem ) {
	.gmp-details__grid {
		align-items: start;
		grid-template-columns: minmax( 0, 1fr ) 21rem;
	}

	.gmp-details__aside {
		position: sticky;
		top: var( --gmp-space-4 );
	}
}

.gmp-details__main {
	display: flex;
	flex-direction: column;
	gap: var( --gmp-space-5 );
	min-width: 0;
}

.gmp-panel {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	padding: var( --gmp-space-5 );
}

.gmp-panel__title {
	border-bottom: 1px solid var( --gmp-border );
	font-size: var( --gmp-text-lg );
	margin: 0 0 var( --gmp-space-4 );
	padding-bottom: var( --gmp-space-3 );
}

.gmp-prose > :first-child { margin-top: 0; }
.gmp-prose > :last-child { margin-bottom: 0; }

/* Specification list — two columns of label/value pairs that stay aligned. */
.gmp-speclist {
	display: grid;
	gap: 0;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	margin: 0;
}

.gmp-speclist__row {
	border-bottom: 1px solid var( --gmp-border );
	display: flex;
	gap: var( --gmp-space-3 );
	justify-content: space-between;
	padding: 0.55rem 0;
}

.gmp-speclist__row dt {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
}

.gmp-speclist__row dd {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

@media ( min-width: 40rem ) {
	.gmp-speclist {
		column-gap: var( --gmp-space-6 );
	}
}

.gmp-documents {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gmp-documents li + li {
	border-top: 1px solid var( --gmp-border );
}

/* Chosen in the file input, not uploaded yet (filePreview()). */
.gmp-documents--pending li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-3 );
	padding: 0.6rem 0;
}

.gmp-documents__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.gmp-documents__pending {
	color: var( --gmp-muted, #6b7280 );
	font-size: var( --gmp-text-xs );
}

.gmp-documents a {
	align-items: center;
	display: flex;
	gap: var( --gmp-space-3 );
	padding: 0.6rem 0;
}

.gmp-documents__icon {
	background: var( --gmp-danger-soft );
	border-radius: var( --gmp-radius-sm );
	color: var( --gmp-danger );
	font-size: var( --gmp-text-xs );
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.4rem;
}

.gmp-details__card {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	box-shadow: var( --gmp-shadow-sm );
	display: flex;
	flex-direction: column;
	gap: var( --gmp-space-4 );
	padding: var( --gmp-space-5 );
}

.gmp-details__price {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.gmp-details__price.is-muted {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-lg );
	font-weight: 500;
}

.gmp-details__contact {
	border-top: 1px solid var( --gmp-border );
	padding-top: var( --gmp-space-4 );
}

.gmp-details__contact-title {
	font-size: var( --gmp-text-sm );
	letter-spacing: 0.04em;
	margin: 0 0 var( --gmp-space-2 );
	text-transform: uppercase;
}

.gmp-details__contact p {
	margin: 0 0 var( --gmp-space-1 );
}

.gmp-report {
	margin-top: var( --gmp-space-4 );
}

.gmp-report summary {
	color: var( --gmp-muted );
	cursor: pointer;
	font-size: var( --gmp-text-sm );
}

/* --------------------------------------------------------- 6. Wizard */

/* The step bar, wizard width and review table live in gmp-core.css, which the
 * job wizard also loads. What follows is listing-specific. */

/* Wizard gallery (upload step) */

.gmp-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	list-style: none;
	margin: 0 0 var( --gmp-gap );
	padding: 0;
}

.gmp-gallery__item {
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	overflow: hidden;
	position: relative;
}

.gmp-gallery__item.is-dragging {
	opacity: 0.5;
}

/* Chosen in the file input, not uploaded yet (imagePreview()). */
.gmp-gallery__item.is-pending {
	border-style: dashed;
}

.gmp-gallery__item.is-over {
	opacity: 0.35;
}

/* A chosen file the browser cannot draw, shown by name. */
.gmp-gallery__name {
	display: block;
	font-size: var( --gmp-text-xs );
	overflow: hidden;
	padding: 0.5rem 0.5rem 1.6rem;
	text-overflow: ellipsis;
	word-break: break-all;
}

.gmp-gallery img {
	display: block;
	height: auto;
	max-width: 10rem;
}

.gmp-gallery__badge {
	background: rgba( 0, 0, 0, 0.7 );
	bottom: 0;
	color: #fff;
	font-size: var( --gmp-text-xs );
	left: 0;
	padding: 0.15rem 0.4rem;
	position: absolute;
	right: 0;
	text-align: center;
}

.gmp-gallery__remove {
	background: rgba( 0, 0, 0, 0.6 );
	border: 0;
	border-radius: var( --gmp-radius-pill );
	color: #fff;
	cursor: pointer;
	height: 1.6rem;
	line-height: 1;
	position: absolute;
	right: 0.25rem;
	top: 0.25rem;
	width: 1.6rem;
}

/* ------------------------------------------- 7. Pagination and empty state */

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

.gmp-pagination .page-numbers {
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius-sm );
	color: inherit;
	display: inline-block;
	min-width: 2.4rem;
	padding: 0.45rem 0.7rem;
	text-align: center;
	text-decoration: none;
}

.gmp-pagination .page-numbers:hover,
.gmp-pagination .page-numbers:focus-visible {
	border-color: var( --gmp-accent );
	color: var( --gmp-accent );
}

.gmp-pagination .page-numbers.current {
	background: var( --gmp-accent );
	border-color: var( --gmp-accent );
	color: var( --gmp-accent-ink );
}

.gmp-pagination .page-numbers.dots {
	border-color: transparent;
}

.gmp-empty-state {
	border: 1px dashed var( --gmp-border-strong );
	border-radius: var( --gmp-radius );
	padding: var( --gmp-space-7 ) var( --gmp-space-5 );
	text-align: center;
}

.gmp-empty-state__title {
	font-size: var( --gmp-text-xl );
	font-weight: 600;
	margin: 0 0 var( --gmp-space-2 );
}

.gmp-empty-state__body {
	color: var( --gmp-muted );
	margin: 0 0 var( --gmp-space-4 );
}

@media ( prefers-reduced-motion: reduce ) {
	.gmp-card--listing {
		transition: none;
	}

	.gmp-card--listing:hover,
	.gmp-card--listing:focus-within {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Section hub
 *
 * The section landing pages (/vessel/, /parts-equipment/, ...) had no styles
 * at all: the markup shipped in templates/listing/hub.php from the start, but
 * nothing here ever matched it, and Assets::maybe_enqueue() did not load this
 * file on a hub page either. Both are fixed; these are the rules.
 * ---------------------------------------------------------------------- */

.gmp-hub {
	background: var( --gmp-surface-alt );
	border-bottom: 1px solid var( --gmp-border );
	padding: var( --gmp-space-7 ) var( --gmp-space-4 );
}

.gmp-hub__inner {
	margin: 0 auto;
	max-width: var( --gmp-container );
	text-align: center;
}

.gmp-hub__lede {
	color: var( --gmp-accent );
	font-size: var( --gmp-text-sm );
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 var( --gmp-space-2 );
	text-transform: uppercase;
}

.gmp-hub__title {
	margin: 0;
}

.gmp-hub__rule {
	border: 0;
	border-top: 1px solid var( --gmp-border );
	margin: var( --gmp-space-5 ) auto;
	max-width: 6rem;
}

.gmp-hub__cta {
	margin: 0 0 var( --gmp-space-5 );
}

.gmp-hub__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
	justify-content: center;
}

.gmp-hub__tab {
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius-pill );
	color: inherit;
	padding: var( --gmp-space-2 ) var( --gmp-space-4 );
	text-decoration: none;
}

.gmp-hub__tab:hover,
.gmp-hub__tab:focus-visible {
	border-color: var( --gmp-accent );
	color: var( --gmp-accent );
}

.gmp-hub__tab.is-active {
	background: var( --gmp-accent );
	border-color: var( --gmp-accent );
	color: var( --gmp-accent-ink );
}

/* Search bar --------------------------------------------------------- */

.gmp-hub__searchwrap {
	margin: 0 auto;
	max-width: var( --gmp-container );
	padding: var( --gmp-space-5 ) var( --gmp-space-4 ) 0;
}

.gmp-hub__search {
	background: var( --gmp-surface );
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	box-shadow: var( --gmp-shadow-sm );
	display: grid;
	gap: var( --gmp-space-3 );
	grid-template-columns: 1fr;
	padding: var( --gmp-space-3 );
}

@media ( min-width: 48rem ) {
	.gmp-hub__search {
		grid-template-columns: 2fr 1fr 1fr auto;
	}
}

.gmp-hub__field {
	margin: 0;
	position: relative;
}

.gmp-hub__field input,
.gmp-hub__field select {
	width: 100%;
}

.gmp-hub__field .gmp-hub__icon + input {
	padding-left: var( --gmp-space-7 );
}

.gmp-hub__icon {
	color: var( --gmp-muted );
	left: var( --gmp-space-3 );
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 1.25rem;
}

.gmp-hub__icon svg {
	display: block;
	height: auto;
	width: 100%;
}

/* Segment cards ------------------------------------------------------ */

.gmp-segments {
	margin: 0 auto;
	max-width: var( --gmp-container );
	padding: var( --gmp-space-6 ) var( --gmp-space-4 ) 0;
}

.gmp-segments__grid {
	display: grid;
	gap: var( --gmp-space-4 );
	grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );
}

.gmp-segment {
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: var( --gmp-space-2 );
	overflow: hidden;
	padding-bottom: var( --gmp-space-4 );
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gmp-segment:hover,
.gmp-segment:focus-visible {
	border-color: var( --gmp-accent );
	box-shadow: var( --gmp-shadow-sm );
}

.gmp-segment__media {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.gmp-segment__media--empty {
	background: var( --gmp-surface-alt );
}

.gmp-segment__title {
	font-weight: 600;
	padding: 0 var( --gmp-space-4 );
}

.gmp-segment__text {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
	padding: 0 var( --gmp-space-4 );
}

/* Listing grid ------------------------------------------------------- */

.gmp-hub__listings {
	margin: 0 auto;
	max-width: var( --gmp-container );
	padding: var( --gmp-space-7 ) var( --gmp-space-4 );
}

.gmp-hub__listings-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-3 );
	justify-content: space-between;
	margin-bottom: var( --gmp-space-5 );
}

.gmp-hub__listings-title {
	margin: 0;
}

.gmp-hub__listings-all {
	font-size: var( --gmp-text-sm );
	font-weight: 600;
}

.gmp-hub__listings--empty {
	text-align: center;
}

.gmp-hub__listings--empty .gmp-notice {
	display: inline-block;
	margin-top: var( --gmp-space-4 );
	text-align: left;
}

@media ( prefers-reduced-motion: reduce ) {
	.gmp-segment {
		transition: none;
	}
}

/* ------------------------------------------------ My company (dashboard) */

.gmp-company__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
}

.gmp-company__head h2 {
	margin: 0;
}

.gmp-company__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-2 );
}

/* Marks a detail kept in step with the directory profile. */
.gmp-company__shared {
	background: var( --gmp-surface-alt );
	border: 1px solid var( --gmp-border );
	border-radius: 999px;
	color: var( --gmp-muted );
	font-size: 12px;
	font-weight: 600;
	margin-left: 6px;
	padding: 1px 8px;
	vertical-align: middle;
}

.gmp-company__form {
	max-width: 36rem;
}

/* Who is selling and how to reach them, top of the listing's aside (Seller_Contact). */
.gmp-seller-contact {
	border-bottom: 1px solid var( --gmp-border );
	margin-bottom: var( --gmp-space-4 );
	padding-bottom: var( --gmp-space-4 );
}

.gmp-seller-contact__title {
	font-size: var( --gmp-text-sm );
	letter-spacing: 0.04em;
	margin: 0 0 var( --gmp-space-2 );
	text-transform: uppercase;
}

.gmp-seller-contact__name {
	margin: 0 0 var( --gmp-space-2 );
}

.gmp-seller-contact__company {
	color: var( --gmp-muted );
	display: block;
	font-size: var( --gmp-text-sm );
}

.gmp-seller-contact__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gmp-seller-contact__lines li {
	margin: 0 0 var( --gmp-space-1 );
	overflow-wrap: anywhere;
}

.gmp-seller-contact__label {
	color: var( --gmp-muted );
	display: inline-block;
	font-size: var( --gmp-text-sm );
	min-width: 3.5rem;
}

.gmp-seller-contact__note,
.gmp-seller-contact__signin {
	font-size: var( --gmp-text-sm );
	margin: var( --gmp-space-2 ) 0 0;
}

.gmp-seller-contact__note {
	color: var( --gmp-muted );
}

/* The two ways to pay, one under the other (Buy_Panel). */
.gmp-buy__option + .gmp-buy__option {
	border-top: 1px solid var( --gmp-border );
	margin-top: var( --gmp-space-3 );
	padding-top: var( --gmp-space-3 );
}

.gmp-buy__option-title {
	font-size: 1rem;
	margin: 0 0 var( --gmp-space-1 );
}