/**
 * Products Map block: same layout as search result page (grid + map, toggle, 4-col when map off).
 * Scoped to .ser-content-wrap--products-map-block so search page (.ser-content-wrap--search-map) is unaffected.
 */

/* ── "Map" toggle button label (shown when mapCollapsed option is on) ──────── */
.ser-btn--map-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px 0 10px;
}
.ser-btn-map-label {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

/* Layout: same as search – flex row, gallery left, map right */
.map-main-section--products-block .ser-content-wrap--products-map-block {
	min-height: 70vh;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
}

.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery-wrapper {
	flex: 1 1 50%;
	min-width: 0;
	width: 50%;
	display: flex;
	flex-direction: column;
}

.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery-wrapper .ser-gallery {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-content: flex-start;
}

/* Masonry: column layout so video cards don’t stretch; same gap/columns as grid */
.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
	display: block !important;
	column-count: 2;
	column-gap: 24px;
}
.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry > * {
	break-inside: avoid;
	margin-bottom: 24px;
}
.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry .ser-no-products {
	column-span: all;
	margin-bottom: 0;
}
.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
	column-count: 4;
}
@media (max-width: 1024px) {
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 2;
	}
	.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
	.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 2;
	}
}
@media (max-width: 600px) {
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
	.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
	.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 1;
	}
}

/* Map column (when map enabled): flex column so the map child fills vertical space */
.map-main-section--products-block .ser-content-wrap--products-map-block .ser-map-block {
	flex: 1 1 50%;
	min-width: 0;
	width: 50%;
	min-height: 520px;
	display: flex;
	flex-direction: column;
}

.map-main-section--products-block .ser-content-wrap--products-map-block .ser-map-block .ser-map-child {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: stretch;
}

/* Grid mode (toggle): hide map, gallery full width, 4 columns */
.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-map-block {
	display: none;
}

.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery-wrapper {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	visibility: visible;
	opacity: 1;
}

@media (max-width: 1024px) {
	.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery {
		grid-template-columns: 1fr;
	}
}

/* Product-only (map disabled): always 4-col grid, no map column */
.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery-wrapper {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery {
		grid-template-columns: 1fr;
	}
}

/* Default (map visible, not toggled): 2-col in left panel */
.map-main-section--products-block .ser-layout:not(.ser-grid-active):not(.ser-layout--product-only) .ser-content-wrap--products-map-block .ser-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (max-width: 767px) {
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery-wrapper .ser-gallery {
		grid-template-columns: 1fr;
	}
}

