/**
 * Explorer Mobile Sheet — v2 (toolkit-owned bottom sheet).
 *
 * Scoped to `.hfse.hrtk-msheet` (added by the module JS on mobile) under a
 * max-width media query, so desktop and non-activated explorers are untouched.
 * The toolkit owns the sheet/topbar/FAB; the plugin's map (`.hfse-sidebar`) is
 * the full-bleed backdrop and only the card wrapper is moved into the sheet.
 * `!important` is needed because YOOtheme/UIkit responsive rules otherwise win
 * at real device widths. `html.hrtk-msheet-on` hides theme chrome + locks scroll.
 */

@media ( max-width: 768px ) {

	/* ---- Lock the page; the sheet + map own the viewport. ---- */
	html.hrtk-msheet-on,
	html.hrtk-msheet-on body {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	/* ---- Hide the theme's visible header bar so the map is full-bleed, but keep
	   the mobile offcanvas menu (#tm-dialog-mobile) reachable from our own
	   hamburger — so hide the navbar bar, NOT the whole .tm-header-mobile.
	   Skipped in "below theme navigation" mode (html.hrtk-msheet-below-nav): there
	   we deliberately KEEP the theme header visible and sit the search CTA under
	   it, so hiding it would leave an empty band with a floating pill. ---- */
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) .tm-header-mobile .uk-navbar-container,
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) .tm-header,
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) .uk-sticky-placeholder {
		display: none !important;
	}
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) .uk-sticky-fixed,
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) [uk-sticky],
	html.hrtk-msheet-on:not(.hrtk-msheet-below-nav) [data-uk-sticky] {
		position: static !important;
		top: auto !important;
		transform: none !important;
		box-shadow: none !important;
	}

	/* ---- Kill iOS focus auto-zoom at the source: any form control under 16px
	   triggers Safari's zoom-on-focus (filter inputs are 12px, sort 14px). This
	   is the primary no-zoom fix; the viewport lock is the backup. Covers the
	   plugin's body-appended modals (.hk-scope-modal) too. ---- */
	.hfse.hrtk-msheet input,
	.hfse.hrtk-msheet select,
	.hfse.hrtk-msheet textarea,
	html.hrtk-msheet-on .hk-scope-modal input,
	html.hrtk-msheet-on .hk-scope-modal select,
	html.hrtk-msheet-on .hk-scope-modal textarea {
		font-size: 16px !important;
	}

	/* ---- Neutralise a transformed ancestor that would trap the fixed sheet. ---- */
	.hrtk-msheet-untransform {
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		will-change: auto !important;
		contain: none !important;
	}

	/* ---- Map backdrop: the plugin's sidebar fills the viewport. ---- */
	.hfse.hrtk-msheet .hfse-sidebar {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important; /* fallback */
		height: 100dvh !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 1 !important;
	}
	.hfse.hrtk-msheet .hfse-map-container {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
	.hfse.hrtk-msheet .hfse-map,
	.hfse.hrtk-msheet #map {
		height: 100% !important;
		min-height: 100% !important;
	}

	/* Hide map controls on mobile: they collide with the search pill and aren't
	   needed (pinch zoom via the gestures module). .control-home stays in the
	   DOM and is still clicked programmatically for the one-time reframe -
	   display:none elements still receive .click(). */
	.hfse.hrtk-msheet .map-control,
	.hfse.hrtk-msheet .map-control-input-container,
	.hfse.hrtk-msheet .gm-fullscreen-control,
	.hfse.hrtk-msheet .gm-bundled-control,
	.hfse.hrtk-msheet .gmnoprint {
		display: none !important;
	}

	/* ---- Hide the plugin's original body column (cards moved out; filters are
	   revealed on demand by the search pill). ---- */
	.hfse.hrtk-msheet .hfse-body {
		position: fixed !important;
		inset: 0 !important;
		z-index: 45 !important;
		margin: 0 !important;
		padding: 64px 16px 24px !important;
		background: #fff !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		transform: translateY( -102% );
		transition: transform 0.32s cubic-bezier( 0.22, 0.61, 0.36, 1 );
		visibility: hidden;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hfse-body {
		transform: translateY( 0 );
		visibility: visible;
	}
	/* The loader must never block the map. */
	.hfse.hrtk-msheet .hfse-loader {
		z-index: 50 !important;
	}

	/* The toolkit FAB owns Map <-> List; hide the plugin's own map-toggle so a
	   user can't blank our backdrop (we still click it programmatically to keep
	   the map visible — display:none elements still receive .click()). */
	.hfse.hrtk-msheet .hfse-form-map-toggle-btn {
		display: none !important;
	}

	/* ---- Floating close button for the filter panel. ---- */
	.hrtk-msheet-filter-close {
		display: none;
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 47;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: 50%;
		background: #fff;
		color: #222;
		font-size: 18px;
		line-height: 1;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-filter-close {
		display: block;
	}
	/* Below-nav mode keeps the theme's mobile header visible (fixed, often
	   z-index ~980). The filter panel is a full-screen takeover, so when it's open
	   lift it and its close button above that header — otherwise the header repaints
	   over the panel's top band, hiding the close X (the pill + FAB are display:none
	   while filters are open, so it would be the only way out). The module already
	   neutralizes stacking-trapping ancestors, so this competes at the root. */
	html.hrtk-msheet-below-nav .hfse.hrtk-msheet.hrtk-msheet-filters-open .hfse-body {
		z-index: 2147483000 !important;
	}
	html.hrtk-msheet-below-nav .hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-filter-close {
		z-index: 2147483001 !important;
	}

	/* ---- Sticky top: the search/filter pill. ---- */
	.hrtk-msheet-topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		padding: 10px 12px 8px;
		pointer-events: none;
	}
	/* "Below theme navigation" mode (module setting). The bar is pushed down by
	   the nav_offset px value (exposed as --hrtk-msheet-nav-offset by the JS);
	   zeroing the top padding makes that number map directly to the search CTA's
	   top edge. The favicon logo and hamburger are omitted in JS so the theme's
	   own mobile header shows through above. */
	.hrtk-msheet-topbar--below-nav {
		top: var( --hrtk-msheet-nav-offset, 80px );
		padding-top: 0;
	}
	.hrtk-msheet-bar {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	/* Favicon logo (left). */
	.hrtk-msheet-logo {
		pointer-events: auto;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.hrtk-msheet-logo img {
		width: 26px;
		height: 26px;
		object-fit: contain;
		display: block;
	}
	/* Hamburger menu (right). */
	.hrtk-msheet-menu {
		pointer-events: auto;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		border: none;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		cursor: pointer;
		padding: 0;
	}
	.hrtk-msheet-menu span {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #222;
	}
	.hrtk-msheet-pill {
		pointer-events: auto;
		flex: 1 1 auto;
		min-width: 0;
		background: #fff;
		border: none;
		border-radius: 30px;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		cursor: pointer;
		text-align: center;
	}
	/* When SBP's own trigger pill is relocated into the topbar (refine mode), the
	   topbar container is pointer-events:none, so re-enable clicks on the trigger,
	   and let it flex like our pill instead of forcing its native width:100%. */
	.hrtk-msheet-topbar .hrtk-sbp-search-bar__mobile-trigger {
		pointer-events: auto;
	}
	.hrtk-msheet-bar .hrtk-sbp-search-bar__mobile-trigger {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		margin: 0;
	}
	.hrtk-msheet-pill-ico {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: #222;
	}
	.hrtk-msheet-pill-main {
		flex: 1;
		min-width: 0;
	}
	.hrtk-msheet-pill-title {
		display: block;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.15;
		color: #222;
	}
	.hrtk-msheet-pill-sub {
		display: block;
		font-size: 12px;
		color: #717171;
		margin-top: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hrtk-msheet-pill-filt {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: #222;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-topbar {
		display: none;
	}

	/* ---- Bottom sheet. ---- */
	.hrtk-msheet-sheet {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh; /* fallback */
		height: 100dvh;
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.18 );
		z-index: 40;
		transform: translateY( 52vh );
		will-change: transform;
		touch-action: none;
		transition: transform 0.34s cubic-bezier( 0.22, 0.61, 0.36, 1 );
		display: flex;
		flex-direction: column;
	}
	.hrtk-msheet-sheet.is-dragging {
		transition: none;
	}
	.hrtk-msheet-grab {
		flex: 0 0 auto;
		padding: 10px 0 6px;
		display: flex;
		justify-content: center;
	}
	.hrtk-msheet-grab i {
		width: 36px;
		height: 5px;
		border-radius: 3px;
		background: #d0d0d0;
		display: block;
	}
	.hrtk-msheet-head {
		flex: 0 0 auto;
		text-align: center;
		padding: 2px 16px 12px;
		border-bottom: 1px solid #ebebeb;
	}
	.hrtk-msheet-count {
		font-weight: 700;
		font-size: 16px;
		color: #222;
	}
	.hrtk-msheet-sub {
		font-size: 12.5px;
		color: #717171;
		margin-top: 3px;
	}
	.hrtk-msheet-scroll {
		flex: 1 1 auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
		padding: 8px 14px 96px;
	}

	/* ---- Force the moved card wrapper into a clean vertical list. ---- */
	.hrtk-msheet-scroll .hfse-properties-container {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
	}
	.hrtk-msheet-scroll .hfse-properties {
		display: block !important;
		transform: none !important;
	}
	.hrtk-msheet-scroll .hfse-property-container,
	.hrtk-msheet-scroll .property-item {
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 18px !important;
		float: none !important;
	}
	/* Hide any leftover slider nav arrows. */
	.hrtk-msheet-scroll .hfse-properties-slider-prev-btn,
	.hrtk-msheet-scroll .hfse-properties-slider-next-btn {
		display: none !important;
	}

	/* Card photo slideshow. The plugin's media is a 1:1 square that dominates
	   the sheet, and after the container was moved UIkit left the inactive
	   slides at 0x0 - so swiping/tapping advanced to a 0-height slide and the
	   image vanished. Force a shorter aspect ratio and size EVERY slide + image
	   deterministically so all photos render and the carousel works. */
	.hrtk-msheet-scroll .hfse-property-media,
	.hrtk-msheet-scroll .hfse-property-media > div,
	.hrtk-msheet-scroll .hk-slideshow-items {
		width: 100% !important;
		height: 232px !important;
		min-height: 0 !important;
		max-height: 232px !important;
		overflow: hidden;
		position: relative;
	}
	/* The slides are position:absolute with no explicit width, so they shrink to
	   the image's intrinsic size (a ~square on wider phones), leaving the photo
	   not filling the card. Pin them to the full media box. */
	.hrtk-msheet-scroll .hk-slideshow-items > li,
	.hrtk-msheet-scroll .hfse-property-slideshow-item {
		width: 100% !important;
		height: 232px !important;
		min-height: 0 !important;
		left: 0 !important;
		right: 0 !important;
	}
	.hrtk-msheet-scroll .hfse-property-slideshow-image,
	.hrtk-msheet-scroll .hfse-property-media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	/* Keep the dot nav pinned to the bottom of the shorter media. */
	.hrtk-msheet-scroll .hfse-property-media .hk-slideshow-nav {
		position: absolute !important;
		bottom: 6px;
		left: 0;
		right: 0;
		margin: 0 !important;
	}

	.hrtk-msheet-fab-ico {
		display: inline-flex;
		align-items: center;
	}

	/* ---- Floating Map/List toggle. ---- */
	.hrtk-msheet-fab {
		position: fixed;
		left: 50%;
		bottom: 26px;
		transform: translateX( -50% );
		z-index: 60;
		background: #222;
		color: #fff;
		border: none;
		border-radius: 24px;
		padding: 13px 20px;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.3 );
		cursor: pointer;
		transition: opacity 0.25s, transform 0.25s;
	}
	.hrtk-msheet-fab.hrtk-msheet-fab-hidden {
		opacity: 0;
		transform: translate( -50%, 12px ) scale( 0.9 );
		pointer-events: none;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-fab {
		display: none;
	}
}

/* Never show toolkit-owned mobile chrome outside mobile. */
@media ( min-width: 769px ) {
	.hrtk-msheet-sheet,
	.hrtk-msheet-topbar,
	.hrtk-msheet-fab,
	.hrtk-msheet-filter-close {
		display: none !important;
	}
}