/* ==========================================================================
   Motomarine: WordPress glue for the design system.
   Small rules the static design pages never needed: admin bar offset, the
   Theme Settings sticky switch, and WordPress's own classes.
   ========================================================================== */

/* Sticky header sits under the admin bar when logged in */
.admin-bar .cs-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .cs-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens */
	.admin-bar .cs-header {
		top: 0;
	}
}

/* Theme Settings > Header > Sticky header off */
body:not(.mm-sticky-header) .cs-header {
	position: relative;
}

/* Current page in the primary menu */
.cs-nav__item.is-current > .cs-nav__link {
	color: var(--primary);
}

/* Footer without the opening hours column: four columns share the width */
@media (min-width: 1200px) {
	.cs-footer__grid--5.mm-footer__grid--no-hours {
		grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	}
}

/* Legal menu in the copyright bar keeps the design's list styling */
.cs-footer__bottom ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The solid header's backdrop blur turns it into the containing block for fixed children, which squashed the
   mobile menu drawer and its backdrop to the header's height. Drop the blur while the menu is open. */
.cs-header:has(.cs-nav.is-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}


/* Image footer with its call to action switched off (Page options): the normal footer top spacing */
.cs-footer--bg.mm-footer--no-cta {
	padding-top: 85px;
}
@media (max-width: 991px) {
	.cs-footer--bg.mm-footer--no-cta {
		padding-top: 40px;
	}
}

/* Bootstrap icon in a teaser icon slot (the design uses inline SVGs there) */
.cs-teaser__icon > .bi {
	font-size: 44px;
	line-height: 1;
}
@media (max-width: 575px) {
	.cs-teaser__icon > .bi {
		font-size: 36px;
	}
}

/* Block Settings: top and bottom spacing (Default keeps the design's own spacing) */
.mm-pt-none { padding-top: 0 !important; }
.mm-pb-none { padding-bottom: 0 !important; }
.mm-pt-small { padding-top: var(--section-y-sm) !important; }
.mm-pb-small { padding-bottom: var(--section-y-sm) !important; }
.mm-pt-large { padding-top: calc(var(--section-y) * 1.6) !important; }
.mm-pb-large { padding-bottom: calc(var(--section-y) * 1.6) !important; }

/* Page title when a page's header is switched off (Page options): in the content width, design heading size */
.site-main .entry-header {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--section-y) 16px 0;
	box-sizing: border-box;
}
.site-main .entry-header .entry-title {
	margin: 0;
	font-size: var(--h1);
	line-height: 1.1;
}

/* A full-bleed image band or hero ending the page keeps a gap above the footer's call to action (its own section has
   no padding). Without a footer CTA the band sits right on the footer, as in the design pages. */
.mm-has-footer-cta .entry-content > .cs-cta-image:last-child,
.mm-has-footer-cta .entry-content > .cs-hero:last-child {
	margin-bottom: var(--section-y);
}

/* ---------- Overlay header (Theme Settings > Header > Overlay) ---------- */
/* The bar is positioned inside the page wrapper, so it starts under the admin bar when logged in */
.site {
	position: relative;
}
/* The design's overlay header scrolls away with the page. With Sticky header on it pins to the top once
   scrolled, as a navy frosted bar like the Dark header (white text and logo stay readable); the pinned
   look itself is set further down, next to Show on scroll up. */
.mm-sticky-header:not(.mm-sticky-reveal) .cs-header--overlay.is-stuck {
	animation: mm-header-in .3s ease;
}
@keyframes mm-header-in {
	from { transform: translateY(-100%); }
	to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-sticky-header:not(.mm-sticky-reveal) .cs-header--overlay.is-stuck {
		animation: none;
	}
}

/* About page headers: the photo hangs below the banner, so the first block clears it
   (the design does this with ".cs-banner--soft + .cs-section"; in WordPress the blocks sit inside the article) */
.cs-banner--soft + article .entry-content > .cs-section:first-child {
	padding-top: 170px;
}
.cs-banner--soft + article:not(:has(.entry-content > .cs-section:first-child)) {
	padding-top: 100px;
}
@media (max-width: 991px) {
	.cs-banner--soft + article .entry-content > .cs-section:first-child {
		padding-top: 130px;
	}
	.cs-banner--soft + article:not(:has(.entry-content > .cs-section:first-child)) {
		padding-top: 70px;
	}
}
@media (max-width: 575px) {
	.cs-banner--soft + article .entry-content > .cs-section:first-child {
		padding-top: 96px;
	}
	.cs-banner--soft + article:not(:has(.entry-content > .cs-section:first-child)) {
		padding-top: 40px;
	}
}

/* About page headers were designed only under the overlay header (190px top padding); under the Light or Dark header
   the breadcrumb's negative top margin pulled it up under the header. Same clearance as the other banners. */
body:not(.mm-header-overlay) .cs-banner--soft {
	padding-top: 64px;
}
@media (max-width: 991px) {
	body:not(.mm-header-overlay) .cs-banner--soft {
		padding-top: 56px;
	}
}
@media (max-width: 575px) {
	body:not(.mm-header-overlay) .cs-banner--soft {
		padding-top: 40px;
	}
}

/* main.js marks every header scrolled past 20px as .is-stuck; the overlay header only turns navy when it is pinned
   (below), otherwise it stays transparent while it scrolls away (Sticky off, or before Show on scroll up kicks in) */
