:root {
  --green-950: #0c1f16;
  --green-900: #0f2a1d;
  --green-800: #133626;
  --green-700: #1a4a34;
  --green-600: #1f5d41;
  --green-500: #2b7a55;
  --green-400: #4f9d78;
  --green-200: #d9eee1;
  --green-100: #eef7f2;
  --cream-50: #f6f3ee;
  --ink-900: #17201b;
  --ink-700: #3b4a43;
  --ink-500: #6a766f;
  --ink-300: #9aa6a0;
  --surface: #ffffff;
  --surface-2: #f3f5f2;
  --surface-3: #e7ece8;
  --stroke: #d9e1db;
  --shadow-1: 0 12px 30px rgba(11, 24, 17, 0.12);
  --shadow-2: 0 22px 50px rgba(11, 24, 17, 0.18);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --transition-fast: 160ms ease;
  --transition-slow: 320ms ease;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  background: radial-gradient(circle at 15% 10%, #f1f7f1 0%, #f8f4ef 35%, #f3f5f2 100%);
  min-height: 100vh;
}

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

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

.container {
  width: min(1120px, 92%);
  margin: 0 auto;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* [SITE_HEADER_V1] Narrow the selector to the site-level header only.
   Earlier `header { position: sticky; ... }` was a tag selector that also
   applied to every <header> nested inside articles/sections (e.g. the
   <header class="page-header"> on city guide pages), making them sticky
   too and causing the H1 to "stick" under the site bar. Direct-child of
   .page targets the site header exclusively. */
.page > header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217, 225, 219, 0.7);
}

.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
}

.brand-block {
  display: grid;
  gap: 6px;
}

.brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  letter-spacing: 0.4px;
  color: var(--green-900);
}

.brand-subtitle {
  font-size: 13px;
  color: var(--ink-500);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-links a:hover {
  background: var(--green-100);
  color: var(--green-700);
  transform: translateY(-1px);
}

main {
  flex: 1;
  padding: 44px 0 72px;
}

footer {
  padding: 28px 0 36px;
  color: var(--ink-500);
  font-size: 14px;
  border-top: 1px solid rgba(217, 225, 219, 0.7);
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.2px;
}

h1 {
  font-size: clamp(32px, 4.2vw, 44px);
  margin: 0 0 12px;
  color: var(--green-900);
}

h2 {
  font-size: clamp(24px, 3.2vw, 30px);
  margin: 0 0 16px;
  color: var(--green-900);
}

p {
  margin: 0;
  color: var(--ink-700);
}

.section {
  margin-top: 48px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border var(--transition-fast);
}

.card.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(47, 115, 83, 0.25);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, #0f2a1d, #1f5d41);
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 42, 29, 0.22);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(15, 42, 29, 0.26);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--stroke);
  color: var(--ink-700);
}

.btn-ghost:hover {
  border-color: var(--green-400);
  color: var(--green-700);
}

.btn-disabled,
.btn:disabled {
  background: var(--surface-2);
  color: var(--ink-300);
  cursor: not-allowed;
  box-shadow: none;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink-900);
  transition: border var(--transition-fast), box-shadow var(--transition-slow), background var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 4px rgba(79, 157, 120, 0.18);
  background: #fbfdfc;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input[type="file"] {
  padding: 10px 12px;
}

.form-card {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field-label {
  font-weight: 600;
  color: var(--ink-700);
}

.field-hint {
  color: var(--ink-500);
  font-size: 13px;
}

.field-error {
  color: #b42318;
  font-size: 13px;
}

.hero {
  padding: 30px;
  display: grid;
  gap: 20px;
  background: linear-gradient(155deg, #0f2a1d 0%, #1b4d36 55%, #133626 100%);
  color: #f3f6f4;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(79, 157, 120, 0.28), transparent 55%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: #f9fbf9;
}

.hero-sub {
  font-size: 16px;
  color: #e3ebe6;
  line-height: 1.5;
}

.hero-actions {
  display: grid;
  gap: 12px;
}

.hero-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.info-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f7fbf8;
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.form-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 13px;
  transition: transform var(--transition-slow), background var(--transition-fast);
}

.chip:hover {
  transform: translateY(-2px);
  background: var(--green-200);
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Tile card: photo 1:1 on top, body below.
   Scoped to .listing-grid context so .card's padding:22px cannot win. */
.listing-grid .listing-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}

.listing-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ea, #f6f9f6);
  flex-shrink: 0;
}

.listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-media--empty::before {
  content: "🐾";
  font-size: 40px;
  opacity: 0.35;
}

/* Fallback for browsers without aspect-ratio (pre-2022 Safari, etc.) */
@supports not (aspect-ratio: 1 / 1) {
  .listing-media {
    height: 0;
    padding-top: 100%;
  }
  .listing-media img {
    position: absolute;
    inset: 0;
  }
  .listing-media--empty {
    position: absolute;
    inset: 0;
  }
}

.listing-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-500);
}

.listing-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-tile-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.listing-tile-type {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2, #f0f0f0);
  color: var(--ink-700);
}
.listing-tile-type--lost {
  background: #fdecec;
  color: #9b2c2c;
}
.listing-tile-type--found {
  background: var(--green-50, #f0faf4);
  color: var(--green-700, #1b5e20);
}

.listing-tile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.listing-tile-meta {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.step-card {
  display: grid;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-meta {
  color: var(--ink-500);
}

.package-grid {
  display: grid;
  gap: 18px;
}

.package-card {
  display: grid;
  gap: 14px;
}

.package-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--green-700);
}

.order-grid {
  display: grid;
  gap: 20px;
}

.info-card {
  background: var(--green-100);
  border: 1px solid #d2e5d9;
  border-radius: var(--radius-lg);
  padding: 16px;
  color: var(--ink-700);
}

.fade-up {
  animation: fadeUp 700ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .form-inline {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding: 20px;
    gap: 16px;
  }
}

.list-stack {
  display: grid;
  gap: 12px;
}

.list-row {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.list-row .row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.list-row .row-meta {
  font-size: 13px;
  color: var(--ink-500);
}

.muted {
  color: var(--ink-500);
}

.auth-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .list-row .row-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tile grid responsive breakpoints */
@media (min-width: 721px) {
  /* Desktop-only: bigger placeholder icon so empty tiles read as equal weight */
  .listing-media--empty::before {
    font-size: 64px;
  }
}
@media (max-width: 1080px) {
  .listing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .listing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .listing-tile-title { font-size: 13px; }
  .listing-tile-meta  { font-size: 11px; }
}

/* ==========================================================================
   [WIZARD_V1] listing_create form redesign — 3-step wizard.
   Scoped: .wizard-card and descendants only. No existing selector is touched.
   ========================================================================== */

.wizard-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  box-shadow: var(--shadow-1);
}

.wizard-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.wizard-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.wizard-step-dot > span {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--stroke);
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.wizard-step-dot em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
}
.wizard-step-dot.is-active {
  color: var(--ink-900);
}
.wizard-step-dot.is-active > span {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.wizard-step-dot.is-done > span {
  border-color: var(--green-400);
  color: var(--green-700);
  background: var(--green-100);
}
.wizard-step-line {
  flex: 1;
  min-width: 20px;
  height: 1.5px;
  background: var(--stroke);
  border-radius: 2px;
}

.wizard-form {
  display: grid;
}
.wizard-step {
  display: none;
}
.wizard-step.is-active {
  display: grid;
  gap: 24px;
}
.wizard-title {
  font-family: "Cormorant Garamond", "Manrope", serif;
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  color: var(--ink-900);
  line-height: 1.15;
}
.wizard-sub {
  color: var(--ink-500);
  margin: 0 0 4px;
  font-size: 15px;
}
.wizard-group {
  display: grid;
  gap: 10px;
}
.wizard-label {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 14px;
}

/* --- Tiles --- */
.tile-grid {
  display: grid;
  gap: 12px;
}
.tile-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.tile-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.tile {
  appearance: none;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-900);
  font-family: inherit;
  font-size: inherit;
  position: relative;
}
.tile:hover {
  border-color: var(--green-400);
  transform: translateY(-1px);
}
.tile:focus-visible {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 4px rgba(79, 157, 120, 0.18);
}
.tile.is-selected {
  border-color: var(--green-700);
  border-width: 2px;
  padding: 19px 17px;
  background: var(--green-100);
}
.tile.is-selected::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green-700);
  background-image: linear-gradient(135deg, transparent 38%, #fff 38%, #fff 45%, transparent 45%, transparent 55%, #fff 55%, #fff 62%, transparent 62%);
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(15, 42, 29, 0.2);
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
}
.tile-label {
  font-weight: 600;
  font-size: 15px;
}
.tile-desc {
  color: var(--ink-700);
  font-size: 13px;
}

.tile--centered {
  align-items: center;
  text-align: center;
  padding: 22px 14px;
  gap: 10px;
}
.tile--centered.is-selected {
  padding: 21px 13px;
}
.tile-badge {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--green-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}
.tile--centered .tile-label {
  font-size: 15px;
}

.tile--compact {
  padding: 14px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.tile--compact.is-selected {
  padding: 13px 15px;
}
.tile--compact.is-selected::after {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-size: 8px 8px;
}
.tile--compact .tile-label {
  font-size: 14px;
  font-weight: 500;
}

.tile-grid.is-missing .tile {
  border-color: #d97462;
  animation: wizard-shake 280ms ease;
}
@keyframes wizard-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.wizard-form input.is-missing,
.wizard-form select.is-missing,
.wizard-form textarea.is-missing {
  border-color: #d97462;
  box-shadow: 0 0 0 4px rgba(217, 116, 98, 0.15);
}

/* --- Dropzone --- */
.dropzone {
  position: relative;
  border: 2px dashed var(--stroke);
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  padding: 36px 20px;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease;
  cursor: pointer;
  overflow: hidden;
}
.dropzone:hover,
.dropzone.is-drag {
  border-color: var(--green-400);
  background: var(--green-100);
}
.dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  z-index: 1;
}
.dropzone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.dropzone-body svg {
  color: var(--green-700);
  margin-bottom: 4px;
}
.dropzone-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
}
.dropzone-hint {
  color: var(--ink-700);
  font-size: 13px;
}
.dropzone-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
}
.dropzone-preview {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #eef1ee;
  border: 1px solid var(--stroke);
}
.dropzone-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Summary --- */
.wizard-summary {
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-top: 4px;
}
.wizard-summary-title {
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wizard-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}
.wizard-summary-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: baseline;
}
.wizard-summary-row[hidden] {
  display: none;
}
.wizard-summary-row dt {
  color: var(--ink-500);
  font-size: 13px;
  margin: 0;
}
.wizard-summary-row dd {
  color: var(--ink-900);
  font-weight: 500;
  margin: 0;
  word-break: break-word;
}

