/* ==========================================================================
   MyPlace — homepage
   Mobile-first. Layout steps: 520 (hero buttons side by side), 600 (tablet),
   900 (full header), 1024 (hero beside photo, six categories), 1180 (one-row
   search, five listings across).
   ========================================================================== */

:root {
  --ink: #0f1114;
  --ink-hover: #262a31;
  --text: #16181c;
  --muted: #5c6068;
  --placeholder: #6b6f77;
  --line: #e3e4e7;
  --line-soft: #ececee;
  --line-strong: #cdd0d5;
  --surface: #fff;
  --surface-muted: #f8f8f9;
  --surface-hover: #f3f3f5;
  --heart: #e5484d;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-float: 0 1px 2px rgb(15 17 20 / .04), 0 12px 32px -10px rgb(15 17 20 / .14);
  --shadow-pop: 0 2px 6px rgb(15 17 20 / .06), 0 18px 44px -12px rgb(15 17 20 / .24);
  --shadow-lift: 0 12px 28px -16px rgb(15 17 20 / .32);

  --container: 1280px;
  --gutter: 16px;
  --header-h: 56px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --header-h: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* Base ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button, input, select { margin: 0; font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:where(ul[role="list"]) { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(a:focus-visible) { border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.icon { flex: none; }

/* Buttons ------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.button:active { transform: scale(.98); }

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

.button--secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.button--secondary:hover { background: var(--surface-muted); border-color: var(--line-strong); }

.button--lg { height: 48px; padding: 0 22px; border-radius: var(--radius-lg); }
.button--sm { height: 38px; padding: 0 18px; font-size: 14.5px; }

.button__arrow { transition: transform .22s var(--ease); }
.button:hover .button__arrow { transform: translateX(3px); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s;
}
.icon-button:hover { background: var(--surface-hover); }

.icon-button--outline {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.icon-button--outline:hover { border-color: var(--line-strong); background: var(--surface); }
.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button:disabled:hover { background: transparent; border-color: var(--line); }

/* Brand ---------------------------------------------------------------------
   The official logo as two images. Widths match the exported files exactly;
   the wordmark drops 2px so its capitals centre on the mark. */

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  border-radius: 6px;
}
.brand__mark { width: 38px; height: auto; }
.brand__wordmark { position: relative; top: 2px; width: 76px; height: auto; }

.brand--small { gap: 8px; }
.brand--small .brand__mark { width: 34px; }
.brand--small .brand__wordmark { width: 68px; }

@media (min-width: 900px) {
  .brand { gap: 10px; }
  .brand__mark { width: 42px; }
  .brand__wordmark { width: 86px; }
}

/* Header -------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  transition: box-shadow .2s var(--ease);
}
.header.is-scrolled,
.header.is-menu-open { box-shadow: 0 1px 0 var(--line-soft); }

.header__bar {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.header__nav { display: none; }

.nav { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }

.nav__link {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--text);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 3px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__link[aria-current] { font-weight: 500; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: -8px;
}

.header__login,
.header__register { display: none; }

.header__login {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  transition: background-color .15s var(--ease);
}
.header__login:hover { background: var(--surface-hover); }

/* Language selector: a small disclosure beside Register (beside the menu
   button on phones), styled like the Login link and the search dropdowns. */
.lang { position: relative; }
.lang__toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 0 7px 0 9px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s var(--ease);
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle::marker { content: ""; }
.lang__toggle:hover,
.lang[open] .lang__toggle { background: var(--surface-hover); }
.lang__chevron { color: var(--muted); transition: transform .2s var(--ease); }
.lang[open] .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  animation: pop-in .16s var(--ease);
}
.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 15px;
  transition: background-color .12s var(--ease);
}
.lang__option:hover { background: var(--surface-hover); }
.lang__option[aria-current] { font-weight: 600; }
.lang__check { visibility: hidden; }
.lang__option[aria-current] .lang__check { visibility: visible; }

.header__toggle-close { display: none; }
.header__toggle[aria-expanded="true"] .header__toggle-open { display: none; }
.header__toggle[aria-expanded="true"] .header__toggle-close { display: block; }

@media (min-width: 900px) {
  .header__nav { display: block; margin-left: clamp(48px, 8vw, 112px); }
  .header__actions { gap: 6px; margin-right: 0; }
  .header__login { display: block; margin-left: 10px; }
  .header__register { display: inline-flex; margin-left: 18px; }
  .lang { margin-left: 6px; margin-right: -7px; }
  .header__toggle { display: none; }
}

/* Narrow laptops: Romanian and Russian labels are longer, so the navigation
   sits a little tighter until there is room for the full spacing. */
@media (min-width: 900px) and (max-width: 1023px) {
  .header__nav { margin-left: 32px; }
  .nav { gap: 20px; }
}

/* Signed in: Contact and the Profile menu instead of Login and Register
   (components/profile_menu.html). Nothing here applies to a signed-out header. */
.user-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}
.user-avatar--initial {
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.header__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
  transition: background-color .15s var(--ease);
}
.header__contact:hover { background: var(--surface-hover); }
.header__contact-label { display: none; }

