/**
 * Listing Detail — Premium single listing page styles.
 */

.listora-detail {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* ─── Breadcrumb ─── */

.listora-detail__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--listora-space-4);
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-faint);
}

.listora-detail__breadcrumb li + li::before {
	content: '›';
	margin-inline-end: 0.3em;
}

.listora-detail__breadcrumb a {
	color: var(--listora-fg-muted);
	text-decoration: none;
}

.listora-detail__breadcrumb a:hover {
	text-decoration: underline;
}

.listora-detail__breadcrumb [aria-current] {
	color: var(--listora-fg-default);
	font-weight: var(--listora-weight-medium);
}

/* ─── Gallery Mosaic (Airbnb-style) ─── */

.listora-detail__gallery {
	margin-block-end: var(--listora-space-6);
	border-radius: var(--listora-radius-xl);
	overflow: hidden;
	position: relative;
}

.listora-detail__gallery-mosaic {
	display: grid;
	grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
	height: 420px;
	gap: 4px;
}

.listora-detail__gallery-mosaic-item {
	overflow: hidden;
	cursor: pointer;
}

.listora-detail__gallery-mosaic-item:first-child {
	grid-row: 1 / 3;
}

.listora-detail__gallery-mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--listora-transition-slow);
}

.listora-detail__gallery-mosaic-item:hover img {
	transform: scale(1.03);
}

.listora-detail__gallery-show-all {
	position: absolute;
	bottom: var(--listora-space-4);
	inset-inline-end: var(--listora-space-4);
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--listora-radius-md);
	padding: 0.4rem 0.8rem;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-semibold);
	border: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	z-index: 5;
	transition: background var(--listora-transition-fast);
}

.listora-detail__gallery-show-all:hover {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

/* Legacy gallery layout (fallback) */
.listora-detail__gallery-main {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--listora-bg-muted);
}

.listora-detail__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery thumb strip — image-only buttons. Specificity-boosted via
 * `.listora-detail__gallery-thumbs .listora-detail__gallery-thumb`
 * (0,2,0) so the background-color: transparent + padding-zero rules
 * win against theme.json's .wp-element-button compilation that
 * otherwise paints these buttons brand-blue with coral borders
 * around each image. */
.listora-detail__gallery-thumbs {
	display: flex;
	gap: 0.4rem;
	margin-block-start: 0.4rem;
}

.listora-detail__gallery-thumbs .listora-detail__gallery-thumb {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 80px;
	height: 60px;
	padding: 0;
	background-color: transparent;
	border-radius: var(--listora-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	transition:
		border-color var(--listora-transition-fast),
		transform var(--listora-transition-fast);
	flex-shrink: 0;
	display: inline-block;
}

.listora-detail__gallery-thumbs .listora-detail__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.listora-detail__gallery-thumbs .listora-detail__gallery-thumb:hover,
.listora-detail__gallery-thumbs .listora-detail__gallery-thumb.is-active {
	border-color: var(--listora-primary);
}

.listora-detail__gallery-thumbs .listora-detail__gallery-thumb:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

/* ─── Lightbox (native dialog) ─── */

.listora-detail__lightbox {
	border: none;
	background: rgba(0, 0, 0, 0.92);
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.listora-detail__lightbox::backdrop {
	background: rgba(0, 0, 0, 0.92);
}

.listora-detail__lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	animation: listora-fadeInScale 0.3s ease;
}

.listora-detail__lightbox-close {
	position: absolute;
	top: var(--listora-space-4);
	inset-inline-end: var(--listora-space-4);
	background: rgba(255, 255, 255, 0.15);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: none;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--listora-transition-fast);
}

.listora-detail__lightbox-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.listora-detail__lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: none;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--listora-transition-fast);
}

.listora-detail__lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.listora-detail__lightbox-nav--prev {
	inset-inline-start: var(--listora-space-4);
}

.listora-detail__lightbox-nav--next {
	inset-inline-end: var(--listora-space-4);
}

.listora-detail__lightbox-counter {
	position: absolute;
	bottom: var(--listora-space-4);
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--listora-text-size-sm);
}

/* ─── Sticky Compact Header ─── */

