/*
 * SMTX Directory — Phase 5 site-wide palette + filter UI styling (2026-08-10).
 * CSS custom properties on purpose: per Daniel, layout/structure is the
 * priority right now, color is an easy follow-up swap once picked for real
 * -- changing the palette later means editing the values below, nothing
 * structural. Current values are Direction A ("Warm River-Town") from the
 * Website Design & UX Plan, Phase 5.
 *
 * Scoped to :root (not just .smtx-search-ui) so any part of the site --
 * homepage included -- can reuse the same variables instead of duplicating
 * hardcoded hex values in raw page-content HTML blocks.
 */
:root {
	--smtx-bg: #FBF6EF;
	--smtx-bg-alt: #F3EADA;
	--smtx-border: #E4D9C4;
	--smtx-text: #3A342B;
	--smtx-text-muted: #7A6F5C;
	--smtx-primary: #2C6E7F;
	--smtx-primary-dark: #235863;
	--smtx-accent: #C9713F;
	--smtx-accent-contrast: #FFFFFF;
	--smtx-radius: 10px;
}

/* ---------- Search bar (keyword + category + search button) ---------- */

.smtx-search-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.75rem;
}

.smtx-search-bar input[type="text"] {
	flex: 1 1 240px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	background: #fff;
	color: var(--smtx-text);
}

.smtx-category-select {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	background: #fff;
	color: var(--smtx-text);
}

.smtx-search-submit {
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: var(--smtx-radius);
	background: var(--smtx-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.smtx-search-submit:hover { background: var(--smtx-primary-dark); }

/* ---------- Active filter chips ---------- */

.smtx-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.smtx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--smtx-primary);
	border-radius: 999px;
	background: var(--smtx-bg-alt);
	color: var(--smtx-primary-dark);
	font-size: 0.85rem;
	cursor: pointer;
}
.smtx-chip:hover { background: var(--smtx-primary); color: #fff; }
.smtx-chip-x { font-size: 0.75rem; opacity: 0.7; }

/* ---------- Filter panel (lives in #sd-sidebar-right after JS moves it) ---------- */

.smtx-filter-panel {
	background: var(--smtx-bg);
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 1rem;
	/* 2026-08-14: the panel is now a column with two parts -- the field list
	 * (.smtx-filter-fields, scrolls on its own) and Apply Filters as a fixed
	 * flex sibling below it, never inside the scrolling area. Replaces an
	 * earlier position:sticky attempt on the button that never actually
	 * worked (confirmed live: scrolling an expanded panel left it 3000+px
	 * off-screen on both desktop and mobile). */
	display: flex;
	flex-direction: column;
}
.smtx-filter-fields {
	flex: 1 1 auto;
	min-height: 0; /* required for a flex child to actually scroll instead of overflowing its container */
}
.smtx-apply-filters {
	flex-shrink: 0;
}

.smtx-filter-field,
.smtx-filter-more {
	border-bottom: 1px solid var(--smtx-border);
	padding: 0.15rem 0;
}
.smtx-filter-field:last-of-type { border-bottom: none; }

.smtx-filter-field > summary,
.smtx-filter-more > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.1rem;
	font-weight: 600;
	color: var(--smtx-text);
	font-size: 0.92rem;
}
.smtx-filter-field > summary::-webkit-details-marker,
.smtx-filter-more > summary::-webkit-details-marker {
	display: none;
}
.smtx-filter-field > summary::after,
.smtx-filter-more > summary::after {
	content: "+";
	font-size: 1.1rem;
	color: var(--smtx-text-muted);
	transition: transform 0.15s ease;
}
.smtx-filter-field[open] > summary::after,
.smtx-filter-more[open] > summary::after {
	transform: rotate(45deg);
}

.smtx-filter-field-body,
.smtx-filter-more-body {
	padding: 0.2rem 0.1rem 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.smtx-filter-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
	color: var(--smtx-text);
	cursor: pointer;
	padding: 0.15rem 0;
}
.smtx-filter-option input {
	accent-color: var(--smtx-primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.smtx-filter-count {
	color: var(--smtx-text-muted);
	font-size: 0.85em;
}

.smtx-filter-field-body select {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--smtx-border);
	border-radius: 6px;
	background: #fff;
}

.smtx-apply-filters {
	width: 100%;
	margin-top: 0.9rem;
	padding: 0.7rem;
	border: none;
	border-radius: var(--smtx-radius);
	background: var(--smtx-accent);
	color: var(--smtx-accent-contrast);
	font-weight: 700;
	cursor: pointer;
}
.smtx-apply-filters:hover { opacity: 0.92; }

/* ---------- Sidebar slot polish (the theme's own #sd-sidebar-right) ---------- */

#sd-sidebar-right .sidebar {
	padding: 0;
}

/* Independently scrollable sidebar (per the original Phase 1 filter spec) --
 * a safety net so the panel's own height can never stretch the page even if
 * a user expands many sections at once; #sd-sidebar-right is a float, so
 * without this its height otherwise pushes the whole page taller than the
 * (usually shorter) results column. */
@media (min-width: 768px) {
	.smtx-filter-panel {
		position: sticky;
		top: 1rem;
		max-height: calc(100vh - 2rem);
	}
	/* Scrolling now happens on the field list specifically, not the whole
	 * panel -- Apply Filters sits below it as a fixed flex sibling instead. */
	.smtx-filter-fields {
		overflow-y: auto;
	}
}

/* Mobile: the theme's own body.sd-map-only toggle already makes this slot
 * full-width and visible (see supreme.js #showMap / style.css
 * .sd-map-only .sd-sidebar) -- just give the panel some breathing room and
 * a close affordance once it's the full-screen surface. */
