/* ─────────────────────────────────────────────────────────────
   Sobtai — one stylesheet, no build step.
   Layers keep the cascade predictable: reset → tokens → layout →
   components → utilities. Anything later always wins.
   ───────────────────────────────────────────────────────────── */

@layer reset, tokens, layout, components, utilities;

/* ── reset ─────────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Reserve the scrollbar slot so the page never jumps sideways on load. */
  html {
    scrollbar-gutter: stable;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

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

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

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

/* ── tokens ────────────────────────────────────────────────── */
@layer tokens {
  /* Open Sans is one variable file, covering every weight we use. */
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/opensans.woff2") format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    /* Brand green, taken from the logo. */
    --green: #149766;
    /* Same hue, darkened so white text and small links pass contrast. */
    --green-deep: #10846f;
    --green-dark: #0b6355;
    --green-light: #e6f7f0;
    --yellow: #ffc800;
    --orange: #ff8400;
    --blue: #0074ba;
    /* Dark brown on yellow — the magnifier button. */
    --on-yellow: #673500;

    --ink: #2f3432;
    --ink-soft: #424e4e;
    --ink-muted: #7c8b8b;

    --bg: #f3f6f5;
    --surface: #ffffff;
    --featured: #fffbf5;
    --line: #e2e8e6;

    --radius: 0px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --shadow-sm: 0 1px 2px rgb(47 52 50 / 8%);
    --shadow-md: 0 4px 16px rgb(47 52 50 / 10%);

    --container: 1200px;
    --font: "Open Sans", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
}

/* ── layout ────────────────────────────────────────────────── */
@layer layout {
  body {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  /* a modal is open: stop the page behind it from scrolling */
  body.b-modal-open {
    overflow: hidden;
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .b-main {
    padding-block: var(--space-5) var(--space-7);
  }

  .b-section + .b-section {
    margin-top: var(--space-6);
  }

  [id] {
    scroll-margin-top: var(--space-5);
  }

  .b-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .b-section__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  .b-section__note {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ink-muted);
  }

  .b-section__link {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-deep);
  }

  .b-section__link:hover {
    color: var(--green-dark);
    text-decoration: underline;
  }
}

/* ── components ────────────────────────────────────────────── */
@layer components {
  /* header */
  .b-header {
    background: var(--surface);
  }

  /* The bar is the brand surface: white on --green-deep for text contrast. */
  .b-header__bar {
    background: var(--green);
    color: #fff;
  }

  .b-header__bar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 64px;
  }

  /* the country code superscript sits past the logo's right edge; push
     the nav out of its way */

  .b-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .b-header__link {
    padding-block: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(255 255 255 / 94%);
    border-bottom: 2px solid transparent;
  }

  .b-header__link:hover {
    color: #fff;
    border-bottom-color: var(--yellow);
  }

  .b-header__lang {
    padding: 3px 12px;
    border: 1px solid rgb(255 255 255 / 55%);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
  }

  .b-header__lang:hover {
    background: rgb(255 255 255 / 12%);
  }

  .b-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
  }

  .b-header__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
  }

  .b-header__action:hover {
    color: var(--yellow);
  }

  .b-header__action .h-icon {
    width: 17px;
    height: 17px;
  }

  .b-header__post {
    padding: 8px 18px;
    font-size: 13px;
  }

  .b-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    line-height: 1;
  }

  .b-logo__mark {
    display: block;
    width: 40px;
    height: 40px;
    flex: none;
  }

  .b-logo__word {
    font-family: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  /* The lockup carries its own wordmark, and its tile is the bar's own green,
     so only the white cart and name show. The header repeats the name beside
     it at a size that stays readable on small screens. */
  .b-logo--header {
    gap: 8px;
    color: #fff;
  }

  .b-logo--header .b-logo__lockup {
    display: block;
    width: 40px;
    height: 40px;
    flex: none;
  }

  .b-logo--header .b-logo__word {
    font-size: 23px;
    letter-spacing: -0.3px;
  }

  .b-logo--small {
    gap: 8px;
  }

  .b-logo--small .b-logo__mark {
    width: 30px;
    height: 30px;
  }

  .b-logo--small .b-logo__word {
    font-size: 20px;
  }

  /* search: sits in the nav bar, beside the logo */
  .b-search {
    flex: 1;
    min-width: 0;
    max-width: 618px;
  }

  /* one white pill: location, query, magnifier */
  .b-search__field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding-right: 4px;
    background: var(--surface);
    border-radius: 60px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
  }

  .b-search__field:focus-within {
    box-shadow:
      0 0 0 2px var(--green),
      0 2px 6px rgb(0 0 0 / 16%);
  }

  /* location segment: sits inside the pill, before the query */
  .b-search__location {
    display: inline-flex;
    align-items: center;
    flex: none;
    align-self: stretch;
    margin-right: 2px;
    padding-left: 14px;
    padding-right: 12px;
    border-right: 1px solid var(--line);
  }

  .b-search__location-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 190px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .b-search__location-btn:hover {
    color: var(--ink);
  }

  .b-search__location-btn .h-icon {
    width: 16px;
    height: 16px;
    color: var(--green-deep);
  }

  .b-search__location-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .b-search__chevron {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--ink-muted);
  }

  .b-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    /* the bar sets white text, which would leave the query invisible on the
       white pill - and the caret with it */
    color: var(--ink);
    caret-color: var(--ink);
  }

  .b-search__input::placeholder {
    color: var(--ink-muted);
  }

  .b-search__button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--on-yellow);
    cursor: pointer;
    transition: background-color 120ms ease;
  }

  .b-search__button:hover {
    background: #f0bc00;
  }

  .b-search__button .h-icon {
    width: 18px;
    height: 18px;
  }

  /* the country picker */
  .b-country {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgb(16 32 28 / 58%);
  }

  .b-country[hidden] {
    display: none;
  }

  .b-country__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: min(82vh, 640px);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 16px 48px rgb(0 0 0 / 32%);
    animation: b-picker-in 160ms ease;
  }

  .b-country__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
  }

  .b-country__title {
    font-size: 16px;
    font-weight: 700;
  }

  .b-country__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .b-country__close:hover {
    background: var(--bg);
    color: var(--ink);
  }

  .b-country__note {
    padding: var(--space-4) var(--space-5) 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .b-country__list {
    display: grid;
    gap: 2px;
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
  }

  .b-country__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 10px var(--space-3);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition:
      border-color 120ms ease,
      background-color 120ms ease;
  }

  .b-country__option:hover {
    border-color: var(--green);
    background: var(--green-light);
  }

  .b-country__option.is-current {
    border-color: var(--green);
    background: var(--green-light);
  }

  .b-country__code {
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    flex: none;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .b-country__name {
    font-weight: 600;
  }

  .b-country__currency {
    margin-left: auto;
    font-size: 12px;
    color: var(--ink-muted);
  }

  /* the country code badge next to the logo */
  /* the country code superscript sits past the logo's right edge; push
     the nav out of its way */
  .b-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-right: var(--space-3);
  }

  .b-logo__code {
    position: absolute;
    top: 3px;
    right: -24px;
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    text-transform: uppercase;
  }

  .b-logo__code:hover {
    color: #fff;
  }

  .b-logo__code:focus-visible {
    outline: 1px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* location picker */
  .b-picker {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgb(16 32 28 / 58%);
  }

  .b-picker[hidden] {
    display: none;
  }

  .b-picker__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 660px;
    max-height: min(82vh, 660px);
    background: var(--surface);
    /* the picker sits inside the header, so it has to set its own ink */
    color: var(--ink);
    box-shadow: 0 16px 48px rgb(0 0 0 / 32%);
    animation: b-picker-in 160ms ease;
  }

  @keyframes b-picker-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .b-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
  }

  .b-picker__title {
    font-size: 16px;
    font-weight: 700;
  }

  .b-picker__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .b-picker__close:hover {
    background: var(--bg);
    color: var(--ink);
  }

  .b-picker__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    margin: var(--space-4) var(--space-5) 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    background: var(--surface);
  }

  .b-picker__search:focus-within {
    border-color: var(--green);
  }

  .b-picker__search .h-icon {
    color: var(--ink-muted);
  }

  .b-picker__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    caret-color: var(--ink);
  }

  .b-picker__body {
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .b-picker__empty {
    padding: var(--space-5) 0;
    font-size: 13.5px;
    color: var(--ink-muted);
    text-align: center;
  }

  .b-picker__section[hidden] {
    display: none;
  }

  .b-picker__section + .b-picker__section {
    margin-top: var(--space-5);
  }

  .b-picker__label {
    margin-bottom: var(--space-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .b-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .b-picker__chip {
    padding: 6px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition:
      border-color 120ms ease,
      color 120ms ease;
  }

  .b-picker__chip:hover {
    border-color: var(--green);
    color: var(--green-deep);
  }

  .b-picker__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--space-4);
  }

  .b-picker__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .b-picker__row:hover {
    background: var(--green-light);
  }

  .b-picker__row-name {
    font-size: 13.5px;
    font-weight: 600;
  }

  .b-picker__row-count {
    font-size: 11.5px;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  /* the arrow says "this one opens the areas inside" */
  .b-picker__row--drill {
    position: relative;
    padding-right: 28px;
  }

  .b-picker__row--drill::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1.5px solid var(--ink-muted);
    border-bottom: 1.5px solid var(--ink-muted);
    transform: rotate(-45deg);
  }

  .b-picker__row--drill:hover::after {
    border-color: var(--green-deep);
  }

  .b-picker__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-4);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-deep);
    cursor: pointer;
  }

  .b-picker__back:hover {
    color: var(--green-dark);
  }

  .b-picker__back .h-icon {
    width: 16px;
    height: 16px;
  }

  /* buttons */
  .fw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-5);
    border: 0;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color 120ms ease,
      color 120ms ease;
  }

  .fw-button--primary {
    background: var(--green-deep);
    color: #fff;
  }

  .fw-button--primary:hover {
    background: var(--green-dark);
  }

  .fw-button--accent {
    background: var(--yellow);
    color: var(--ink);
  }

  .fw-button--accent:hover {
    background: #f0bc00;
  }

  .fw-button--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .fw-button--ghost:hover {
    background: var(--surface);
  }

  .fw-button--ink {
    background: var(--ink);
    color: #fff;
  }

  .fw-button--ink:hover {
    background: #1f2322;
  }

  /* hero — the white opening band on the front page */
  .b-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--green);
  }

  .b-hero__inner {
    position: relative;
    display: grid;
    /* intro | map | location lists, so the map sits right of the headline
       and the lists hug the far right, the way the reference site does it.
       The map's column is as wide as the map asks for, so a country with a
       wider shape can have more room. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-5);
    min-height: 430px;
    padding-block: var(--space-6) var(--space-5);
  }

  .b-hero__intro {
    grid-column: 1;
    grid-row: 1;
    max-width: 460px;
  }

  .b-hero__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.33;
    color: var(--ink);
  }

  /* the second half of the headline is lighter, not italic */
  .b-hero__title em {
    font-style: normal;
    font-weight: 400;
  }

  .b-hero__subtitle {
    margin-top: var(--space-4);
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
  }

  .b-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-size: 13px;
    font-weight: 700;
    color: var(--green-deep);
  }

  .b-hero__cta::after {
    content: "→";
  }

  .b-hero__cta:hover {
    color: var(--green-dark);
    text-decoration: underline;
  }

  /* the lists hug the far right, leaving the map beside the headline */
  .b-hero__locations {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    text-align: right;
  }

  .b-hero__group + .b-hero__group {
    margin-top: var(--space-4);
  }

  .b-hero__group-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
  }

  .b-hero__links {
    margin-top: 2px;
  }

  .b-hero__links li {
    line-height: 1.65;
  }

  .b-hero__links a {
    font-size: 13.5px;
    color: var(--blue);
  }

  .b-hero__links a:hover {
    text-decoration: underline;
  }

  .b-hero__map {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 440px;
  }

  /*
   * Every country is drawn in the same box, so a small one (Singapore) and a
   * tall one (Bangladesh) both fill the right side of the band. The viewBox
   * keeps each country's own proportions inside it.
   */
  .b-hero__map svg {
    display: block;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  /*
   * Bangladesh and Japan are tall and narrow, so in the same box as the
   * others they sat smaller than the maps around them. Malaysia is the
   * other way round, so it is given more width. The phones keep their own
   * size.
   */
  @media (min-width: 1121px) {
    .b-hero__map[data-country="bd"] svg,
    .b-hero__map[data-country="jp"] svg {
      height: 460px;
    }

    .b-hero__map[data-country="my"] {
      width: 520px;
    }
  }

  /* the country, the regions and the places inside them */
  .b-map__country {
    fill: var(--green);
  }

  .b-map__region-link {
    cursor: pointer;
  }

  .b-map__region {
    fill: var(--green);
    stroke: var(--surface);
    stroke-width: 1px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 120ms ease;
  }

  .b-map__region-link:hover .b-map__region,
  .b-map__region-link:focus-visible .b-map__region {
    fill: var(--green-dark);
  }

  .b-map__district {
    cursor: pointer;
  }

  /*
   * The detailed areas of a small country: the whole neighbourhood is a
   * target, and it is drawn with a hairline between the ones next to it.
   * The land is the light brand green, and the shape under the pointer
   * deepens.
   */
  .b-map__area {
    cursor: pointer;
  }

  /*
   * The land of a map drawn from its areas. It is filled under them, so the
   * island reads as one shape, and it carries no edge of its own.
   */
  .b-map__land {
    fill: var(--green);
  }

  .b-map__area-shape {
    fill: var(--green);
    stroke: var(--surface);
    stroke-width: 0.75px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 120ms ease;
  }

  .b-map__area:hover .b-map__area-shape,
  .b-map__area:focus-visible .b-map__area-shape {
    fill: var(--green-dark);
  }

  .b-map__district-shape {
    fill: transparent;
    stroke: rgb(255 255 255 / 40%);
    stroke-width: 0.6px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .b-map__district:hover .b-map__district-shape,
  .b-map__district:focus-visible .b-map__district-shape {
    /* the district deepens under the pointer, like every other shape */
    fill: rgb(11 99 85 / 55%);
    stroke: #fff;
  }

  .b-map__edge {
    fill: none;
    stroke: var(--green-dark);
    stroke-width: 1px;
    stroke-linejoin: round;
    opacity: 0.5;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
  }

  .b-map__city {
    cursor: pointer;
  }

  .b-map__city circle {
    fill: var(--yellow);
    stroke: var(--green-dark);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
  }

  .b-map__city:hover circle,
  .b-map__city:focus-visible circle {
    fill: #fff;
  }

  /* the label that follows the pointer over the map */
  .b-map__tip {
    position: fixed;
    z-index: 70;
    padding: 5px 9px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgb(0 0 0 / 25%);
  }

  .b-hero__focus {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-top: var(--space-5);
  }

  .b-hero__focus-title {
    margin-bottom: var(--space-2);
    font-weight: 700;
    color: var(--ink);
  }

  .b-hero__categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    background: var(--surface);
  }

  .b-hero__category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2) var(--space-3);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
  }

  .b-hero__category:hover {
    background: var(--green-light);
  }

  .b-hero__category:hover span:last-child {
    text-decoration: underline;
  }

  .b-hero__category-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--green);
  }

  /*
   * Category pictograms.
   *
   * They ship as one raster sheet per size, the way the reference site did,
   * so the artwork does not travel as seventeen loose files. The sheet is a
   * column: every pictogram is one cell down, and the row is set per
   * category below.
   */
  .o-sprite {
    --cell: 18px;
    --sheet: url("/sprites/categories-18.png");
    display: inline-block;
    width: var(--cell);
    height: var(--cell);
    background-image: var(--sheet);
    background-repeat: no-repeat;
    background-size: var(--cell) calc(var(--cell) * 17);
    background-position: 0 calc(var(--row) * var(--cell) * -1);
  }

  .o-sprite--lg {
    --cell: 36px;
    --sheet: url("/sprites/categories-36.png");
  }

  /* a retina screen gets the double-size sheet, scaled back down */
  @media (min-resolution: 2dppx) {
    .o-sprite {
      --sheet: url("/sprites/categories-36.png");
    }

    .o-sprite--lg {
      --sheet: url("/sprites/categories-72.png");
    }
  }

  .o-sprite.vehicles {
    --row: 0;
  }

  .o-sprite.property {
    --row: 1;
  }

  .o-sprite.phones-tablets {
    --row: 2;
  }

  .o-sprite.electronics {
    --row: 3;
  }

  .o-sprite.home-furniture {
    --row: 4;
  }

  .o-sprite.fashion {
    --row: 5;
  }

  .o-sprite.beauty-care {
    --row: 6;
  }

  .o-sprite.services {
    --row: 7;
  }

  .o-sprite.repair-construction {
    --row: 8;
  }

  .o-sprite.commercial-tools {
    --row: 9;
  }

  .o-sprite.leisure-activities {
    --row: 10;
  }

  .o-sprite.babies-kids {
    --row: 11;
  }

  .o-sprite.food-agriculture {
    --row: 12;
  }

  .o-sprite.animals-pets {
    --row: 13;
  }

  .o-sprite.jobs {
    --row: 14;
  }

  .o-sprite.seeking-work {
    --row: 15;
  }

  .o-sprite.business-industry {
    --row: 16;
  }

  /* category grid */
  .b-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .b-category-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    transition:
      border-color 120ms ease,
      transform 120ms ease;
  }

  .b-category-tile:hover {
    border-color: var(--green);
    transform: translateY(-1px);
  }

  .b-category-tile__icon-wrap {
    display: grid;
    place-items: center;
    flex: none;
  }

  .b-category-tile__text {
    display: grid;
    min-width: 0;
  }

  .b-category-tile__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.3;
  }

  .b-category-tile__count {
    font-size: 12px;
    color: var(--ink-muted);
  }

  /* ad grid + card */
  .b-ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
  }

  .b-ad-card {
    background: var(--surface);
    border: 1px solid var(--line);
    transition:
      box-shadow 140ms ease,
      border-color 140ms ease;
  }

  .b-ad-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-md);
  }

  .b-ad-card--featured {
    background: var(--featured);
    border-color: var(--yellow);
  }

  .b-ad-card__link {
    display: block;
    height: 100%;
  }

  .b-ad-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(
      140deg,
      hsl(var(--hue, 200) 42% 90%),
      hsl(calc(var(--hue, 200) + 26) 36% 80%)
    );
  }

  /* No photos yet, so the category icon stands in as a watermark. */
  .b-ad-card__icon {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-2);
    width: 56px;
    height: 56px;
    color: rgb(47 52 50 / 16%);
  }

  .b-ad-card__cat {
    position: absolute;
    left: var(--space-2);
    bottom: var(--space-2);
    padding: 2px 8px;
    background: rgb(255 255 255 / 92%);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .b-ad-card__body {
    padding: var(--space-3);
  }

  .b-ad-card__title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
  }

  .b-ad-card__price {
    margin-top: var(--space-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
  }

  .b-ad-card__meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-muted);
  }

  .b-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .b-badge--featured {
    background: var(--yellow);
    color: var(--ink);
  }

  /* promo row */
  .b-promos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .b-promo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
  }

  .b-promo--membership {
    background: var(--yellow);
    border-color: #e6b200;
  }

  .b-promo__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .b-promo__title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
  }

  .b-promo__body {
    max-width: 46ch;
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  .b-promo__perks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: 13px;
    font-weight: 700;
  }

  .b-promo__perk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .b-promo__perk .h-icon {
    width: 14px;
    height: 14px;
    color: var(--green-deep);
  }

  .b-promo--membership .b-promo__perk .h-icon {
    color: var(--ink);
  }

  .b-promo > .fw-button {
    margin-top: var(--space-2);
  }

  /* footer: the same green as the header, so the page is book-ended */
  .b-footer {
    background: var(--green);
    color: #fff;
    margin-top: var(--space-7);
  }

  .b-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-6);
  }

  .b-footer .b-logo {
    color: #fff;
  }

  .b-footer__tagline {
    margin-top: var(--space-2);
    font-size: 13px;
    color: rgb(255 255 255 / 85%);
    max-width: 30ch;
  }

  .b-footer__credit {
    margin-top: 6px;
    font-size: 11px;
    color: rgb(255 255 255 / 65%);
  }

  .b-footer__country {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
  }

  .b-footer__country:hover {
    text-decoration: none;
  }

  .b-footer__columns {
    display: flex;
    gap: var(--space-7);
  }

  .b-footer__column {
    display: grid;
    gap: 6px;
    font-size: 13px;
    align-content: start;
  }

  .b-footer__column h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(255 255 255 / 70%);
    margin-bottom: 2px;
  }

  .b-footer__column a {
    color: #fff;
  }

  .b-footer__column a:hover {
    text-decoration: underline;
  }

  .b-footer__base {
    border-top: 1px solid rgb(255 255 255 / 22%);
    padding-block: var(--space-3);
    font-size: 12px;
    color: rgb(255 255 255 / 70%);
  }

  .b-footer__base .container {
    display: flex;
    justify-content: space-between;
  }

  .b-footer__env {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}

