@charset "UTF-8"; /* ========================================================================== AbedLesCar — mobile-boost.css ("ab-boost") Served at: asset('front/assets/css/mobile-boost.css') Source: frontassets/css/mobile-boost.css -------------------------------------------------------------------------- LOAD ORDER: must be the LAST stylesheet (after style.css + responsive.css). This file NEVER edits style.css / responsive.css — it only overrides them. RULES OBSERVED IN THIS FILE 1. No existing class or id is renamed or removed. 2. Zero third-party dependencies. No @import, no url() to a remote host. 3. Every rule touching a generic selector (p, a, img, .btn, .form-control, .container, .row, h1-h4, li, input …) is prefixed `body:not(.admin)` so nothing can leak into the /admin panel. Rules that only touch new .ab-* / .reveal / .skel / .img-box classes need no prefix. 4. RTL-first: logical properties everywhere. Physical left/right appears ONLY (a) inside an explicit [dir="ltr"] escape for the owl gallery, and (b) as `left:auto / right:auto` NEUTRALISERS that unset physical values hard-coded in style.css / responsive.css. Both are flagged in comments. 5. Everything renders correctly with JS off. JS-only behaviour is gated behind `html.ab-js` (class set by an inline script). 6. Mobile-first intent. Every LAYOUT change (grid counts, stacking, the action bar, the chip rail, the sticky header) is inside a max-width query, and §17 hard-guards ≥992px for the card box model. Be honest about the rest: §2 base repairs, §8 card chrome (border, radius, shadow, the 4/3 .car-img ratio, the ribbon pill, the spec chips, the price colour), §12 field sizing, §14 type scale and §16 footer icon colours are UNSCOPED and therefore also restyle desktop. That is deliberate — desktop inherits the same visual language — but it is a redesign, not a no-op. Do not read §17 as "desktop is untouched". SECTIONS §1 Tokens §2 Base repairs §3 Touch neutralisation + real press feedback §4 Reduced motion §5 Sticky header + scroll progress §6 Offcanvas menu (sheet-style) §7 .ab-bar — sticky bottom action bar §8 Car grid + card §9 Reveal on scroll §10 .img-box + .skel skeletons §11 Brand filter chip rail (#make_detail) §12 Forms §13 Hero §14 Typography + rhythm §15 Car-detail: RTL repair, key-spec grid, gallery §16 Footer + icon-chip repair §17 Desktop guard, print, colour-scheme, final sweeps ========================================================================== */ /* ========================================================================== §1 TOKENS (shared contract — mirrored in the inline critical block) ========================================================================== */ :root{ /* ---- brand (all derived from existing style.css usage) ---- */ --ab-brand:#dc344c; /* existing primary, 41 uses. FILLS ONLY */ --ab-brand-strong:#c22740; /* AA-safe brand for TEXT on white (5.6:1) */ --ab-brand-press:#a81f34; /* :active fill */ --ab-brand-on-dark:#f07a8c; /* brand link on #181818 (7.3:1) */ --ab-brand-tint:rgba(220,52,76,.08); --ab-brand-tint-2:rgba(220,52,76,.16); --ab-ink:#111111; /* existing heading ink */ --ab-ink-2:#181818; /* existing top-header / copyright chrome */ --ab-ink-muted:#5b6577; /* REPLACES #757f95 (was 4.02:1 = fail). 7.0:1 */ --ab-scrim:#01060f; /* existing overlay ink */ --ab-surface:#ffffff; --ab-surface-2:#f9f9f9; /* existing .bg-gray */ --ab-surface-3:#f1f2f5; /* media box + skeleton base */ --ab-line:rgba(17,17,17,.08); --ab-line-2:rgba(17,17,17,.14); --ab-wa:#25d366; /* whatsapp */ --ab-waze:#14c6f7; /* existing waze blue */ --ab-err:#c41e2e; /* REPLACES red/#ff0000 (was 4.0:1) */ /* ---- radius ---- */ --ab-r-card:14px; --ab-r-media:12px; --ab-r-field:12px; --ab-r-pill:999px; /* ---- elevation ladder (tinted with --ab-scrim, not pure black) ---- */ --ab-sh-1:0 1px 2px rgba(1,6,15,.06), 0 4px 12px rgba(1,6,15,.07); --ab-sh-2:0 2px 4px rgba(1,6,15,.06), 0 12px 28px rgba(1,6,15,.10); --ab-sh-bar:0 -6px 24px rgba(1,6,15,.12); --ab-sh-brand:0 6px 16px rgba(220,52,76,.28); /* ---- spacing (4pt) ---- */ --ab-s1:4px; --ab-s2:8px; --ab-s3:12px; --ab-s4:16px; --ab-s5:24px; --ab-s6:32px; --ab-s7:40px; --ab-s8:56px; /* ---- motion ---- */ --ab-d1:120ms; --ab-d2:180ms; --ab-d3:280ms; --ab-ease:cubic-bezier(.22,.61,.36,1); --ab-ease-out:cubic-bezier(.16,1,.3,1); /* ---- layout ---- */ --ab-tap:48px; --ab-bar-h:62px; --ab-safe-b:env(safe-area-inset-bottom,0px); /* The PHYSICAL inset on the INLINE-START edge. env() insets are physical viewport values, so they must never be fed straight into a logical property: this page is RTL, so inline-start is the RIGHT-hand edge. The [dir="ltr"] escape right below flips it back. */ --ab-safe-i:env(safe-area-inset-right,0px); --ab-bar-space:calc(var(--ab-bar-h) + var(--ab-safe-b)); --ab-header-h:64px; --ab-z-header:1020; --ab-z-bar:1030; /* under BS offcanvas(1045)/backdrop(1040)/modal(1055) */ --ab-z-fab:1031; /* ---- type ---- */ --ab-fs-hero:clamp(28px,8vw,60px); --ab-fs-h2:clamp(22px,5.6vw,45px); --ab-fs-h3:clamp(18px,4.6vw,28px); --ab-fs-card:clamp(15px,4.2vw,20px); --ab-fs-spec:13px; --ab-lh-tight:1.22; --ab-lh-body:1.65; } /* LTR escape (b) — see rule 4 in the header. Only remaps the physical safe-area token; every other value stays direction-agnostic. */ [dir="ltr"]{ --ab-safe-i:env(safe-area-inset-left,0px); } /* ========================================================================== §2 BASE REPAIRS (scoped) ========================================================================== */ body:not(.admin){ /* the site is a light design end-to-end; declaring it stops mobile browsers force-darkening form controls and scrollbars into mud. */ color-scheme:light; -webkit-text-size-adjust:100%; text-size-adjust:100%; line-height:var(--ab-lh-body); background-color:var(--ab-surface); } /* #757f95 fails AA on white (4.02:1). --ab-ink-muted is 7.0:1. */ body:not(.admin) p, body:not(.admin) .car-list li, body:not(.admin) .about-list li, body:not(.admin) .car-detail-meta li, body:not(.admin) .car-key-content span{ color:var(--ab-ink-muted); } body:not(.admin) .error{ color:var(--ab-err); } /* #captcha_error carries an inline style="color:red" — inline beats a plain rule, so this one needs !important to reach AA. */ body:not(.admin) #captcha_error{ color:var(--ab-err) !important; } body:not(.admin) .copyright .copyright-text a{ color:var(--ab-brand-on-dark); } /* svh so a mobile URL bar collapsing does not shove the footer around */ body:not(.admin) .main-body{ min-height:calc(100svh - 100px); } body:not(.admin) img, body:not(.admin) video{ max-width:100%; } /* style.css:98 puts user-select:none on .form-control — it also lands on real /

, so users cannot select or correct what they typed.
   style.css also makes .form-control an inline-flex, which mangles textareas. */
body:not(.admin) input.form-control,
body:not(.admin) textarea.form-control{
  -webkit-user-select:text;
  user-select:text;
  display:block;
  padding-inline:15px;
}

/* style.css:27 removed the focus ring globally — keyboard users were blind. */
body:not(.admin) :focus-visible{
  outline:3px solid var(--ab-ink);
  outline-offset:2px;
  border-radius:6px;
}
body:not(.admin) .theme-btn:focus-visible,
body:not(.admin) .theme-btn2:focus-visible,
body:not(.admin) .ab-item:focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 5px var(--ab-ink);
}
body:not(.admin) a,
body:not(.admin) button,
body:not(.admin) .ab-item{ -webkit-tap-highlight-color:transparent; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.ab-skip{
  position:absolute; inset-inline-start:0; inset-block-start:-100px; z-index:2000;
  background:var(--ab-ink); color:#fff; padding:10px 16px;
  border-end-end-radius:var(--ab-r-field);
  font-weight:600;
}
.ab-skip:focus{ inset-block-start:0; color:#fff; }

/* ==========================================================================
   §3  TOUCH NEUTRALISATION — kill latched :hover, add real press feedback
   --------------------------------------------------------------------------
   On a touch screen :hover latches after a tap: the card image stayed at
   scale(1.2) and the red CTA stayed black after you came back from a detail
   page. Overridden at equal-or-greater specificity.
   ========================================================================== */

@media (hover:none), (pointer:coarse){
  body:not(.admin) .car-box:hover .car-img img,
  body:not(.admin) .car-box:hover .car-img video{ transform:none; }

body:not(.admin) .theme-btn:hover::before,
  body:not(.admin) .theme-btn2:hover::before{
    transform:translateY(-50%) translateX(-50%) scale(0);
  }

body:not(.admin) .contact-info:hover{ transform:none; }

body:not(.admin) .brand-item:hover{
    transform:none;
    background:var(--ab-surface-2);
  }
  body:not(.admin) .brand-item:hover h3{ color:inherit; }

body:not(.admin) .form-control:hover{ border-color:#e8e8e8; }

body:not(.admin) .footer-list li a:hover,
  body:not(.admin) .car-content h3 a:hover{ color:inherit; }
}

/* --- real, unconditional press feedback ---------------------------------- */
body:not(.admin) .theme-btn,
body:not(.admin) .theme-btn2{
  min-height:var(--ab-tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:var(--ab-r-pill);
  transition:transform var(--ab-d1) var(--ab-ease),
             background-color var(--ab-d2) var(--ab-ease),
             box-shadow var(--ab-d2) var(--ab-ease);
}
/* brand glow belongs to the red button; the black one gets neutral elevation */
body:not(.admin) .theme-btn{ box-shadow:var(--ab-sh-brand); }
body:not(.admin) .theme-btn2{ box-shadow:var(--ab-sh-2); }

body:not(.admin) .theme-btn:active{
  transform:scale(.97);
  background:var(--ab-brand-press);
}
body:not(.admin) .theme-btn2:active{ transform:scale(.97); }
body:not(.admin) .car-box:active{ transform:scale(.99); }

/* .theme-btn is also rendered as <input type="button"> (load-more) */
body:not(.admin) input.theme-btn{ -webkit-appearance:none; appearance:none; }

/* responsive.css:221 shrinks .theme-btn to 14px/10px at ≤575 — that drops the
   primary CTA under the 48px touch floor. Restore it. */
@media (max-width:575.98px){
  body:not(.admin) .theme-btn{ font-size:15px; padding:13px 20px; }
  body:not(.admin) .theme-btn2{ font-size:15px; padding:13px 20px; }
}

/* ==========================================================================
   §4  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   §5  STICKY HEADER + SCROLL PROGRESS  (≤991.98px)
   ========================================================================== */

@media (max-width:991.98px){

/* Anchor jumps must clear the sticky header. */
  html{ scroll-padding-top:calc(var(--ab-header-h) + 12px); }

/* position:sticky is bounded by the PARENT box. .main-header lives inside
     <header>, so sticking only .main-header would let it scroll away the
     moment <header> left the viewport. Stick <header> itself, and hide the
     .top-header strip (it is already hidden ≤768 and only repeats the phone
     + email that the action bar now owns) so the sticky chrome stays thin. */
  body:not(.admin) header{
    position:sticky;
    inset-block-start:0;
    z-index:var(--ab-z-header);
    background:var(--ab-surface);
  }
  body:not(.admin) .top-header{ display:none; }

body:not(.admin) .main-header{
    position:sticky;
    inset-block-start:0;
    z-index:var(--ab-z-header);
    background:var(--ab-surface);
    border-bottom:1px solid var(--ab-line);
    transition:box-shadow var(--ab-d2) var(--ab-ease),
               padding var(--ab-d2) var(--ab-ease);
    padding-block:6px;
  }
  body:not(.admin) .main-header.ab-shrunk{
    box-shadow:var(--ab-sh-1);
    padding-block:2px;
  }
  body:not(.admin) .main-header.ab-shrunk .navbar-brand img{ height:40px; }

body:not(.admin) header .navbar-brand{ padding-block:0; }
  body:not(.admin) header .navbar-brand img{
    height:52px;
    width:auto;
    max-width:150px;
    object-fit:contain;
    transition:height var(--ab-d2) var(--ab-ease);
  }
  /* responsive.css:175 forces width:85px at ≤575 — height-driven is steadier */
  @media (max-width:575.98px){
    body:not(.admin) header .navbar-brand img{ width:auto; height:46px; }
    body:not(.admin) .main-header.ab-shrunk .navbar-brand img{ height:38px; }
  }

/* main.js swaps in .fixed-header on scroll. Left alone it rips the navbar
     out of flow, collapses the sticky wrapper and jumps the page. Neutralise
     it — sticky already does the job, and better. */
  body:not(.admin) header .navbar.fixed-header{
    position:static;
    animation:none;
    box-shadow:none;
    inset:auto;             /* logical reset of its top/right/left */
  }
  body:not(.admin) header .navbar{ box-shadow:none; }

/* --- THE 476–991px DEAD BAND -------------------------------------------
     style.css:1627 hides .waze-bottom and .theme-btn.mob-btn outright, and
     responsive.css only brings them back below 475px. Every phone in
     landscape and every small tablet lost Call + Waze entirely. */
  body:not(.admin) .waze-bottom,
  body:not(.admin) .theme-btn.mob-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    inline-size:var(--ab-tap);
    block-size:var(--ab-tap);
    min-inline-size:var(--ab-tap);
    min-block-size:var(--ab-tap);
    border-radius:var(--ab-r-pill);
    padding:0;
    margin:0;
    font-size:18px;
    line-height:1;
    flex:none;
    /* neutralise responsive.css:283-285 physical offsets */
    position:static;
    inset:auto;
  }
  body:not(.admin) .waze-bottom{
    background:var(--ab-waze);
    color:#fff;
    box-shadow:var(--ab-sh-1);
  }
  body:not(.admin) .waze-bottom i,
  body:not(.admin) .waze-bottom svg{ color:#fff; margin:0; }
  body:not(.admin) .theme-btn.mob-btn{ box-shadow:var(--ab-sh-brand); }
  body:not(.admin) .theme-btn.mob-btn i,
  body:not(.admin) .theme-btn.mob-btn svg{ margin:0; }

/* Header row: logo at the start, Waze + Call + hamburger at the end.
     Actual markup (header.blade.php) is
       .navbar > .container > [ .mob-header[ brand, .waze-bottom, .mob-btn,
                                             .navbar-toggler ],
                               .navbar-collapse, .mob-menu ]
     Bootstrap makes `.navbar > .container` the flex container, so .mob-header
     is a flex ITEM there and the toggler is its own child. flex:1 1 auto (not
     width:100%) lets .mob-header take the free space without pushing its
     zero-width .mob-menu / .navbar-collapse siblings onto a second line. */
  body:not(.admin) .mob-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:var(--ab-s2);
    flex:1 1 auto;
    min-width:0;
  }
  body:not(.admin) .mob-header .navbar-brand{ margin-inline-end:auto; }

body:not(.admin) .navbar-toggler{
    min-inline-size:var(--ab-tap);
    min-block-size:var(--ab-tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:var(--ab-r-field);
    border:1px solid var(--ab-line);
    background:var(--ab-surface);
    transition:background-color var(--ab-d2) var(--ab-ease),
               transform var(--ab-d1) var(--ab-ease);
  }
  body:not(.admin) .navbar-toggler:active{
    transform:scale(.94);
    background:var(--ab-brand-tint);
  }
  body:not(.admin) .navbar-toggler-icon{ inline-size:22px; block-size:22px; }
}

/* Scroll-progress hairline pinned to the header's bottom edge.
   Driven by mobile-boost.js; renders as a no-op (scaleX(0)) with JS off. */
.ab-progress{
  position:absolute;
  inset-inline:0;
  inset-block-end:-1px;
  block-size:2px;
  background:var(--ab-brand);
  transform:scaleX(0);
  /* transform-origin has no logical keyword — RTL default, LTR escape below */
  transform-origin:right center;
  will-change:transform;
  pointer-events:none;
}
[dir="ltr"] .ab-progress{ transform-origin:left center; }

@media (min-width:992px){ .ab-progress{ display:none; } }

/* ==========================================================================
   §6  OFFCANVAS MENU — sheet-style mobile nav
   ========================================================================== */

body:not(.admin) .mob-menu .offcanvas{
  inline-size:min(86vw,360px);
  border:0;
  box-shadow:var(--ab-sh-2);
}
body:not(.admin) .mob-menu .offcanvas-header{
  padding:var(--ab-s4);
  padding-block-start:max(var(--ab-s4), env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--ab-line);
  gap:var(--ab-s3);
}
body:not(.admin) .mob-menu .offcanvas-header img{
  inline-size:auto;
  block-size:44px;
  max-inline-size:150px;
  object-fit:contain;
}
body:not(.admin) .mob-menu .offcanvas-body{
  padding:var(--ab-s4);
  padding-block-end:max(var(--ab-s5), calc(var(--ab-safe-b) + var(--ab-s5)));
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
}

/* 44px+ close target (Bootstrap ships a 16px one) */
body:not(.admin) .offcanvas-header .btn-close,
body:not(.admin) .modal-header .btn-close{
  inline-size:44px;
  block-size:44px;
  padding:0;
  background-size:14px;
  border-radius:var(--ab-r-pill);
  opacity:.65;
  flex:none;
}
body:not(.admin) .offcanvas-header .btn-close:active,
body:not(.admin) .modal-header .btn-close:active{
  opacity:1;
  background-color:var(--ab-brand-tint);
}

/* --- quick-action tiles injected at the top of .offcanvas-body ----------- */
/* Flex, not a 3-track grid: header.blade.php fills slots 2 and 3 from a
   fallback chain (whatsapp -> mail -> waze) that can come up empty when a
   setting is blank, and a fixed repeat(3,1fr) would leave a hole. */
.ab-quick{
  display:flex;
  gap:var(--ab-s2);
  margin-block-end:var(--ab-s5);
}
.ab-quick a{
  display:flex;
  flex:1 1 0;
  min-inline-size:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-block-size:72px;
  padding:var(--ab-s2);
  border-radius:var(--ab-r-card);
  background:var(--ab-surface-2);
  border:1px solid var(--ab-line);
  color:var(--ab-ink);
  font-size:12px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  transition:transform var(--ab-d1) var(--ab-ease),
             background-color var(--ab-d2) var(--ab-ease);
}
.ab-quick a:active{ transform:scale(.97); background:var(--ab-brand-tint); }
.ab-quick svg{ inline-size:22px; block-size:22px; flex:none; }
.ab-quick .ab-q-call{
  background:var(--ab-brand);
  border-color:var(--ab-brand);
  color:#fff;
  box-shadow:var(--ab-sh-brand);
}
.ab-quick .ab-q-call:active{ background:var(--ab-brand-press); }

/* --- rows ---------------------------------------------------------------- */
body:not(.admin) .mob-menu .offcanvas-body ul{
  inline-size:100%;
  margin:0;
  padding:0;
  list-style:none;
}
/* responsive.css:86 adds a 20px gap per item — the divider rule reads better.
   That selector is (0,5,1), so .offcanvas has to stay in this chain to win. */
body:not(.admin) .mob-menu .offcanvas .offcanvas-body ul .mob-item{ margin-bottom:0; }

body:not(.admin) .mob-link{
  display:flex;
  align-items:center;
  min-block-size:var(--ab-tap);
  padding-block:14px;
  padding-inline:6px;
  font-size:17px;
  font-weight:600;
  color:var(--ab-ink);
  border-bottom:1px solid var(--ab-line);
  /* keeps the active marker from shifting the row by 3px */
  border-inline-start:3px solid transparent;
  transition:background-color var(--ab-d2) var(--ab-ease),
             color var(--ab-d2) var(--ab-ease);
}
body:not(.admin) .mob-link:active{ background:var(--ab-brand-tint); }

/* Active marker on the INLINE START edge (= right in RTL). box-shadow has no
   logical form, so a logical border + logical radii are used instead. */
body:not(.admin) .mob-menu .offcanvas-body ul .mob-item .mob-link.active,
body:not(.admin) .mob-link.active{
  color:var(--ab-brand-strong);
  background:var(--ab-brand-tint);
  border-inline-start-color:var(--ab-brand);
  border-start-start-radius:10px;
  border-end-start-radius:10px;
  padding-inline-start:9px;
}

body:not(.admin) .mob-item .theme-btn{
  display:flex;
  inline-size:100%;
  margin-block-start:var(--ab-s5);
}

/* ==========================================================================
   §7  .ab-bar — THE STICKY BOTTOM ACTION BAR
   --------------------------------------------------------------------------
   Pure links + one button. Fully functional with JS off (JS only adds the
   hide-on-scroll and the "back to top" reveal).
   ========================================================================== */

.ab-bar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:var(--ab-z-bar);
  display:none;                                   /* shown ≤991.98px only */
  align-items:stretch;
  gap:var(--ab-s2);
  padding-block:var(--ab-s2);
  padding-block-end:calc(var(--ab-s2) + var(--ab-safe-b));
  /* Notch-aware in landscape. These are PHYSICAL on purpose: env() insets are
     physical, and `padding-inline:A B` would hand the LEFT inset to the RIGHT
     edge of the screen in RTL. */
  padding-left:max(var(--ab-s3), env(safe-area-inset-left,0px));
  padding-right:max(var(--ab-s3), env(safe-area-inset-right,0px));
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--ab-line);
  box-shadow:var(--ab-sh-bar);
  transform:translateY(0);
  transition:transform var(--ab-d3) var(--ab-ease-out);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ab-bar{ background:#fff; }
}

@media (max-width:991.98px){ .ab-bar{ display:flex; } }

/* Flex, not grid, on purpose. The partial renders a VARIABLE number of items
   (a missing phone / Waze setting drops one) and tags the bar .ab-bar--3,
   --2 or --1. A fixed `grid-template-columns` would have to be restated for
   every count — and any count without a matching rule would keep the 4-track
   template and leave dead columns. Weighted flex items reproduce the intended
   1.4 / 1 / 1 / .8 ratio and re-divide correctly for ANY count, including the
   no-JS case below where #abTop removes itself. */

/* hide-on-scroll-down / while a sheet, modal or the keyboard is up */
.ab-bar.ab-hidden,
body.ab-kb .ab-bar,
body.ab-bar-off .ab-bar{ transform:translateY(calc(100% + 8px)); }

.ab-item{
  display:flex;
  flex:1 1 0;            /* equal share by default; weights below re-balance */
  min-inline-size:0;     /* let a long Hebrew label shrink instead of overflow */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-block-size:var(--ab-tap);
  border:0;
  padding:6px 4px;
  border-radius:var(--ab-r-pill);
  background:var(--ab-surface-2);
  color:var(--ab-ink);
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform var(--ab-d1) var(--ab-ease),
             background-color var(--ab-d2) var(--ab-ease),
             opacity var(--ab-d2) var(--ab-ease);
}
.ab-item:active{ transform:scale(.96); }
.ab-item:hover{ color:var(--ab-ink); }
.ab-item svg{ inline-size:20px; block-size:20px; flex:none; }
.ab-label{ font-size:11px; font-weight:600; letter-spacing:0; }

#abCall{
  flex-grow:1.4;              /* the primary action gets the widest slot */
  background:var(--ab-brand);
  color:#fff;
  box-shadow:var(--ab-sh-brand);
  font-size:12px;
}
#abCall:hover{ color:#fff; }
#abCall:active{ background:var(--ab-brand-press); }

#abWhats{ background:rgba(37,211,102,.12); color:#0f7a3d; }
#abWhats:hover{ color:#0f7a3d; }
#abWhats:active{ background:rgba(37,211,102,.22); }

#abWaze{ background:rgba(20,198,247,.14); color:#0b6d88; }
#abWaze:hover{ color:#0b6d88; }
#abWaze:active{ background:rgba(20,198,247,.26); }

/* "back to top" only earns its slot once you are deep in the page.
   With JS off it simply never appears — and never blocks a tap. */
#abTop{
  flex-grow:.8;               /* narrowest slot — it is the least-used action */
  background:transparent;
  color:var(--ab-ink-muted);
  opacity:0;
  pointer-events:none;
}
#abTop.ab-ready{ opacity:1; pointer-events:auto; }
#abTop:active{ background:var(--ab-surface-2); }
/* With JS off it can never become .ab-ready, so remove it from the row
   entirely rather than leaving a permanently blank slot. html.ab-js is set by
   a synchronous inline <head> script, so this never flashes. */
html:not(.ab-js) #abTop{ display:none; }

/* narrow phones — tighten the gutters, never the type. At 320px this still
   leaves ~95px for חיוג and ~68px for each secondary item. */
@media (max-width:430px){
  .ab-bar{
    gap:6px;
    /* physical, for the same reason as the base rule */
    padding-left:max(var(--ab-s2), env(safe-area-inset-left,0px));
    padding-right:max(var(--ab-s2), env(safe-area-inset-right,0px));
  }
}

/* landscape phone: reclaim vertical space, keep the 44px floor */
@media (max-width:991.98px) and (max-height:450px) and (orientation:landscape){
  /* on :root, NOT on .ab-bar — body.has-ab reads --ab-bar-h indirectly through
     --ab-bar-space, and a custom property set on .ab-bar never reaches <body>,
     so the space reservation would have stayed at the portrait 62px. */
  :root{ --ab-bar-h:52px; }
  .ab-bar{ padding-block:5px; }
  .ab-item{ min-block-size:44px; padding-block:4px; }
  .ab-item svg{ inline-size:18px; block-size:18px; }
}

/* --- space reservation + float restacking -------------------------------- */
@media (max-width:991.98px){
  body.has-ab{ padding-block-end:calc(var(--ab-bar-space) + var(--ab-s2)); }

/* the WhatsApp float must sit ABOVE the bar, not under it */
  body:not(.admin) .wp-bottom{
    z-index:var(--ab-z-fab);
    inset-block-end:calc(var(--ab-bar-space) + var(--ab-s3));
    inset-inline-start:calc(var(--ab-s4) + var(--ab-safe-i));
    left:auto; right:auto;                 /* neutralise style.css:719 */
    inline-size:52px;
    block-size:52px;
  }
  body:not(.admin) .wp-bottom img{ inline-size:52px; block-size:52px; }

/* negishim accessibility widget: responsive.css:307 sets top:90px without
     clearing style.css:761's `bottom:150px !important` — the element then
     stretches from y=90 to y=viewport-150 and silently eats every tap down
     the physical-left edge. Both sides are !important, so this must be too.
     Best-effort against a third-party widget, hence the !important. */
  body:not(.admin) #accessibility_container,
  body:not(.admin) .btn_accessibility_action,
  body:not(.admin) .btn_accessibility.accessibility_component{
    bottom:auto !important;
    height:auto !important;
    top:calc(var(--ab-header-h) + 24px) !important;
    z-index:var(--ab-z-fab) !important;
  }
  /* cap the LAUNCHER only — never the container, or the widget's own panel
     would be clipped when a user opens it */
  body:not(.admin) .btn_accessibility_action,
  body:not(.admin) .btn_accessibility.accessibility_component{
    max-height:60px !important;
  }
  /* defensive catch-all for whatever id/class that widget ships this week */
  body:not(.admin) [id*="accessibility"][style*="position: fixed"]{ bottom:auto !important; }
}

/* ==========================================================================
   §8  CAR GRID + CARD
   ========================================================================== */

body:not(.admin) .car-box{
  position:relative;
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--ab-r-card);
  box-shadow:var(--ab-sh-1);
  overflow:hidden;
  padding:var(--ab-s2);
  margin-block-end:var(--ab-s3);
  block-size:calc(100% - var(--ab-s3));      /* equal-height cards in a row */
  display:flex;
  flex-direction:column;
  transition:transform var(--ab-d1) var(--ab-ease),
             box-shadow var(--ab-d2) var(--ab-ease);
}