.profile-menu { position: relative; }
.profile-menu__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.profile-menu__toggle::-webkit-details-marker { display: none; }
.profile-menu__toggle::marker { content: ""; }
.profile-menu__toggle:hover,
.profile-menu[open] .profile-menu__toggle { border-color: var(--line); background: var(--surface-hover); }
.profile-menu__avatar { width: 30px; height: 30px; }
.profile-menu__chevron { color: var(--muted); transition: transform .2s var(--ease); }
.profile-menu[open] .profile-menu__chevron { transform: rotate(180deg); }
.profile-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 288px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.profile-menu__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius);
}
.profile-menu__who:hover { background: var(--surface-hover); }
.profile-menu__who-avatar { width: 40px; height: 40px; font-size: 17px; }
.profile-menu__who-text { display: grid; min-width: 0; line-height: 1.35; }
.profile-menu__who-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__who-text strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.profile-menu__who-text span { font-size: 13px; color: var(--muted); }
.profile-menu__list { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.profile-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
}
.profile-menu__link:hover { background: var(--surface-hover); }
.profile-menu__link .icon { color: var(--muted); }

@media (min-width: 900px) {
  .header--member .header__actions { gap: 8px; }
  .header--member .lang { margin-left: 2px; }
}
@media (min-width: 1180px) {
  .header__contact { padding: 0 10px; }
  .header__contact-label { display: inline; }
}
/* Phones, signed in: search, Contact, the avatar and the language, as on the
   profile page; the profile menu takes the place of the menu button. */
@media (max-width: 599px) {
  .header--member .header__actions > [data-focus-search] { display: inline-grid; }
  .header--member .header__toggle { display: none; }
  .header__contact { width: 44px; height: 44px; padding: 0; }
  .profile-menu__toggle { gap: 4px; height: 40px; padding: 0 6px 0 4px; }
  .profile-menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .profile-menu__panel { right: -56px; width: min(288px, calc(100vw - 24px)); }
}
@media (max-width: 359px) {
  .header--member .header__contact { display: none; }
}

/* Mobile menu: a sheet that drops from the header, over a dimmed page. */
.mobile-menu {
  position: absolute;
  inset: 100% 0 auto;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  animation: drop-in .22s var(--ease);
}
.mobile-menu__nav { margin: 0; padding: 6px 0 0; list-style: none; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.mobile-menu__link .icon { color: var(--muted); }
.mobile-menu__link[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.mobile-menu__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 0 20px;
}
.mobile-menu__form { display: grid; }  /* signed in: the log-out button fills its cell */
.mobile-menu__scrim {
  position: absolute;
  inset: 100% 0 auto;
  height: 100vh;
  background: rgb(15 17 20 / .28);
  animation: fade-in .22s var(--ease);
}

@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* Hero ---------------------------------------------------------------------- */

.hero { position: relative; }

.hero__inner { padding-top: 28px; }

.hero__title {
  font-size: clamp(2.125rem, .5rem + 7.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--ink);
}

.hero__lede {
  margin-top: 14px;
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hero__break { display: none; }

.hero__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
/* The two main actions of the homepage: same buttons, a size up. */
.hero__actions .button {
  width: 100%;
  height: 54px;
  padding: 0 24px;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
}
.hero__actions .button__arrow { width: 20px; height: 20px; }

.hero__media { margin-top: 28px; }
.hero__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Keep the cathedral and bell tower in frame when the sides are cropped. */
  object-position: 65% 60%;
}

@media (min-width: 680px) {
  /* Side by side at equal widths, both sized by the longer label. The group
     sizes to its own content so the copy column never squeezes one button.
     Below 680px the longest labels don't fit side by side, so they stack. */
  .hero__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    width: max-content;
  }
  .hero__actions .button {
    min-width: 236px;
    height: 58px;
    padding: 0 28px;
    font-size: 17px;
  }
}