/* --- Nav --- */
.wizard-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.wizard-nav .btn-ghost {
  margin-right: auto;
}
.wizard-nav .btn {
  min-width: 150px;
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .wizard-card {
    padding: 28px 20px;
  }
  .wizard-title {
    font-size: 26px;
  }
  .wizard-step-dot em {
    display: none;
  }
  .wizard-stepper {
    gap: 8px;
    margin-bottom: 28px;
  }
  .tile {
    padding: 16px 14px;
  }
  .tile.is-selected {
    padding: 15px 13px;
  }
  .tile-grid--2,
  .tile-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
  .tile-grid--3.tile-grid--compact {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .wizard-summary-row {
    grid-template-columns: 100px 1fr;
  }
  .wizard-nav .btn {
    min-width: 120px;
  }
  .dropzone {
    padding: 28px 14px;
  }
}

@media (max-width: 420px) {
  .tile-grid--3.tile-grid--compact {
    grid-template-columns: 1fr;
  }
  .tile--compact {
    justify-content: flex-start;
  }
}
/* ==========================================================================
   [/WIZARD_V1]
   ========================================================================== */

/* ==========================================================================
   [WIZARD_V2] city autocomplete + rich summary (description + thumbnails).
   Additive — scoped to .city-picker and .wizard-summary-* only.
   ========================================================================== */

/* --- City picker --- */
.city-picker {
  position: relative;
  display: grid;
  gap: 6px;
}
.city-picker-field {
  position: relative;
}
.city-picker-field input[type="text"] {
  padding-right: 42px;
}
.city-picker-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-500);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.city-picker-clear:hover {
  background: var(--surface-2);
  color: var(--ink-900);
}
.city-picker.is-chosen .city-picker-clear {
  display: inline-flex;
}
.city-picker.is-chosen .city-picker-field input[type="text"] {
  border-color: var(--green-400);
  background: var(--green-100);
  font-weight: 500;
}

.city-picker-suggestions {
  position: relative;
}
.city-picker-suggestions .suggestions-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}
.city-picker-suggestions .suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-900);
  transition: background 160ms ease;
}
.city-picker-suggestions .suggestion-item:hover,
.city-picker-suggestions .suggestion-item:focus {
  background: var(--surface-2);
  outline: none;
}

.city-picker.is-missing .city-picker-field input[type="text"] {
  border-color: #d97462;
  box-shadow: 0 0 0 4px rgba(217, 116, 98, 0.15);
}

/* --- Summary extras --- */
.wizard-summary-block {
  margin-top: 18px;
}
.wizard-summary-sublabel {
  font-weight: 600;
  color: var(--ink-500);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.wizard-summary-description {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.wizard-summary-description-text {
  color: var(--ink-900);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  max-height: none;
}
.wizard-summary-description.is-clamped .wizard-summary-description-text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 9.3em;
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.wizard-summary-description.is-empty .wizard-summary-description-text {
  color: var(--ink-500);
  font-style: italic;
}
.wizard-summary-toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 0 0;
  margin: 0;
  color: var(--green-700);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.wizard-summary-toggle:hover {
  text-decoration: underline;
}

.wizard-summary-photos-empty {
  color: var(--ink-500);
  font-style: italic;
  font-size: 14px;
  padding: 4px 2px;
}
.wizard-summary-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.wizard-summary-photo {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.wizard-summary-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .wizard-summary-photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}
/* ==========================================================================
   [/WIZARD_V2]
   ========================================================================== */

/* ── Header CTA (Patch 1a) ── */
.nav-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.15;
}
.nav-cta-caption {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.2px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-logout-form {
  margin: 0;
}
.nav-links .btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 999px;
}
.nav-links .btn-primary {
  background: linear-gradient(135deg, #0f2a1d, #1f5d41);
  color: #fff;
}
.nav-links .btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
}
.nav-links .btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-700);
}
.nav-links .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--green-700);
  transform: translateY(-1px);
}

/* ── City push CTA (Patch 2) ── */
.page-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.city-push-cta {
  font-size: 14px;
}
.city-push-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  z-index: 100;
  min-width: 280px;
  max-width: min(420px, 92vw);
  padding: 14px 18px;
  background: #0f2a1d;
  color: #f3f6f4;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(11, 24, 17, 0.4);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.city-push-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 820px) {
  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   [SHARE_V1] Share controls under listing tiles + full share row on detail.
   Scope: new selectors only (.listing-cell, .listing-share, .share-*).
   Does not redefine .listing-card / .listing-grid / .listing-media.
   ========================================================================== */

/* [ACTION_ROW_V1] Cell wrapper is now the card chrome (was .card.hover-lift on the <a>).
   Moved so the action row (share + push) sits inside the same visual card. */
.listing-grid > .listing-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface, #ffffff);
  border: 1px solid var(--stroke, var(--gray-200, #e6eae7));
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(11, 24, 17, 0.04), 0 2px 8px rgba(11, 24, 17, 0.04));
  overflow: hidden;
  transition: transform var(--transition-slow, 220ms), box-shadow var(--transition-slow, 220ms), border-color var(--transition-fast, 120ms);
}
.listing-grid > .listing-cell.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2, 0 10px 24px rgba(11, 24, 17, 0.10), 0 2px 6px rgba(11, 24, 17, 0.06));
  border-color: rgba(47, 115, 83, 0.25);
}
.listing-grid > .listing-cell > .listing-card {
  flex: 1 1 auto;
}

/* [ACTION_ROW_V1] Bottom action row inside the card. */
.listing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gray-100, #eef2ef);
  background: #fff;
}
.listing-actions > .listing-share {
  position: relative;
  display: inline-flex;
}

/* [ACTION_ROW_V1] Pill action button inside tiles. */
.tile-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-700, #3b4a42);
  background: transparent;
  border: 1px solid var(--gray-200, #e6eae7);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms), color var(--transition-fast, 120ms);
}
.tile-action:hover,
.tile-action:focus-visible {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
  outline: none;
}
.tile-action[aria-expanded="true"] {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
}
.tile-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tile-action-label {
  font-size: 12px;
}

.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-700, #3b4a42);
  background: transparent;
  border: 1px solid var(--gray-200, #e6eae7);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms), color var(--transition-fast, 120ms);
}
.share-trigger:hover,
.share-trigger:focus-visible {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
  outline: none;
}
.share-trigger[aria-expanded="true"] {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
}
.share-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-trigger-label {
  font-size: 12px;
}

