@charset "UTF-8";
/* =========================================================================
   ACCESSIBILITY CSS  –  Ir David / "כרמים – עיר דוד במודיעין" (irdavid theme)
   Font resize + contrast-mode repairs for the "Ally" (pojo-accessibility)
   plugin, legacy toolbar mode (toolbar on the left).

   The theme is sized in PX (style.css + responsive.css; the only vw values
   belong to the cookie floater and the toolbar toggle, which this file does
   not resize). Every rule below therefore re-declares a real px value
   multiplied by a scale variable. Nothing uses em (compounds through
   nesting) or rem (drifts away from the design).

   -------------------------------------------------------------------------
   HOW THE PLUGIN WORKS
   -------------------------------------------------------------------------
   app.min.js keeps a counter starting at 120 (= normal) moving in steps of
   10 up to 200, and puts one class on <body>:

        pojo-a11y-resize-font-130 ... pojo-a11y-resize-font-200

   At 120 no class is left, which is how "A-" and Reset return to normal.
   For each step the plugin emits two rules:

     body...NN p:not(.pojo-a11y-toolbar-title), li:not(...), label, input,
     select, textarea, legend, code, pre, dd, dt, span, blockquote
                                              { font-size: NN%      !important }
     body...NN h1..h6, h1 span .. h6 span     { font-size: NN*1.33% !important }

   -------------------------------------------------------------------------
   WHY THIS FILE IS NEEDED  (measured on https://irdavid.co.il/, 1920px,
   plugin only, before this file existed)
   -------------------------------------------------------------------------
   1. The percentages COMPOUND. Every % resolves against the parent, so each
      nesting level multiplies. Measured at step 200:
        footer opening hours (span inside span)          18 -> 256px (14x)
        apartment cards: room count / price (h4, h6)     16 -> 170px (10.6x)
        mortgage answers, card labels, switch labels     16 -> 128px (8x)
        payment steps (li span / li p)                   20 -> 128px
        project cards (h3 / p)                      14 -> 85px, 12 -> 64px
        section subtitles (p.subtitle > span)            30 -> 128px
        header search label, checkbox labels             16 -> 64px
        cookie settings title / text              18 -> 85px, 16 -> 64px
      127 of the 215 visible text elements grew by more than 2x.

   2. SPECIFICITY. The plugin's paragraph selector
         body.pojo-a11y-resize-font-200 p:not(.pojo-a11y-toolbar-title)
      scores (0,2,2): :not() carries the specificity of its argument. A
      prefix of "html body[class*=...] p" scores only (0,1,3), so the plugin
      would win every bare p and li whatever the !important. This file
      therefore repeats the attribute selector:
         html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"]
      = (0,2,2), with a trailing tag (0,2,3) — one point above the plugin.
      Class-scoped pins land at (0,3,x) or higher and beat the generic
      inherit block of section 3 regardless of source order. The repetition
      is load-bearing, not a typo.

   3. Tags the plugin never lists stay FROZEN while everything around them
      grows. Measured frozen at step 200: the main menu (19px), both search
      buttons (22px), the map / chart links (20px), all eight building
      buttons on the price-list map (16px) and the cookie banner buttons
      (14px).

   4. Forcing every p/li/span to one percentage flattens the hierarchy: the
      38px section titles grew x1.33 while body text grew x4 to x16.

   -------------------------------------------------------------------------
   THE CURVES
   -------------------------------------------------------------------------
     --a11y-scale        text, headings, cards, lists           1.15 .. 1.60
     --a11y-scale-form   selects, buttons, checkboxes, switches 1.30 .. 1.75
     --a11y-scale-ui     map labels, cookie-modal close x       1.10 .. 1.35
     --a11y-scale-toolbar the accessibility toolbar (section 8)  1.04 .. 1.16

   Form controls start from the smallest sizes on the page, so they need a
   bigger first jump to read as "bigger". The toolbar grows least on purpose:
   it is a fixed overlay and must not cover the content just enlarged.

   -------------------------------------------------------------------------
   GUARANTEE
   -------------------------------------------------------------------------
   Every resize rule is gated behind body[class*="pojo-a11y-resize-font-"];
   every colour repair behind a pojo-a11y-light-background / -high-contrast /
   -negative-contrast class. With nothing selected, and again after Reset,
   this file changes zero computed styles (tested: every element and
   pseudo-element, with and without this file). Only :root and the body.pojo-*
   variable rules are ungated, and they declare nothing but custom
   properties — plus one styling rule that keeps the toolbar menu items free
   of underlines in every state (section 8).

   Structure:
     1.  Scale steps
     2.  Base pin
     3.  Neutralise the compounding percentages
     4.  Form controls  (4b checkboxes and switches, 4c cookie banner)
     5.  Theme font sizes x scale       (mirrors style.css)
     6.  Responsive font sizes x scale  (mirrors responsive.css)
     7.  Layout protection at large sizes
     8.  The accessibility toolbar
     9.  Colour modes: checkboxes, switches, search buttons, select arrows
     10. Colour modes: images, logos and branded bars kept
   ========================================================================= */


/* =========================================================================
   1. SCALE STEPS
   ========================================================================= */

:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-ui: 1;
    --a11y-scale-toolbar: 1;
}

body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-ui: 1.10; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-ui: 1.14; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-ui: 1.18; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-ui: 1.22; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-ui: 1.26; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-ui: 1.29; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-ui: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-ui: 1.35; }


/* =========================================================================
   2. BASE PIN
   Measured baseline: body = 16px. A calc(), never a flat px, so everything
   that legitimately inherits from <body> (e.g. the "העיר והשכונה" text,
   which is bare text inside .main-city-content) keeps moving with it.
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
    overflow-wrap: break-word;
}


/* =========================================================================
   3. NEUTRALISE THE COMPOUNDING PERCENTAGES
   Tags that carry no size of their own go back to inheriting, so a size is
   applied once per element instead of once per nesting level. Tags that DO
   have a theme size (p, span, h2..h6, inputs) are pinned in sections 4-6.
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] li,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] label,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] legend,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] code,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] pre,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] dd,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] dt,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] blockquote,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] textarea,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] strong,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] em,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] b,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] i {
    font-size: inherit !important;
}

/* relative sizes already follow the parent; they only need protection from
   the plugin's !important declarations */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] small,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] sub,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] sup {
    font-size: 0.875em !important;
}