@media (max-width: 767px) {
	#sd-sidebar-right {
		padding: 1rem;
	}
	.smtx-filter-panel {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* ---------- Homepage: category tiles + listings grid ---------- */

.smtx-home-tile {
	flex: 1 1 180px;
	max-width: 220px;
	min-width: 160px;
	text-decoration: none;
	color: var(--smtx-text);
	background: var(--smtx-bg);
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 28px 16px;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.smtx-home-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(44, 110, 127, 0.12);
	border-color: var(--smtx-primary);
}
.smtx-home-tile-icon {
	font-size: 1.6rem;
	color: var(--smtx-primary);
	margin-bottom: 10px;
}
.smtx-home-tile-label {
	font-weight: 600;
	color: var(--smtx-text);
}

.smtx-home-viewall {
	color: var(--smtx-primary);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.smtx-home-viewall:hover {
	color: var(--smtx-primary-dark);
	text-decoration: underline;
}

/* The homepage inherits the theme's generic page-sidebar system
 * (.sidebar-active/.sd-sidebar-right, body.sd-homepage) -- same mechanism
 * repurposed for the search page's filter panel, but there's nothing to put
 * there on the homepage, so it just sits empty at ~24% width. Hide it and
 * let the main content column take the full width instead. */
body.sd-homepage #sd-sidebar-right {
	display: none;
}
body.sd-homepage .sidebar-active {
	width: 100% !important;
	float: none !important;
	border-right: none !important;
}

/* Compact hero (theme's native 'title' featured-area type, set via the
 * _sd_featured_area postmeta on post 32 -- the theme hardcodes front pages
 * to the full-viewport 'location' map type unless this meta overrides it,
 * see content-featured-area.php).
 *
 * Background is the SAME dark #2f2f2f as the site-header everywhere else --
 * not a design choice, a structural necessity: #site-header is
 * position:absolute + background:transparent sitewide (confirmed via
 * computed styles), floating over whatever's behind it. On every other
 * page that's a photo with a dark ::before overlay for text legibility,
 * which is what makes the nav bar LOOK like a solid dark bar. We removed
 * that overlay here (nothing to darken, no photo) -- so the fix isn't to
 * fight the header's own transparency, it's to give the compact hero a
 * background dark enough to read the same way once the transparent nav
 * sits on top of it. Matching the literal theme value, not our own palette,
 * so this can never visually drift from the shared header again. */
body.sd-homepage header .featured-area.type-title {
	background: #2f2f2f;
	padding: 48px 0 56px;
	min-height: 0 !important;
}
body.sd-homepage header .featured-area.type-title::before {
	display: none;
}
body.sd-homepage header .featured-area.type-title .entry-title,
body.sd-homepage header .featured-area.type-title h1 {
	color: #fff;
	font-size: 2.75rem;
	font-weight: 700;
	position: static;
	margin-bottom: 20px !important;
}
body.sd-homepage .smtx-home-subtitle {
	color: #ccc;
}

/* Homepage header: uses the exact same shared header as every other page
 * (dark background, nav) rather than a homepage-specific stripped/
 * transparent variant -- that special-casing is what caused the header
 * background inconsistency and a logo/title overlap bug. Same sitewide
 * logo file, sized explicitly below so its display size never again
 * depends on the source file's raw pixel dimensions. */
.site-logo-wrap .site-logo img {
	max-height: 50px;
	width: auto;
}

/* Homepage-only: Categories/Events are redundant with the category tiles
 * below the compact hero (which serve as the homepage's primary nav), so
 * hide just those two top-level items here -- Login/Add Listing (below)
 * stay visible, and both items are unchanged on every other page.
 * Deliberately NOT scoped to "#menu-main-navigation >" -- the theme's
 * mmenu plugin clones the entire nav into a second
 * #mm-menu-main-navigation drawer for the mobile hamburger menu, reusing
 * the same menu-item-{ID} classes. Scoping to the desktop nav's ID only
 * left Categories/Events still visible in the mobile drawer -- caught via
 * an actual mobile hamburger-menu screenshot, not just desktop viewport
 * checks. menu-item-1015/79 are unique to Categories/Events sitewide, so
 * a bare class selector safely hides both copies without touching the
 * separately-classed Login/Add Listing items. */
body.sd-homepage .menu-item-1015,
body.sd-homepage .menu-item-79 {
	display: none;
}

/* Login/Add Listing are real <li> items inside #menu-main-navigation on
 * EVERY page (see injectHeaderActions() in smtx-search-ui.js) so they share
 * the nav's own flex layout instead of a separately absolutely-positioned
 * overlay that collided with "EVENTS" the first time this was tried.
 * Reset the item's own height/line-height (inherited from the tall
 * #primary-nav ul li a rule, same issue as the Categories dropdown) and
 * center the label explicitly (rather than relying on padding alone) so
 * the text sits dead-center in the button box regardless of line-height
 * quirks inherited from the nav. */
.smtx-header-actions-item {
	display: flex;
	align-items: center;
}
.smtx-header-actions-item a {
	height: auto !important;
	line-height: normal !important;
	padding: 8px 18px !important;
	border-radius: var(--smtx-radius);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.smtx-btn-login {
	color: #fff;
	border: 1px solid #fff;
	background: transparent;
}
.smtx-btn-login:hover {
	background: rgba(255, 255, 255, 0.1);
}
.smtx-btn-add-listing {
	color: #fff;
	background: var(--smtx-accent);
	border: 1px solid var(--smtx-accent);
}
.smtx-btn-add-listing:hover {
	opacity: 0.9;
}

/* Homepage now uses our OWN [smtx_search_ui] shortcode in the hero (via the
 * theme's sd_featured_area_content postmeta override -- see
 * sd_feature_area_gd() in geodirectory-compatibility.php, which checks that
 * meta before falling back to its default [gd_search][gd_categories]) --
 * same component as the search-results page, sized up here since it's the
 * primary interaction in the title bar rather than one element competing
 * with a full nav menu. No icon-clearance padding needed like the old
 * native widget had -- this is a plain input, no absolutely-positioned
 * icon overlay to dodge. */
.smtx-home-subtitle {
	text-align: center;
	color: var(--smtx-text-muted);
	font-size: 1.05rem;
	margin: 0 0 22px;
	font-weight: 400;
}
body.sd-homepage .featured-area .smtx-search-bar {
	max-width: 680px;
	margin: 0 auto;
	gap: 10px;
	align-items: stretch;
}
/* Same fixed height + box-sizing + line-height across all three controls --
 * input/select/button default to different intrinsic heights (line-height,
 * border, and UA-default vertical padding all differ per element type), so
 * matching padding alone left them visibly uneven with off-center text. */
body.sd-homepage .featured-area .smtx-search-bar input[type="text"],
body.sd-homepage .featured-area .smtx-category-select,
body.sd-homepage .featured-area .smtx-search-submit {
	height: 56px;
	box-sizing: border-box;
	line-height: normal;
	border-radius: var(--smtx-radius);
	font-size: 1.05rem;
}
body.sd-homepage .featured-area .smtx-search-bar input[type="text"] {
	padding: 0 1.4rem;
	border: 1px solid var(--smtx-border);
	box-shadow: 0 4px 14px rgba(44, 110, 127, 0.12);
}
body.sd-homepage .featured-area .smtx-category-select {
	padding: 0 1.2rem;
	border: 1px solid var(--smtx-border);
	box-shadow: 0 4px 14px rgba(44, 110, 127, 0.12);
}
body.sd-homepage .featured-area .smtx-search-submit {
	padding: 0 1.75rem;
	background: var(--smtx-primary);
	border: 1px solid var(--smtx-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The theme hardcodes a "scroll down" chevron after the hero search widget
 * on every front-page render (sd_feature_area_gd(), same function providing
 * the sd_featured_area_content override above) -- made sense pointing at a
 * tall 100vh hero with content below the fold, not this compact one. */
body.sd-homepage #sd-home-scroll {
	display: none;
}

/* Sitewide nav: 12 category links collapsed into a single "Categories"
 * dropdown (menu item 1015, wp-cli reparented -- see
 * smtxdirectory-nav-restructure-2026-08-11.md) so the primary nav fits one
 * row instead of wrapping to two. The theme has no .sub-menu-specific
 * height override at all -- dropdown items were inheriting the tall
 * top-level rule (#primary-nav ul li a{height:61px;line-height:61px}, sized
 * for a horizontal bar) making each dropdown row enormous. */
#primary-nav .sub-menu {
	min-width: 240px;
}
#primary-nav .sub-menu li a {
	/* !important: line-height:61px specifically survives even with a more
	 * specific selector (a separate rule from the height:61px one, found
	 * via computed-style inspection, exact source not worth chasing further
	 * through this theme's several layered stylesheets -- this is a
	 * deliberate, permanent override for a component we built, not
	 * fighting our own code). */
	height: auto !important;
	line-height: 1.3 !important;
	padding: 12px 20px !important;
	display: block !important;
}

/* Listing detail/card category badge (GD core markup: .gd-cptcat-cat-right,
 * a Bootstrap .text-truncate label next to the author-avatar column) was
 * built assuming short category names -- our taxonomy uses descriptive
 * multi-word names (e.g. "Family Fun & Entertainment"), which the ~95-120px
 * box clips down to 2-3 letters + ellipsis at desktop widths (mobile's
 * full-width stacked layout doesn't hit this, only desktop's narrow side-
 * by-side column). Full text wrapping onto 2-3 lines beats silently hiding
 * most of the category name. */
.gd-cptcat-cat-right.text-truncate {
	/* !important: GeoDirectory's own ayecode-ui-compatibility.css ships
	 * ".bsui .text-truncate{white-space:nowrap}" at equal (two-class)
	 * specificity, loaded after this stylesheet -- ties go to source
	 * order, so a plain override here loses without !important. */
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

/* Generic placeholder Gravatar avatar (2026-08-11, Daniel: "hide it for
 * now") -- every listing was bulk-imported by one admin account with no
 * real per-business owner photo, so the same blank mystery-man silhouette
 * repeats on all 465 listings/cards sitewide with zero information value.
 * Two separate sources render it, both hidden here:
 *  - class-geodir-widget-simple-archive-item.php's card widget
 *    (img[alt="Author Image"], archive/category cards) -- its wrapping
 *    ".row" contains nothing else, so hiding just the <img> leaves no gap.
 *  - the theme's own single-listing template
 *    (supreme-directory/template-parts/header/header-single-top.php)'s
 *    ".author-avatar" div, sibling to ".sd-detail-info" -- ".author-link"
 *    next to it is already empty (no post_author meta set on imported
 *    listings), so hiding the avatar leaves nothing else in that column.
 * Revisit once real businesses claim listings (verified-owner badge already
 * has a hook here -- ".sd-verified-badge" -- for that future state). */
.author-avatar,
img[alt="Author Image"] {
	display: none !important;
}

/* Amenities tab -- a flat checklist matching Cityo's actual structure
 * (confirmed via direct review: one bulleted list of items like "Accepts
 * Credit Cards" / "Bike Parking", not grouped under per-field headings).
 * First version (2026-08-12) grouped by field with a heading over each --
 * corrected same day once caught; see smtx_get_listing_amenity_items() in
 * smtx-listing-details.php for the flattening logic + why. */
.smtx-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75em 2em;
}
.smtx-amenity-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	color: var(--smtx-text);
	font-size: 0.95rem;
	/* A long unbroken URL (e.g. the Official Website item) has no natural
	 * word-break point and was overflowing into the next grid column
	 * instead of wrapping within its own -- min-width:0 lets a grid/flex
	 * item actually shrink below its content's intrinsic width so
	 * overflow-wrap can then do its job. */
	min-width: 0;
}
.smtx-amenity-item a {
	overflow-wrap: break-word;
	min-width: 0;
}
.smtx-amenity-item i {
	color: var(--smtx-primary);
	margin-top: 0.2em;
	font-size: 0.85em;
}
.smtx-tag {
	display: inline-block;
	background: var(--smtx-bg-alt);
	border: 1px solid var(--smtx-border);
	color: var(--smtx-text);
	border-radius: 999px;
	padding: 3px 12px;
	margin: 0 6px 6px 0;
	font-size: 0.85rem;
}