/* Popover anchored under the trigger */
.share-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 196px;
  background: #fff;
  border: 1px solid var(--gray-200, #e6eae7);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(11, 24, 17, 0.12), 0 2px 8px rgba(11, 24, 17, 0.06);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.share-popover[data-open="true"] {
  display: flex;
}
.share-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-900, #1f2a24);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast, 120ms);
}
.share-popover-item:hover,
.share-popover-item:focus-visible {
  background: var(--green-50, #f0faf4);
  outline: none;
}
.share-popover-item .share-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.share-popover-item .share-mark--vk   { background: #0077ff; color: #fff; }
.share-popover-item .share-mark--max  { background: #111827; color: #fff; }
.share-popover-item .share-mark--copy { background: var(--gray-100, #eef2ef); color: var(--ink-700, #3b4a42); }

/* Full share row (used on listing_detail) */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.share-row-label {
  font-size: 13px;
  color: var(--ink-500, #6b766f);
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-900, #1f2a24);
  background: #fff;
  border: 1px solid var(--gray-200, #e6eae7);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms);
}
.share-btn:hover,
.share-btn:focus-visible {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  outline: none;
}
.share-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.share-btn--vk  .share-btn-icon { background: #0077ff; }
.share-btn--max .share-btn-icon { background: #111827; }
.share-btn--copy .share-btn-icon { background: var(--gray-100, #eef2ef); color: var(--ink-700, #3b4a42); }

/* Reusable toast (share + anything else); mirrors .city-push-toast animation */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  z-index: 120;
  min-width: 240px;
  max-width: min(420px, 92vw);
  padding: 12px 16px;
  background: #0f2a1d;
  color: #f3f6f4;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(11, 24, 17, 0.4);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.share-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: keep tiles clean; tile actions become icon-only to save space */
@media (max-width: 720px) {
  .listing-actions {
    padding: 8px 10px;
  }
  .tile-action {
    padding: 6px 10px;
  }
  .tile-action-label {
    display: none;
  }
  .share-popover {
    right: auto;
    left: 0;
    min-width: 180px;
  }
  .share-row {
    gap: 6px;
  }
  .share-btn-text {
    display: none;
  }
  .share-btn {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   [DETAIL_V2] Listing detail — gallery + lightbox + social-row + VK CTA.
   Scope: new selectors only; no overrides of existing components.
   ========================================================================== */

.listing-detail {
  display: grid;
  gap: 18px;
  padding: 22px;
}
.listing-detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.listing-detail-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900, #1f2a24);
}
.listing-meta-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-500, #6b766f);
}
.listing-meta-line .dot { color: var(--gray-400, #c4ccc7); }
.listing-detail .listing-tile-type { align-self: flex-start; }

/* Media gallery — native scroll-snap carousel, square 1:1 cover tiles */
.media-gallery {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.media-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: #f2f5f2;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.media-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  /* Both axes handled natively by the browser's directional-scroll-lock:
     a horizontal-leaning gesture pans the carousel, a vertical-leaning one
     passes through to page scroll. Driving scrollLeft from JS was not smooth
     on real compositors — native path feels native because it is. */
  touch-action: pan-x pan-y pinch-zoom;
}
.media-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.media-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
}
.media-dots {
  display: none;
  gap: 6px;
  justify-content: center;
  padding: 2px 0;
}
.media-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-300, #d6dcd7);
  transition: background 260ms var(--ease-soft), width 260ms var(--ease-soft);
}
.media-dot.is-active {
  background: var(--green-500, #2f7353);
  width: 20px;
}
.media-slide img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.media-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(12, 20, 16, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 220ms var(--ease-soft);
}
.media-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms var(--ease-soft), transform 220ms var(--ease-soft);
}
.media-expand:hover { background: rgba(0, 0, 0, 0.68); }
.media-expand:active { transform: scale(0.94); }
.media-expand:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.media-expand svg { display: block; }
.media-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.media-thumb {
  flex: 0 0 84px;
  height: 84px;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #f2f5f2;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 260ms var(--ease-soft),
              transform 220ms var(--ease-soft),
              box-shadow 260ms var(--ease-soft);
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease-soft);
}
.media-thumb:hover { transform: translateY(-1px); }
.media-thumb:hover img { transform: scale(1.03); }
.media-thumb:active { transform: scale(0.97); }
.media-thumb.is-active {
  border-color: var(--green-500, #2f7353);
  box-shadow: 0 4px 14px rgba(47, 115, 83, 0.18);
}

/* Body */
.listing-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-800, #2a3b33);
  white-space: pre-wrap;
  margin: 0;
}
.listing-story {
  display: grid;
  min-width: 0;
  gap: 14px;
}
.listing-pet-name {
  min-width: 0;
  color: var(--ink-900, #1f2a24);
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}
.listing-address,
.listing-contacts {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700, #3b4a42);
  overflow-wrap: anywhere;
  word-break: normal;
}
.listing-address strong,
.listing-contacts strong {
  color: var(--ink-900, #1f2a24);
  font-weight: 600;
  margin-right: 4px;
}
.listing-detail .listing-map { width: 100%; }

/* Social row */
.social-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 2px;
  border-top: 1px solid var(--gray-100, #eef2ef);
  margin-top: 4px;
  flex-wrap: wrap;
}
.social-share-wrap {
  position: relative;
  display: inline-flex;
}
.social-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-700, #3b4a42);
  background: transparent;
  border: 1px solid var(--gray-200, #e6eae7);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms var(--ease-soft),
              border-color 220ms var(--ease-soft),
              color 220ms var(--ease-soft),
              transform 180ms var(--ease-soft),
              box-shadow 220ms var(--ease-soft);
}
.social-action:hover,
.social-action:focus-visible {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
  box-shadow: 0 6px 16px rgba(47, 115, 83, 0.10);
  outline: none;
}
.social-action:active { transform: scale(0.97); }
.social-action svg { display: block; }
.social-action .social-count { font-size: 13px; font-weight: 600; }
.social-action--like.is-liked {
  background: #fdecec;
  border-color: #f5c2c2;
  color: #c1272d;
}
.social-action--like.is-liked svg {
  fill: #c1272d;
  stroke: #c1272d;
}
.social-action--share[aria-expanded="true"] {
  background: var(--green-50, #f0faf4);
  border-color: var(--green-200, #c9e7d4);
  color: var(--green-700, #1b5e20);
}
.social-views {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500, #6b766f);
  font-size: 13px;
  padding: 6px 4px;
}
.social-views .social-views-count { font-weight: 500; }

/* [COMMENTS_CARD_V2] Premium green/cream theme for the inline comments block.
   Was a horizontal blue VK-CTA strip; now a quiet card matching the rest of
   the listing page. All comment-* sub-styles live here so the template can
   stay markup-only (no inline color/border decisions leaking into HTML). */
.comments-cta {
  display: block;
  padding: 18px 20px;
  background: #fafbf9;
  border: 1px solid var(--green-200, #c9e7d4);
  border-radius: 14px;
  font-size: 14px;
  color: var(--ink-800, #2a3b33);
  box-shadow: 0 1px 2px rgba(27, 60, 38, 0.04);
  transition: box-shadow 260ms var(--ease-soft),
              border-color 260ms var(--ease-soft);
}
.comments-cta.is-focused {
  box-shadow: 0 6px 18px rgba(27, 94, 32, 0.12);
  border-color: var(--green-300, #a4d4b3);
}
.comments-title {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink-800, #2a3b33);
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-item {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e8efe9;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 60, 38, 0.04);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.comment-body { min-width: 0; }
.comment-meta {
  font-size: 12px;
  color: var(--ink-500, #6b766f);
  margin-bottom: 4px;
}
.comment-meta strong {
  color: var(--ink-800, #2a3b33);
  font-weight: 600;
}
.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-800, #2a3b33);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.comments-empty {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-500, #6b766f);
  text-align: center;
  background: #ffffff;
  border: 1px dashed #dde5df;
  border-radius: 12px;
}
.comment-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink-800, #2a3b33);
  border: 1px solid #d6dfd9;
  border-radius: 10px;
  font: inherit;
  resize: vertical;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 180ms var(--ease-soft, ease),
              box-shadow 180ms var(--ease-soft, ease);
}
.comment-form textarea::placeholder {
  color: var(--ink-500, #6b766f);
}
.comment-form textarea:focus,
.comment-form textarea:focus-visible {
  border-color: var(--green-300, #a4d4b3);
  box-shadow: 0 0 0 3px rgba(43, 168, 90, 0.18);
}
.comments-login {
  margin-top: 12px;
  font-size: 14px;
}

/* [AVATAR_V1] Reusable round avatar with initial-letter fallback. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef3ee, #e0ebe2);
  color: var(--ink-800, #2a3b33);
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar--xs { width: 28px; height: 28px; font-size: 12px; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--md { width: 36px; height: 36px; font-size: 14px; }

/* .nav-avatar removed — header avatar was breaking mobile layout. Keeping
   .avatar/.avatar--xs/sm/md as a reusable component for comments + dashboard. */
.comments-cta-text { flex: 1 1 auto; }
.btn-vk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  background: #0077ff;
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms var(--ease-soft),
              transform 180ms var(--ease-soft),
              box-shadow 220ms var(--ease-soft);
}
.btn-vk:hover { background: #0064d9; box-shadow: 0 8px 20px rgba(0, 119, 255, 0.22); }
.btn-vk:active { transform: scale(0.97); }
.btn-vk-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 16, 14, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lightboxFadeIn 280ms var(--ease-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lightboxImgIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  animation: lightboxImgIn 360ms var(--ease-soft) both;
}
.lightbox-nav,
.lightbox-close {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.lightbox-nav:hover,
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-nav:active,
.lightbox-close:active { transform: scale(0.95); }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav:active { transform: translateY(-50%) scale(0.95); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-close {
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.lightbox-counter {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.4px;
}

@media (max-width: 720px) {
  .listing-detail { padding: 16px; gap: 14px; }
  .listing-detail-header h1 { font-size: 22px; }
  .media-gallery { max-width: none; }
  .media-hero {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
  }
  .media-dots { display: flex; }
  .media-thumb { flex: 0 0 64px; height: 64px; }
  .social-row { gap: 4px; padding: 10px 0 2px; }
  .social-action { padding: 7px 10px; font-size: 12px; }
  .social-views { margin-left: auto; font-size: 12px; }
  .comments-cta {
    padding: 14px 14px;
    box-shadow: none;
  }
  .comments-cta .btn-vk { justify-content: center; }
  .comments-title { font-size: 21px; }
  .comment-item { box-shadow: none; }
  .lightbox { padding: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 10px; right: 10px; }
  .lightbox-counter { top: 16px; }
}

/* Reduced-motion respect — any user with OS setting "reduce motion" gets a calm site */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .lightbox,
  .lightbox-img { animation: none !important; }
  .media-thumb,
  .media-thumb img,
  .media-dot,
  .media-count,
  .media-expand,
  .social-action,
  .btn-vk,
  .comments-cta,
  .lightbox-nav,
  .lightbox-close { transition: none !important; }
  .media-track { scroll-behavior: auto !important; }
}

/* [DETAIL_REVERT_MC6] The two `@media (max-width: 720px)` blocks that
   reshuffled .listing-detail on mobile ("visual-first social-post feel"
   and "mobile unify") were removed here. They hid the <h1>, flipped the
   header below the gallery via order:-2/-1, stripped the card chrome,
   and did 100vw full-bleed on hero/thumbs. The natural card layout with
   a visible title and an explicit media-first detail order is preferred; the
   prior baseline block above (line ~2053) already handles mobile
   padding/typography/thumb size correctly. Social-row, comments-cta
   and header styling are untouched. */

/* ──────────────────────────────────────────────────────────────────────────
   [M-COMPACT-V2] Mobile header + container. Canonical single source of truth.
   Desktop is untouched; all rules live inside @media (max-width: 820px).
   Historical header patches (Patch 1a..1a-mobile-v4) were removed upstream
   so no earlier mobile rule fights this block.
   ────────────────────────────────────────────────────────────────────────── */

/* Short CTA label is hidden on desktop; swapped in on mobile. */
.cta-short { display: none; }

@media (max-width: 820px) {
  /* Geometry baseline — kill any rogue horizontal scroll from child overflow. */
  html, body {
    overflow-x: hidden;
  }

  /* Symmetric background — desktop's radial is centered off to 15%/10%
     (asymmetric by design for the large layout). On mobile that skew leaks
     through the translucent header and 16px container gutters, reading as a
     greenish stripe on the left and a neutral one on the right. Use a
     horizontally-centered gradient so both sides look identical. */
  body {
    background: radial-gradient(circle at 50% 0%, #f1f7f1 0%, #f6f3ee 55%, #f3f5f2 100%);
  }

  /* Opaque header — no translucency means no body-gradient leak through it,
     so the top ~56px reads as one clean cream strip edge-to-edge. */
  .page > header {
    background: #faf9f7;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(217, 225, 219, 0.55);
  }

  /* Container: 16px symmetric gutters — visible air, no stripes. */
  .container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header: flex row, brand ↔ actions with breathing gap.
     IMPORTANT: vertical longhand only — shorthand `padding: 10px 0` would
     zero out `.container { padding-left:16px; padding-right:16px }` set
     above, collapsing header gutters to 0 and making the brand/buttons
     flush against the viewport edges (while main-content stays at 16px).
     That mismatch reads as a visual tilt across the page. */
  .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 0;
  }

  /* Brand — may shrink if viewport is narrow. */
  .brand {
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    min-width: 0;
  }

  /* Actions row. */
  .nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    row-gap: 0;
    column-gap: 8px;
    width: auto;
    margin: 0;
    padding: 0;
  }

  /* CTA label swap: full → short on mobile. */
  .nav-links .cta-full { display: none; }
  .nav-links .cta-short { display: inline; }

  /* Unified pill geometry — same height, radius, weight, snappy transitions. */
  .nav-links .btn,
  .nav-links .btn-primary,
  .nav-links .btn-ghost,
  .nav-links .nav-logout-form .btn {
    padding: 8px 14px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    border-radius: 999px;
    width: auto;
    max-width: none;
    min-width: 0;
    white-space: nowrap;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition:
      transform 120ms ease,
      background 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease;
  }

  /* Solid primary — cleaner than gradient on small pills. */
  .nav-links .btn-primary {
    background: #1a4a34;
    color: #fff;
    border: 1px solid #143a28;
    box-shadow: 0 1px 2px rgba(15, 42, 29, 0.18);
  }

  /* Ghost paired to primary's weight — same visual gravity. */
  .nav-links .btn-ghost {
    background: #ffffff;
    color: var(--ink-900);
    border: 1px solid var(--stroke);
    box-shadow: 0 1px 2px rgba(15, 42, 29, 0.06);
  }

  /* Kill sticky desktop hover transforms on touch. */
  .nav-links .btn:hover,
  .nav-links .btn-primary:hover,
  .nav-links .btn-ghost:hover {
    transform: none;
  }

  /* Single snappy press feedback (scale) + colour shift. */
  .nav-links .btn:active,
  .nav-links .btn-primary:active,
  .nav-links .btn-ghost:active {
    transform: scale(0.96);
    transition-duration: 60ms;
  }
  .nav-links .btn-primary:active {
    background: #143a28;
    box-shadow: 0 1px 2px rgba(15, 42, 29, 0.24);
  }
  .nav-links .btn-ghost:active {
    background: #f3f5f2;
    border-color: var(--green-400);
  }

  /* Logout form is just a wrapper; keep it inline, no layout impact. */
  .nav-links .nav-logout-form {
    margin: 0;
    padding: 0;
    display: flex;
  }

  main { padding: 16px 0 40px; }
  .hero { padding: 18px 16px; border-radius: 18px; }
  footer { padding: 20px 0 28px; }
}
/* ── [/M-COMPACT-V2] ─────────────────────────────────────────────────────── */


/* ==========================================================================
   [OTHER_LISTINGS_V1] Horizontal carousel under listing_detail. CSS-only:
   overflow-x: auto + scroll-snap; no JS. Desktop and mobile share one style,
   card width shrinks slightly on mobile. Scoped to .other-listings*.
   ========================================================================== */
.other-listings {
  margin-top: 32px;
}
.other-listings-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  letter-spacing: 0.2px;
  color: var(--green-900);
  margin: 0 0 14px;
}
.other-listings-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 42, 29, 0.18) transparent;
  padding: 4px 0 10px;
  margin: 0;
}
.other-listings-row::-webkit-scrollbar {
  height: 6px;
}
.other-listings-row::-webkit-scrollbar-thumb {
  background: rgba(15, 42, 29, 0.18);
  border-radius: 3px;
}
.other-listing-card {
  flex: 0 0 168px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.other-listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(47, 115, 83, 0.25);
}
.other-listing-card:active {
  transform: translateY(0);
}
.other-listing-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ea, #f6f9f6);
}
.other-listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.other-listing-media--empty::before {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 34px;
  opacity: 0.35;
}
.other-listing-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
}
.other-listing-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.other-listing-meta {
  font-size: 11px;
  color: var(--ink-500);
}
@media (max-width: 820px) {
  .other-listings { margin-top: 22px; }
  .other-listings-title { font-size: 20px; margin-bottom: 10px; }
  .other-listing-card { flex: 0 0 140px; }
}

/* ==========================================================================
   [PINNED_V1] Pinned listings showcase on city_detail — 4-wide grid on
   desktop, 3 on medium, 2 on mobile. Sits above the main listing-grid.
   Scoped to .pinned-listings* selectors.
   ========================================================================== */
.pinned-listings {
  margin: 0 0 28px;
}
.pinned-listings-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  letter-spacing: 0.2px;
  color: var(--green-900);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pinned-listings-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--green-500), var(--green-700));
}
.pinned-listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pinned-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.pinned-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(47, 115, 83, 0.25);
}
.pinned-card .listing-media {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ea, #f6f9f6);
}
.pinned-card .listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pinned-card .listing-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
}
.pinned-card .listing-tile-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pinned-card .listing-tile-meta {
  font-size: 11px;
  color: var(--ink-500);
}
.pinned-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--green-800);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(11, 24, 17, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 1080px) {
  .pinned-listings-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pinned-listings { margin-bottom: 20px; }
  .pinned-listings-title { font-size: 22px; }
  .pinned-listings-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* [CITY_LINK_V1] City name in listing_detail meta-line.
   Inherits the surrounding meta-line color (not default browser blue) and
   only gains a subtle dotted underline + accent-green color on hover. On
   mobile the touch target keeps its natural inline size — we just add
   negative-space via padding for a slightly larger hit area. */
.city-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(15, 42, 29, 0.25);
  padding: 0 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.city-link:hover,
.city-link:focus-visible {
  color: var(--green-700);
  border-bottom-color: var(--green-500);
  outline: none;
}
.city-link:active {
  color: var(--green-800);
}

/* [VK_CITY_GROUP_V2] Quiet card matching .seo-other-cities / .city-help-hub.
   No left blue stripe, no heavy dark-gradient button. */
.vk-city-cta {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 16px;
  margin: 18px 0 28px;
  padding: 18px 20px;
  border: 1px solid rgba(31, 93, 65, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(31, 93, 65, 0.10), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow: 0 14px 34px rgba(11, 24, 17, 0.07);
}
.vk-city-cta::before { content: none !important; }
.vk-city-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 93, 65, 0.10);
  color: var(--green-700);
  flex: none;
}
.vk-city-cta-text {
  min-width: 0;
  width: 100%;
}
.vk-city-cta-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
  color: var(--green-900);
  letter-spacing: -0.005em;
  word-break: normal;
  overflow-wrap: break-word;
}
.vk-city-cta-sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-500);
  word-break: normal;
  overflow-wrap: break-word;
}
.vk-city-cta-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.vk-city-cta-btn:hover,
.vk-city-cta-btn:focus-visible {
  background: var(--green-800);
  transform: translateY(-1px);
  outline: none;
}
.vk-city-cta-btn:active { transform: scale(0.98); }

/* Listing detail renders the CTA without the optional icon used on city
   pages.  Give its two real children both desktop columns instead of leaving
   the shared 54px icon track as an empty middle-space trap. */
@media (min-width: 721px) {
  .vk-city-cta--listing {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .vk-city-cta--listing .vk-city-cta-text {
    min-width: 0;
    word-break: normal;
    overflow-wrap: normal;
  }
  .vk-city-cta--listing .vk-city-cta-title,
  .vk-city-cta--listing .vk-city-cta-sub {
    display: block;
    word-break: normal;
    overflow-wrap: normal;
  }
  .vk-city-cta--listing .vk-city-cta-btn {
    min-width: max-content;
  }
}

@media (max-width: 720px) {
  .vk-city-cta {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 22px;
    gap: 12px;
    margin: 14px 0 26px;
    border-radius: 22px;
  }
  .vk-city-cta-icon { width: 48px; height: 48px; border-radius: 14px; }
  .vk-city-cta-title { font-size: 17px; }
  .vk-city-cta-sub   { font-size: 13.5px; }
  .vk-city-cta-btn {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vk-city-cta-btn { transition: none; }
  .vk-city-cta-btn:hover,
  .vk-city-cta-btn:focus-visible { transform: none; }
}

/* =========================================================================
   [HERO_METRICS_V1] — three-number strip under hero.
   ========================================================================= */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 26px;
}
.hero-metric {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-metric-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  line-height: 1;
  color: var(--green-800);
  letter-spacing: 0.3px;
}
.hero-metric-label {
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: 0.2px;
}
@media (max-width: 640px) {
  .hero-metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 20px; }
  .hero-metric { padding: 10px 10px; }
  .hero-metric-value { font-size: 22px; }
  .hero-metric-label { font-size: 11px; }
}

/* =========================================================================
   [SUCCESS_STORIES_V1] — "Вернулись домой" gallery on home.
   ========================================================================= */
.success-stories { margin-top: 36px; }
.success-stories-head { margin-bottom: 14px; }
.success-stories-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  color: var(--green-900);
  margin: 0 0 6px;
}
.success-stories-sub {
  font-size: 14px;
  color: var(--ink-500);
  margin: 0;
}
.success-stories-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.success-story-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.success-story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.success-story-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ea, #f6f9f6);
}
.success-story-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.success-story-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 74, 52, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(15, 42, 29, 0.2);
}
.success-story-body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.success-story-title {
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.success-story-meta { font-size: 12px; color: var(--ink-500); }
@media (max-width: 1080px) { .success-stories-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .success-stories-row { grid-template-columns: 1fr; } .success-stories-head h2 { font-size: 24px; } }

/* =========================================================================
   [RESOLVED_V1] Status badge in listing-detail meta line.
   ========================================================================= */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.status-badge--searching {
  background: #fdecec;
  color: #c33a3a;
  border: 1px solid rgba(195, 58, 58, 0.25);
}
.status-badge--resolved {
  background: #e6f4ea;
  color: var(--green-700);
  border: 1px solid rgba(31, 93, 65, 0.25);
}

/* =========================================================================
   [MINI_MAP_V1] Listing detail mini-map wrapper.
   ========================================================================= */
.listing-minimap-wrap { margin-top: 6px; }
.listing-minimap-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.listing-minimap-head strong { font-size: 14px; color: var(--ink-900); }
.listing-minimap-sub { font-size: 12px; color: var(--ink-500); }

/* =========================================================================
   [CITY_FILTERS_V1] Chip-row filters on city page.
   ========================================================================= */
.city-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.city-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.city-filter-label {
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.3px;
  min-width: 60px;
  font-weight: 500;
}
.city-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.city-filter-chip:hover {
  background: var(--green-100);
  border-color: var(--green-400);
  color: var(--green-700);
}
.city-filter-chip.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 42, 29, 0.18);
}
@media (max-width: 640px) {
  .city-filters { padding: 10px 12px; gap: 6px; }
  .city-filter-label { min-width: auto; font-size: 11px; }
  .city-filter-chip { padding: 5px 10px; font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   [COMMENTS_PREMIUM_OVERRIDE_V1] Final premium look for the comments block.
   Earlier passes left blue-leaning artifacts — browser default link color
   on «Войдите…», ::selection blue, mobile tap-highlight, focus rings on
   some browsers. This block sits at the very end of the file so its
   specificity wins over upstream rules without touching them. Palette:
   cream (#fffdf7 → #f5f0e6) + deep green (#144e34) + warm gold accent
   (#af8b4c) for focus.
   ────────────────────────────────────────────────────────────────────────── */
.comments-cta {
  background: linear-gradient(180deg, #fffdf7 0%, #f5f0e6 100%);
  border: 1px solid rgba(20, 78, 52, 0.18);
  box-shadow: 0 18px 45px rgba(15, 42, 29, 0.10);
}
.comments-cta.is-focused {
  box-shadow: 0 0 0 3px rgba(175, 139, 76, 0.16),
              0 18px 45px rgba(15, 42, 29, 0.10);
  border-color: rgba(20, 78, 52, 0.30);
}
.comments-cta .comments-title {
  color: #144e34;
}
.comments-cta .comment-item {
  background: #ffffff;
  border: 1px solid rgba(20, 78, 52, 0.10);
  box-shadow: 0 1px 2px rgba(15, 42, 29, 0.05);
}
.comments-cta .comment-meta {
  color: #6a7770;
}
.comments-cta .comment-meta strong {
  color: #144e34;
}
.comments-cta .comment-text {
  color: #2a3b33;
}
.comments-cta .comments-empty {
  background: #ffffff;
  border: 1px dashed rgba(20, 78, 52, 0.18);
  color: #6a7770;
}
.comments-cta a,
.comments-cta a:visited {
  color: #144e34;
}
.comments-cta a:hover {
  color: #0d3522;
}
.comments-cta * {
  -webkit-tap-highlight-color: transparent;
}
.comments-cta ::selection {
  background: rgba(175, 139, 76, 0.22);
  color: #2a3b33;
}
.comments-cta .comment-form textarea {
  background: #ffffff;
  border: 1px solid rgba(20, 78, 52, 0.18);
  color: #2a3b33;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.comments-cta .comment-form textarea::placeholder {
  color: #8b948f;
}
.comments-cta .comment-form textarea:focus,
.comments-cta .comment-form textarea:focus-visible {
  border-color: rgba(20, 78, 52, 0.40);
  box-shadow: 0 0 0 3px rgba(175, 139, 76, 0.16);
  outline: none;
}

@media (max-width: 720px) {
  .comments-cta {
    box-shadow: 0 6px 18px rgba(15, 42, 29, 0.08);
  }
  .comments-cta .comment-item {
    box-shadow: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   [HEADER_MOBILE_WRAP_V1] On very narrow viewports the brand + 3 auth pills
   ("Разместить" + "Кабинет" + "Выйти") exceed iPhone Safari width (≤375px),
   pushing the brand under the buttons. The canonical M-COMPACT-V2 block
   above sets `flex-wrap: nowrap` on .nav and .nav-links — fine at 720-820px,
   too tight at <=480px. Here we relax wrap so brand stays on its own row
   and actions wrap to a second row when needed. Header above 480px unchanged.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .brand {
    flex: 1 1 auto;
    font-size: 19px;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 6px;
    row-gap: 6px;
  }
  .nav-links .btn,
  .nav-links .btn-primary,
  .nav-links .btn-ghost,
  .nav-links .nav-logout-form .btn {
    padding: 7px 11px;
    min-height: 34px;
    font-size: 12.5px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   [LISTING_META_LINE_V2] Fix badges/city/date row under the listing title.
   - Prior `align-self: flex-start` on .listing-tile-type pulled the type
     pill out of vertical centering, so it looked higher than the status
     badge next to it.
   - Status-badge + tile-type had different padding/font, making the row
     visually lumpy.
   - The ascii dot separator (·) inside flex-wrap left an orphan dot below
     a wrapped badge.
   - .city-link had a dashed underline that looked like a link error.
   ────────────────────────────────────────────────────────────────────────── */
.listing-detail .listing-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  row-gap: 6px;
}
.listing-detail .listing-meta-line .listing-tile-type,
.listing-detail .listing-meta-line .status-badge {
  align-self: center;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.4px;
}
.listing-detail .listing-meta-line .dot { display: none; }
.listing-detail .listing-meta-line .city-link {
  border-bottom: none;
  color: var(--green-700, #1b5e20);
  font-weight: 500;
}
.listing-detail .listing-meta-line .city-link:hover,
.listing-detail .listing-meta-line .city-link:focus-visible {
  color: var(--green-800, #144e34);
  border-bottom: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* [MAP_FALLBACK_V1] Quiet card replacing the empty grey-green rectangle
   when coords are missing or Yandex fails to load. */
.listing-map-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(20, 78, 52, 0.22);
  background: #fafbf9;
  color: var(--ink-500, #6b766f);
  font-size: 13.5px;
  line-height: 1.4;
}
.listing-map-fallback svg {
  flex: 0 0 auto;
  color: var(--green-500, #4a8c66);
}

/* ──────────────────────────────────────────────────────────────────────────
   [COMMENTS_PREMIUM_OVERRIDE_V2] Stronger final override using `body #comments`
   selectors + !important so it beats any earlier rule, including stale
   browser-cached CSS that may still be active until the cache-buster
   query-string fully propagates. Palette: cream + deep green + warm gold.
   No blue anywhere — background, border, focus ring, ::selection, link.
   ────────────────────────────────────────────────────────────────────────── */
body #comments.comments-cta,
body .listing-detail #comments.comments-cta {
  background: linear-gradient(180deg, #fbf8ef 0%, #eef5ec 100%) !important;
  border: 1px solid rgba(20, 78, 52, 0.28) !important;
  box-shadow: 0 18px 42px rgba(15, 42, 29, 0.12) !important;
  border-radius: 14px !important;
}
body #comments.comments-cta,
body #comments.comments-cta * {
  -webkit-tap-highlight-color: transparent !important;
}
body #comments.comments-cta .comments-title {
  color: #103d2a !important;
}
body #comments.comments-cta .comment-item {
  background: #ffffff !important;
  border: 1px solid rgba(20, 78, 52, 0.14) !important;
  box-shadow: 0 1px 2px rgba(15, 42, 29, 0.05) !important;
  border-radius: 12px !important;
}
body #comments.comments-cta .comment-meta strong {
  color: #103d2a !important;
}
body #comments.comments-cta a,
body #comments.comments-cta a:visited {
  color: #103d2a !important;
}
body #comments.comments-cta ::selection {
  background: rgba(175, 139, 76, 0.22) !important;
  color: #103d2a !important;
}
body #comments.comments-cta .comment-form textarea {
  background: #fffdf8 !important;
  border: 1px solid rgba(20, 78, 52, 0.22) !important;
  color: #2a3b33 !important;
  outline: none !important;
  box-shadow: none !important;
}
body #comments.comments-cta .comment-form textarea:focus,
body #comments.comments-cta .comment-form textarea:focus-visible {
  border-color: rgba(20, 78, 52, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(175, 139, 76, 0.16) !important;
  outline: none !important;
}
body #comments.comments-cta .btn-primary {
  background: #1a4a34 !important;
  color: #fff !important;
  border: 1px solid #143a28 !important;
}
body #comments.comments-cta .btn-primary:focus,
body #comments.comments-cta .btn-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(175, 139, 76, 0.28) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   [COMMENT_AVATAR_V2] Force a clean two-column layout: 44px round avatar
   + body. Image is clamped to the avatar circle no matter its source size.
   Selectors are scoped to comments and use !important to beat any earlier
   rule, including stale cached CSS.
   ────────────────────────────────────────────────────────────────────────── */
body #comments.comments-cta .comment-item {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}
body #comments.comments-cta .comment-item .avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #eef3ee, #e0ebe2) !important;
  color: #103d2a !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  flex: 0 0 40px !important;
  line-height: 1 !important;
  font-size: 15px !important;
}
body #comments.comments-cta .comment-item .avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
body #comments.comments-cta .comment-item .comment-body {
  min-width: 0 !important;
}
body #comments.comments-cta .comment-item .comment-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  align-items: center !important;
  font-size: 12.5px !important;
  margin-bottom: 2px !important;
}
body #comments.comments-cta .comment-item .comment-text {
  margin-top: 4px !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 480px) {
  body #comments.comments-cta .comment-item {
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  body #comments.comments-cta .comment-item .avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   [CREATE_MAP_YMAP_V1] Polish for the create-form Yandex map block.
   Replaces 2GIS visual styling that lived inline; here we just give the
   map container a calm border + radius and a stacking context for the
   suggestions popover.
   ────────────────────────────────────────────────────────────────────────── */
.create-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.create-map-hint {
  font-size: 13px;
  color: var(--ink-500, #6b766f);
}
#create-map {
  width: 100%;
  height: 320px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: #eef2ef;
}
@media (max-width: 480px) {
  #create-map { height: 260px; }
}

/* [CITY_HELP_HUB_V1] Premium UI block for /city/<slug>/ — guide cards
   + FAQ accordion. Uses tokens defined in :root. */
.city-help-hub {
  margin: 28px 0 24px;
  padding: 28px 28px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(31, 93, 65, 0.12);
  background:
    linear-gradient(180deg, rgba(238, 247, 242, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%),
    var(--surface);
  box-shadow: var(--shadow-1);
}
.city-help-head { margin-bottom: 18px; }
.city-help-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.city-help-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
.city-help-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
}

.city-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 6px;
}
.city-guide-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  min-height: 118px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(31, 93, 65, 0.10);
  background: var(--surface);
  color: var(--ink-900);
  text-decoration: none;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.city-guide-card:hover,
.city-guide-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(31, 93, 65, 0.35);
  box-shadow: var(--shadow-1);
  outline: none;
}
.city-guide-card:hover .city-guide-arrow,
.city-guide-card:focus-visible .city-guide-arrow {
  transform: translateX(3px);
  color: var(--green-700);
}
.city-guide-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}
.city-guide-card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--green-900);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.city-guide-card-desc {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-500);
}
.city-guide-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 20px;
  color: var(--ink-300);
  transition: transform var(--transition-fast), color var(--transition-fast);
  justify-self: end;
  align-self: center;
}