.listora-detail__sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--listora-bg-base) 85%, transparent);
	border-block-end: 1px solid var(--listora-border);
	padding: 0.5rem var(--listora-space-4);
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	height: 56px;
	transform: translateY(-100%);
	opacity: 0;
	transition: transform var(--listora-transition-base), opacity var(--listora-transition-base);
	pointer-events: none;
}

.listora-detail__sticky-header.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.listora-detail__sticky-title {
	flex: 1;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listora-detail__sticky-actions {
	display: flex;
	gap: var(--listora-space-1);
}

/* ─── Owner toolbar (visible only to the listing's author) ───
 * Sits above the breadcrumb so vendors see a clear "this is your
 * listing, here are your actions" affordance the moment they land on
 * their own page. Subtle accent background distinguishes it from the
 * public content below without competing with the listing title.
 */
.listora-detail__owner-bar {
	/* No decorative left-stripe — the green Published pill already
	 * carries the state signal. The stripe read as an "AI tool"
	 * status indicator out of place for a listing dashboard. */
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
	padding: 0.65rem 0.95rem;
	background: var(--listora-bg-muted, #f3f4f6);
	border: 1px solid var(--listora-border-subtle, #e2e8f0);
	border-radius: var(--listora-radius-md, 8px);
	font-size: 0.875rem;
	color: var(--listora-fg-default, #1a1a1a);
}

.listora-detail__owner-bar-left {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.listora-detail__owner-bar-label {
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-default, #1a1a1a);
}

.listora-detail__owner-bar-status {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.55rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: var(--listora-weight-medium, 500);
	background: var(--listora-bg-elevated, #fff);
	border: 1px solid var(--listora-border-subtle, #e2e8f0);
	color: var(--listora-fg-muted, #555);
}

.listora-detail__owner-bar-status.is-publish {
	color: var(--listora-success-fg, #047857);
	border-color: var(--listora-success-fg, #047857);
}

.listora-detail__owner-bar-status.is-pending,
.listora-detail__owner-bar-status.is-pending-verification {
	color: var(--listora-warning-fg, #b45309);
	border-color: var(--listora-warning-fg, #b45309);
}

.listora-detail__owner-bar-status.is-paused {
	color: var(--listora-fg-default, #1a1a1a);
	background: var(--listora-warning-bg, #fef3c7);
	border-color: var(--listora-warning-bg, #fef3c7);
}

.listora-detail__owner-bar-status.is-expired,
.listora-detail__owner-bar-status.is-rejected,
.listora-detail__owner-bar-status.is-deactivated {
	color: var(--listora-danger-fg, #b91c1c);
	border-color: var(--listora-danger-fg, #b91c1c);
}

.listora-detail__owner-bar-actions {
	display: inline-flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/* ─── Header ─── */

.listora-detail__header {
	margin-block-end: var(--listora-space-6);
}

.listora-detail__header-top {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-block-end: 0.5rem;
}

.listora-detail__title {
	font-family: var(--listora-card-title-font);
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	font-weight: var(--listora-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 0.3rem;
	color: var(--listora-fg-default);
}

.listora-detail__address {
	display: flex;
	align-items: center;
	gap: 0.35em;
	font-style: normal;
	font-size: 1rem;
	color: var(--listora-fg-muted);
	margin-block-end: var(--listora-space-4);
}

.listora-detail__address svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint);
}

/* Actions */
.listora-detail__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.listora-detail__actions .listora-btn {
	font-size: var(--listora-card-meta-size);
	/* Quieter than the pill some themes promote globally - matches the v2
	 * radius-sm token so the action chrome reads premium, not loud. */
	border-radius: var(--listora-radius-sm, 6px);
}

.listora-detail__actions .is-favorited {
	color: var(--listora-favorite);
	border-color: var(--listora-favorite);
}

/* Feature This Listing — owner CTA */
.listora-detail__feature-btn svg {
	color: var(--listora-premium, var(--listora-warning));
}

.listora-detail__feature-btn.is-loading {
	opacity: 0.7;
	cursor: progress;
}

.listora-detail__feature-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.8em;
	border-radius: var(--listora-radius-full);
	font-size: var(--listora-card-meta-size);
	font-weight: var(--listora-weight-medium);
	background: color-mix(in srgb, var(--listora-premium, var(--listora-warning)) 12%, transparent);
	color: var(--listora-premium, var(--listora-warning));
	white-space: nowrap;
}

.listora-detail__feature-status svg {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.listora-detail__feature-status {
		width: 100%;
		justify-content: center;
	}
}

/* ─── Content Layout ─── */

.listora-detail__content {
	display: grid;
	/* `minmax(0, 1fr)` (not `1fr`) so the main column doesn't grow to fit
	 * intrinsic content like a long tab strip — without it, the tabs at
	 * mobile widths would push the main column beyond the available
	 * width and visibly cut off the content (Basecamp 9842624047). */
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--listora-space-6);
}

@media (max-width: 767px) {
	.listora-detail__content {
		grid-template-columns: minmax(0, 1fr);
	}
}

.listora-detail__main {
	/* Defense-in-depth: even with minmax(0, 1fr) on the parent, an inner
	 * flex/scroll context (the tab strip uses `display: inline-flex`)
	 * can sometimes resist clamping. `min-width: 0` lets the column
	 * truly collapse and the tab strip's `overflow-x: auto` then takes
	 * over to scroll horizontally instead of overflowing the page. */
	min-width: 0;
}

/* ─── Tabs (Pill Style) ─── */

.listora-detail__tabs {
	display: inline-flex;
	gap: 0.25rem;
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-full);
	padding: 0.3rem;
	overflow-x: auto;
	scrollbar-width: none;
	margin-block-end: var(--listora-space-4);
}

.listora-detail__tabs::-webkit-scrollbar {
	display: none;
}

/* Specificity-boosted via descendant chain `.listora-detail__tabs
 * .listora-detail__tab` (0,2,0) so the tab pill styling wins against
 * any theme's compiled `.wp-element-button` rule (0,1,0). Explicit
 * background-color set (not just background) to overwrite any theme
 * rule that landed later in the cascade. */
.listora-detail__tabs .listora-detail__tab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: var(--listora-tap-target, 44px);
	padding: 0.5rem 1rem;
	font-family: inherit;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-muted);
	background-color: transparent;
	white-space: nowrap;
	border: 0;
	border-radius: var(--listora-radius-full);
	transition:
		background-color var(--listora-transition-fast),
		color var(--listora-transition-fast),
		box-shadow var(--listora-transition-fast);
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.listora-detail__tabs .listora-detail__tab:hover {
	color: var(--listora-fg-default);
	background-color: color-mix(in srgb, var(--listora-fg-default) 6%, transparent);
}

.listora-detail__tabs .listora-detail__tab:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

.listora-detail__tabs .listora-detail__tab.is-active {
	background-color: var(--listora-bg-elevated);
	color: var(--listora-fg-default);
	box-shadow: var(--listora-shadow-sm);
	font-weight: var(--listora-weight-semibold);
}

.listora-detail__tab-count {
	font-size: 0.75em;
	font-weight: var(--listora-weight-semibold);
	background: var(--listora-primary);
	color: var(--listora-primary-fg);
	padding: 0.1em 0.5em;
	min-width: 1.3em;
	text-align: center;
	border-radius: var(--listora-radius-full);
}

/* On the active tab, swap the badge to inverse colours so it stays
 * legible against the elevated pill bg. */
.listora-detail__tab.is-active .listora-detail__tab-count {
	background: var(--listora-primary);
	color: var(--listora-primary-fg);
}

/* Panels */
.listora-detail__panel {
	animation: listora-fadeIn 0.2s ease;
}

.listora-detail__description {
	line-height: 1.7;
	color: var(--listora-fg-default);
	margin-block-end: var(--listora-space-4);
}

/* Quick Info */
.listora-detail__quick-info {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	padding: var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-lg);
	margin-block-end: var(--listora-space-4);
}

.listora-detail__info-item dt {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-block-end: 0.2rem;
}

.listora-detail__info-item dd {
	margin: 0;
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-default);
}

/* Features */
.listora-detail__features {
	margin-block-end: var(--listora-space-4);
}

.listora-detail__features h3 {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.listora-detail__features-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.listora-detail__features-list .listora-feature-badge {
	font-size: var(--listora-text-size-sm);
	padding: 0.3em 0.7em;
}

/* Field List */
.listora-detail__field-list {
	margin: 0;
}

.listora-detail__field-item {
	display: flex;
	gap: 1rem;
	padding: 0.6rem 0;
	border-block-end: 1px solid var(--listora-border);
}

.listora-detail__field-item:last-child {
	border: none;
}

.listora-detail__field-item dt {
	flex: 0 0 140px;
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-faint);
	font-weight: var(--listora-weight-medium);
}

.listora-detail__field-item dd {
	margin: 0;
	flex: 1;
	color: var(--listora-fg-default);
}

.listora-detail__field-item dd a {
	color: var(--listora-primary);
}

/* ─── Sidebar (Sticky) ─── */

.listora-detail__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
	position: sticky;
	top: var(--listora-space-6);
	align-self: start;
}

/* Contact Card */
.listora-detail__contact-card,
.listora-detail__hours-card,
.listora-detail__social-card {
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	padding: var(--listora-space-4);
	box-shadow: var(--listora-shadow-sm);
}

.listora-detail__contact-card h3,
.listora-detail__hours-card h3,
.listora-detail__social-card h3 {
	font-size: 1rem;
	font-weight: var(--listora-weight-semibold);
	margin: 0 0 0.75rem;
	color: var(--listora-fg-default);
}

.listora-detail__contact-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: var(--listora-fg-default);
	text-decoration: none;
	font-size: 0.95rem;
	border-block-end: 1px solid var(--listora-border);
	transition: color var(--listora-transition-fast);
}

.listora-detail__contact-item:last-child {
	border: none;
}

.listora-detail__contact-item:hover {
	color: var(--listora-primary);
}

/* Social Links Card */
.listora-detail__social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.listora-detail__social-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: var(--listora-fg-default);
	text-decoration: none;
	font-size: 0.95rem;
	border-block-end: 1px solid var(--listora-border);
	transition: color var(--listora-transition-fast);
}

.listora-detail__social-list li:last-child .listora-detail__social-link {
	border: none;
}

.listora-detail__social-link:hover,
.listora-detail__social-link:focus-visible {
	color: var(--listora-primary);
}

.listora-detail__social-label {
	flex: 1;
}

/* Colored icon circles */
.listora-detail__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--listora-radius-md);
	flex-shrink: 0;
}

.listora-detail__contact-icon--phone {
	background: color-mix(in srgb, var(--listora-success) 12%, transparent);
	color: var(--listora-success);
}

.listora-detail__contact-icon--email {
	background: color-mix(in srgb, var(--listora-primary) 12%, transparent);
	color: var(--listora-primary);
}

.listora-detail__contact-icon--web {
	background: color-mix(in srgb, var(--listora-premium) 12%, transparent);
	color: var(--listora-premium);
}

/* CTA */
.listora-detail__cta-btn {
	width: 100%;
	justify-content: center;
	margin-block-start: var(--listora-space-2);
}

/* Claimed Badge */
.listora-detail__claimed-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: color-mix(in srgb, var(--listora-success) 8%, transparent);
	color: var(--listora-success);
	border-radius: var(--listora-radius-md);
	font-size: var(--listora-card-meta-size);
	font-weight: var(--listora-weight-medium);
}

/* ─── Hours Table ─── */

.listora-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--listora-card-meta-size);
}

.listora-hours-table tr {
	border-block-end: 1px solid var(--listora-border);
}

.listora-hours-table tr:last-child {
	border: none;
}

.listora-hours-table td {
	padding: 0.4rem 0;
}

.listora-hours-table__day {
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-default);
	width: 100px;
}

.listora-hours-table__time {
	color: var(--listora-fg-muted);
}

.listora-hours-table__time--closed {
	color: var(--listora-danger);
}

/* Today row highlight with animated dot */
.listora-hours-table .is-today .listora-hours-table__day {
	color: var(--listora-primary);
}

.listora-hours-table .is-today .listora-hours-table__day::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--listora-success);
	margin-inline-end: 0.4rem;
	animation: listora-pulse 2s infinite;
}