/* ── utilities ─────────────────────────────────────────────── */
/* the list page */
.b-list__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: var(--space-5);
  padding-block: var(--space-5);
  padding-inline: 0;
  background: var(--surface);
}

.b-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
}

/* hairline separators between the white columns, like the reference */
@media (min-width: 901px) {
  .b-filters:not(.b-filters--right) {
    border-right: 1px solid var(--line);
    padding-right: var(--space-5);
  }

  .b-filters--right {
    border-left: 1px solid var(--line);
    padding-left: var(--space-5);
  }
}

.b-filters__panel {
  background: var(--surface);
  padding: var(--space-4);
}

.b-filters__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.b-filters__group + .b-filters__group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* The two filter dropdowns belong together; no line between them. */
.b-filters__group + .b-filters__group--no-divider {
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: none;
}

/* The urgent / featured checkboxes ("Filter ads by"). */
.b-filters__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.b-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.b-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  padding: 0;
}

.b-check__box {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid #afb7ad;
  border-radius: 4px;
  background: var(--surface);
  display: grid;
  place-items: center;
}

.b-check__box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
  opacity: 0;
}

.b-check__input:checked + .b-check__box {
  background: var(--green);
  border-color: var(--green-deep);
}

.b-check__input:checked + .b-check__box::after {
  opacity: 1;
}