.city-faq-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed rgba(31, 93, 65, 0.15);
}
.city-faq-panel-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--green-900);
}
.city-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.city-faq-item {
  background: var(--surface);
  border: 1px solid rgba(31, 93, 65, 0.10);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  overflow: hidden;
}
.city-faq-item[open] {
  background: linear-gradient(180deg, var(--green-100) 0%, var(--surface) 100%);
  border-color: rgba(31, 93, 65, 0.28);
  box-shadow: 0 6px 18px rgba(11, 24, 17, 0.05);
}
.city-faq-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-900);
  cursor: pointer;
  list-style: none;
}
.city-faq-summary::-webkit-details-marker { display: none; }
.city-faq-summary::before {
  content: "+";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-100);
  border-radius: 50%;
  transition: transform var(--transition-fast),
              background var(--transition-fast);
}
.city-faq-item[open] .city-faq-summary::before {
  content: "–";
  transform: rotate(180deg);
  background: var(--green-200);
}
.city-faq-answer {
  padding: 0 16px 16px 52px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}

@media (max-width: 720px) {
  .city-help-hub { padding: 22px 18px 18px; border-radius: 22px; }
  .city-help-title { font-size: 20px; }
  .city-help-subtitle { font-size: 14px; }
  .city-guide-grid { grid-template-columns: 1fr; gap: 10px; }
  .city-guide-card { padding: 14px; grid-template-columns: 48px minmax(0, 1fr) 22px; column-gap: 12px; row-gap: 4px; min-height: 0; }
  .city-guide-icon { width: 48px; height: 48px; font-size: 22px; }
  .city-guide-card-title { font-size: 15px; }
  .city-guide-card-desc { font-size: 13px; }
  .city-faq-summary { padding: 12px 14px; font-size: 14px; }
  .city-faq-answer { padding: 0 14px 14px 50px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .city-guide-card,
  .city-guide-arrow,
  .city-faq-item,
  .city-faq-summary::before {
    transition: none;
  }
  .city-guide-card:hover,
  .city-guide-card:focus-visible {
    transform: none;
  }
  .city-guide-card:hover .city-guide-arrow,
  .city-guide-card:focus-visible .city-guide-arrow {
    transform: none;
  }
}

/* [CITY_GUIDE_PAGE_V1] Premium FAQ + related-guides blocks on city guide
   pages. Reuse .city-faq-* + .city-guide-card from the city-help-hub;
   here we only add page-level wrappers and a 3-column grid variant. */
.city-faq-card {
  margin: 28px 0 24px;
  padding: 26px 28px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(31, 93, 65, 0.12);
  background:
    linear-gradient(180deg, rgba(238, 247, 242, 0.55) 0%, rgba(255, 255, 255, 0.96) 100%),
    var(--surface);
  box-shadow: var(--shadow-1);
}
.city-faq-card .city-faq-panel-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: -0.005em;
}