.cs-header--modern.cs-header--overlay.is-stuck {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.mm-sticky-header:not(.mm-sticky-reveal) .cs-header--overlay.is-stuck,
.mm-sticky-reveal .cs-header--overlay.mm-past {
	position: fixed;
	left: 0;
	right: 0;
	background: rgba(15, 23, 43, .92);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- Show on scroll up (Theme Settings > Header) ---------- */
.mm-sticky-reveal .cs-header {
	transition: transform .3s ease, box-shadow .2s ease, background .2s ease;
}
.mm-sticky-reveal .cs-header--overlay.is-stuck {
	animation: none;
}
.mm-sticky-reveal .cs-header.mm-past.mm-hidden {
	transform: translateY(-100%);
	box-shadow: none;
}
/* Hidden under the admin bar too */
.admin-bar.mm-sticky-reveal .cs-header.mm-past.mm-hidden {
	transform: translateY(calc(-100% - 46px));
}
@media (prefers-reduced-motion: reduce) {
	.mm-sticky-reveal .cs-header {
		transition: none;
	}
}

/* Uploaded icon images (blocks' Icon / Image switch) sit where a Bootstrap icon would, at the icon's size: the <i>
   wrapper takes the design's icon rules (box, font-size), the image is 1em */
.mm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	line-height: 1;
	vertical-align: -.125em;
}
.mm-icon-img {
	display: inline-block;
	width: 1em;
	height: 1em;
	object-fit: contain;
	vertical-align: -.125em;
}
.mm-icon > .mm-icon-img {
	display: block;
}
/* Slots where the design draws an inline SVG line icon (.cs-svg, 24 grid) instead of an <i>: the image takes the SVG's
   size, so the design's own icons (assets/img/icons/*.svg) drop in at the designed size */
.cs-teaser__icon:not(.cs-contact-card *) > .mm-icon {
	font-size: 48px;
}
@media (max-width: 575px) {
	.cs-teaser__icon:not(.cs-contact-card *) > .mm-icon {
		font-size: 40px;
	}
}
.cs-teasers--modern .cs-teaser__icon:not(.cs-contact-card *) > .mm-icon {
	font-size: 32px;
}
.cs-teasers--modern .cs-teaser--row .cs-teaser__icon:not(.cs-contact-card *) > .mm-icon {
	font-size: 28px;
}
.cs-imgtext__teaser .cs-teaser__icon > .mm-icon {
	font-size: 22px;
}
.cs-imgtext__feature-icon > .mm-icon,
.cs-stat-tile__icon > .mm-icon {
	font-size: 28px;
}

/* WordPress gives lazy images with sizes="auto" a 3000×1500 placeholder size (contain-intrinsic-size); design images
   that fill their box (height: 100%) would grow to it. Let them size from the layout instead. */
img[sizes^="auto" i] {
	contain-intrinsic-size: auto none;
}

/* WordPress's text for screen readers only (search labels, "Edit <title>" and similar) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: #21759b;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
}

/* Blocks back to back on the same background: the second drops its top padding so the gap stays one rhythm, as the
   design does for sections (base.css targets "main > .cs-section"; blocks sit inside the page content). */
.entry-content > .cs-section:not(.bg-lighter):not(.bg-dark):not(.cs-section--flush):not([class*="cs-section--gradient"]):not(.cs-cta-image):not(.cs-cta-fade):not(.mm-pt-none) + .cs-section:not(.bg-lighter):not(.bg-dark):not(.cs-section--flush):not([class*="cs-section--gradient"]):not(.cs-cta-image):not(.cs-cta-fade):not(.mm-pt-large):not(.mm-pt-small),
.entry-content > .cs-section.bg-lighter:not(.cs-section--flush) + .cs-section.bg-lighter:not(.cs-section--flush),
.entry-content > .cs-section.bg-dark:not(.cs-section--flush) + .cs-section.bg-dark:not(.cs-section--flush) {
	padding-top: 0;
}

/* Breadcrumb bar (page header off): the first section under it starts closer, as the design's
   "main > .cs-crumbbar + .cs-section" (the sections sit inside the article here). */
.cs-crumbbar + article .entry-content > .cs-section:not(.cs-section--flush):first-child {
	padding-top: 40px;
}
@media (max-width: 767px) {
	.cs-crumbbar + article .entry-content > .cs-section:not(.cs-section--flush):first-child {
		padding-top: 28px;
	}
}

/* Bootstrap icons in the modern teaser icon circles (e.g. boat page "Services offered"): the design's line icons are
   drawn at 32px there, so a font icon sits a little smaller to look the same weight */
.cs-teasers--modern .cs-teaser__icon > .bi,
.cs-single-services .cs-teaser__icon > .bi {
	font-size: 28px;
}

/* Boat feed (inc/boat-feed.php): hidden parts stay hidden over the design's display rules; results dim while loading */
.cs-active-filters[hidden],
.cs-feed-pagination[hidden] {
	display: none !important;
}
.mm-feed__form.is-loading [data-feed-results] {
	opacity: .55;
	transition: opacity .15s;
}
.cs-active-filters .cs-tag {
	border: 0;
	font: inherit;
	cursor: pointer;
}
.cs-filter .cs-check.is-empty,
.cs-filter__group[hidden],
.cs-filter__more[hidden] {
	display: none;
}
.mm-feed__empty {
	padding: 48px 0;
	text-align: center;
	color: var(--muted);
}
.cs-side-widget .cs-linkgrid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Long filter options wrap under themselves instead of running into the next column */
.cs-filter__options--list .cs-check {
	align-items: flex-start;
	white-space: normal;
	line-height: 1.4;
}
.cs-filter__options--list .cs-check__box {
	flex: 0 0 auto;
	margin-top: -1px;
}
.cs-filter__options--grid .cs-check {
	min-width: 0;
}

/* Boat feed: Typesense's search time after the result count */
.mm-feed__time {
	color: var(--muted);
	font-size: .9em;
}

/* Boat feed: the subcategory chips / links in the sidebar mark the page you are on */
.cs-motorlist a.is-active,
.cs-linkgrid a.is-active {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--white);
}
.cs-motorlist a.is-active .cs-motorlist__hp {
	color: var(--white);
}

/* Boat feed filters on phones and tablets: a full-screen panel (nothing behind it shows), with Show results at the bottom */
.mm-feed__done {
	display: none;
}
@media (max-width: 991.98px) {
	.mm-feed .cs-filter {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000; /* Over the site header and the admin bar */
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		padding: 20px 20px 0;
		border: 0;
		transform: none;
		box-shadow: none;
		overscroll-behavior: contain;
	}
	.mm-feed .cs-filter__head {
		position: sticky;
		top: -20px;
		z-index: 2;
		margin: -20px -20px 20px;
		padding: 16px 20px;
		background: var(--white);
		border-bottom: 1px solid var(--border);
	}
	.mm-feed__done {
		position: sticky;
		bottom: 0;
		z-index: 2;
		display: block;
		margin: 24px -20px 0;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
		background: var(--white);
		border-top: 1px solid var(--border);
	}
	.mm-feed__done .cs-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Boat feed: a smaller sort select, so the results bar is less tall */
.mm-feed .cs-listing-bar {
	padding: 10px 0;
}
.mm-feed .cs-listing-bar__tools .cs-select {
	height: 38px;
	min-width: 140px;
	padding-left: 12px;
	padding-right: 36px;
	font-size: 13px;
	background-position: right 12px center;
	background-size: 12px;
}
.mm-feed__sortlabel {
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
}

/* Sidebar and Filters titles: a card header like the boat page panels ("What is included"): edge to edge, a hairline
   under it and a short red bar on the box's left edge. Font sizes stay as they are. */
.cs-side-widget__title,
.cs-filter__head {
	position: relative;
	margin: -24px -24px 18px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--border-light);
}
.cs-side-widget__title::before,
.cs-filter__head::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -1px;
	bottom: auto;
	width: 3px;
	height: 24px;
	background: var(--primary);
	transform: translateY(-50%);
}
.cs-filter__head h3::before,
.cs-filter__head .h5::before {
	content: none;
}
.cs-side-widget__title {
	margin-bottom: 6px; /* The links have their own padding */
}
.cs-filter__head + .cs-filter__group {
	border-top: 0; /* The header's hairline is the divider */
}
@media (max-width: 991.98px) {
	.cs-side-widget__title {
		margin: -16px -10px 0;
		padding: 12px 10px 12px 14px;
	}
	.cs-side-widget:not(.is-open) .cs-side-widget__title {
		border-bottom: 0;
	}
	.cs-side-widget:not(.is-open) {
		padding-bottom: 0;
	}
	.cs-side-widget.is-open .cs-side-widget__title {
		margin-bottom: 12px;
	}
}