/* ─── Mobile Sticky Bar ─── */

.listora-detail__mobile-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--listora-bg-base) 85%, transparent);
	border-block-start: 1px solid var(--listora-border);
	padding: 0.5rem;
	padding-block-end: env(safe-area-inset-bottom, 0.5rem);
	gap: 0.5rem;
	box-shadow: var(--listora-shadow-lg);
}

.listora-detail__mobile-bar .listora-btn {
	flex: 1;
	justify-content: center;
	font-size: var(--listora-text-size-sm);
}

@media (max-width: 767px) {
	.listora-detail__mobile-bar {
		display: flex;
	}

	.listora-detail {
		padding-block-end: 4rem;
	}

	.listora-detail__gallery-mosaic {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		height: auto;
	}

	.listora-detail__gallery-mosaic-item:first-child {
		grid-row: auto;
	}

	.listora-detail__gallery-mosaic-item:nth-child(n+3) {
		display: none;
	}

	.listora-detail__gallery-thumb {
		width: 60px;
		height: 45px;
	}

	.listora-detail__sticky-header {
		display: none;
	}
}

@media (max-width: 480px) {
	.listora-detail__title {
		font-size: 1.5rem;
	}

	.listora-detail__actions {
		flex-direction: column;
	}

	.listora-detail__actions .listora-btn {
		width: 100%;
		justify-content: center;
	}

	.listora-detail__quick-info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.listora-detail__tabs {
		width: 100%;
	}

	.listora-detail__address {
		font-size: var(--listora-text-sm, 0.8rem);
	}
}