@media (min-width: 600px) {
  .hero__inner { padding-top: 44px; }
  .hero__lede { margin-top: 18px; font-size: 18px; }
  .hero__break { display: inline; }
  .hero__actions { margin-top: 28px; }
  .hero__media { margin-top: 36px; }
  .hero__image { aspect-ratio: 2 / 1; max-height: 440px; }
}

/* Laptop and up: copy over the white left edge of a wide photograph. */
@media (min-width: 1024px) {
  .hero {
    --hero-h: 410px;
    --copy: 450px;
    --left: max(var(--gutter), 50% - var(--container) / 2);
    min-height: var(--hero-h);
  }
  .hero__inner { position: relative; z-index: 1; padding: 64px 0 76px; }
  .hero__copy { max-width: var(--copy); }
  .hero__title { font-size: clamp(3.25rem, 1.5rem + 2.75vw, 3.75rem); line-height: 1.02; }

  .hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
  }
  .hero__image {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - var(--left) - var(--copy) / 2);
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    /* Narrow laptops crop the sides: keep the sunset; the left sits under the fade. */
    object-position: 75% 58%;
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      #fff calc(var(--left) + var(--copy) * .62),
      rgb(255 255 255 / .9) calc(var(--left) + var(--copy) * .76),
      rgb(255 255 255 / .62) calc(var(--left) + var(--copy) * .92),
      rgb(255 255 255 / .28) calc(var(--left) + var(--copy) * 1.08),
      rgb(255 255 255 / .08) calc(var(--left) + var(--copy) * 1.22),
      rgb(255 255 255 / 0) calc(var(--left) + var(--copy) * 1.34));
  }
}

@media (min-width: 1280px) {
  .hero { --hero-h: 430px; --copy: 480px; }
  .hero__inner { padding-top: 72px; }
}

/* Search -------------------------------------------------------------------- */

.search-wrap {
  position: relative;
  z-index: 5;
  margin-top: -32px;
}