/* CTA / Promo split: the bottom line is plain text, without the grey pill behind it */
.cs-cta-promo--modern .cs-cta-promo__foot p {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* CTA / Contact pill: with long text the text wraps and the button keeps its size (one line) */
.cs-cta-pill p {
	flex: 0 1 auto;
	min-width: 0;
}
.cs-cta-pill .cs-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Header between the drawer (≤ 1050px) and 1200px: a slightly tighter menu so a full menu still fits beside the actions */
@media (min-width: 1051px) and (max-width: 1199.98px) {
	.cs-header .cs-nav__link {
		padding: 0 6px;
		font-size: 13px;
	}
	.cs-header__inner {
		gap: 12px;
	}
}

/* Contact pill: room on the left for the phone icon's pulse ring, also when long text makes the pill taller */
@media (min-width: 768px) {
	.cs-cta-pill--modern {
		padding-left: 24px;
	}
}

/* Header at 1051–1079px: the tightest menu, still one line */
@media (min-width: 1051px) and (max-width: 1079.98px) {
	.cs-header .cs-nav__link {
		padding: 0 4px;
		font-size: 12.5px;
	}
	.cs-header .cs-logo__img {
		height: 24px;
	}
}

/* Page header under the transparent header: less space under the content (the design has 80px) */
.cs-overlaybar ~ main .cs-banner:not(.cs-banner--soft) {
	padding-bottom: 50px;
}
@media (max-width: 991.98px) {
	.cs-overlaybar ~ main .cs-banner:not(.cs-banner--soft) {
		padding-bottom: 42px;
	}
}
@media (max-width: 575.98px) {
	.cs-overlaybar ~ main .cs-banner:not(.cs-banner--soft) {
		padding-bottom: 36px;
	}
}

/* Page header: the space under the breadcrumb comes down with the bottom space (65px in the design) */
.cs-banner--modern.cs-banner--compact:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb,
.cs-overlaybar ~ main .cs-banner--modern:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb {
	margin-bottom: 35px;
}
@media (max-width: 1050px) {
	.cs-overlaybar ~ main .cs-banner--modern:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb {
		margin-bottom: 30px;
	}
}
@media (max-width: 991px) {
	.cs-banner--modern.cs-banner--compact:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb,
	.cs-overlaybar ~ main .cs-banner--modern:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb {
		margin-bottom: 28px;
	}
}
@media (max-width: 575px) {
	.cs-banner--modern.cs-banner--compact:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb,
	.cs-overlaybar ~ main .cs-banner--modern:not(.cs-banner--soft) .cs-breadcrumb.cs-breadcrumb {
		margin-bottom: 22px;
	}
}

/* Page header Google rating: plain, no pill, border or blur (other rating badges keep the design's look) */
.cs-banner--modern .cs-banner__rating,
.cs-banner--modern.cs-banner--image .cs-banner__rating,
.cs-banner--modern.cs-banner--dark .cs-banner__rating {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Value your trade tab (inc/trade-tab.php): left edge, slides in on scroll, opens on hover / tap. */
.mm-trade {
	--trade-box: 200px;
	position: fixed;
	top: 66%;
	left: 0;
	z-index: 900;
	display: flex;
	align-items: stretch;
	visibility: hidden;
	transform: translate(calc(-100% - 12px), -50%);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s;
}
.mm-trade.is-shown {
	visibility: visible;
	transform: translate(calc(-1 * var(--trade-box)), -50%);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.mm-trade.is-shown.is-open {
	transform: translate(0, -50%);
}
.mm-trade__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: var(--trade-box);
	padding: 16px 18px;
	text-align: center;
	background: var(--white, #fff);
	border: 1px solid var(--border);
	border-right: 0;
	box-shadow: 0 12px 32px rgba(15, 23, 43, .14);
}
.mm-trade__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--secondary);
}
.mm-trade__go {
	min-width: 84px;
}
.mm-trade__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 65px;
	padding: 14px 6px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--heading);
	border: 1px solid rgba(255, 255, 255, .16);
	border-left: 0;
	border-radius: 0 12px 12px 0;
	box-shadow: 0 12px 32px rgba(15, 23, 43, .22);
	transition: background-color .2s;
}
.mm-trade__tab:hover,
.mm-trade__tab:focus-visible,
.mm-trade.is-open .mm-trade__tab {
	color: #fff;
	background: var(--secondary);
}
.mm-trade__title {
	position: relative;
	padding-bottom: 8px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}
.mm-trade__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 24px;
	height: 2px;
	margin-left: -12px;
	background: var(--primary);
}
.mm-trade__note {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .78);
}
.mm-trade__num {
	display: block;
	margin: 1px 0;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
@media (max-width: 767px) {
	/* Phones: a slim strip on the edge with the heading turned on its side; the note shows in the box instead. */
	.mm-trade {
		--trade-box: 180px;
		top: auto;
		bottom: 110px;
		transform: translateX(calc(-100% - 12px));
	}
	.mm-trade.is-shown {
		transform: translateX(calc(-1 * var(--trade-box)));
	}
	.mm-trade.is-shown.is-open {
		transform: none;
	}
	.mm-trade__box {
		padding: 14px;
		gap: 10px;
	}
	.mm-trade__heading {
		font-size: 16px;
	}
	.mm-trade__tab {
		width: 34px;
		padding: 14px 0;
		border-radius: 0 8px 8px 0;
	}
	.mm-trade__title {
		padding: 0;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .02em;
		white-space: nowrap;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
	.mm-trade__title::after,
	.mm-trade__note {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mm-trade,
	.mm-trade.is-shown {
		transition: none;
	}
}
@media print {
	.mm-trade {
		display: none;
	}
}

/* ==========================================================================
   Header search: a compact dark dropdown under the header, lined up with the search button (main.js sets --sp-top,
   --sp-right and --sp-caret), with one box, popular searches and instant results (assets/js/header-search.js).
   ========================================================================== */
.cs-search-panel {
	position: fixed;
	top: var(--sp-top, 120px);
	right: var(--sp-right, 16px);
	bottom: auto;
	left: auto;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	width: min(880px, calc(100vw - 24px));
	max-height: calc(100vh - var(--sp-top, 120px) - 16px);
	padding: 0;
	color: rgba(255, 255, 255, .86);
	background: rgba(15, 23, 43, .9);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1), visibility 0s .25s;
}
.cs-search-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* Pointer to the search button */
.cs-search-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	right: var(--sp-caret, 24px);
	width: 14px;
	height: 14px;
	background: rgba(15, 23, 43, .96);
	border-top: 1px solid rgba(255, 255, 255, .12);
	border-left: 1px solid rgba(255, 255, 255, .12);
	transform: rotate(45deg);
}
.cs-search-panel__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

/* The box: pill, icon on the left, close on the right; Enter searches */
.cs-search-panel .cs-search-panel__form {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50px;
	transition: border-color .2s, background-color .2s;
}
.cs-search-panel .cs-search-panel__form:focus-within {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .4);
}
.cs-search-panel__icon {
	position: absolute;
	top: 50%;
	left: 20px;
	font-size: 17px;
	line-height: 1;
	color: rgba(255, 255, 255, .6);
	transform: translateY(-50%);
	pointer-events: none;
}
.cs-search-panel .cs-search-panel__form .cs-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 8px 0 50px;
	font-family: var(--font-heading);
	font-size: 17px;
	color: var(--white);
	caret-color: var(--primary);
	background: transparent;
	border: 0;
	box-shadow: none;
}
.cs-search-panel .cs-search-panel__form .cs-input:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}
.cs-search-panel .cs-search-panel__form .cs-input::placeholder {
	color: rgba(255, 255, 255, .45);
}
.cs-search-panel .cs-search-panel__form .cs-input::-webkit-search-cancel-button {
	display: none;
}
.cs-search-panel__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: auto 9px auto 0;
	padding: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	background: rgba(255, 255, 255, .08);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}