.b-check__input:focus-visible + .b-check__box {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.b-check:hover .b-check__box {
  border-color: var(--green);
}

.b-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 2px;
}

.b-pill--urgent {
  background: #d95e46;
}

.b-pill--featured {
  background: #673500;
}

.b-filters__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.b-dd {
  position: relative;
}

.b-dd__label {
  display: block;
  font-size: 12px;
  padding-bottom: 8px;
  color: #707676;
}

.b-dd__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 213px;
  min-height: 30px;
  padding: 0 0 0 12px;
  border: 1px solid #d4ded9;
  border-radius: 2px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    min-height 120ms ease,
    border-radius 120ms ease;
}

.b-dd__button::-webkit-details-marker {
  display: none;
}

.b-dd__button:hover {
  border-color: var(--green);
}

.b-dd__button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.b-dd__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.b-dd__chevron {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  color: #afb7ad;
  transition: transform 0.3s;
}

.b-dd[open] .b-dd__chevron {
  transform: rotate(180deg);
}

/* Open state: the button becomes the first, highlighted row of the menu. */
/* Open state: the button becomes the first, highlighted row of the menu.
   The chevron box stays outside the list, attached at the right edge of
   the first row only, like the reference. */
.b-dd[open] .b-dd__button {
  width: 213px;
  min-height: 30px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
}