.search {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(15 17 20 / .06);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.field { position: relative; min-width: 0; }

.field__control {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 40px 0 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field--query .field__control { padding-right: 14px; cursor: text; }
.field__control:hover { border-color: var(--line-strong); }
.field__control:focus-visible,
.field__control:focus:not(button):not(select),
.field__control[aria-expanded="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(15 17 20 / .08);
}
.field__control::placeholder { color: var(--placeholder); opacity: 1; }
.field__control::-webkit-search-decoration,
.field__control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.field__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.field__icon,
.field__chevron {
  position: absolute;
  top: 50%;
  color: var(--ink);
  pointer-events: none;
  transform: translateY(-50%);
}
.field__icon { left: 15px; }
.field__chevron { right: 14px; transition: transform .2s var(--ease); }
.field[data-open] .field__chevron { transform: translateY(-50%) rotate(180deg); }

.search__submit { width: 100%; height: 50px; gap: 8px; border-radius: var(--radius); }
.search__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(255 255 255 / .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.search__submit.is-loading .search__submit-icon { display: none; }
.search__submit.is-loading .search__spinner { display: block; }

@media (min-width: 600px) {
  .search {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-inline: -14px;
    padding: 14px;
  }
  .field--query { grid-area: 1 / 1 / 2 / 3; }
  .search__submit { grid-area: 1 / 3; }
}

@media (min-width: 1180px) {
  .search {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) minmax(0, .86fr);
    margin-inline: -16px;
    padding: 16px;
    border-radius: 18px;
  }
  .field--query,
  .search__submit { grid-area: auto; }
}

/* Listbox: the enhanced dropdown for mouse and trackpad users. */
.listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 380px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  outline: none;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform-origin: top left;
  animation: pop-in .16s var(--ease);
}
.listbox--end { left: auto; right: 0; transform-origin: top right; }

.listbox__group + .listbox__group,
.listbox__option + .listbox__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.listbox__group-label {
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.listbox__option {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.listbox__option.is-active { background: var(--surface-hover); }
.listbox__option[aria-selected="true"] { font-weight: 600; }
.listbox__text { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.listbox__hint { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.listbox__check { margin-left: auto; visibility: hidden; }
.listbox__option[aria-selected="true"] .listbox__check { visibility: visible; }

/* Sections ------------------------------------------------------------------ */

.section { padding-top: 36px; }

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  margin-bottom: 14px;
}
.section__title { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.section__summary { margin-top: 2px; font-size: 14px; color: var(--muted); }
.section__tools { display: flex; flex: none; align-items: center; gap: 16px; }

.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--muted);
  white-space: nowrap;
  transition: color .15s var(--ease);
}
.section__link .icon { transition: transform .22s var(--ease); }
.section__link:hover { color: var(--ink); }
.section__link:hover .icon { transform: translateX(2px); }

.scroller-controls { display: flex; gap: 8px; }

@media (min-width: 1024px) {
  .section { padding-top: 40px; }
  .section__title { font-size: 21px; }
  .section__head { margin-bottom: 16px; }
}

/* Categories ---------------------------------------------------------------- */

.categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Cards in a row share its height, even when one label needs an extra line. */
.categories > li { display: grid; }

/* The smallest phones: Romanian and Russian category names are too long for
   three cards across ("Apartamente", "Коммерческие помещения"), so two. */
@media (max-width: 359px) {
  html:lang(ro) .categories,
  html:lang(ru) .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 10px 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--ink);
  text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease), transform .18s var(--ease);
}
.category:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.category:active { transform: translateY(0) scale(.99); }
.category[aria-current] { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.category__label { max-width: 100%; font-size: 13.5px; line-height: 1.2; overflow-wrap: break-word; }
/* "Коммерческие помещения" is the one label that can't fit a phone card unbroken. */
html:lang(ru) .category__label { hyphens: auto; }
/* The short name is for the phone chips only (phone layer). */
.category__label--short { display: none; }

@media (min-width: 600px) {
  .categories { gap: 12px; }
  .category { min-height: 92px; gap: 12px; }
  .category__label { font-size: 14px; }
}

@media (min-width: 1024px) {
  .categories { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
}

/* Listings: a swipeable row until five fit side by side. -------------------- */

.listings {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 300px);
  gap: 12px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.listings::-webkit-scrollbar { display: none; }
.listings__item { display: flex; scroll-snap-align: start; }

@media (min-width: 600px) {
  .listings { grid-auto-columns: 272px; gap: 16px; }
}

@media (min-width: 1180px) {
  .listings {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Property card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { border-color: #d9dbdf; box-shadow: var(--shadow-lift); }

.card__media {
  position: relative;
  order: -1;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--surface-muted);
}
.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card__image { transform: scale(1.035); }

.card__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgb(15 17 20 / .1);
}

.card__save {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4));
  transition: transform .15s var(--ease);
}
.card__save:hover { transform: scale(1.08); }
.card__save:active { transform: scale(.92); }
.card__save:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.card__save svg { transition: fill .15s var(--ease); }
.card__save[aria-pressed="true"] svg { fill: var(--heart); }
.card__save.is-popping svg { animation: heart-pop .38s var(--ease); }

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 12px 14px 14px;
}
.card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
/* The title link covers the whole card; the save button sits above it. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Swipeable card photos (phones only, see the phone layer): everywhere else
   the card shows just its cover. */
.card__slides { height: 100%; }
.card__slides > picture + picture,
.card__dots { display: none; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
  border-radius: var(--radius-lg);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.card__place {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.card__place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 9px;
  font-size: 13px;
  color: var(--muted);
}
.card__facts li { display: flex; align-items: center; gap: 6px; }

.card__price {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.card__price strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Empty results */
.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-muted);
  text-align: center;
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.empty__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.empty__text { max-width: 34em; font-size: 14.5px; color: var(--muted); }
.empty .button { margin-top: 12px; }

/* Footer -------------------------------------------------------------------- */

.footer { margin-top: 64px; border-top: 1px solid var(--line-soft); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
  padding-block: 28px 36px;
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.footer__nav a { transition: color .15s var(--ease); }
.footer__nav a:hover { color: var(--ink); }
.footer__legal { width: 100%; font-size: 13.5px; color: var(--muted); }

@media (min-width: 600px) {
  .footer__legal { width: auto; margin-left: auto; }
}
@media (min-width: 1024px) {
  .footer { margin-top: 80px; }
}

/* Not found ----------------------------------------------------------------- */

.not-found { display: grid; justify-items: start; gap: 14px; padding-block: 72px 24px; }
.not-found__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.not-found__text { max-width: 40ch; font-size: 17px; color: var(--muted); }
.not-found .button { margin-top: 8px; }

/* Toast --------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s var(--ease), transform .26s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Saved listings page ---------------------------------------------------------- */

.saved-page { padding-top: 28px; }
.saved-page__head { margin-bottom: 18px; }
.saved-page__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
.saved-page__count { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.listings--saved {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}
.listings__item.is-leaving { opacity: 0; transform: scale(.98); transition: opacity .2s var(--ease), transform .2s var(--ease); }

/* Phone-only pieces: hidden until the phone layout below turns them on. */
.phone-search,
.tabbar,
.header__account,
.hero-action__icon { display: none; }

/* Filter sheet (phones) ---------------------------------------------------------- */

.sheet {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface);
  color: var(--text);
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-up .26s var(--ease); }
.sheet::backdrop { background: rgb(15 17 20 / .35); }
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } }

.sheet__bar {
  display: grid;
  flex: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: env(safe-area-inset-top) 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sheet__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-align: center; }
.sheet__reset {
  justify-self: end;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.sheet__reset:hover { background: var(--surface-hover); color: var(--ink); }

.sheet__body { flex: 1; min-height: 0; padding: 4px 16px 20px; overflow-y: auto; overscroll-behavior: contain; }
.sheet__group { min-width: 0; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line-soft); }
.sheet__group:last-child { border-bottom: 0; }
.sheet__legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.sheet__legend + * { clear: both; }

.sheet__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--ink); cursor: pointer; }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: transparent;
  transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.check input:checked + .check__box { border-color: var(--ink); background: var(--ink); color: #fff; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.segmented__option { position: relative; }
.segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented__option span {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  pointer-events: none;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.segmented__option input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(15 17 20 / .08), 0 0 0 1px var(--line); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }

.sheet__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sheet__stack { display: grid; gap: 10px; }
.sheet__hint { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.sheet-select { position: relative; }
.sheet-select select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming in */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.sheet-select select:focus-visible { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(15 17 20 / .08); }
.sheet-select select:disabled { background: var(--surface-muted); color: var(--placeholder); cursor: default; }
.sheet-select > .icon:last-child { position: absolute; top: 50%; right: 12px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.sheet-select--icon select { padding-left: 44px; }
.sheet-select__lead { position: absolute; top: 50%; left: 14px; color: var(--ink); pointer-events: none; transform: translateY(-50%); }

.sheet__footer { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--surface); }
.sheet__submit { width: 100%; height: 52px; gap: 10px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 600; }
.sheet__submit.is-loading .search__spinner { display: block; }

/* Phones ===================================================================== */
/* Below 600px the homepage is its own layout rather than a narrower desktop:
   a small photo, the two main actions, one search field with a filter sheet,
   a row of category chips and full-width listing cards, with a tab bar at the
   bottom of every page. Nothing here applies from 600px up. */

@media (max-width: 599px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Header: logo, language, account, menu. Search is in the page and the tab bar. */
  .header__actions { gap: 2px; }
  .header__actions > [data-focus-search] { display: none; }
  .header__account { display: inline-grid; }
  .header__actions .icon-button { width: 44px; height: 44px; }
  .lang__toggle { height: 44px; }

  /* No hero photo, headline or paragraph: the two actions come first. */
  .hero__media { display: none; }
  .hero__inner { padding-top: 14px; }
  .hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero__lede { display: none; }

  /* The two main actions: large tiles, side by side. */
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }
  .hero__actions .button {
    display: grid;
    grid-template-areas: "icon arrow" "label label";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: end;
    justify-content: stretch;
    gap: 14px 8px;
    width: 100%;
    height: auto;
    min-height: 112px;
    padding: 14px 14px 14px 16px;
    border-radius: var(--radius-xl);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
    text-align: left;
    white-space: normal;
  }
  .hero-action__icon {
    display: grid;
    grid-area: icon;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--ink);
  }
  .button--primary .hero-action__icon { background: rgb(255 255 255 / .14); color: #fff; }
  .hero-action__label { grid-area: label; min-width: 0; }
  .hero__actions .button__arrow { grid-area: arrow; align-self: start; margin: 2px 2px 0 0; }

  /* Search: one field and a filter button. The desktop bar stays hidden. */
  .search-wrap { display: none; }
  .phone-search { display: block; margin-top: 14px; }
  .psearch {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(15 17 20 / .04), 0 6px 16px -10px rgb(15 17 20 / .18);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .psearch:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(15 17 20 / .08); }
  .psearch__icon { position: absolute; left: 15px; color: var(--ink); pointer-events: none; }
  .psearch__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 46px;
    border: 0;
    border-radius: 14px 0 0 14px;
    outline: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }
  .psearch__input::placeholder { color: var(--placeholder); opacity: 1; }
  .psearch__input::-webkit-search-decoration,
  .psearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .psearch__filters {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 50px;
    height: 100%;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line-soft);
    border-radius: 0 14px 14px 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .psearch__filters:active { background: var(--surface-hover); }
  .psearch__badge {
    position: absolute;
    top: 9px;
    right: 8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: content-box;
  }

  /* Categories: a row of compact chips that scrolls sideways. */
  .section--categories { padding-top: 16px; }
  .section--categories .section__head { display: none; }
  .categories {
    display: flex;
    gap: 8px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .categories::-webkit-scrollbar { display: none; }
  .categories > li { display: block; flex: none; }
  /* Every chip the same size, whatever its name: the longest short name
     ("Apartamente", 76px) fits with room to spare, and a name never stretches a chip. */
  .category {
    width: 100px;
    min-height: 0;
    height: 70px;
    gap: 6px;
    padding: 8px;
    border-radius: var(--radius-lg);
  }
  .category__icon { width: 24px; height: 24px; }
  .category__label { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; hyphens: manual; }
  .category__label--full { display: none; }
  .category__label--short { display: block; }
  .category:hover { transform: none; box-shadow: none; }

  /* Listings: full-width cards, one under another. */
  .section--listings { padding-top: 24px; }
  .listings {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .card__title { font-size: 16px; }
  .card__price strong { font-size: 18px; }
  .card__save { top: 6px; right: 6px; width: 44px; height: 44px; }

  /* Card photos: swipe sideways through the listing's own photos. A tap opens
     the listing (main.js), the heart still saves. */
  .card__media.is-swipeable .card__slides {
    position: relative;
    z-index: 1;                       /* above the card's link, so a swipe moves the photos */
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* the last photo never turns into "go back" */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .card__media.is-swipeable .card__slides::-webkit-scrollbar { display: none; }
  .card__media.is-swipeable .card__slides.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .card__media.is-swipeable .card__slides > picture {
    display: block;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;         /* one photo per swipe, however fast */
  }
  .card__media.is-swipeable .card__image {
    -webkit-user-drag: none;
    user-select: none;
    transition: opacity .25s var(--ease), transform .5s var(--ease);
  }
  .card__media.is-swipeable picture[data-pending] .card__image { opacity: 0; }
  .card__media.is-swipeable .card__badge { z-index: 1; pointer-events: none; }
  .card__link:focus-visible::after { z-index: 3; }

  .card__media.is-swipeable .card__dots {
    --dot: 6px;
    --dot-gap: 5px;
    position: absolute;
    left: 50%;
    bottom: 19px;
    z-index: 1;
    display: block;
    width: calc(var(--dots) * (var(--dot) + var(--dot-gap)) - var(--dot-gap));
    overflow: hidden;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgb(0 0 0 / .5));
  }
  .card__dots-track {
    display: flex;
    gap: var(--dot-gap);
    width: max-content;
    transition: transform .25s var(--ease);
  }
  .card__dot {
    flex: none;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: rgb(255 255 255 / .55);
    transition: background-color .2s var(--ease), transform .25s var(--ease);
  }
  .card__dot.is-active { background: #fff; }
  .card__dot.is-small { transform: scale(.6); }

  .footer { margin-top: 40px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Tab bar */
  .tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--line-soft);
    background: rgb(255 255 255 / .94);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item[aria-current] { color: var(--ink); font-weight: 600; }
  .tabbar__item[aria-current] .icon { stroke-width: 2; }
  .tabbar__item:active .icon { transform: scale(.92); }
  .tabbar__item:focus-visible { outline-offset: -4px; }
  .tabbar__icon { position: relative; display: block; }
  .tabbar__badge {
    position: absolute;
    top: -5px;
    left: calc(100% - 9px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    box-sizing: content-box;
  }
}

/* The narrowest phones: the two actions stack, each one a full-width row. */
@media (max-width: 359px) {
  .hero__actions { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; }
  .hero__actions .button {
    grid-template-areas: "icon label arrow";
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px 10px 12px;
  }
  .hero-action__icon { width: 36px; height: 36px; }
  .hero__actions .button__arrow { align-self: center; margin: 0; }
}

/* Motion -------------------------------------------------------------------- */

@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heart-pop { 40% { transform: scale(1.24); } }

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