/* =========================================================================
   4. FORM CONTROLS  (--a11y-scale-form)
   Includes the links and <a>/<div> "buttons" the plugin never touches, so
   both search bars, the map links and the accordions grow with the page.
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] input,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] select {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] :is(.btn, .accordion-button, .nav-link, .form-control, .form-select, .dropdown-item) {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}

/* --- the two search bars (header + price list "home filter") --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-form label {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-form select {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
/* the first, disabled option is each select's visible placeholder
   (style.css: 18px !important) */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] select option {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] select option:disabled {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .chkbox label {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}

/* --- building dropdown + the two filter switches above the apartments --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .home_info_wrapper .top_filter .dropdpwn select {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .checkbox_wrapper .switch span {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
}


/* =========================================================================
   4b. CHECKBOXES AND SWITCHES
   Header: #chkbxinputone is a 0x0 input; the visible square is its ::after
   (18px, 1px white border) and the tick its ::before glyph (16px). Square
   and glyph grow together on the form curve or the tick spills out.
   Price list: #home_chkbxinput is a native 13px checkbox (no theme styling);
   it grows on the same curve so it stays in proportion to its label.
   The two switches are 48x24 tracks with an 18x19 knob (style.css).
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] #chkbxinputone::after {
    width: calc(18px * var(--a11y-scale-form)) !important;
    width: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
    height: calc(18px * var(--a11y-scale-form)) !important;
    height: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] input[type="checkbox"]:checked::before {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] #home_chkbxinput {
    width: calc(13px * var(--a11y-scale-form)) !important;
    width: round(calc(13px * var(--a11y-scale-form)), 1px) !important;
    height: calc(13px * var(--a11y-scale-form)) !important;
    height: round(calc(13px * var(--a11y-scale-form)), 1px) !important;
    flex-shrink: 0 !important;
}
/* the switch: track, knob and the knob's travel on the same curve */
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper .slider {
    width: calc(48px * var(--a11y-scale-form)) !important;
    height: calc(24px * var(--a11y-scale-form)) !important;
    flex-shrink: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper .slider::before {
    width: calc(19px * var(--a11y-scale-form)) !important;
    height: calc(18px * var(--a11y-scale-form)) !important;
    bottom: calc(3px * var(--a11y-scale-form)) !important;
    right: calc(4px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper input:checked + .slider::before {
    right: calc(100% - 23px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper .switch {
    align-items: center !important;
}


/* =========================================================================
   4c. COOKIE BANNER AND SETTINGS MODAL  (cookie-consent.js)
   Both roots, .cc-root (banner) and .cc-modal-wrap (settings), are direct
   children of <body>, so the generic rules and the theme's own h2 / p pins
   would reach them. Measured at step 200 with the plugin only: modal title
   18 -> 85px, body text 16 -> 64px, "תמיד פעיל" badge 11 -> 64px, while the
   banner buttons stayed frozen at 14px.

   Rest sizes measured on this site: banner 14px (buttons 14px) with the
   theme's .cc-title / .cc-body at 16px; modal 16px, title h2 18px (with the
   theme's 50px h2 line-height), body p 16px, category name 16px,
   description 13px, badge 11px, cookie list 12px, close × 24px, buttons
   16px. Generic inherit first, then one calc() pin per element. Titles,
   body and buttons on the form curve; small print on the text curve; the
   close × on the ui curve.
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(li, span, label, a, div) {
    font-size: inherit !important;
}

/* banner */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-root .cc-title {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-root .cc-body {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-root .cc-btn {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

/* settings modal */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
/* the theme's global h2 (44px / 50px) must not reach the modal title */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale-ui)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cat-name {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list :is(summary, th, td) {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-btn {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}


/* =========================================================================
   5. THEME FONT SIZES x SCALE
   Mirrors assets/css/style.css, same selectors and same order, so the
   cascade between these rules stays identical to the original design.
   px line-heights are restated as ratios so they grow with the text.
   ========================================================================= */

/* --- header + hero --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .hero.img-note {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}

/* --- global typography --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] h2 {
    font-size: calc(44px * var(--a11y-scale)) !important;
    line-height: 1.136 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .sub-heading {
    font-size: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .heading-gradient p {
    font-size: calc(38px * var(--a11y-scale)) !important;
    line-height: 1.263 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .heading-gradient .subtitle span {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.267 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] p {
    font-size: calc(16px * var(--a11y-scale)) !important;
}

/* --- developer intro (section 1) --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .section-one-text p {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .lower-section-one-text p {
    font-size: calc(39px * var(--a11y-scale)) !important;
    line-height: 1.128 !important;
}

/* --- project cards --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .project-box h3 {
    font-size: calc(14px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .project-box p {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .notice-gallery {
    font-size: calc(16px * var(--a11y-scale)) !important;
}

/* --- city and neighbourhood --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .city-neighbour-content .main-city-content p {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}

/* --- maps and charts --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .map-chart-wrap h2 {
    font-size: calc(44px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .map-chart-wrap a {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
}

/* --- project gallery (section 4) --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .thumbnail-gallery-content h2 {
    font-size: calc(54px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .thumbnail-gallery-content > p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.75 !important;
}

/* --- purchase process (FAQ accordion) --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button span {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.444 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button p {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.444 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-item {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-body p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs-bottom p {
    font-size: calc(16px * var(--a11y-scale)) !important;
}

/* --- payment schedule --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .payemtn-lower li span {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .payemtn-lower li p {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .spread-payment-content h2 {
    font-size: calc(42px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .payemtn-lower li {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}

/* --- mortgage --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .accordian-mortgage .accordion-button p {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.444 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortga-list-style p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortgage h2 {
    font-size: calc(52px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortgage-notice p {
    font-size: calc(13px * var(--a11y-scale)) !important;
}

/* --- tables (page content; the AJAX price table is no longer on the home
   page, the rules are kept so any table in page content grows too) --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] table {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] table tbody > tr > th,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] table thead > tr > th {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] table td {
    font-size: calc(15px * var(--a11y-scale)) !important;
}

/* --- documents, footer, menu --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .files-downlaod-sec h2 {
    font-size: calc(46px * var(--a11y-scale)) !important;
    line-height: 1.087 !important;
}
/* the theme's global span size lives in ".fils-for-downlaod a, span" */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .fils-for-downlaod a,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] span {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .fils-for-downlaod span {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .footer-social a,
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .footer-social span {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .footer-social h2 {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main-menu li a {
    font-size: calc(19px * var(--a11y-scale)) !important;
}

/* --- price list: plot map ---
   The map is an aerial photo with labels pinned to fixed pixel positions
   over it (plots 109-111, buildings 1-8). Grown on the text curve the
   labels ran into each other and into the plot names (measured at 1366px,
   step 200: 11 overlapping pairs). They are anchors on a picture, not
   running text, and the same choice (plot + building) is offered by the
   building dropdown right under the map, which grows on the form curve. So
   the map labels grow on the ui curve, like the toolbar. */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .top_lot {
    font-size: calc(14px * var(--a11y-scale-ui)) !important;
    line-height: 2 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box {
    font-size: calc(16px * var(--a11y-scale-ui)) !important;
    line-height: 1.25 !important;
}
/* the number badge is a fixed 30x30 box with a 30px line-height */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box span {
    font-size: calc(16px * var(--a11y-scale-ui)) !important;
    width: calc(30px * var(--a11y-scale-ui)) !important;
    height: calc(30px * var(--a11y-scale-ui)) !important;
    line-height: calc(30px * var(--a11y-scale-ui)) !important;
}

/* --- price list: apartment cards --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_title .floor_name {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.778 !important;
    min-width: calc(113px * var(--a11y-scale)) !important;
}
/* apartment number badge: a fixed 55px square with a 55px line-height */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .top_text span {
    font-size: calc(20px * var(--a11y-scale)) !important;
    width: calc(55px * var(--a11y-scale)) !important;
    line-height: calc(55px * var(--a11y-scale)) !important;
    flex-shrink: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .top_text h6 {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type.price h4 {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type.price h4::first-letter {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type span {
    font-size: calc(16px * var(--a11y-scale)) !important;
    width: calc(48px * var(--a11y-scale)) !important;
    flex-shrink: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type h4 {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .target_price_label {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .free_marketing {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .sold_label {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(38px * var(--a11y-scale)) !important;
}

/* --- apartment popup --- */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .left_img h2 {
    font-size: calc(110px * var(--a11y-scale)) !important;
    width: calc(150px * var(--a11y-scale)) !important;
    line-height: calc(150px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info h4 {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info h4 span {
    font-size: 50% !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box h6 {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box span {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .download_section h6 {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .download_section .download_wrapper a.btn {
    line-height: 2.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .download_section .download_wrapper a.btn span {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .share_icon span {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
    line-height: 2 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .social_icon span {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 2.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_price {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_price span {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_price strong {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_price strong::first-letter {
    font-size: calc(20px * var(--a11y-scale)) !important;
}


/* =========================================================================
   6. RESPONSIVE FONT SIZES x SCALE
   Mirrors assets/css/responsive.css, in that file's own source order
   (1600 -> 767 -> 400, then the apartment-section blocks 1023 -> 767 ->
   359). Without these the desktop rules above, which carry !important,
   would also apply on phones and break their typography.
   ========================================================================= */

@media (max-width: 1600px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main-menu li a {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
}

@media (max-width: 767px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .searchbox .hed-serch-lable {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .section-one-text p {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .heading-gradient p {
        font-size: calc(28px * var(--a11y-scale)) !important;
        line-height: 1.214 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .heading-gradient .subtitle span {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: 1.231 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .lower-section-one-text p {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: 1.364 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .nav-tabs .nav-link {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .city-neighbour-content h2 {
        font-size: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .city-neighbour-content .main-city-content p {
        font-size: calc(17px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .section-two-notice {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .notice-gallery {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .thumbnail-gallery-content h2 {
        font-size: calc(50px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .thumbnail-gallery-content h3 {
        font-size: calc(40px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs-bottom p {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .payemtn-lower li span {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortgage h2 {
        font-size: calc(40px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button span {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-body p {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .spread-payment-content h2 {
        font-size: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .sub-heading {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .payemtn-lower li p {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.25 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .project-box h3 {
        font-size: calc(11px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .project-box p {
        font-size: calc(10px * var(--a11y-scale)) !important;
    }
    /* responsive.css gives these 18px questions a 20px line-height (1.11);
       enlarged and wrapped, the lines would touch, so the ratio is 1.2 as
       in section 7's accordion rule */
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button p {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .accordian-mortgage .accordion-button p {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortga-list-style p {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .mortgage-notice p {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] table tbody > tr > th {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .fils-for-downlaod span {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .hero.img-note {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
}

@media (max-width: 400px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button p {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .chkbox label {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .searchbox .hed-serch-lable {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .lower-section-one-text p {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.444 !important;
    }
}

/* --- apartment section (responsive.css "New apartment section design") --- */
@media only screen and (max-width: 1023px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .left_img h2 {
        font-size: calc(48px * var(--a11y-scale)) !important;
        width: calc(48px * var(--a11y-scale)) !important;
        line-height: calc(48px * var(--a11y-scale)) !important;
    }
}

@media only screen and (max-width: 767px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .home_info_wrapper .top_filter .dropdpwn select {
        font-size: calc(20px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .top_lot {
        font-size: calc(12px * var(--a11y-scale-ui)) !important;
        line-height: 2.167 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .checkbox_wrapper .switch span {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .top_text h6 {
        font-size: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .top_text span {
        width: calc(56px * var(--a11y-scale)) !important;
        line-height: calc(56px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type span {
        font-size: calc(20px * var(--a11y-scale)) !important;
        width: calc(50px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .bottom_info .type h4 {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box .target_price_label {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box {
        font-size: calc(12px * var(--a11y-scale-ui)) !important;
        line-height: 1.333 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box span {
        font-size: calc(12px * var(--a11y-scale-ui)) !important;
        width: calc(24px * var(--a11y-scale-ui)) !important;
        height: calc(24px * var(--a11y-scale-ui)) !important;
        line-height: calc(24px * var(--a11y-scale-ui)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info h4 {
        font-size: calc(19px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box h6 {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box span {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
}

@media only screen and (max-width: 359px) {

    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .download_section .download_wrapper a.btn {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box h6 {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box span {
        font-size: calc(13px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info h4 {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .popup_outer .right_info .share_icon span {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
}


/* =========================================================================
   7. LAYOUT PROTECTION AT LARGE SIZES
   Only active while a resize class is on the body. Fixed heights, widths
   and clipping containers are released so enlarged text stays readable.
   ========================================================================= */

/* rows of controls that must be allowed to wrap */
html body[class*="pojo-a11y-resize-font-"] .top-filter-wrap,
html body[class*="pojo-a11y-resize-font-"] .main-menu-ul,
html body[class*="pojo-a11y-resize-font-"] .footer-social ul,
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper {
    flex-wrap: wrap !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox_wrapper {
    row-gap: 10px !important;
}

/* --- phone menu ---
   On phones the open menu is a fixed panel at top:89px with height:100%
   and overflow:hidden, so its last 89px were always below the screen.
   Enlarged, the eleven items no longer fit and the last ones could not be
   reached at all. The panel now ends at the bottom of the screen and
   scrolls. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .main-navbar {
        height: calc(100% - 89px) !important;
        overflow-y: auto !important;
    }
}

/* --- search bars: buttons as tall as the selects ---
   At rest the selects are 51px (16px text, line-height 1.5, 14 + 13px
   padding, no border) and the green buttons 51px (22px text, 9px padding,
   lifted 4px to line up). Enlarged, the buttons grew with their own 22px
   text and ended taller than the fields beside them (measured 68 vs 59px on
   a 390px phone at step 200). Both now share one height built from the
   select's own parts: 16px x scale x 1.5 + 27px. Phones use their own select
   padding (7 + 10px, 41px at rest), so there the sum is + 17px. */
html body[class*="pojo-a11y-resize-font-"] .price-form select {
    height: calc(16px * var(--a11y-scale-form) * 1.5 + 27px) !important;
    line-height: 1.5 !important;
    padding-top: 14px !important;
    padding-bottom: 13px !important;
    box-sizing: border-box !important;
}
html body[class*="pojo-a11y-resize-font-"] .price-form :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
    height: calc(16px * var(--a11y-scale-form) * 1.5 + 27px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .price-form select {
        height: calc(16px * var(--a11y-scale-form) * 1.5 + 17px) !important;
        padding-top: 7px !important;
        padding-bottom: 10px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .price-form :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
        height: calc(16px * var(--a11y-scale-form) * 1.5 + 17px) !important;
    }
}
/* the building dropdown is a fixed 45px box around 22px text: clipped at
   step 160 (measured 53px of content in 43px) */
html body[class*="pojo-a11y-resize-font-"] .home_info_wrapper .top_filter .dropdpwn select {
    height: auto !important;
    min-height: 45px !important;
    line-height: 1.5 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* --- header search bar: layout ---
   Desktop: label, both selects and the button sit on one line; the
   availability checkbox is absolutely placed 29px under the bar (right:
   134px), so it reserves no space. Enlarged, the selects grow down into it.
   Phones: the checkbox has a 48% column; at step 200 "הצג רק דירות פנויות"
   broke onto three lines there (measured 390px).

   While a size is selected the bar is a wrapping flex row with a real gap
   between its lines, and the checkbox takes its own full line at the end,
   in the flow, so the header grows to hold it. On desktop (1251px and up)
   it is a two-row grid instead: label, selects and button on row 1, the
   checkbox on row 2 under the first select, where the design puts it.

   The bar needs 733px at step 200 and its col-md-7 column gives 711px on a
   1366px screen (measured: the button wrapped onto a line of its own). From
   768px up the header's col-md-1 is an empty hamburger slot (the hamburger
   exists on phones only), so while a size is selected the filter column
   takes that space too: ~800px at 1251-1366px. */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top .mobile-order-wrap > .morder1 {
        display: none !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top .mobile-order-wrap > .morder3 {
        flex: 1 1 0 !important;
        width: auto !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    row-gap: calc(10px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > * {
    margin-top: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .chkbox {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    order: 10;
    flex: 0 0 100% !important;
    margin: 0 !important;
}
/* tablets: the bar already wraps at rest; packed to the right so the
   label, the wrapped lines and the checkbox line share one edge */
@media (min-width: 768px) and (max-width: 1250px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox {
        justify-content: flex-start !important;
    }
}
@media (min-width: 1251px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox {
        display: grid !important;
        grid-template-columns: repeat(4, auto) !important;
        justify-content: end !important;
        column-gap: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > label {
        grid-column: 1;
        grid-row: 1;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > select:nth-of-type(1) {
        grid-column: 2;
        grid-row: 1;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > select:nth-of-type(2) {
        grid-column: 3;
        grid-row: 1;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > .ads-serch-btn-top {
        grid-column: 4;
        grid-row: 1;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox > .chkbox {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: start;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox {
        justify-content: center !important;
    }
    /* the label keeps its own full line above the selects */
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .hed-serch-lable {
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-bottom: calc(10px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .ads-serch-btn-top {
        margin-right: 0 !important;
    }
}

/* --- price-list search bar ("home filter") ---
   Two selects and the button are inline content centred in the wrapper;
   enlarged they wrap, and without a gap the second line touched the first.
   The checkbox below keeps its own line. */
html body[class*="pojo-a11y-resize-font-"] .price-form.home-filter-form .searchbox-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    row-gap: calc(10px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .price-form.home-filter-form .searchbox-inner > * {
    margin-top: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .price-form.home-filter-form .searchbox .chkbox {
    align-items: center !important;
    gap: 8px !important;
    margin-top: calc(14px * var(--a11y-scale)) !important;
}

/* --- header checkbox: square, tick and label in one row ---
   At rest the square (::after) hangs off the right edge of .chkbox
   (right:-1px, bottom:0 / 12px on phones), the tick (::before) is placed with
   separate hand-tuned offsets (top:1px / 25px / -8px, all !important) and on
   phones the label is pulled up with margin-top:-22px. That only lines up
   while the label is one line of its rest size: measured at step 200 on a
   390px phone, the label wrapped onto three lines and the square sat 25px
   below the centre of the text, 14px away from it (rest: 0.3px, 7px).

   While a size is selected the input itself becomes the anchor: it is given
   the square's size and sits in a flex row with its label, the square
   (::after) covers it exactly, and the tick (::before) takes the same box
   and is centred in it. Square and tick are then centred on the text at
   every width, with an 8px gap. appearance:none keeps the browser from
   drawing its own box under the square. Firefox uses the input itself as the
   square (style.css, @supports (-moz-appearance: none)); the same box works
   there. */
html body[class*="pojo-a11y-resize-font-"] .header-top .chkbox {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 8px !important;
    padding-right: 0 !important;
    text-align: start !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top .chkbox {
        justify-content: center !important;
    }
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .header-top .chkbox label {
    margin: 0 !important;
    padding: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] #chkbxinputone {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    /* Firefox places this input at right:-1px / bottom:0 (12px on phones);
       as a relative flex item those offsets would only shift it */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: calc(18px * var(--a11y-scale-form)) !important;
    width: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
    height: calc(18px * var(--a11y-scale-form)) !important;
    height: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] #chkbxinputone::after {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] #chkbxinputone:checked::before {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(18px * var(--a11y-scale-form)) !important;
    width: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
    height: calc(18px * var(--a11y-scale-form)) !important;
    height: round(calc(18px * var(--a11y-scale-form)), 1px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- accordion bars (purchase process + mortgage) ---
   At rest the bars take their height from the 33px chevron plus padding:
   purchase-process 47px (7px padding; 45px with 6px on phones), mortgage
   45px (6px). Section 5 restates the text line-heights as ratios so wrapped
   lines do not overlap; the bars then grew slower than their text and the
   text touched the edges. The designed height comes back as a min-height
   that grows with the text, with a padding that grows too, and the text
   stays centred as in the design. */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-header .accordion-button {
    min-height: calc(47px * var(--a11y-scale)) !important;
    padding-top: calc(7px * var(--a11y-scale)) !important;
    padding-bottom: calc(7px * var(--a11y-scale)) !important;
    align-items: center !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .accordian-mortgage .accordion-header .accordion-button {
    min-height: calc(45px * var(--a11y-scale)) !important;
    padding-top: calc(6px * var(--a11y-scale)) !important;
    padding-bottom: calc(6px * var(--a11y-scale)) !important;
    align-items: center !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button :is(span, p),
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .accordian-mortgage .accordion-button p {
    line-height: 1.2 !important;
}

/* --- purchase-process bars: the light "שלב N" wedge ---
   The wedge is not a box: it is the first stop of the bar's background,
   linear-gradient(297deg, #f0f3eb 21%, green 0%, green 70%) — 23% / 77% on
   phones. A percentage of the bar, so it stayed the same width while
   "שלב N" grew and the label ran onto the green (black text on dark green).

   The label is kept on one line and the wedge's stop is widened by the
   label's own growth: its text width at rest (49px desktop, 55px phone)
   times (scale - 1), projected onto the 297deg gradient line (x 0.891), plus
   an allowance for the bar getting taller. The light margin left of
   "שלב N" therefore stays what it is in the default design (measured 26px
   at mid-height on desktop). The gap after the label grows too. */
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-header .accordion-button {
    background-image: linear-gradient(297deg, #f0f3eb calc(21% + 56px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 70%) !important;
}
html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button span {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: calc(34px * var(--a11y-scale)) !important;
}
/* tablets (768-1023px): the bar is narrower and the design already leaves
   only 0-3px of light margin beside "שלב N" (measured 820px); at step 200
   the label ran 10px onto the green with the desktop allowance */
@media (min-width: 768px) and (max-width: 1023px) {
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-header .accordion-button {
        background-image: linear-gradient(297deg, #f0f3eb calc(21% + 80px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 70%) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-header .accordion-button {
        min-height: calc(45px * var(--a11y-scale)) !important;
        padding-top: calc(6px * var(--a11y-scale)) !important;
        padding-bottom: calc(6px * var(--a11y-scale)) !important;
        background-image: linear-gradient(297deg, #f0f3eb calc(23% + 86px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 77%) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .faqs .accordion-button span {
        margin-left: calc(28px * var(--a11y-scale)) !important;
    }
}

/* --- price-list map labels ---
   The plot names ("מגרש 109") are capped at max-width:77px; enlarged they
   broke onto two lines (78px tall at step 200) and hung down into the
   building buttons. They now fit their text on one line, still centred by
   the theme's left/right:0 + margin:auto. In the two small plots the two
   building buttons are pinned at left:-40px and right:-25px, which leaves
   195px for both; at step 200 they needed 202px and overlapped. The inner
   spacing (right padding and the gap before the number, 8px each) is
   trimmed to 4px while a size is selected. */
html body[class*="pojo-a11y-resize-font-"] .main_box_border .plan .top_lot {
    max-width: max-content !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box {
    padding-right: 4px !important;
}
html body[class*="pojo-a11y-resize-font-"] .main_box_border .plan .building_box span {
    margin-right: 4px !important;
}

/* --- apartment cards ---
   The status label ("נמכר!", "מחיר מטרה!", "שיווק חופשי") is absolutely
   placed at the bottom of each card, 38-40px tall, over a min-height of
   220px. The card content above it grows with the text, the label's height
   too, so the card reserves the label's scaled height below its content. */
html body[class*="pojo-a11y-resize-font-"] .flat_box .floor_boxs .box {
    min-height: calc(220px * var(--a11y-scale)) !important;
    padding-bottom: calc(40px * var(--a11y-scale)) !important;
}

/* --- download list: full file names ---
   style.css clamps each name to two lines (-webkit-line-clamp: 2, overflow
   hidden). Enlarged, the names needed three to eight lines at step 200 on a
   phone and most of each name was cut. While a size is selected the whole
   name is shown. */
html body[class*="pojo-a11y-resize-font-"] .fils-for-downlaod li > a > span {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: none !important;
    overflow: visible !important;
}

/* --- apartment popup ---
   The popup is a fixed box centred with top:50% / translateY(-50%) and a
   min-height of 580px, inside a fixed full-screen layer. Enlarged, its
   content is taller than the screen and the top and bottom were out of
   reach. It now fits the screen and scrolls inside. */
html body[class*="pojo-a11y-resize-font-"] .popup_outer .popup_inner {
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
}
/* The popup is a fixed 1024px box (max-width, centred with left/right:0 +
   margin:auto). Enlarged, its text wrapped word by word inside that width:
   the title broke into "דירה / 1", "קומת / קרקע", "בניין / 1", "מגרש / 111"
   and the labels ("מספר / חדרים:") onto two lines each. The box now grows on
   the same curve as its text, up to 80% of the screen (requested) but
   never narrower than its default width (1024px, or the screen minus 20px
   on tablets and phones, the theme's own rule), and each part of the title stays on one line;
   the parts wrap as whole items when the box is narrow (phones). */
html body[class*="pojo-a11y-resize-font-"] .popup_outer .popup_inner {
    max-width: min(calc(1024px * var(--a11y-scale)), max(80%, min(1024px, calc(100% - 20px)))) !important;
}
/* the purple panel's building image (bg_img.png, 312px wide, drawn at its
   natural size at the bottom of a 307px panel) stayed 312px wide while the
   panel widened with the popup, leaving purple strips on both sides
   (reported). While a size is selected it is scaled to the panel's width.
   Tablets and phones use bg_img_mob.png, already at 100% (responsive.css).
   The colour-mode rule in section 10 reads the same size from
   --a11y-left-img-size. */
html body[class*="pojo-a11y-resize-font-"] {
    --a11y-left-img-size: 100% auto;
}
@media (min-width: 1024px) {
    html body[class*="pojo-a11y-resize-font-"] .popup_outer .left_img {
        background-size: 100% auto !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] .popup_outer .right_info h4 {
    flex-wrap: wrap !important;
    white-space: nowrap !important;
    row-gap: 4px !important;
}

/* --- footer e-mail ---
   An address has no spaces, so it cannot wrap and would push a phone into a
   horizontal scroll once enlarged. */
html body[class*="pojo-a11y-resize-font-"] .footer-social ul,
html body[class*="pojo-a11y-resize-font-"] .footer-social li {
    min-width: 0 !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-social a[href^="mailto:"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}


/* =========================================================================
   8. THE ACCESSIBILITY TOOLBAR
   The panel scales with the site so the person who enlarged the text can
   read the menu they are using — on its own flat curve (--a11y-scale-toolbar,
   x1.04 .. x1.16), so it stays smaller than the page behind it and inside
   the window. Measured at step 200 with the
   plugin only: every label went 16 -> 25.6px and wrapped inside the fixed
   180px panel (items 39 -> 78px tall).

   The plugin pins #pojo-a11y-toolbar to 16px !important and sizes the
   items as a percentage of that. Two theme rules reach inside the widget:
       p    { font-size: 16px }  -> the "כלי נגישות" title
       span { font-size: 16px }  -> every icon and label wrapper
                                    (from ".fils-for-downlaod a, span")
   so both are restated here on the ui curve. The round toggle button is
   sized in vw by style.css and is left alone.

   ONE UNGATED RULE: the menu items never get text-decoration (light mode
   and "links underline" underline them). It is a styling choice for the
   toolbar itself and applies with nothing selected too.
   ========================================================================= */

html body[class*="pojo-a11y-resize-font-"] {
    --a11y-toolbar-width: min(calc(180px * var(--a11y-scale-toolbar)), 90vw);
}

/* --- the toolbar's own, gentler curve ---
   On the ui curve the panel grew x1.35 (to ~560px) and style.css places it
   at top:12vw, so on a laptop screen (1366px wide: top 164px) it ran past
   the bottom of the window at the larger steps and "Reset", the last item,
   could not be reached (reported). The panel grows on its own, flatter
   curve (x1.04 .. x1.16): readable, but it stays within the screen. As a
   safety net for short windows it is also capped at the height left below
   its top edge and scrolls inside. */
body.pojo-a11y-resize-font-130 { --a11y-scale-toolbar: 1.04; }
body.pojo-a11y-resize-font-140 { --a11y-scale-toolbar: 1.06; }
body.pojo-a11y-resize-font-150 { --a11y-scale-toolbar: 1.08; }
body.pojo-a11y-resize-font-160 { --a11y-scale-toolbar: 1.10; }
body.pojo-a11y-resize-font-170 { --a11y-scale-toolbar: 1.12; }
body.pojo-a11y-resize-font-180 { --a11y-scale-toolbar: 1.13; }
body.pojo-a11y-resize-font-190 { --a11y-scale-toolbar: 1.15; }
body.pojo-a11y-resize-font-200 { --a11y-scale-toolbar: 1.16; }
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    max-height: calc(100vh - 12vw - 10px) !important;
    overflow-y: auto !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
        max-height: calc(100vh - 81vw - 10px) !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar {
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar span {
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar p.pojo-a11y-toolbar-title {
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar svg {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    font-size: 80% !important;
    /* the plugin's own line-height (1): a taller one added ~7px per item
       and pushed "Reset" below short windows */
    line-height: 1 !important;
}
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a * {
    text-decoration: none !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-skip-content {
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}

/* panel box and off-screen offsets follow the same curve: the panel is a
   fixed 180px box parked at left:-180px with the toggle at left:180px */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    width: var(--a11y-toolbar-width) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    left: calc(-1 * var(--a11y-toolbar-width)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left.pojo-a11y-toolbar-open {
    left: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    left: var(--a11y-toolbar-width) !important;
}
/* same for the right-hand position, in case the plugin setting is changed */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    right: calc(-1 * var(--a11y-toolbar-width)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open {
    right: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    right: var(--a11y-toolbar-width) !important;
}

/* =========================================================================
   9. COLOUR MODES: CHECKBOXES, SWITCHES, SEARCH BUTTONS, SELECT ARROWS
   Gated on the colour classes only; nothing changes in the default view.

   How the plugin paints (from its style.min.css):
     light background   body.pojo-a11y-light-background *:not(#pojo-a11y-
                        toolbar):not(.pojo-a11y-toolbar-link)
                        { background:#fff; color:#000 }        (1,2,1)
     negative contrast  body.pojo-a11y-negative-contrast *:not(#pojo-a11y-
                        toolbar) { background:#000; color:#fff } (1,1,1),
                        links / headings yellow
     high contrast      per tag: body.pojo-a11y-high-contrast div, p, a ...
                        { background:#000; color:#fff }     (0,1,2), and
                        img { background:#808080 }
   All three use the background SHORTHAND, so every background image and
   gradient goes. The rules below reuse the plugin's own prefix with * (so
   they outweigh it), or html + an id for sections that are direct children
   of <body> (#section8, #section11), where the * prefix cannot match.
   ========================================================================= */

/* --- page background ---
   High contrast left <body> white (measured rgb(255,255,255)), which showed
   as white bands between the black sections. */
html body.pojo-a11y-high-contrast {
    background: #000 !important;
}

/* --- header checkbox ---
   The square (::after) has a hard-coded white 1px border and the tick
   (::before) is white: on light mode's white page both vanished; among
   negative contrast's yellow text they stayed white. Square and tick take
   the colour of each mode's text. */
body.pojo-a11y-light-background #chkbxinputone::after {
    border-color: #000 !important;
}
body.pojo-a11y-light-background #chkbxinputone:checked::before {
    color: #000 !important;
}
body.pojo-a11y-negative-contrast #chkbxinputone::after {
    border-color: #ff0 !important;
}
body.pojo-a11y-negative-contrast #chkbxinputone:checked::before {
    color: #ff0 !important;
}

/* --- the same checkbox in Firefox ---
   Firefox draws no pseudo-elements on the input, so style.css makes the
   input itself the square there (1px white border, white SVG tick), gated on
   @supports (-moz-appearance: none). While a size is selected section 7
   already sizes and places that input. In the colour modes the plugin's
   reset ("background: … !important") would wipe the tick image and leave a
   white border on white, so border and tick take the mode's text colour,
   with the plugin's own prefix to win. */
@supports (-moz-appearance: none) {
    body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone {
        border: 1px solid #000 !important;
        background: transparent !important;
    }
    body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone:checked {
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 80% !important;
    }
    body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone {
        border: 1px solid #fff !important;
        background: transparent !important;
    }
    body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone:checked {
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 80% !important;
    }
    body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone {
        border: 1px solid #ff0 !important;
        background: transparent !important;
    }
    body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #chkbxinputone:checked {
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23ff0' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 80% !important;
    }
}

/* --- labels the theme colours with !important ---
   High contrast only sets colours per tag at (0,1,2), so two theme rules
   with !important kept their dark text on its black background (measured):
     ".price-form.home-filter-form label { color:#000 !important }"  1.0:1
     ".price-sec .subtitle span { color:#2a0d31 !important }"         1.2:1
   Both take the mode's white. (Light and negative contrast win already.) */
html body.pojo-a11y-high-contrast .price-form.home-filter-form label,
html body.pojo-a11y-high-contrast .price-sec .subtitle span {
    color: #fff !important;
}

/* --- search buttons (header + price list) ---
   They lose their green fill in the colour modes and read as loose text.
   style.css outlines ".ads-serch-btn-top" in white for high and negative
   contrast only; here both buttons get an outline in the colour of each
   mode's text (yellow in negative contrast, like the label inside). */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
    border: 1px solid #000 !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
    border: 1px solid #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form :is(.ads-serch-btn-top, .ads-serch-btn.home-search-btn) {
    border: 1px solid #ff0 !important;
}

/* --- price-list checkbox (#home_chkbxinput) ---
   A native 13px checkbox. The theme's global "input[type=checkbox]:checked
   ::before { content:'\2713'; position:absolute; top:1px; right:5px; white }"
   also applies to it: absolutely placed against its full-width .chkbox row,
   that tick sits at the far right end of the row, invisible as white on the
   light default page. In the dark modes it appeared far from the box, and
   the plugin's black background reduced the native box itself to a thin
   line (reported in high contrast). In the three colour modes the box is
   drawn by CSS instead: a square with a 1px border in the mode's text
   colour, the tick as an SVG inside it when checked, the stray glyph off.
   The size follows section 4b (13px x the form curve). */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: calc(13px * var(--a11y-scale-form)) !important;
    width: round(calc(13px * var(--a11y-scale-form)), 1px) !important;
    height: calc(13px * var(--a11y-scale-form)) !important;
    height: round(calc(13px * var(--a11y-scale-form)), 1px) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    align-self: center !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput { border: 1px solid #000 !important; }
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput { border: 1px solid #fff !important; }
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput { border: 1px solid #ff0 !important; }
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput:checked {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 90% !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput:checked {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 90% !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput:checked {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23ff0' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / 90% !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::before,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::before,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::before,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::after,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::after,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) #home_chkbxinput::after {
    content: none !important;
    display: none !important;
}

/* --- apartment cards and floor headers ---
   Requested: in the colour modes every apartment card keeps a visible
   outline (the modes removed its #F5F7F2 fill, so on a plain page the
   cards had no edge), and the floor header ("קומה 0") keeps its default
   look: the pink gradient bar with the purple name badge (#431b4b with
   #D9C0CF text, 8.9:1). */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box { border: 1px solid #000 !important; }
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box { border: 1px solid #fff !important; }
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box { border: 1px solid #ff0 !important; }
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title {
    background: linear-gradient(90deg, rgb(217 192 207 / 6%) 29%, rgb(217 192 207) 71%, rgba(217, 192, 207, 1) 100%) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title .floor_name,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title .floor_name,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_title .floor_name {
    background: #431b4b !important;
    color: #d9c0cf !important;
}

/* --- light mode: select borders ---
   The search-bar selects have no border (style.css: "border: unset"); they
   are white boxes on the purple header and the tinted price-list panel.
   Light mode paints them and the page behind them white, so the fields
   disappeared and only their arrows and placeholder text were left. High
   and negative contrast already outline them (the plugin's 1px border).
   They get a 1px outline in light mode's text colour, like the search
   button next to them, which also has a 1px border there, so field and
   button stay the same height. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select {
    border: 1px solid #000 !important;
}

/* --- select arrows: the default icons in every mode ---
   The selects draw their arrow as a background image with appearance:none:
   dow-arrow.png (a dark 14x8 triangle) in both search bars, arrow_down.svg
   (a pink #BA95AC triangle) on the building dropdown. The modes strip every
   background image: light mode and negative contrast left the selects with
   no arrow at all (reported), and high contrast hands them back to the
   browser's own small arrow (appearance: listbox). Requested: the default
   icons in all modes. The building dropdown keeps its own pink icon (visible
   on white and on black). The search selects keep the default PNG in light
   mode, where it is dark on white; on black the same triangle is drawn in
   the mode's text colour (white / yellow), as the dark PNG would vanish.
   Size and position as in style.css. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-size: 13px !important;
    background-position: left 15px center !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select {
    background-image: url("../images/dow-arrow.png") !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M0 0h14L7 8z' fill='%23fff'/%3E%3C/svg%3E") !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M0 0h14L7 8z' fill='%23ff0'/%3E%3C/svg%3E") !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .home_info_wrapper .top_filter .dropdpwn select {
    background-image: url("../images/arrow_down.svg") !important;
    background-size: 10px !important;
    background-position: left 14px center !important;
}

/* --- the two switches above the apartments ---
   The track is a <div class="slider"> whose colour is its background; the
   knob is its ::before. The modes removed the track, leaving a knob floating
   on nothing. The track keeps its design colours (off / on, per switch) and
   gets a 1px outline in the mode's text colour, so its edge shows on white
   and on black. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider {
    background: rgba(199, 218, 167, 0.5) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free .slider,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free .slider,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free .slider {
    background: rgba(221, 199, 212, 0.5) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper input:checked + .slider,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper input:checked + .slider,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper input:checked + .slider {
    background: rgba(100, 133, 44, 0.5) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free input:checked + .slider,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free input:checked + .slider,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .show_free input:checked + .slider {
    background: rgba(186, 149, 172, 0.5) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider {
    outline: 1px solid #000 !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider {
    outline: 1px solid #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox_wrapper .slider {
    outline: 1px solid #ff0 !important;
}

/* --- apartment status labels ---
   "נמכר!" keeps its red outline in the modes; "מחיר מטרה!" and
   "שיווק חופשי" have none and read as loose text once their fill is
   removed. They get an outline in the mode's text colour. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box :is(.target_price_label, .free_marketing) {
    border: 1px solid #000 !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box :is(.target_price_label, .free_marketing) {
    border: 1px solid #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .flat_box .floor_boxs .box :is(.target_price_label, .free_marketing) {
    border: 1px solid #ff0 !important;
}

/* --- hamburger (phones) ---
   Three lines: the middle one is the element's own background, the outer
   two its ::before / ::after (white, black when open). The modes' reset
   removed the middle line, and light mode left the outer two white on a
   white header. All three take the mode's text colour, closed and open. */
html body.pojo-a11y-light-background .header-top .hamburger:not(#pojo-a11y-toolbar),
html body.pojo-a11y-light-background .header-top .hamburger::before,
html body.pojo-a11y-light-background .header-top .hamburger::after {
    background: #000 !important;
}
html body.pojo-a11y-high-contrast .header-top .hamburger:not(#pojo-a11y-toolbar),
html body.pojo-a11y-high-contrast .header-top .hamburger::before,
html body.pojo-a11y-high-contrast .header-top .hamburger::after {
    background: #fff !important;
}
html body.pojo-a11y-negative-contrast .header-top .hamburger:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .header-top .hamburger::before,
html body.pojo-a11y-negative-contrast .header-top .hamburger::after {
    background: #ff0 !important;
}

/* --- cookie banner and settings modal: button borders ---
   Measured: light mode gave all three banner buttons a white fill and no
   border, so "אישור הכל" and "דחיית הכל" read as plain text; negative
   contrast outlined them white around yellow text. Each mode now outlines
   the filled buttons in its own text colour; the text link "הגדרות" stays a
   link in light mode. .cc-root is a direct child of <body>, so its id
   carries the weight; the modal uses :not() with an id. */
html body.pojo-a11y-light-background #cc-banner-root .cc-btn:not(.cc-btn-text),
html body.pojo-a11y-light-background .cc-modal-wrap .cc-btn:not(.cc-btn-text):not(#pojo-a11y-toolbar) {
    border: 1px solid #000 !important;
}
html body.pojo-a11y-negative-contrast #cc-banner-root .cc-btn,
html body.pojo-a11y-negative-contrast .cc-modal-wrap :is(.cc-btn, .cc-modal-close):not(#pojo-a11y-toolbar) {
    border: 1px solid #ff0 !important;
}


/* =========================================================================
   10. COLOUR MODES: IMAGES, LOGOS AND BRANDED BARS KEPT
   The plugin's reset removes every background image and gives every <img>
   a box (white in light mode, black in negative contrast, grey #808080 in
   high contrast). Measured on this site:
     - the white hero "curve" became an opaque box over the hero photo
       (white / black; style.css already fixes high contrast only);
     - the white כרמים logos (header, sections 2 and 4) vanished on light
       mode's white page;
     - the dark logos (David logo under the hero, footer partners) and the
       black footer icons vanished on black in high / negative contrast;
     - the map / chart photos, the price-list aerial photo, the plot
       outlines, the project name plates, the accordion bars and the gallery
       arrows lost their colours or disappeared.
   Grayscale keeps all of these (it is a filter) and is left alone.
   ========================================================================= */

/* --- images: no box behind transparent graphics ---
   Photos are opaque, so the box never showed behind them; behind the
   transparent curve, logos, dividers, icons and arrows it did. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img,
html body.pojo-a11y-high-contrast img {
    background: transparent !important;
}

/* --- white logos (logo-light.webp): a black plate in light mode --- */
html body.pojo-a11y-light-background .header-top .main-logo:not(.first-logo) img:not(#pojo-a11y-toolbar),
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .city-habas-logo-img {
    background: #000 !important;
}
/* --- dark logos (David logo, footer partners): a white plate in high and
   negative contrast (style.css already does this for one footer logo in
   negative contrast) --- */
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .graps-icon,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .graps-icon,
html body.pojo-a11y-high-contrast #section11 .footer-wrap .col-md-2 img,
html body.pojo-a11y-negative-contrast #section11 .footer-wrap .col-md-2 img {
    background: #fff !important;
}
/* --- black icons (footer phone / mail / clock, PDF icons, the popup's
   download, share and X icons, the gallery arrows sit on a white button):
   drawn white on black in high and negative contrast --- */
html body.pojo-a11y-high-contrast #section11 .footer-links img,
html body.pojo-a11y-negative-contrast #section11 .footer-links img,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .fils-for-downlaod img,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .fils-for-downlaod img,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner :is(.download_wrapper a.btn:not(.dark_btn) img, .share_icon img, .social_icon .twitter img),
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner :is(.download_wrapper a.btn:not(.dark_btn) img, .share_icon img, .social_icon .twitter img) {
    filter: brightness(0) invert(1) !important;
}
/* --- section dividers ---
   The ornament's own background masks the horizontal line (::before)
   behind it, so it keeps a background in the page colour of each mode.
   The white ornaments of the purple / green sections are drawn black on
   light mode's white page; their line (a white ::before) is invisible there
   anyway, so no mask is needed, and a filter would blacken a mask too. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .design-spacer > img {
    background: #fff !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .design-spacer > img,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .design-spacer > img {
    background: #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .design-spacer.purple > img {
    background: transparent !important;
    filter: brightness(0) !important;
}

/* --- hero: the white curve over the photo is a transparent image again
   (covered by the image rule above); the photo is an <img> and stays --- */

/* --- project cards: purple / green name plates ---
   The photos are <img> and stay; the plates (#412a45, even cards #005c07,
   white text) come back. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap {
    background: #412a45 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .project-box:nth-child(2n) .content-proj-wrap,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .project-box:nth-child(2n) .content-proj-wrap,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .project-box:nth-child(2n) .content-proj-wrap {
    background: #005c07 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap :is(h3, p),
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap :is(h3, p),
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-proj-wrap :is(h3, p) {
    background: transparent !important;
    color: #fff !important;
}

/* --- maps and charts: the two photos and their link plates ---
   The photos come from an inline ACF style, which CSS cannot read back;
   template-home.php also writes the URL into --a11y-bg. #section3 is a
   direct child of <body>, so html + the id outweigh the plugin. The plates
   were green #00a757 with white text (3.2:1); in the colour modes they use
   the theme's dark green #09592d (7.9:1). */
html body.pojo-a11y-light-background #section3 :is(.chart, .map),
html body.pojo-a11y-high-contrast #section3 :is(.chart, .map),
html body.pojo-a11y-negative-contrast #section3 :is(.chart, .map) {
    background: var(--a11y-bg) center / cover no-repeat !important;
}
html body.pojo-a11y-light-background #section3 :is(.chart, .map) a,
html body.pojo-a11y-high-contrast #section3 :is(.chart, .map) a,
html body.pojo-a11y-negative-contrast #section3 :is(.chart, .map) a {
    background: #09592d !important;
    color: #fff !important;
}

/* --- gallery arrows: the white buttons keep their fill, so the black
   arrow images stay visible --- */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav button,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav button,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav button {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* the arrow bar itself (.owl-nav) is a full-width strip laid over the
   thumbnails, transparent by design; the modes painted it solid black /
   white and it hid the middle of the thumbnail row (reported) */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-nav,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-dots,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-dots,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .thumbnail-gallery-part .owl-main-slider .owl-dots {
    background: transparent !important;
}

/* --- accordion bars (purchase process + mortgage) ---
   Same bars as the default view in every mode: the light "שלב N" wedge with
   black text on the dark-green bar with white text, and the dark-green
   mortgage bar. The white chevrons (a filtered ::after) are untouched by the
   plugin and were invisible on the white bars of light mode. The wedge stop
   is written with the resize variable, so at rest it is exactly the theme's
   21% / 23% and with enlarged text it widens as in section 7. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button {
    background: linear-gradient(297deg, #f0f3eb calc(21% + 56px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 70%) !important;
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
    body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
    body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button {
        background: linear-gradient(297deg, #f0f3eb calc(21% + 80px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 70%) !important;
    }
}
@media (max-width: 767px) {
    body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
    body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button,
    body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button {
        background: linear-gradient(297deg, #f0f3eb calc(23% + 86px * (var(--a11y-scale) - 1)), #095a2d 0%, #095a2d 77%) !important;
    }
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage .accordion-header .accordion-button,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage .accordion-header .accordion-button,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage .accordion-header .accordion-button {
    background: #09592d !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span {
    background: transparent !important;
    color: #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.faqs, .accordian-mortgage) .accordion-button p,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.faqs, .accordian-mortgage) .accordion-button p,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.faqs, .accordian-mortgage) .accordion-button p {
    background: transparent !important;
    color: #fff !important;
}

/* --- price list: the aerial photo, the plot outlines and the buttons ---
   #section8 is a direct child of <body>; html + the id outweigh the
   plugin. The photo is written inline by the template (hard-coded upload
   path) and also into --a11y-bg; the plot outlines are the theme's own
   images. Everything between the photo and the labels goes transparent;
   the purple frame, the building buttons (pink / purple, purple when
   active) and the plot names keep the design colours, which are all well
   above 4.5:1. */
html body.pojo-a11y-light-background #section8 .main_box_border,
html body.pojo-a11y-high-contrast #section8 .main_box_border,
html body.pojo-a11y-negative-contrast #section8 .main_box_border {
    background: #431b4b !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .inner_bade,
html body.pojo-a11y-high-contrast #section8 .main_box_border .inner_bade,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .inner_bade {
    background: var(--a11y-bg) top left / cover no-repeat !important;
}
@media only screen and (max-width: 1399px) and (max-width: 1280px) {
    html body.pojo-a11y-light-background #section8 .main_box_border .inner_bade,
    html body.pojo-a11y-high-contrast #section8 .main_box_border .inner_bade,
    html body.pojo-a11y-negative-contrast #section8 .main_box_border .inner_bade {
        background-position: 8% top !important;
    }
}
html body.pojo-a11y-light-background #section8 .main_box_border :is(.innerscroll, .wrap, .plan),
html body.pojo-a11y-high-contrast #section8 .main_box_border :is(.innerscroll, .wrap, .plan),
html body.pojo-a11y-negative-contrast #section8 .main_box_border :is(.innerscroll, .wrap, .plan) {
    background: transparent !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan_1 .line_bg,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan_1 .line_bg,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan_1 .line_bg {
    background: url("../images/last.png") 0 15px / contain no-repeat !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border :is(.plan_2, .plan_3) .line_bg,
html body.pojo-a11y-high-contrast #section8 .main_box_border :is(.plan_2, .plan_3) .line_bg,
html body.pojo-a11y-negative-contrast #section8 .main_box_border :is(.plan_2, .plan_3) .line_bg {
    background: url("../images/plan3.svg") 0 15px / contain no-repeat !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan_4 .line_bg,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan_4 .line_bg,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan_4 .line_bg {
    background: url("../images/plan3.svg") 0 0 / 100% 100% no-repeat !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan .top_lot,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan .top_lot,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan .top_lot {
    background: #c9dae4 !important;
    color: #431b4b !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan .building_box,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan .building_box,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan .building_box {
    background: #ffeef8 !important;
    color: #431b4b !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan .building_box span,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan .building_box span,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan .building_box span {
    background: #431b4b !important;
    color: #fff !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan .building_box:is(:hover, .active),
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan .building_box:is(:hover, .active),
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan .building_box:is(:hover, .active) {
    background: #431b4b !important;
    color: #fff !important;
}
html body.pojo-a11y-light-background #section8 .main_box_border .plan .building_box:is(:hover, .active) span,
html body.pojo-a11y-high-contrast #section8 .main_box_border .plan .building_box:is(:hover, .active) span,
html body.pojo-a11y-negative-contrast #section8 .main_box_border .plan .building_box:is(:hover, .active) span {
    background: #ffeef8 !important;
    color: #431b4b !important;
}
/* tablets / phones: the drag hint under the map */
html body.pojo-a11y-light-background #section8 .next_prev,
html body.pojo-a11y-high-contrast #section8 .next_prev,
html body.pojo-a11y-negative-contrast #section8 .next_prev {
    background: #6d214488 !important;
}
html body.pojo-a11y-light-background #section8 .next_prev *,
html body.pojo-a11y-high-contrast #section8 .next_prev *,
html body.pojo-a11y-negative-contrast #section8 .next_prev * {
    background: transparent !important;
}

/* --- apartment popup: the purple panel with the apartment number and the
   purple price bar ---
   The panel's image is set inline by custom.js (bg_img.png, bg_img_mob.png
   on tablets and phones); the number sits in a white-bordered box. The
   price bar is a purple gradient with white text. .popup_outer is a direct
   child of <body>; its descendants are reached with the * prefix. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img {
    background: #431b4b url("../images/bg_img.png") bottom center / var(--a11y-left-img-size, auto) no-repeat !important;
}
@media only screen and (max-width: 1023px) {
    body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img,
    body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img,
    body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img {
        background: #431b4b url("../images/bg_img_mob.png") bottom center / 100% no-repeat !important;
    }
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img h2,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img h2,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .left_img h2 {
    background: transparent !important;
    color: #fff !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price {
    background: linear-gradient(135deg, #431b4b 0%, #843c93 100%) !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price *,
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price *,
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_price * {
    background: transparent !important;
    color: #fff !important;
}
/* the download buttons lose their fills and read as text: outlined in the
   mode's text colour */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .download_wrapper a.btn {
    border: 1px solid #000 !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .download_wrapper a.btn {
    border: 1px solid #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .download_wrapper a.btn {
    border: 1px solid #ff0 !important;
}
/* the share button's 2px dark outline vanished on black */
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .share_icon span {
    border-color: #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .share_icon span {
    border-color: #ff0 !important;
}

/* --- apartment popup: the share box ---
   Requested: the "שתפו ב-" panel is a white card with a soft shadow; the
   modes removed its fill (and high contrast every shadow), so it had no
   edge over the popup. It gets a 1px border in the mode's text colour, and
   its pointer (a white ::after triangle) takes the same colour. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon { border: 1px solid #000 !important; }
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon { border: 1px solid #fff !important; }
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon { border: 1px solid #ff0 !important; }
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon::after { border-top-color: #000 !important; }
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon::after { border-top-color: #fff !important; }
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner .social_icon::after { border-top-color: #ff0 !important; }

/* --- apartment popup: the page behind it ---
   Requested: the popup sits in a fixed full-screen layer (.popup_outer,
   transparent) over a 40% black shade (.bg_outer), so by default the page
   stays visible, dimmed, around the popup. The modes painted both layers
   solid (black / white) and the page vanished. Both get their default
   look back. .popup_outer is a direct child of <body>, so both rules use
   html + :not(#id) for the weight. */
html body.pojo-a11y-light-background .popup_outer:not(#pojo-a11y-toolbar),
html body.pojo-a11y-high-contrast .popup_outer:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .popup_outer:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
html body.pojo-a11y-light-background .popup_outer .bg_outer:not(#pojo-a11y-toolbar),
html body.pojo-a11y-high-contrast .popup_outer .bg_outer:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .popup_outer .bg_outer:not(#pojo-a11y-toolbar) {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* --- phones: spacing between the search-bar fields ---
   On phones both selects are 48% wide with no side margin; at rest the
   space character between them in the markup keeps them apart and the
   button has a 14px top margin. As flex items (section 7) that space is
   dropped: enlarged, the two selects touched and the button sat close
   under them (reported). The fields get a real gap (4% of the bar, the
   room left by 2 x 48%) and the lines of the bar are spaced from the
   theme's own 14px, growing with the text. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .header-top #searchbox .searchbox,
    html body[class*="pojo-a11y-resize-font-"] .price-form.home-filter-form .searchbox-inner {
        column-gap: 4% !important;
        row-gap: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .price-form select {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- phones: the note under the hero photo ---
   "*תמונות והדמיות להמחשה בלבד…" is absolutely placed with bottom:-25px,
   so it grows UPWARD. Enlarged it broke onto two lines and climbed over the
   photo (reported; measured 390px, step 200: its top moved from 14px to
   53px above the photo's bottom edge). It is anchored by its top instead,
   exactly where it starts at rest (14px above the bottom), and grows
   downward. The logo under it (.graps-icon, bottom:-190px) and the room
   the banner keeps for it (padding-bottom:200px) move down by the note's
   growth (one extra line at step 200). */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .hero.img-note {
        top: calc(100% - 14px) !important;
        bottom: auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .graps-icon {
        bottom: calc(-190px - 70px * (var(--a11y-scale) - 1)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hearo-banner {
        padding-bottom: calc(200px + 70px * (var(--a11y-scale) - 1)) !important;
    }
}

/* --- phones: the popup's apartment details ---
   responsive.css pins each value ("4", "105.07 מ"ר") with position:absolute
   at right:42px / top:18px under its label, pulls the label up 10px and
   squeezes the box to line-height 0.8. That only fits one line of 16px
   label. Enlarged, the labels wrapped onto two lines in their half-width
   column and the values were drawn on top of them (reported). While a size
   is selected each detail takes the full width, the label and value are in
   the normal flow (value on its own line, aligned with the label text as
   in the design: 42px = icon + label padding), with a real line-height. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box {
        width: 100% !important;
        line-height: 1.3 !important;
        align-items: center !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box h6 {
        top: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .popup_outer .right_info .aminities .ami_box span {
        position: static !important;
        flex: 0 0 100% !important;
        padding-right: 42px !important;
        margin-top: 0 !important;
        line-height: 1.3 !important;
    }
}

/* --- phones: footer contact lines on one line ---
   Requested: the phone number, the e-mail address and the opening hours
   stay on one line each. On a phone they already fill ~90% of the column
   at rest (measured 390px: hours 288px incl. the icon in a 319px list), so
   at full size they broke onto two and three lines. The list becomes a
   size container and the three lines grow with the setting only as far as
   the column allows: font-size = the smaller of 18px x scale and
   (column width - 36px icon) x 0.07 (18px per 254px of the longest line's
   text at rest, with a small margin). */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .footer-social .footer-links {
        container-type: inline-size !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .footer-social .footer-links li :is(a, span) {
        font-size: min(calc(18px * var(--a11y-scale)), calc((100cqw - 36px) * 0.07)) !important;
        white-space: nowrap !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .footer-social .footer-links a[href^="mailto:"] {
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* --- apartment popup: its outline in the dark modes ---
   Requested (desktop and mobile): in high and negative contrast the popup
   is black on the dimmed page and had no edge. It gets a 1px border in the
   mode's text colour (white / yellow). */
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner { border: 1px solid #fff !important; }
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .popup_inner { border: 1px solid #ff0 !important; }

/* --- desktop / tablet: the note on the hero photo ---
   "*תמונות והדמיות להמחשה בלבד…" sits in the white curve at the bottom left
   of the photo: max-width 13rem (208px), bottom:90px, two lines at rest
   (measured 768-1920px: its top 151px above the bottom of the hero). The
   curve's top edge slopes down towards the right, so only that width stays
   inside the white area. Anchored at the bottom, the enlarged text climbed
   over the photo (reported); a wider box (tried: 13rem x scale) pushed its
   first line out over the photo and the white swirl on the right
   (reported). The box keeps the design width and is anchored by its top at
   the rest position, moved down as the lines get taller (80px x (scale-1),
   48px at step 200), because the white area widens further down. Measured
   by sampling the curve image under the corners of every line: at 1600 and
   1920px no corner on the photo at any step, at 1366px none at step 200 and
   one at 130 / 160 (the same one as at rest). At 1024px and below the note
   is on the photo at rest already (theme layout, not changed here). */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .hero.img-note {
        top: calc(100% - 151px + 80px * (var(--a11y-scale) - 1)) !important;
        bottom: auto !important;
    }
}