/* Listing sidebar (Phase 4 item 5, 2026-08-12): Hours / Contact / Claim
 * cards in sidebar-gd, replacing the redundant Events Calendar widget
 * removed earlier this session. */
.smtx-listing-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}
.smtx-sidebar-card {
	background: var(--smtx-bg);
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 1em 1.25em;
}
.smtx-sidebar-card h4 {
	margin: 0 0 0.6em;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--smtx-text-muted);
	font-weight: 700;
}
.smtx-sidebar-hours {
	font-size: 0.95rem;
	color: var(--smtx-text);
	line-height: 1.6;
}

/* Full day-by-day Hours table (matches Cityo's "Today" highlight + Mon-Sun
 * list), replacing the condensed range text in this specific sidebar card
 * -- the Amenities tab still uses the compact grouped format, this card
 * has room to be fully explicit. */
.smtx-sidebar-hours-card {
	padding: 0 !important;
	overflow: hidden;
}
.smtx-sidebar-hours-card h4 {
	padding: 1em 1.25em 0;
}
.smtx-hours-today {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	margin: 0.75em 0 0;
	padding: 0.7em 1.25em;
	background: var(--smtx-primary-dark);
	color: #fff;
	font-weight: 600;
}
.smtx-hours-today-status {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.85;
}
.smtx-hours-today.is-open .smtx-hours-today-status { color: #b7f0c2; }
.smtx-hours-today.is-closed .smtx-hours-today-status { color: #f5b8b8; }
.smtx-hours-table {
	padding: 0.5em 1.25em 1em;
}
.smtx-hours-row {
	display: flex;
	justify-content: space-between;
	padding: 0.35em 0;
	font-size: 0.9rem;
	color: var(--smtx-text-muted);
	border-bottom: 1px solid var(--smtx-border);
}
.smtx-hours-row:last-child {
	border-bottom: none;
}
.smtx-hours-row.is-today {
	color: var(--smtx-text);
	font-weight: 700;
}
.smtx-sidebar-contact-row {
	font-size: 0.95rem;
	color: var(--smtx-text);
	padding: 0.3em 0;
}
.smtx-sidebar-contact-row i {
	width: 18px;
	color: var(--smtx-primary);
}
.smtx-sidebar-contact-row a {
	color: var(--smtx-primary);
}
.smtx-sidebar-claim .gd-claim-post,
.smtx-sidebar-claim a {
	display: block;
	text-align: center;
	background: var(--smtx-accent);
	color: var(--smtx-accent-contrast);
	border-radius: var(--smtx-radius);
	padding: 0.7em 1em;
	font-weight: 600;
	text-decoration: none;
}
.smtx-sidebar-claimed {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--smtx-primary-dark);
	font-weight: 600;
	background: var(--smtx-bg-alt);
}

/* Recommend button (Phase 4 item 6, 2026-08-12) -- quick, low-effort
 * signal distinct from the full star-review system. Count text only shows
 * once > 0, same "no empty state" principle as everything else here. */
.smtx-recommend-wrap {
	margin-top: 0.75em;
	text-align: center;
}
.smtx-recommend-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: transparent;
	border: 1px solid var(--smtx-primary);
	color: var(--smtx-primary);
	border-radius: var(--smtx-radius);
	padding: 0.5em 1.1em;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}
.smtx-recommend-btn:hover {
	background: var(--smtx-bg-alt);
}
.smtx-recommend-btn.is-active {
	background: var(--smtx-primary);
	color: #fff;
}
.smtx-recommend-count {
	display: block;
	margin-top: 0.4em;
	font-size: 0.8rem;
	color: var(--smtx-text-muted);
}

/* The theme's own header-single-top.php independently renders a "Claim Me"
 * link (.author-link) whenever geodir_claim_show_claim_link() is true --
 * which became true sitewide once the claim-listing plugin's 'claimed'
 * field was created 2026-08-12. Our own sidebar Claim card
 * (.smtx-sidebar-claim) already covers this, more prominently and in the
 * position Daniel wants it -- hide the theme's duplicate rather than show
 * the same action twice on one page. */
.author-link {
	display: none !important;
}

/* Info bar (2026-08-12) -- custom-rendered replacement for GD's
 * [gd_post_address]/[gd_categories] shortcode output (see
 * smtx_render_info_bar() in smtx-listing-details.php for why: three
 * rounds of CSS fighting Bootstrap's own card-grid markup was the wrong
 * approach, this owns the markup instead). One clean inline row, wraps
 * naturally on narrow viewports since each item is inline-flex, not a
 * fixed grid column. */
.smtx-info-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin-bottom: 0.5em;
}
.smtx-info-bar-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--smtx-text-muted);
	font-size: 0.95rem;
}
.smtx-info-bar-item i {
	color: var(--smtx-primary);
	font-size: 0.85em;
}
.smtx-info-bar-cat {
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	background: var(--smtx-bg);
	color: var(--smtx-text);
	padding: 0.3em 0.8em;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
}
.smtx-info-bar-cat:hover {
	background: var(--smtx-bg-alt);
}

/* .sd-contacts (phone/website/social badges) is still GD's native
 * [gd_post_badge] output, unchanged -- already renders as compact colored
 * pills, no override needed. Just keep it inline alongside the info bar
 * above instead of starting its own new line. */
.sd-detail-info .sd-contacts {
	display: inline-flex;
	vertical-align: middle;
}

/* Nearby Categories / Nearby Listings sidebar cards (2026-08-12) --
 * matches Cityo's "Browse Nearby Categories" + "Nearby Listings" sections. */
.smtx-sidebar-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.smtx-sidebar-pill {
	display: inline-block;
	border: 1px solid var(--smtx-border);
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-size: 0.85rem;
	color: var(--smtx-text);
	text-decoration: none;
	background: #fff;
}
.smtx-sidebar-pill:hover {
	background: var(--smtx-bg-alt);
}
.smtx-sidebar-nearby-list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.smtx-sidebar-nearby-item {
	color: var(--smtx-primary);
	font-size: 0.9rem;
	text-decoration: none;
}
.smtx-sidebar-nearby-item:hover {
	text-decoration: underline;
}

