/* hm-marketplace — homepage hero search bar (Bayut-style two-row fill-width grid, H&M gold). */
.hmhome{--gold:#B78F01;--gold-d:#8f7301;--ink:#1f2430;--muted:#5a6678;--line:#e6e9f0;width:100%;max-width:980px;margin:0 auto 28px;font-family:inherit}
/* The theme hero (section.hero-search) is overflow:hidden, which CLIPS our absolutely-positioned dropdowns
   (type / price / location) where they extend past the hero's bottom edge. The hero background has its OWN
   clip (.hero-search__bg{position:absolute;inset:0;overflow:hidden}) and no other child overflows, so freeing
   the section's clip is safe. Higher specificity than the theme's `.overflow-hidden` utility → order-independent. */
.hero-search-wrapper .hero-search{overflow:visible}
.hmhome[hidden]{display:none}
.hmhome-form{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 22px 60px rgba(15,20,30,.28);padding:14px;text-align:start;display:flex;flex-direction:column;gap:10px}

/* Rows that fill the full width */
.hmhome-r1{display:flex;gap:10px;align-items:stretch}
.hmhome-r2{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px} /* flex so the row absorbs a variable field count (the غرف field hides for commercial) */
.hmhome .hmhome-r2 > *{flex:1 1 150px;min-width:0} /* fields share the width + wrap */
.hmhome-onhub .hmhome-r2 > *{flex:1 1 100%}        /* hub rail: one field per row */
.hmhome.is-commercial .hmhome-specspop{display:none} /* beds&baths field disappears in commercial (المساحة stays) */

/* Shared bordered control box */
.hmhome-field,.hmhome-seg{min-height:54px;border:1.5px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:center}

/* Segmented toggles (purpose / completion) — pills fill the box equally */
.hmhome-seg{padding:4px;gap:3px;background:#f4f5f9;border-color:#eceef4}
.hmhome-purpose{flex:0 0 auto}
.hmhome-completion{min-width:0;justify-content:center}
.hmhome-ptab,.hmhome-ctab{flex:1 1 0;min-width:0;appearance:none;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.95rem;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;text-align:center;transition:.15s}
/* Purpose tabs size to their label so a long word (e.g. EN "Exchange") never clips, while still
   growing to fill the row on mobile (where .hmhome-purpose is full-width). */
.hmhome-ptab{flex:1 1 auto}
.hmhome-ctab{flex:0 0 auto;font-size:.84rem;padding:8px 10px;font-weight:700} /* size to label so the control stays compact (no wasted width) */
.hmhome-ptab:hover,.hmhome-ctab:hover{color:var(--ink)}
.hmhome-ptab.is-active{background:var(--gold);color:#fff;box-shadow:0 3px 10px color-mix(in srgb, var(--gold,#B78F01) 30%, transparent)}
.hmhome-ctab.is-active{background:var(--gold);color:#fff;box-shadow:0 3px 10px color-mix(in srgb, var(--gold,#B78F01) 30%, transparent)}

/* Location (row 1, grows) */
.hmhome-loc{flex:1 1 auto;min-width:0;gap:9px;padding:0 14px;position:relative}
.hmhome-ico{width:20px;height:20px;color:var(--gold);flex:0 0 auto}
.hmhome-locinput{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-size:1rem;color:var(--ink);padding:0}
.hmhome-locinput::placeholder{color:#6b7585}

/* Search button (row 1) */
.hmhome-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--gold);color:#fff;font-weight:800;font-size:1rem;padding:0 30px;border-radius:13px;min-height:54px;transition:.15s}
.hmhome-go:hover{background:var(--gold-d)}
.hmhome-go svg{width:19px;height:19px}

/* Native-select fields (type / beds) — CENTERED text + end chevron */
.hmhome-sel{position:relative;padding:0;justify-content:center}
.hmhome-sel select{appearance:none;-webkit-appearance:none;width:100%;height:100%;min-height:54px;border:0;outline:0;background:transparent;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink);text-align:center;text-align-last:center;padding:0 30px}
.hmhome-chev{width:16px;height:16px;color:var(--muted);flex:0 0 auto;pointer-events:none}
.hmhome-sel .hmhome-chev{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%)}

/* Price dropdown (row 2) */
.hmhome-pricepop{position:relative;padding:0;justify-content:center}
.hmhome-pricebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:54px;border:0;background:transparent;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink);padding:0 14px}
.hmhome-pricebtn .hmhome-pricelabel{flex:1 1 auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmhome-pricepanel{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(370px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,20,30,.2);padding:14px;z-index:60;display:flex;flex-direction:column;gap:12px}
/* Price slider — histogram + dual handle, built from the cached price distribution */
.hmhome-slider[hidden]{display:none}
.hmhome-histo{display:flex;align-items:flex-end;gap:2px;height:48px;margin:2px 11px 0}
.hmhome-bar{flex:1 1 0;min-width:0;height:8%;background:#ece0bb;border-radius:3px 3px 0 0;transition:background .15s,height .2s}
.hmhome-bar.in{background:var(--gold)}
.hmhome-track{position:relative;height:6px;margin:9px 11px 0;background:var(--line);border-radius:999px}
.hmhome-fill{position:absolute;top:0;height:100%;background:var(--gold);border-radius:999px}
.hmhome-handle{position:absolute;top:50%;left:0;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 8px rgba(15,20,30,.28);cursor:grab;transform:translate(-50%,-50%);touch-action:none;padding:0;z-index:2}
.hmhome-handle:active,.hmhome-handle:focus{cursor:grabbing;outline:0;box-shadow:0 0 0 4px color-mix(in srgb, var(--gold,#B78F01) 22%, transparent),0 2px 8px rgba(15,20,30,.28)}
.hmhome-vals{display:flex;justify-content:space-between;margin:14px 4px 2px;font-weight:800;font-size:.92rem;color:var(--gold-d)}
.hmhome-vals span{direction:ltr;unicode-bidi:isolate} /* keep "1.3M ج.م" reading number→currency; the span's SIDE is still set by the RTL container */
.hmhome-pricepanel[hidden]{display:none}
.hmhome-pay{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hmhome-paylbl{font-size:.82rem;font-weight:700;color:var(--muted);margin-inline-end:auto}
.hmhome-paytab{appearance:none;border:1.5px solid #e2e6ee;background:#fff;color:var(--muted);font-weight:600;font-size:.82rem;padding:5px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.hmhome-paytab:hover{border-color:var(--gold)}
.hmhome-paytab.is-active{background:#fbf4e0;border-color:var(--gold);color:var(--gold-d)}
.hmhome-pricerow,.hmhome-arearow{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:11px;padding:8px 12px}
.hmhome-num,.hmhome-anum{width:100%;flex:1 1 0;min-width:0;border:0;outline:0;background:transparent;font-size:.95rem;color:var(--ink);text-align:center}
.hmhome-num::placeholder,.hmhome-anum::placeholder{color:#6b7585}
.hmhome-dash{color:#c3cad6;flex:0 0 auto}
.hmhome-cur{font-size:.8rem;font-weight:700;color:var(--muted);flex:0 0 auto}
.hmhome-priceapply{appearance:none;border:0;background:var(--gold);color:#fff;font-weight:800;font-size:.92rem;padding:10px;border-radius:11px;cursor:pointer}
.hmhome-priceapply:hover{background:var(--gold-d)}

/* Type dropdown (row 2) — Bayut-style residential/commercial tabs + multi-select checkboxes */
.hmhome-typepop{position:relative;padding:0;justify-content:center}
.hmhome-typebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:54px;border:0;background:transparent;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink);padding:0 14px}
.hmhome-typebtn .hmhome-typelabel{flex:1 1 auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmhome-typepop.has-val .hmhome-typelabel{color:var(--gold-d)}
.hmhome-typepanel{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(360px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,20,30,.2);padding:12px;z-index:60;display:flex;flex-direction:column;gap:10px}
.hmhome-typepanel[hidden]{display:none}
.hmhome-typetabs{display:flex;gap:4px;background:#f4f5f9;border:1px solid #eceef4;border-radius:11px;padding:4px}
.hmhome-ttab{flex:1 1 0;appearance:none;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.9rem;padding:8px;border-radius:8px;cursor:pointer;transition:.15s}
.hmhome-ttab:hover{color:var(--ink)}
.hmhome-ttab.is-active{background:#fff;color:var(--gold-d);box-shadow:0 1px 4px rgba(15,20,30,.12)}
.hmhome-typelist{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-height:230px;overflow-y:auto}
.hmhome-typelist[hidden]{display:none}
.hmhome-tchk{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink);transition:.12s}
.hmhome-tchk:hover{background:#faf6ea}
.hmhome-tchk input{width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto;cursor:pointer;margin:0}
.hmhome-tchk span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmhome-tempty{color:var(--muted);font-size:.85rem;padding:8px}
.hmhome-typefoot{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.hmhome-typereset{flex:0 0 auto;appearance:none;border:1.5px solid #e2e6ee;background:#fff;color:var(--muted);font-weight:700;font-size:.88rem;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.15s}
.hmhome-typereset:hover{border-color:var(--gold);color:var(--gold-d)}
.hmhome-typeapply{flex:1 1 auto;appearance:none;border:0;background:var(--gold);color:#fff;font-weight:800;font-size:.9rem;padding:9px;border-radius:10px;cursor:pointer}
.hmhome-typeapply:hover{background:var(--gold-d)}


/* Beds chip picker (row 2) — "عدد الغرف" pill chips, inherited from design preview #1 */
.hmhome-specspop{position:relative;padding:0;justify-content:center}
.hmhome-specsbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:54px;border:0;background:transparent;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink);padding:0 14px}
.hmhome-specsbtn .hmhome-specslabel{flex:1 1 auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmhome-specspop.has-val .hmhome-specslabel{color:var(--gold-d)}
.hmhome-specspanel{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(320px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,20,30,.2);padding:14px;z-index:60}
.hmhome-specspanel[hidden]{display:none}
.hmhome-specs-res[hidden],.hmhome-specs-com[hidden]{display:none}
.hmhome-bedsh{font-size:.78rem;font-weight:800;color:var(--muted);margin:0 2px 10px}
.hmhome-bathsh{margin-top:12px}
/* In RESIDENTIAL the المساحة block now follows the rooms — give it the same separation (skipped in commercial, where it's the only block) */
.hmhome-specs-res:not([hidden]) + .hmhome-specs-com > .hmhome-bedsh{margin-top:12px}
.hmhome-bedschips{display:flex;flex-wrap:wrap;gap:7px}
.hmhome-bedschip{min-width:42px;padding:9px 15px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-weight:800;font-size:.86rem;color:var(--muted);cursor:pointer;transition:.16s;text-align:center}
.hmhome-bedschip:hover{border-color:var(--gold)}
.hmhome-bedschip.is-active{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 4px 12px color-mix(in srgb, var(--gold,#B78F01) 35%, transparent)}

/* Autocomplete dropdown */
.hmhome-suggest{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:min(460px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,20,30,.2);overflow:hidden;z-index:50;max-height:330px;overflow-y:auto}
.hmhome-suggest[hidden]{display:none}
.hmhome-sopt{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fff;cursor:pointer;padding:11px 14px;text-align:start;font-size:.95rem;color:var(--ink)}
.hmhome-sopt:hover{background:#faf6ea}
.hmhome-skind{font-size:1rem;flex:0 0 auto}
.hmhome-sname{flex:1 1 auto;font-weight:600}
.hmhome-stag{font-size:.74rem;color:var(--muted);font-weight:700;background:#f1f3f8;border-radius:8px;padding:2px 8px}

/* Advanced search ("بحث متقدم") — hub-only row + Bayut-style panel */
.hmhome-r3{position:relative;display:flex;justify-content:center;margin-top:2px}
.hmhome-advbtn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;font-weight:800;font-size:.9rem;color:var(--gold-d);padding:8px 14px;border-radius:10px}
.hmhome-advbtn:hover{background:color-mix(in srgb, var(--gold,#B78F01) 8%, transparent)}
.hmhome-advbtn svg{width:18px;height:18px}
.hmhome-advpanel{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(560px,94vw);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(15,20,30,.2);padding:16px;z-index:60}
.hmhome-advpanel[hidden]{display:none}
.hmhome-advh{font-size:.85rem;font-weight:800;color:var(--ink);margin:0 2px 12px}
.hmhome-advgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.hmhome-advsec{display:flex;flex-direction:column;gap:5px}
.hmhome-advlbl{font-size:.78rem;font-weight:800;color:var(--muted)}
.hmhome-advsel{appearance:none;-webkit-appearance:none;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer}
.hmhome-advsel:focus{outline:0;border-color:var(--gold)}
.hmhome-advfoot{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hmhome-advreset{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;color:var(--muted);font-weight:800;font-size:.88rem;padding:9px 16px;border-radius:10px;cursor:pointer}
.hmhome-advreset:hover{border-color:var(--gold);color:var(--gold-d)}
.hmhome-advdone{flex:1 1 auto;border:0;background:var(--gold);color:#fff;font-weight:800;font-size:.9rem;padding:9px;border-radius:10px;cursor:pointer}
.hmhome-advdone:hover{background:var(--gold-d)}

/* Hub (/properties/) context — the bar is inline (no hero image behind it) → solid card */
.hmhome-onhub{margin:0 auto 22px}
.hmhome-onhub .hmhome-form{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);box-shadow:0 8px 30px rgba(15,20,30,.10)}

/* Responsive */
@media (max-width:820px){
	.hmhome-r1{flex-wrap:wrap}
	.hmhome-purpose{flex:1 1 100%}
	.hmhome-loc{flex:1 1 auto}
	.hmhome-r2{grid-template-columns:1fr 1fr}
	.hmhome-ctab{flex:1 1 0} /* completion cell is now a full 1fr track → stretch the 3 tabs to fill it (no dead gray gap) */
}
@media (max-width:480px){
	.hmhome-r2{grid-template-columns:1fr}
	.hmhome-go{flex:1 1 100%}
	/* 1-col: each control is full bar width → clamp popovers to their cell (100%) so they can't run off-screen. */
	.hmhome-typepanel,.hmhome-pricepanel,.hmhome-specspanel,.hmhome-suggest{width:100%}
}

/* ============================================================================
 * Theme-proofing. The active theme (style.min.css) styles ALL bare buttons:
 *   [type=button],[type=submit],button { background:transparent;color:#cc3366;border:#cc3366 }  (0,1,0)
 *   …:hover,…:focus                    { background:#cc3366;color:#fff }                          (0,1,1)
 * Those (0,1,0)/(0,1,1) rules TIE every single-class .hmhome-* control and win on load
 * order — STRIPPING gold-filled buttons to transparent (white text → invisible) and
 * pinking text + hover bg. Re-assert the full H&M palette (background + border + color,
 * REST and HOVER/FOCUS) one notch higher (.hmhome ancestor → 0,2,0 / 0,2,1) so the bar
 * renders identically regardless of theme or stylesheet order. Scoped to .hmhome →
 * homepage + hub alike. (Borderless buttons set border:0 in their base rule, so the
 * theme's pink border-style:none never shows; only the outlined pills + slider ring
 * need their border re-stated below.)
 * ========================================================================== */
.hmhome button:focus,.hmhome button:focus-visible{outline-color:var(--gold)}
/* Gold-filled CTAs — theme had stripped their background to transparent (white-on-white). */
.hmhome .hmhome-go,.hmhome .hmhome-priceapply,.hmhome .hmhome-typeapply,.hmhome .hmhome-advdone{background:var(--gold);color:#fff;border-color:transparent}
.hmhome .hmhome-go:hover,.hmhome .hmhome-go:focus,.hmhome .hmhome-priceapply:hover,.hmhome .hmhome-priceapply:focus,.hmhome .hmhome-typeapply:hover,.hmhome .hmhome-typeapply:focus,.hmhome .hmhome-advdone:hover,.hmhome .hmhome-advdone:focus{background:var(--gold-d);color:#fff}
/* Transparent trigger buttons (type / beds / price) — stay transparent (no pink hover bg), ink text. */
.hmhome .hmhome-typebtn,.hmhome .hmhome-specsbtn,.hmhome .hmhome-pricebtn{background:transparent;color:var(--ink)}
.hmhome .hmhome-typebtn:hover,.hmhome .hmhome-typebtn:focus,.hmhome .hmhome-specsbtn:hover,.hmhome .hmhome-specsbtn:focus,.hmhome .hmhome-pricebtn:hover,.hmhome .hmhome-pricebtn:focus{background:transparent;color:var(--ink)}
.hmhome .hmhome-typepop.has-val .hmhome-typelabel,.hmhome .hmhome-specspop.has-val .hmhome-specslabel,.hmhome .hmhome-pricepop.has-val .hmhome-pricelabel{color:var(--gold-d)}
/* Advanced toggle — transparent w/ gold text, subtle gold hover (never pink). */
.hmhome .hmhome-advbtn{background:transparent;color:var(--gold-d)}
.hmhome .hmhome-advbtn:hover,.hmhome .hmhome-advbtn:focus{background:color-mix(in srgb, var(--gold,#B78F01) 10%, transparent);color:var(--gold-d)}
/* Purpose / completion segmented pills. */
.hmhome .hmhome-ptab,.hmhome .hmhome-ctab{background:transparent;color:var(--muted)}
.hmhome .hmhome-ptab:hover,.hmhome .hmhome-ptab:focus,.hmhome .hmhome-ctab:hover,.hmhome .hmhome-ctab:focus{background:transparent;color:var(--ink)}
.hmhome .hmhome-ptab.is-active,.hmhome .hmhome-ctab.is-active{background:var(--gold);color:#fff}
/* Residential / commercial inner tabs. */
.hmhome .hmhome-ttab{background:transparent;color:var(--muted)}
.hmhome .hmhome-ttab:hover,.hmhome .hmhome-ttab:focus{background:transparent;color:var(--ink)}
.hmhome .hmhome-ttab.is-active{background:#fff;color:var(--gold-d)}
/* Outlined pills (pay / reset). The theme's `border:#cc3366` SHORTHAND resets border-style:none, so the
   base pills' border vanishes — re-state the FULL border (width+style+color), not just color, to bring it back. */
.hmhome .hmhome-paytab,.hmhome .hmhome-typereset,.hmhome .hmhome-advreset{background:#fff;color:var(--muted);border:1.5px solid #e2e6ee}
.hmhome .hmhome-paytab:hover,.hmhome .hmhome-paytab:focus,.hmhome .hmhome-typereset:hover,.hmhome .hmhome-typereset:focus,.hmhome .hmhome-advreset:hover,.hmhome .hmhome-advreset:focus{background:#fff;color:var(--gold-d);border:1.5px solid var(--gold)}
.hmhome .hmhome-paytab.is-active{background:#fbf4e0;color:var(--gold-d);border:1.5px solid var(--gold)}
/* Beds / baths chips. */
.hmhome .hmhome-bedschip{background:#fff;color:var(--muted);border:1.5px solid var(--line)}
.hmhome .hmhome-bedschip:hover,.hmhome .hmhome-bedschip:focus,.hmhome .hmhome-catpill:hover,.hmhome .hmhome-catpill:focus{background:#fff;color:var(--muted);border:1.5px solid var(--gold)}
.hmhome .hmhome-bedschip.is-active{background:var(--gold);color:#fff;border:1.5px solid var(--gold)}
/* Slider handles (image-free round buttons) — white fill, gold ring (full border, else theme's none wins). */
.hmhome .hmhome-handle{background:#fff;color:var(--gold);border:3px solid var(--gold)}
/* Location autocomplete options. */
.hmhome .hmhome-sopt{background:#fff;color:var(--ink)}
.hmhome .hmhome-sopt:hover,.hmhome .hmhome-sopt:focus{background:#faf6ea;color:var(--ink)}
/* Native selects (advanced panel + type fallback). */
.hmhome .hmhome-sel select,.hmhome .hmhome-advsel{color:var(--ink)}

/* ============================================================================
 * SSOT typography + geometry. The bar is the SAME markup on the homepage hero and the
 * /properties/ hub, but the hub wraps it in `.hmul` (Cairo) + an Elementor column, whose
 * GLOBAL control rules tie the bar's single-class rules at (0,1,0) and win on load order:
 *   [type=button],[type=submit],button { font-weight:400;font-size:1rem;border-radius:3px;padding:.5rem 1rem }
 *   button,input,select,textarea       { font-size:1rem;line-height:1.5;font-family:inherit }
 *   .hmsearch input/select             { (hub-only) font-size override }
 * → on the hub the controls render un-bold, 16px, 3px-cornered, mis-padded. Pin the bar's
 * intended font / weight / size / line-height / radius / padding one notch higher (.hmhome →
 * 0,2,0) and fix the font STACK explicitly so the bar is pixel-identical in ANY context.
 * ========================================================================== */
.hmhome{font-family:Cairo,Tajawal,system-ui,"Segoe UI",Arial,sans-serif;line-height:1.5}
.hmhome .hmhome-ptab,.hmhome .hmhome-ctab{font-weight:700;font-size:.95rem;border-radius:10px;padding:8px 14px}
.hmhome .hmhome-ctab{font-size:.84rem;padding:8px 10px}
.hmhome .hmhome-go{font-weight:800;font-size:1rem;border-radius:13px;padding:0 30px}
.hmhome .hmhome-typebtn,.hmhome .hmhome-specsbtn,.hmhome .hmhome-pricebtn{font-weight:600;font-size:.95rem;padding:0 14px}
.hmhome .hmhome-paytab{font-weight:600;font-size:.82rem;border-radius:999px;padding:5px 13px}
.hmhome .hmhome-priceapply{font-weight:800;font-size:.92rem;border-radius:11px;padding:10px}
.hmhome .hmhome-typeapply,.hmhome .hmhome-advdone{font-weight:800;font-size:.9rem;border-radius:10px;padding:9px}
.hmhome .hmhome-ttab{font-weight:700;font-size:.9rem;border-radius:8px;padding:8px}
.hmhome .hmhome-typereset{font-weight:700;font-size:.88rem;border-radius:10px;padding:9px 14px}
.hmhome .hmhome-advreset{font-weight:800;font-size:.88rem;border-radius:10px;padding:9px 16px}
.hmhome .hmhome-advbtn{font-weight:800;font-size:.9rem;border-radius:10px;padding:8px 14px}
.hmhome .hmhome-bedschip{font-weight:800;font-size:.86rem;border-radius:999px;padding:9px 15px}
.hmhome .hmhome-sopt{font-size:.95rem;padding:11px 14px}
.hmhome .hmhome-handle{width:22px;height:22px;padding:0;border-radius:50%;transition:none} /* theme leaks padding:.5rem 1rem + auto size + transition:all .3s onto the handle (it's a <button>); pin it round + kill the transition so the slider tracks the drag instantly on /properties/ — matches the homepage (SSOT) */
.hmhome .hmhome-sel select{font-weight:600;font-size:.95rem;padding:0 30px}
.hmhome .hmhome-advsel{font-weight:700;font-size:.9rem;border-radius:10px;padding:10px 12px}
.hmhome .hmhome-locinput{font-size:1rem}
.hmhome .hmhome-num,.hmhome .hmhome-anum{font-size:.95rem}
/* The theme also sets `border:1px solid #cc3366` on every button and `border:1px solid #666;padding:.5rem 1rem`
   on text inputs, plus `label{line-height:1}` — all (0,0,1)/(0,1,0), tying the bar's base border:0/padding:0 and
   winning on load order in the hub context (stray 1px borders, mis-padded inputs, squished labels). Kill them. */
.hmhome .hmhome-go,.hmhome .hmhome-priceapply,.hmhome .hmhome-typeapply,.hmhome .hmhome-advdone,.hmhome .hmhome-ptab,.hmhome .hmhome-ctab,.hmhome .hmhome-ttab,.hmhome .hmhome-typebtn,.hmhome .hmhome-specsbtn,.hmhome .hmhome-pricebtn,.hmhome .hmhome-advbtn,.hmhome .hmhome-sopt{border:0}
.hmhome .hmhome-locinput,.hmhome .hmhome-num,.hmhome .hmhome-anum{border:0;padding:0}
.hmhome label{line-height:1.5}
/* Interactive-STATE parity (a REST diff can't see these). On the hub the bar is inside .hmul, whose de-pink
   `.hmul [type=button]:hover/:focus{background:var(--primary-dark);color:#fff}` (0,3,0) repaints the slider HANDLE
   solid gold-dark on hover/keyboard-focus (the handle had no hover guard, unlike the other buttons), and the theme's
   `select:focus{border-color:#333}` / `button:focus{outline:5px auto}` (0,1,1) win on the hub — none of this happens
   on the homepage. Re-pin the handle fill/ring and the select focus at (0,3,1)/(0,2,1) so they win in ANY context. */
.hmhome button.hmhome-handle:hover,.hmhome button.hmhome-handle:focus,.hmhome button.hmhome-handle:active{background:#fff;color:var(--gold);border:3px solid var(--gold)}
.hmhome button.hmhome-handle:focus,.hmhome button.hmhome-handle:active{outline:0;box-shadow:0 0 0 4px color-mix(in srgb, var(--gold,#B78F01) 22%, transparent),0 2px 8px rgba(15,20,30,.28)}
.hmhome .hmhome-advsel{border:1.5px solid var(--line)}
.hmhome .hmhome-advsel:focus{border-color:var(--gold);outline:0}
.hmhome .hmhome-sel select,.hmhome .hmhome-advsel{background-image:none;background-position:0 0}

/* ============================================================================
 * Hub (/properties/) container-responsive layout. The bar sits in a ~66% theme
 * column (a lead-form sidebar takes the rest), so its width tracks the COLUMN —
 * NOT the viewport — and the viewport media queries above never fire on a desktop
 * with a narrow column, leaving row 2's four cells cramped. Make the bar a query
 * container and reflow row 2 on its OWN inline width. `container-type` establishes
 * a stacking context, so lift the bar with z-index to keep the popovers above the
 * results that follow it. (Homepage bar = full-width hero → keeps the media queries.)
 * ========================================================================== */
/* z-index keeps the bar's popovers above the results; container-type drives the row-2 reflow above (and the
   vertical-rail stacking on the hub, where the bar sits in a narrow left column). */
.hmhome-onhub{position:relative;z-index:30;container-type:inline-size}
@container (max-width:820px){
	.hmhome-onhub .hmhome-r1{flex-wrap:wrap}
	.hmhome-onhub .hmhome-purpose{flex:1 1 100%}
	.hmhome-onhub .hmhome-loc{flex:1 1 auto}
	.hmhome-onhub .hmhome-r2{grid-template-columns:1fr 1fr}
	.hmhome-onhub .hmhome-ctab{flex:1 1 0} /* stretch the 3 completion tabs to fill the 1fr cell (no dead gray gap) */
}
@container (max-width:500px){
	.hmhome-onhub .hmhome-r2{grid-template-columns:1fr}
	.hmhome-onhub .hmhome-go{flex:1 1 100%}
	/* 1-col: clamp popovers to their (full-width) cell so they never run off the viewport edge. */
	.hmhome-onhub .hmhome-typepanel,.hmhome-onhub .hmhome-pricepanel,.hmhome-onhub .hmhome-specspanel,.hmhome-onhub .hmhome-suggest{width:100%}
	/* the advanced panel is centered + min(560px,94vw) by default — make it fill the narrow rail instead. */
	.hmhome-onhub .hmhome-advpanel{width:100%;left:0;transform:none}
}

/* ============================================================================
 * COMBINED design (adopted from mockups #2 + #4 + #7): purpose tabs sit ABOVE the
 * bar like folder tabs in our gold; the two rows live in a white card; the row-2
 * filters are icon + name + value ("الكل") pills. STYLE ONLY — markup/JS behaviour
 * (popovers, filtering, label updates) is unchanged. Scoped to .hmhome (0,2,0+) so
 * it wins over the theme-proofing + base rules above regardless of load order.
 * ========================================================================== */
/* The <form> becomes a transparent layout column; the white "card" moves to .hmhome-rows. */
.hmhome .hmhome-form{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.hmhome .hmhome-rows{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 22px 60px rgba(15,20,30,.28);padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.hmhome-onhub .hmhome-rows{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);box-shadow:0 8px 30px rgba(15,20,30,.10)}

/* (1) purpose folder-tabs above the card — H&M gold active */
/* Tabs sit BEHIND the card (z-index 0 < card 1) and overlap its top edge by ~8px, so the card covers
   their square bottoms — no sliver over the bar (issue 2). align-items:flex-end + equal height keeps
   every tab's bottom on the same overlap line, so unselected tabs attach with no gap (issue 1). */
.hmhome .hmhome-purpose{align-self:flex-start;flex:0 0 auto;display:flex;align-items:flex-end;background:transparent;border:0;min-height:auto;padding:0;gap:6px;margin:0 20px -18px;border-radius:0;position:relative;z-index:0}
.hmhome .hmhome-purpose .hmhome-ptab{flex:0 0 auto;background:#eef0f3;color:var(--muted);border-radius:13px 13px 0 0;padding:11px 28px 18px;font-weight:700;font-size:.95rem;box-shadow:none}
.hmhome .hmhome-purpose .hmhome-ptab:hover,.hmhome .hmhome-purpose .hmhome-ptab:focus{background:#e4e7ec;color:var(--ink)}
.hmhome .hmhome-purpose .hmhome-ptab.is-active{background:var(--gold);color:#fff;box-shadow:none}

/* (2)+(3) row-2 filter triggers: icon + (name / value) + chevron, start-aligned, bigger/darker name */
/* flex:1 1 auto + align-self:stretch make the <button> fill its whole .hmhome-field. The theme's generic
   button{width:auto} beats our single-class width:100%, so the button stayed content-width + centered →
   only its middle was clickable; growing it to fill makes the ENTIRE field clickable. */
/* border-radius:inherit → the button matches the .hmhome-field's 13px corners, so its focus highlight
   (gold outline) follows the rounded corners instead of overshooting. justify-content:center keeps the
   icon+label+chevron group centered now that the button fills the whole field. */
.hmhome .hmhome-typebtn,.hmhome .hmhome-specsbtn,.hmhome .hmhome-pricebtn{flex:1 1 auto;align-self:stretch;justify-content:center;gap:11px;padding:0 14px;border-radius:inherit}
.hmhome .hmhome-fico{flex:0 0 auto;width:24px;height:24px;color:var(--gold)}
.hmhome .hmhome-fico[hidden]{display:none} /* beds/area face-icon morph (JS toggles [hidden]) */
.hmhome .hmhome-ftext{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.22;text-align:start} /* flex:0 (don't grow) so the icon+label+chevron stay a tight, centered group instead of spreading to the field edges */
.hmhome .hmhome-fname{font-size:1rem;font-weight:800;color:var(--ink);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmhome .hmhome-hmval{flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.hmhome .hmhome-typepop.has-val .hmhome-hmval,.hmhome .hmhome-specspop.has-val .hmhome-hmval,.hmhome .hmhome-pricepop.has-val .hmhome-hmval{color:var(--gold-d)}
.hmhome .hmhome-typebtn .hmhome-chev,.hmhome .hmhome-specsbtn .hmhome-chev,.hmhome .hmhome-pricebtn .hmhome-chev{flex:0 0 auto} /* no margin-auto: chevron stays with the centered icon+label group */
/* ===== نوع العقار FACE = ONLY the سكني/تجاري pills (proptype-8 icons), filling the whole field — no label, no chevron ===== */
.hmhome .hmhome-typebtn{justify-content:stretch;align-items:stretch;gap:0;padding:5px}
.hmhome .hmhome-catpills{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:6px}
.hmhome .hmhome-catpill{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:0 8px;font-family:inherit;font-weight:700;font-size:.98rem;line-height:1;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.hmhome .hmhome-catpill .hmhome-catico{flex:0 0 auto;width:18px;height:18px;color:currentColor}
/* hover handled by the shared chip rule (.hmhome-bedschip,.hmhome-catpill :hover) — keeps a white bg + readable
   text + gold border, so the theme's generic button:hover (gold-d bg) can't bleed into dark-on-gold. */
.hmhome .hmhome-catpill.is-active{background:var(--gold);border-color:var(--gold);color:#fff}
.hmhome .hmhome-catpill.is-active .hmhome-catico{color:#fff}
/* count badge — how many sub-types are selected in this category */
.hmhome .hmhome-catcount{flex:0 0 auto;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1;background:var(--gold);color:#fff;font-variant-numeric:tabular-nums}
.hmhome .hmhome-catcount[hidden]{display:none}
.hmhome .hmhome-catpill.is-active .hmhome-catcount{background:#fff;color:var(--gold-d)}
.hmhome-onhub .hmhome-catpill{font-size:1rem;gap:8px}
/* ===== Hub fixes ===== */
/* Price & specs buttons: keep them ONE compact horizontal row (a theme rule was forcing display:block → tall vertical stack) */
.hmhome-onhub .hmhome-specsbtn,.hmhome-onhub .hmhome-pricebtn{display:flex;flex-direction:row;align-items:center;justify-content:center}
/* Center the purpose (بيع/إيجار/بدل) tabs in the vertical rail (parent .hmhome-form is a flex column) */
.hmhome-onhub .hmhome-purpose{align-self:center;margin-inline:0}
/* ===== المساحة (م²) field — SSOT: the button/panel carry .hmhome-specsbtn/.hmhome-specspanel in the markup,
   so they inherit ALL shared rules (centering, hover, font, border, chevron, .hmhome-onhub layout, panel box).
   Only the pop WRAPPER needs its own selector (it can't reuse .hmhome-specspop — that's what is-commercial hides). ===== */
.hmhome-areapop{position:relative;padding:0;justify-content:center}
.hmhome .hmhome-areapop.has-val .hmhome-hmval{color:var(--gold-d)}

/* Fallback band for host themes without a hero search slot (H&M Elementor homepage): a full-width
   brand-tinted strip under the header hosting the bar. Only exists when the JS fallback mounts. */
.hmhome-band{padding:26px 16px 30px;background:linear-gradient(180deg,color-mix(in srgb, var(--gold,#B78F01) 10%, #fff),#fff)}
.hmhome-band .hmhome{max-width:1150px;margin:0 auto}
/* Hero placement on the H&M homepage: the bar takes the host filter's slot inside the hero panel. */
.hmhome.hmhome-inhero{max-width:980px;margin:6px auto 0} /* 980px = the F&V hero bar's exact width */