/* Blackkey Homes kit: the ss.ge-style search bar, dropdowns, the "more filters" sheet and listing cards.
   Lacquer and brass in the dark theme; a clean cool-grey page with white cards in the light theme. */

:root[data-theme='light'] body[data-area='homes'], :root[data-theme='light'] .lp.side-homes {
  --ground: #f8f8f9; --panel: #ffffff; --panel-2: #f3f3f5; --raised: #ebebef;
  --line: #ebebef; --line-2: #dcdce2; --field: #ffffff; --field-focus: #ffffff;
  --ink: #0e0f12; --ink-2: #4b4d55; --ink-3: #6b6d76;
}

/* ---------- VIP tags ---------- */
.vip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.vip .mark { width: 16px; height: 9px; gap: 1px; }
.vip-silver { background: #c9ccd3; color: #15171b; }
.vip-gold { background: var(--gold); color: #140f04; }
.vip-black { background: #070707; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- deal pills over the hero ---------- */
.ks-deals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ks-deals button { height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 10, 10, .58); backdrop-filter: blur(8px); color: #ece8df; font-weight: 700; font-size: 14px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.ks-deals button:hover { border-color: rgba(255, 255, 255, .4); }
.ks-deals button:active { transform: scale(.97); }
.ks-deals button.on { background: #ece8df; color: #0a0a0a; border-color: #ece8df; }
.ks-deals button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- the search bar ---------- */
.ks { position: relative; display: flex; align-items: stretch; min-height: 68px; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .55); color: var(--ink); }
.ks-segs { display: contents; }
.ks-cell { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.ks-cell + .ks-cell::before, .ks-q::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.ks-seg { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background var(--t-fast); }
.ks-seg:hover, .ks-seg.open { background: var(--panel-2); }
.ks-seg:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ks-seg > .icon:first-child { width: 20px; height: 20px; color: var(--ink-3); transition: color var(--t-fast); }
.ks-seg.set > .icon:first-child { color: var(--gold-text); }
.ks-seg > .icon:last-child { width: 16px; height: 16px; color: var(--ink-3); transition: rotate var(--t) var(--ease); }
.ks-seg.open > .icon:last-child { rotate: 180deg; }
.ks-lab { display: grid; min-width: 0; line-height: 1.25; }
.ks-lab small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ks-lab b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-q { position: relative; flex: 1.35 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--ink-3); }
.ks-q .icon { width: 19px; height: 19px; flex: none; }
.ks-q input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; box-shadow: none; outline: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.ks-q input::placeholder { color: var(--ink-3); font-weight: 500; }
.ks-more { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.ks-more:hover { background: var(--panel-2); color: var(--ink); }
.ks-more .icon { width: 19px; height: 19px; }
.ks-more.set { color: var(--ink); }
.ks-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #140f04; font-size: 11.5px; font-weight: 800; font-style: normal; }
.ks-badge[hidden] { display: none; }
.ks-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-left: 6px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--gold); color: #140f04; font-weight: 800; font-size: 15.5px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.ks-go:hover { background: var(--gold-hi); }
.ks-go:active { transform: scale(.985); }
.ks-go .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.ks-bar .ks-more-l { display: none; }
.ks-bar .ks-cell { flex: 0 1 auto; }
.ks-bar .ks-seg { min-width: 132px; max-width: 230px; }
.ks-bar .ks-q { flex: 1 1 200px; }
@media (max-width: 1440px) { .ks-hero .ks-more-l { display: none; } .ks-hero .ks-q { flex-grow: 1; } }

@media (max-width: 1180px) {
  .ks { flex-wrap: wrap; row-gap: 4px; }
  .ks-cell { flex: 1 1 calc(25% - 4px); min-height: 56px; }
  .ks-bar .ks-cell { flex: 1 1 calc(20% - 4px); }
  .ks-bar .ks-seg { max-width: none; }
  .ks-q { flex: 1 1 260px; min-height: 52px; border-top: 1px solid var(--line); }
  .ks-q::before { display: none; }
  .ks-more, .ks-go { min-height: 52px; margin-top: 0; }
}
@media (max-width: 720px) {
  .ks-deals { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .ks-deals::-webkit-scrollbar { display: none; }
  .ks-deals button { flex: none; }
  .ks-bar .ks-segs { display: flex; flex-basis: 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
  .ks-bar .ks-segs::-webkit-scrollbar { display: none; }
  /* the row scrolls sideways: fade its right edge so the next filter reads as "more this way" */
  .ks-bar .ks-segs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); scroll-padding-inline: 2px; }
  .ks-bar .ks-segs.at-end { -webkit-mask-image: none; mask-image: none; }
  .ks-bar .ks-cell { flex: none; min-height: 0; }
  .ks-bar .ks-cell::before { display: none; }
  .ks-bar .ks-seg { flex: none; width: max-content; min-width: 0; max-width: none; grid-template-columns: auto auto auto; height: 48px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 999px; padding: 0 12px; }
  .ks-bar .ks-seg.set { border-color: var(--gold); }
  .ks-bar .ks-lab b { overflow: visible; max-width: 160px; text-overflow: ellipsis; overflow: hidden; }
  .ks-bar .ks-q { border-top: 0; min-height: 46px; flex: 1 1 100%; background: var(--panel); border-radius: 12px; border: 1px solid var(--line-2); margin-bottom: 4px; }
  .ks-cell { flex-basis: calc(50% - 2px); }
  .ks-cell:nth-child(odd)::before { display: none; }
  .ks-q { flex-basis: 100%; }
  .ks-more { flex: 1; justify-content: center; }
  .ks-more-l, .ks-bar .ks-more-l { display: inline; }
  .ks-go { flex: 1.4; margin-left: 4px; }
}

/* ---------- dropdowns ---------- */
.kp { position: absolute; z-index: 90; width: 340px; max-height: min(470px, 70vh); overflow: auto; overscroll-behavior: contain; padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 18px -8px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(0, 0, 0, .55); color: var(--ink); animation: kp-in 220ms var(--ease) both; text-align: left; }
@keyframes kp-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.kp-list { display: grid; gap: 2px; }
.kp-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-weight: 600; font-size: 14.5px; text-align: left; cursor: pointer; }
.kp-list button:hover, .kp-list button:focus-visible { background: var(--panel-2); outline: none; }
.kp-list button.on { background: var(--raised); font-weight: 750; }
.kp-list button .icon { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.kp-list button.on .icon:last-child { color: var(--gold-text); }
.kp-list button > span { flex: 1; min-width: 0; display: grid; }
.kp-list small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.kp-list i { font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.kp-none { padding: 14px 12px; color: var(--ink-3); font-size: 14px; }
.kp-search { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-3); }
.kp-search .icon { width: 17px; height: 17px; }
.kp-search input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: none; box-shadow: none; outline: none; color: var(--ink); font-size: 15px; }
.kp-search:focus-within { border-color: var(--gold); }
.kp-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0 0 4px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.kp-back:hover { background: var(--panel-2); color: var(--ink); }
.kp-back .icon { width: 16px; height: 16px; }
.kp-h { padding: 10px 6px 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.kp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
.kp-chips button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font-weight: 650; font-size: 13px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.kp-chips button:hover { border-color: var(--ink-3); color: var(--ink); }
.kp-chips button.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.kp-chips i { font-style: normal; font-size: 11.5px; opacity: .7; }
.kp-range { display: grid; gap: 8px; padding: 2px 4px 4px; }
.kp-range .kp-h { padding: 4px 2px 0; }
.kp-pair { display: grid; grid-template-columns: 1fr 10px 1fr; align-items: center; gap: 6px; }
.kp-pair i { height: 1px; background: var(--line-2); }
.kp-pair label { min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); }
.kp-pair label:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--accent-ring); }
.kp-pair span { font-size: 12.5px; color: var(--ink-3); font-weight: 650; }
.kp-pair input, .km-pair input { flex: 1; width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; background: none; box-shadow: none; outline: none; color: var(--ink); font-size: 15px; font-weight: 650; -moz-appearance: textfield; }
.kp-pair input::-webkit-inner-spin-button, .km-pair input::-webkit-inner-spin-button { display: none; }
.kp-range .kp-chips { padding: 2px 0; }
.kp-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.kp-clear, .kp-ok { height: 40px; padding: 0 16px; border-radius: 10px; border: 0; font-weight: 750; font-size: 14px; cursor: pointer; }
.kp-clear { background: none; color: var(--ink-2); }
.kp-clear:hover { background: var(--panel-2); color: var(--ink); }
.kp-ok { background: var(--ink); color: var(--ground); }
@media (max-width: 720px) {
  .kp { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + var(--kb, 0px)); width: auto; max-height: min(72dvh, calc(100dvh - var(--kb, 0px) - 72px)); border-radius: 20px; animation-name: kp-up; }
  @keyframes kp-up { from { opacity: 0; transform: translateY(24px); } }
}