/* ==========================================================================
 * SINGLE LISTING PAGE -- full rebuild, 2026-08-12.
 *
 * Ground truth was re-established from scratch for this pass: Cityo's served
 * HTML was read directly and both pages were measured in a real browser,
 * rather than carrying forward what earlier passes assumed. Two of those
 * measurements explain most of what kept being reported as "still doesn't
 * match":
 *
 * 1. CITYO HAS NO TABS. Its "Description / Amenities / Photos / Video / Maps
 *    / Menu Prices / Reviews" bar is a sticky nav of ANCHOR LINKS
 *    (href="#listing-amenities"), and all seven sections render at once,
 *    stacked as separate cards -- measured: every panel display:block, page
 *    5930px tall. Ours used GeoDirectory's real tab widget, which genuinely
 *    hid four of five sections -- measured: display:none on all but the
 *    first, page ~1700px tall. Earlier passes restyled the tab BAR to look
 *    like plain text links and confirmed via computed styles that it had,
 *    which is why it kept getting reported as fixed while still looking
 *    wrong: the bar's appearance was never the problem, the hiding was.
 *    Fixed at the source -- GD ships `show_as_list` ("show the tabs as a
 *    list and not as tabs") on [gd_single_tabs], set on the GD Details
 *    template page (17). No CSS involved.
 *
 * 2. SIZING was off by exact, measurable amounts, not by feel: our H1 was
 *    60px and centred, Cityo's is 30px and left-aligned; our sidebar 276px,
 *    Cityo's 360px. Values below are matched to the measured reference
 *    instead of estimated, and the hero action row is height-locked so its
 *    items cannot drift out of proportion with each other again.
 *
 * ADDING SECTIONS LATER
 * ---------------------
 * Sections are not defined in this file or in any template. They come from
 * GeoDirectory's own wp_geodir_tabs_layout table -- Settings -> Post Types
 * -> Place -> Tabs. Add a row (tab_name + tab_content shortcode) and it
 * appears automatically in both the sticky jump nav and the stacked page
 * body, picking up the card styling below with no further work. That is how
 * a Video, Menu, Offers or Ratings-breakdown section gets added as the site
 * grows. Section ORDER is the sort_order column on the same rows.
 * ========================================================================== */

/* Page ground. Cityo puts white cards on a light grey field (#f6f6f6); this
 * is the same relationship expressed in our own warm palette rather than a
 * copy of its neutral, so the listing page still reads as the same site as
 * the search and category pages.
 *
 * Three elements have to give up their own white for the cards to read as
 * cards: <body>, the <article>, and the theme's .content-box wrapper. Only
 * setting it on <body> leaves the article's own white painted on top of it,
 * which is exactly what happened on the first attempt -- measured
 * body background rgb(255,255,255) even with the rule in place. */
body.smtx-listing-page,
body.smtx-listing-page {
	background: #F5F0E8 !important;
}
body.smtx-listing-page article.gd_place,
body.smtx-listing-page article.gd_event,
body.smtx-listing-page .content-box.content-single,
body.smtx-listing-page .content-box.content-single {
	background: transparent !important;
}

/* --------------------------------------------------------------------------
 * HERO
 *
 * One element carrying the photo as its own background, with everything
 * inside it in normal document flow. The previous build was two elements
 * (the theme's .featured-area photo plus this block) joined by a hard-coded
 * `margin-top:-170px`, which is a fixed offset against variable-height
 * content -- so a long business name or the late-arriving Recommend button
 * pushed the content past the bottom of the photo and it got clipped at the
 * section edge. Both were reproducible bugs. With one element there is no
 * offset to keep in sync and the box grows with its content instead.
 *
 * The theme's separate photo block is switched off at its own native
 * decision point (_sd_featured_area = 'remove' on template page 17), not
 * hidden with CSS -- see smtx-listing-hero.php.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .sd-detail-details {
	position: relative;
	margin-top: 0 !important;
	/* The theme gives this block a 30px bottom margin, which showed as a
	 * white stripe between the photo and the section nav. The reference has
	 * the two flush. */
	margin-bottom: 0 !important;
	padding: 0;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	background-color: #2F2F2F; /* covers the gap while the photo loads */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Scrim. Weighted to the bottom where the text sits, kept light at the top
 * so the photo is still legible as a photo. */
body.smtx-listing-page .sd-detail-details::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.82) 100%);
	pointer-events: none;
}

body.smtx-listing-page .sd-detail-details > .container {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: 48px;
	padding-bottom: 26px;
}

/* The author/avatar column: the avatar is a single shared placeholder across
 * all 465 bulk-imported listings (no per-business owner photo exists), and
 * the claim link it sits next to is rendered properly in the sidebar
 * instead. Hidden sitewide already; hidden here explicitly because this
 * container is now a flex row and an empty flex child still takes space. */
body.smtx-listing-page .sd-detail-details .sd-detail-author {
	display: none !important;
}

body.smtx-listing-page .sd-detail-info {
	flex: 1 1 auto;
	min-width: 0; /* lets long addresses wrap instead of forcing the row wide */
	text-align: left;
}

/* Title. 30px left-aligned, matching the measured reference -- was 60px and
 * centred, i.e. exactly double and in the wrong place.
 *
 * This is the H1 now. The theme renders the listing name twice by design
 * (once in its photo block, once here); with the photo block switched off,
 * this is the one that survives, and header-single-top.php promotes it from
 * H2 to H1 on its own in that case. The other copy -- printed by
 * content-geodirectory.php under the same condition -- is hidden further
 * down. */
body.smtx-listing-page .sd-detail-info .sd-entry-title {
	display: block;
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 600;
	color: #FFFFFF;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Meta row: category, phone, address on one line, as in the reference. */
body.smtx-listing-page .smtx-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}
body.smtx-listing-page .smtx-hero-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body.smtx-listing-page a.smtx-hero-meta-item:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
body.smtx-listing-page .smtx-hero-meta-item i {
	flex: 0 0 auto;
	font-size: 0.9em;
	opacity: 0.85;
}
body.smtx-listing-page .smtx-hero-status {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
/* Event equivalents of the place Open/Closed badge: when it next runs, and
 * what it costs. Same weight as that badge so the two post types read alike. */
body.smtx-listing-page .smtx-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 3px 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.6;
	backdrop-filter: blur(2px);
}

/* The sidebar "When" card renders GeoDirectory's own schedule markup, which
 * ships a Bootstrap-styled "More" toggle for long recurrences. Bring it in
 * line with the rest of the sidebar. */
body.smtx-listing-page .smtx-sidebar-when .geodir-schedule {
	margin-bottom: 4px;
	font-size: 14px;
}
body.smtx-listing-page .smtx-sidebar-when .geodir-schedule a {
	color: var(--smtx-text);
	text-decoration: none;
}
body.smtx-listing-page .smtx-sidebar-when .geodir-schedule a:hover {
	color: var(--smtx-primary);
}
body.smtx-listing-page .smtx-sidebar-when .btn {
	margin-top: 8px;
	padding: 4px 12px;
	border: 1px solid var(--smtx-border) !important;
	border-radius: var(--smtx-radius) !important;
	background: #FFFFFF !important;
	color: var(--smtx-primary) !important;
	font-size: 13px;
	font-weight: 600;
}

/* Rating slot -- empty until real reviews exist (smtx_hero_rating_html()
 * returns nothing), styled now so an import lights it up with no further
 * work. */