.cs-search-panel__close:hover,
.cs-search-panel__close:focus-visible {
	color: var(--heading);
	background: var(--white);
}

/* Popular searches: one row of chips under the box (scrolls sideways when it does not fit) */
.cs-search-panel__popular {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	margin: 14px 0 0;
}
.cs-search-panel__popular-label {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
.cs-search-panel__chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.cs-search-panel__chips::-webkit-scrollbar {
	display: none;
}
/* Simple underlined links */
.cs-search-panel__chip {
	flex: 0 0 auto;
	padding: 2px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: rgba(255, 255, 255, .85);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .2s, text-decoration-color .2s;
}
.cs-search-panel__chip:hover,
.cs-search-panel__chip:focus-visible {
	color: var(--white);
	text-decoration-color: var(--primary);
}

/* Results */
.mm-search-results {
	margin-top: 18px;
}
.mm-search-results[hidden] {
	display: none;
}
.mm-search-results__group + .mm-search-results__group {
	margin-top: 18px;
}
.mm-search-results__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding-bottom: 8px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--white);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mm-search-results__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--white);
	background: var(--primary);
}
.mm-search-results__grid,
.mm-search-results__pages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-search-results__grid > li,
.mm-search-results__pages > li {
	margin: 0;
	min-width: 0;
}
/* A result: dark tile with a small photo, name and details, price on the right */
.mm-search-results__item {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 10px 16px 10px 10px;
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 6px;
	transition: background-color .2s, border-color .2s;
}
.mm-search-results__item:hover,
.mm-search-results__item.is-active {
	color: inherit;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .2);
}
.mm-search-results__item img {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
	background: rgba(255, 255, 255, .06);
}
.mm-search-results__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mm-search-results__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* Two lines at most, then … */
	line-clamp: 2;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--white);
	overflow-wrap: anywhere;
}
.mm-search-results__meta {
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, .55);
}
.mm-search-results__price {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
}
.mm-search-results__price.is-call {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-on-dark, #ff6b6f);
}
/* Pages and posts (Search pages and posts on) */
.mm-search-results__item--page .bi {
	flex: 0 0 auto;
	font-size: 20px;
	color: rgba(255, 255, 255, .6);
}
.mm-search-results__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
/* "See all" as a text link with an arrow */
.mm-search-results__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--primary-on-dark, #e84a4e);
}
.mm-search-results__all .bi {
	transition: transform .2s;
}
.mm-search-results__all:hover,
.mm-search-results__all:focus-visible,
.mm-search-results__all.is-active {
	color: var(--white);
}
.mm-search-results__all:hover .bi,
.mm-search-results__all.is-active .bi {
	transform: translateX(4px);
}
.mm-search-results__time {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}
.mm-search-results__none {
	margin: 0;
	padding: 20px 0 6px;
	font-size: 15px;
	text-align: center;
	color: rgba(255, 255, 255, .7);
}
@media (max-width: 767.98px) {
	.cs-search-panel {
		right: 12px;
		width: calc(100vw - 24px);
	}
	.cs-search-panel__body {
		padding: 14px;
	}
	.cs-search-panel__popular {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
	}
	.cs-search-panel__chips {
		max-width: 100%;
	}
	.mm-search-results__grid,
	.mm-search-results__pages {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.mm-search-results__item {
		gap: 12px;
		padding-right: 12px;
	}
	.mm-search-results__item img {
		flex-basis: 60px;
		width: 60px;
		height: 45px;
	}
	.mm-search-results__title,
	.mm-search-results__price {
		font-size: 14px;
	}

}
@media (prefers-reduced-motion: reduce) {
	.cs-search-panel,
	.cs-search-panel.is-open {
		transition: none;
	}
	.mm-search-results__item {
		transition: none;
	}
}

/* Single post (single.php): the hero photo cropped like the design (wide banner; 16:9 beside the sidebar). */
.cs-article__hero img {
	aspect-ratio: 9 / 4;
	object-fit: cover;
}
.cs-article--sidebar .cs-article__hero img {
	aspect-ratio: 16 / 9;
}
/* Lists written in the editor inside a job or a post: the design's check list (.cs-list-primary), the red check drawn
   by CSS since the editor's list items have no icon. */
.cs-job-body ul:not(.cs-job__meta):not(.cs-list),
.cs-article__body .cs-text ul:not(.cs-list) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.cs-job-body ul:not(.cs-job__meta) > li,
.cs-article__body .cs-text ul:not(.cs-list) > li {
	position: relative;
	margin: 0;
	padding-left: 34px;
}
.cs-job-body ul:not(.cs-job__meta) > li::before,
.cs-article__body .cs-text ul:not(.cs-list) > li::before {
	content: "\f633";
	position: absolute;
	top: 1px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-family: "bootstrap-icons";
	font-size: 12px;
	line-height: 1;
	color: var(--white);
	background: var(--primary);
	border-radius: 50%;
}
.cs-job-body .cs-list li::before {
	content: none;
}
.mm-job-closed {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	font-weight: 500;
	color: var(--heading);
	background: var(--bg-light);
	border-left: 3px solid var(--primary);
}
.mm-jobs-none,
.mm-blog-none {
	margin: 0;
	text-align: center;
	color: var(--muted);
}

/* Application form (Gravity Forms in the job page): the resume upload as the design's dashed drop box, no date icon. */
.cs-form-box .mm-gf .gfield--type-fileupload .ginput_container_fileupload {
	padding: 22px;
	text-align: center;
	background: var(--bg-light);
	border: 1px dashed var(--border-strong, #cbd5e1);
	transition: border-color .2s;
}
.cs-form-box .mm-gf .gfield--type-fileupload .ginput_container_fileupload:hover {
	border-color: var(--primary);
}
.cs-form-box .mm-gf .gfield--type-fileupload input[type="file"] {
	max-width: 100%;
	font-size: 14px;
}
.cs-form-box .mm-gf .gfield--type-fileupload input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 16px;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--white);
	background: var(--secondary);
	border: 0;
	cursor: pointer;
}
.cs-form-box .mm-gf .gfield--type-fileupload .gform_fileupload_rules {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
}
.cs-form-box .mm-gf .ginput_container_date img.ui-datepicker-trigger {
	display: none;
}
.cs-form-box .mm-gf .ginput_container_date input {
	width: 100%;
}

/* Blog cards (.cs-post): the whole card opens the post. The title link stretches over the card; the photo and
   Read more go to the same post, so nothing is covered that leads elsewhere. */
.cs-post {
	position: relative;
	cursor: pointer;
}
.cs-post .cs-card__body h2 a::after,
.cs-post .cs-card__body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.cs-post:hover .cs-card__body h2 a,
.cs-post:hover .cs-card__body h3 a {
	color: var(--primary);
}
.cs-post:hover .cs-card__actions .cs-btn-link .bi {
	transform: translateX(4px);
}
.cs-post .cs-card__actions .cs-btn-link .bi {
	transition: transform .2s;
}

/* ==========================================================================
   Chat (inc/chat/chat.php, assets/js/chat.js): button in the bottom right corner and the chat panel above it.
   ========================================================================== */
