/* CARIBASOL V2-mix — the ONE property search (giro 25, D-245): Home Hero + Buy. Markup tools/search-panel.html (python tools/sync-search.py) · behaviour js/search.js.
   Layout of A (V2-mix Hero, giri 2–7): Resale / New developments + Describe it · Location + Price · Property type + Bedrooms + More filters + Show N homes · Your search.
   Clean and functional: no decorative effect. Phones / tablets (< 1024): a trigger (Home) or the compact bar (Buy) opens the same fields in a full-screen sheet.
   The holder draws the paper: the Hero .panel (index.html) on the Home, .cs-card here on Buy. */

/* ---- the Resale / New developments indicator: the brand blue (giro 27: the Metal · Gold choice is gone) ---- */
:root { --cs-sel: #0D53A1; --cs-sel-t: #083A73; }   /* --tap-hit (44 px, never scaled): css/shell.css §0 */

.cs, .cs-sheet { --cs-ink: #0E2240; --cs-mute: #3A475A; --cs-line: #D3DEEB; --cs-field: #FFFFFF; --cs-blue: #0D53A1; --cs-h: calc(42px * var(--ui)); --th: calc(30px * var(--ui)); --tv: calc(18px * var(--ui)); }   /* the sheet too: the body moves into it */
.cs { position: relative; margin: 0; font-family: Inter, 'Inter Fallback', system-ui, sans-serif; color: var(--cs-ink); }
.cs [hidden], .cs-sheet [hidden], .cs-sheet[hidden] { display: none !important; }
.cs fieldset, .cs-sheet fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs legend, .cs-sheet legend { float: left; width: 100%; padding: 0; }
.cs legend + *, .cs-sheet legend + * { clear: both; }
.cs-lbl { display: block; margin: 0 0 calc(6px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .01em; color: #233147; }
.cs-hidden { display: none; }
.cs button { font-family: inherit; }
.cs-trigger { display: none; }
.cs-body { display: flex; flex-direction: column; gap: calc(12px * var(--ui)); }
.cs-r1 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(22px * var(--ui)); align-items: end; }
.cs-r2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(330px * var(--ui)), 1.2fr); gap: calc(22px * var(--ui)); align-items: start; }
.cs-r3 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(12px * var(--ui)) calc(22px * var(--ui)); }