/* ─── Reviews Section (within detail) ─── */

.listora-detail__reviews-summary {
	display: flex;
	gap: var(--listora-space-6);
	align-items: flex-start;
	padding: var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-xl);
	margin-block-end: var(--listora-space-6);
}

.listora-detail__reviews-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: 100px;
}

.listora-detail__reviews-avg {
	font-size: var(--listora-text-size-3xl);
	font-weight: var(--listora-weight-bold);
	line-height: 1;
	color: var(--listora-fg-default);
}

.listora-detail__reviews-stars {
	display: flex;
	gap: 2px;
	color: var(--listora-rating);
}

.listora-detail__reviews-total {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
}

.listora-detail__reviews-bars {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.listora-detail__reviews-bar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
}

.listora-detail__reviews-bar-row span:first-child {
	width: 1em;
	text-align: center;
}

.listora-detail__reviews-bar-row span:last-child {
	width: 2em;
	text-align: end;
}

.listora-detail__reviews-bar {
	flex: 1;
	height: 10px;
	background: var(--listora-border);
	border-radius: var(--listora-radius-full);
	overflow: hidden;
}

.listora-detail__reviews-bar div {
	height: 100%;
	background: linear-gradient(90deg, var(--listora-rating), color-mix(in srgb, var(--listora-rating) 80%, var(--listora-warning)));
	border-radius: var(--listora-radius-full);
	transition: width 0.3s;
}