.mm-chat {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990;
	font-family: var(--font-body);
}
.mm-chat__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-left: auto;
	padding: 0;
	font-size: 24px;
	color: #fff;
	background: var(--primary);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 12px 28px rgba(15, 23, 43, .28);
	cursor: pointer;
	transition: transform .2s, background-color .2s;
}
.mm-chat__launcher:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
}
.mm-chat__icon-close,
.mm-chat.is-open .mm-chat__icon-open {
	display: none;
}
.mm-chat.is-open .mm-chat__icon-close {
	display: block;
	font-size: 20px;
}
.mm-chat__panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	display: flex;
	flex-direction: column;
	width: 380px;
	height: min(600px, calc(100vh - 140px));
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(15, 23, 43, .28);
	animation: mm-chat-in .22s cubic-bezier(.2, .7, .2, 1);
}
.mm-chat__panel[hidden] {
	display: none;
}
@keyframes mm-chat-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.mm-chat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px 16px 18px;
	color: #fff;
	background: var(--heading);
}
.mm-chat__avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 20px;
	color: #fff;
	background: var(--primary);
	border-radius: 50%;
}
.mm-chat__who {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}
.mm-chat__who strong {
	font-family: var(--font-heading);
	font-size: 16px;
}
.mm-chat__who span {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, .7);
}
.mm-chat__who span i {
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
}
.mm-chat__new,
.mm-chat__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .08);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.mm-chat__new:hover,
.mm-chat__close:hover {
	color: var(--heading);
	background: #fff;
}
.mm-chat__log {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 18px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--bg-light);
}
.mm-chat__msg {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 88%;
}
.mm-chat__msg--user {
	align-self: flex-end;
	align-items: flex-end;
}
.mm-chat__bubble {
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--heading);
	background: #fff;
	border: 1px solid var(--border-light);
	border-radius: 14px 14px 14px 4px;
}
.mm-chat__msg--user .mm-chat__bubble {
	color: #fff;
	background: var(--secondary);
	border-color: var(--secondary);
	border-radius: 14px 14px 4px 14px;
}
.mm-chat__bubble p,
.mm-chat__bubble ul {
	margin: 0;
}
.mm-chat__bubble p + p,
.mm-chat__bubble p + ul,
.mm-chat__bubble ul + p {
	margin-top: 8px;
}
.mm-chat__bubble ul {
	padding-left: 18px;
	list-style: disc;
}
.mm-chat__bubble a {
	font-weight: 600;
	color: var(--primary);
	text-transform: capitalize;
}
.mm-chat__msg--user .mm-chat__bubble a {
	color: #fff;
}
.mm-chat__cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.mm-chat__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 8px 8px;
	color: var(--heading);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	transition: border-color .2s, box-shadow .2s;
}
.mm-chat__card {
	animation: mm-chat-pop .3s cubic-bezier(.2, .7, .2, 1); /* Plays when the card appears. */
}
.mm-chat__card.is-waiting {
	display: none; /* Out of the layout until its turn, so the typing text stays at the bottom. */
}
.mm-chat__msg--bot:not(.mm-chat__typing) .mm-chat__bubble,
.mm-chat__msg--user .mm-chat__bubble {
	animation: mm-chat-pop .25s cubic-bezier(.2, .7, .2, 1);
}
@keyframes mm-chat-pop {
	from { opacity: 0; transform: translateY(6px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-chat__card,
	.mm-chat__msg .mm-chat__bubble {
		animation: none;
	}
}
.mm-chat__card:hover {
	color: var(--heading);
	border-color: var(--secondary);
	box-shadow: var(--shadow);
}
.mm-chat__card img,
.mm-chat__card-ph {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--bg-light);
}
.mm-chat__card-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}
.mm-chat__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mm-chat__card-title {
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.mm-chat__card-meta {
	font-size: 12px;
	color: var(--muted);
}
.mm-chat__card-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
}
.mm-chat__card .bi-chevron-right {
	color: var(--muted);
}
.mm-chat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}
.mm-chat__chips button {
	padding: 7px 12px;
	font-size: 13px;
	color: var(--secondary);
	background: #fff;
	border: 1px solid var(--secondary);
	border-radius: 999px;
	cursor: pointer;
}
.mm-chat__chips button:hover {
	color: #fff;
	background: var(--secondary);
}
.mm-chat__typing .mm-chat__bubble {
	display: flex;
	gap: 4px;
	padding: 14px 16px;
}
.mm-chat__typing span {
	width: 7px;
	height: 7px;
	background: var(--muted);
	border-radius: 50%;
	animation: mm-chat-dot 1s infinite ease-in-out;
}
.mm-chat__typing span:nth-child(2) {
	animation-delay: .15s;
}
.mm-chat__typing span:nth-child(3) {
	animation-delay: .3s;
}
@keyframes mm-chat-dot {
	0%, 80%, 100% { opacity: .3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}
.mm-chat__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 12px 12px 6px;
	background: #fff;
	border-top: 1px solid var(--border-light);
}
.mm-chat__form textarea {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 120px;
	padding: 11px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--heading);
	resize: none;
	background: var(--bg-light);
	border: 1px solid var(--border);
	border-radius: 22px;
	outline: 0;
}
.mm-chat__form textarea:focus {
	border-color: var(--secondary);
}
.mm-chat__form button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 17px;
	color: #fff;
	background: var(--primary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.mm-chat__form button:disabled {
	opacity: .5;
	cursor: default;
}
.mm-chat__note {
	margin: 0;
	padding: 0 16px 10px;
	font-size: 11px;
	text-align: center;
	color: var(--muted);
	background: #fff;
}
@media (max-width: 575.98px) {
	.mm-chat {
		right: 16px;
		bottom: 16px;
	}
	.mm-chat__launcher {
		width: 54px;
		height: 54px;
		font-size: 22px;
	}
	/* Phones: the chat fills the screen. */
	.mm-chat__panel {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
		width: auto;
		height: 100%;
		border-radius: 0;
	}
	html.mm-chat-open {
		overflow: hidden;
	}
	.mm-chat.is-open .mm-chat__launcher {
		display: none;
	}
}
@media print {
	.mm-chat {
		display: none;
	}
}

/* Carousel paging dots: a 24×24 tap target each (accessibility minimum) with the same 8px dot drawn inside it
   (background clipped to the content box, the padding stays transparent). */
.cs-carousel__dots,
.cs-swipe-dots {
	gap: 0;
}
.cs-carousel__dots button,
.cs-swipe-dots button {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 8px;
	background-clip: content-box !important; /* The design's states set "background", which would reset the clip. */
	border-radius: 12px;
}
.cs-swipe-dots button.is-active {
	width: 38px; /* The design's 22px active pill, inside the tap target. */
	border-radius: 12px;
}

/* ==========================================================================
   Boat feed list styles with wider photos (client request): the photo takes half the card.
   Rich list: the price and buttons leave their own column and sit in a bar under the details (price left, buttons
   right), which gives the photo the room. List feed: the same wider photo, the action bar stays underneath.
   Tablets: a little narrower photo; phones: stacked as before.
   ========================================================================== */
@media (min-width: 768px) {
	.cs-feed-card {
		grid-template-columns: 50% minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas: "media body" "media side";
	}
	.cs-feed-card__media {
		grid-area: media;
		min-height: 300px;
	}
	.cs-feed-card__body {
		grid-area: body;
		padding: 24px 26px 16px;
	}
	.cs-feed-card__body p {
		margin-bottom: 0;
	}
	.cs-feed-card__side {
		grid-area: side;
		grid-column: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 14px 16px;
		width: auto;
		padding: 16px 26px 22px;
		border-top: 1px solid var(--border-light);
		border-left: 0;
	}
	.cs-feed-card__side > div:first-child {
		display: flex;
		flex-direction: column;
	}
	.cs-feed-card__actions {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	.cs-feed-card__side .cs-btn {
		width: auto;
		padding: 0 18px;
	}
	.cs-feed-row,
	.cs-feed-list--modern .cs-feed-row {
		grid-template-columns: 50% minmax(0, 1fr);
	}
	.cs-feed-row__media {
		min-height: 300px;
	}
}
/* Tablets (the list column is too narrow for photo and details side by side): photo on top, full width. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.cs-feed-card,
	.cs-feed-row,
	.cs-feed-list--modern .cs-feed-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "media" "body" "side";
	}
	.cs-feed-card__media,
	.cs-feed-row__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}
/* Price line (rich list): smaller price with the old price and the saving beside it. */
.cs-feed-card .cs-feed-card__side > div:first-child {
	display: block;
	width: auto;
}
.cs-feed-card__price-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin-top: 2px;
}
.cs-feed-card .cs-feed-card__price,
.cs-feed-card .cs-feed-card__price.mm-boats-call {
	font-size: 17px;
}
.cs-feed-card .cs-feed-card__was {
	margin-top: 0;
	font-size: 13px;
	text-align: left;
}
.cs-feed-card .cs-feed-card__savings {
	padding: 2px 8px;
	border-radius: 40px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	background: rgba(4, 120, 87, .1);
}
@media (max-width: 767px) {
	.cs-feed-card .cs-feed-card__side > div:first-child {
		width: 100%;
	}
}
/* List feed on desktop: the details column is half the card, so the details button takes its own full-width line. */
@media (min-width: 1200px) {
	.cs-feed-row__actions,
	.cs-feed-list--modern .cs-feed-row__actions {
		flex-wrap: wrap;
	}

}
/* Rich list: no rule between the details and the price; the price follows the text directly. */
@media (min-width: 768px) {
	.cs-feed-card {
		grid-template-rows: auto 1fr;
	}
	.cs-feed-card__side {
		align-self: start;
		padding-top: 4px;
		border-top: 0;
	}
}
@media (max-width: 767px) {
	.cs-feed-card__body {
		padding-bottom: 14px;
	}
	.cs-feed-card__side {
		padding-top: 4px;
		border-top: 0;
	}
}
/* Rich list, compact: plain spec items (icon + value, thin dividers) instead of pills, tighter spacing. */
.cs-feed-card .cs-feed-card__meta {
	margin-bottom: 4px;
}
.cs-feed-card .cs-feed-card__title {
	margin-bottom: 8px;
}
.cs-feed-card .cs-feed-card__specs {
	gap: 4px 0;
	margin-bottom: 10px;
}
.cs-feed-card .cs-feed-card__specs li {
	gap: 6px;
	height: auto;
	padding: 0 12px;
	border-left: 1px solid var(--border);
	border-radius: 0;
	background: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.cs-feed-card .cs-feed-card__specs li:first-child {
	padding-left: 0;
	border-left: 0;
}
.cs-feed-card .cs-feed-card__specs li i {
	font-size: 13px;
}
@media (min-width: 768px) {
	.cs-feed-card .cs-feed-card__body {
		padding: 20px 24px 10px;
	}
	.cs-feed-card .cs-feed-card__side {
		gap: 10px 16px;
		padding: 2px 24px 20px;
	}
	.cs-feed-card .cs-feed-card__media {
		min-height: 260px;
	}
}
@media (max-width: 767px) {
	.cs-feed-card .cs-feed-card__body {
		padding: 18px 18px 10px;
	}
	.cs-feed-card .cs-feed-card__side {
		gap: 10px;
		padding: 2px 18px 18px;
	}
}
/* Rich list: title left, location small in the top right corner. */
.cs-feed-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 8px;
}
.cs-feed-card .cs-feed-card__head .cs-feed-card__title {
	margin-bottom: 0;
}
.cs-feed-card .cs-feed-card__head .cs-feed-card__meta {
	flex: none;
	margin: 4px 0 0;
	font-size: 12px;
	white-space: nowrap;
	color: var(--muted);
}
.cs-feed-card .cs-feed-card__head .cs-feed-card__meta span {
	gap: 4px;
}
/* Rich list: the buttons always sit on their own line under the price. */
.cs-feed-card .cs-feed-card__side {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}
@media (max-width: 767px) {
	.cs-feed-card .cs-feed-card__side {
		align-items: stretch;
	}
}
/* Rich list spacing: one rhythm. 12px between every block (title row, specs, text, price, buttons) and the same
   padding on every side of the details (24px; 18px on phones). */
.cs-feed-card .cs-feed-card__body {
	gap: 12px;
	padding: 24px 24px 0;
}
.cs-feed-card .cs-feed-card__head,
.cs-feed-card .cs-feed-card__specs,
.cs-feed-card .cs-feed-card__body p {
	margin: 0;
}
.cs-feed-card .cs-feed-card__side {
	gap: 12px;
	padding: 12px 24px 24px;
}
.cs-feed-card .cs-feed-card__label {
	margin-bottom: 2px;
}
@media (max-width: 767px) {
	.cs-feed-card .cs-feed-card__body {
		padding: 18px 18px 0;
	}
	.cs-feed-card .cs-feed-card__side {
		padding: 12px 18px 18px;
	}
}
/* Rich list: the location sits in the card's top right corner (12px from the edges). */
.cs-feed-card .cs-feed-card__head .cs-feed-card__meta {
	margin: -12px -12px 0 0;
}
@media (max-width: 767px) {
	.cs-feed-card .cs-feed-card__head .cs-feed-card__meta {
		margin: -8px -8px 0 0;
	}
}
/* List feed, compact specs: three columns of label over value, no table lines, tighter spacing. */
.cs-feed-list--modern .cs-feed-row__specs {
	gap: 12px 16px;
	border: 0;
}
.cs-feed-list--modern .cs-feed-row__specs > div,
.cs-feed-list--modern .cs-feed-row__specs > div:not(:nth-child(3n+1)),
.cs-feed-list--modern .cs-feed-row__specs > div:nth-child(n+4) {
	gap: 2px;
	padding: 0;
	border: 0;
}
.cs-feed-list--modern .cs-feed-row__specs .k {
	font-size: 10px;
}
.cs-feed-list--modern .cs-feed-row__specs .v {
	font-size: 14px;
}
.cs-feed-list--modern .cs-feed-row__title {
	margin-bottom: 14px;
}
@media (min-width: 768px) {
	.cs-feed-list--modern .cs-feed-row__body {
		padding: 24px 24px 16px;
	}
	.cs-feed-list--modern .cs-feed-row__actions {
		margin: 0 24px;
		padding: 16px 0 24px;
	}
	.cs-feed-list--modern .cs-feed-row__media {
		min-height: 260px;
	}
}
/* List feed actions: Get best price, Get financing and View details on one line, smaller icon chips. */
.cs-feed-list--modern .cs-feed-row__actions {
	gap: 10px 16px;
}
.cs-feed-list--modern .cs-feed-row__action {
	gap: 8px;
}
.cs-feed-list--modern .cs-feed-row__action:not(.cs-feed-row__action--primary) i {
	width: 28px;
	height: 28px;
	font-size: 12px;
}
.cs-feed-list--modern .cs-feed-row__action--primary {
	height: 40px;
	margin-left: auto;
	padding: 0 16px;
}
.cs-feed-list--modern .cs-feed-row__actions {
	gap: 10px 12px;
}
.cs-feed-list--modern .cs-feed-row__action {
	gap: 6px;
}
.cs-feed-list--modern .cs-feed-row__action:not(.cs-feed-row__action--primary) i {
	width: 26px;
	height: 26px;
}
.cs-feed-list--modern .cs-feed-row__action--primary {
	padding: 0 12px;
	letter-spacing: .5px;
}
/* Small desktops: a slightly narrower photo keeps the three list feed actions on one line. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.cs-feed-list--modern .cs-feed-row {
		grid-template-columns: 46% minmax(0, 1fr);
	}
}
/* List feed price line above the actions (same look as the rich list). */
.cs-feed-row__price-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin-top: 14px;
}
.cs-feed-row__price {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--secondary);
}
.cs-feed-row__was {
	font-size: 13px;
	color: var(--muted);
}
.cs-feed-row__was s {
	text-decoration-thickness: 1px;
}
.cs-feed-row__savings {
	padding: 2px 8px;
	border-radius: 40px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #047857;
	background: rgba(4, 120, 87, .1);
}
/* List feed colours: neutral greys for the details so the title, the price (brand red) and the button stand out. */
.cs-feed-list--modern .cs-feed-row__specs .k {
	letter-spacing: .8px;
	color: #94a3b8;
}
.cs-feed-list--modern .cs-feed-row__specs .v {
	font-family: var(--font-primary);
	font-weight: 500;
	color: #334155;
}
.cs-feed-row .cs-feed-row__price {
	font-size: 18px;
	color: var(--primary);
}
.cs-feed-row .cs-feed-row__price.mm-boats-call {
	color: var(--heading);
}
.cs-feed-row .cs-feed-row__was {
	color: #94a3b8;
}
.cs-feed-list--modern .cs-feed-row__action:not(.cs-feed-row__action--primary) {
	font-family: var(--font-primary);
	font-weight: 500;
	color: #334155;
}
/* Boat feed lists: no photo zoom on hover. */
.cs-feed-row__media:hover img,
.cs-feed-card__media:hover img,
.cs-feed-card:hover .cs-feed-card__media img,
.cs-feed-list--modern .cs-feed-row:hover .cs-feed-row__media img {
	transform: none;
}
/* Boat and motor listing tiles: no photo zoom on hover either. */
.cs-boat-tile:hover .cs-boat-tile__media img,
.cs-motor-tile:hover .cs-motor-tile__media img {
	transform: none;
}

