/* ===========================================================================
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 either .hz-hicon--link — a class that exists nowhere
else — or a media query naming .hz-hicon--bell. 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. The bell keeps the grey, which
turns the two-tone row into a legible grammar rather than an accident: 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);
}
/* The favourites count is resolved from the uncached customer API. It sits on
the outside edge of the heart, away from the tightly spaced bell/account
controls 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: #f40051;
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: #f40051;
color: #ffffff;
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* ---------------------------------------------------------------------------
Handsets: three icon boxes in the action row, not four.
Measured on the live header before this change, at the width where the row
is tightest: at 390px the row's content box is 342px and the brand plus the
actions cluster already occupy 342px of it. There is no slack at all. A
fourth 32px box costs 23px once the -9px sibling pull is counted, and
property.css's .hz-brand__logo comment records what that buys: "It measured
14px wide at 390px and 0 at 375px once two more items joined the action row",
which is why min-width: max-content is pinned on the lockup. With that pin in
place the logo now holds its size and the document overflows instead. Either
outcome is a defect.
So the row sheds the one item that represents nothing. The bell has no
feature behind it on any channel — /notifications and /account/notifications
both 404, the only notification routes in the application are the four under
admin/, and it carries no badge because there is no unread state to draw. The
account glyph is the only route into the signed-in area. Trading an indicator
for the control is the right way round, and the arithmetic is a wash: 23px
out, 23px in, so the logo and the CTA keep the widths they measured before.
480px rather than a new breakpoint fitted to the measurement: it is already
the width at which this header decides the row is short of space and drops
content, since property.css hides the phone number there. The alternative was
~429px, where the measured slack is 39px and a fourth box would leave 16px —
thin enough that a font fallback or a longer CTA label would eat it.
display: none rather than removing the bell from the partial, so the element
is preserved exactly and comes back at 481px and above.
--------------------------------------------------------------------------- */
@media (max-width: 480px) {
.hz-header .hz-hicon--bell {
display: none;
}
}
/* =============================================================================
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, and this sheet drops the bell there for want of
* room. 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;
}
}
/* Property header notification bell. */
.hz-header .hz-hicon--bell {
color: #000;
}
/* =============================================================================
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;
}
.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: 50px;
border-color: #d6dae2;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(18, 20, 26, 0.03);
}
html.hzp-js .hzp-serp .hzp-field--location .hzp-input__field {
padding-inline-start: 46px;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
}
html.hzp-js .hzp-serp .hzp-field--location .hzp-input__icon {
inset-inline-start: 16px;
width: 20px;
height: 20px;
color: #8a909b;
}
.hzp-serp .hzp-fb__mobile-controls {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
order: 2;
align-items: flex-start;
gap: 9px 8px;
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: 40px;
border-radius: 999px;
}
html.hzp-js .hzp-serp .hzp-fb__toggle {
padding: 0 15px;
border-color: #d6dae2;
background: #ffffff;
color: var(--hzp-ink, #12141a);
font-size: 14px;
font-weight: 700;
}
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 0;
order: 2;
gap: 8px;
min-width: 0;
padding: 0;
}
html.hzp-js .hzp-serp .hzp-mf__step {
gap: 10px;
min-height: 40px;
padding: 0 15px;
border-color: #d6dae2;
background: #ffffff;
color: var(--hzp-ink, #12141a);
box-shadow: none;
font-size: 14px;
font-weight: 700;
}
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: #B8CBF8;
background: #F3F7FF;
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: #d6dae2;
background: #ffffff;
color: var(--hzp-ink, #12141a);
}
html.hzp-js .hzp-serp .hzp-mf__step.is-set {
border-color: #B8CBF8;
background: #F3F7FF;
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;
}
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;
}
}