/* Review cards */
.listora-detail__reviews-list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

/* Write-a-Review CTA breathes from the review list above and the form
   wrapper below. Without margin the button stacks flush against the
   last review card. Basecamp #9927635866. */
.listora-reviews__write-btn {
	margin-block: var(--listora-space-4) var(--listora-space-3);
	align-self: flex-start;
}

.listora-detail__review {
	padding: var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-lg);
	box-shadow: var(--listora-shadow-sm);
}

.listora-detail__review-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
}

.listora-detail__review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--listora-bg-surface);
}

.listora-detail__review-author {
	font-size: 0.95rem;
}

.listora-detail__review-author--link {
	color: var(--listora-fg-default);
	font-weight: var(--listora-weight-semibold);
	text-decoration: none;
	transition: color 0.15s ease;
}

.listora-detail__review-author--link:hover,
.listora-detail__review-author--link:focus-visible {
	color: var(--listora-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.listora-detail__review-author--link:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (max-width: 640px) {
	.listora-detail__review-author--link {
		font-size: 0.95rem;
	}
}

.listora-detail__review-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
}

.listora-detail__review-meta .listora-rating {
	display: flex;
	gap: 1px;
}

.listora-detail__review-title {
	font-size: 1rem;
	font-weight: var(--listora-weight-semibold);
	margin: 0 0 0.3rem;
}

.listora-detail__review-content {
	margin: 0;
	color: var(--listora-fg-muted);
	line-height: 1.6;
	font-size: 0.95rem;
}

/* Owner reply card */
.listora-detail__review-reply {
	margin-block-start: 0.75rem;
	padding: var(--listora-space-2) var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
	font-size: var(--listora-text-size-base);
}

.listora-detail__review-reply strong {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
	display: block;
	margin-block-end: 0.3rem;
}

.listora-detail__review-reply p {
	margin: 0;
	color: var(--listora-fg-muted);
}

.listora-detail__review-helpful {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	margin-block-start: 0.5rem;
	display: block;
}

.listora-detail__reviews-empty {
	text-align: center;
	padding: var(--listora-space-8);
	color: var(--listora-fg-faint);
}

@media (max-width: 767px) {
	.listora-detail__reviews-summary {
		flex-direction: column;
		align-items: stretch;
	}

	.listora-detail__reviews-score {
		flex-direction: row;
		gap: 0.75rem;
		min-width: auto;
	}
}

/* ─── Map Embed ─── */

/* ─── Claim / Share Modal ─── */

.listora-detail__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

/* Show only when the JS-added is-open class is present.
 * Do NOT rely on the [hidden] attribute alone — the Interactivity API
 * processes data-wp-bind--hidden during hydration and can strip the
 * attribute, leaving the modal visible. The is-open class is the
 * single source of truth for visibility. */
.listora-detail__modal.is-open {
	display: flex;
}

/* Belt-and-suspenders: native [hidden] still hides if used elsewhere. */
.listora-detail__modal[hidden] {
	display: none;
}

.listora-detail__modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.listora-detail__modal-content {
	position: relative;
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-lg);
	padding: var(--listora-space-6, 24px);
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	z-index: 1;
	animation: listora-fadeIn 0.2s ease;
}

