/* Sewa Rent — navigation (E3.8): breadcrumbs + mobile back-crumb. Tokens only (tokens.css). Mobile-first. * Markup (includes/navigation.php): * nav.sewa-nav-crumbs[aria-label=Breadcrumb] > .sewa-nav-back (a.sewa-nav-back-btn + a.sewa-nav-back-link + button.sewa-nav-toggle) * + ol.sewa-nav-list > li.sewa-nav-item (> a | span.sewa-nav-current[aria-current=page]) * Fallback inside Listeo's own wrapper: nav#breadcrumbs > ul > li.sewa-nav-back + li.sewa-nav-item (same classes). * Phones (≤ 991px, Listeo's mobile breakpoint): one 44px row "‹ Boats in Bali ···"; the full path opens on tap. * Desktop (≥ 992px): one-line list, each crumb truncated with an ellipsis, last crumb shrinks. */ .sewa-nav-crumbs, #breadcrumbs.sewa-nav-crumbs--listeo{font-size:var(--sewa-font-size-sm);line-height:20px;color:var(--sewa-muted);margin:0 0 var(--sewa-space-2)} /* Listeo's single-listing page paints a decorative 200px gradient (.single-listing-page-titlebar, position:absolute, #f7f7f7 → rgba(255,255,255,.5)) over the static rows below the header: the crumbs row looked washed out and every tap landed on the gradient (elementFromPoint = titlebar; audit #72/#74). Let taps through and lift the crumbs above it. */ .single-listing-page-titlebar{pointer-events:none} .sewa-nav-crumbs{position:relative;z-index:2} /* Same on listing archives: Listeo's sticky "Show filters" strip (.sticky-filter-button, z-index 10) has a transparent 450×46 .filter-button-container lying over the crumbs row (qa on-top check, 390 and 1440). Only its button takes taps. */ .sticky-filter-button .filter-button-container{pointer-events:none} .sticky-filter-button .filter-button-container button,.sticky-filter-button .filter-button-container a{pointer-events:auto} .sewa-nav-crumbs a{color:var(--sewa-muted);text-decoration:none} .sewa-nav-crumbs a:hover,.sewa-nav-crumbs a:focus-visible{color:var(--sewa-accent)} .sewa-nav-crumbs a:focus-visible,.sewa-nav-toggle:focus-visible{outline:2px solid var(--sewa-navy);outline-offset:2px;border-radius:4px} /* --- Mobile back row ------------------------------------------------- */ .sewa-nav-back{display:flex;align-items:center;gap:0;min-height:44px;margin:0 0 0 -10px;padding:0} .sewa-nav-back-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:var(--sewa-text)} .sewa-nav-back-btn:hover,.sewa-nav-back-btn:focus-visible{background:var(--sewa-bg-soft);color:var(--sewa-text)} .sewa-nav-back-icon{width:22px;height:22px;display:block} .sewa-nav-back-link{flex:1 1 auto;min-width:0;min-height:44px;display:inline-flex;align-items:center;color:var(--sewa-text);font-weight:500;font-size:var(--sewa-font-size);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sewa-nav-back-link:hover,.sewa-nav-back-link:focus-visible{color:var(--sewa-accent)} .sewa-nav-toggle{flex:0 0 44px;width:44px;height:44px;margin:0 0 0 auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sewa-muted);font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none} .sewa-nav-toggle:hover,.sewa-nav-toggle[aria-expanded="true"]{background:var(--sewa-bg-soft);color:var(--sewa-text)} .sewa-nav-toggle-dots{font-size:22px;line-height:1;letter-spacing:1px} /* --- The list ---------------------------------------------------------- */ .sewa-nav-list, #breadcrumbs.sewa-nav-crumbs--listeo > ul, #titlebar #breadcrumbs > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;min-width:0;max-width:100%;overflow:hidden} .sewa-nav-item{display:inline-flex;align-items:center;min-width:0;flex:0 1 auto;white-space:nowrap;margin:0} .sewa-nav-item + .sewa-nav-item::before{content:"\203A";flex:0 0 auto;margin:0 var(--sewa-space-2);color:var(--sewa-muted)} .sewa-nav-item > a,.sewa-nav-current{display:inline-block;min-width:0;max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 0} .sewa-nav-item--current{flex:1 1 auto} .sewa-nav-current{color:var(--sewa-text);font-weight:500;max-width:100%} /* Listeo's wrapper: drop its Font Awesome chevrons, floats and offsets so both renderers look identical. */ #breadcrumbs ul li.sewa-nav-item, #breadcrumbs ul li.sewa-nav-back{display:inline-flex;margin:0;line-height:20px} #breadcrumbs ul li.sewa-nav-back{display:flex;flex:0 0 100%} #breadcrumbs ul li.sewa-nav-item::before{content:"\203A";font-family:inherit;font-weight:400;font-size:inherit;position:static;top:auto;margin:0 var(--sewa-space-2);color:var(--sewa-muted)} #breadcrumbs ul li.sewa-nav-item--home::before, #breadcrumbs ul li.sewa-nav-back::before{display:none} #breadcrumbs ul li.sewa-nav-item span.sewa-nav-current{margin:0;font-size:inherit} #titlebar #breadcrumbs ul li.sewa-nav-item a{color:var(--sewa-muted)} #titlebar #breadcrumbs ul li.sewa-nav-item a:hover{color:var(--sewa-accent)} #titlebar.photo-bg #breadcrumbs ul li.sewa-nav-item,.parallax #titlebar #breadcrumbs ul li.sewa-nav-item, #titlebar.photo-bg #breadcrumbs ul li.sewa-nav-item a,.parallax #titlebar #breadcrumbs ul li.sewa-nav-item a, #titlebar.photo-bg #breadcrumbs ul li.sewa-nav-item::before,.parallax #titlebar #breadcrumbs ul li.sewa-nav-item::before, #titlebar.photo-bg #breadcrumbs .sewa-nav-current,.parallax #titlebar #breadcrumbs .sewa-nav-current{color:#fff} /* --- Phones / tablets (≤ 991px) ---------------------------------------- */ @media (max-width:991px){ /* JS present: the list is collapsed behind the toggle; expanded it wraps with 44px rows. */ .sewa-nav--js .sewa-nav-list, #breadcrumbs.sewa-nav--js > ul > li.sewa-nav-item{display:none} .sewa-nav--js.is-expanded .sewa-nav-list{display:flex;flex-wrap:wrap;overflow:visible;padding:0 0 var(--sewa-space-2)} #breadcrumbs.sewa-nav--js.is-expanded > ul{flex-wrap:wrap;overflow:visible} #breadcrumbs.sewa-nav--js.is-expanded > ul > li.sewa-nav-item{display:inline-flex} .is-expanded .sewa-nav-item > a,.is-expanded .sewa-nav-current{min-height:44px;display:inline-flex;align-items:center;max-width:100%} .is-expanded .sewa-nav-item{white-space:normal} /* No JS: the one-line list stays visible, middle crumbs collapse to "…" (Home › … › Parent › Current). */ .sewa-nav-crumbs:not(.sewa-nav--js) .sewa-nav-toggle{display:none} .sewa-nav-crumbs:not(.sewa-nav--js) .sewa-nav-item:nth-child(n+3):nth-last-child(n+3){display:none} .sewa-nav-crumbs:not(.sewa-nav--js) .sewa-nav-item:nth-child(n+3):nth-last-child(2)::before{content:"\203A \2026 \203A"} .sewa-nav-crumbs:not(.sewa-nav--js) .sewa-nav-item > a,.sewa-nav-crumbs:not(.sewa-nav--js) .sewa-nav-current{min-height:44px;display:inline-flex;align-items:center} /* Listeo positions #breadcrumbs absolutely on the right of the titlebar above 768px; the back row needs the full width. */ #titlebar #breadcrumbs{position:relative;top:0;right:auto;transform:none;max-width:100%;text-align:left;display:block;margin-top:var(--sewa-space-2)} #titlebar #breadcrumbs > ul{flex-wrap:wrap} } /* --- Desktop (≥ 992px) --------------------------------------------------- */ @media (min-width:992px){ /* Visual review #18: the back arrow stays on desktop too — a compact 36px circle in front of the one-line trail. */ .sewa-nav-crumbs{display:flex;align-items:center;min-width:0} .sewa-nav-back{flex:0 0 auto;min-height:36px;margin:0 var(--sewa-space-1) 0 -8px} .sewa-nav-back-btn{flex:0 0 36px;width:36px;height:36px} .sewa-nav-back-icon{width:18px;height:18px} .sewa-nav-back-link,.sewa-nav-toggle,#breadcrumbs ul li.sewa-nav-back .sewa-nav-back-link,#breadcrumbs ul li.sewa-nav-back .sewa-nav-toggle{display:none} .sewa-nav-crumbs > .sewa-nav-list{flex:1 1 auto} #breadcrumbs ul li.sewa-nav-back{display:flex;flex:0 0 auto;margin:0 var(--sewa-space-1) 0 -8px} .sewa-nav-crumbs--listing{margin:var(--sewa-space-3) 0 var(--sewa-space-3)} } /* --- One place for the trail (#18): first row under the header, left-aligned, above the H1 ------------------ Titlebar pages (Help, Become a partner, 404, search): Listeo prints the trail after the H1 (and floats it to the right on desktop); the column becomes a flex column so the trail comes first, and the band starts right under the header like Contact / archives / listings / regions. */ body.sewa-nav-has-crumbs #titlebar{padding-top:var(--sewa-space-3)} body.sewa-nav-has-crumbs #titlebar > .container > .row > [class*="col-"]{display:flex;flex-direction:column} body.sewa-nav-has-crumbs #titlebar > .container > .row > [class*="col-"] > .sewa-nav-crumbs, body.sewa-nav-has-crumbs #titlebar > .container > .row > [class*="col-"] > #breadcrumbs{order:-1;position:static;top:auto;right:auto;transform:none;max-width:100%;margin:0 0 var(--sewa-space-3);text-align:left} #titlebar .sewa-nav-crumbs--page .sewa-nav-list,#titlebar #breadcrumbs > ul{justify-content:flex-start} .sewa-reg-hero .sewa-nav-crumbs--region{margin:0 0 var(--sewa-space-3)} @media (min-width:768px){body.sewa-nav-has-crumbs .sewa-reg-hero{padding-top:var(--sewa-space-3)}} /* --- Variants ------------------------------------------------------------- */ .sewa-nav-crumbs--content{margin:var(--sewa-space-3) 0 var(--sewa-space-6)} .sewa-nav-crumbs--archive{margin:0 0 var(--sewa-space-3)} .sewa-nav-crumbs--page{margin-top:var(--sewa-space-2)} .sewa-nav-crumbs--listing{margin:0 0 var(--sewa-space-2)} @media (max-width:767px){ /* Listing on phones: the row sits right under the 48px fixed header, above the tag chips; the 16px titlebar gap stays. */ .single-listing .sewa-nav-crumbs--listing{margin:4px 0 -8px} } /* --- Archive H1 (navigation.php §5) --------------------------------------- */ .sewa-archive-title, .filters-container h1.sewa-archive-title{font-size:22px;line-height:1.25;font-weight:700;color:var(--sewa-text);margin:0 0 var(--sewa-space-3);padding:0;letter-spacing:0} @media (min-width:992px){.sewa-archive-title,.filters-container h1.sewa-archive-title{font-size:26px;margin-bottom:var(--sewa-space-4)}} /* --- Header "Add listing" CTA (navigation.php §6) --------------------------- */ .sewa-host-cta{display:none} /* One "Add listing" for every role (TRACKER 2.49): Listeo's logged-in button right after ours ("Add Listing" → the old submit form for owners, "Browse Listings" for guests) is replaced by it. */ #header .header-widget > .sewa-host-cta ~ a.button.border{display:none !important} @media (min-width:1025px){ /* Inside Listeo's .header-widget (flex row): Contact us · Sign In · [+ Add listing] · IDR · flag (flag rightmost, owner) */ #header .header-widget a.sewa-host-cta{display:inline-flex;align-items:center;gap:6px;order:1;height:40px;padding:0 16px;border:1.5px solid var(--sewa-accent);border-radius:var(--sewa-radius-pill);background:var(--sewa-bg);color:var(--sewa-accent);font-weight:600;font-size:var(--sewa-font-size-sm);line-height:1;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s} #header .header-widget a.sewa-host-cta:hover,#header .header-widget a.sewa-host-cta:focus-visible{background:var(--sewa-accent);color:var(--sewa-bg)} #header .header-widget a.sewa-host-cta:focus-visible{outline:2px solid var(--sewa-navy);outline-offset:2px} #header .header-widget .sewa-host-cta-icon{width:16px;height:16px;flex:0 0 auto} #header .header-widget > .sewa-cur{order:2} #header .header-widget > .sewa-lang{order:3} /* Header-with-search layout (inner pages): Listeo's widget is a plain block there; make it the same flex row. */ #header .hws-container .header-widget{display:flex;align-items:center;gap:12px} #header .hws-container .header-widget > *{margin-top:0;margin-bottom:0} } /* W5 QA 2026-10-10: on 1025–1699 px the desktop header did not fit (logo squeezed to 0 px; "Destinations" under "Contact Us" in en at 1280 and in fr/ru/uk at 1440). The logo never shrinks; Sign In is an icon (44 px); the menu is a little tighter; "Add listing" shows only its "+" where the row is short (all languages ≤ 1366 px, fr/ru/uk ≤ 1699 px, label kept for screen readers); "Contact Us" (also in the footer and the burger) is hidden ≤ 1366 px and in fr/ru/uk ≥ 1700 px. Checked with no overlap in 9 languages at 1025–1920 px (docs/review/visual-qa-2026-10-10.md). */ @media (min-width:1025px){ #header #logo{flex-shrink:0} #header .header-widget{gap:10px} #header #navigation > ul > li > a{padding-left:8px;padding-right:8px} #header .header-widget a.sign-in{display:inline-flex;align-items:center;justify-content:center;font-size:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;line-height:1} #header .header-widget a.sign-in > i{font-size:18px;margin:0;padding:0;position:static;top:auto;left:auto;line-height:1} } @media (min-width:1025px) and (max-width:1366px){ #header .header-widget a.sewa-contact-link{display:none} #header .header-widget a.sewa-host-cta{width:40px;padding:0;justify-content:center} #header .header-widget a.sewa-host-cta > span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } @media (min-width:1367px) and (max-width:1699px){ html:lang(ru) #header .header-widget a.sewa-host-cta,html:lang(uk) #header .header-widget a.sewa-host-cta,html:lang(fr) #header .header-widget a.sewa-host-cta{width:40px;padding:0;justify-content:center} html:lang(ru) #header .header-widget a.sewa-host-cta > span,html:lang(uk) #header .header-widget a.sewa-host-cta > span,html:lang(fr) #header .header-widget a.sewa-host-cta > span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } @media (min-width:1025px) and (max-width:1239px){ #header .header-widget{gap:6px} #header #navigation > ul > li > a{padding-left:6px;padding-right:6px} html:lang(ru) #header #navigation > ul > li > a,html:lang(uk) #header #navigation > ul > li > a{padding-left:4px;padding-right:4px} #header #navigation.style-1{margin-left:10px} #header #logo img{max-width:110px;height:auto} } /* 2.119 (owner screenshot, logged in): the account menu = avatar + "My Account" (137 px, Listeo) is ~90 px wider than the Sign In icon, so for every logged-in role "My Account" covered "Destinations" at 1025–1239 px and "Contact Us" covered it in en at 1440 and in ru/uk at 1367–1699. Like Sign In, the account menu is a 44 px avatar button up to 1699 px (the label stays for screen readers; the dropdown is unchanged). 768–1024 px: Listeo moves the whole logged-in right side to a second row (avatar drawn over "My Account"); it now sits in the logo row next to the burger, as for visitors. Logo: the wordmark's baseline sat 9–10 px below the menu text (the pin takes the top of the image); it is lifted onto the menu baseline. 0 overlaps: 5 roles × 9 languages × 13 widths (tests/playwright layout-global). */ @media (min-width:768px) and (max-width:1699px){ #header .header-widget .user-menu .usrname{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #header .header-widget .user-menu{width:44px;height:44px;padding:0} #header .header-widget .user-menu .user-name{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;cursor:pointer} #header .header-widget .user-menu .user-name > span{position:static;width:36px;height:36px;margin:0;line-height:0} #header .header-widget .user-menu .user-name > span img{width:36px;height:36px} #header .header-widget .user-menu:not(:has(.nav-tag.messages)) .user-name::after{position:absolute;right:-4px;bottom:2px;top:auto;margin:0} #header .header-widget .user-menu:has(.nav-tag.messages) .user-name::after{top:2px;left:30px} /* unread dot (search.css) */ } @media (min-width:768px) and (max-width:1024px){ body.logged-in.slim-mobile-menu #header .container{position:relative} body.logged-in.slim-mobile-menu #header .right-side{position:absolute;top:0;right:76px;display:flex;align-items:center;width:auto;height:50px;margin:0;padding:0;float:none;transform:none} body.logged-in.slim-mobile-menu #header .right-side .header-widget{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;height:auto;margin:0;padding:0;border-top:0;top:0} body.logged-in.slim-mobile-menu #header .right-side .header-widget > *{margin-top:0;margin-bottom:0;top:0} } /* Exactly 768 px (iPad Mini portrait): Listeo's slim header (≤ 768) but the phone rule hiding "Contact Us" stops at 767 — it sat under Sign In, and Sign In touched the burger (4 px). */ @media (min-width:768px) and (max-width:768px){ #header .header-widget a.sewa-contact-link{display:none} .slim-mobile-menu #header .right-side{right:76px} } @media (min-width:1025px){#header #logo img,html body #header.cloned #logo img{transform:translateY(-10px)}} /* .cloned = Listeo's sticky copy (resets transform) */ @media (min-width:1025px) and (max-width:1239px){#header #logo img,html body #header.cloned #logo img{transform:translateY(-8px)}} @media (min-width:1700px){ html:lang(ru) #header .header-widget a.sewa-contact-link,html:lang(uk) #header .header-widget a.sewa-contact-link,html:lang(fr) #header .header-widget a.sewa-contact-link{display:none} } /* One header on every page (visual review #17, migration 0023): the half-map archives (and region landings, which carry the same body class) stretch Listeo's header container to the full width — same centred container as the other pages (Bootstrap .container widths, css/bootstrap-grid.css). */ @media (min-width:992px){body.halfsidebar-archive-listings-layout #header-container:not(.fullwidth) #header .container{width:970px;margin:0 auto;padding:0 15px}} @media (min-width:1240px){body.halfsidebar-archive-listings-layout #header-container:not(.fullwidth) #header .container{width:1090px}} @media (min-width:1367px){body.halfsidebar-archive-listings-layout #header-container:not(.fullwidth) #header .container{width:1210px}} @media (min-width:1700px){body.halfsidebar-archive-listings-layout #header-container:not(.fullwidth) #header .container{width:1360px}} /* Burger menu (phones/tablets, and the desktop off-canvas of the header-with-search layout) */ /* even rhythm (TRACKER 2.65): divider, G, button, G-3 (+3 of the next row) — G = --sewa-burger-gap (child style.css) */ .mobile-navigation-wrapper #mobile-nav > li.sewa-menu-cta{margin-top:8px;padding:var(--sewa-burger-gap,24px) 20px calc(var(--sewa-burger-gap,24px) - 3px);border-top:1px solid rgba(var(--sewa-white-rgb),.14)} .mobile-navigation-wrapper #mobile-nav > li.sewa-menu-cta > a.sewa-menu-cta-link{display:flex;align-items:center;justify-content:center;gap:var(--sewa-space-2);min-height:48px;padding:0 var(--sewa-space-4);border-radius:var(--sewa-radius-pill);background:var(--sewa-accent);color:var(--sewa-bg);font-weight:600;font-size:var(--sewa-font-size);line-height:1.2;text-decoration:none} .mobile-navigation-wrapper #mobile-nav > li.sewa-menu-cta > a.sewa-menu-cta-link:hover, .mobile-navigation-wrapper #mobile-nav > li.sewa-menu-cta > a.sewa-menu-cta-link:focus-visible{background:var(--sewa-accent-dark);color:var(--sewa-bg)} .mobile-navigation-wrapper #mobile-nav > li.sewa-menu-cta > a.sewa-menu-cta-link::after{display:none} /* Guest on a Listeo owner-only dashboard page: our "Add listing" card replaces Listeo's notice (navigation.php §6) */ .sewa-owner-only{max-width:640px;margin:0 0 var(--sewa-space-6);padding:var(--sewa-space-6);border:1px solid var(--sewa-line);border-radius:var(--sewa-radius);background:var(--sewa-bg)} .sewa-owner-only + .row{display:none} .sewa-owner-only__title{margin:0 0 var(--sewa-space-2);font-size:22px;line-height:1.25;font-weight:700;color:var(--sewa-text)} .sewa-owner-only__text{margin:0 0 var(--sewa-space-4);color:var(--sewa-muted)} .sewa-owner-only__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sewa-space-4);margin:0} .sewa-owner-only a.sewa-owner-only__cta{display:inline-flex;align-items:center;gap:6px;margin:0;border-radius:var(--sewa-radius-pill)} .sewa-owner-only__link{text-decoration:underline} /* --- History hygiene helpers ---------------------------------------------- */ /* In-page anchors (sticky "Request dates" → booking widget) are scrolled by navigation.js; leave room for the fixed header. */ #booking-widget-anchor,.sewa-nav-scroll-target{scroll-margin-top:64px} @media (min-width:992px){#booking-widget-anchor,.sewa-nav-scroll-target{scroll-margin-top:120px}} @media (prefers-reduced-motion:reduce){.sewa-nav-crumbs *{transition:none}} /* --- Archives ≤ 1008px (Listeo's collapsible-map breakpoint): no map sliver until "Show map" (visual review #8) --- navigation.js mapProxy() adds body.sewa-map-proxy once its pill sits next to "Show Filters"; the collapsed map keeps its size inside a 0-height box so Leaflet stays measurable, and opens at the top when the pill is tapped. */ .sewa-map-toggle{display:none} @media (max-width:1008px){ /* W6: body.sewa-map-pending (server-side) gives the same collapsed box from first paint — no layout shift when JS runs. */ body.sewa-map-proxy:not(.sewa-map-open) .full-page-map-container,body.sewa-map-pending:not(.sewa-map-open) .full-page-map-container{height:0!important;min-height:0!important;max-height:0!important;flex:0 0 0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important} body.sewa-map-proxy .mobile-map-toggle-btn{display:none!important} .sewa-map-proxy .sewa-map-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 0 10px;padding:0 18px;border:1px solid var(--sewa-line);border-radius:var(--sewa-radius-pill);background:var(--sewa-bg);color:var(--sewa-navy);font:inherit;font-size:var(--sewa-font-size-sm);font-weight:600;line-height:1;cursor:pointer;vertical-align:middle;flex:0 0 auto} .sewa-map-proxy .sewa-map-toggle:hover,.sewa-map-proxy .sewa-map-toggle[aria-expanded="true"]{border-color:var(--sewa-accent);color:var(--sewa-accent)} .sewa-map-proxy .sewa-map-toggle:focus-visible{outline:2px solid var(--sewa-navy);outline-offset:2px} /* Listeo stacks "Show Filters" and the category strip in a column: the pills share the first row, the strip wraps under. */ .sewa-map-proxy .full-page-content-inner .filter-button-container{flex-direction:row;flex-wrap:wrap;align-items:center} .sewa-map-proxy .full-page-content-inner .filter-button-container > .slider-container{flex:0 0 100%} /* N9: one row, one height — Listeo nudges "Show Filters" down 4px (top:4px) and makes it 46px tall. */ .sewa-map-proxy .full-page-content-inner .filter-button-container > .enable-filters-button{top:0;margin-top:0;margin-bottom:0;align-self:center} .sewa-map-proxy .sewa-map-toggle{height:46px;min-height:46px;margin-top:0;margin-bottom:0;align-self:center} }