.hero {
  margin: 8px 10px 0;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(17, 29, 75, 0.18);
}

.hero-search,
.hero-logo,
.guarantee {
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.announcement {
  white-space: normal;
  line-height: 1.45;
  box-shadow: 0 3px 12px rgba(194, 91, 45, 0.06);
}

.entry,
.card {
  box-shadow: 0 5px 16px rgba(25, 34, 68, 0.07);
}

.district-grid {
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.district-grid button {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(25, 34, 68, 0.07);
}

.district-grid .city-switch {
  background: #eef0ff;
}

.district-grid .region.promo {
  position: relative;
  border: 1px solid #f2b89f;
  background: #fff0e8;
  color: #e55f2d;
}

.district-grid .region.promo small {
  position: absolute;
  top: -7px;
  right: -3px;
  border-radius: 8px;
  padding: 1px 5px;
  background: #f05b31;
  color: #fff;
  font-size: 9px;
}

.district-grid button,
.cat-row button,
.entry,
.card,
.bottom-nav button {
  -webkit-tap-highlight-color: transparent;
}

.district-grid button:active,
.cat-row button:active,
.entry:active,
.card:active {
  transform: translateY(1px);
}

.entry {
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.reco-title {
  letter-spacing: 0.02em;
}

@media (max-width: 520px) {
  .hero {
    height: 220px;
  }

  .hero-search {
    width: min(58%, 320px);
  }

  .hero-logo b {
    display: none;
  }

  .cat-row {
    gap: 4px;
    padding-inline: 8px;
  }
}

@media (min-width: 768px) {
  .hero {
    height: 310px;
  }
}