.b-dd[open] .b-dd__text {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: none;
  width: 180px;
  padding: 7px 12px;
  background: #00965a26;
  border: 1px solid #eceff0;
  border-right: none;
  border-radius: 4px 0 0 0;
  color: var(--green);
}

.b-dd[open] .b-dd__chevron {
  flex: none;
  align-self: stretch;
  width: 30px;
  height: 30px;
  padding: 2px;
  background: transparent;
  border: 1px solid #eceff0;
  border-radius: 0 4px 0 0;
  transform: rotate(180deg);
  color: #afb7ad;
  margin-right: 4px;
}

.b-dd .b-dd__item.is-selected {
  background: #00965a26;
}

.b-dd[open] .b-dd__item.is-selected {
  display: none;
}

.b-dd__list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px;
  z-index: 999;
  box-sizing: border-box;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid #eceff0;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.b-dd__item {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}

.b-dd__item:hover {
  background: #00965a26;
  color: var(--green);
}

/* The category & location lists: Bikroy-style rows — an icon column, then the name with count. */
.b-filters__list {
  list-style: none;
}

.b-filters__item {
  padding-left: calc(var(--space-2) + var(--indent, 0) * 18px);
}

.b-filters__item-link {
  display: block;
  padding: 5px var(--space-2);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  color: #0060ba;
}