/* --- media box: fixed ratio = zero layout shift when the image lands ----- */
body:not(.admin) .car-img{
  position:relative;
  aspect-ratio:4/3;
  background:var(--ab-surface-3);
  border:1px solid var(--ab-line);
  border-radius:var(--ab-r-media);
  overflow:hidden;
  flex:none;
}
/* the <a> inside .car-img is inline by default, so height:100% on the image
   would resolve against nothing. Make the link fill the box. */
body:not(.admin) .car-img > a{
  display:block;
  inline-size:100%;
  block-size:100%;
}
body:not(.admin) .car-img img,
body:not(.admin) .car-img video{
  width:100% !important;
  height:100% !important;      /* beats style.css:1048 .car-img img{height:200px} */
  object-fit:cover;
  border-radius:var(--ab-r-media);
  display:block;
}

/* --- ribbon → badge pill -------------------------------------------------
   home.blade.php ships an inline <style> that pins .ribbon to top:30px /
   right:-3px. That block loads AFTER this file (@yield('custom-css')), so
   these selectors deliberately carry higher specificity, and they also fix
   car_detail.blade.php's related cards, which the inline block never covered. */
body:not(.admin) .car-box .ribbon{
  position:absolute;
  z-index:3;
  inset-block-start:10px;
  inset-inline-start:10px;
  top:auto; right:auto; left:auto;      /* neutralise the inline <style> */
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  color:#fff;
  background:rgba(220,52,76,.95);
  border-radius:var(--ab-r-pill);
  box-shadow:0 2px 8px rgba(1,6,15,.25);
  pointer-events:none;
}
body:not(.admin) .car-box .ribbon::before{ display:none; }