body.smtx-listing-page .smtx-hero-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: 10px;
	color: #FFFFFF;
}
body.smtx-listing-page .smtx-hero-rating-score {
	font-size: 22px;
	font-weight: 700;
}
body.smtx-listing-page .smtx-hero-rating-count {
	font-size: 13px;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
 * HERO ACTIONS
 *
 * Previously a large solid coral button, a full-width bordered block, two
 * oversized social glyphs and a pill, stacked vertically at four different
 * sizes -- which is what "Add to favorites is not sized properly" was
 * actually describing. The heart itself was never the problem; nothing in
 * the group matched anything else in it.
 *
 * Every item here is the same 38px-high pill regardless of which plugin
 * emitted its markup, so they cannot drift apart again. GD's favourite
 * toggle keeps its own markup (it is a live AJAX widget) and is styled to
 * match rather than reimplemented.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .sd-detail-cta {
	flex: 0 1 auto;
	min-width: 0;
}
body.smtx-listing-page .smtx-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
body.smtx-listing-page .smtx-hero-action-widget,
body.smtx-listing-page .smtx-hero-actions .smtx-recommend-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* The shared pill. Listed as one selector group on purpose -- three
 * different sources (ours, GD's favourite widget, the recommend button) all
 * resolving to identical geometry. */
body.smtx-listing-page .smtx-hero-actions a.smtx-hero-action,
body.smtx-listing-page .smtx-hero-actions .geodir-addtofav,
body.smtx-listing-page .smtx-hero-actions .smtx-recommend-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 38px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: var(--smtx-radius);
	background: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
body.smtx-listing-page .smtx-hero-actions a.smtx-hero-action:hover,
body.smtx-listing-page .smtx-hero-actions .geodir-addtofav:hover,
body.smtx-listing-page .smtx-hero-actions .smtx-recommend-btn:hover {
	background: rgba(255, 255, 255, 0.24) !important;
	border-color: #FFFFFF !important;
}

/* Icons inside the pills: match the label's size instead of GD's own `.h5`
 * heading sizing, and beat the inline `style="color:grey"` GD writes on the
 * un-favourited heart (invisible against a dark photo). The favourited
 * state sets its own inline colour on click and is left alone. */
body.smtx-listing-page .smtx-hero-actions .smtx-hero-action i,
body.smtx-listing-page .smtx-hero-actions .geodir-addtofav-icon i,
body.smtx-listing-page .smtx-hero-actions .smtx-recommend-btn i {
	font-size: 1em !important;
	line-height: 1 !important;
	color: inherit !important;
}
body.smtx-listing-page .smtx-hero-actions .geodir-addtofav.gd-fav-active .geodir-addtofav-icon i {
	color: #E8635A !important;
}

/* GD hides the favourite's text label with Bootstrap's .visually-hidden
 * (its built-in design is an icon plus a tooltip). That leaves a lone
 * unlabelled glyph sitting between labelled pills, so the label is restored
 * for this instance only. .visually-hidden itself is not redefined -- it is
 * a real accessibility utility used elsewhere. */
body.smtx-listing-page .smtx-hero-actions .geodir-fav-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: nowrap !important;
	border: 0 !important;
	font-size: inherit;
	color: inherit;
}
body.smtx-listing-page .smtx-hero-actions .gd-fav-info-wrap {
	display: inline-flex;
	margin: 0;
}
body.smtx-listing-page .smtx-hero-actions .smtx-recommend-count {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * STICKY SECTION NAV
 *
 * The reference's equivalent bar: full page width directly under the hero,
 * plain text links that jump to a section rather than swap a panel. Rendered
 * full-width from smtx-listing-hero.php (hooked to the theme's own
 * `sd-detail-details-after`) rather than from inside the content column, so
 * it spans the page the way the reference's does.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .smtx-jumpnav-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #FFFFFF;
	border-bottom: 1px solid var(--smtx-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	margin-bottom: 30px;
}
body.smtx-listing-page .smtx-jumpnav-bar .geodir-tab-head {
	margin: 0;
}
body.smtx-listing-page .smtx-jumpnav-bar ul.nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	/* GD ships the list with Bootstrap's `mb-3`; left alone it padded the bar
	 * out to 86px against the reference's ~53px. */
	margin: 0 !important;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	border: 0 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
body.smtx-listing-page .smtx-jumpnav-bar ul.nav::-webkit-scrollbar {
	display: none;
}
body.smtx-listing-page .smtx-jumpnav-bar .nav-item {
	margin: 0;
}
body.smtx-listing-page .smtx-jumpnav-bar .nav-link {
	display: block;
	padding: 16px 0 !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--smtx-text-muted) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
body.smtx-listing-page .smtx-jumpnav-bar .nav-link:hover,
body.smtx-listing-page .smtx-jumpnav-bar .nav-link.active {
	color: var(--smtx-primary) !important;
	border-bottom-color: var(--smtx-primary) !important;
}
body.smtx-listing-page .smtx-jumpnav-bar .nav-link i {
	display: none;
}

/* --------------------------------------------------------------------------
 * TWO-COLUMN BODY
 *
 * Measured against the reference: 750px content + 30px gap + 360px sidebar
 * inside the same 1140px container. Ours was 844 + a wide dead gutter + a
 * 276px sidebar with a vertical rule down the middle that the reference
 * does not have. The theme lays these out with floats and a percentage
 * width; flex is used instead so the sidebar cannot collapse or overlap when
 * the content column is short.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page article > .container {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
body.smtx-listing-page .entry-content.sidebar-active {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0; /* a flex item will not wrap its content below its intrinsic width without this */
	float: none !important;
	padding-top: 0 !important;
	border: 0 !important;
}
body.smtx-listing-page .sd-sidebar-right {
	flex: 0 0 360px;
	width: 360px !important;
	max-width: 360px;
	float: none !important;
	padding: 0 !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
 * SECTION CARDS
 *
 * Each section GeoDirectory renders in list mode becomes one white card, the
 * same relationship the reference uses. Styled by ROLE (`[role="tabpanel"]`
 * inside the list container) rather than by section name, so a section added
 * later in GD's admin picks this up with no CSS change.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .geodir-tabs-as-list > [role="tabpanel"] {
	background: #FFFFFF;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 24px 28px;
	margin-bottom: 24px !important;
	/* clears the sticky nav when a jump link lands on this section */
	scroll-margin-top: 74px;
}
body.smtx-listing-page .geodir-tabs-as-list > [role="tabpanel"]:last-child,
body.smtx-listing-page .geodir-tabs-as-list > [role="tabpanel"]:last-child {
	margin-bottom: 0 !important;
}
body.smtx-listing-page .geodir-tabs-as-list .gd-tab-list-title,
body.smtx-listing-page .geodir-tabs-as-list .gd-tab-list-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--smtx-text);
}
body.smtx-listing-page .geodir-tabs-as-list .gd-tab-list-title a,
body.smtx-listing-page .geodir-tabs-as-list .gd-tab-list-title a {
	color: inherit;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}
/* An empty section renders as a bare heading on a card; GD's own widget
 * already drops sections whose content resolves to nothing, so anything
 * still here has content. The anchor spacers it emits are zero-height
 * markers and should not add rhythm of their own. */
body.smtx-listing-page .geodir-tabs-as-list .geodir-tabs-anchor,
body.smtx-listing-page .geodir-tabs-as-list .hash-offset {
	display: block;
	height: 0;
}

/* Icon-only actions (the share links) are squares at the shared 38px height,
 * so the action row stays one line instead of wrapping to two. */
body.smtx-listing-page .smtx-hero-actions a.smtx-hero-action-iconly {
	width: 38px;
	padding: 0;
}

/* --------------------------------------------------------------------------
 * SECTION CONTENTS
 *
 * These sections are rendered by GeoDirectory's own widgets, whose output
 * goes through wpautop on the way into the page. wpautop inserts stray empty
 * <p> elements around block-level shortcode output, and those were showing as
 * unexplained vertical gaps inside the Map and Photos cards -- most visibly a
 * tall blank band above the map. Collapsing empty paragraphs is safer than
 * disabling wpautop for the whole content area, which would also strip real
 * paragraph breaks out of listing descriptions in the About section.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .geodir-tabs-as-list p:empty,
body.smtx-listing-page .geodir-tabs-as-list p:empty {
	display: none;
}

/* Photos: GD lays its gallery out as a 3-up Bootstrap grid regardless of how
 * many images there are, so a listing with one photo got a third-width
 * thumbnail with two empty columns beside it. Every listing currently has
 * exactly one image (the maximum across all 465), so the single-image case is
 * the normal case, not an edge case.
 *
 * GD helpfully stamps the count on the container as `geodir-images-n-{count}`,
 * so this targets the one- and two-image cases specifically and leaves the
 * 3-up grid alone for when listings do get real galleries. */
body.smtx-listing-page .geodir-images-n-1 > .col {
	flex: 0 0 100%;
	max-width: 100%;
}
body.smtx-listing-page .geodir-images-n-2 > .col {
	flex: 0 0 50%;
	max-width: 50%;
}
body.smtx-listing-page .geodir-images-n-1 .card,
body.smtx-listing-page .geodir-images-n-2 .card {
	border: 0;
	border-radius: var(--smtx-radius);
}

/* Map: GD floats a "stick to viewport" toggle tab above the canvas with a
 * negative margin, which reserved blank space at the top of the card.
 *
 * Hide the TOGGLE (.trigger_sticky) only -- not .stick_trigger_container,
 * which is its parent and also contains the map canvas itself
 * (#sticky_map_gd_map_canvas_post). Hiding the container collapsed the whole
 * map to an empty 109px card; the class name reads like a wrapper for the
 * trigger alone, but it wraps both. */
body.smtx-listing-page #post_map .geodir-map-wrap {
	border-radius: var(--smtx-radius);
}
body.smtx-listing-page #post_map .trigger_sticky {
	display: none !important;
}