.b-filters__item-link:hover {
  background: var(--green-light);
}

.b-filters__item-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.b-filters__item-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.b-filters__item-icon.is-empty {
  visibility: hidden;
}

.b-filters__item-label {
  min-width: 0;
  overflow-wrap: break-word;
}

.b-filters__item-count {
  color: var(--ink-muted);
}

/* the deepest selected row shows in black, everything else is blue */
.b-filters__item.is-selected .b-filters__item-link {
  color: var(--ink);
  font-weight: 700;
}

.b-safe__title {
  font-size: 15px;
  font-weight: 800;
  padding-bottom: var(--space-2);
}

.b-safe__text {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.b-results__panel {
  background: var(--surface);
}

.b-results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line);
}

.b-results__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.b-results__count {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-muted);
}

.b-ad-list {
  list-style: none;
}

.b-ad-row {
  border-bottom: 1px solid var(--line);
}

.b-ad-row:last-child {
  border-bottom: none;
}

.b-ad-row--featured {
  background: var(--featured);
}

.b-ad-row__link {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
}

.b-ad-row__thumb {
  flex: none;
  position: relative;
  width: 140px;
  height: 104px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(
    140deg,
    hsl(var(--hue, 200) 42% 90%),
    hsl(calc(var(--hue, 200) + 26) 36% 80%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-ad-row__icon {
  width: 44px;
  height: 44px;
  color: rgb(47 52 50 / 16%);
}

.b-ad-row__cat {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  background: rgb(255 255 255 / 92%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.b-ad-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b-ad-row__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.b-ad-row__link:hover .b-ad-row__title {
  color: var(--green-deep);
  text-decoration: underline;
}

.b-ad-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-muted);
}

.b-ad-row__shop {
  width: 13px;
  height: 13px;
}

.b-ad-row__area {
  color: var(--ink-soft);
}

.b-ad-row__price {
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.b-ad-row__extras {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

/* badges on the list page sit inside the row, not on top of it */
.b-ad-row__extras .b-badge {
  position: static;
}

.b-results__empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.b-results__empty-title {
  font-size: 17px;
  font-weight: 700;
}

.b-results__empty-text {
  color: var(--ink-muted);
}

.b-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--line);
}

.b-page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  justify-content: center;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.b-page:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

.b-page.is-current {
  background: var(--green);
  border-color: var(--green-deep);
  color: #fff;
}

.b-page .h-icon {
  width: 14px;
  height: 14px;
}

.b-page__forward {
  transform: scaleX(-1);
}

@media (max-width: 1120px) {
  .b-list__grid {
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    gap: var(--space-4);
  }
}

@media (max-width: 900px) {
  .b-list__grid {
    grid-template-columns: 1fr;
    padding-block: var(--space-4);
  }

  .b-filters {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .b-filters__panel {
    flex: 1 1 320px;
  }
}

@media (max-width: 560px) {
  .b-ad-row__thumb {
    width: 96px;
    height: 88px;
  }

  .b-ad-row__link {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .b-ad-row__price {
    font-size: 15px;
  }

  .b-filters {
    flex-direction: column;
  }
}

@layer utilities {
  .h-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* One inline sprite, referenced by <use href="#i-…"> everywhere. */
  .h-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .h-icon {
    width: 16px;
    height: 16px;
    flex: none;
  }
}

/* ── small screens ─────────────────────────────────────────── */
/*
 * The band stacks before the header does: three columns plus a map stop
 * fitting on a laptop, so the map takes its own row.
 */
@media (max-width: 1120px) {
  .b-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-5);
    min-height: 0;
    padding-block: var(--space-6);
  }

  .b-hero__intro {
    grid-column: 1;
    grid-row: auto;
    max-width: 560px;
  }

  /* the map moves into the flow once the columns stack, so a phone can tap it */
  .b-hero__map {
    position: static;
    grid-column: 1;
    grid-row: auto;
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .b-hero__map svg {
    height: 340px;
  }

  .b-hero__locations {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    text-align: left;
  }

  .b-hero__group + .b-hero__group {
    margin-top: 0;
  }

  .b-hero__focus {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .b-header__nav {
    display: none;
  }

  /* the name does not fit on a phone: the code says enough */

  .b-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .b-header__bar-inner {
    flex-wrap: wrap;
    height: auto;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  /* the search drops to its own row once the bar runs out of room */
  .b-search {
    order: 10;
    flex-basis: 100%;
    max-width: none;
  }

  .b-header__actions {
    gap: var(--space-3);
  }

  .b-hero__title {
    font-size: 28px;
  }

  .b-ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-promos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .b-header__lang {
    display: none;
  }
}

@media (max-width: 560px) {
  .b-header__bar-inner {
    gap: var(--space-3);
  }

  .b-logo--header .b-logo__lockup {
    width: 32px;
    height: 32px;
  }

  .b-logo--header .b-logo__word {
    font-size: 20px;
  }

  /* keep the location reachable on a phone: pin only, no label */
  .b-search__location-name,
  .b-search__chevron {
    display: none;
  }

  .b-search__location {
    padding-right: 8px;
  }

  .b-search__location-btn {
    max-width: none;
  }

  .b-header__actions {
    gap: var(--space-3);
  }

  .b-header__action span {
    display: none;
  }

  .b-header__post {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .b-search__field {
    height: 40px;
  }

  .b-search__input {
    padding: 0 8px 0 0;
    font-size: 14px;
  }

  .b-search__button {
    width: 32px;
    height: 32px;
  }

  .b-hero__inner {
    padding-block: var(--space-5);
  }

  .b-hero__title {
    font-size: 26px;
  }

  /* two shortcuts per row, each a little more compact */
  .b-hero__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-hero__category {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: var(--space-2);
    text-align: left;
  }

  .b-hero__category-icon {
    width: 34px;
    height: 34px;
  }

  .b-hero__category-icon .o-sprite {
    --cell: 26px;
  }

  .b-category-grid {
    gap: 6px;
  }

  .b-category-tile {
    gap: var(--space-2);
    padding: var(--space-2);
  }

  /* the same size as the shortcut icons in the opening band */
  .b-category-tile__icon-wrap .o-sprite {
    --cell: 26px;
  }

  .b-section__note {
    display: none;
  }

  .b-ad-card__icon {
    width: 42px;
    height: 42px;
  }

  .b-footer__columns {
    gap: var(--space-5);
  }

  /* the picker goes full screen on a phone */
  .b-picker {
    padding: 0;
  }

  .b-picker__panel {
    max-width: none;
    max-height: 100vh;
    height: 100vh;
  }

  .b-picker__rows {
    grid-template-columns: 1fr;
  }
}

/* Ad detail page */
.b-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-4);
}

.b-crumbs {
  margin-bottom: var(--space-3);
}

.b-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink-muted);
}

.b-crumbs__item {
  display: inline-flex;
  align-items: center;
}

.b-crumbs__item + .b-crumbs__item::before {
  content: "/";
  margin: 0 6px;
  color: var(--line);
}

.b-crumbs__link {
  color: var(--blue);
  text-decoration: none;
}

.b-crumbs__link:hover {
  text-decoration: underline;
}

.b-crumbs__item--current {
  color: var(--ink);
  font-weight: 600;
}

.b-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-4);
  align-items: start;
}

.b-detail__badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.b-detail__badges .b-badge {
  position: static;
}

.b-detail__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.b-detail__posted {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}

.b-detail__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.b-detail__price-amount {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.b-detail__negotiable {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a00;
  border: 1px solid #e3c266;
  background: #fff8d6;
  padding: 2px 8px;
}

.b-gallery {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.b-gallery__main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  border: 1px solid var(--line);
  background: linear-gradient(
    140deg,
    hsl(var(--hue, 200) 42% 90%),
    hsl(calc(var(--hue, 200) + 26) 36% 80%)
  );
}

.b-gallery__icon {
  width: 118px;
  height: 118px;
  color: rgb(47 52 50 / 18%);
}

.b-gallery__cat {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  background: rgb(255 255 255 / 92%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.b-gallery__strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 118px;
}

.b-gallery__thumb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: linear-gradient(
    140deg,
    hsl(var(--hue, 200) 40% 84%),
    hsl(calc(var(--hue, 200) + 26) 34% 72%)
  );
}

.b-gallery__thumb-icon {
  width: 36px;
  height: 36px;
  color: rgb(47 52 50 / 16%);
}

.b-block {
  margin-top: var(--space-4);
}

.b-block__title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: var(--space-2);
}

.b-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.b-facts__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.b-facts__label {
  color: var(--ink-muted);
  font-size: 12.5px;
  align-self: center;
}

.b-facts__value {
  font-size: 13.5px;
  font-weight: 600;
  align-self: center;
}

.b-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.b-chips__chip {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--green-light);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}