.city-related-guides {
  margin: 28px 0 24px;
  padding: 26px 28px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(31, 93, 65, 0.12);
  background:
    linear-gradient(180deg, rgba(238, 247, 242, 0.55) 0%, rgba(255, 255, 255, 0.96) 100%),
    var(--surface);
  box-shadow: var(--shadow-1);
}
.city-related-guides-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: -0.005em;
}
.city-guide-grid--related {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
}

@media (max-width: 720px) {
  .city-faq-card { padding: 20px 18px 16px; border-radius: 22px; margin: 20px 0; }
  .city-faq-card .city-faq-panel-title { font-size: 17px; }
  .city-related-guides { padding: 20px 18px 18px; border-radius: 22px; margin: 20px 0; }
  .city-related-guides-title { font-size: 17px; margin-bottom: 12px; }
  .city-guide-grid--related { grid-template-columns: 1fr; }
}

/* [GUIDE_CTA_V1] Compact CTA card on city guide pages. Premium look,
   significantly smaller than the previous .card+.btn block, especially
   on mobile where the previous CTA filled half the screen. */
.guide-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  margin: 22px 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(31, 93, 65, 0.16);
  background:
    linear-gradient(135deg, rgba(238, 247, 242, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%),
    var(--surface);
  box-shadow: var(--shadow-1);
}
.guide-cta-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 340px;
  min-width: 280px;
  max-width: 480px;
}
.guide-cta-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--green-900);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.guide-cta-sub {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-500);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.guide-cta-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 420px;
}
.guide-cta-primary,
.guide-cta-secondary {
  white-space: nowrap;
}
.guide-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green-700);
  border-radius: 999px;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}