/* --- content ------------------------------------------------------------- */
body:not(.admin) .car-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:var(--ab-s3) var(--ab-s2) var(--ab-s1);
}
/* 1 line -> 2. -webkit-line-clamp is inert without all three of display,
   box-orient and overflow. style.css:1054-1061 happens to supply them today,
   but restating them here means a change over there can only cost us the
   second line, never silently unclamp every title on the site. */
body:not(.admin) .car-content h3{
  font-size:var(--ab-fs-card);
  font-weight:700;
  line-height:1.28;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  -webkit-line-clamp:2;
  min-block-size:2.56em;
  margin-bottom:var(--ab-s2);
}
body:not(.admin) .car-content h3 img{
  inline-size:22px;
  block-size:22px;
  object-fit:contain;
  vertical-align:middle;
  margin-inline-end:6px;
}

/* whole-card tap target — the title link stretches over the card, the CTA
   and the ribbon stay above it. */
body:not(.admin) .car-content h3 a{ position:static; }
body:not(.admin) .car-content h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
body:not(.admin) .car-footer .theme-btn{ position:relative; z-index:2; }

/* --- price --------------------------------------------------------------- */
body:not(.admin) .car-price{
  display:inline-block;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ab-brand-strong);
}

/* --- spec chips ---------------------------------------------------------- */
body:not(.admin) .car-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-block-start:var(--ab-s3);
  margin-block-end:0;
  padding:0;
}
body:not(.admin) .car-list li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:5px 9px;
  border-radius:var(--ab-r-pill);
  background:var(--ab-surface-2);
  border:1px solid var(--ab-line);
  font-size:var(--ab-fs-spec);
  font-weight:500;
  line-height:1.25;
  color:var(--ab-ink-muted);
}
/* Bootstrap's .w-100 utility is !important, so the chip needs the same weight */
body:not(.admin) .car-list li.w-100{ width:auto !important; }
body:not(.admin) .car-list img{
  inline-size:15px;
  block-size:15px;
  margin:0;
  flex:none;
}