.b-desc {
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

.b-alert {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid #ecd98f;
  border-left: 4px solid var(--yellow);
  background: #fffbe6;
}

.b-alert__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.b-alert__icon {
  width: 18px;
  height: 18px;
  color: #a17400;
  flex: none;
}

.b-alert__title {
  font-size: 13px;
  font-weight: 800;
}

.b-alert__text {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.b-alert__link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.b-alert__link:hover {
  text-decoration: underline;
}

.b-alert--compact {
  margin-top: var(--space-3);
}

.b-detail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.b-detail__report {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 12.5px;
  text-decoration: none;
}

.b-detail__report:hover {
  color: var(--ink);
  text-decoration: underline;
}

.b-detail__report-icon {
  width: 16px;
  height: 16px;
}

.b-detail__adid {
  font-size: 11.5px;
  color: var(--ink-muted);
}

.b-detail__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.b-side__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}

.b-seller__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.b-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: hsl(var(--hue, 190) 38% 82%);
}

.b-avatar__icon {
  width: 26px;
  height: 26px;
  color: rgb(47 52 50 / 58%);
}

.b-seller__seller {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.b-seller__name {
  font-size: 16px;
  font-weight: 800;
}

.b-seller__member {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.b-seller__private {
  font-size: 12px;
  color: var(--ink-muted);
}

.b-seller__shop {
  margin-top: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.b-seller__phone {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
}

.b-seller__cta {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}

.b-btn:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

.b-btn--primary {
  background: var(--green);
  color: #fff;
}

.b-btn--primary:hover {
  background: var(--green-dark);
}

.b-btn--outline {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

.b-btn--outline:hover {
  background: var(--green-light);
  border-color: var(--green);
}

.b-seller__cta .b-btn {
  flex: 1;
}

.b-btn--whatsapp {
  background: #fff;
  border-color: #25d366;
  color: #128c7e;
}

.b-btn--whatsapp:hover {
  background: #25d366;
  color: #043c2b;
}

.b-btn--block {
  width: 100%;
}

.b-btn__icon {
  width: 18px;
  height: 18px;
}

.b-call__name {
  font-size: 15px;
  font-weight: 700;
}

.b-call__number {
  display: inline-block;
  margin: var(--space-2) 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue);
  text-decoration: none;
}

.b-call__number:hover {
  text-decoration: underline;
}

.b-similar {
  margin-top: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
}

.b-results__head--flat {
  border-bottom: 1px solid var(--line);
}

.b-modal[hidden] {
  display: none;
}

.b-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(10 15 13 / 45%);
}

.b-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 32px));
  max-height: 80vh;
  background: var(--surface);
  box-shadow: 0 12px 40px rgb(0 0 0 / 28%);
}