/* ---------- listing card (grid) ---------- */
.kc { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t-fast); }
.kc:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 26px 40px -28px rgba(0, 0, 0, .55); }
.kc.is-gold, .kc.is-black { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.kc-media { position: relative; display: block; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: 11px; overflow: hidden; background: var(--panel-2); }
.kc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.kc:hover .kc-media img { transform: scale(1.04); }
.kc-noimg { position: absolute; inset: 0; display: grid; place-items: center; background: #101011; }
.kc-noimg .mark { width: 54px; height: 30px; opacity: .5; }
.kc-tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.kc-specs { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.kc-specs span, .kr-count { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; background: rgba(10, 10, 10, .64); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-specs .icon, .kr-count .icon { width: 14px; height: 14px; }
.kc-fav, .kr-fav { display: grid; place-items: center; border: 0; cursor: pointer; transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast); }
.kc-fav { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(10, 10, 10, .55); color: #fff; }
.kc-fav .icon, .kr-fav .icon { width: 18px; height: 18px; }
.kc-fav:active, .kr-fav:active { transform: scale(.88); }
.kc-fav.on, .kr-fav.on { color: var(--gold-hi); }
.kc-fav.on .icon, .kr-fav.on .icon { fill: currentColor; }
.kc-body { display: grid; align-content: start; gap: 5px; padding: 12px 14px 14px; color: inherit; text-decoration: none; min-width: 0; }
.kc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.kc-price b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.kc-price small, .kr-price small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kc-title { font-size: 13.5px; font-weight: 600; line-height: 1.38; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.76em; }
.kc-place { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.kc-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-place .icon, .kr-place .icon { width: 14px; height: 14px; flex: none; color: var(--gold-text); }

/* ---------- listing row (results list) ---------- */
.kr { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); transition: border-color var(--t-fast), box-shadow var(--t) var(--ease); }
.kr:hover { border-color: var(--line-2); box-shadow: 0 22px 40px -30px rgba(0, 0, 0, .5); }
.kr.is-gold, .kr.is-black { background: color-mix(in srgb, var(--gold) 7%, var(--panel)); border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); }
.kr .kr-media { position: relative; display: block; aspect-ratio: 3 / 2; align-self: start; border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.kr .kr-media .kc-tags { z-index: 1; }
.kr-count { position: absolute; right: 8px; bottom: 8px; }
.kr-body { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 4px 4px 4px 0; }
.kr-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 12px; }
.kr-title { font-size: 17px; font-weight: 750; line-height: 1.32; color: var(--ink); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kr-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kr-when { padding-top: 3px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.kr-fav { width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); color: var(--ink-2); }
.kr-fav:hover { color: var(--ink); background: var(--raised); }
.kr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kr-price b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.kr-neg { height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; background: var(--panel-2); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.kr-place { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.kr-place > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-who { flex: none; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line-2); color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
.kr-ex { max-width: 75ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kr-specs { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kr-specs span { display: inline-flex; align-items: center; gap: 6px; }
.kr-specs .icon { width: 16px; height: 16px; color: var(--ink-3); }
@media (max-width: 760px) {
  .kr { grid-template-columns: 1fr; gap: 12px; padding: 8px; }
  .kr-body { padding: 0 6px 6px; }
  .kr-title { font-size: 16px; }
}

/* ---------- the "more filters" sheet ---------- */
.km { width: min(740px, calc(100vw - 24px)); max-width: none; max-height: min(880px, calc(100dvh - 40px)); padding: 0; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.km[open] { animation: km-in 360ms var(--ease) both; }
@keyframes km-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.km::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.km-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; height: 100%; }
.km-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 24px; border-bottom: 1px solid var(--line); }
.km-head h2 { font-size: 19px; letter-spacing: -.01em; }
.km-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink-2); cursor: pointer; }
.km-x:hover { background: var(--raised); color: var(--ink); }
.km-x .icon { width: 19px; height: 19px; }
.km-body { overflow: auto; overscroll-behavior: contain; padding: 0 24px 8px; }
.km-body section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.km-body section:last-child { border-bottom: 0; }
.km-body h3 { margin-bottom: 12px; font-size: 14.5px; font-weight: 750; }
.km-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.km-chips button { height: 38px; min-width: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.km-chips button:hover { border-color: var(--ink-3); color: var(--ink); }
.km-chips button:active { transform: scale(.96); }
.km-chips button.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.km-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
.km-pair label { min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); }
.km-pair label:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--accent-ring); }
.km-pair span { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.km-pair i { font-style: normal; font-size: 13px; color: var(--ink-3); }
.km-two { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.km-ticks { display: grid; gap: 4px; }
.km-tick { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px; border: 0; background: none; color: var(--ink-2); font-weight: 650; font-size: 14px; cursor: pointer; }
.km-tick .icon { width: 20px; height: 20px; padding: 2px; border-radius: 6px; border: 1.5px solid var(--line-2); color: transparent; stroke-width: 3; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.km-tick.on { color: var(--ink); }
.km-tick.on .icon { background: var(--gold); border-color: var(--gold); color: #140f04; }
.km-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.km-reset { height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-weight: 750; font-size: 14.5px; cursor: pointer; }
.km-reset:hover { background: var(--panel-2); color: var(--ink); }
.km-go { min-width: 230px; height: 48px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--gold); color: #140f04; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-fast); }
.km-go:hover { background: var(--gold-hi); }
@media (max-width: 640px) {
  .km { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .km-body { padding: 0 16px 8px; }
  .km-two { grid-template-columns: 1fr; }
  .km-go { min-width: 0; flex: 1; }
}

/* ---------- location picker: myhome.ge's city → districts → neighbourhoods, with ticks ---------- */
.kp.kp-wide { width: min(800px, calc(100vw - 24px)); height: min(620px, 78vh); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kp.kp-wide .kl { height: 100%; }
.kl { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.kl > .kp-search { margin: 10px 10px 6px; flex: none; }
.kl-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; flex: none; }
.kl-head .kp-back { margin: 0; }
.kl-city { margin-left: auto; padding-right: 6px; font-size: 14.5px; font-weight: 750; }
.kl-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 2px; max-height: 96px; overflow: auto; flex: none; }
.kl-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.kl-chip .icon { width: 12px; height: 12px; color: var(--ink-3); }
.kl-chip:hover { border-color: var(--terra); }
.kl-chip:hover .icon { color: var(--terra-text); }
.kl-whole { display: inline-flex; align-items: center; gap: 6px; height: 30px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kl-whole .icon { width: 15px; height: 15px; color: var(--gold-text); }
.kl-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.kl-h { padding: 14px 12px 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.kl-letter { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
.kl-letter > b { padding: 12px 0 0 12px; font-size: 12px; font-weight: 800; color: var(--gold-text); }

.kl-d + .kl-d { border-top: 1px solid var(--line); }
.kl-row { display: flex; align-items: center; gap: 2px; }
.kl-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
.kl-pick > span:not(.kl-box) { flex: 1; min-width: 0; display: grid; }
.kl-pick small { font-size: 12px; font-weight: 500; color: var(--gold-text); }
.kl-pick i { font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.kl-pick:hover, .kl-pick:focus-visible { background: var(--panel-2); outline: none; }
.kl-pick:focus-visible { box-shadow: 0 0 0 2px var(--gold) inset; }
.kl-d.is-all > .kl-row .kl-pick, .kl-d.is-some > .kl-row .kl-pick { font-weight: 750; }
.kl-box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--field); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.kl-box .icon { width: 13px; height: 13px; color: #140f04; stroke-width: 3; }
.kl-box.all { background: var(--gold); border-color: var(--gold); }
/* some of the neighbourhoods ticked: a bar, like a checkbox's mixed state */
.kl-box.some { border-color: var(--gold); }
.kl-box.some::after { content: ''; width: 10px; height: 2.5px; border-radius: 2px; background: var(--gold); }
.kl-pick:hover .kl-box.none { border-color: var(--ink-3); }
.kl-more { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--ink-3); cursor: pointer; }
.kl-more:hover { background: var(--panel-2); color: var(--ink); }
.kl-more:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.kl-more .icon { width: 17px; height: 17px; transition: transform var(--t-fast) var(--ease); }
.kl-more[aria-expanded='true'] .icon { transform: rotate(180deg); }
.kl-us { display: grid; padding: 0 0 6px 22px; }
.kl-u { min-height: 38px; font-size: 14px; font-weight: 500; }
.kl-u .kl-box { width: 18px; height: 18px; border-radius: 5px; }
.kl-foot { flex: none; margin: 0; padding: 10px; background: var(--panel); }
@media (max-width: 720px) {
  .kp.kp-wide { width: auto; max-height: 84dvh; }
  .kl-pick { min-height: 48px; }
  .kl-u { min-height: 44px; }
}

/* wide layout: three columns of cities; districts left, neighbourhoods right */
@media (min-width: 721px) {
  .kp-wide .kl-body > .kp-list, .kp-wide .kl-letter .kp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4px; }
  .kp-wide .kl-letter { grid-template-columns: 30px minmax(0, 1fr); }
  .kp-wide .kl-body { padding: 0 10px 10px; }
  .kl-2 { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100%; min-height: 0; }
  .kp-wide .kl-body:has(.kl-2) { padding: 0; overflow: hidden; display: flex; }
  .kp-wide .kl-body:has(.kl-2) > .kl-2 { flex: 1; }
  .kl-ds { overflow: auto; overscroll-behavior: contain; padding: 4px 6px 10px 10px; border-right: 1px solid var(--line); }
  .kl-drow { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
  .kl-drow.is-active { background: var(--raised); }
  .kl-tick { flex: none; width: 40px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; cursor: pointer; }
  .kl-tick:hover .kl-box.none { border-color: var(--ink-3); }
  .kl-tick:focus-visible, .kl-dname:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .kl-dname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 2px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
  .kl-dname > span { flex: 1; min-width: 0; display: grid; }
  .kl-dname small { font-size: 12px; font-weight: 500; color: var(--gold-text); }
  .kl-dname i { font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
  .kl-dname .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
  .kl-drow.is-active .kl-dname { font-weight: 750; }
  .kl-drow.is-active .kl-dname .icon { color: var(--gold-text); }
  .kl-drow:not(.is-active):hover { background: var(--panel-2); }
  .kl-us2 { overflow: auto; overscroll-behavior: contain; padding: 4px 10px 10px; min-width: 0; }
  .kl-us2-h { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 4px 0; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
  .kl-all b { font-weight: 750; }
  .kl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; padding-top: 4px; }
  .kl-grid .kl-u { min-height: 42px; }
}

/* ---------- the quick links row under the Homes top bar (main page and every /homes page) ---------- */
.bh-sub { border-bottom: 1px solid var(--line); background: var(--panel); }
.bh-sub-in { max-width: 1312px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bh-sub-in::-webkit-scrollbar { display: none; }
.bh-sub a { flex: none; display: inline-flex; align-items: center; height: 46px; padding: 0 12px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: 13.5px; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.bh-sub a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.bh-sub a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--gold); }
/* the row's first word starts under the logo at every width: same side room as the top bar, no negative offset
   (a scrolling row clips anything pulled outside it) */
.bh-sub-in { max-width: none; padding-inline: max(16px, calc((100% - 1280px) / 2)); }
.bh-sub a:first-child { padding-left: 0; }
@media (max-width: 1100px) { .bh-sub-in { padding-inline: clamp(16px, 5vw, 72px); } }

/* ---------- the account button and its menu: one look on the main page and on /homes ---------- */
.hs-acc { display: flex; align-items: center; gap: 8px; position: relative; }
.hs-me { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 5px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-weight: 650; cursor: pointer; }
.hs-me .icon { width: 16px; height: 16px; color: var(--ink-3); }
.hs-ava { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--gold); color: #140f04; font-weight: 800; font-size: 14px; flex: none; text-transform: uppercase; }
.hs-ava.big { width: 48px; height: 48px; font-size: 19px; }
.hs-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); display: grid; gap: 2px; animation: rise var(--t) var(--ease) both; }
.hs-menu[hidden] { display: none; }
.hs-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.hs-menu-head b { display: block; }
.hs-menu-head small { color: var(--ink-3); font-size: 12.5px; }
.hs-menu a, .hs-menu .hs-out { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; background: none; border: 0; cursor: pointer; width: 100%; }
.hs-menu a:hover, .hs-menu .hs-out:hover { background: var(--raised); color: var(--ink); }
.hs-menu .hs-out { color: var(--terra-text); }
.hs-me { max-width: 220px; min-width: 0; }
.hs-me-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-me { height: 34px; padding: 0 10px 0 4px; gap: 6px; font-size: 13.5px; font-weight: 650; background: transparent; }
.hs-me .hs-ava { width: 26px; height: 26px; font-size: 12.5px; }
.hs-me .icon { width: 14px; height: 14px; }
.hs-me:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hs-me[aria-expanded='true'] { background: var(--raised); }
.hs-me[aria-expanded='true'] .icon { transform: rotate(180deg); }
.hs-me .icon { transition: transform var(--t-fast) var(--ease); }
@media (max-width: 760px) { .hs-me-n { display: none; } }

/* language and theme inside the account menu (signed in); the bar's own switches step aside */
.lp-nav.is-in [data-lang-switch], .lp-nav.is-in .lp-theme, .hs-top.is-in .hs-lang, .hs-top.is-in .hs-theme { display: none !important; }
.hs-msets { display: grid; gap: 2px; margin: 4px 0; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hs-mset { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 6px 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hs-mseg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.hs-mseg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.hs-mseg button .icon { width: 14px; height: 14px; }
.hs-mseg button:hover { color: var(--ink); }
.hs-mseg button.on { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; }
:root[data-theme='light'] .hs-mseg button.on { background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 60, .15); }
.hs-mseg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* signed out: the same button as the account one, a person icon where the avatar would be */
.hs-guest-ic { flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.hs-me .hs-guest-ic .icon { width: 14px; height: 14px; color: var(--ink-2); transform: none; }
/* phones: typing in the location search raises the keyboard; the picker shrinks to the space above it */
@media (max-width: 720px) { html.kb-up .kp.kp-wide { height: calc(100dvh - var(--kb, 0px) - 16px); max-height: none; } }