/* ==========================================================================
   FindMotos — Global Layout & Base
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { color: var(--color-text); }

/* ---- Accessibility helpers ------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  z-index: var(--z-toast);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Container ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.section { padding-block: var(--space-7); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

/* User-area pages (_UserLayout) sit right under the sticky header with no hero
   in between, so the full .section top padding leaves an awkward empty band.
   Pull the top in to a tight, uniform gap across every user-area page — the
   logo and the page content stay closely aligned. Bottom padding is left at
   the .section default so the footer keeps its breathing room. This replaces
   the per-page negative-margin hacks the Sell / My-listings pages used. */
.section--dash { padding-top: var(--space-5); }
@media (min-width: 768px) {
  .section--dash { padding-top: var(--space-6); }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--fs-xl); }
.section-head .link-more {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.section-head .link-more:hover { text-decoration: underline; }

/* ---- Site header ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Desktop: keep the page content and top menu on the same horizontal edges. */
@media (min-width: 1024px) {
  .container { max-width: calc(var(--container-max) * 1.2); }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  font-size: var(--fs-2xl);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.brand__mark {
  width: 28px; height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.site-nav { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.site-nav a,
.site-nav__menu summary {
  padding: var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--transition), background var(--transition);
}
@media (min-width: 900px) {
  .site-nav { gap: var(--space-3); }
  .site-nav a,
  .site-nav__menu summary {
    font-size: var(--fs-base);
    padding: var(--space-2) var(--space-3);
  }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .site-nav { gap: var(--space-2); }
  .site-nav a,
  .site-nav__menu summary {
    padding-inline: var(--space-2);
  }
}
.site-nav a:hover,
.site-nav__menu summary:hover { color: var(--color-text); background: var(--color-gray-soft); }
.site-nav a.is-active,
.site-nav__menu summary.is-active { color: var(--color-primary); }
.site-nav a.site-nav__signout { display: inline-flex; align-items: center; gap: 6px; }
.site-nav a.site-nav__signout svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-nav__menu {
  position: relative;
}
.site-nav__menu summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  list-style: none;
}
.site-nav__menu summary::-webkit-details-marker { display: none; }
.site-nav__menu summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  height: 6px;
  margin-top: -2px;
  transform: rotate(45deg);
  transition: transform var(--transition);
  width: 6px;
}
.site-nav__menu[open] summary::after {
  margin-top: 2px;
  transform: rotate(225deg);
}
.site-nav__dropdown {
  background: var(--color-surface);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-1);
  min-width: 176px;
  opacity: 0;
  padding: var(--space-2);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: calc(var(--z-header) + 1);
}
.site-nav__menu[open] .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__dropdown a {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}
.site-nav__avatar {
  align-items: center;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  height: 24px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 24px;
}