.b-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.b-modal__title {
  font-size: 15px;
  font-weight: 800;
}

.b-modal__close {
  display: inline-flex;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.b-modal__close:hover {
  background: var(--green-light);
}

.b-modal__close-icon {
  width: 20px;
  height: 20px;
}

.b-modal__notice {
  padding: 6px var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 600;
}

.b-modal__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 150px;
  overflow-y: auto;
  padding: var(--space-4);
}

.b-msg {
  max-width: 76%;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.4;
}

.b-msg--in {
  border-radius: 2px 12px 12px 12px;
  background: #eceff0;
  align-self: flex-start;
}

.b-msg--out {
  border-radius: 12px 2px 12px 12px;
  background: var(--green-light);
  align-self: flex-end;
}

.b-modal__form {
  display: flex;
  border-top: 1px solid var(--line);
}

.b-modal__input {
  flex: 1;
  height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  background: var(--surface);
  font-size: 14px;
  outline: none;
}

.b-modal__form .b-btn {
  height: 48px;
  border-radius: 0;
}

.b-notfound {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.b-notfound__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.b-notfound__text {
  max-width: 46ch;
  margin: var(--space-2) auto var(--space-4);
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .b-detail__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 900px) {
  .b-detail__grid {
    grid-template-columns: 1fr;
  }

  .b-gallery__strip {
    display: none;
  }

  .b-gallery__main {
    min-height: 260px;
  }

  .b-facts {
    grid-template-columns: 1fr;
  }
}