.listora-detail__modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	/* Mobile UX audit 2026-05-25: 36px raised to 44px tap-target floor. */
	min-width: var(--listora-tap-target, 44px);
	min-height: var(--listora-tap-target, 44px);
	width: var(--listora-tap-target, 44px);
	height: var(--listora-tap-target, 44px);
	display: grid;
	place-items: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	padding: 0;
	z-index: 2;
}

.listora-detail__modal-close:hover,
.listora-detail__modal-close:focus-visible {
	background: var(--listora-bg-surface, var(--listora-wp-admin-bg-row-hover));
	color: var(--listora-text, var(--listora-wp-admin-text));
	outline: none;
}

.listora-detail__modal-close:focus-visible {
	box-shadow: 0 0 0 2px var(--listora-primary, var(--listora-primary));
}

.listora-detail__modal-close svg {
	pointer-events: none;
}

.listora-detail__modal-content h3 {
	margin: 0 36px 0.5rem 0;
	font-size: 1.25rem;
	font-weight: var(--listora-weight-semibold);
}

.listora-detail__modal-desc {
	color: var(--listora-fg-muted);
	font-size: var(--listora-text-size-sm);
	margin: 0 0 var(--listora-space-4);
	line-height: 1.5;
}

.listora-detail__claim-actions,
.listora-detail__modal-actions {
	display: flex;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-4);
	flex-wrap: wrap;
}

/* Compact modal variant — used by the login modal and any other small
 * confirmation-style modal that needs only icon + heading + brief copy +
 * 1-2 CTAs. Tighter footprint, center-aligned. Reuses the same close-
 * button + backdrop + animation primitives as the canonical claim modal
 * so the entire family stays visually consistent. */
.listora-detail__modal-content--compact {
	max-width: 380px;
	text-align: center;
	padding-block: var(--listora-space-7, 28px);
}

.listora-detail__modal-content--compact h3 {
	margin: 0 0 var(--listora-space-2);
	font-size: 1.125rem;
}

.listora-detail__modal-content--compact .listora-detail__modal-desc {
	margin-inline: auto;
	max-width: 30ch;
}