/* ==========================================================================
   Sold boats (inc/sold.php): Recently sold on category pages, the sold product page
   ========================================================================== */
.mm-badge-sold { color: var(--white); background: var(--primary); }
.mm-sold-stamp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 6px 14px;
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--primary);
	border: 3px solid var(--primary);
	border-radius: 4px;
	outline: 1px solid var(--primary);
	outline-offset: 2px;
	transform: rotate(-6deg);
}
.mm-sold-stamp--sm { padding: 4px 10px; font-size: 18px; color: var(--white); background: var(--primary); border-color: var(--white); outline-color: var(--primary); }

/* Category pages */
.mm-sold__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.mm-sold__head h2 { margin-bottom: 6px; }
.mm-sold__head p { max-width: 640px; margin: 0; color: var(--muted); }
.mm-sold-tile .cs-boat-tile__media img { filter: saturate(.75); }
.mm-sold-tile__sold { font-family: var(--font-heading); font-size: 18px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }

/* Product page: buy box notice */
.mm-sold-notice { margin: 4px 0 22px; padding: 20px; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--primary); box-shadow: rgba(15, 23, 43, .06) 0 6px 18px 0; }
.mm-sold-notice__top { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.mm-sold-notice__title { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--heading); }
.mm-sold-notice p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.mm-sold-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-sold-notice__actions .cs-btn { width: 100%; min-width: 0; padding: 0 12px; }
@media (max-width: 400px) { .mm-sold-notice__actions { grid-template-columns: 1fr; } }