.guide-cta-primary:hover,
.guide-cta-primary:focus-visible {
  background: var(--green-800);
  transform: translateY(-1px);
  outline: none;
}
.guide-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-800);
  background: var(--surface);
  border: 1px solid rgba(31, 93, 65, 0.2);
  border-radius: 999px;
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}
.guide-cta-secondary:hover,
.guide-cta-secondary:focus-visible {
  border-color: rgba(31, 93, 65, 0.4);
  background: var(--green-100);
  outline: none;
}

@media (max-width: 720px) {
  .guide-cta-card {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
  }
  .guide-cta-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .guide-cta-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
  }
  .guide-cta-primary {
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
  }
  .guide-cta-secondary {
    flex: 1 1 auto;
    padding: 9px 12px;
    font-size: 13px;
  }
  .guide-cta-title { font-size: 16px; }
  .guide-cta-sub   { font-size: 13px; }
}

/* [GUIDE_EXAMPLES_V1] Real listing photos block on city guide pages. */
.guide-example-listings {
  margin: 22px 0;
}
.guide-example-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: -0.005em;
}
.guide-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.guide-example-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(31, 93, 65, 0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--ink-900);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.guide-example-card:hover,
.guide-example-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(31, 93, 65, 0.3);
  box-shadow: var(--shadow-1);
  outline: none;
}
.guide-example-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #eef3ee, #e0ebe2);
  overflow: hidden;
}
.guide-example-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-example-img--empty {
  background: var(--green-100);
}
.guide-example-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.guide-example-type {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
}
.guide-example-type--found {
  background: #fff1d6;
  color: #8a5a00;
}
.guide-example-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--green-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-example-meta {
  font-size: 12px;
  color: var(--ink-500);
}
.guide-example-more {
  margin-top: 10px;
  text-align: right;
}
.guide-example-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-700);
}
.guide-example-link:hover { color: var(--green-800); text-decoration: underline; }

@media (max-width: 720px) {
  .guide-example-grid { grid-template-columns: 1fr; gap: 10px; }
  .guide-example-heading { font-size: 16px; }
  .guide-example-img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-cta-primary,
  .guide-cta-secondary,
  .guide-example-card {
    transition: none;
  }
  .guide-cta-primary:hover,
  .guide-cta-primary:focus-visible,
  .guide-example-card:hover,
  .guide-example-card:focus-visible {
    transform: none;
  }
}

/* [HOME_GUIDES_V1] Premium "Useful guides" block on the home page.
   Reuses .city-help-hub + .city-guide-card; adds only the actions row. */
.home-guides-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px) {
  .home-guides-actions { margin-top: 14px; }
}

/* [HOME_STEPS_V2] Premium "Как это работает" — distinct visual language
   from .city-help-hub: deep glow background, three differently-tinted
   cards (mint / cream / sage), oversized title, no numeric prefix. */
.home-steps {
  position: relative;
  overflow: hidden;
  margin: 36px 0;
  padding: 32px 32px 30px;
  border-radius: 30px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  background:
    radial-gradient(circle at 8% 12%, rgba(31, 93, 65, 0.15), transparent 38%),
    radial-gradient(circle at 92% 88%, rgba(245, 198, 120, 0.18), transparent 42%),
    linear-gradient(135deg, #f2faf5 0%, #fffaf1 100%);
  box-shadow: 0 24px 60px rgba(11, 24, 17, 0.08);
}
.home-steps-head {
  position: relative;
  margin-bottom: 24px;
  max-width: 640px;
}
.home-steps-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-700);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 93, 65, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.home-steps-title {
  margin: 0 0 8px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--green-900);
  letter-spacing: -0.015em;
}
.home-steps-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 620px;
}

.home-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.home-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(15, 61, 46, 0.10);
  border-radius: 26px;
  box-shadow: 0 14px 32px rgba(11, 24, 17, 0.06);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.home-step-card--city {
  background: linear-gradient(180deg, #ffffff 0%, #edf8f1 100%);
}
.home-step-card--post {
  background: linear-gradient(180deg, #ffffff 0%, #fff6e8 100%);
}
.home-step-card--response {
  background: linear-gradient(180deg, #ffffff 0%, #ecf3ee 100%);
}
@media (hover: hover) {
  .home-step-card:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 93, 65, 0.30);
    box-shadow: 0 22px 44px rgba(11, 24, 17, 0.10);
  }
}
.home-step-icon {
  align-self: flex-start;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 61, 46, 0.10);
  box-shadow: 0 8px 18px rgba(11, 24, 17, 0.06);
}
.home-step-title {
  margin: 0;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
.home-step-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-700);
}

@media (max-width: 720px) {
  .home-steps {
    padding: 22px 18px 20px;
    border-radius: 24px;
    margin: 28px 0;
  }
  .home-steps-title { font-size: 23px; }
  .home-steps-subtitle { font-size: 14px; }
  .home-steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-step-card {
    min-height: 0;
    padding: 20px 18px;
    gap: 10px;
  }
  .home-step-icon { width: 52px; height: 52px; font-size: 26px; border-radius: 18px; }
  .home-step-title { font-size: 20px; }
  .home-step-text  { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-step-card { transition: none; }
  .home-step-card:hover { transform: none; }
}

/* [CITY_MAP_INFO_V1] Compact info card under the city map. Replaces the
   former seo-lead block which had a long paragraph + 5 category buttons
   that duplicated the city-filters chips below. */
.city-map-info-card {
  margin: 0 0 22px;
  padding: 22px 24px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(15, 61, 46, 0.10);
  background:
    linear-gradient(180deg, rgba(238, 247, 242, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%),
    var(--surface);
  box-shadow: 0 12px 30px rgba(11, 24, 17, 0.06);
}
.city-map-info-title {
  margin: 0 0 10px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
.city-map-info-text {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 720px;
}
.city-map-info-text:last-of-type { margin-bottom: 0; }
.city-map-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.city-map-info-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid rgba(31, 93, 65, 0.18);
  padding: 6px 12px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .city-map-info-card {
    padding: 18px 18px 16px;
    border-radius: 22px;
    margin-bottom: 18px;
  }
  .city-map-info-title { font-size: 18px; }
  .city-map-info-text  { font-size: 14.5px; }
  .city-map-info-pill  { font-size: 12px; padding: 5px 10px; }
}

/* [CITY_MAP_PANEL_V1] Unified panel: map + info-card share one wrapper,
   one border, one shadow. Inner blocks reset their own chrome to avoid
   double frames. Standalone .city-map-info-card (no panel parent) keeps
   its previous look thanks to the original rule untouched. */
.city-map-panel {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  border-radius: 28px;
  border: 1px solid rgba(31, 93, 65, 0.12);
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 93, 65, 0.10), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
  box-shadow: 0 18px 44px rgba(11, 24, 17, 0.08);
}
.city-map-panel-media {
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(31, 93, 65, 0.10);
  background: rgba(255, 255, 255, 0.5);
}
.city-map-panel-caption {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--green-900);
}
.city-map-panel-media #city-map {
  height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(31, 93, 65, 0.12);
  background: #eef2ef;
  overflow: hidden;
}
/* Inside the panel, the info-card disowns its own border/shadow/bg to
   read as one continuous block with the map above. */
.city-map-panel .city-map-info-card {
  margin: 0;
  padding: 22px 24px 22px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 720px) {
  .city-map-panel {
    border-radius: 22px;
    margin-bottom: 22px;
  }
  .city-map-panel-media {
    padding: 12px 12px 10px;
  }
  .city-map-panel-media #city-map {
    height: 280px;
    border-radius: 14px;
  }
  .city-map-panel .city-map-info-card {
    padding: 18px 18px 18px;
  }
}

/* [CHECKOUT_PROTO_V1] Visual prototype for the listing-checkout page.
   Pure UI: no real Order creation, button is a placeholder. JS only
   recalculates the running total and CTA label. Tokens come from :root. */
.checkout-shell {
  margin: 28px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.checkout-hero {
  padding: 26px 28px 22px;
  border-radius: 28px;
  border: 1px solid rgba(31, 93, 65, 0.12);
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 93, 65, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(238, 247, 242, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: 0 18px 44px rgba(11, 24, 17, 0.07);
}
.checkout-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid rgba(31, 93, 65, 0.18);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.checkout-hero-title {
  margin: 0 0 8px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.18;
  color: var(--green-900);
  letter-spacing: -0.012em;
}
.checkout-hero-sub {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 640px;
}
.checkout-hero-hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
  max-width: 640px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.checkout-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.checkout-side {
  position: sticky;
  top: 92px;
}

.checkout-step {
  padding: 24px 24px 18px;
  border-radius: 24px;
  border: 1px solid rgba(31, 93, 65, 0.10);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(11, 24, 17, 0.05);
}
.checkout-step-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}
.checkout-step-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  font-size: 15px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 12px;
}
.checkout-step-title {
  margin: 0 0 4px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
  color: var(--green-900);
}
.checkout-step-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-500);
}

.checkout-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.checkout-option-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 93, 65, 0.14);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-fast);
}
.checkout-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
@media (hover: hover) {
  .checkout-option-card:hover {
    border-color: rgba(31, 93, 65, 0.32);
    transform: translateY(-1px);
  }
}
.checkout-option-card.is-selected {
  border-color: var(--green-700);
  background: linear-gradient(180deg, var(--green-100) 0%, var(--surface) 90%);
  box-shadow: 0 0 0 2px rgba(31, 93, 65, 0.18);
}
.checkout-option-card--neutral { background: rgba(247, 251, 248, 1); }
.checkout-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.checkout-option-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-900);
  line-height: 1.25;
}
.checkout-option-desc {
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.35;
}
.checkout-option-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-700);
  white-space: nowrap;
}

