:root{
  --ew-accent:#ff6a3d;
  --ew-border:rgba(0,0,0,.10);
  --ew-muted:rgba(0,0,0,.58);
}

/* Block #1 */
.ew-hero-search{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ew-border);
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.58)),
    url("/assets/img/home-hero.jpg");
  background-size: cover;
  background-position: center;
  padding: 26px 18px;
}

.ew-hero-inner{ max-width: 980px; margin: 0 auto; color: #fff; }
.ew-hero-title{ margin: 0 0 8px; font-size: clamp(28px, 4vw, 52px); line-height: 1.05; }
.ew-hero-sub{ margin: 0 0 16px; opacity: .9; }

.ew-searchbar{
  display:flex;
  gap: 10px;
  align-items:center;
  background: rgba(255,255,255,.95);
  padding: 10px;
  border-radius: 999px;
  max-width: 880px;
}

.ew-input{
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 14px;
  font-size: 15px;
  width: 100%;
  outline: none;
  background:#fff;
}

.ew-guests{ min-width: 110px; width: 160px; }
.ew-search-btn{
  width: 52px;
  height: 46px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--ew-accent);
  color: #fff;
  font-size: 16px;
}

/* Block #2 */
.ew-popular{
  margin-top: 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 14px;
}

.ew-popular-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.ew-popular-title{ display:flex; align-items:center; gap:10px; font-weight: 800; }
.ew-popular-label{ color: var(--ew-muted); font-weight: 700; }

.ew-city-select{
  border: 1px solid var(--ew-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

.ew-tabs{ display:flex; gap: 10px; flex-wrap: wrap; }
.ew-tab{
  border: none;
  background: transparent;
  color: var(--ew-muted);
  padding: 10px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ew-tab.is-active{
  color: var(--ew-accent);
  border-bottom-color: var(--ew-accent);
  font-weight: 800;
}

.ew-cards-wrap{ display:flex; align-items:center; gap:10px; margin-top: 12px; }
.ew-nav{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ew-border);
  background:#fff;
  cursor:pointer;
}
.ew-cards{
  display:flex;
  gap: 14px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 14px;
  width: 100%;
}

.ew-card{
  min-width: 260px;
  max-width: 260px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--ew-border);
  background:#fff;
  scroll-snap-align: start;
  text-decoration:none;
  color: #111;
}

.ew-card-img{ height: 168px; background-size: cover; background-position: center; position: relative; }
.ew-badge{
  position:absolute; left: 12px; top: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.ew-card-body{ padding: 12px; }
.ew-meta{ display:flex; justify-content:space-between; color: var(--ew-muted); font-size: 13px; }
.ew-title{ margin: 8px 0 8px; font-size: 16px; font-weight: 900; line-height: 1.2; }
.ew-price{ font-weight: 900; color: rgba(0,0,0,.82); }

@media (max-width: 720px){
  .ew-searchbar{ flex-wrap: wrap; border-radius: 16px; }
  .ew-search-btn{ width: 100%; }
  .ew-nav{ display:none; } /* swipe on mobile */
}