/* Reviews: the comment form's "Leave a Review" heading is an h3 carrying
 * Bootstrap's `.h4`, which rendered larger than the section titles above it
 * and read as a competing heading rather than a sub-heading. */
body.smtx-listing-page #reviews .comment-reply-title,
body.smtx-listing-page #reviews .gd-comment-review-title {
	font-size: 15px !important;
	font-weight: 700;
	color: var(--smtx-text);
}
body.smtx-listing-page #reviews .must-log-in {
	margin-bottom: 0;
	font-size: 14px;
}

/* Amenities: two columns of checklist items, as in the reference. A long
 * value (a full URL, a long option name) must be allowed to wrap rather than
 * push its column wide -- a flex/grid item won't wrap below its intrinsic
 * content width without being told it may shrink. */
body.smtx-listing-page .smtx-amenity-item {
	min-width: 0;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * SIDEBAR CARDS -- aligned to the same card language as the sections above.
 * ------------------------------------------------------------------------ */

body.smtx-listing-page .sd-sidebar-right .smtx-sidebar-card {
	background: #FFFFFF;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 20px 22px;
	margin-bottom: 24px;
}
body.smtx-listing-page .sd-sidebar-right .smtx-sidebar-card h4 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smtx-text-muted);
}

/* --------------------------------------------------------------------------
 * MOBILE
 *
 * The old build broke badly here: the action cluster fell out of the photo
 * entirely onto white space below it (the -170px offset could not hold at
 * 390px), and the tab bar ran off the right edge with "Reviews" cut in half.
 * The hero is one element now, so its content cannot leave it; the nav
 * scrolls horizontally instead of clipping.
 * ------------------------------------------------------------------------ */

@media (max-width: 991px) {
	body.smtx-listing-page article > .container {
		display: block;
	}
	body.smtx-listing-page .sd-sidebar-right {
		flex: none;
		width: 100% !important;
		max-width: none;
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	body.smtx-listing-page .sd-detail-details {
		min-height: 340px;
	}
	body.smtx-listing-page .sd-detail-details > .container {
		display: block;
		padding-top: 40px;
		padding-bottom: 22px;
	}
	body.smtx-listing-page .sd-detail-info .sd-entry-title {
		font-size: 24px;
	}
	body.smtx-listing-page .smtx-hero-meta {
		gap: 6px 16px;
	}
	body.smtx-listing-page .smtx-hero-meta-item {
		font-size: 13px;
		/* A long street address has no break opportunity near the viewport
		 * edge at 390px; let it break rather than run off the screen. */
		overflow-wrap: anywhere;
	}
	/* Actions move under the meta row and align left with it, rather than
	 * staying right-aligned against nothing. */
	body.smtx-listing-page .sd-detail-cta {
		margin-top: 18px;
	}
	body.smtx-listing-page .smtx-hero-actions {
		justify-content: flex-start;
	}
	body.smtx-listing-page .geodir-tabs-as-list > [role="tabpanel"] {
		padding: 20px 18px;
	}
	body.smtx-listing-page .smtx-jumpnav-bar .nav-link {
		font-size: 13px;
	}
	body.smtx-listing-page .smtx-jumpnav-bar ul.nav {
		gap: 20px;
	}
}

/* ==========================================================================
 * CATEGORY / ARCHIVE / SEARCH RESULTS -- rebuilt 2026-08-12.
 *
 * Modelled on Cityo's full-grid demo (Daniel's pick) but CONTAINED to the
 * site's 1140px width rather than run edge-to-edge, so this page shares a
 * shell with the listing page instead of introducing a second one.
 *
 * That containment is why the grid is 3-up and not the reference's 4-up:
 * 1140px minus a 280px filter sidebar and a 30px gutter leaves 830px, which
 * at four columns is ~190px per card -- too narrow for an address line to sit
 * on one or two lines. At three columns each card is ~260px, which is close
 * to the reference's own card width (~290px on its box-3-columns demo).
 *
 * Before this, the page had no container at all: .entry-content was a
 * full-bleed float starting at x=0 with the filter panel floated off to the
 * right at x=1066, and the float was uncontained -- measured body height
 * 965px against a results list 2222px tall, i.e. the page reported itself
 * shorter than its own contents.
 * ========================================================================== */

body.smtx-archive-page {
	background: #F5F0E8;
}

/* Restore normal page scrolling.
 *
 * The theme's fixed-archive design is a PAIR of rules in its own style.css:
 *   body.geodir-fixed-archive { overflow: hidden }
 *   body.geodir-fixed-archive .sd-container .container .entry-content { overflow: scroll }
 * i.e. the window is deliberately locked because the results were meant to
 * scroll inside their own 900px pane beside a sticky map. The pane is gone
 * (see the results-column rule below), so the lock has to go with it --
 * without this the page simply doesn't scroll at all. */
body.smtx-archive-page,
body.smtx-archive-page.geodir-fixed-archive {
	overflow: visible !important;
	height: auto !important;
}
/* `article.type-page`, not a bare `article`: the listing CARD is also an
 * <article>, so a bare selector with !important stripped the white off every
 * card as well as the page wrapper. Only the wrapper (the WP page object
 * carrying `type-page`) should go transparent. */
body.smtx-archive-page article.type-page,
body.smtx-archive-page .content-box.content-single {
	background: transparent !important;
}

/* --------------------------------------------------------------------------
 * Full-width title band (title + breadcrumb), lifted above both columns by
 * smtx-archive.js -- see liftArchiveHeader().
 * ------------------------------------------------------------------------ */

body.smtx-archive-page .smtx-archive-header {
	background: #FFFFFF;
	border-bottom: 1px solid var(--smtx-border);
	padding: 22px 0;
	margin-bottom: 30px;
}
body.smtx-archive-page .smtx-archive-header .container {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}
body.smtx-archive-page .smtx-archive-header h1.entry-title {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--smtx-text);
}
body.smtx-archive-page .smtx-archive-header .smtx-breadcrumbs {
	margin: 6px 0 0 !important;
	font-size: 13px;
	color: var(--smtx-text-muted);
}

/* --------------------------------------------------------------------------
 * Two columns: filters left, results right.
 *
 * The theme emits the sidebar AFTER the content in source order and floats it
 * right. Rather than switch the theme's sidebar-position mod -- which on this
 * template swaps in a completely different slot that renders a map shortcode,
 * not the filter panel -- the columns are laid out with flex and the sidebar
 * is moved with `order`. Source order stays as-is, which also means the
 * results still come first for screen readers and crawlers.
 * ------------------------------------------------------------------------ */

/* !important on the width: this template runs under the theme's
 * `geodir-fixed-archive` body class, whose own rules force the container to
 * max-width:100% so the archive can run full-bleed beside a map. Measured
 * without it: container 1440px wide starting at x=0, i.e. not contained at
 * all. */
/* No category context -> no filters -> no sidebar column. Set by
 * smtx-archive.js (flagMissingFilters); a CSS-only approach can't ask
 * "does this element exist". */
body.smtx-archive-page.smtx-no-filters article > .container {
	grid-template-columns: minmax(0, 1fr) !important;
}
body.smtx-archive-page.smtx-no-filters .sd-sidebar-right,
body.smtx-archive-page.smtx-no-filters #sd-sidebar-right {
	display: none !important;
}
body.smtx-archive-page.smtx-no-filters .entry-content.sidebar-active {
	grid-column: 1 !important;
}

/* CSS Grid rather than flex for the two columns.
 *
 * Flex kept resolving ~60px short of the available width here: the theme
 * leaves stray margins on these elements and the free-space distribution
 * never settled where the arithmetic said it should. Grid states the two
 * track widths outright -- a fixed 280px filter column and whatever is left
 * -- so the result doesn't depend on the children's own box quirks.
 *
 * `direction` trick isn't needed: grid-column places the sidebar first while
 * leaving source order (results first) intact for screen readers. */