.listora-detail__modal-content--compact .listora-detail__modal-actions {
	justify-content: center;
	margin-block-start: var(--listora-space-5);
}

/* Tinted primary circle — matches our premium empty-state baseline so
 * users get the same family signal across login modal, paused-listing
 * recovery row, and any other "soft prompt" surface. */
.listora-detail__modal-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--listora-space-3);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--listora-primary) 12%, transparent);
	color: var(--listora-primary);
}

.listora-detail__modal-icon svg {
	width: 28px;
	height: 28px;
	stroke-width: 2;
}

.listora-detail__claim-message {
	margin-block-start: var(--listora-space-2);
	font-size: var(--listora-text-size-sm);
	padding: var(--listora-space-4);
	border-radius: var(--listora-radius-md);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--listora-space-2);
}

.listora-detail__claim-message p {
	margin: 0;
	line-height: 1.5;
}

.listora-detail__claim-message--success {
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 10%, transparent);
	color: var(--listora-success-text, var(--listora-success));
}

.listora-detail__claim-message--error {
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 10%, transparent);
	color: var(--listora-danger-fg, var(--listora-danger));
}

.listora-detail__map-embed {
	border-radius: var(--listora-radius-xl);
	overflow: hidden;
	height: 300px;
}

.listora-detail__map-actions {
	margin-block-start: 0.75rem;
	display: flex;
	gap: 0.5rem;
}

@media (max-width: 640px) {
	.listora-detail__map-embed {
		height: 240px;
	}

	.listora-detail__map-actions {
		flex-direction: column;
	}
}

/* ─── Review helpful-vote button (Reviews tab) ─── */
.listora-detail__review-actions {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-2);
	flex-wrap: wrap;
}

.listora-detail__review-helpful-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4rem 0.75rem;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
	background: var(--listora-bg-surface);
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-full);
	cursor: pointer;
	transition: color var(--listora-transition-fast), background var(--listora-transition-fast), border-color var(--listora-transition-fast);
}

.listora-detail__review-helpful-btn:hover:not(:disabled) {
	color: var(--listora-primary);
	border-color: var(--listora-primary);
}

.listora-detail__review-helpful-btn.is-voted {
	color: var(--listora-primary);
	border-color: var(--listora-primary);
	background: color-mix(in srgb, var(--listora-primary) 8%, transparent);
}

.listora-detail__review-helpful-btn.is-error {
	opacity: 0.5;
}

.listora-detail__review-helpful-btn:disabled {
	cursor: default;
}

.listora-detail__review-helpful-summary {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

/* Location tab - merged address breakdown + map embed.
 * The address dl + map-wrap render side-by-side on >=900px, stacked on
 * smaller viewports. Replaces the previous Location/Map split. */
.listora-detail__field-item--address dd {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.listora-detail__address-line {
	font-size: var(--listora-text-size-base, 1rem);
	color: var(--listora-fg-default);
	line-height: 1.5;
}

.listora-detail__address-line--muted {
	color: var(--listora-fg-muted);
	font-size: var(--listora-text-size-sm);
}

.listora-detail__map-wrap {
	margin-block-start: var(--listora-space-5, 1.25rem);
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-3, 0.75rem);
}

.listora-detail__map-wrap .listora-detail__map-embed {
	width: 100%;
	min-height: 360px;
	height: 360px;
	border-radius: var(--listora-radius-lg, 14px);
	overflow: hidden;
	border: 1px solid var(--listora-border-default);
}

.listora-detail__map-wrap .listora-detail__map-actions {
	display: flex;
	gap: var(--listora-space-2);
}

/* Standalone Map panel (used when there's no map_location field). */
#panel-map .listora-detail__map-embed {
	min-height: 480px;
	height: 480px;
	border-radius: var(--listora-radius-lg, 14px);
	overflow: hidden;
	border: 1px solid var(--listora-border-default);
	margin-block-end: var(--listora-space-3);
}

/* Uniform tab panel shell - applied to every tab so Overview / Location /
 * field-groups / Services / Reviews / Map share the same card-style canvas.
 * Pulls Place Details + Location out of a naked dl into the same elevated
 * card vocabulary the Services grid was already using. */