/* ---- Language switcher ----------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: var(--transition);
}
.lang-switch:hover { color: var(--color-primary); background: var(--color-gray-soft); }
.lang-switch .icon { width: 18px; height: 18px; flex: 0 0 auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle__label { display: none; }

.mobile-header-account { display: none; }

.mobile-drawer,
.nav-backdrop { display: none; }

@media (max-width: 980px) {
  body { overflow-x: hidden; --drawer-width: 100vw; }
  .site-header__inner {
    /* Menu toggle hugs one edge; the brand is absolutely centred over the bar.
       In English the toggle is on the left; under RTL the flow mirrors so it
       lands on the right — satisfying the EN-left / AR-right rule. */
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--space-1);
    height: 80px;
    padding-inline: var(--space-3);
  }
  /* Scoped to the header bar: the footer also uses .brand, and it must stay
     in normal flow — an unscoped absolute rule floated it over the page. */
  .site-header__inner .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    min-width: 0;
    font-size: 1.875rem;
    line-height: 1;
    text-align: center;
  }
  .nav-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-text);
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    margin: 0;
    min-width: 44px;
    padding: 4px 2px;
    text-align: center;
  }
  .nav-toggle:hover {
    background: var(--color-gray-soft);
    color: var(--color-primary);
  }
  .mobile-header-account {
    position: absolute;
    inset-inline-end: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
  }
  .mobile-header-account:hover {
    background: var(--color-gray-soft);
    color: var(--color-primary);
  }
  .mobile-header-account svg {
    width: 27px;
    height: 27px;
  }
  .mobile-header-account__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: rgba(47, 83, 155, 0.1);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0;
  }
  /* "Menu" label stays hidden on every page (matches the Home toggle).
     It remains in the markup for screen readers via aria-label. */
  .site-nav { display: none; }

  /* ---- Drawer account section (top of the bottom sheet) -------------- */
  /* Compact, lightweight — a small avatar + name row that links to Profile,
     followed by the account link cluster. No big profile card. */
  .mobile-drawer__profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-gray-light);
  }
  .mobile-drawer__profile:hover { background: var(--color-gray-soft); }
  .mobile-drawer__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
  }
  .mobile-drawer__profile-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .mobile-drawer__name {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-drawer__profile-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
  }
  .mobile-drawer__profile-link::after { content: " →"; }
  .mobile-drawer__signout,
  .mobile-drawer__signout svg { color: #B11E45 !important; }

  /* The side drawer overlays the page — it slides in from the edge and the
     backdrop dims what's behind. The page content is intentionally NOT shifted. */

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    width: 28px;
    height: 3px;
  }
  .nav-toggle__bars::before { top: -9px; }
  .nav-toggle__bars::after  { top: 9px; }
  /* The top/bottom bars are absolutely-positioned pseudo-elements (out of
     flow), so reserve vertical space here. */
  .nav-toggle__bars { margin: 9px 0; }

  /* Side drawer: fixed-width panel anchored to the start edge, full height.
     Slides IN from the side. The start edge mirrors with direction, so it
     opens from the LEFT in English and the RIGHT in Arabic — matching the
     hamburger's EN-left / AR-right position. The off-screen (closed) transform
     is flipped for RTL in rtl.css. */
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--drawer-width);
    max-width: 100%;
    background: var(--color-bg);
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
    z-index: var(--z-sheet);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
    box-shadow: 0 8px 30px rgba(26, 35, 48, 0.18);
  }

  /* Drawer header — brand on one side, close (✕) on the other. Flex auto-mirrors
     under RTL, so the logo sits right / close left in Arabic. */
  .mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
  }
  .mobile-drawer__brand {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: rgba(47, 83, 155, 0.82);
    letter-spacing: 0;
    text-decoration: none;
  }
  .mobile-drawer__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__close:hover { background: var(--color-gray-soft); color: var(--color-text); }
  .mobile-drawer__close svg { width: 22px; height: 22px; }

  .mobile-drawer__quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
  }
  .mobile-drawer__quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 116px;
    padding: var(--space-3);
    background: linear-gradient(135deg, rgba(47, 83, 155, 0.14), rgba(47, 83, 155, 0.06));
    border: 1px solid rgba(47, 83, 155, 0.22);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(26, 35, 48, 0.06);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
  }
  .mobile-drawer__quick-card:hover {
    border-color: rgba(47, 83, 155, 0.3);
    color: var(--color-primary);
  }
  .mobile-drawer__quick-card--sell:hover {
    background: linear-gradient(135deg, rgba(47, 83, 155, 0.18), rgba(47, 83, 155, 0.08));
  }
  .mobile-drawer__quick-card--search {
    background: linear-gradient(135deg, rgba(255, 184, 77, 0.22), rgba(255, 184, 77, 0.08));
    border-color: rgba(184, 124, 28, 0.22);
  }
  .mobile-drawer__quick-card--search:hover {
    background: linear-gradient(135deg, rgba(255, 184, 77, 0.28), rgba(255, 184, 77, 0.12));
    border-color: rgba(184, 124, 28, 0.32);
    color: #6F5017;
  }
  .mobile-drawer__quick-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: var(--radius);
    color: var(--color-primary);
    background: rgba(47, 83, 155, 0.12);
    flex: 0 0 auto;
  }
  .mobile-drawer__quick-card--search .mobile-drawer__quick-icon {
    color: #7A5B1C;
    background: rgba(255, 184, 77, 0.22);
  }
  .mobile-drawer__quick-icon svg {
    width: 31px;
    height: 31px;
  }
  .mobile-drawer__hairline {
    height: 1px;
    margin: var(--space-1) var(--space-4);
    background: var(--color-gray-light);
  }

  /* Flat link clusters — no group labels; clusters are separated by whitespace
     and a hairline. The last cluster's items push the footer to the bottom. */
  @media (max-width: 360px) {
    .mobile-drawer__quick {
      padding-inline: var(--space-3);
      gap: var(--space-1);
    }
    .mobile-drawer__quick-card {
      min-height: 104px;
      padding: var(--space-2);
      font-size: var(--fs-sm);
    }
    .mobile-drawer__quick-icon {
      width: 48px;
      height: 48px;
    }
    .mobile-drawer__quick-icon svg {
      width: 28px;
      height: 28px;
    }
  }

  .mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    flex: 0 0 auto;
  }
  .mobile-drawer__nav + .mobile-drawer__nav {
    border-top: 0;
  }

  /* "Account" group label — a slim divider heading between the Browse cluster
     and the account links. Acts as the hairline separator itself, so the nav
     that follows it does NOT also get a top border. */
  .mobile-drawer__section {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-1);
    border-top: 0;
    color: var(--color-text-faint);
    font-size: 0.75rem;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-drawer__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    padding: 10px var(--space-3);
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__nav a:hover {
    background: rgba(47, 83, 155, 0.06);
    color: var(--color-primary);
  }
  .mobile-drawer__nav a.is-active {
    background: transparent;
    color: var(--color-primary);
    font-weight: var(--fw-medium);
  }
  .mobile-drawer__nav a.is-active span { position: relative; }
  .mobile-drawer__nav a.is-active span::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    background: #D71920;
    border-radius: var(--radius-pill);
  }
  .mobile-drawer__nav svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    flex-shrink: 0;
  }
  .mobile-drawer__nav a:hover svg,
  .mobile-drawer__nav a.is-active svg {
    color: var(--color-primary);
  }
  .mobile-drawer__nav a.mobile-drawer__login {
    min-height: 46px;
    margin: var(--space-1) var(--space-1) var(--space-2);
    background: rgba(47, 83, 155, 0.08);
    border: 1px solid rgba(47, 83, 155, 0.12);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
  }
  .mobile-drawer__nav a.mobile-drawer__login:hover {
    background: rgba(47, 83, 155, 0.12);
    color: var(--color-primary-hover);
  }
  .mobile-drawer__nav a.mobile-drawer__login svg {
    color: var(--color-primary);
  }

  /* Pinned footer: a prominent Sell CTA + a slim utility row. */
  .mobile-drawer__foot {
    margin-top: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .mobile-drawer__footrow {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-gray-light);
  }
  .mobile-drawer__lang {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    background: #fff;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    color: var(--color-text);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
  }
  .mobile-drawer__lang:hover {
    background: #F8FAFD;
    border-color: rgba(47, 83, 155, 0.18);
    color: var(--color-primary);
  }
  .mobile-drawer__lang svg {
    width: 22px;
    height: 22px;
    color: var(--color-text-muted);
  }
  .mobile-drawer__lang-text {
    min-width: 0;
  }
  .mobile-drawer__lang-target {
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    white-space: nowrap;
  }
  .mobile-drawer__lang svg.mobile-drawer__lang-arrow {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
  }
  .mobile-drawer__footactions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .mobile-drawer__footicon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__footicon:hover { background: var(--color-gray-soft); color: var(--color-primary); }
  .mobile-drawer__footicon svg { width: 20px; height: 20px; }
  .mobile-drawer__footout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-soft);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__footout:hover { background: var(--color-gray-soft); color: var(--color-danger, #d92d20); }
  .mobile-drawer__footout svg { width: 20px; height: 20px; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    z-index: var(--z-overlay);
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  body.nav-open { overflow: hidden; }
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--color-gray-soft);
  border-top: 1px solid var(--color-gray-light);
  padding-block: var(--space-7);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-col h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--color-text-muted); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--color-primary); }
.footer-about p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
  max-width: 38ch;
}
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-light);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}
/* Locale info + language switch grouped on the footer-bottom's trailing side. */
.footer-bottom__locale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.footer-bottom__locale .lang-switch { font-size: var(--fs-xs); }

/* ---- Generic grid for listings -------------------------------------- */
.grid-listings {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 560px)  { .grid-listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-listings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-listings { grid-template-columns: repeat(4, 1fr); } }

/* Search-results page: one car per row on desktop, horizontal card layout */
@media (min-width: 980px) {
  .results-layout .grid-listings { grid-template-columns: 1fr; }
}