/* Pagination – same structure as theme (ul/li/a/span) so theme styles apply */
.map-main-section--products-block .filmabonito-filter-pagination {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination {
	margin: 0;
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner li {
	margin: 0;
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner a,
.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner span {
	display: inline-block;
	padding: 12px 18px;
	min-width: 44px;
	text-align: center;
	background: var(--title, #1a1a1a);
	color: var(--white, #fff);
	border-radius: 8px;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner a:hover {
	background: var(--primary, #ffd700);
	color: var(--title, #1a1a1a);
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .current {
	background: var(--primary, #ffd700);
	color: var(--title, #1a1a1a);
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .dots,
.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .prev span,
.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .next span {
	background: transparent;
	color: var(--body-in-dark, rgba(255, 255, 255, 0.7));
	cursor: default;
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .prev a,
.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .next a {
	background: var(--title, #1a1a1a);
	color: var(--white, #fff);
}

.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .prev a:hover,
.map-main-section--products-block .filmabonito-filter-pagination .filmabonito-pagination-inner .next a:hover {
	background: var(--primary, #ffd700);
	color: var(--title, #1a1a1a);
}

/* Map column responsiveness: tablet (768–900px) keeps side-by-side, just adjusts sizing */
@media (max-width: 900px) and (min-width: 768px) {
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-map-block {
		min-height: 400px;
		width: 50%;
	}
}

/* ── Mobile map FAB (≤767px) ─────────────────────────────────────────────── */
/* Same pattern as Search Results page. Map hidden by default; FAB reveals fullscreen. */

@media (max-width: 767px) {
	/* Gallery full-width; map hidden inline */
	.map-main-section--products-block .ser-content-wrap--products-map-block {
		flex-direction: column;
		min-height: unset;
		gap: 0;
	}

	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery-wrapper {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0;
	}

	/* Masonry: 2 columns at full width */
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 2;
	}

	/* Hide map panel inline; FAB reveals it fullscreen */
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-map-block {
		display: none !important;
	}

	/* ── Fullscreen map overlay ──
	   z-index 10000 sits above the mobile bottom bar (9998).
	   Explicit top/left/right/bottom for full iOS Safari compatibility. */
	.map-main-section--products-block .ser-map-block.ser-mobile-map-open {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
		background: #1a1a1a;
	}

	/* .ser-map-child fills the fixed container and acts as positioning root */
	.map-main-section--products-block .ser-map-block.ser-mobile-map-open .ser-map-child {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: block;
	}

	/* Leaflet / Google map fills the entire overlay.
	   z-index: 1 creates a new stacking context so Leaflet's internal z-indices
	   (controls at 1000, markers at 600, etc.) stay contained inside the map —
	   keeping the carousel (z-index: 2) and close button (z-index: 3) above it. */
	.map-main-section--products-block .ser-map-block.ser-mobile-map-open .filmabonito-map-container {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		border-radius: 0 !important;
		z-index: 1 !important;
	}

	/* Hide the grid/map toggle on mobile (FAB handles it) */
	.map-main-section--products-block .ser-btn[id$="-gridToggle"] {
		display: none !important;
	}

	/* Close button – top-right corner, floats above map */
	.blk-mobile-map-close {
		position: absolute;
		top: 14px;
		right: 14px;
		z-index: 3;
		background: rgba(26, 26, 26, 0.88);
		color: #fff;
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		min-width: 0;
		min-height: 0;
		padding: 0;
		line-height: 1;
		box-sizing: border-box;
		display: none;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.ser-map-block.ser-mobile-map-open .blk-mobile-map-close {
		display: flex;
	}

	/* ── Bottom carousel overlay – HomeExchange style ──
	   position: absolute so the map fills 100% behind it */
	.blk-map-carousel {
		display: none;
	}

	.ser-map-block.ser-mobile-map-open .blk-map-carousel {
		display: flex;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		align-items: stretch;
		gap: 10px;
		padding: 10px 14px 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		background: rgba(18, 18, 18, 0.1);
		-webkit-backdrop-filter: blur(1px);
		backdrop-filter: blur(1px);
		height: 164px;
		box-sizing: border-box;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.ser-map-block.ser-mobile-map-open .blk-map-carousel::-webkit-scrollbar {
		display: none;
	}

	/* FAB pill – above bottom nav bar when map is closed.
	   z-index 9999 keeps it above the mobile bottom bar (9998).
	   env(safe-area-inset-bottom) ensures correct offset on iOS notch devices. */
	.blk-mobile-map-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		background: rgba(26, 26, 26, 0.94);
		color: #fff;
		border: none;
		border-radius: 50px;
		padding: 14px 28px;
		width: auto;
		height: auto;
		min-width: 140px;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.01em;
		cursor: pointer;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
		white-space: nowrap;
	}

	.blk-mobile-map-fab svg {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
	}

	.blk-mobile-map-fab span {
		display: inline;
	}

	.blk-mobile-map-fab:hover,
	.blk-mobile-map-fab:focus-visible {
		background: rgba(26, 26, 26, 1);
		transform: translateX(-50%) translateY(-2px);
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
	}

	/* When map is open: FAB floats above the carousel (164px) + 16px gap.
	   z-index 10002 keeps it above the fullscreen map (10000) and carousel (z 2). */
	body.ser-mobile-map-open .blk-mobile-map-fab {
		display: flex;
		bottom: calc(164px + 16px + env(safe-area-inset-bottom, 0px));
		z-index: 10002;
	}
}

@media (max-width: 480px) {
	/* Keep 2 columns on small phones; only drop to 1 on very narrow devices */
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 2;
		column-gap: 12px;
	}
}

@media (max-width: 360px) {
	.map-main-section--products-block .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
	.map-main-section--products-block .ser-layout.ser-grid-active .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry,
	.map-main-section--products-block .ser-layout--product-only .ser-content-wrap--products-map-block .ser-gallery.ser-gallery--masonry {
		column-count: 1;
	}
}

/* On desktop: keep mobile-only elements hidden */
@media (min-width: 768px) {
	.blk-mobile-map-close,
	.blk-mobile-map-fab,
	.blk-map-carousel {
		display: none !important;
	}
}