.listora-detail__panel {
	background: var(--listora-bg-elevated, #fff);
	border: 1px solid var(--listora-border-default);
	border-radius: var(--listora-radius-lg, 14px);
	padding: var(--listora-space-5, 1.25rem) var(--listora-space-6, 1.5rem);
	margin-block-start: var(--listora-space-4, 1rem);
}

/* Services + Reviews panels already render inner cards (service-card,
 * review-card). Drop the outer panel chrome so we never paint a card
 * inside a card. Keep the top margin so the spacing under the tab nav
 * stays consistent with every other tab. */
#panel-services,
#panel-reviews {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

.listora-detail__field-list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-3, 0.75rem);
	margin: 0;
}

.listora-detail__field-item {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	gap: var(--listora-space-4, 1rem);
	padding-block: var(--listora-space-3, 0.75rem);
	border-block-end: 1px solid var(--listora-border-default);
}

.listora-detail__field-item:last-child {
	border-block-end: none;
}

.listora-detail__field-item dt {
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-muted);
	margin: 0;
}

.listora-detail__field-item dd {
	font-size: var(--listora-text-size-base);
	color: var(--listora-fg-default);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 600px) {
	.listora-detail__field-item {
		grid-template-columns: 1fr;
		gap: var(--listora-space-1, 0.25rem);
	}
}

/* Services tab - grid + card layout.
 * Service cards on the Services tab render as a responsive grid of
 * elevated cards with optional image, title, price, duration, and a
 * collapsible description. Previously missing - tab rendered unstyled
 * as a flat text list. */
.listora-detail__services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--listora-space-4, 1rem);
}

.listora-detail__service-card {
	display: flex;
	flex-direction: column;
	background: var(--listora-bg-elevated, #fff);
	border: 1px solid var(--listora-border-default, #e0e0e0);
	border-radius: var(--listora-radius-lg, 14px);
	overflow: hidden;
	transition: box-shadow var(--listora-transition-fast, 0.15s ease), transform var(--listora-transition-fast, 0.15s ease);
}

.listora-detail__service-card:hover {
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.listora-detail__service-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--listora-bg-muted, #f5f5f5);
}

.listora-detail__service-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.listora-detail__service-body {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.5rem);
	padding: var(--listora-space-4, 1rem);
	flex: 1;
}

.listora-detail__service-title {
	margin: 0;
	font-size: var(--listora-text-size-lg, 1.0625rem);
	font-weight: 700;
	color: var(--listora-fg-default, #1a1a1a);
	line-height: 1.35;
}

.listora-detail__service-meta {
	display: flex;
	align-items: center;
	gap: var(--listora-space-3, 0.75rem);
	flex-wrap: wrap;
}

.listora-detail__service-price {
	font-size: var(--listora-text-size-base, 1rem);
	font-weight: 700;
	color: var(--listora-primary, #2271b1);
}

.listora-detail__service-duration {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--listora-text-size-sm, 0.875rem);
	color: var(--listora-fg-muted, #555555);
}

.listora-detail__service-duration svg {
	color: var(--listora-fg-faint, #999999);
	flex-shrink: 0;
}

.listora-detail__service-desc-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1, 0.25rem);
}

/* Service description toggle - card 9872013428.
 * Template emits `--collapsed` modifier on initial render; JS toggles it
 * via actions.toggleServiceDesc. Default state: 2-line clamp; expanded
 * state: full description height. */
.listora-detail__service-desc {
	margin: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
	line-height: 1.5;
}

.listora-detail__service-desc--collapsed {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.listora-detail__service-toggle {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-primary);
	background: none;
	border: 0;
	padding: var(--listora-space-1, 0.25rem) 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.listora-detail__service-toggle svg {
	transition: transform var(--listora-transition-fast, 0.1s ease);
}

/* Rotate the chevron when the description has been expanded
 * (collapsed class removed by the toggle action). */
.listora-detail__service-desc:not(.listora-detail__service-desc--collapsed) ~ .listora-detail__service-toggle svg,
.listora-detail__service-card:has(.listora-detail__service-desc:not(.listora-detail__service-desc--collapsed)) .listora-detail__service-toggle svg {
	transform: rotate(180deg);
}