body.smtx-archive-page article > .container {
	display: grid !important;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;
	gap: 30px;
	max-width: 1170px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	float: none !important;
}
/* The results column.
 *
 * The theme ships this element (#sd-archive-map) as a FIXED-HEIGHT INTERNAL
 * SCROLL PANE -- measured height:900px, max-height:900px, overflow-y:scroll,
 * wrapping 2247px of results. That's deliberate in the theme's own half-map
 * archive design, where the listings scroll independently beside a sticky
 * map. We don't have a map on this layout, and it broke three things at once:
 * the window never scrolled (so the page reported itself 965px tall while its
 * contents were 2222px), continuous scroll could never trigger because its
 * sentinel never entered the viewport, and the drag-to-resize handle existed
 * to resize a pane nobody wanted.
 *
 * `flex: 1 1 0%` rather than `auto`: with an auto basis the column sized to
 * its content and left 71px of the row unused. */
body.smtx-archive-page .entry-content.sidebar-active {
	grid-column: 2 !important;
	grid-row: 1 !important;
	order: 2 !important;
	flex: 1 1 0% !important;
	/* Stretch to the full 830px track rather than shrink-wrapping its
	 * contents. The track was always 830px, but with an auto width this item
	 * sized to its content -- fine in grid view (three columns of cards are
	 * wide), wrong in list view, where a single column of cards is only 567px
	 * and dragged the whole results column in with it. */
	justify-self: stretch !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	float: none !important;
	padding: 0 !important;
	border: 0 !important;
}
/* The theme's drag-to-resize handle for the archive map. It's a direct child
 * of the flex row with no order set, so it defaulted to order:0 and sat
 * BEFORE both real columns -- measured as a 71px shove that pushed the
 * sidebar off the container's left edge, and visible as a stray red grab
 * handle floating in the middle of the page. There's no map on this layout
 * for it to resize. */
body.smtx-archive-page .sd-archive-resizer {
	display: none !important;
}

body.smtx-archive-page #sd-sidebar-right,
body.smtx-archive-page .sd-sidebar-right {
	grid-column: 1 !important;
	grid-row: 1 !important;
	order: 1 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	/* The theme leaves an 11.39px left margin on this element; inside a fixed
	 * grid track that just shrinks the panel off its own column edge. */
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
 * Filter panel -- restyled to the reference's look: a white card of hairline-
 * separated rows, each a plain label with a chevron, rather than the boxed
 * cream accordion. Category scoping is unchanged: the field list still comes
 * from smtx_get_fields_for_terms(), so each category shows only its own
 * fields.
 * ------------------------------------------------------------------------ */

body.smtx-archive-page .smtx-filter-panel {
	background: #FFFFFF;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	padding: 6px 20px 20px;
}
body.smtx-archive-page .smtx-filter-field,
body.smtx-archive-page .smtx-filter-more {
	border-bottom: 1px solid var(--smtx-border);
	padding: 0;
}
body.smtx-archive-page .smtx-filter-field > summary,
body.smtx-archive-page .smtx-filter-more > summary {
	padding: 14px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--smtx-text);
}
/* Chevron instead of the plus/rotate marker. */
body.smtx-archive-page .smtx-filter-field > summary::after,
body.smtx-archive-page .smtx-filter-more > summary::after {
	content: "\f078"; /* fa-chevron-down */
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
	font-size: 0.7rem;
	color: var(--smtx-text-muted);
	transform: none;
	transition: transform 0.15s ease;
}
body.smtx-archive-page .smtx-filter-field[open] > summary::after,
body.smtx-archive-page .smtx-filter-more[open] > summary::after {
	transform: rotate(180deg);
}
/* Apply Filters is a fixed flex sibling below the scrolling field list now
 * (see .smtx-filter-panel/.smtx-filter-fields base rules), not the last
 * item inside it -- always visible regardless of scroll position, with no
 * dependency on position:sticky finding the right containing block (the
 * previous version silently never worked: confirmed live at ~3100px
 * off-screen after scrolling an expanded panel, on both desktop and
 * mobile). The top border + shadow read as its own footer area, visually
 * outside the scrollable box above it. */
body.smtx-archive-page .smtx-apply-filters {
	z-index: 2;
	background: var(--smtx-primary);
	border-radius: 999px;
	padding: 0.8rem;
	margin-top: 0.75rem;
	border-top: 1px solid var(--smtx-border);
	padding-top: 1rem;
	box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, 0.15);
}
body.smtx-archive-page .smtx-apply-filters:hover {
	background: var(--smtx-primary-dark);
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Toolbar: result count / view toggle / sort
 * ------------------------------------------------------------------------ */

body.smtx-archive-page .smtx-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
body.smtx-archive-page .smtx-archive-count {
	font-size: 14px;
	color: var(--smtx-text-muted);
}
body.smtx-archive-page .smtx-archive-count strong {
	color: var(--smtx-text);
}
body.smtx-archive-page .smtx-archive-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}
body.smtx-archive-page .smtx-view-toggle {
	display: inline-flex;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	overflow: hidden;
	background: #FFFFFF;
}
body.smtx-archive-page .smtx-view-btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--smtx-text-muted);
	cursor: pointer;
}
body.smtx-archive-page .smtx-view-btn + .smtx-view-btn {
	border-left: 1px solid var(--smtx-border);
}
body.smtx-archive-page .smtx-view-btn.is-active {
	background: var(--smtx-primary);
	color: #FFFFFF;
}
body.smtx-archive-page .smtx-sort-select {
	height: 38px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	background: #FFFFFF;
	color: var(--smtx-text);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Results grid
 *
 * CSS Grid rather than Bootstrap's row-cols system. GeoDirectory's loop emits
 * `.row.row-cols-md-N` and its own view switcher rewrites that N at runtime;
 * defining the columns here instead means the layout is stated in one place
 * and can't be silently changed by a stored localStorage column count.
 * ------------------------------------------------------------------------ */

body.smtx-archive-page .geodir-loop-container > .row,
.geodir_location_listing > .row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 !important;
}
/* The theme carries a legacy clearfix on .row -- ::before and ::after with
 * `content: " "; display: table`. A pseudo-element with generated content on
 * a grid container becomes a real grid item, so the two of them silently ate
 * the first and last cells and shunted every listing one place along. There
 * is nothing to clear here; the grid handles its own layout. */
body.smtx-archive-page .geodir-loop-container > .row::before,
body.smtx-archive-page .geodir-loop-container > .row::after,
.geodir_location_listing > .row::before,
.geodir_location_listing > .row::after {
	content: none !important;
	display: none !important;
}

/* wpautop wraps GeoDirectory's loop output and leaves empty <p> elements
 * behind. In a flex row they collapsed harmlessly; as grid items they each
 * claim a cell -- measured one 419px-tall empty paragraph sitting in the
 * first cell, pushing the first listing sideways and opening a large hole at
 * the top of the results. */
body.smtx-archive-page .geodir-loop-container > .row > p:empty,
body.smtx-archive-page .geodir-loop-container > .row > br {
	display: none !important;
}
body.smtx-archive-page .geodir-loop-container > .row > .col,
body.smtx-archive-page .geodir-loop-container > .row > .geodir-post,
.geodir_location_listing > .row > .col,
.geodir_location_listing > .row > .geodir-post {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * The card
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * NOTE ON SCOPING: the card rules below are intentionally NOT scoped to
 * body.smtx-archive-page. GeoDirectory renders the archive-item template from
 * more than one place -- [gd_loop] on the archive/search pages, but also
 * [gd_listings] on the Location page (14) and anywhere that widget is used.
 * Those surfaces don't carry the archive body class, so a page-scoped card
 * rendered there completely unstyled (measured: transparent background, no
 * border, no radius, display:block). The card is a component; only the page
 * LAYOUT around it is page-scoped.
 * ------------------------------------------------------------------------ */

.smtx-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #FFFFFF;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.smtx-card:hover {
	box-shadow: 0 6px 18px rgba(44, 110, 127, 0.12);
	transform: translateY(-2px);
}
.smtx-card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--smtx-bg-alt);
	overflow: hidden;
}
.smtx-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.smtx-card-rating-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.65);
	color: #FFFFFF;
	font-size: 13px;
}
.smtx-card-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.smtx-card-body {
	flex: 1 1 auto;
	padding: 16px 18px;
	min-width: 0;
}
.smtx-card-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	/* San Marcos business names run long ("Commemorative Air Force Central
	 * Texas Wing"); the card is a fixed-width grid cell, so the title has to
	 * be allowed to wrap rather than force the column wider. */
	overflow-wrap: break-word;
}
.smtx-card-title a {
	color: var(--smtx-text);
	text-decoration: none;
}
.smtx-card-title a:hover {
	color: var(--smtx-primary);
}
.smtx-card-meta {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--smtx-text-muted);
	min-width: 0;
	overflow-wrap: break-word;
}
.smtx-card-meta i {
	flex: 0 0 auto;
	margin-top: 0.25em;
	opacity: 0.7;
}
.smtx-card-meta a {
	color: inherit;
	text-decoration: none;
}
.smtx-card-meta a:hover {
	color: var(--smtx-primary);
}
.smtx-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 18px;
	border-top: 1px solid var(--smtx-border);
	min-width: 0;
}
.smtx-card-footer-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}
.smtx-card-cat {
	font-size: 12px;
	font-weight: 600;
	color: var(--smtx-primary);
	text-decoration: none;
}
.smtx-card-cat:hover {
	text-decoration: underline;
}
.smtx-card-status .smtx-open-status {
	font-size: 0.75rem !important;
}
/* GD's favourite toggle, sized to sit in the footer row rather than at its
 * native heading size. */