.checkout-preview-card {
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(31, 93, 65, 0.10);
  background:
    linear-gradient(180deg, rgba(238, 247, 242, 0.55) 0%, rgba(255, 255, 255, 0.96) 100%),
    var(--surface);
  box-shadow: 0 12px 28px rgba(11, 24, 17, 0.05);
}
.checkout-preview-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 750;
  color: var(--green-900);
}
.checkout-preview-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.checkout-preview-photo {
  width: 168px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ee, #e0ebe2);
  border: 1px solid rgba(31, 93, 65, 0.10);
}
.checkout-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-preview-photo--empty { background: var(--green-100); }
.checkout-preview-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.checkout-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.checkout-preview-tag {
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
}
.checkout-preview-tag--found { background: #fff1d6; color: #8a5a00; }
.checkout-preview-headline {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-900);
}
.checkout-preview-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
}

.checkout-total-card {
  padding: 22px 22px 20px;
  border-radius: 24px;
  border: 1px solid rgba(31, 93, 65, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 93, 65, 0.10), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow: 0 14px 34px rgba(11, 24, 17, 0.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checkout-total-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 750;
  color: var(--green-900);
}
.checkout-total-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-700);
}
.checkout-total-row[hidden] { display: none; }
.checkout-total-value { font-weight: 600; color: var(--green-900); white-space: nowrap; }
.checkout-total-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px dashed rgba(31, 93, 65, 0.20);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.checkout-total-final-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
}
.checkout-total-final-value {
  font-size: 22px;
  font-weight: 750;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
.checkout-pay-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.95;
}
.checkout-pay-btn:disabled { cursor: not-allowed; }
.checkout-pay-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: center;
}
.checkout-back-link {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-700);
}
.checkout-back-link:hover { color: var(--green-800); text-decoration: underline; }

@media (max-width: 1080px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
}
@media (max-width: 720px) {
  .checkout-shell { gap: 18px; margin: 22px 0 30px; }
  .checkout-hero { padding: 22px 20px 18px; border-radius: 22px; }
  .checkout-hero-title { font-size: 23px; }
  .checkout-hero-sub  { font-size: 14px; }
  .checkout-hero-hint { font-size: 13px; }
  .checkout-step { padding: 20px 18px 14px; border-radius: 20px; }
  .checkout-step-title { font-size: 17px; }
  .checkout-option-grid { grid-template-columns: 1fr; gap: 8px; }
  .checkout-preview-card { padding: 18px 18px; border-radius: 20px; }
  .checkout-preview-body { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .checkout-preview-photo { width: 120px; }
  .checkout-preview-headline { font-size: 16px; }
  .checkout-preview-desc { font-size: 13.5px; }
  .checkout-total-card { padding: 18px 18px 16px; border-radius: 20px; }
  .checkout-total-final-value { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-option-card { transition: none; }
  .checkout-option-card:hover { transform: none; }
}
/* [CHECKOUT_ACCORDION_V1] Step-by-step accordion flow for /order/<id>/.
   Steps collapse into compact summaries after a choice; later sections
   stay hidden until the prior step is answered. Visual prototype only. */
.checkout-section-hidden { display: none !important; }
.checkout-reveal { animation: checkout-reveal-in 220ms ease-out both; }
@keyframes checkout-reveal-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.checkout-step-head { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; }
.checkout-step-head-text { min-width: 0; }

.checkout-step-edit {
  align-self: center;
  appearance: none;
  border: 1px solid rgba(31, 93, 65, 0.22);
  background: #fff;
  color: var(--green-700);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.checkout-step-edit:hover {
  background: var(--green-100);
  border-color: rgba(31, 93, 65, 0.4);
  color: var(--green-800);
}
.checkout-step-edit:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}

.checkout-step.is-collapsed { padding: 16px 20px; }
.checkout-step.is-collapsed .checkout-step-head { grid-template-columns: 28px minmax(0, 1fr) auto; }
.checkout-step.is-collapsed .checkout-step-num {
  width: 28px; height: 28px; font-size: 13px;
  background: var(--green-100); color: var(--green-800); border: 1px solid rgba(31,93,65,0.18);
}
.checkout-step.is-collapsed .checkout-step-title { font-size: 15px; margin-bottom: 0; }
.checkout-step.is-collapsed .checkout-step-sub  { display: none; }
.checkout-step.is-collapsed .checkout-step-body { display: none; }

.checkout-step.is-complete .checkout-step-num {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
}

.checkout-step-summary[hidden] { display: none !important; }
.checkout-step:not(.is-collapsed) .checkout-step-summary { display: none; }
.checkout-step-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--green-100);
  border: 1px solid rgba(31, 93, 65, 0.16);
  border-radius: 14px;
  color: var(--green-900);
  font-size: 14px;
  font-weight: 600;
}
.checkout-step-summary-text { display: inline-flex; align-items: center; gap: 6px; }
.checkout-step-summary-price { font-weight: 700; color: var(--green-800); white-space: nowrap; }

@media (max-width: 720px) {
  .checkout-step.is-collapsed { padding: 14px 16px; }
  .checkout-step-summary { font-size: 13.5px; padding: 9px 12px; border-radius: 12px; }
  .checkout-step-edit { font-size: 12px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-reveal { animation: none; }
}

/* [CHECKOUT_VK_GROUP_LINK_V1] Compact pill link to the city VK community,
   shown inside the VK step header. Visual prototype only. */
.checkout-vk-group-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 36px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(31, 93, 65, 0.16);
  background: #fff;
  color: var(--green-800);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.checkout-vk-group-link:hover {
  border-color: rgba(31, 93, 65, 0.28);
  background: var(--green-100);
  color: var(--green-900);
}
.checkout-vk-group-link:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .checkout-vk-group-link { width: 100%; min-height: 40px; font-size: 13.5px; }
}

/* =====================================================================
   [MOTION_SYSTEM_V1] Single appended motion layer.
   Pure CSS, no HTML/JS/text changes. Existing keyframes (fadeUp,
   wizard-shake, lightboxFadeIn, lightboxImgIn, checkout-reveal-in) are
   left intact; this layer adds new pf*-prefixed tokens/keyframes so it
   composes side-by-side without rewriting earlier rules.
   ===================================================================== */

:root {
  --motion-fast: 140ms cubic-bezier(.2, .8, .2, 1);
  --motion-med:  220ms cubic-bezier(.2, .8, .2, 1);
  --motion-slow: 360ms cubic-bezier(.2, .8, .2, 1);
  --motion-pop:  cubic-bezier(.18, .89, .32, 1.18);
}

@keyframes pfFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pfShake {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(-3px); }
  70%      { transform: translateX(3px); }
}

/* ---- 1. Section reveal --------------------------------------------- */
/* Targets only verified container classes; .listing-card etc. that do
   not exist in this CSS are intentionally omitted. */
.checkout-hero,
.checkout-step,
.checkout-preview-card,
.checkout-total-card,
.city-help-hub,
.city-map-panel,
.city-guide-card,
.home-step-card,
.guide-example-card,
.guide-cta-card,
.home-steps,
.vk-city-cta {
  animation: pfFadeUp var(--motion-slow) both;
}

/* Tiny stagger for the first few cards in common grids — bounded to 8
   to avoid runaway delays on long lists. Selector is a no-op when the
   parent class is absent on a given page. */
.home-steps > *:nth-child(1),
.checkout-option-grid > *:nth-child(1) { animation-delay:  20ms; }
.home-steps > *:nth-child(2),
.checkout-option-grid > *:nth-child(2) { animation-delay:  60ms; }
.home-steps > *:nth-child(3),
.checkout-option-grid > *:nth-child(3) { animation-delay: 100ms; }
.home-steps > *:nth-child(4),
.checkout-option-grid > *:nth-child(4) { animation-delay: 140ms; }
.home-steps > *:nth-child(5),
.checkout-option-grid > *:nth-child(5) { animation-delay: 180ms; }
.home-steps > *:nth-child(6),
.checkout-option-grid > *:nth-child(6) { animation-delay: 220ms; }
.home-steps > *:nth-child(7),
.checkout-option-grid > *:nth-child(7) { animation-delay: 260ms; }
.home-steps > *:nth-child(8),
.checkout-option-grid > *:nth-child(8) { animation-delay: 300ms; }

/* ---- 2. Card hover / tap micro-interactions ------------------------ */
.city-guide-card,
.home-step-card,
.guide-example-card,
.checkout-option-card,
.guide-cta-card,
.vk-city-cta {
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast);
  will-change: transform;
}

@media (hover: hover) {
  .city-guide-card:hover,
  .home-step-card:hover,
  .guide-example-card:hover,
  .checkout-option-card:hover,
  .guide-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(11, 24, 17, 0.10);
  }
}

.city-guide-card:active,
.home-step-card:active,
.guide-example-card:active,
.checkout-option-card:active {
  transform: scale(0.99);
}

/* ---- 3. Image hover (only for desktop pointers) -------------------- */
@media (hover: hover) {
  .city-guide-card img,
  .guide-example-card img {
    transition: transform var(--motion-slow);
    will-change: transform;
  }
  .city-guide-card:hover img,
  .guide-example-card:hover img {
    transform: scale(1.025);
  }
}

/* ---- 4. Buttons --------------------------------------------------- */
.btn,
.checkout-pay-btn,
.guide-cta-primary,
.guide-cta-secondary,
.vk-city-cta-btn {
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    opacity var(--motion-fast);
}

@media (hover: hover) {
  .btn:not(:disabled):hover,
  .checkout-pay-btn:not(:disabled):hover,
  .guide-cta-primary:not(:disabled):hover {
    transform: translateY(-1px);
  }
}

.btn:not(:disabled):active,
.checkout-pay-btn:not(:disabled):active,
.guide-cta-primary:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

.btn:disabled,
.checkout-pay-btn:disabled {
  transform: none;
}

/* ---- 5. FAQ answer reveal ----------------------------------------- */
.city-faq-item[open] .city-faq-answer {
  animation: pfFadeUp 180ms both;
}

/* ---- 6. Wizard step + form fields --------------------------------- */
.wizard-step.is-active {
  animation: pfFadeUp var(--motion-med) both;
}

input,
textarea,
select {
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    background-color var(--motion-fast);
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(31, 93, 65, 0.10);
}

.field-error {
  animation: pfShake 220ms both;
}

/* ---- 7. Checkout step polish -------------------------------------- */
.checkout-step {
  transition:
    padding var(--motion-med),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}
.checkout-step-summary { animation: pfFadeUp 180ms both; }
.checkout-total-final-value {
  transition: color var(--motion-med), transform var(--motion-fast);
}