body:not(.admin) .car-footer{
  margin-block-start:auto;
  padding-block-start:var(--ab-s3);
  border-top:1px solid var(--ab-line);
}
body:not(.admin) .car-footer .theme-btn{ inline-size:100%; }

@media (max-width:575.98px){
  body:not(.admin) .car-box{ padding:6px; margin-block-end:var(--ab-s3); }
  body:not(.admin) .car-content{ padding:var(--ab-s3) 6px var(--ab-s1); }
  body:not(.admin) .car-list{ gap:5px; margin-block-start:var(--ab-s2); }
  body:not(.admin) .car-list li{ padding:4px 8px; font-size:12px; }
  body:not(.admin) .car-footer{ padding-block-start:var(--ab-s2); }
  body:not(.admin) .car-footer .theme-btn{ font-size:14px; padding:12px 10px; }

/* --- TWO-UP GRID -----------------------------------------------------
     Primary path is the Blade `col-6` edit. These are the CSS fallback and
     are deliberately narrow: #car_detail's direct children are only ever car
     columns, and the :has() rule only matches a column that holds a .car-box.
     A blanket `.car-listing .row > [class*="col-"]` would also halve the
     section heading, which shares that row. */
  body:not(.admin) #car_detail > [class*="col-"],
  body:not(.admin) #loadMore_data > [class*="col-"]{
    inline-size:50%;
    flex:0 0 50%;
    max-inline-size:50%;
  }
  body:not(.admin) .row > [class*="col-"]:has(> .car-box){
    inline-size:50%;
    flex:0 0 50%;
    max-inline-size:50%;
  }
  /* tighter gutters so two cards actually breathe on a 360px screen */
  body:not(.admin) #car_detail,
  body:not(.admin) .car-listing .row{ --bs-gutter-x:12px; }
}

