measures 390 and overflow-x:hidden * does not suppress it. The result was a 962px document at a 390px * viewport, which made mobile Chrome shrink-to-fit the whole page. * Paint containment stops the overflow escaping; scrolling is * unaffected. */ contain: paint; } .hz-listings::-webkit-scrollbar { display: none; } .hz-listings > li { flex: 0 0 78%; scroll-snap-align: start; } .hz-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .hz-why__text { max-width: none; } } @media (max-width: 520px) { .hz-areas__track { gap: 12px; } .hz-areas__track > li { width: 184px; } .hz-area__name { font-size: 15px; } .hz-area__media { height: 120px; } .hz-area__body { min-height: 112px; padding: 11px 2px 0; } .hz-area__actions { gap: 12px; margin-top: 12px; } .hz-area__action { font-size: 14px; } .hz-why { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* =========================================================== new projects === * * Off-plan project grid. Full-bleed photograph per card with every piece of * copy overlaid at the bottom over a scrim, which is what makes this section * look different from .hz-lcard above (photo on top, copy on white below). * * This block is appended after the existing responsive rules on purpose, so * its own media queries below can override the shared .hz-sec__title sizes * without a specificity bump. * ========================================================================= */ .hz-np__title { font-size: 28px; } .hz-np__sub { margin: 7px 0 0; color: #6b7280; font-size: 14px; line-height: 1.5; } /* * City strip. Wraps rather than scrolls sideways: a horizontal scroller here * would put a second overflow container on the page for the sake of four * short words, and .hz-listings already showed how easily that leaks into the * document scroll width. */ .hz-np__tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 18px 0 22px; padding: 0; border-bottom: 1px solid var(--hz-line); list-style: none; } .hz-np__tab { display: inline-block; /* Pulls the 2px indicator down onto the strip's own hairline. */ margin-bottom: -1px; padding: 0 1px 9px; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; } /* * The selected city. This is the same device as the tab strip in "Explore * more" lower down the page -- a 2px underline plus the accent on the label -- * and it carried the same stale red for the same reason: both were written * against --hz-red and neither was moved when the channel took the purple. * They now read the same token, so the two strips cannot drift apart again. */ .hz-np__tab--on { border-bottom-color: var(--hagzi-primary); color: var(--hagzi-primary); font-weight: 600; } /* Inert, like the hero filter chips: there is no city filter to run yet. */ .hz-np__tab--off { color: #9aa1ad; cursor: default; } .hz-np { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; } .hz-np__card { position: relative; display: flex; /* Copy sits on the floor of the card, photo fills whatever is left. */ flex-direction: column; justify-content: flex-end; height: 100%; /* * min-height rather than aspect-ratio: only some cards carry a specs row, * so the copy block varies in height, and a fixed ratio would clip it in * a narrow column. This lets the card grow past the ratio if it must. */ min-height: 408px; padding: 14px; border-radius: 12px; /* Holds the negative z-index layers below inside this card. */ isolation: isolate; /* Shows through until the lazy photograph arrives; keeps text legible. */ background: #2a2f38; overflow: hidden; } /* * Photo and scrim ride negative z-indexes instead of the copy riding a * positive one, so every text node below stays at auto and no stacking * order has to be maintained as the card's contents change. */ .hz-np__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } /* * Stop positions are set from measured contrast, not by eye. With the middle * stop at 0.54 the location line on the golden-hour tower photograph came out * at 3.1:1 against a (139,131,117) background, below the 4.5:1 that 11.5px * text needs. Raising the 58% stop to 0.68 is what clears it; a lighter scrim * with more opaque text does not, because the bright photo is the constraint * rather than the text alpha. */ .hz-np__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(10, 13, 18, 0.46) 0%, rgba(10, 13, 18, 0.10) 26%, rgba(10, 13, 18, 0.68) 58%, rgba(10, 13, 18, 0.94) 100% ); } .hz-np__flags { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .hz-np__flag, .hz-np__plan { padding: 3px 8px; border-radius: 4px; background: rgba(12, 16, 22, 0.74); color: #ffffff; font-size: 10.5px; font-weight: 600; line-height: 1.55; letter-spacing: 0.1px; } .hz-np__body { display: flex; flex-direction: column; align-items: flex-start; } /* * Deliberately a text chip, not an image. These developers are invented for * the demo, so there is no logo to show, and a set-in-caps name is honest * about that where a fabricated wordmark would not be. * * A span rather than an anchor since the cards became clickable: there is no * developer page, and as an anchor it was a dead spot in the card's hit area. * cursor: default so it does not read as a control, matching the locale * indicator and the header's favourite and notification marks. */ .hz-np__dev { display: inline-block; cursor: default; max-width: 100%; margin-bottom: 9px; padding: 5px 9px; border-radius: 3px; background: #ffffff; color: #1b1f27; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-decoration: none; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hz-np__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; } .hz-np__name a { color: #ffffff; text-decoration: none; } .hz-np__name a:hover { text-decoration: underline; } /* * Whole-card click target. * * Now that the project pages exist, the name being the only hit area is a * 17px line on a 408px card. This stretches the name's own anchor over the * card with a transparent ::after, which is the one approach that adds no * nested anchor, no second tab stop and no script — worth insisting on here, * because anything scripted would be lost to the Vue remount on #app. * * Only applied via --linked, set in the template when the record has a url. An * unconditional rule would turn a url-less card into one big link to '#'. * * The card is already `position: relative` with `isolation: isolate`, and the * photo and scrim ride z-index -2 and -1, so the overlay needs no z-index of * its own: as a positioned box it paints above the in-flow copy while staying * below nothing that matters. * * Known trade-off: an overlay like this makes text inside the card hard to * select by dragging. Accepted — there is nothing here anyone needs to copy, * and the alternative of duplicating the link around the whole card would give * screen readers the card's entire contents as one link name. */ .hz-np__card--linked .hz-np__name a::after { content: ''; position: absolute; inset: 0; /* No background: purely a hit area. */ } /* The affordance has to match the target, or only the name looks clickable. */ .hz-np__card--linked:hover .hz-np__name a { text-decoration: underline; } /* * The one genuinely interactive thing inside the card has to stay above the * overlay or the card link would eat it. Positioned with a z-index so it wins * against the overlay's painting order regardless of DOM position. * * .hz-np__dev is deliberately NOT lifted: it is an inert span now, so letting * the card link cover it is the point. */ .hz-np__card--linked .hz-np__wa { position: relative; z-index: 1; } .hz-np__loc { margin: 4px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 11.5px; line-height: 1.4; } .hz-np__specs { display: flex; align-items: center; margin: 8px 0 0; padding: 0; color: rgba(255, 255, 255, 0.9); font-size: 11.5px; list-style: none; } .hz-np__specs li { display: inline-flex; align-items: center; gap: 5px; } .hz-np__specs li + li { margin-inline-start: 10px; padding-inline-start: 10px; border-inline-start: 1px solid rgba(255, 255, 255, 0.34); } .hz-np__specs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hz-np__pricelabel { margin: 12px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 10.5px; } .hz-np__price { display: flex; align-items: baseline; gap: 5px; margin: 2px 0 0; color: #ffffff; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; } .hz-np__price span { font-size: 14px; font-weight: 600; } .hz-np__plan { margin-top: 9px; } .hz-np__wa { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: 6px; background: #ffffff; color: #1b1f27; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .hz-np__wa:hover { background: #eef0f4; } .hz-np__wa svg { flex: 0 0 auto; width: 16px; height: 16px; } .hz-np__wa-bubble { fill: #25d366; } .hz-np__wa-phone { fill: #ffffff; } /* * Everything in this section sits on a dark photo, so the ring is white. * * .hz-np__dev is no longer listed: it is an inert span with no tabindex, so it * cannot take focus and the selector would never match. The ring stays on the * name — the card's link — rather than being stretched around the whole card, * so a keyboard user sees which card is focused without a 408px outline. */ .hz-np__name a:focus-visible, .hz-np__wa:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; border-radius: 6px; } @media (max-width: 1080px) { .hz-np { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .hz-np__title { font-size: 22px; } .hz-np__sub { font-size: 13.5px; } } /* * Two columns are held all the way down to 620 rather than dropping to one at * the usual 720. At 720 a single card would be 672px wide against a 408px * floor, a letterbox that crops the photograph hard and strands the copy in * one corner. Below 620 two columns would be under 280px each, too narrow for * a 20px price and a full-width button, so that is where it stacks. */ @media (max-width: 620px) { .hz-np { grid-template-columns: minmax(0, 1fr); gap: 16px; } .hz-np__card { min-height: 400px; } } /* Let the existing listing-title link open from anywhere on a home listing card. The favorite remains a separate control above the link overlay. */ .hz-lcard { position: relative; isolation: isolate; } .hz-lcard__title a::after { position: absolute; z-index: 1; inset: 0; border-radius: 12px; content: ''; cursor: pointer; } .hz-lcard__fav { z-index: 2; } /* * HGZ-015: muted text and date-picker contrast. * * Muted copy on this channel (.hz-chip__legend, .hz-chip__num, * .hz-lcard__loc, .hz-lcard__price span, .hz-why__text, .hzloc__heading) * moved from #8b929f (3.13:1 on white) to #5b6577 (5.88:1 on white), which * clears WCAG AA for small text. .hz-search__icon keeps #8b929f: it is a * decorative, aria-hidden glyph and 3.13:1 already meets the 3:1 non-text * threshold. * * flatpickr's stock selected/today-hover fill is #569ff7 with white text * (2.73:1). #2563eb with white text is 5.17:1. */ .flatpickr-day.today:hover, .flatpickr-day.today:focus, .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.startRange, .flatpickr-day.endRange { border-color: #2563eb; background: #2563eb; color: #ffffff; } /* themes/property/property-header.css */ /* =========================================================================== Property header — account entry point. A separate file rather than more rules in property.css, for the same reason property-pages.css exists: another session had property.css open while this was written, so nothing was written to it. Loaded from components/layouts/footer/styles.blade.php immediately after property.css, so the --hz-* tokens it declares are already in scope and these rules win ties against it without needing manufactured specificity. Every selector here is .hz-hicon--link — a class that exists nowhere else. (The disabled notifications bell was removed, HGZ-032, along with the rules here that named it; the bell now only appears as a .hz-hicon--link when the customer inbox route exists.) Delete this file and its and the header returns exactly to its previous rendering. =========================================================================== */ /* --------------------------------------------------------------------------- A wired icon is a control, so it takes the control's ink. property.css puts the heart and the bell on #9aa1ad and says why: "Inert by construction like the locale beside them ... so they take the same muted grey rather than the phone's darker nav colour. That is this header's existing signal for 'indicator, not control', and using a live-looking treatment on something with no destination is the thing we are avoiding." The converse is what this rule does. The heart and the account glyph now have real destinations, so they move to --hz-nav, which is the phone's colour and this header's established ink for a control: grey is an indicator, dark is something you can press. Nothing about the size or the spacing changes — the 32px box, the 22px glyph and the -9px sibling pull are all still property.css's, untouched. --------------------------------------------------------------------------- */ .hz-header .hz-hicon--link { color: var(--hz-nav, #3c414c); cursor: pointer; text-decoration: none; } .hz-header .hz-hicon--link:hover, .hz-header .hz-hicon--link:focus-visible { color: var(--hz-ink, #12141a); } /* --------------------------------------------------------------------------- The focus ring property.css asked for. Its .hz-hicon comment closes with an instruction: "No :focus-visible rule, because neither is focusable: they are spans with no tabindex, so there is no focus to style. If either is later wired to a real route it becomes an and MUST be added to the .hz-header focus-ring selector list near the top of this file." That is exactly what happened, and this is that rule — in this file rather than in that selector list only because property.css is being edited by another session and must not be appended to. The values are copied from the two rules it would have joined, so a focused account icon is indistinguishable from a focused phone number or nav link: 3px, 2px offset, 6px radius, and the primary rather than the white used by the rings that sit on photographs, because this one sits on a white header. --------------------------------------------------------------------------- */ .hz-header .hz-hicon--link:focus-visible { outline: 3px solid var(--hagzi-primary, #0745D9); outline-offset: 2px; border-radius: 6px; } /* The account glyph is marked while the visitor is anywhere in /account, the way the nav row marks the section you are in. The primary rather than the ink, so "you are here" reads differently from "you can press this". */ .hz-header .hz-hicon--link[aria-current='page'] { color: var(--hagzi-primary, #0745D9); box-shadow: inset 0 -2px 0 currentColor; } /* The favourites count is resolved from the uncached customer API. It sits on the outside edge of the heart, away from the tightly spaced account control in both LTR and RTL layouts. */ .hz-header .hz-hicon--favorites { position: relative; overflow: visible; } .hz-header .hz-favorites-count { position: absolute; z-index: 2; inset-block-start: -4px; inset-inline-start: -5px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #ffffff; border-radius: 999px; background: #d9004a; color: #ffffff; box-shadow: 0 1px 4px rgba(18, 20, 26, 0.2); font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none; } .hz-header .hz-favorites-count[hidden], .hz-header .hz-mobile-menu__fav-count[hidden] { display: none; } .hz-header .hz-hicon--has-favorites svg { fill: #f40051; stroke: #f40051; } .hz-header .hz-mobile-menu__fav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: #d9004a; color: #ffffff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } /* ============================================================================= The locale control, once it became a control ============================================================================= */ /* * property.css paints .hz-locale as muted static text with cursor: default, * and hides it altogether below 860px. Both were right while it was a dead * label: there was nothing to press, and nothing to read that the page did not * already say by being in English. * * As a switch, neither is. It takes the same darker ink the other pressable * things in this row take -- which is the distinction that row already makes, * grey for an indicator and dark for something you can press -- and it has to * survive to the narrow widths, because a handset is exactly where a reader is * least able to go and find another way to change language. * * Scoped to the --link modifier so the inert span keeps its old treatment on a * channel that has only one locale. */ .hz-locale--link { color: var(--hz-nav, #2f3540); cursor: pointer; text-decoration: none; } .hz-locale--link:hover { color: var(--hagzi-primary, #0745D9); } @media (max-width: 860px) { .hz-locale--link { display: inline-flex; } } /* * Below 480 the row is already carrying the brand, the phone, favourites, * account and the purple CTA, so space is short. The switch keeps its globe and gives up its word rather than the other * way round: the glyph is the part that is recognised without reading, and the * name of the language on offer is still in the title and still in the link's * text for anyone listening to the page rather than looking at it. */ @media (max-width: 480px) { .hz-locale--link > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ============================================================================= The nav row wraps instead of hiding its tail ============================================================================= */ /* * property.css makes .hz-nav a horizontal scroll strip below 1080px -- * `overflow-x: auto` with `scrollbar-width: none` and a ::-webkit-scrollbar * rule -- and gives it its own full-width row below 720px. The scrolling half * of that never worked as an interface: with every scrollbar suppressed the * strip offers no signal whatsoever that there is more of it, so anything past * the right edge is not "one swipe away", it is invisible. * * MEASURED, AT 390px, WITH THE NAV ON ITS OWN ROW * * label boxes gaps (5 x 20) total available * English 243.1 100.0 343.1 342.0 * Arabic 272.1 100.0 372.1 342.0 * * So English hung 1px over the edge, which nobody could see, and Arabic hung * 30px over, which hid Projects/المشاريع entirely on first paint. The strip's * own box is not the problem and cannot be part of the fix: at this breakpoint * its margin-inline-start is already 0 and it has no inline padding, and the * 48px it gives up either side is .hz-shell's gutter, which is the whole * channel's and not the header's to narrow. * * Where the width goes is the two things left. The gaps are 100px -- 29% of the * English total and 27% of the Arabic one -- and the labels differ by 29px * between the locales, of which 24px is text (Arabic ink 248.1 against English * 220.1) and the rest is the six anchors' own 4px of horizontal padding, which * is identical in both. The strip was, in effect, sized for the English label * set; Arabic is 12% wider in ink and that is the whole of the difference. * * WHY WRAPPING RATHER THAN A TIGHTER GAP ALONE * * Tightening the gap is the obvious lever and it is not sufficient, which the * arithmetic settles rather than taste: fitting Arabic at 320px needs 100px * removed from a 100px gap budget, so even a gap of zero leaves it 0.1px over * and English 31px clear only because English is shorter. A single-line strip * cannot hold six items at 320px in either language without shrinking the type, * which is off the table. * * So the strip wraps. That is what makes the guarantee hold for text nobody has * measured yet: these six labels are translatable and a longer one moves the * overflow around, but the failure mode is now a second row rather than a * hidden destination. It is also why this is not a scroll affordance -- a fade * or an arrow would advertise the tail honestly, but the tail would still be * off-screen on first paint, and being able to discover Projects is the point. * * The gap comes down to 12px alongside it so the common case does not pay for * the guarantee: at 390px that puts English at 303.1 and Arabic at 332.1 * against 342.0, so both still render on one line, with 39px of slack in * English and 10px in Arabic. Ink-to-ink separation is 16px once each anchor's * own 2px is counted -- the anchors keep their padding, so hit targets do not * shrink -- and at 320px both locales take a second row with everything on it. * * 720px because that is where property.css already decides the nav needs its * own row; nothing between 721px and 1080px is touched, and neither is the * 30px gap the wide header uses. `overflow-x: auto` is deliberately left where * it is rather than reached into property.css to remove: with wrapping it never * engages, and it stays a last resort for a single label longer than the strip, * which wrapping alone cannot help. */ @media (max-width: 720px) { .hz-header .hz-nav { flex-wrap: wrap; gap: 8px 12px; } } /* * D-20 adds a fifth link (Agencies). Between 721px and 1080px the strip is * the hidden-scrollbar one above, so a tail that does not fit would vanish; * it wraps to a second row instead. */ @media (min-width: 721px) and (max-width: 1080px) { .hz-header .hz-nav { flex-wrap: wrap; row-gap: 4px; } } /* * Above 1080px the row used to stay unwrapped. Tools & services and Home * services made it wider than the space beside the phone, so the last label * painted on top of the number (live, 31 Oct 2026: at 1440px "Home services" * covers 0798882727, and at 1100px "Sell your Property" does). The 1fr column * already has min-width: 0, so the links were spilling out of it with * overflow visible. Wrapping keeps every label inside that column. A wide * window that fits the whole row stays on one line. */ @media (min-width: 1081px) { .hz-header .hz-nav { flex-wrap: wrap; row-gap: 4px; column-gap: 24px; min-width: 0; } } /* * R-10: at 721-800px the fifth link takes the second row, and with no block * padding the first row sat about 6px under the top edge. The padding keeps * both rows clear of it; a single-row header is still 68px because the * min-height already exceeds the 30px logo plus this padding. The tighter * column gap lets more widths keep one row. */ @media (min-width: 721px) and (max-width: 800px) { .hz-header .hz-header__inner { padding-block: 10px; } .hz-header .hz-nav { column-gap: 16px; align-content: center; } } /* ============================================================================= Compact mobile header and SERP search rail ============================================================================= */ /* These wrappers are deliberately transparent outside the handset layout. */ .hz-mobile-menu { display: none; } .hzp-fb__mobile-controls { display: contents; } @media (max-width: 720px) { /* The reference keeps one calm top row: brand, primary CTA, menu. */ .hz-header { position: relative; z-index: 70; } .hz-header .hz-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 68px; padding: 10px 16px; } .hz-header .hz-brand__logo { height: 24px; } .hz-header .hz-nav, .hz-header .hz-phone, .hz-header .hz-locale, .hz-header .hz-hicon { display: none !important; } .hz-header .hz-actions { display: flex; grid-column: 2; grid-row: 1; gap: 10px; } /* D-25: the language switch stays one tap away in the top row; below 480px it shows only the globe (the word is kept for screen readers). */ .hz-header .hz-locale.hz-locale--link { display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 4px; } .hz-header .hz-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; font-size: 14px; } .hz-mobile-menu { position: relative; display: block; } .hz-mobile-menu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #d6dae2; border-radius: 10px; background: #ffffff; color: var(--hz-ink, #12141a); cursor: pointer; list-style: none; } .hz-mobile-menu__toggle::-webkit-details-marker { display: none; } .hz-mobile-menu__toggle:focus-visible { outline: 3px solid var(--hagzi-primary, #0745D9); outline-offset: 2px; } .hz-mobile-menu[open] .hz-mobile-menu__toggle { border-color: var(--hagzi-primary, #0745D9); background: #F3F7FF; } .hz-mobile-menu__bars { display: grid; gap: 4px; width: 22px; } .hz-mobile-menu__bars > span { display: block; width: 100%; height: 2px; border-radius: 99px; background: currentColor; } .hz-mobile-menu__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 90; width: min(320px, calc(100vw - 32px)); padding: 10px; border: 1px solid #e2e5eb; border-radius: 14px; background: #ffffff; box-shadow: 0 20px 48px -20px rgba(18, 20, 26, 0.42); } .hz-mobile-menu__links, .hz-mobile-menu__tools { display: grid; gap: 3px; } .hz-mobile-menu__links a, .hz-mobile-menu__tools a { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border-radius: 9px; color: var(--hz-nav, #3c414c); font-size: 14px; font-weight: 650; line-height: 1.3; text-decoration: none; } .hz-mobile-menu__links a:hover, .hz-mobile-menu__tools a:hover, .hz-mobile-menu__links a:focus-visible, .hz-mobile-menu__tools a:focus-visible { background: #EEF4FF; color: var(--hagzi-primary, #0745D9); outline: none; } .hz-mobile-menu__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; padding-top: 8px; border-top: 1px solid #eceef2; } /* The SERP's existing form becomes the second and third rows in the reference header. No query name or submission behaviour changes. */ .hzp-serp .hzp-filterbar { z-index: 30; } .hzp-serp .hzp-fb { align-items: center; gap: 12px 8px; padding: 12px; } html.hzp-js .hzp-serp .hzp-fb__basic-strip { display: block; flex: 1 1 100%; order: 1; width: 100%; padding: 0; overflow: visible; } html.hzp-js .hzp-serp .hzp-fb__basic-strip .hzp-fb__row, html.hzp-js .hzp-serp .hzp-fb__basic-strip .hzp-field--listing-type, html.hzp-js .hzp-serp .hzp-fb__basic-strip .hzp-fb__city { display: none !important; } html.hzp-js .hzp-serp .hzp-fb__basic-strip .hzp-field--location { display: block; width: 100%; max-width: none; } html.hzp-js .hzp-serp .hzp-field--location > .hzp-field__label { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html.hzp-js .hzp-serp .hzp-field--location .hzp-input { height: 56px; border: 1px solid var(--hz-field-line, #80868f); border-radius: 16px; background: #ffffff; box-shadow: none; } html.hzp-js .hzp-serp .hzp-field--location .hzp-input__field { height: 100%; padding-inline-start: 44px; border-radius: 16px; font-size: 16px; font-weight: 400; } /* The 44px start padding clears the magnifier when the field is empty. Once the city chip is in front of the text, that padding opens a hole between the chip and the placeholder. The chip already clears the icon (margin-inline-start below), so the field goes back to a normal gap. Scoped to the SERP handset: the shared picker stylesheet is untouched. */ html.hzp-js .hzp-serp .hzp-field--location .hzloc__chip:not([hidden]) ~ .hzp-input__field { padding-inline-start: 10px; } html.hzp-js .hzp-serp .hzp-field--location .hzloc__chip:not([hidden]) { align-self: center; height: 32px; margin-inline-start: 40px; padding-inline: 12px 4px; line-height: 1; } html.hzp-js .hzp-serp .hzp-field--location .hzp-input__icon { inset-inline-start: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: #8a909b; } .hzp-serp .hzp-fb__mobile-controls { display: flex; flex: 1 1 100%; flex-wrap: wrap; order: 2; align-items: flex-start; gap: 10px; width: 100%; max-width: 100%; min-width: 0; } html.hzp-js .hzp-serp .hzp-mf { display: contents; } html.hzp-js .hzp-serp .hzp-fb__actions { flex: 0 0 auto; order: 1; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; } html.hzp-js .hzp-serp .hzp-fb__actions .hzp-btn { min-height: 46px; border-radius: 13px; } html.hzp-js .hzp-serp .hzp-fb__toggle { gap: 6px; padding: 0 14px; border: 1px solid #e4e7ee; background: #ffffff; color: var(--hzp-ink, #12141a); font-size: 15px; font-weight: 500; } html.hzp-js .hzp-serp .hzp-fb__toggle:has(.hzp-fb__count) .hzp-fb__toggle-text::after { content: "·"; margin-inline-start: 6px; color: #9aa3ad; font-weight: 500; } html.hzp-js .hzp-serp .hzp-fb__count { min-width: 20px; height: 20px; padding: 0; border-radius: 999px; background: var(--hagzi-primary, #0745D9); color: #ffffff; font-size: 12px; font-weight: 600; } html.hzp-js .hzp-serp .hzp-fb__toggle svg { color: var(--hagzi-primary, #0745D9); stroke: currentColor; } html.hzp-js .hzp-serp .hzp-fb__clear { width: 40px; padding: 0; overflow: hidden; color: transparent; font-size: 0; } html.hzp-js .hzp-serp .hzp-fb__clear svg { width: 17px; height: 17px; color: var(--hzp-body, #3c414c); } html.hzp-js .hzp-serp .hzp-mf__steps { flex: 1 1 auto; flex-wrap: wrap; align-items: center; order: 2; gap: 10px; min-width: 0; max-width: 100%; padding: 0; overflow: visible; } html.hzp-js .hzp-serp .hzp-mf__steps::-webkit-scrollbar { display: none; } /* Visual order only. The guided flow follows data-hzp-mf-next, not DOM order, so Price can sit after Property type without moving the buttons. City, Neighbourhood and Bedrooms stay in the row after it. */ html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="type"] { order: 1; } html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="ptype"] { order: 2; } html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="price"] { order: 3; } html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="city"] { order: 4; } html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="district"] { order: 5; } html.hzp-js .hzp-serp .hzp-mf__step[data-hzp-mf-step="beds"] { order: 6; } html.hzp-js .hzp-serp .hzp-mf__step { flex: 0 0 auto; gap: 8px; max-width: 100%; min-height: 46px; padding: 0 14px; overflow: visible; border: 1px solid #e4e7ee; border-radius: 13px; background: #ffffff; color: var(--hzp-ink, #12141a); box-shadow: none; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: clip; } html.hzp-js .hzp-serp .hzp-mf__step::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.16s ease, margin 0.16s ease; } html.hzp-js .hzp-serp .hzp-mf__step.is-current { border-color: var(--hagzi-primary, #0745D9); background: #EAF1FF; color: var(--hagzi-primary, #0745D9); box-shadow: none; } html.hzp-js .hzp-serp .hzp-mf:not(.is-open) .hzp-mf__step.is-current:not(.is-set) { border-color: #e4e7ee; background: #ffffff; color: var(--hzp-ink, #12141a); } html.hzp-js .hzp-serp .hzp-mf__step.is-set { border-color: var(--hagzi-primary, #0745D9); background: #EAF1FF; color: var(--hagzi-primary, #0745D9); } html.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__step.is-current::after { margin-top: 4px; transform: rotate(-135deg); } html.hzp-js .hzp-serp .hzp-mf__body { display: none; flex: 1 1 100%; order: 3; align-items: center; gap: 8px; width: 100%; min-width: 0; padding-top: 1px; } html.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__body { display: flex; } html.hzp-js .hzp-serp .hzp-mf__option, html.hzp-js .hzp-serp .hzp-mf__apply, html.hzp-js .hzp-serp .hzp-mf__price-input { min-height: 40px; } } @media (max-width: 360px) { .hz-header .hz-header__inner { gap: 8px; padding-inline: 12px; } .hz-header .hz-brand__logo { height: 22px; } .hz-header .hz-actions { gap: 8px; } .hz-header .hz-cta { min-height: 40px; padding-inline: 15px; font-size: 13px; } .hz-mobile-menu__toggle { width: 40px; height: 40px; } } /* ============================================================================= Mobile SERP filter sheets and applied-filter tags ============================================================================= */ .hzp-mf__backdrop, .hzp-mf__head, .hzp-fb__backdrop, .hzp-fb__sheethead, .hzp-fb__active-tags { display: none; } @media (max-width: 720px) { html.hzp-filter-sheet-open, html.hzp-filter-sheet-open body { overflow: hidden; overscroll-behavior: none; } /* The native desktop controls must never surface above a phone sheet. */ html.hzp-js .hzp-serp .hzp-fb__basic-strip .hzp-fb__row, html.hzp-js .hzp-serp .hzp-fb:has(.hzp-fb__more[open]) .hzp-fb__row { display: none !important; } /* The former circular X is replaced by named tags and a clear action. */ html.hzp-js .hzp-serp .hzp-fb__clear { display: none !important; } html.hzp-js .hzp-serp .hzp-fb__active-tags { display: flex; flex: 1 1 100%; order: 3; align-items: center; gap: 10px; width: 100%; min-width: 0; padding-top: 10px; border-top: 1px solid #e5e8ee; } .hzp-fb__tag-list { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hzp-fb__tag-list::-webkit-scrollbar { display: none; } .hzp-fb__tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 34px; max-width: min(78vw, 310px); padding: 6px 10px 6px 12px; border: 1px solid #d7dce5; border-radius: 9px; background: #f4f5f7; color: #343a46; font-size: 13px; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; } [dir="rtl"] .hzp-fb__tag { padding: 6px 12px 6px 10px; } .hzp-fb__tag span { overflow: hidden; text-overflow: ellipsis; } .hzp-fb__tag svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #9299a6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hzp-fb__clear-all { flex: none; color: var(--hagzi-primary, #0745D9); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } /* One backdrop at a time keeps every control below the active sheet. */ html.hzp-js .hzp-serp .hzp-mf__backdrop, html.hzp-js .hzp-serp .hzp-fb__backdrop { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(18, 20, 26, 0.42); backdrop-filter: blur(1.5px); cursor: default; } html.hzp-js .hzp-serp .hzp-mf__backdrop { display: none; } html.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__backdrop, html.hzp-js .hzp-serp .hzp-fb__more[open] > .hzp-fb__backdrop { display: block; } html.hzp-js .hzp-serp .hzp-mf__body { position: fixed; inset-inline: 10px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 100; display: none; flex-direction: column; align-items: stretch; gap: 0; width: auto; max-height: min(78vh, 640px); max-height: min(78dvh, 640px); padding: 0; overflow: hidden; border: 1px solid #e0e4eb; border-radius: 18px; background: #ffffff; box-shadow: 0 24px 70px rgba(18, 20, 26, 0.28); } html.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__body { display: flex; } html.hzp-js .hzp-serp .hzp-mf__head, html.hzp-js .hzp-serp .hzp-fb__sheethead { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 14px 10px 18px; border-bottom: 1px solid #e5e8ee; background: #ffffff; } html[dir="rtl"].hzp-js .hzp-serp .hzp-mf__head, html[dir="rtl"].hzp-js .hzp-serp .hzp-fb__sheethead { padding: 10px 18px 10px 14px; } .hzp-mf__title, .hzp-fb__sheettitle { margin: 0; color: #12141a; font-size: 18px; font-weight: 800; line-height: 1.2; } .hzp-mf__close, .hzp-fb__sheetclose { appearance: none; display: inline-grid; flex: none; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid #d7dce5; border-radius: 50%; background: #ffffff; color: #343a46; cursor: pointer; } .hzp-mf__close svg, .hzp-fb__sheetclose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html.hzp-js .hzp-serp .hzp-mf__panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; } html.hzp-js .hzp-serp .hzp-mf__panel, html.hzp-js .hzp-serp .hzp-mf__options { width: 100%; } html.hzp-js .hzp-serp .hzp-mf__options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow: visible; } html.hzp-js .hzp-serp .hzp-mf__option { min-height: 44px; padding: 0 20px; border-color: #d7dce5; background: #ffffff; font-size: 15px; } html.hzp-js .hzp-serp .hzp-mf__option.is-selected { border-color: var(--hagzi-primary, #0745D9); background: var(--hagzi-primary, #0745D9); color: #ffffff; } html.hzp-js .hzp-serp .hzp-mf__price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; } html.hzp-js .hzp-serp .hzp-mf__price-input { width: 100%; min-width: 0; height: 48px; padding-inline: 14px; border-radius: 10px; font-size: 15px; } /* Pinned to the bottom of the scrolling list so the sheet footer never hides it. */ html.hzp-js .hzp-serp .hzp-mf__more { position: sticky; bottom: -18px; z-index: 1; width: calc(100% + 36px); min-height: 44px; margin: 14px -18px -18px; padding: 10px 18px; border-top: 1px solid #e5e8ee; background: #ffffff; text-align: start; } html.hzp-js .hzp-serp .hzp-mf__foot { display: flex; flex: none; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e8ee; background: #f7f8fa; } html.hzp-js .hzp-serp .hzp-mf__apply { width: 100%; min-height: 48px; border-color: var(--hagzi-primary, #0745D9); background: var(--hagzi-primary, #0745D9); font-size: 15px; font-weight: 800; } html.hzp-js .hzp-serp .hzp-fb__more[open] { z-index: 100; } html.hzp-js .hzp-serp .hzp-fb__panel { inset-inline: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 100; max-height: min(78vh, 680px); max-height: min(78dvh, 680px); border-radius: 18px; box-shadow: 0 24px 70px rgba(18, 20, 26, 0.28); } html.hzp-js .hzp-serp .hzp-fb__panelbody { min-height: 0; overscroll-behavior: contain; padding: 16px 18px; } html.hzp-js .hzp-serp .hzp-fb__foot { border-radius: 0 0 18px 18px; padding-bottom: max(11px, env(safe-area-inset-bottom)); } .hzp-mf__close:focus-visible, .hzp-fb__sheetclose:focus-visible, .hzp-fb__tag:focus-visible, .hzp-fb__clear-all:focus-visible { outline: 2px solid var(--hagzi-primary, #0745D9); outline-offset: 2px; } } /* ============================================================================= Mobile SERP overlay and compact-card refinement — 2026-09-14 The filter bar is its own stacking context. Raising only the sheet/backdrop leaves the mobile site header above the dim layer, so lift the owning bar while either filter experience is open. Guided filters remain bottom sheets; the full Filters disclosure uses the whole viewport. ============================================================================= */ @media (max-width: 720px) { html.hzp-filter-sheet-open .hzp-serp .hzp-filterbar { z-index: 1000; } html.hzp-js .hzp-serp .hzp-mf__backdrop, html.hzp-js .hzp-serp .hzp-fb__backdrop { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; height: 100dvh; background: rgba(27, 32, 43, 0.56); backdrop-filter: blur(2px); } html.hzp-js .hzp-serp .hzp-mf__body { z-index: 1010; } /* Advanced Filters is a dedicated phone screen with its own close button. */ html.hzp-js .hzp-serp .hzp-fb__more[open] { z-index: 1010; } html.hzp-js .hzp-serp .hzp-fb__panel { position: fixed; inset: 0; z-index: 1010; box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; } html.hzp-js .hzp-serp .hzp-fb__sheethead { min-height: 64px; padding-top: max(10px, env(safe-area-inset-top)); } html.hzp-js .hzp-serp .hzp-fb__panelbody { flex: 1 1 auto; min-height: 0; padding: 18px; overflow-y: auto; } html.hzp-js .hzp-serp .hzp-fb__foot { flex: none; border-radius: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Use the compact list on phones, including links carrying view=grid. */ .hzp-serp .hzp-cards { gap: 12px; } .hzp-serp .hzp-cards .hzp-card { border-radius: 14px; } .hzp-serp .hzp-cards .hzp-card__photo { aspect-ratio: 16 / 9; } .hzp-serp .hzp-cards .hzp-card__thumbs, .hzp-serp .hzp-cards .hzp-card__desc { display: none; } .hzp-serp .hzp-cards .hzp-card__body { padding: 12px 14px 13px; } .hzp-serp .hzp-cards .hzp-price { font-size: 20px; } .hzp-serp .hzp-cards .hzp-price small { font-size: 12px; } .hzp-serp .hzp-cards .hzp-specs { gap: 4px 7px; margin-top: 8px; font-size: 12.5px; } .hzp-serp .hzp-cards .hzp-card__addr { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 7px; font-size: 14px; font-weight: 700; line-height: 1.35; } .hzp-serp .hzp-cards .hzp-card__district, .hzp-serp .hzp-cards .hzp-card__listed { margin-top: 5px; font-size: 12px; } .hzp-serp .hzp-cards .hzp-card__foot { gap: 8px; padding-top: 9px; } .hzp-serp .hzp-cards .hzp-contacts { width: 100%; flex-wrap: nowrap; } .hzp-serp .hzp-cards .hzp-contacts__btn { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: 12px; } } /* Full-screen handset navigation, with the account action beside the brand. */ .hz-mobile-menu__back, .hz-mobile-menu__close-label { display: none; } @media (max-width: 720px) { html:has(.hz-mobile-menu[open]), body:has(.hz-mobile-menu[open]) { overflow: hidden; } .hz-header:has(.hz-mobile-menu[open]) { z-index: 1600; } body:has(.hz-mobile-menu[open]) .hz-mobile-nav { visibility: hidden; } .hz-mobile-menu__panel { position: fixed; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0; background: #ffffff; box-shadow: none; overflow: hidden; } .hz-mobile-menu__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; flex: none; min-height: calc(76px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; gap: 8px; } .hz-mobile-menu__brand { grid-column: 2; display: block; } .hz-mobile-menu__brand img { display: block; width: 108px; height: auto; } .hz-mobile-menu__account { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 11px; border: 1px solid var(--hagzi-primary, #0745D9); border-radius: 10px; color: var(--hagzi-primary, #0745D9); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; } .hz-mobile-menu[open] .hz-mobile-menu__toggle { position: fixed; z-index: 91; inset-block-start: calc(16px + env(safe-area-inset-top)); inset-inline-start: 8px; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; } .hz-mobile-menu[open] .hz-mobile-menu__bars, .hz-mobile-menu[open] .hz-mobile-menu__open-label { display: none; } .hz-mobile-menu[open] .hz-mobile-menu__back, .hz-mobile-menu[open] .hz-mobile-menu__close-label { display: block; } .hz-mobile-menu__back { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } [dir="rtl"] .hz-mobile-menu__back { transform: scaleX(-1); } .hz-mobile-menu__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px max(24px, env(safe-area-inset-bottom)); } .hz-mobile-menu__links, .hz-mobile-menu__tools { grid-template-columns: minmax(0, 1fr); gap: 0; } .hz-mobile-menu__tools { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f1f4; } .hz-mobile-menu__links a, .hz-mobile-menu__tools a { gap: 8px; min-height: 48px; padding: 12px 8px; border-radius: 6px; color: #30343b; font-size: 16px; font-weight: 400; line-height: 1.5; } .hz-mobile-menu__links a::after, .hz-mobile-menu__tools a::after { content: ""; width: 7px; height: 7px; flex: 0 0 7px; margin-inline-start: auto; margin-inline-end: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); } [dir="rtl"] .hz-mobile-menu__links a::after, [dir="rtl"] .hz-mobile-menu__tools a::after { transform: rotate(135deg); } .hz-mobile-menu__brand:focus-visible, .hz-mobile-menu__account:focus-visible { outline: 2px solid var(--hagzi-primary, #0745D9); outline-offset: 3px; } } /* ============================================================================= Mobile SERP results header (breadcrumb, title, count, sort) Handset only. Desktop keeps the shared rules in property-pages.css. ============================================================================= */ @media (max-width: 720px) { .hzp-serp .hzp-results__top { display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 100%; } .hzp-serp .hzp-results__head, .hzp-serp .hzp-results__heading-copy { display: contents; } .hzp-serp .hzp-results__top .hzp-crumbs { order: 0; gap: 6px; margin: 0; padding: 2px 0 8px; color: #8a909b; font-size: 13px; font-weight: 400; line-height: 1.4; } .hzp-serp .hzp-results__top .hzp-crumbs a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; } .hzp-serp .hzp-results__top .hzp-crumbs [aria-current="page"] { color: #6b7280; font-weight: 400; text-decoration: none; } .hzp-serp .hzp-hub-back-link { order: 0; } .hzp-serp .hzp-results__title { order: 1; width: 100%; min-width: 0; margin: 0; color: #12141a; font-size: 29px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .hzp-serp .hzp-results__title-count { display: flex; align-items: center; min-height: 44px; margin-top: 6px; padding-inline-end: 196px; color: #8a909b; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0; white-space: normal; } /* The count is the last line of the title. Pull the sort up onto that line and park it at the inline end. The negative margin equals the count row, so the blocks under the title (area chips included) stay where they were. */ .hzp-serp .hzp-results__head > .hzp-sort { order: 2; align-self: flex-end; width: auto; max-width: calc(100% - 16px); margin-top: -44px; margin-bottom: 0; position: relative; z-index: 1; } .hzp-serp [data-property-hub-preview-notice], .hzp-serp .hzp-results__absent, .hzp-serp .hzp-hub-facets__range, .hzp-serp .hzp-hub-facets, .hzp-serp .hzp-hub-facets__directory { order: 3; min-width: 0; max-width: 100%; } .hzp-serp .hzp-sort { display: inline-flex; align-items: center; color: #12141a; font-size: 14px; font-weight: 500; } .hzp-serp .hzp-sort__control { min-width: 0; min-height: 44px; border: 1px solid var(--hz-field-line, #80868f); border-radius: 13px; background: #ffffff; } .hzp-serp .hzp-sort__el { min-height: 42px; padding: 8px 34px; font-size: 14px; font-weight: 500; } } /* ============================================================================= UX audit D-07: first card above the fold at 390px, sort never over the H1. Handset only; desktop and tablet keep every rule above. The basic filter pills stay (they are the only basic filters on a phone) but share one scrolling row with the Filters control; the place links move below the results; the sort gets its own line under the count. ============================================================================= */ @media (max-width: 720px) { html.hzp-js .hzp-serp .hzp-mf__steps { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 1px; } html.hzp-js .hzp-serp .hzp-mf__step { flex: 0 0 auto; } .hzp-serp .hzp-results__top .hzp-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .hzp-serp .hzp-results__top .hzp-crumbs::-webkit-scrollbar { display: none; } .hzp-serp .hzp-results__title { font-size: 26px; } .hzp-serp .hzp-results__title-count { min-height: 0; padding-inline-end: 0; } .hzp-serp .hzp-results__head > .hzp-sort { justify-self: start; margin-top: 8px; z-index: auto; } /* One column; the header's parts become rows so the cards can come first. */ .hzp-serp__grid { grid-template-areas: none; row-gap: 0; } .hzp-serp__grid > .hzp-results > .hzp-results__top { display: contents; } .hzp-serp__grid > .hzp-results > .hzp-results__top > *, .hzp-serp__grid .hzp-results__head > *, .hzp-serp__grid .hzp-results__heading-copy > * { order: 2; min-width: 0; max-width: 100%; } .hzp-serp__grid > .hzp-results > .hzp-results__top > :first-child { order: 0; } .hzp-serp__grid .hzp-results__heading-copy > .hzp-results__title { order: 1; } .hzp-serp__grid .hzp-results__head > .hzp-sort, .hzp-serp__grid .hzp-results__head > .hzp-view-switch, .hzp-serp__grid .hzp-results__head > .hzp-results__tools { order: 3; } .hzp-serp__grid > .hzp-results > .hzp-results__body { grid-area: auto; order: 5; margin-top: 14px; } .hzp-serp__grid .hzp-results__heading-copy > .hzp-hub-facets, .hzp-serp__grid .hzp-results__heading-copy > .hzp-hub-facets__directory { order: 6; margin-top: 18px; } .hzp-serp__grid > .hzp-side { grid-area: auto; order: 9; margin-top: 16px; } /* * The header wrappers are display: contents here, so the head's own * column rules (sort in 1, view switch in 2) land on this page grid. * Two explicit columns and full-width rows keep every block at the full * width and leave only sort and switch sharing one row. */ .hzp-serp__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; } .hzp-serp__grid > *, .hzp-serp__grid > .hzp-results > *, .hzp-serp__grid > .hzp-results > .hzp-results__top > *, .hzp-serp__grid > .hzp-results > .hzp-results__body, .hzp-serp__grid > .hzp-side, .hzp-serp__grid .hzp-results__head > *, .hzp-serp__grid .hzp-results__heading-copy > * { grid-column: 1 / -1; } .hzp-serp__grid .hzp-results__head > .hzp-sort { grid-column: 1; align-self: center; /* Start alignment sizes the control to its text and can push the view switch past the screen. Stretch inside the first column. */ justify-self: stretch; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; overflow: hidden; } .hzp-serp__grid .hzp-results__head > .hzp-sort .hzp-sort__control, .hzp-serp__grid .hzp-results__head > .hzp-sort .hzp-sort__el { min-inline-size: 0; max-inline-size: 100%; } .hzp-serp__grid .hzp-results__head > .hzp-view-switch { grid-column: 2; align-self: center; justify-self: end; } /* Copy link lives in this group with the view switch, so the handset page grid still has two columns: sort at the start, both controls at the end. The group must not span 1 / -1 or it takes its own row. */ .hzp-serp__grid .hzp-results__head > .hzp-results__tools { grid-column: 2; align-self: center; justify-self: end; min-inline-size: 0; max-inline-size: 100%; margin-block-start: 8px; } } /* ============================================================================= R-08: the mobile Neighbourhood sheet's search box and "show all" control ============================================================================= */ .hzp-mf__search { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .hzp-mf__search-label { color: var(--hzp-body, #3c414c); font-size: 13px; font-weight: 600; } .hzp-mf__search-input { width: 100%; min-width: 0; height: 44px; padding-inline: 14px; border: 1px solid #d7dce5; border-radius: 10px; background: #ffffff; font: inherit; font-size: 15px; } .hzp-mf__search-none { margin: 12px 0 0; color: var(--hzp-body, #3c414c); font-size: 14px; } .hzp-mf__more { appearance: none; margin-top: 14px; padding: 8px 0; border: 0; background: none; color: var(--hagzi-primary, #0745D9); font: inherit; font-size: 14px; font-weight: 650; text-decoration: underline; cursor: pointer; } /* ============================================================================= Mobile SERP filters after the Bayut comparison — 2026-10-25 Only a slim search + Filters row is pinned while scrolling; the chip rows scroll away with the page. Location, bedrooms and price also live in the Filters sheet (one Show results), rent can be typed per month (searched as yearly), and the chip sheet's button shows the live count. ============================================================================= */ .hzp-pin, .hzp-fb__core, .hzp-period, .hzp-period__note { display: none; } /* The price chip on the results bar names monthly or yearly at every width. */ .hzp-field--price .hzp-period { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .hzp-field--price .hzp-period__opt { appearance: none; min-height: 36px; margin: 0; padding: 0 14px; border: 1px solid #d7dce5; border-radius: 999px; background: #ffffff; color: #343a46; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .hzp-field--price .hzp-period__opt.is-selected { border-color: var(--hagzi-primary, #0745D9); background: var(--hagzi-primary, #0745D9); color: #ffffff; } .hzp-field--price .hzp-period__note:not([hidden]) { display: block; margin: 0 0 8px; color: #3c414c; font-size: 13px; line-height: 1.4; } /* Wide bar: one small row, so the price box is not three rows taller than its neighbours. */ @media (min-width: 960px) { .hzp-field--price:has(.hzp-period) { min-width: max-content; } .hzp-field--price .hzp-period { flex-wrap: nowrap; gap: 4px; margin: 0 0 4px; } .hzp-field--price .hzp-period__opt { min-height: 24px; padding: 0 8px; font-size: 12px; white-space: nowrap; } } /* A Clear with only location, bedrooms or price to clear exists where the sheet shows them. */ html:not(.hzp-js) .hzp-fb__reset[data-hzp-core-only] { display: none; } @media (min-width: 721px) { .hzp-fb__reset[data-hzp-core-only] { display: none; } } /* The Filters number counts what is behind the button: the panel on a wide bar, the whole sheet on a phone. */ .hzp-fb__count.hzp-fb__count--phone { display: none; } @media (max-width: 720px) { html.hzp-js .hzp-fb__count.hzp-fb__count--wide { display: none; } html.hzp-js .hzp-fb__count.hzp-fb__count--phone { display: inline-grid; } } @media (max-width: 720px) { .hzp-serp .hzp-filterbar { position: relative; top: auto; } html.hzp-js .hzp-serp .hzp-pin:not([hidden]) { position: fixed; top: 0; inset-inline: 0; z-index: 60; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 56px; padding: 8px 12px; border-bottom: 1px solid #e5e8ee; background: #ffffff; box-shadow: 0 6px 18px -14px rgba(18, 20, 26, 0.4); } .hzp-pin__search, .hzp-pin__filters { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; border: 1px solid #e4e7ee; border-radius: 12px; background: #ffffff; color: var(--hzp-ink, #12141a); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .hzp-pin__search { flex: 1 1 auto; min-width: 0; padding: 0 12px; text-align: start; } .hzp-pin__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hzp-pin__filters { flex: none; padding: 0 12px; } .hzp-pin svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hzp-pin__filters svg { color: var(--hagzi-primary, #0745D9); } .hzp-pin__count { box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hagzi-primary, #0745D9); color: #ffffff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; } html.hzp-js .hzp-serp .hzp-fb__core { display: grid; gap: 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #e5e8ee; } .hzp-core__search { box-sizing: border-box; width: 100%; height: 44px; padding-inline: 14px; border: 1px solid #d7dce5; border-radius: 10px; background: #ffffff; font: inherit; font-size: 16px; } .hzp-core__options { display: flex; flex-wrap: wrap; gap: 8px; } .hzp-core__opt, .hzp-period__opt { appearance: none; min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid #d7dce5; border-radius: 999px; background: #ffffff; color: #343a46; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .hzp-core__opt.is-selected, .hzp-period__opt.is-selected { border-color: var(--hagzi-primary, #0745D9); background: var(--hagzi-primary, #0745D9); color: #ffffff; } .hzp-core__more { appearance: none; justify-self: start; margin: 0; padding: 6px 0; border: 0; background: none; color: var(--hagzi-primary, #0745D9); font: inherit; font-size: 14px; font-weight: 650; text-decoration: underline; text-align: start; cursor: pointer; } .hzp-core__none { margin: 0; color: var(--hzp-body, #3c414c); font-size: 14px; } html.hzp-js .hzp-serp .hzp-period { display: inline-flex; gap: 8px; margin-bottom: 12px; } html.hzp-js .hzp-serp .hzp-period__note:not([hidden]) { display: block; margin: 10px 0 0; color: var(--hzp-body, #3c414c); font-size: 13px; line-height: 1.4; } html.hzp-js .hzp-mf__apply.is-nocount .hzp-fb__shownum { display: none; } html.hzp-js .hzp-mf__apply.is-nocount .hzp-fb__showplain { display: inline; } .hzp-pin__search:focus-visible, .hzp-pin__filters:focus-visible, .hzp-core__opt:focus-visible, .hzp-core__more:focus-visible, .hzp-period__opt:focus-visible { outline: 2px solid var(--hagzi-primary, #0745D9); outline-offset: 2px; } } /* * Home services menu item: not in the header row at any width. The nav column * tops out at about 546px on every desktop, and seven English labels with 30px * gaps need ~677px, so every desktop visitor got two rows. The item stays in * the phone menu sheet, the footer and the homepage card, and Tools & services * leads to it; the remaining six fit one row at a 24px gap. */ .hz-header .hz-nav__link--wide-only { display: none; } /* ============================================================================= Smart search: "we searched for" chips (SearchInterpretation), every width. Server-rendered links; removing one needs no script. ============================================================================= */ .hzp-intent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 4px; } .hzp-intent__heading { color: #5b6270; font-size: 13px; font-weight: 600; } .hzp-intent__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .hzp-intent__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; max-width: min(86vw, 360px); padding: 6px 10px 6px 12px; border: 1px solid #c9d6ea; border-radius: 999px; background: #eef4fc; color: #1f3a5f; font-size: 13px; font-weight: 600; line-height: 1.25; text-decoration: none; } [dir="rtl"] .hzp-intent__chip { padding: 6px 12px 6px 10px; } .hzp-intent__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hzp-intent__chip svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hzp-intent__chip:hover { border-color: #8fb0dc; } .hzp-intent__chip:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; } /* Currency selector (resources/currency/views/selector.blade.php). Phones use the menu-sheet copy. */ .hz-ccy:not([hidden]) { display: inline-flex; } @media (max-width: 720px) { .hz-header .hz-actions > .hz-ccy:not(.hz-ccy--menu) { display: none !important; } } /* themes/property/property-add-listing-free.css */ /* * Free pill on the Add listing button, and the signed-out line on /add-listing. * * Linked from the property theme's head include (footer/styles.blade.php), * which runs after @stack('styles'). A @push from the header cannot land: * the header renders in the body, after that stack has already been emitted, * and a