/* ---- 8. Mobile tap feel ------------------------------------------- */
@media (max-width: 720px) {
  .btn,
  .checkout-option-card,
  .city-guide-card,
  .home-step-card,
  .guide-example-card {
    -webkit-tap-highlight-color: transparent;
  }
}

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


/* [BRAND_LOGO_V1] icon + text composition for the header brand link.
   Pairs the logo with the «Потеряшки» wordmark; defers font/colour to the
   pre-existing .brand rule so this only adds layout primitives. */
.brand--logo {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.brand--logo .brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: transparent;
}
.brand--logo .brand-text {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  letter-spacing: 0.4px;
  color: var(--green-900);
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 640px) {
  .brand--logo { gap: 8px; }
  .brand--logo .brand-logo { width: 32px; height: 32px; border-radius: 7px; }
  .brand--logo .brand-text { font-size: 20px; letter-spacing: 0.3px; }
}
@media (max-width: 380px) {
  .brand--logo .brand-logo { width: 28px; height: 28px; border-radius: 6px; }
  .brand--logo .brand-text { font-size: 18px; }
}


/* [BRAND_INLINE_HARDFIX_V1] Force the header brand link (logo + text) to a single
   row across all breakpoints. Earlier .brand rules in @media (max-width:820px)
   and @media (max-width:480px) were re-applying font-size / flex to the wrapping
   <a class="brand brand--logo">, and at narrow widths the brand grid cell
   minmax(0,1fr) plus inherited flex behaviour pushed «Потеряшки» under the icon.
   This block uses a higher-specificity selector + !important to override them. */
.brand.brand--logo {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.brand.brand--logo .brand-logo {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.brand.brand--logo .brand-text {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  .brand.brand--logo { gap: 8px !important; }
  .brand.brand--logo .brand-logo { width: 32px !important; height: 32px !important; }
  .brand.brand--logo .brand-text { font-size: 18px !important; }
}
@media (max-width: 380px) {
  .brand.brand--logo .brand-logo { width: 28px !important; height: 28px !important; }
  .brand.brand--logo .brand-text { font-size: 16px !important; }
}

/* Petmetka skin additions. Product geometry remains inherited from Petsfound. */
.footer-tagline {
  font-size: 14px;
  color: #5a6b62;
  line-height: 1.55;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 13px;
  color: #5a6b62;
}
.footer-legal a {
  color: inherit;
  text-decoration: underline;
}
.creation-preview-notice {
  margin-bottom: 20px;
  border-color: var(--green-200);
  background: var(--green-50);
  color: var(--green-900);
}
.tile-action:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none !important;
}


/* [PRO_PHOTO_21905_V1] Real listing photo as the hero image inside the
   pro_search VK ad mock on the order success page. The surrounding
   .pp-vkad card already provides background, border, radius and shadow
   (defined inline in payment_return.html), so this only sizes the photo. */
.pp-vkad-hero {
  display: block;
  width: 100%;
  background: #eef3ef;
}
.pp-vkad-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 620;
  object-fit: cover;
}
.pp-vkad-body--photo {
  padding-top: 10px;
}


/* [CITY_AD_BLOCK_V3] Image-only Lyubertsy ad — whole card is a link. */
.city-ad-block {
  margin: 22px 0 64px;
}
.city-ad-block__card {
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(26, 74, 52, 0.12);
  border-radius: 28px;
  box-shadow: 0 14px 36px rgba(18, 58, 41, 0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.city-ad-block__card:hover,
.city-ad-block__card:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(18, 58, 41, 0.14);
  color: inherit;
}
.city-ad-block__media {
  width: 100%;
  background: #f4faf6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.city-ad-block__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.city-ad-block__actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 0;
}
.city-ad-block__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 38px;
  padding: 8px 28px;
  border-radius: 999px;
  background: #155b3d;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(18, 58, 41, 0.16);
}
.city-ad-block__button:hover {
  background: #123a29;
  color: #ffffff !important;
  text-decoration: none !important;
}
@media (max-width: 640px) {
  .city-ad-block { margin: 20px 0 64px; }
  .city-ad-block__card { border-radius: 24px; }
  .city-ad-block__actions { justify-content: center; margin-top: 16px; }
  .city-ad-block__button { min-width: 210px; min-height: 38px; padding: 8px 30px; font-size: 16px; }
}


/* [CITY_AD_BLOCK_FORCE_V1 2026-05-11] */
.city-ad-block {
  margin: 22px 0 76px !important;
}
.city-ad-block__actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}
.city-ad-block__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  min-height: 38px !important;
  padding: 8px 30px !important;
  border-radius: 999px !important;
  background: #155b3d !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(18, 58, 41, 0.16) !important;
  border: 0 !important;
}
.city-ad-block__button:hover {
  background: #123a29 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
@media (max-width: 640px) {
  .city-ad-block {
    margin: 20px 0 76px !important;
  }
  .city-ad-block__button {
    min-width: 220px !important;
    min-height: 38px !important;
    padding: 8px 30px !important;
    font-size: 16px !important;
  }
}

/* ==========================================================================
   [MOBILE_FONTS_YANDEX_20260525] Mobile typography fix for Yandex Webmaster
   "Слишком мелкий текст" on /listing/* and /city/* pages.
   Scoped to mobile breakpoints; appended last so cascade wins without
   altering upstream rules. Targets only listing cards, city filters,
   pinned cards, and listing-detail header meta. No desktop change.
   ========================================================================== */

/* Type badge baseline (used in listing cards and listing detail header).
   Was 10px uppercase — too small for Yandex even on desktop badges. */
.listing-tile-type {
  font-size: 11px;
}

/* Other-listings cards (shown at the bottom of /listing/* pages).
   Base sizes were 13px/11px regardless of viewport. */
.other-listing-title { font-size: 15px; line-height: 1.35; }
.other-listing-meta  { font-size: 13px; }

/* Pinned cards at the top of /city/* pages — same family as other-listings. */
.pinned-card .listing-tile-title { font-size: 15px; line-height: 1.35; }
.pinned-card .listing-tile-meta  { font-size: 13px; }

/* Listing-detail header meta line (type · city · date). */
.listing-meta-line { font-size: 14px; }

/* Mobile-only overrides for the city feed cards and filter chips. */
@media (max-width: 720px) {
  .listing-tile-title { font-size: 15px; line-height: 1.35; }
  .listing-tile-meta  { font-size: 13px; }
  .other-listing-title { font-size: 15px; }
  .other-listing-meta  { font-size: 13px; }
  .pinned-card .listing-tile-title { font-size: 15px; }
  .pinned-card .listing-tile-meta  { font-size: 13px; }
  .listing-meta-line  { font-size: 14px; }
}

@media (max-width: 640px) {
  .city-filter-label { font-size: 13px; }
  .city-filter-chip  { font-size: 14px; padding: 6px 12px; }
}

/* ==========================================================================
   [FEATURED_PREVIEW_V3] Full-width premium placement row.
   A large horizontal premium block that spans the ENTIRE grid width
   (grid-column: 1 / -1) and sits as its own row BETWEEN rows of normal
   listing cards — not a stretched tile inside a column. Activated only for
   the listing matching ?preview_featured=<id> in city_detail.html.
   No payment / order / model logic — visual prototype only.
   ========================================================================== */
.listing-grid > .listing-cell--featured-full {
  grid-column: 1 / -1;
  margin: 6px 0;
  border: 1px solid #d9c79a;
  border-radius: 22px;
  background: linear-gradient(135deg, #fcf9f2 0%, #f9f6ee 48%, #f2f7f1 100%);
  box-shadow: 0 12px 32px rgba(120, 92, 30, 0.12), 0 2px 6px rgba(11, 24, 17, 0.04);
  overflow: hidden;
}
.listing-grid > .listing-cell--featured-full.hover-lift:hover {
  transform: translateY(-3px);
  border-color: #c9b072;
  box-shadow: 0 18px 42px rgba(120, 92, 30, 0.18), 0 3px 10px rgba(11, 24, 17, 0.07);
}

/* Two-class selector so it wins over base `.listing-grid .listing-card`. */
.listing-grid .listing-card--featured-full {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 320px;
  padding: 18px;
}

.featured-full-media {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  min-height: 284px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ea, #f6f9f6);
}
.featured-full-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-full-media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-full-media-empty::before {
  content: "🐾";
  font-size: 52px;
  opacity: 0.35;
}

.featured-full-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 14px 6px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.featured-full-ribbon {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9a7a3c;
}
.featured-full-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8a5a16;
  background: rgba(250, 240, 222, 0.9);
  border: 1px solid #e7cf9f;
  border-radius: 99px;
  padding: 5px 12px 5px 11px;
}
.featured-full-badge::before {
  content: "★";
  font-size: 10px;
  line-height: 1;
  color: #c08a2a;
}
.featured-full-title {
  font-size: 27px;
  line-height: 1.18;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-full-meta {
  font-size: 14px;
  color: var(--ink-500);
  font-weight: 600;
}
.featured-full-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-full-open {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(31, 93, 65, 0.22);
  transition: background var(--transition-fast, 160ms);
}
.listing-cell--featured-full:hover .featured-full-open {
  background: var(--green-700);
}
.featured-full-note {
  font-size: 12px;
  color: #9a7a3c;
}

@media (max-width: 1080px) {
  .listing-grid .listing-card--featured-full {
    min-height: 300px;
  }
  .featured-full-media {
    flex-basis: 40%;
    max-width: 40%;
  }
  .featured-full-title {
    font-size: 23px;
  }
}
@media (max-width: 720px) {
  .listing-grid .listing-card--featured-full {
    flex-direction: column;
    min-height: 0;
    padding: 12px;
  }
  .featured-full-media {
    flex: none;
    max-width: none;
    width: 100%;
    height: 220px;
    min-height: 220px;
  }
  .featured-full-body {
    padding: 14px 6px 4px;
    gap: 9px;
  }
  .featured-full-title {
    font-size: 21px;
  }
  .featured-full-desc {
    -webkit-line-clamp: 3;
  }
}

/* [FEATURED_PREVIEW_V3] Small-phone compaction (iPhone SE & narrow Androids).
   Trims block height to ~450-490px without losing the premium feel or hiding
   the CTA. Mobile-only; desktop/tablet/large-mobile rules above untouched. */
@media (max-width: 390px) {
  .listing-grid .listing-card--featured-full {
    padding: 10px;
  }
  .featured-full-media {
    height: 185px;
    min-height: 185px;
  }
  .featured-full-body {
    padding: 11px 4px 2px;
    gap: 7px;
  }
  .featured-full-ribbon {
    letter-spacing: 0.7px;
  }
  .featured-full-title {
    font-size: 19px;
  }
  .featured-full-desc {
    -webkit-line-clamp: 2;
    font-size: 14px;
  }
  .featured-full-open {
    padding: 11px 22px;
    margin-top: 2px;
  }
}