/* ==========================================================================
   §9  REVEAL ON SCROLL   (gated behind html.ab-js — no JS, no hidden content)
   ========================================================================== */

html.ab-js body:not(.admin) .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--ab-d3) var(--ab-ease-out),
             transform var(--ab-d3) var(--ab-ease-out);
  will-change:opacity,transform;
}
html.ab-js body:not(.admin) .reveal.is-in{
  opacity:1;
  transform:none;
  will-change:auto;                 /* release the layer once it has landed */
}

/* Stagger. .reveal usually sits alone inside its column, so :nth-child on the
   element itself is always 1 — the delay has to come off the column. */
html.ab-js body:not(.admin) .row > [class*="col-"]:nth-child(2) .reveal{ transition-delay:60ms; }
html.ab-js body:not(.admin) .row > [class*="col-"]:nth-child(3) .reveal{ transition-delay:120ms; }
html.ab-js body:not(.admin) .row > [class*="col-"]:nth-child(4) .reveal{ transition-delay:180ms; }
html.ab-js body:not(.admin) .row > [class*="col-"]:nth-child(5) .reveal{ transition-delay:220ms; }
html.ab-js body:not(.admin) .row > [class*="col-"]:nth-child(6) .reveal{ transition-delay:260ms; }
/* and the flat case, kept for any .reveal that is a direct sibling */
html.ab-js .reveal:nth-child(2){ transition-delay:60ms; }
html.ab-js .reveal:nth-child(3){ transition-delay:120ms; }
html.ab-js .reveal:nth-child(4){ transition-delay:180ms; }

/* ==========================================================================
   §10  .img-box  +  .skel  SKELETONS
   ========================================================================== */

.img-box{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--ab-surface-3);
  border-radius:var(--ab-r-media);
  aspect-ratio:var(--ab-ar,4/3);
}
.img-box > img,
.img-box > video{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
}

.skel{
  position:relative;
  overflow:hidden;
  background:var(--ab-surface-3);
  border-radius:var(--ab-r-media);
}
.skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:ab-shimmer 1.25s infinite;
}
@keyframes ab-shimmer{ 100%{ transform:translateX(100%); } }

.ab-skel-card{
  border:1px solid var(--ab-line);
  border-radius:var(--ab-r-card);
  padding:var(--ab-s2);
  background:#fff;
  margin-block-end:var(--ab-s3);
}
.ab-skel-card .skel.m{ aspect-ratio:4/3; margin-block-end:var(--ab-s3); }
.ab-skel-card .skel.l{ block-size:14px; margin:0 0 8px; }
.ab-skel-card .skel.l.short{ inline-size:55%; }

/* ==========================================================================
   §11  BRAND FILTER AS A SCROLL-SNAP CHIP RAIL  (#make_detail)
   ========================================================================== */

@media (max-width:991.98px){
  body:not(.admin) #make_detail{
    display:flex !important;
    flex-wrap:nowrap;
    /* the element also carries Bootstrap's .justify-content-center utility,
       which is !important. Left centred, an overflowing rail is pushed out of
       BOTH edges and the first chip is unreachable — so this has to match it. */
    justify-content:flex-start !important;
    align-items:stretch;
    gap:var(--ab-s2);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--ab-s3);
    -webkit-overflow-scrolling:touch;
    padding-block:var(--ab-s2) var(--ab-s3);
    /* bleed to the viewport edges so the rail reads as scrollable */
    margin-inline:calc(var(--ab-s3) * -1);
    padding-inline:var(--ab-s3);
    scrollbar-width:none;
  }
  body:not(.admin) #make_detail::-webkit-scrollbar{ display:none; }

body:not(.admin) #make_detail > [class*="col-"]{
    flex:0 0 auto;
    inline-size:auto;
    max-inline-size:none;
    padding-inline:0;
    margin-block-end:0;
    scroll-snap-align:start;
  }
  /* the chip is wrapped in an inline <a> in the Blade partial */
  body:not(.admin) #make_detail .checkbox-brand > a{ display:block; }
  body:not(.admin) #make_detail .checkbox-brand{ padding:0; margin-block-end:0; }
  body:not(.admin) #make_detail .form-check{ padding:0; margin:0; }

body:not(.admin) #make_detail .brand-item{
    min-inline-size:96px;
    min-block-size:96px;
    margin-block-end:0;
    padding:var(--ab-s2);
    border-radius:var(--ab-r-card);
    border:1px solid var(--ab-line);
    background:var(--ab-surface);
    box-shadow:var(--ab-sh-1);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color var(--ab-d2) var(--ab-ease),
               background-color var(--ab-d2) var(--ab-ease),
               transform var(--ab-d1) var(--ab-ease);
  }
  body:not(.admin) #make_detail .brand-item:active{ transform:scale(.96); }
  body:not(.admin) #make_detail .brand-img img{
    inline-size:56px;
    block-size:56px;
    object-fit:contain;
  }

/* Selected state. :has() is NOT forgiving: in a browser that does not support
     it the WHOLE selector list is dropped, which would have taken the .ab-on
     JS fallback and .active down with it — exactly the browsers that need the
     fallback most. So the two live in separate rules and cannot poison
     each other. Keep them split. */
  body:not(.admin) .brand-item.ab-on,
  body:not(.admin) .brand-item.active{
    border-color:var(--ab-brand);
    background:var(--ab-brand-tint);
    box-shadow:var(--ab-sh-brand);
  }
  body:not(.admin) .brand-item:has(input:checked){
    border-color:var(--ab-brand);
    background:var(--ab-brand-tint);
    box-shadow:var(--ab-sh-brand);
  }
}

/* ==========================================================================
   §12  FORMS
   ========================================================================== */

body:not(.admin) .form-control{
  min-block-size:56px;
  font-size:16px;                    /* < 16px makes iOS zoom on focus */
  color:var(--ab-ink);
  border-radius:var(--ab-r-field);
  border:1px solid #e8e8e8;
  transition:border-color var(--ab-d2) var(--ab-ease),
             box-shadow var(--ab-d2) var(--ab-ease);
}
body:not(.admin) .form-control::placeholder{ color:var(--ab-ink-muted); opacity:1; }
body:not(.admin) .form-control:focus{
  border-color:var(--ab-brand);
  box-shadow:0 0 0 3px var(--ab-brand-tint-2);
}
body:not(.admin) .form-control[aria-invalid="true"]{
  border-color:var(--ab-err);
  box-shadow:0 0 0 3px rgba(196,30,46,.14);
}
body:not(.admin) textarea.form-control{ min-block-size:120px; padding-block:12px; }

/* the phone field is <input type="number"> — spinners are useless on a phone
   and they steal 20px of the field */
body:not(.admin) input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
body:not(.admin) input[type="number"]::-webkit-outer-spin-button,
body:not(.admin) input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

body:not(.admin) .form-group label{
  margin-block-end:8px;
  font-weight:600;
  font-size:15px;
}
body:not(.admin) .error{
  font-size:13px;
  font-weight:600;
  margin-block-start:6px;
}