/* Product page: similar boats band */
.mm-sold-band { margin-top: 48px; }
.mm-sold-band__head { display: flex; align-items: center; gap: 28px; padding: 28px 32px; border-bottom: 3px solid var(--primary); }
.mm-sold-band__thumb { position: relative; flex: 0 0 200px; }
.mm-sold-band__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(.35); }
.mm-sold-band__thumb .mm-sold-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); }
.mm-sold-band__eyebrow { margin: 0 0 4px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.mm-sold-band__head h2 { margin: 0 0 6px; color: var(--white); }
.mm-sold-band__head p:last-child { margin: 0; color: rgba(255, 255, 255, .75); }
.mm-sold-band__list { padding: 28px; background: var(--light-bg); border: 1px solid var(--border); border-top: 0; }
.mm-sold-band__all { margin: 24px 0 0; text-align: center; }
@media (max-width: 767px) {
	.mm-sold-band__head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
	.mm-sold-band__thumb { flex-basis: auto; width: 100%; max-width: 280px; }
	.mm-sold-band__list { padding: 20px 16px; }
}

/* Product page: Find me a similar boat */
.mm-sold-form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 40px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--primary); }
.mm-sold-form__intro { padding: 32px; background: var(--light-bg); }
.mm-sold-form__intro p { color: var(--body); }
.mm-sold-form__points { margin: 18px 0 22px; padding: 0 0 20px; list-style: none; border-bottom: 1px solid var(--border); }
.mm-sold-form__points li { display: flex; gap: 10px; margin-bottom: 8px; color: var(--heading); }
.mm-sold-form__points i { color: var(--primary); }
.mm-sold-form__phone { margin: 0; font-size: 14px; }
.mm-sold-form__phone a { font-weight: 700; color: var(--heading); }
.mm-sold-form__form { padding: 32px; }
@media (max-width: 991px) {
	.mm-sold-form { grid-template-columns: 1fr; }
	.mm-sold-form__intro, .mm-sold-form__form { padding: 24px 20px; }
}
/* Recently sold: centred heading and text (no button beside it). */
.mm-sold__head { display: block; text-align: center; }
.mm-sold__head p { margin-left: auto; margin-right: auto; }
/* A sold card with only View details: the button takes the full width. */
.mm-sold-tile .cs-boat-tile__actions > .cs-btn:only-child { flex: 1 1 100%; }
.mm-sold__all { margin: 28px 0 0; text-align: center; }
/* After the grey Recently sold section, the next section is white (no two grey sections in a row). */
.mm-sold + .mm-category-blocks > .cs-section.bg-lighter:first-child,
.mm-sold + .cs-section.bg-lighter { background-color: var(--white); }