.smtx-card-actions .geodir-addtofav {
	font-size: 14px !important;
	color: var(--smtx-text-muted) !important;
}
.smtx-card-actions .geodir-addtofav i {
	font-size: 1em !important;
}

/* --------------------------------------------------------------------------
 * List view -- the reference's second layout: one full-width row per listing,
 * photo left. One class on the grid container; the card markup is identical.
 * ------------------------------------------------------------------------ */

body.smtx-archive-page .geodir-loop-container > .row.smtx-view-list {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
/* In list view the cards become wide horizontal rows, and the intrinsic
 * max-content width of that chain was pulling the results column in to 569px
 * instead of its 830px track. Pinning each wrapper to 100% of its parent
 * keeps the column at the track width regardless of card shape. */
body.smtx-archive-page .wp-block-geodirectory-geodir-widget-loop,
body.smtx-archive-page .geodir-loop-container,
body.smtx-archive-page .geodir-loop-container > .row {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}
.smtx-view-list .smtx-card {
	flex-direction: row;
}
.smtx-view-list .smtx-card-media {
	flex: 0 0 260px;
	aspect-ratio: auto;
}
.smtx-view-list .smtx-card-title {
	font-size: 18px;
}

/* --------------------------------------------------------------------------
 * Continuous scroll
 *
 * Pagination is hidden rather than removed: the script reads the next page's
 * URL straight out of it, and it stays crawlable and usable if the script
 * fails to load.
 * ------------------------------------------------------------------------ */

/* Both selectors on purpose: the Gutenberg block wrapper
 * (.wp-block-...-loop-paging) only exists when the template page uses the
 * block form of the widget. Rewriting the archive template to plain
 * shortcodes removed that wrapper, so the rule stopped matching and the
 * pager reappeared at the foot of every archive. .geodir-loop-paging-container
 * is emitted by the widget itself either way.
 *
 * Clipped rather than display:none: smtx-archive.js reads the next page's URL
 * out of this markup, and it stays crawlable and usable without JS. */
body.smtx-archive-page .geodir-loop-paging-container,
body.smtx-archive-page .wp-block-geodirectory-geodir-widget-loop-paging {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
body.smtx-archive-page .smtx-scroll-sentinel {
	height: 1px;
}
body.smtx-archive-page .smtx-scroll-status {
	padding: 24px 0;
	text-align: center;
	font-size: 14px;
	color: var(--smtx-text-muted);
	min-height: 1px;
}
body.smtx-archive-page .smtx-scroll-status.is-loading::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	border: 2px solid var(--smtx-border);
	border-top-color: var(--smtx-primary);
	border-radius: 50%;
	animation: smtx-spin 0.7s linear infinite;
}
@keyframes smtx-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	body.smtx-archive-page .smtx-scroll-status.is-loading::before {
		animation: none;
	}
	.smtx-card:hover {
		transform: none;
	}
}
body.smtx-archive-page .smtx-scroll-retry {
	margin-left: 8px;
	padding: 6px 14px;
	border: 1px solid var(--smtx-border);
	border-radius: var(--smtx-radius);
	background: #FFFFFF;
	color: var(--smtx-text);
	font-size: 13px;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	body.smtx-archive-page .geodir-loop-container > .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	/* !important throughout: the desktop rules above need it to beat the
	 * theme's own fixed-archive layout, so the stacking rules have to match
	 * that weight or they lose to their own base rule. */
	body.smtx-archive-page article > .container {
		display: block !important;
		max-width: 100% !important;
	}
	body.smtx-archive-page .entry-content.sidebar-active,
	body.smtx-archive-page #sd-sidebar-right,
	body.smtx-archive-page .sd-sidebar-right {
		grid-column: auto !important;
		grid-row: auto !important;
	}
	body.smtx-archive-page .entry-content.sidebar-active {
		width: 100% !important;
		float: none !important;
	}
	/* The sidebar is deliberately NOT restyled at this width. Mobile already
	 * has a working filter treatment from the Phase 5 build: the panel is
	 * hidden behind a pinned FILTERS button and opens full-screen, using the
	 * theme's own body.sd-map-only toggle. Forcing the sidebar into the
	 * document flow here fought that mechanism -- it landed at 186px wide
	 * (shrink-wrapped, because the theme still floats it) or overflowed the
	 * viewport at 100%. Leaving it alone lets the existing toggle work. */
	/* State the mobile filter behaviour explicitly rather than relying on the
	 * theme's default: hidden until the pinned FILTERS button sets
	 * body.sd-map-only, then full-screen. Left to itself the panel sat
	 * permanently in the flow at 186px wide, squeezed beside the results. */
	body.smtx-archive-page .sd-sidebar-right {
		display: none !important;
	}
	/*
	 * 2026-08-14: the rule below set position:absolute but never gave it a
	 * `top` -- an absolutely-positioned element with no top/bottom keeps its
	 * normal in-flow (static) position, so the panel never actually moved.
	 * It sat exactly where it would have anyway: below the full results
	 * list, ~5900px down the page. Tapping FILTERS changed the button label
	 * and nothing else was visibly different, which is not "clunky", it's
	 * non-functional -- confirmed directly (bounding box y:5940 against an
	 * 844px viewport). Fixed as a real full-screen overlay: position:fixed
	 * (viewport-relative, so it doesn't matter how tall the results column
	 * is), covering the screen below the pinned controls bar, with its own
	 * scroll so a long field list doesn't get clipped.
	 */
	body.smtx-archive-page.sd-map-only .sd-mobile-search-controls {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 1000 !important;
		background: #fff !important;
		padding: 10px 15px !important;
		margin: 0 !important;
		border-bottom: 1px solid var(--smtx-border, #e4d9c4) !important;
	}
	body.smtx-archive-page.sd-map-only .sd-sidebar-right {
		display: block !important;
		float: none !important;
		position: fixed !important;
		top: 58px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		z-index: 999 !important;
	}
	/* Height has to cascade through the theme's own .sidebar wrapper for the
	 * panel's internal flex split (scrolling field list + fixed Apply
	 * Filters button below it) to have a real bounded box to work within --
	 * without this the wrapper only takes its content's natural height and
	 * the flex-fields/flex-shrink split below has nothing to divide. */
	body.smtx-archive-page.sd-map-only .sd-sidebar-right .sidebar {
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
	}
	body.smtx-archive-page.sd-map-only .smtx-filter-panel {
		max-width: none !important;
		height: 100% !important;
		padding: 16px 15px 24px !important;
	}
	body.smtx-archive-page.sd-map-only .smtx-filter-fields {
		overflow-y: auto !important;
	}

	body.smtx-archive-page * {
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	body.smtx-archive-page .geodir-loop-container > .row,
	body.smtx-archive-page .geodir-loop-container > .row.smtx-view-list {
		grid-template-columns: minmax(0, 1fr);
	}
	/* At this width a photo-left row leaves too little for the details, so
	 * list view falls back to the same stacked card as grid view. */
	.smtx-view-list .smtx-card {
		flex-direction: column;
	}
	.smtx-view-list .smtx-card-media {
		flex: none;
		aspect-ratio: 16 / 10;
	}
	body.smtx-archive-page .smtx-archive-header h1.entry-title {
		font-size: 22px;
	}
}