body:not(.admin) .find-car-form{
  border-radius:var(--ab-r-card);
  box-shadow:var(--ab-sh-1);
  border:1px solid var(--ab-line);
}

@media (max-width:991.98px){
  /* on a phone the form must lead — the decorative photo can wait */
  body:not(.admin) .contact-img{ display:none; }
  body:not(.admin) .contact-form-section{
    padding:var(--ab-s4);
    border-radius:var(--ab-r-card);
    box-shadow:var(--ab-sh-1);
    border:1px solid var(--ab-line);
  }
}
@media (max-width:575.98px){
  body:not(.admin) .contact-form{ padding-inline:var(--ab-s3); }
  body:not(.admin) .find-car-form{ padding:var(--ab-s4); }
  /* reCAPTCHA is a fixed 304px iframe — it overflows a 320px viewport */
  body:not(.admin) .g-recaptcha{
    transform:scale(.85);
    transform-origin:right top;   /* RTL default; LTR escape below */
    block-size:65px;
  }
  [dir="ltr"] body:not(.admin) .g-recaptcha{ transform-origin:left top; }
}

/* ==========================================================================
   §13  HERO
   ========================================================================== */

@media (max-width:991.98px){
  body:not(.admin) .banner-single{
    min-block-size:62svh;
    padding-block:var(--ab-s8) var(--ab-s7);
    display:flex;
    align-items:flex-end;
  }
  /* a flat 85% scrim greys the photo out; a gradient keeps the top of the
     image readable and still guarantees contrast under the copy */
  body:not(.admin) .banner-single::before{
    background:linear-gradient(to top,
      rgba(1,6,15,.94) 0%,
      rgba(1,6,15,.74) 45%,
      rgba(1,6,15,.40) 100%);
    opacity:1;
  }
  body:not(.admin) .banner-single .banner-content .banner-title{
    font-size:var(--ab-fs-hero);
    line-height:var(--ab-lh-tight);
    text-wrap:balance;
    margin:14px 0;
  }
  /* the title's inner markup comes raw from the DB — keep it in scale */
  body:not(.admin) .banner-single .banner-content .banner-title p,
  body:not(.admin) .banner-single .banner-content .banner-title div{
    font-size:inherit;
    color:inherit;
    margin:0;
  }
  body:not(.admin) .banner-single .banner-content .banner-sub-title{
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:none;          /* uppercase is a no-op in Hebrew */
  }
  body:not(.admin) .banner-single .banner-content p{ color:#fff; }
  body:not(.admin) .banner-single .banner-btn{ margin-block-start:var(--ab-s5); }
  body:not(.admin) .banner-single .theme-btn{
    inline-size:100%;
    max-inline-size:340px;
  }
}

/* ==========================================================================
   §14  TYPOGRAPHY + RHYTHM
   ========================================================================== */

body:not(.admin) h1,
body:not(.admin) h2,
body:not(.admin) h3,
body:not(.admin) h4,
body:not(.admin) .site-title,
body:not(.admin) .sub-title,
body:not(.admin) .car-detail-title,
body:not(.admin) .breadcrumb-title{
  line-height:var(--ab-lh-tight);
  text-wrap:balance;
}
body:not(.admin) .site-title{ font-size:var(--ab-fs-h2); }
body:not(.admin) .sub-title,
body:not(.admin) .car-detail-title{ font-size:var(--ab-fs-h3); }
body:not(.admin) .breadcrumb-title{ font-size:var(--ab-fs-h2); }
body:not(.admin) .site-title-tagline{
  letter-spacing:1px;
  text-transform:none;
  font-size:14px;
}
body:not(.admin) .find-car-title,
body:not(.admin) .contact-form-header h3{ font-size:var(--ab-fs-h3); }

@media (max-width:575.98px){
  body:not(.admin) .mb-50{ margin-block-end:var(--ab-s7); }
  body:not(.admin) .mt-50{ margin-block-start:var(--ab-s7); }
  body:not(.admin) .car-listing,
  body:not(.admin) .footer-widget{ padding-block:var(--ab-s7); }
  body:not(.admin) .about-car-brand{ padding-block:var(--ab-s6); }
  body:not(.admin) .site-heading{ margin-block-end:26px; }
  body:not(.admin) .site-breadcrumb{ padding-block:var(--ab-s7); }
  body:not(.admin) .car-detail-widget{
    margin-block-end:var(--ab-s5);
    padding:var(--ab-s4);
    border-radius:var(--ab-r-card);
    box-shadow:var(--ab-sh-1);
    border:1px solid var(--ab-line);
  }
  body:not(.admin) .video-content{
    margin:var(--ab-s5) var(--ab-s3);
    border-radius:var(--ab-r-card);
  }
  /* fixed-height video wrapper → ratio box, so the poster cannot shift layout */
  body:not(.admin) .video-wrapper{
    block-size:auto;
    aspect-ratio:16/9;
    border-radius:var(--ab-r-card);
    overflow:hidden;
  }
  body:not(.admin) .video-wrapper video{
    inline-size:100%;
    block-size:100%;
    object-fit:cover;
  }
  /* decorative corner patterns cost two requests and buy nothing at 360px */
  body:not(.admin) .before-patten,
  body:not(.admin) .after-patten{ display:none; }
  body:not(.admin) .box-contant{ padding:var(--ab-s4); }
}

/* ==========================================================================
   §15  CAR DETAIL — RTL repair, key-spec grid, gallery
   ========================================================================== */

/* style.css:1521 sets .slider-section{direction:ltr} so the owl arrows land
   correctly. That also flipped the Hebrew description to LTR. Repair the
   description subtree ONLY — do not touch .slider-section itself. */
body:not(.admin) .slider-section .car-single-overview,
body:not(.admin) .slider-section .car-detail-title,
body:not(.admin) .slider-section .detail-dir{
  direction:rtl;
  text-align:start;
}
body:not(.admin) .slider-section .car-single-overview *{
  direction:rtl;
  text-align:start;
  max-inline-size:100%;
}
body:not(.admin) .slider-section .car-single-overview img{ height:auto; }
/* DB-authored description tables must scroll, never widen the page */
body:not(.admin) .car-single-overview table{
  display:block;
  overflow-x:auto;
  max-inline-size:100%;
}

@media (max-width:991.98px){
  /* stack in source order — gallery (col-lg-8) first, specs (col-lg-4) after.
     style.css:1525 sets row-reverse for the desktop two-column layout. */
  body:not(.admin) .slider-section .row{ flex-direction:column; }
  body:not(.admin) .slider-section .car-detail-slider .main-img-slider img,
  body:not(.admin) .slider-section .car-detail-slider .main-img-slider video{
    border-radius:var(--ab-r-media);
    background:var(--ab-surface-3);
  }
  /* owl arrows are inside the [dir="ltr"] island — 44px tap targets,
     visible against a photo */
  body:not(.admin) #big .owl-prev,
  body:not(.admin) #big .owl-next{
    inline-size:44px;
    block-size:44px;
    margin-block-start:-22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--ab-r-pill);
    background:rgba(255,255,255,.88);
    box-shadow:var(--ab-sh-1);
    opacity:1;
  }
  body:not(.admin) #thumbs .item img,
  body:not(.admin) #thumbs .item video{
    block-size:64px;
    border-radius:8px;
  }
  body:not(.admin) #thumbs .owl-prev,
  body:not(.admin) #thumbs .owl-next{
    inline-size:36px;
    block-size:36px;
    background:rgba(255,255,255,.88);
    box-shadow:var(--ab-sh-1);
  }
}

@media (max-width:575.98px){
  /* two-up spec grid instead of a ragged flex row */
  body:not(.admin) .car-key-info ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--ab-s2);
  }
  body:not(.admin) .car-key-info ul li{ flex:none; min-inline-size:0; }
  /* the markup nests a .col-12 (holding .car-footer) inside that <ul> */
  body:not(.admin) .car-key-info ul > .col-12{ grid-column:1 / -1; }
  body:not(.admin) .car-key-item{
    margin:0;
    padding:10px;
    gap:8px;
    background:var(--ab-surface-2);
    border:1px solid var(--ab-line);
    border-radius:var(--ab-r-media);
    block-size:100%;
  }
  body:not(.admin) .car-key-icon img{ inline-size:22px; }
  body:not(.admin) .car-key-content .car-key{ font-size:13px; margin-bottom:2px; }
  body:not(.admin) .car-key-content span{ font-size:14px; }