/* ---- Resale / New developments: one selector, a soft indicator slides under the active item; the other item stays readable, no grey block (giro 25 point 3) ---- */
.cs-mode { position: relative; display: flex; align-items: stretch; height: var(--cs-h); box-sizing: border-box; border-bottom: 1px solid rgba(14, 34, 64, .14); }
.cs-mode label { position: relative; display: flex; }
.cs-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cs-mode span { display: flex; align-items: center; padding: 0 calc(13px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; white-space: nowrap; color: #334052; cursor: pointer; transition: color .2s ease; }
.cs-mode label:first-of-type span { padding-left: 2px; }
.cs-mode label:hover span { color: var(--cs-ink); }
.cs-mode input:checked + span { color: var(--cs-sel-t); }
.cs-mode input:focus-visible + span { outline: 2px solid var(--cs-blue); outline-offset: -3px; border-radius: calc(8px * var(--ui)); }
.cs-mode__ink { position: absolute; left: 0; bottom: -1px; width: calc(100px * var(--ui)); height: calc(3px * var(--ui)); border-radius: 0; background: var(--cs-sel); pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1); }   /* 100 px bar moved and stretched by transform only (no layout animation): translateX(left) scaleX(width / 100) */

/* ---- Describe it ---- */
.cs-q { position: relative; min-width: 0; }
.cs-q__box { display: flex; align-items: center; gap: calc(9px * var(--ui)); height: var(--cs-h); padding: 0 calc(5px * var(--ui)) 0 calc(12px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(11px * var(--ui)); background: var(--cs-field); color: var(--cs-blue);
  box-shadow: inset 1px 2px 3px rgba(14, 34, 64, .09); }
.cs-q__box:focus-within, .cs-loc__box:focus-within, .cs-money input:focus, .cs-field:focus { border-color: var(--cs-blue); box-shadow: inset 0 0 0 1px var(--cs-blue); outline: none; }
.cs-q__box svg { flex: none; }
.cs-q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--cs-ink); }
.cs-q input::placeholder, .cs-loc__box input::placeholder, .cs-money input::placeholder, .cs-field::placeholder { color: #4D5C70; font-weight: 500; opacity: 1; }
.cs-q__go { flex: none; height: calc(32px * var(--ui)); padding: 0 calc(11px * var(--ui)); border: 0; border-radius: calc(8px * var(--ui)); background: #e6ecf6; color: var(--cs-blue); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; white-space: nowrap; cursor: pointer; }
.cs-q__go:hover { background: #dbe4f3; }
.cs-msg { margin: calc(-4px * var(--ui)) 0 0; font-size: max(12px, calc(14px * var(--ui))); line-height: 1.4; color: #334052; }
.cs-recents__h { padding: calc(6px * var(--ui)) calc(8px * var(--ui)) calc(4px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #3A475A; }
.cs-recents button { width: 100%; min-height: calc(36px * var(--ui)); padding: 0 calc(8px * var(--ui)); border: 0; border-radius: calc(8px * var(--ui)); background: transparent; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--cs-ink); text-align: left; cursor: pointer; }
.cs-recents button:hover { background: #E8F1FB; }

/* ---- popovers (location suggestions, recent searches): below on Buy, above in the Hero (the Hero clips below the panel), in the flow in the phone sheet ---- */
.cs-pop { position: absolute; left: 0; top: calc(100% + calc(6px * var(--ui))); z-index: 30; width: max(100%, calc(300px * var(--ui))); max-width: min(calc(360px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); box-sizing: border-box; padding: calc(6px * var(--ui));
  background: #fff; border: 1px solid #D7E2EE; border-radius: calc(12px * var(--ui)); box-shadow: 1px 3px 4px rgba(14, 34, 64, .08), 4px 12px 18px rgba(14, 34, 64, .10), 10px 28px 48px rgba(14, 34, 64, .14); }
.cs-pop--up { top: auto; bottom: calc(100% + calc(6px * var(--ui))); }
.cs-recents { width: 100%; max-width: none; }

/* ---- Location: multiple choice with suggestions while typing ---- */
.cs-loc { position: relative; min-width: 0; }
.cs-loc__box { position: relative; display: flex; align-items: center; gap: calc(6px * var(--ui)); height: var(--cs-h); padding: 0 calc(30px * var(--ui)) 0 calc(11px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(11px * var(--ui));
  background: var(--cs-field); box-shadow: inset 1px 2px 3px rgba(14, 34, 64, .09); cursor: text; }
.cs-loc__box > svg:first-child { flex: none; color: #3F4D61; }
.cs-loc__tokens { display: flex; gap: calc(4px * var(--ui)); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.cs-loc__tokens:empty { display: none; }
.cs-tok { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; height: calc(28px * var(--ui)); padding: 0 2px 0 calc(9px * var(--ui)); border-radius: calc(999px * var(--ui)); background: #E8F1FB; color: #083A73; font-size: max(12px, calc(14px * var(--ui))); font-weight: 600; white-space: nowrap; }
.cs-tok button { flex: none; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); margin-left: 1px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1; cursor: pointer; }
.cs-tok button:hover { background: rgba(13, 83, 161, .12); }
.cs-tok--more { padding: 0 calc(9px * var(--ui)); }
.cs-loc__box input { flex: 1 1 calc(60px * var(--ui)); min-width: calc(60px * var(--ui)); height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--cs-ink); }
.cs-chev { position: absolute; right: calc(11px * var(--ui)); top: 50%; transform: translateY(-50%); color: #3F4D61; pointer-events: none; transition: transform .2s; }
.cs-loc__box:has(input[aria-expanded=true]) .cs-chev { transform: translateY(-50%) rotate(180deg); }
.cs-loc__list { margin: 0; padding: 0; list-style: none; max-height: calc(252px * var(--ui)); overflow: auto; overscroll-behavior: contain; }
.cs-loc__list li[role=option] { display: flex; align-items: center; gap: calc(9px * var(--ui)); min-height: calc(36px * var(--ui)); padding: 2px calc(8px * var(--ui)) 2px calc(22px * var(--ui)); border-radius: calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); cursor: pointer; }
.cs-loc__list li.is-zone { padding-left: calc(8px * var(--ui)); margin-top: calc(3px * var(--ui)); font-weight: 600; }
.cs-loc__list li.is-active, .cs-loc__list li[role=option]:hover { background: #E8F1FB; }
.cs-loc__meta { margin-left: auto; font-size: max(12px, calc(14px * var(--ui))); color: #4D5C70; font-variant-numeric: tabular-nums; }
.cs-loc__list li.is-zone .cs-loc__meta { font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.cs-tick { flex: none; position: relative; width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); box-sizing: border-box; border-radius: calc(5px * var(--ui)); border: 1.5px solid #A9B8CB; background: #fff; }
li[aria-selected=true] > .cs-tick { background: var(--cs-blue); border-color: var(--cs-blue); }
li[aria-selected=true] > .cs-tick::after { content: ''; position: absolute; left: calc(4px * var(--ui)); top: 1px; width: calc(4px * var(--ui)); height: calc(8px * var(--ui)); border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cs-loc__empty { padding: calc(9px * var(--ui)) calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: #4D5C70; }
.cs-loc__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui)); margin-top: calc(6px * var(--ui)); padding: calc(6px * var(--ui)) 2px 0 calc(8px * var(--ui)); border-top: 1px solid #D7E2EE; font-size: max(12px, calc(14px * var(--ui))); color: #3A475A; }
.cs-btn2 { min-height: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)); border: 1px solid #D3DEEB; border-radius: calc(9px * var(--ui)); background: #fff; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--cs-ink); cursor: pointer; }
.cs-btn2:hover { border-color: #A9B8CB; }
.cs-btn2[aria-disabled=true] { color: #4D5C70; cursor: not-allowed; }

/* ---- Price: Min above the left end, Max above the right end, the bar below — one block. Fields fit "€ 10.000.000" ---- */
.cs-price { min-width: 0; }
.cs-price__fields { display: flex; justify-content: space-between; gap: calc(12px * var(--ui)); }
.cs-money { position: relative; flex: 0 1 calc(152px * var(--ui)); min-width: calc(136px * var(--ui)); }
.cs-money > span { position: absolute; left: calc(12px * var(--ui)); top: 0; bottom: 0; display: flex; align-items: center; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: #3F4D61; pointer-events: none; }
.cs-money input { width: 100%; height: var(--cs-h); box-sizing: border-box; padding: 0 calc(10px * var(--ui)) 0 calc(28px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(11px * var(--ui)); background: var(--cs-field);
  font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cs-ink); box-shadow: inset 1px 2px 3px rgba(14, 34, 64, .09); }
.cs-money--max input { text-align: right; }
/* the bar: the visible disc's outer edge meets the outer edge of the fields (the hit area is wider than the disc) */
.cs-range { --a: 0; --b: 1; position: relative; height: var(--th); margin: calc(6px * var(--ui)) calc(var(--tv) / 2 - var(--th) / 2) 0; touch-action: none; }
.cs-range__rail { position: absolute; left: calc(var(--th) / 2); right: calc(var(--th) / 2); top: calc(50% - 1.5px); height: calc(3px * var(--ui)); border-radius: 2px; background: #CCD8E6; box-shadow: inset 0 1px 1px rgba(14, 34, 64, .16); }
.cs-range__fill { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 2px; background: var(--cs-blue); }
.cs-range__h { position: absolute; inset: 0; z-index: 2; width: 100%; height: var(--th); margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.cs-range__h::-webkit-slider-runnable-track { height: var(--th); background: transparent; border: 0; }
.cs-range__h::-moz-range-track { height: var(--th); background: transparent; border: 0; }
.cs-range__h::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: var(--th); height: var(--th); border: 0; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle, var(--cs-blue) 0 3px, #FFFFFF 3.5px calc(var(--tv) / 2 - 2.5px), var(--cs-blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px)); }
.cs-range__h::-moz-range-thumb { pointer-events: auto; width: var(--th); height: var(--th); border: 0; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle, var(--cs-blue) 0 3px, #FFFFFF 3.5px calc(var(--tv) / 2 - 2.5px), var(--cs-blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px)); }
.cs-range__h:active::-webkit-slider-thumb { cursor: grabbing; }
.cs-range__h:focus-visible { outline: none; }
.cs-range__h:focus-visible::-webkit-slider-thumb { background: radial-gradient(circle, var(--cs-blue) 0 3px, #FFFFFF 3.5px calc(var(--tv) / 2 - 2.5px), var(--cs-blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), rgba(13, 83, 161, .28) calc(var(--tv) / 2 + .5px) calc(var(--tv) / 2 + 5px), transparent calc(var(--tv) / 2 + 5.5px)); }
.cs-range__h:focus-visible::-moz-range-thumb { background: radial-gradient(circle, var(--cs-blue) 0 3px, #FFFFFF 3.5px calc(var(--tv) / 2 - 2.5px), var(--cs-blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), rgba(13, 83, 161, .28) calc(var(--tv) / 2 + .5px) calc(var(--tv) / 2 + 5px), transparent calc(var(--tv) / 2 + 5.5px)); }

/* ---- Property type (chips) · Bedrooms / Bathrooms (segments) · Features (chips) ---- */
.cs-chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.cs-chip { position: relative; display: inline-flex; }
.cs-chip input, .cs-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cs-chip span { display: inline-flex; align-items: center; min-height: calc(36px * var(--ui)); padding: 0 calc(14px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(999px * var(--ui)); background: var(--cs-field);
  font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--cs-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(14, 34, 64, .07); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.cs-chip:hover span { border-color: #A3B2C6; }
.cs-chip input:checked + span { background: var(--cs-blue); border-color: var(--cs-blue); color: #fff; }
.cs-seg { display: inline-flex; padding: calc(3px * var(--ui)); border-radius: calc(999px * var(--ui)); background: #DCE6F1; box-shadow: inset 1px 2px 3px rgba(14, 34, 64, .15); }
.cs-seg label { position: relative; display: flex; }
.cs-seg span { display: flex; align-items: center; justify-content: center; min-width: calc(40px * var(--ui)); min-height: calc(32px * var(--ui)); padding: 0 calc(10px * var(--ui)); border-radius: calc(999px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: #334052; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.cs-seg label:hover span { color: var(--cs-ink); }
.cs-seg input:checked + span { background: var(--cs-blue); color: #fff; box-shadow: 1px 2px 3px rgba(14, 34, 64, .22); }
.cs-chip input:focus-visible + span, .cs-seg input:focus-visible + span { outline: 2px solid var(--cs-blue); outline-offset: 2px; }
label.is-off > span { opacity: .4; cursor: not-allowed; }
.cs-chip.is-off:hover span { border-color: var(--cs-line); }

/* ---- More filters · the action ---- */
.cs-more-btn { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); min-height: calc(38px * var(--ui)); padding: 0 calc(4px * var(--ui)); border: 0; background: none; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--cs-blue); cursor: pointer; }
.cs-more-btn:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.cs-more-btn svg { transition: transform .2s; }
.cs-more-btn[aria-expanded=true] svg { transform: rotate(180deg); }
.cs-count { display: inline-flex; align-items: center; justify-content: center; min-width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); padding: 0 calc(5px * var(--ui)); border-radius: calc(999px * var(--ui)); background: var(--cs-blue); color: #fff; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-go { display: inline-flex; align-items: center; justify-content: center; gap: calc(9px * var(--ui)); height: max(44px, calc(44px * var(--ui))); min-width: calc(196px * var(--ui)); margin-left: auto; padding: 0 calc(20px * var(--ui)); border: 0; border-radius: calc(11px * var(--ui));
  background: var(--c-cta, #0D53A1); color: #fff; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 1px 2px 2px rgba(14, 34, 64, .25), 3px 8px 14px -2px rgba(14, 34, 64, .22); }
.cs-go:hover { background: var(--c-cta-h, #0A4589); }   /* giro 27 (point 2): the main action in the darkened sun — white on #C2550A = 4.62:1 */
.cs-go:focus-visible, .cs-more-btn:focus-visible, .cs-clear:focus-visible, .cs-achip button:focus-visible, .cs-tok button:focus-visible, .cs-btn2:focus-visible, .cs-q__go:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 2px; }
.cs-more { display: none; padding-top: calc(12px * var(--ui)); border-top: 1px solid rgba(14, 34, 64, .09); }
.cs--more .cs-more { display: block; }
.cs-more__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(12px * var(--ui)) calc(22px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.cs-ref { flex: 0 1 calc(190px * var(--ui)); }
.cs-field { width: 100%; height: var(--cs-h); box-sizing: border-box; padding: 0 calc(11px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(11px * var(--ui)); background: var(--cs-field);
  font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; letter-spacing: .02em; color: var(--cs-ink); box-shadow: inset 1px 2px 3px rgba(14, 34, 64, .09); }
.cs-save { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); }
.cs-more__done { margin-left: auto; }

/* ---- Your search: the active filters as removable chips + Clear all; own listings only in Review (A-03 To verify) ---- */
.cs-active { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ui)) calc(10px * var(--ui)); min-height: calc(36px * var(--ui)); padding-top: calc(10px * var(--ui)); border-top: 1px solid rgba(14, 34, 64, .09); }
.cs-active__l { margin: 0 calc(4px * var(--ui)) 0 0; }
.cs-active__chips { display: contents; }
.cs-achip { display: inline-flex; align-items: center; gap: 1px; height: calc(32px * var(--ui)); padding: 0 calc(3px * var(--ui)) 0 calc(12px * var(--ui)); border: 1px solid var(--cs-line); border-radius: calc(999px * var(--ui)); background: #fff; font-size: max(12px, calc(14px * var(--ui))); font-weight: 600; color: var(--cs-ink); white-space: nowrap; }
.cs-achip button { display: flex; align-items: center; justify-content: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border: 0; border-radius: 50%; background: transparent; color: #3F4D61; cursor: pointer; }
.cs-achip button:hover { background: #EEF4FA; color: var(--cs-ink); }
.cs-active__hint { margin: 0; font-size: max(12px, calc(14px * var(--ui))); color: #4D5C70; }
.cs-clear { min-height: calc(32px * var(--ui)); padding: 0 calc(4px * var(--ui)); border: 0; background: none; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--cs-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-own { margin-left: auto; display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); font-size: max(12px, calc(14px * var(--ui))); color: #334052; }

/* ---- Home (Hero, desktop): popovers open upward; More filters is a panel above the search (the Hero clips below it) ---- */
@media (min-width: 1024px) {
  .cs[data-cs-page=home] .cs-more { position: absolute; left: 0; right: 0; bottom: calc(100% + calc(12px * var(--ui))); z-index: 25; padding: calc(16px * var(--ui)) calc(18px * var(--ui)) calc(14px * var(--ui)); border: 1px solid rgba(14, 34, 64, .07); border-radius: calc(15px * var(--ui));
    background: linear-gradient(180deg, var(--pp-1, #FFFFFF) 0%, var(--pp-2, #F6F9FD) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 1px 2px 2px rgba(14, 34, 64, .10), 3px 7px 8px rgba(14, 34, 64, .09), 8px 18px 22px rgba(14, 34, 64, .10), 16px 40px 64px rgba(14, 34, 64, .18); }
  .cs[data-cs-page=home] .cs-more__row { margin-top: calc(10px * var(--ui)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .cs-r1, .cs-r2 { gap: calc(16px * var(--ui)); } .cs-r3 { gap: calc(10px * var(--ui)) calc(16px * var(--ui)); }
  .cs-go { min-width: 0; }
}

/* ---- Buy: the panel's paper (the Home's is the Hero .panel) ---- */
.cs-wrap { padding: 0 var(--gx); margin: 0 0 calc(21px * var(--ui)); }
.cs-card { position: relative; isolation: isolate; padding: calc(18px * var(--ui)) calc(21px * var(--ui)) calc(14px * var(--ui)); border-radius: var(--r-panel, calc(15px * var(--ui))); border: 1px solid rgba(14, 34, 64, .07); background: var(--surf-panel, #F6F9FD);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 1px 2px 2px rgba(14, 34, 64, .06), 8px 18px 32px -12px rgba(14, 34, 64, .16); }

/* ======================= phones / tablets (< 1024): trigger (Home) / compact bar (Buy) → full-screen sheet ======================= */
@media (max-width: 1023px) {
  .cs > .cs-body { display: none; }
  .no-js .cs > .cs-body { display: flex; }
  .cs-wrap { display: none; }
  .no-js .cs-wrap { display: block; }
  .cs-trigger { display: flex; width: 100%; min-height: calc(48px * var(--ui)); align-items: center; gap: calc(10px * var(--ui)); padding: calc(5px * var(--ui)) calc(5px * var(--ui)) calc(5px * var(--ui)) calc(12px * var(--ui)); border: 0; border-radius: calc(11px * var(--ui)); background: #fff; color: var(--cs-ink); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(14, 34, 64, .1); }
  .cs-trigger > svg { flex: none; color: var(--cs-blue); }
  .cs-trigger__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; }
  .cs-trigger__t small { font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: #3A475A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-trigger__n { flex: none; min-width: max(44px, calc(44px * var(--ui))); height: calc(38px * var(--ui)); padding: 0 calc(11px * var(--ui)); border-radius: calc(9px * var(--ui)); background: var(--c-cta, #0D53A1); color: #fff; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
}
html.cs-locked { overflow: hidden; }
.cs-sheet { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: #F7FAFD; font-family: Inter, 'Inter Fallback', system-ui, sans-serif; color: #0E2240; }
.cs-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(56px * var(--ui)); padding: 0 calc(6px * var(--ui)) 0 calc(16px * var(--ui)); border-bottom: 1px solid rgba(14, 34, 64, .09); }
.cs-sheet__head h2 { margin: 0; font-family: var(--f-title, 'Caribasol Sans', Inter, sans-serif); font-size: calc(18px * var(--ui)); font-weight: 600; }
.cs-sheet__x { width: max(44px, calc(44px * var(--ui))); height: max(44px, calc(44px * var(--ui))); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #EEF4FA; color: #0E2240; cursor: pointer; }
.cs-sheet__body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(18px * var(--ui)) calc(16px * var(--ui)) calc(24px * var(--ui)); -webkit-overflow-scrolling: touch; }
.cs-sheet__foot { flex: none; display: flex; align-items: center; gap: calc(10px * var(--ui)); padding: calc(10px * var(--ui)) calc(16px * var(--ui)) calc(calc(12px * var(--ui)) + env(safe-area-inset-bottom)); background: #F7FAFD; box-shadow: 0 -1px 0 rgba(14, 34, 64, .09), 0 -12px 24px rgba(14, 34, 64, .06); }
.cs-sheet__clear { min-height: calc(48px * var(--ui)); min-width: max(44px, calc(44px * var(--ui))); padding: 0 calc(10px * var(--ui)); border: 0; background: transparent; font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: #0E2240; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-sheet__go { flex: 1; min-height: calc(52px * var(--ui)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; border-radius: calc(12px * var(--ui)); background: var(--c-cta, #0D53A1); color: #fff; font: inherit; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.cs-sheet__go small { font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: #f1f5fc; }
.cs-sheet__x:focus-visible, .cs-sheet__go:focus-visible, .cs-sheet__clear:focus-visible { outline: 2px solid #0D53A1; outline-offset: 2px; }
/* inside the sheet: one column, every target ≥ 44 px, text ≥ 16 px; More filters always open; the actions live in the fixed foot */
.cs-sheet .cs-body { --cs-h: calc(48px * var(--ui)); --th: max(44px, calc(44px * var(--ui))); --tv: calc(22px * var(--ui)); display: flex; flex-direction: column; gap: calc(22px * var(--ui)); color: #0E2240; }
.cs-sheet .cs-r1, .cs-sheet .cs-r2 { display: flex; flex-direction: column; align-items: stretch; gap: calc(22px * var(--ui)); }
.cs-sheet .cs-r3 { display: flex; flex-direction: column; align-items: stretch; gap: calc(22px * var(--ui)); }
.cs-sheet .cs-mode { width: 100%; }
.cs-sheet .cs-mode label { flex: 1 1 0; }
.cs-sheet .cs-mode span, .cs-sheet .cs-mode label:first-of-type span { width: 100%; justify-content: center; padding: 0 calc(6px * var(--ui)); }
.cs-sheet .cs-more-btn, .cs-sheet .cs-go, .cs-sheet .cs-more__done, .cs-sheet .cs-clear { display: none !important; }
.cs-sheet .cs-more { display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; }
.cs-sheet .cs-more__row { flex-direction: column; align-items: stretch; gap: calc(22px * var(--ui)); margin-top: calc(22px * var(--ui)); }
.cs-sheet .cs-ref { flex: none; }
.cs-sheet .cs-pop { position: static; width: auto; max-width: none; margin-top: calc(6px * var(--ui)); box-shadow: none; }
.cs-sheet .cs-loc__list { max-height: calc(300px * var(--ui)); }
.cs-sheet .cs-loc__list li[role=option] { min-height: max(44px, calc(44px * var(--ui))); }
.cs-sheet .cs-recents button { min-height: max(44px, calc(44px * var(--ui))); }
.cs-sheet .cs-q__go { height: calc(40px * var(--ui)); }
.cs-sheet .cs-chip span { min-height: max(44px, calc(44px * var(--ui))); padding: 0 calc(16px * var(--ui)); }
.cs-sheet .cs-seg { display: flex; width: 100%; box-sizing: border-box; }
.cs-sheet .cs-seg label { flex: 1 1 0; }
.cs-sheet .cs-seg span { width: 100%; min-width: 0; min-height: calc(40px * var(--ui)); padding: 0 calc(4px * var(--ui)); }
.cs-sheet .cs-seg label { min-height: max(44px, calc(44px * var(--ui))); align-items: center; }
.cs-sheet .cs-tok { height: calc(34px * var(--ui)); }
.cs-sheet .cs-tok button { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); }
.cs-sheet .cs-tok button { position: relative; } .cs-sheet .cs-tok button::after { content: ''; position: absolute; inset: calc((100% - var(--tap-hit)) / 2); }   /* hit area 44 px around the small × of a token (the field is 48 px tall) */
.cs-sheet .cs-btn2 { min-height: max(44px, calc(44px * var(--ui))); }
.cs-sheet .cs-money { flex: 0 1 calc(50% - calc(6px * var(--ui))); min-width: 0; }
.cs-sheet .cs-active { padding-top: calc(16px * var(--ui)); }
.cs-sheet .cs-achip { height: max(44px, calc(44px * var(--ui))); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); padding-left: calc(14px * var(--ui)); }
.cs-sheet .cs-achip button { width: max(44px, calc(44px * var(--ui))); height: max(44px, calc(44px * var(--ui))); }
.cs-sheet .cs-msg { margin: calc(-10px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
.cs-sheet .cs-active__hint { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
.cs-sheet .cs-own { margin-left: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
@media (prefers-reduced-motion: reduce) { .cs-mode__ink, .cs-mode span, .cs-chip span, .cs-seg span, .cs-chev, .cs-more-btn svg { transition: none !important; } }

/* ======================= OPTION A (giro 27, point 7): the one-row bar — js/search.js builds it from the SAME controls (TEMPORARY choice A · B, html[data-search]) ======================= */
/* A pill on white; five fields — a small label after a dot of the sun, the value in bold, a small arrow; each opens its drop-down (the original group moved inside it).
   The orange action on the right ("Show 64" when the bar is wide enough, "Search" otherwise). More filters = a quiet link under the bar. Phones (< 1024): the one field "Search properties". */
.csa { display: none; container: csa / inline-size; }
.cs--a-on > .csa { display: block; }
.cs--a-on > .cs-body > :not(.cs-more):not(.cs-msg) { display: none !important; }
.cs--a-on > .cs-body { gap: 0; }
.cs--a-on .cs-msg { margin: calc(8px * var(--ui)) 0 0; padding: calc(6px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); background: #fff; display: inline-block; max-width: 100%; box-sizing: border-box; }
/* 27.10.2026 (client): the bar is SQUARE, no rounded ends — bar, field hover, orange button and the phone field all read --csa-r (0 = square) */
:root { --csa-r: 0px; }
.csa-bar { position: relative; display: flex; align-items: stretch; min-height: calc(70px * var(--ui)); padding: calc(6px * var(--ui)); box-sizing: border-box; border-radius: var(--csa-r); background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 83, 161, .10), 0 2px 4px rgba(5, 26, 54, .10), 0 12px 32px rgba(5, 26, 54, .18); }
.csa-f { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.csa-f--mode { flex-grow: 1.15; } .csa-f--price { flex-grow: 1.2; } .csa-f--beds { flex-grow: .8; }
.csa-f + .csa-f::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--c-line, #D7E2EE); }
.csa-btn { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: calc(8px * var(--ui)); row-gap: calc(3px * var(--ui));
  padding: 0 calc(16px * var(--ui)) 0 calc(20px * var(--ui)); border: 0; border-radius: var(--csa-r); background: transparent; color: var(--c-ink, #0E2240); text-align: left; cursor: pointer; font-family: var(--f-text);
  transition: background-color .15s ease; }
.csa-f:first-child .csa-btn { padding-left: calc(24px * var(--ui)); }
@media (hover: hover) and (pointer: fine) { .csa-btn:hover { background: var(--c-blue-t2, #F3F8FD); } }
.csa-btn[aria-expanded=true] { background: var(--c-blue-t, #E8F1FB); }
.csa-btn:focus-visible { outline: 2px solid var(--c-blue, #0D53A1); outline-offset: -2px; }
.csa-l { grid-column: 1; display: flex; align-items: center; gap: calc(7px * var(--ui)); font-size: max(12px, calc(13px * var(--ui))); font-weight: 600; letter-spacing: .01em; color: var(--c-muted, #4A5B73); white-space: nowrap; }
/* 27.10.2026: an icon per field (js/search.js LI) instead of the orange dot */
.csa-ico { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); flex: none; fill: none; stroke: var(--c-blue, #0D53A1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.csa-v { grid-column: 1; font-size: max(15px, calc(17px * var(--ui))); font-weight: 600; line-height: 1.2; color: var(--c-ink, #0E2240); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.csa-chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--c-blue, #0D53A1); transition: transform .2s ease; }
.csa-btn[aria-expanded=true] .csa-chev { transform: rotate(180deg); }
.csa-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(9px * var(--ui)); min-width: calc(132px * var(--ui)); margin-left: calc(6px * var(--ui)); padding: 0 calc(26px * var(--ui));
  border: 0; border-radius: var(--csa-r); background: var(--c-cta, #0D53A1); color: #fff; font-family: var(--f-brand); font-size: calc(19px * var(--ui)); font-weight: 700; letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: background-color .15s ease; }
.csa-go:hover { background: var(--c-cta-h, #0A4589); }
.csa-go:focus-visible { outline: 2px solid var(--c-blue, #0D53A1); outline-offset: 3px; }
.csa-go__n { display: none; }
@container csa (min-width: 900px) { .csa-go:has(.csa-go__n:not(:empty)) .csa-go__s { display: none; } .csa-go__n:not(:empty) { display: inline; } }
/* the drop-downs: below the bar on Buy, above it in the Hero (js: .csa-pop--up); the moved group keeps its own controls, its label is read by screen readers only */
.csa-pop { position: absolute; left: 0; top: calc(100% + calc(12px * var(--ui))); z-index: 40; min-width: max(100%, calc(260px * var(--ui))); box-sizing: border-box; padding: calc(16px * var(--ui)) calc(16px * var(--ui)) calc(14px * var(--ui));
  border-radius: calc(16px * var(--ui)); background: #fff; color: var(--c-ink, #0E2240); box-shadow: 0 0 0 1px rgba(13, 83, 161, .10), 0 4px 8px rgba(5, 26, 54, .10), 0 18px 44px rgba(5, 26, 54, .22); }
.csa-pop--up { top: auto; bottom: calc(100% + calc(14px * var(--ui))); }
.csa-f--loc .csa-pop { width: calc(360px * var(--ui)); }
.csa-f--price .csa-pop { width: calc(400px * var(--ui)); right: 0; left: auto; }
.csa-f--type .csa-pop, .csa-f--beds .csa-pop, .csa-f--mode .csa-pop { width: max-content; }
.csa-pop :is(.cs-lbl, legend) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.csa-pop .cs-loc__pop { position: static; width: auto; max-width: none; margin-top: calc(8px * var(--ui)); padding: 0; border: 0; box-shadow: none; }
.csa-pop .cs-mode { height: calc(46px * var(--ui)); }
/* under the bar: More filters (a quiet link; on the Hero white on a dark key so it reads over any frame of the video) */
.csa-under { display: flex; justify-content: center; margin-top: calc(10px * var(--ui)); }
.csa-more { display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); min-height: var(--tap-hit, 44px); padding: 0 calc(16px * var(--ui)); border: 0; border-radius: calc(999px * var(--ui)); background: transparent;
  font-family: var(--f-text); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--c-blue, #0D53A1); cursor: pointer; }
.csa-more:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.csa-more[aria-expanded=true] .csa-chev { transform: rotate(180deg); }
.csa-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cs[data-cs-page=home] .csa-more { color: #fff; background: rgba(6, 36, 74, .62); min-height: calc(38px * var(--ui)); }   /* white on the dark key: at least 9:1 whatever the frame behind */
.cs[data-cs-page=home] .csa-more .cs-count { background: #fff; color: var(--c-blue, #0D53A1); }
/* More filters, Buy: a panel under the bar (Home: above it — the giro-25 rule of B) */
@media (min-width: 1024px) {
  .cs--a-on[data-cs-page=buy] .cs-more { position: absolute; left: 0; right: 0; top: calc(100% + calc(4px * var(--ui))); z-index: 35; padding: calc(16px * var(--ui)) calc(18px * var(--ui)) calc(14px * var(--ui)); border: 0; border-radius: calc(16px * var(--ui)); background: #fff;
    box-shadow: 0 0 0 1px rgba(13, 83, 161, .10), 0 4px 8px rgba(5, 26, 54, .10), 0 18px 44px rgba(5, 26, 54, .22); }
  .cs--a-on .cs-more .cs-more__row { margin-top: calc(10px * var(--ui)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .csa-btn { padding: 0 calc(10px * var(--ui)) 0 calc(14px * var(--ui)); } .csa-f:first-child .csa-btn { padding-left: calc(18px * var(--ui)); }
  .csa-v { font-size: max(15px, calc(15px * var(--ui))); }
  .csa-go { min-width: 0; padding: 0 calc(18px * var(--ui)); }
}
/* phones (< 1024), option A: the one field "Search properties" (the sheet of B behind it) */
@media (max-width: 1023px) {
  .cs--a .cs-trigger { min-height: calc(56px * var(--ui)); border-radius: var(--csa-r); padding-left: calc(18px * var(--ui)); box-shadow: 0 0 0 1px rgba(13, 83, 161, .10), 0 10px 26px rgba(5, 26, 54, .22); }
  .cs--a .cs-trigger__n { height: calc(46px * var(--ui)); border-radius: var(--csa-r); padding: 0 calc(16px * var(--ui)); }
  .cs--a .cs-trigger__t small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .csa-btn, .csa-chev, .csa-go { transition: none !important; } }

/* ======================= 27.10.2026 (Daniel): the drop-downs and More filters redesigned ======================= */
/* icons: one line set (js/search.js ICO) on the property types and the features */
.cs-ico { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); flex: none; fill: none; stroke: var(--cs-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-chip span { gap: calc(8px * var(--ui)); }
.cs-chip input:checked + span .cs-ico { stroke: currentColor; }
/* no option is ever disabled: one without matches is only dimmed (js/search.js mark) */
label.is-zero > span { opacity: .5; }
label.is-zero:hover > span { opacity: .8; }
.cs-loc__list li.is-zero { opacity: .5; }

@media (min-width: 1024px) {
  /* the drop-down cards: quieter corners than before, room inside, scroll when js caps their height */
  .csa-pop { border-radius: calc(12px * var(--ui)); padding: calc(10px * var(--ui)); overscroll-behavior: contain; }
  .csa-f--price .csa-pop { padding: calc(16px * var(--ui)); }
  .csa-f--loc .csa-pop { padding: calc(12px * var(--ui)); }

  /* Type: a list — icon · name · tick box (several at once) */
  .csa-pop .cs-types .cs-chips { display: grid; gap: 2px; min-width: calc(250px * var(--ui)); }
  .csa-pop .cs-types .cs-chip { display: flex; }
  .csa-pop .cs-types .cs-chip span { flex: 1; justify-content: flex-start; gap: calc(12px * var(--ui)); min-height: calc(48px * var(--ui)); padding: 0 calc(12px * var(--ui)); border: 0; border-radius: calc(9px * var(--ui));
    background: transparent; color: var(--cs-ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; }
  .csa-pop .cs-types .cs-chip span::after { content: ''; margin-left: auto; width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); box-sizing: border-box; border: 1.5px solid #A9B8CB; border-radius: calc(5px * var(--ui)); background: #fff no-repeat center / 70%; }
  .csa-pop .cs-types .cs-chip:hover span { background: #F3F6FA; border-color: transparent; }
  .csa-pop .cs-types .cs-chip input:checked + span { background: #EEF3F9; color: var(--cs-ink); font-weight: 700; }
  .csa-pop .cs-types .cs-chip input:checked + span .cs-ico { stroke: var(--cs-blue); }
  .csa-pop .cs-types .cs-chip input:checked + span::after { border-color: var(--cs-blue); background-color: var(--cs-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  /* Bedrooms (and Bathrooms in More filters): square-ish keys in a row, the chosen one blue */
  :is(.csa-pop, .cs--a-on .cs-more) .cs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(52px * var(--ui)), 1fr); gap: calc(6px * var(--ui)); padding: 0; border-radius: 0; background: none; box-shadow: none; }
  :is(.csa-pop, .cs--a-on .cs-more) .cs-seg span { min-width: 0; min-height: calc(46px * var(--ui)); padding: 0 calc(10px * var(--ui)); border: 1px solid #D7E2EE; border-radius: calc(9px * var(--ui)); background: #fff;
    font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--cs-ink); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
  :is(.csa-pop, .cs--a-on .cs-more) .cs-seg label > span { flex: 1; }   /* every key the same width */
  :is(.csa-pop, .cs--a-on .cs-more) .cs-seg label:hover span { border-color: #A3B2C6; }
  :is(.csa-pop, .cs--a-on .cs-more) .cs-seg input:checked + span { background: var(--cs-blue); border-color: var(--cs-blue); color: #fff; box-shadow: none; }

  /* More filters: titled groups, the features as a grid of tiles with their icons */
  .cs--a-on .cs-more { padding: calc(22px * var(--ui)) calc(24px * var(--ui)) calc(20px * var(--ui)) !important; border-radius: calc(14px * var(--ui)) !important; }
  .cs--a-on .cs-more :is(legend, .cs-lbl) { position: static; display: block; width: auto; height: auto; margin: 0 0 calc(12px * var(--ui)); padding: 0; clip: auto; font-size: max(12px, calc(12px * var(--ui))); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted, #4A5B73); }
  .cs--a-on .cs-feats .cs-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10px * var(--ui)); }
  .cs--a-on .cs-feats .cs-chip { display: flex; }
  .cs--a-on .cs-feats .cs-chip span { flex: 1; justify-content: flex-start; gap: calc(12px * var(--ui)); min-height: calc(56px * var(--ui)); padding: 0 calc(14px * var(--ui)); border: 1px solid #DCE5F0; border-radius: calc(11px * var(--ui));
    background: #fff; color: var(--cs-ink); font-size: max(15px, calc(15px * var(--ui))); font-weight: 500; line-height: 1.25; transition: background-color .15s ease, border-color .15s ease; }
  .cs--a-on .cs-feats .cs-chip:hover span { border-color: #A3B2C6; background: #FAFCFE; }
  .cs--a-on .cs-feats .cs-chip input:checked + span { border-color: var(--cs-blue); background: #EEF4FB; color: var(--cs-ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--cs-blue); }
  .cs--a-on .cs-feats .cs-chip input:checked + span .cs-ico { stroke: var(--cs-blue); }
  .cs--a-on .cs-more .cs-more__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: calc(20px * var(--ui)) calc(32px * var(--ui)); margin-top: calc(24px * var(--ui)) !important; padding-top: calc(20px * var(--ui)); border-top: 1px solid #E6EDF5; }
  .cs--a-on .cs-more .cs-ref .cs-field { height: calc(46px * var(--ui)); min-width: calc(220px * var(--ui)); border-radius: calc(9px * var(--ui)); }
  .cs--a-on .cs-more .cs-more__done { margin-left: auto; min-height: calc(44px * var(--ui)); padding: 0 calc(22px * var(--ui)); border: 0; border-radius: calc(9px * var(--ui)); background: var(--cs-blue); color: #fff; font-weight: 700; }
  /* the Home: above the search when there is no room below (js/search.js place: .cs-more--down = below) */
  .cs[data-cs-page=home] .cs-more.cs-more--down { top: calc(100% + calc(8px * var(--ui))); bottom: auto; }
  /* More filters on the Hero: white text AND a white arrow; one click opens, the next closes */
  .cs[data-cs-page=home] .csa-more .csa-chev { color: inherit; }
}
@media (max-width: 1199px) and (min-width: 1024px) { .cs--a-on .cs-feats .cs-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { :is(.csa-pop, .cs--a-on .cs-more) .cs-seg span, .cs--a-on .cs-feats .cs-chip span { transition: none; } }
/* Category (27.10.2026): a list like Type — icon · name · round mark — instead of tabs with a sliding underline */
@media (min-width: 1024px) {
  .csa-pop .cs-mode { display: grid; gap: 2px; height: auto; min-width: calc(260px * var(--ui)); border-bottom: 0; }
  .csa-pop .cs-mode__ink { display: none; }
  .csa-pop .cs-mode label { display: flex; }
  .csa-pop .cs-mode span, .csa-pop .cs-mode label:first-of-type span { flex: 1; gap: calc(12px * var(--ui)); min-height: calc(48px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(9px * var(--ui));
    color: var(--cs-ink); font-weight: 500; transition: background-color .15s ease; }
  .csa-pop .cs-mode span::after { content: ''; margin-left: auto; width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); box-sizing: border-box; border: 1.5px solid #A9B8CB; border-radius: 50%; background: #fff; }
  .csa-pop .cs-mode label:hover span { background: #F3F6FA; }
  .csa-pop .cs-mode input:checked + span { background: #EEF3F9; color: var(--cs-ink); font-weight: 700; }
  .csa-pop .cs-mode input:checked + span::after { border: 5px solid var(--cs-blue); }
}