/* Chat: listing cards inside replies (photo on top, like the boat listings), staff replies, notes */
.mm-chat__msg--bot { gap: 10px; }
.mm-chat__cards { gap: 10px; }
.mm-chat__card--tile { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 12px; }
.mm-chat__card--tile .mm-chat__card-media { display: block; aspect-ratio: 16 / 9; background: var(--bg-light); }
.mm-chat__card--tile .mm-chat__card-media img,
.mm-chat__card--tile .mm-chat__card-ph { flex: none; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mm-chat__card--tile .mm-chat__card-body { gap: 3px; padding: 10px 12px 12px; }
.mm-chat__card--tile .mm-chat__card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-chat__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mm-chat__card-more { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--secondary); white-space: nowrap; }
.mm-chat__card--tile:hover .mm-chat__card-more { color: var(--primary); }
.mm-chat__msg--agent { align-self: flex-start; }
.mm-chat__by { margin: 0 0 -4px 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.mm-chat__msg--agent .mm-chat__bubble { background: #eef6f1; border-color: #cfe9da; }
.mm-chat__msg--system { align-self: center; max-width: 92%; }
.mm-chat__note-line { margin: 2px 0; padding: 6px 12px; font-size: 12px; line-height: 1.45; text-align: center; color: var(--muted); background: rgba(15, 23, 43, .04); border-radius: 999px; }
.mm-chat__human[disabled] { opacity: .5; }
.mm-chat.is-live .mm-chat__who span i { background: #12b76a; }
/* Chat cards stay compact (photo beside the text) inside replies. */
.mm-chat__card .mm-chat__card-media { flex: 0 0 72px; display: block; width: 72px; height: 54px; overflow: hidden; border-radius: 6px; background: var(--bg-light); }
.mm-chat__card .mm-chat__card-media img, .mm-chat__card .mm-chat__card-media .mm-chat__card-ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mm-chat__card:not(.mm-chat__card--tile) .mm-chat__card-foot { margin-top: 0; }
.mm-chat__card:not(.mm-chat__card--tile) .mm-chat__card-more { font-size: 11px; }
/* Chat: "Before we start" details form */
.mm-chat__details { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; background: #fff; border: 1px solid var(--border-light); border-radius: 14px; animation: mm-chat-pop .25s cubic-bezier(.2, .7, .2, 1); }
.mm-chat__details strong { font-family: var(--font-heading); font-size: 15px; color: var(--heading); }
.mm-chat__details p { margin: -4px 0 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mm-chat__details label { display: block; margin: 0; }
.mm-chat__details input { width: 100%; height: 42px; padding: 0 12px; font-size: 14px; color: var(--heading); background: var(--light-bg); border: 1px solid var(--border); border-radius: 10px; }
.mm-chat__details input:focus { border-color: var(--secondary); background: #fff; outline: none; }
.mm-chat__details button { height: 42px; margin-top: 2px; font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--primary); border: 0; border-radius: 10px; cursor: pointer; }
.mm-chat__details button:hover { background: var(--primary-hover); }
.mm-chat__details .mm-chat__details-error { margin: 0; color: var(--primary); }
.mm-chat__details-error[hidden] { display: none; }
.mm-chat__form.is-locked { opacity: .5; pointer-events: none; }
/* Chat header buttons: a tooltip on hover (e.g. "Talk to an agent"). */
.mm-chat__head [data-tip] { position: relative; }
.mm-chat__head [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 5; padding: 5px 9px; font-family: var(--font-primary); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: #fff; background: var(--heading); border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 43, .25); opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.mm-chat__head [data-tip]:hover::after, .mm-chat__head [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mm-chat__human .bi-headset { font-size: 17px; }
/* Chat avatar: the site icon on white. */
.mm-chat__avatar.has-icon { background: #fff; overflow: hidden; }
.mm-chat__avatar.has-icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
/* Chat: "Talk to an agent" over the bottom right of the messages, once the chat is under way. */
.mm-chat__agent { position: relative; z-index: 3; align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: -50px 14px 14px 0; padding: 0 14px; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: #fff; background: var(--secondary); border: 0; border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 23, 43, .25); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.mm-chat__agent:hover { background: var(--primary); transform: translateY(-1px); }
.mm-chat__agent[hidden] { display: none; }
.mm-chat__agent[disabled] { opacity: .6; cursor: default; }
.mm-chat__agent.is-in { animation: mm-chat-pop .3s cubic-bezier(.2, .7, .2, 1); }
.mm-chat__agent .bi { font-size: 15px; }
.mm-chat.has-agent .mm-chat__log { padding-bottom: 56px; }
/* Chat: the name / email / phone questions: the key word in bold red. */
.mm-chat__msg--ask .mm-chat__bubble strong { color: var(--primary); }
/* "Talk to an agent": a round white button with a red headset; it widens to show its label on hover. */
.mm-chat__agent { gap: 0; width: auto; min-width: 42px; height: 42px; padding: 0 12px; color: var(--primary); background: #fff; border: 1px solid var(--border-light); box-shadow: 0 6px 18px rgba(15, 23, 43, .16); }
.mm-chat__agent .bi { font-size: 17px; line-height: 1; }
.mm-chat__agent-label { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .3s ease, opacity .2s ease, margin .3s ease; }
.mm-chat__agent:hover, .mm-chat__agent:focus-visible { color: var(--primary); background: #fff; transform: none; box-shadow: 0 8px 22px rgba(15, 23, 43, .22); }
.mm-chat__agent:hover .mm-chat__agent-label, .mm-chat__agent:focus-visible .mm-chat__agent-label { max-width: 160px; margin-left: 8px; opacity: 1; color: var(--heading); }
.mm-chat__agent { justify-content: center; box-sizing: border-box; height: 42px; min-width: 42px; padding: 0 12px; border-radius: 21px; line-height: 1; }
.mm-chat__agent .bi { display: block; width: 17px; height: 17px; }
.mm-chat__agent .bi::before { display: block; }
.mm-chat__agent { padding: 0 11.5px; }
.mm-chat__agent { min-height: 42px; }
/* Chat: slim, quiet scrollbar for the messages. */
.mm-chat__log { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 43, .18) transparent; }
.mm-chat__log::-webkit-scrollbar { width: 6px; }
.mm-chat__log::-webkit-scrollbar-track { background: transparent; }
.mm-chat__log::-webkit-scrollbar-thumb { background: rgba(15, 23, 43, .18); border-radius: 999px; }
.mm-chat__log::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 43, .35); }
.mm-chat__agent { margin-right: 19px; } /* Clear of the scrollbar. */

/* Image + Text "Swap image and text": the two sides change places on tablets and up (phones keep image, then text).
   Row reverse keeps the source order for screen readers. */
@media (min-width: 768px) {
	.mm-imgtext-flip .cs-imgtext.row,
	.mm-imgtext-flip .cs-imgtext-card > .row,
	.mm-imgtext-flip .cs-loctabs__panel > .row { flex-direction: row-reverse; }
	.mm-imgtext-flip .cs-yearblock__media { order: 2; }
}

/* Image + Text: on phones the picture always comes first, whatever side it sits on for wider screens. */
@media (max-width: 767px) {
	.mm-imgtext .row > :has(> .cs-imgtext__media, > .cs-imgtext-card__media, > .cs-mosaic, > .cs-imgtext__duo, > .cs-mapcard) { order: -1; }
}