body:not(.admin) .car-detail-widget .car-footer.d-flex{
    align-items:center;
    gap:var(--ab-s3);
    padding-block-start:var(--ab-s4);
  }
  body:not(.admin) .car-detail-widget .car-footer.d-flex .theme-btn2{
    flex:1 1 auto;
    margin-inline-end:0;
    margin-right:0;                    /* neutralise style.css:508 */
  }
  body:not(.admin) .car-detail-widget .car-footer.d-flex img{
    inline-size:48px;
    block-size:48px;
    flex:none;
  }
  body:not(.admin) .car-single-price{ font-size:22px; }
}

/* ==========================================================================
   §16  FOOTER + ICON-CHIP REPAIR
   --------------------------------------------------------------------------
   style.css colours these chips #000 and only the (FontAwesome-JS injected)
   <svg> #fff. With all.min.js gone the <i> stays an <i> and inherits black
   on red — 2.1:1, unreadable. Colour the chip itself.
   ========================================================================== */

body:not(.admin) .footer-contact li span,
body:not(.admin) .footer-social li a span{ color:#fff; }
body:not(.admin) .footer-contact li span i,
body:not(.admin) .footer-social li a span i,
body:not(.admin) .contact-info-icon span i{ color:#fff; }

/* the same rules only ever set margins on svg — mirror them for <i> */
body:not(.admin) .footer-contact li span{ margin-inline-end:15px; margin-left:0; }
body:not(.admin) .footer-list li a i{ margin-inline-end:5px; color:var(--ab-brand); }
body:not(.admin) .top-header-contact a i{ margin-inline-end:5px; color:var(--ab-brand); }
body:not(.admin) .car-detail-meta li i{ margin-inline-end:5px; color:var(--ab-brand); }

@media (max-width:991.98px){
  body:not(.admin) .footer-social{ justify-content:flex-start; gap:var(--ab-s3); }
  body:not(.admin) .footer-social li a span{
    inline-size:44px;
    block-size:44px;
    line-height:44px;
  }
  body:not(.admin) .footer-contact li{ min-block-size:44px; margin-block-end:var(--ab-s3); }
  body:not(.admin) .footer-contact li span{
    min-inline-size:36px;
    block-size:36px;
    line-height:36px;
    border-radius:10px;
    flex:none;
  }
  body:not(.admin) .footer-list li a{
    display:inline-flex;
    align-items:center;
    min-block-size:44px;
  }
  /* style.css:569 indents the footer blurb by 18px with padding-left, which
     in RTL lands on the wrong edge entirely */
  body:not(.admin) .footer-widget p{ padding-left:0; padding-inline:0; }
  body:not(.admin) .footer-widget-title{ margin-block-end:var(--ab-s4); }
  body:not(.admin) .copyright{ text-align:center; }
  body:not(.admin) .copyright .footer-social{ justify-content:center; margin-block-start:var(--ab-s3); }
}

/* ==========================================================================
   §17  DESKTOP GUARD · PRINT · FINAL SWEEPS
   ========================================================================== */

/* --- desktop is untouched ------------------------------------------------ */
@media (min-width:992px){
  .ab-bar,
  .ab-quick{ display:none !important; }
  body.has-ab{ padding-block-end:0; }
  body:not(.admin) .car-box{ block-size:auto; display:block; }
  body:not(.admin) .car-content{ display:block; }
  body:not(.admin) .car-footer{ margin-block-start:15px; }
}

/* --- no horizontal scroll, ever ------------------------------------------
   `clip` (not `hidden`) so it never turns the body into a scroll container
   and breaks the sticky header. Unsupported values are simply dropped. */
@media (max-width:991.98px){
  body:not(.admin){ overflow-x:clip; }
}

/* --- dark preference: only the bottom chrome ------------------------------
   The site is a committed light design; repainting it dark would be a
   different product. But a full-width white slab pinned to the bottom of the
   screen is genuinely painful at night, so the bar (and only the bar) reads
   as system chrome and follows the OS. */
@media (prefers-color-scheme:dark){
  .ab-bar{
    background:rgba(22,24,28,.90);
    border-top-color:rgba(255,255,255,.10);
    box-shadow:0 -6px 24px rgba(0,0,0,.45);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .ab-bar{ background:#16181c; }
  }
  .ab-item{ background:rgba(255,255,255,.08); color:#f2f4f7; }
  .ab-item:hover{ color:#f2f4f7; }
  #abWhats{ background:rgba(37,211,102,.18); color:#5ce08f; }
  #abWhats:hover{ color:#5ce08f; }
  #abWaze{ background:rgba(20,198,247,.20); color:#6fdcfb; }
  #abWaze:hover{ color:#6fdcfb; }
  #abTop{ background:transparent; color:#aab3c0; }
  #abTop:active{ background:rgba(255,255,255,.10); }
  /* #abCall keeps the brand red — it is the one thing that must not change */
}

/* --- reduced motion, final sweep ----------------------------------------
   §4 already kills durations globally with !important. These are the few
   effects that need to be removed rather than shortened. */
@media (prefers-reduced-motion:reduce){
  .skel::after{ display:none; }
  .ab-progress{ display:none; }
  html.ab-js body:not(.admin) .reveal{ opacity:1; transform:none; }
  body:not(.admin) .site-heading .heading-divider:after{ animation:none; }
  body:not(.admin) .play-btn::after{ animation:none; }
  body:not(.admin) header .navbar.fixed-header{ animation:none; }
}

/* --- forced colours (Windows high contrast) ------------------------------ */
@media (forced-colors:active){
  .ab-bar{ border-top:1px solid CanvasText; background:Canvas; }
  .ab-item{ border:1px solid CanvasText; }
  body:not(.admin) .car-box{ border:1px solid CanvasText; }
}

/* --- print ---------------------------------------------------------------- */
@media print{
  .ab-bar,
  .ab-quick,
  .ab-progress,
  .ab-skip,
  body:not(.admin) .wp-bottom,
  body:not(.admin) .navbar-toggler,
  body:not(.admin) .waze-bottom,
  body:not(.admin) .theme-btn.mob-btn{ display:none !important; }
  body.has-ab{ padding-block-end:0; }
  body:not(.admin) header{ position:static; }
  body:not(.admin) .car-box{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  html.ab-js body:not(.admin) .reveal{ opacity:1; transform:none; }
}

/* --- why there is no .reveal failsafe here -------------------------------
   .reveal is applied BY mobile-boost.js, never by Blade. If the script fails
   to load, or is blocked, or throws before its loop, no element ever carries
   the class and nothing is hidden — the page renders fully. A timed CSS
   failsafe would be worse than useless: it would force every below-the-fold
   card visible a few seconds in and destroy the effect on slow scrollers. */

/* ============================ end mobile-boost.css ======================== */

/* ==========================================================================
   §18  DE-DUPLICATE THE WHATSAPP ENTRY POINT (phones only)
   The floating .wp-bottom bubble rendered 9px above .ab-bar, so the same
   corner held two WhatsApp targets. .ab-bar already offers a larger, labelled
   וואטסאפ action in the thumb zone, so the bubble is redundant <=991.98px.
   Desktop keeps the bubble: no action bar is shown there.
   ========================================================================== */
@media (max-width: 991.98px) {
  body:not(.admin) .wp-bottom { display: none !important; }
}

/* ==========================================================================
   §19  HERO REDESIGN (phones)
   Problem this fixes: the hero read as "text, text, text". The dealership
   photo behind it was being crushed by a 94% scrim, and the right-hand
   .banner-img rendered an empty 714px placeholder box (vImage was NULL).
   Now: the photo is visible, the copy sits on a readable gradient, and a real
   car photo anchors the composition.
   ========================================================================== */
@media (max-width: 991.98px) {

body:not(.admin) .banner-single{
    min-block-size:auto;
    padding-block:calc(var(--ab-header-h) + var(--ab-s5)) var(--ab-s5);
    display:block;
    background-position:center 28% !important;
  }

/* Let the photograph read. Dark where the text sits, clear up top so the
     showroom scene is actually visible. */
  body:not(.admin) .banner-single::before{
    background:linear-gradient(to bottom,
      rgba(1,6,15,.42) 0%,
      rgba(1,6,15,.55) 38%,
      rgba(1,6,15,.88) 78%,
      rgba(1,6,15,.96) 100%) !important;
  }

body:not(.admin) .banner-single .banner-content{ text-align:start; }

body:not(.admin) .banner-single .banner-sub-title{
    display:inline-block;
    background:var(--ab-brand);
    color:#fff;
    padding:5px 14px;
    border-radius:var(--ab-r-pill);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.2px;
    margin-block-end:var(--ab-s3);
    box-shadow:var(--ab-sh-brand);
  }

body:not(.admin) .banner-single .banner-title{
    font-size:clamp(30px,8.2vw,46px);
    margin:0 0 var(--ab-s3);
    text-shadow:0 2px 18px rgba(1,6,15,.55);
  }

/* the two long benefit sentences: smaller, calmer, capped so they stop
     competing with the headline */
  body:not(.admin) .banner-single .banner-content p{
    font-size:15px;
    line-height:1.6;
    opacity:.92;
    max-inline-size:36ch;
    margin-block-end:var(--ab-s2);
  }

body:not(.admin) .banner-single .banner-btn{
    margin-block-start:var(--ab-s4);
    display:flex;
  }
  body:not(.admin) .banner-single .banner-btn .theme-btn{
    inline-size:auto;
    min-inline-size:190px;
    max-inline-size:none;
    font-size:19px;
    font-weight:800;
    letter-spacing:.5px;
    padding-block:15px;
    box-shadow:var(--ab-sh-brand);
  }

/* The real hero car photo: a proper elevated card instead of a bare <img>
     that used to be an empty placeholder. */
  body:not(.admin) .banner-single .banner-right{ margin-block-start:var(--ab-s5); }
  body:not(.admin) .banner-single .banner-img{
    border-radius:var(--ab-r-card);
    overflow:hidden;
    box-shadow:var(--ab-sh-2);
    border:1px solid rgba(255,255,255,.14);
    background:var(--ab-surface-3);
    aspect-ratio:16/10;              /* reserves space -> no layout shift */
  }
  body:not(.admin) .banner-single .banner-img img{
    inline-size:100%;
    block-size:100%;
    object-fit:cover;
    display:block;
  }
  /* nothing to show -> take up no space at all */
  body:not(.admin) .banner-single .banner-img:empty{ display:none; }
}

/* Very small phones: keep the hero from pushing the catalogue off-screen */
@media (max-width: 400px) {
  body:not(.admin) .banner-single .banner-title{ font-size:clamp(26px,7.6vw,34px); }
  body:not(.admin) .banner-single .banner-content p{ font-size:14.5px; }
}

/* ==========================================================================
   §20  HERO TYPE HIERARCHY FIX (phones)
   The banner copy is raw DB HTML and nests a whole document inside the
   outer <h1 class="banner-title">:
        h1.banner-title > span > ( h1.banner-title , p , p )
   §13 set `.banner-title p{font-size:inherit}` to keep DB markup "in scale",
   but inherit here means the HERO size, so both body paragraphs rendered at
   ~30px and the hero became a wall of text. Give each level its own size.
   ========================================================================== */
@media (max-width: 991.98px) {

body:not(.admin) .banner-single .banner-content .banner-title{
    font-size:clamp(27px,7.6vw,42px);
    line-height:1.16;
  }

/* the nested headline keeps the hero size */
  body:not(.admin) .banner-single .banner-content .banner-title .banner-title{
    font-size:1em;
    line-height:inherit;
    display:block;
    margin:0 0 var(--ab-s3);
    text-shadow:0 2px 18px rgba(1,6,15,.6);
  }

/* the two benefit sentences drop to real body size */
  body:not(.admin) .banner-single .banner-content .banner-title p{
    font-size:15px;
    line-height:1.55;
    font-weight:500;
    margin:0 0 var(--ab-s1);
    max-inline-size:34ch;
    text-shadow:0 1px 10px rgba(1,6,15,.5);
  }
  body:not(.admin) .banner-single .banner-content .banner-title p span{
    font-size:inherit;
    line-height:inherit;
  }
  /* the highlighted phrases stay emphatic but in-scale */
  body:not(.admin) .banner-single .banner-content .banner-title p strong,
  body:not(.admin) .banner-single .banner-content .banner-title p strong span{
    font-size:inherit;
    font-weight:800;
    color:var(--ab-brand-on-dark);
  }

/* Crop toward the red car + salesperson rather than centring on a face. */
  body:not(.admin) .banner-single{
    background-position:32% 38% !important;
  }
}

@media (max-width: 400px) {
  body:not(.admin) .banner-single .banner-content .banner-title{ font-size:clamp(24px,7.2vw,32px); }
  body:not(.admin) .banner-single .banner-content .banner-title p{ font-size:14.5px; }
}

/* ==========================================================================
   §21  REMOVE DUPLICATED ACTIONS ON PHONES
   The sticky .ab-bar already puts חיוג / וואטסאפ / ניווט under the thumb on
   every screen. The header repeated call (.mob-btn) and waze (.waze-bottom)
   at the top, so the same three actions appeared twice. Drop the header
   copies on phones: the bar is closer to the thumb and always in reach.
   Desktop keeps them — no action bar is rendered there.
   ========================================================================== */
@media (max-width: 991.98px) {
  body:not(.admin) .mob-header .mob-btn,
  body:not(.admin) .mob-header .waze-bottom { display: none !important; }

/* hamburger on one side, logo on the other, nothing competing between */
  body:not(.admin) .main-header .mob-header{
    display:flex;
    align-items:center;
    justify-content:space-between;   /* brand at the inline-start edge, burger at the end */
    gap:var(--ab-s3);
    flex:1 1 auto;
    inline-size:100%;
  }
  body:not(.admin) .main-header .navbar-brand{
    margin-inline-end:0;
    display:inline-flex;
    align-items:center;
  }
  body:not(.admin) .main-header .navbar-brand img{
    max-block-size:46px;
    inline-size:auto;
    object-fit:contain;
  }
}

/* ==========================================================================
   §23  DOCUMENT PAGES (.ab-doc) — accessibility statement and future text pages
   Unscoped by breakpoint on purpose: a text page should read well everywhere.
   ========================================================================== */
body:not(.admin) .ab-doc{ padding-block:var(--ab-s7) var(--ab-s8); background:var(--ab-surface-2); }
body:not(.admin) .ab-doc__card{
  max-inline-size:820px; margin-inline:auto;
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--ab-r-card);
  box-shadow:var(--ab-sh-1);
  padding:clamp(20px,5vw,40px);
}
body:not(.admin) .ab-doc__lead{
  font-size:clamp(16px,4vw,18px); line-height:1.75; color:var(--ab-ink);
  border-inline-start:4px solid var(--ab-brand);
  padding-inline-start:var(--ab-s4);
  margin-block-end:var(--ab-s5);
}
body:not(.admin) .ab-doc h2{
  font-size:clamp(18px,4.6vw,22px); font-weight:800; color:var(--ab-ink);
  margin-block:var(--ab-s5) var(--ab-s3);
}
body:not(.admin) .ab-doc p{ color:var(--ab-ink-muted); line-height:1.8; }
body:not(.admin) .ab-doc__list{ list-style:none; padding:0; margin:0 0 var(--ab-s4); }
body:not(.admin) .ab-doc__list li{
  position:relative; padding-inline-start:26px; margin-block-end:var(--ab-s2);
  color:var(--ab-ink-muted); line-height:1.7;
}
/* RTL-safe tick: inline-start is the right edge in Hebrew */
body:not(.admin) .ab-doc__list li::before{
  content:"✓"; position:absolute; inset-inline-start:0; inset-block-start:0;
  color:var(--ab-brand); font-weight:800;
}
body:not(.admin) .ab-doc__contact{
  list-style:none; padding:var(--ab-s4) var(--ab-s4); margin:0;
  background:var(--ab-surface-2); border:1px solid var(--ab-line);
  border-radius:var(--ab-r-field); line-height:2;
}
body:not(.admin) .ab-doc__contact a{ color:var(--ab-brand-strong); font-weight:600; }
body:not(.admin) .ab-doc__updated{
  margin-block-start:var(--ab-s5); font-size:14px; color:var(--ab-ink-muted);
  border-block-start:1px solid var(--ab-line); padding-block-start:var(--ab-s3);
}