/*
 * BondMai Homepage V2.3 Polish
 * Focus: smoother rhythm, consistent section cards, tighter alignment,
 * reduced visual noise, and stronger CTA hierarchy.
 */


body:has(.appShell.view-market) .appShell.view-market {
  --bm-home-max: 1264px;
  --bm-section-gap: clamp(42px, 5vw, 68px);
  --bm-card-radius-lg: 30px;
  --bm-card-radius-md: 24px;
  --bm-card-padding-lg: clamp(24px, 3vw, 34px);
  --bm-card-padding-md: clamp(18px, 2vw, 24px);
}

body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
  position: relative;
  min-height: 196px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: minmax(220px, .76fr) minmax(0, 1.42fr) minmax(180px, .58fr);
  align-items: center;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(224, 231, 226, .86);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 24%, rgba(190, 232, 225, .58), transparent 17rem),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(245,250,247,.94));
  box-shadow: 0 16px 42px rgba(31, 47, 43, .055);
}

body:has(.appShell.view-market) .appShell.view-market .instantPlatformCopy h2 {
  margin: 0;
  color: var(--bm-color-text-strong);
  font-family: var(--bm-font-display);
  font-size: clamp(28px, 2vw, 34px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

body:has(.appShell.view-market) .appShell.view-market .instantPlatformCopy p {
  max-width: 310px;
  margin: 10px 0 0;
  color: var(--bm-color-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

body:has(.appShell.view-market) .appShell.view-market .instantBenefitRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
}

body:has(.appShell.view-market) .appShell.view-market .instantBenefitIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, .14);
  border-radius: 15px;
  background: rgba(232, 247, 244, .84);
  color: var(--bm-color-primary);
}

body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem strong {
  color: var(--bm-color-text);
  font-size: 15px;
  line-height: 1.2;
}

body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem small {
  grid-column: 2;
  color: var(--bm-color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual {
  position: absolute;
  right: 34px;
  bottom: 0;
  width: 210px;
  height: 150px;
  opacity: .72;
  background:
    linear-gradient(150deg, rgba(255,255,255,.74), rgba(255,255,255,.12)),
    repeating-linear-gradient(0deg, rgba(15,118,110,.12) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(15,118,110,.1) 0 1px, transparent 1px 22px);
  transform: rotate(-8deg);
  border-radius: 26px 26px 0 0;
}

body:has(.appShell.view-market) .appShell.view-market .routeLine {
  position: absolute;
  left: 54px;
  right: 54px;
  top: 70px;
  height: 3px;
  border-radius: 999px;
  background: var(--bm-color-primary);
  transform: rotate(-24deg);
  transform-origin: center;
}

body:has(.appShell.view-market) .appShell.view-market .routePin {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 5px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background: var(--bm-color-primary);
  box-shadow: 0 8px 18px rgba(15,118,110,.2);
}

body:has(.appShell.view-market) .appShell.view-market .routePin.start {
  left: 46px;
  top: 82px;
}

body:has(.appShell.view-market) .appShell.view-market .routePin.end {
  right: 44px;
  top: 34px;
}

body:has(.appShell.view-market) .appShell.view-market .instantPlatformActions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  justify-self: end;
  min-width: 158px;
}

@media (max-width: 1024px) {
  body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  body:has(.appShell.view-market) .appShell.view-market .instantBenefitRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual {
    display: none;
  }

  body:has(.appShell.view-market) .appShell.view-market .instantPlatformActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    padding: 22px;
    border-radius: 22px;
  }

  body:has(.appShell.view-market) .appShell.view-market .instantBenefitRow,
  body:has(.appShell.view-market) .appShell.view-market .instantPlatformActions {
    grid-template-columns: 1fr;
  }
}

body:has(.appShell.view-market) .appShell.view-market .workspace > .panel {
  padding-bottom: 96px !important;
}

body:has(.appShell.view-market) .appShell.view-market .workspace > .panel > :where(section,.viewGrid) {
  margin-top: var(--bm-section-gap) !important;
}

body:has(.appShell.view-market) .appShell.view-market .workspace > .panel {
  background:
    radial-gradient(circle at 12% 9%, rgba(188, 234, 225, .32), transparent 25rem),
    radial-gradient(circle at 87% 5%, rgba(247, 238, 219, .54), transparent 28rem),
    linear-gradient(180deg, #fbfcfa 0%, #f7faf7 48%, #ffffff 100%);
}

body:has(.appShell.view-market) .appShell.view-market :where(.marketPulse,.departureBoard,.marketDemandShowcase,.aiMatchSpotlight,.trustTravelerShowcase,.homepageFinalCta) {
  scroll-margin-top: 104px !important;
}

/* stronger section rhythm */
body:has(.appShell.view-market) .appShell.view-market :where(.sectionHead,.marketPulseHead) {
  margin-bottom: 22px !important;
  align-items: end !important;
  gap: 20px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.sectionHead > div:first-child,.marketPulseHead > div:first-child) {
  max-width: 700px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.sectionHead h2,.marketPulseHead h2) {
  font-size: clamp(28px, 2.1vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.sectionHead p,.marketPulseHead p) {
  margin-top: 8px !important;
  max-width: 620px !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

body:has(.appShell.view-market) .appShell.view-market .eyebrow {
  margin-bottom: 12px !important;
}

/* unified action buttons */
body:has(.appShell.view-market) .appShell.view-market :where(.primaryButton,.softButton,.profileLinkButton,.cardCta,.demandTrendCta,.homepageFinalAction) {
  min-height: 42px !important;
  border-radius: 14px !important;
}

/* Hero polish */
body:has(.appShell.view-market) .appShell.view-market .heroLuxuryV5 {
  min-height: 628px !important;
  margin-top: 18px !important;
  padding: clamp(42px, 5vw, 72px) !important;
  grid-template-columns: minmax(0, .96fr) minmax(340px, .86fr) !important;
  gap: clamp(30px, 3.2vw, 52px) !important;
  border-radius: 0 0 34px 34px !important;
  border-color: rgba(224, 230, 225, .72) !important;
  box-shadow: 0 22px 58px rgba(44, 67, 83, .075), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroHeadline { max-width: 650px !important; }
body:has(.appShell.view-market) .appShell.view-market .heroTitleEn {
  font-size: clamp(54px, 5.4vw, 82px) !important;
  letter-spacing: -.045em !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroTitleZh {
  max-width: 560px !important;
  margin-top: 16px !important;
  font-size: clamp(21px, 1.95vw, 29px) !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroLead {
  max-width: 520px !important;
  margin: 20px 0 0 !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSearchPanel {
  margin-top: 34px !important;
  padding: 10px !important;
  border: 1px solid rgba(219, 226, 221, .92) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 44px rgba(23, 38, 34, .11) !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSpotlightGrid {
  grid-template-columns: minmax(0, 1.08fr) minmax(164px, .72fr) minmax(164px, .72fr) !important;
  gap: 8px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSearchField {
  min-height: 76px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  background: rgba(252,253,252,.72) !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSearchField span {
  font-size: 12px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSearchField :where(input,select) {
  margin-top: 8px !important;
  font-size: 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroSearchSubmit {
  min-height: 76px !important;
  padding: 0 20px !important;
  align-self: stretch !important;
  border-radius: 15px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroPopularRow {
  margin-top: 14px !important;
  gap: 8px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroPopularRow button,
body:has(.appShell.view-market) .appShell.view-market .heroCountryPills button {
  min-height: 32px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroLuxuryVisual {
  justify-content: end !important;
  gap: 14px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroImageCard {
  min-height: 250px !important;
  max-height: 292px !important;
  width: min(100%, 420px) !important;
  margin-left: auto !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgba(24,40,35,.12) !important;
  transform: none !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroGlassMatch {
  margin-top: -18px !important;
  margin-left: auto !important;
  width: min(88%, 340px) !important;
  padding: 18px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 20px 54px rgba(21,31,29,.13) !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroMiniStats {
  display: none !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroMiniStats span {
  min-height: 78px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .heroTrustPill {
  display: none !important;
  bottom: 18px !important;
  right: 18px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

/* market pulse refinement */
body:has(.appShell.view-market) .appShell.view-market .marketPulse {
  margin-top: 42px !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(225, 231, 226, .88) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 18px 54px rgba(31, 47, 43, .07) !important;
}
body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
  gap: 12px !important;
}
body:has(.appShell.view-market) .appShell.view-market .destinationCard {
  min-height: 228px !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 30px rgba(22, 34, 31, .06) !important;
}
body:has(.appShell.view-market) .appShell.view-market .destinationCard strong {
  font-size: 27px !important;
}
body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
  margin-top: 22px !important;
  gap: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 222, 218, .85), 0 10px 22px rgba(20,30,28,.04) !important;
}
body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip > span {
  min-height: 84px !important;
  padding: 16px 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip > span + span {
  border-left: 1px solid rgba(221,227,223,.94) !important;
}
body:has(.appShell.view-market) .appShell.view-market .marketPulseFootnote {
  margin-top: 10px !important;
}

/* returning travelers: tighten empty space and align cards */
body:has(.appShell.view-market) .appShell.view-market .departureBoard {
  margin-top: calc(var(--bm-section-gap) - 8px) !important;
}
body:has(.appShell.view-market) .appShell.view-market .departureBoard > .sectionHead {
  margin-bottom: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .departureGrid {
  margin-top: 16px !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr) !important;
  gap: 12px !important;
}
body:has(.appShell.view-market) .appShell.view-market .returningTravelerCard.featured {
  min-height: 236px !important;
  padding: 24px !important;
  border-radius: 26px !important;
}
body:has(.appShell.view-market) .appShell.view-market .featured .returningBody > strong {
  font-size: 24px !important;
}
body:has(.appShell.view-market) .appShell.view-market .returningTravelerCard.compact {
  min-height: 112px !important;
  padding: 16px !important;
  border-radius: 20px !important;
}
body:has(.appShell.view-market) .appShell.view-market .routeFollowPanel {
  min-height: 60px !important;
  padding: 10px 14px 10px 16px !important;
  border-radius: 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .routeFollowPanel p {
  max-width: 590px !important;
}

/* demand showcase balance */
body:has(.appShell.view-market) .appShell.view-market .marketDemandShowcase {
  margin-top: calc(var(--bm-section-gap) - 8px) !important;
}
body:has(.appShell.view-market) .appShell.view-market .marketDemandGrid {
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr) !important;
  gap: 12px !important;
}
body:has(.appShell.view-market) .appShell.view-market .featuredDemandCard,
body:has(.appShell.view-market) .appShell.view-market .demandTrendRail {
  border-radius: 26px !important;
  box-shadow: 0 14px 34px rgba(23, 37, 33, .055) !important;
}
body:has(.appShell.view-market) .appShell.view-market .featuredDemandCard {
  min-height: 260px !important;
}
body:has(.appShell.view-market) .appShell.view-market .featuredDemandVisual {
  padding: 20px 20px 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .featuredDemandBody {
  padding: 20px !important;
}
body:has(.appShell.view-market) .appShell.view-market .featuredDemandMeta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body:has(.appShell.view-market) .appShell.view-market .demandTrendRail {
  padding: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .demandTrendItem {
  padding: 12px 12px 12px 10px !important;
  border-radius: 16px !important;
}

/* AI spotlight: reduce crowding and strengthen hierarchy */
body:has(.appShell.view-market) .appShell.view-market .aiMatchSpotlight {
  margin-top: calc(var(--bm-section-gap) - 4px) !important;
  padding: clamp(24px, 2.8vw, 32px) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 58px rgba(5, 31, 36, .16) !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchHeader {
  gap: 18px !important;
  margin-bottom: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchHeader h2 {
  font-size: clamp(32px, 2.8vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchHeader p {
  max-width: 720px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchLayout {
  grid-template-columns: minmax(0, 1.34fr) minmax(280px, .66fr) !important;
  gap: 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchPrimary,
body:has(.appShell.view-market) .appShell.view-market .aiMatchQueue {
  border-radius: 22px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchPrimary {
  padding: 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchQueue {
  padding: 16px !important;
  background: rgba(9, 42, 47, .55) !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchQueueCard {
  border-radius: 16px !important;
}
body:has(.appShell.view-market) .appShell.view-market .aiMatchDisclaimer {
  margin-top: 16px !important;
  padding-top: 10px !important;
  color: rgba(235, 244, 244, .78) !important;
}

/* trust section */
body:has(.appShell.view-market) .appShell.view-market .trustTravelerShowcase {
  margin-top: calc(var(--bm-section-gap) - 6px) !important;
  padding: 28px !important;
  border: 1px solid rgba(215, 224, 220, .92) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 10%, rgba(214, 239, 233, .62), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,251,250,.96)) !important;
  box-shadow: 0 14px 34px rgba(25, 37, 33, .05) !important;
}
body:has(.appShell.view-market) .appShell.view-market .trustTravelerShowcase .sectionHead {
  margin-bottom: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .trustTravelerGrid {
  gap: 14px !important;
}
body:has(.appShell.view-market) .appShell.view-market .trustTravelerCardV22,
body:has(.appShell.view-market) .appShell.view-market .trustFirstEmpty {
  border-radius: 22px !important;
}
body:has(.appShell.view-market) .appShell.view-market .trustTravelerCardV22 {
  padding: 18px !important;
}
body:has(.appShell.view-market) .appShell.view-market .trustFirstCriteria span {
  min-height: 70px !important;
  border-radius: 18px !important;
}

/* final CTA stronger closing punch */
body:has(.appShell.view-market) .appShell.view-market .homepageFinalCta {
  margin-top: calc(var(--bm-section-gap) - 4px) !important;
  padding: 28px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(214,238,231,.68), transparent 18rem),
    linear-gradient(135deg, #f5f9f6 0%, #edf5f0 54%, #f5f1e8 100%) !important;
  box-shadow: 0 14px 34px rgba(25, 37, 33, .045) !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalCopy {
  max-width: 620px !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalCopy h2 {
  max-width: 560px !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.06 !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalActions {
  gap: 12px !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalAction {
  min-height: 84px !important;
  padding: 18px 18px 18px 16px !important;
  border-radius: 20px !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalAction.buyer {
  box-shadow: 0 16px 34px rgba(15,118,110,.14) !important;
}
body:has(.appShell.view-market) .appShell.view-market .homepageFinalNote {
  margin-top: 12px !important;
}

/* footer */
body:has(.appShell.view-market) .appShell.view-market .marketplaceFooter,
body:has(.appShell.view-market) .appShell.view-market footer {
  margin-top: 56px !important;
  border-radius: 24px !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body:has(.appShell.view-market) .appShell.view-market .heroLuxuryV5 {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .heroGlassMatch {
    width: 100% !important;
    max-width: 460px !important;
    margin-top: -24px !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .heroMiniStats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .departureGrid,
  body:has(.appShell.view-market) .appShell.view-market .marketDemandGrid,
  body:has(.appShell.view-market) .appShell.view-market .aiMatchLayout,
  body:has(.appShell.view-market) .appShell.view-market .homepageFinalActions {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  body:has(.appShell.view-market) .appShell.view-market {
    --bm-section-gap: 42px;
  }
  body:has(.appShell.view-market) .appShell.view-market .topbar {
    top: 10px !important;
    margin-top: 10px !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .heroLuxuryV5 {
    padding: 22px !important;
    border-radius: 26px !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .heroSearchPanel {
    padding: 8px !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .heroSpotlightGrid {
    grid-template-columns: 1fr !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip > span:nth-child(odd) {
    border-left: 0 !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip > span:nth-child(n + 3) {
    border-top: 1px solid rgba(221,227,223,.94) !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .featuredDemandMeta {
    grid-template-columns: 1fr !important;
  }
  body:has(.appShell.view-market) .appShell.view-market .trustTravelerShowcase,
  body:has(.appShell.view-market) .appShell.view-market .homepageFinalCta {
    padding: 22px !important;
  }
}

/* Mockup alignment pass: make the hero a true edge-to-edge travel scene. */
body:has(.appShell.view-market) .appShell.view-market {
  --bm-home-max: 1600px;
  background: #f7fbfa !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar {
  position: absolute !important;
  min-height: 92px !important;
  padding: 0 max(calc((100vw - 1600px) / 2 + 56px), 40px) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .055) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand {
  position: relative !important;
  z-index: 2 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border-radius: 13px !important;
  background: #e3f5f1 !important;
  color: #007d77 !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand strong {
  font-size: 21px !important;
  font-weight: 820 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand small {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  gap: clamp(18px, 2vw, 34px) !important;
  max-width: min(56vw, 660px) !important;
  overflow: hidden !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
  position: relative !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: #25302e !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button.active,
body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button:hover {
  color: #007d77 !important;
  background: transparent !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(660px, 74vh, 810px) !important;
  margin: 0 !important;
  padding: clamp(84px, 8vw, 132px) max(calc((100vw - 1600px) / 2 + 72px), 56px) clamp(84px, 8vw, 124px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .74fr) !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(90deg, rgba(247, 251, 250, .99) 0%, rgba(247, 251, 250, .93) 31%, rgba(247, 251, 250, .54) 58%, rgba(247, 251, 250, .08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(247,251,250,.2) 58%, rgba(247,251,250,.98) 100%),
    url("./images/bondmai-airport-travelers-hero.png") right center / cover no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryGlow,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5::before,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5::after,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroImageCard,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCountryPills,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleZh {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
  max-width: 960px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroKicker {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroHeadline {
  max-width: 680px !important;
  margin: 0 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEn {
  display: block !important;
  color: #14201e !important;
  font-size: clamp(64px, 6vw, 106px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  font-weight: 880 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEnSecond {
  color: #007d77 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLead {
  max-width: 540px !important;
  margin-top: 28px !important;
  color: #52615e !important;
  font-size: 19px !important;
  line-height: 1.78 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  width: min(940px, calc(100vw - 112px)) !important;
  max-width: min(940px, calc(100vw - 112px)) !important;
  margin-top: 36px !important;
  padding: 10px !important;
  border: 1px solid rgba(15, 23, 42, .075) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 22px 52px rgba(16, 24, 40, .11), 0 2px 8px rgba(16, 24, 40, .035) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSpotlightGrid {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, .88fr) minmax(168px, .78fr) !important;
  gap: 0 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField {
  min-height: 82px !important;
  padding: 16px 22px !important;
  border: 0 !important;
  border-right: 1px solid rgba(15, 23, 42, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField span {
  color: #25302e !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField :where(input,select) {
  min-height: 44px !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #66736f !important;
  font-size: 16px !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
  min-height: 82px !important;
  height: 100% !important;
  border-radius: 13px !important;
  background: #007d77 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(0, 125, 119, .2) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroPopularRow {
  margin-top: 30px !important;
  gap: 12px !important;
  color: #52615e !important;
  font-size: 15px !important;
  font-weight: 720 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroPopularRow button {
  min-height: 32px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #3f4c49 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
  position: absolute !important;
  inset: 0 !important;
  align-self: auto !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
  position: absolute !important;
  right: max(calc((100vw - 1600px) / 2 + 56px), 56px) !important;
  top: auto !important;
  bottom: 96px !important;
  width: min(360px, calc(100vw - 112px)) !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #25302e !important;
  box-shadow: 0 22px 54px rgba(16, 24, 40, .14) !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  pointer-events: auto !important;
}

body :where(.themeToggle, .languageToggle) {
  display: none !important;
}

body .loadingSkeleton {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 720px);
  margin: 36px auto;
  padding: 0;
}

body .loadingSkeleton i {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12, 109, 104, .08), rgba(12, 109, 104, .15), rgba(12, 109, 104, .08));
  background-size: 220% 100%;
  animation: bondmaiSkeleton 1.2s ease-in-out infinite;
}

body .loadingSkeleton i:nth-of-type(2) {
  width: 82%;
}

body .loadingSkeleton i:nth-of-type(3) {
  width: 64%;
}

body .loadingSkeletonStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes bondmaiSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch * {
  color: inherit !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchOrb {
  background: #007d77 !important;
  color: #fff !important;
}

body:has(.appShell.view-market) .appShell.view-market > .workspace {
  width: min(100%, 1600px) !important;
  max-width: none !important;
  margin: -36px auto 0 !important;
  padding: 0 max(calc((100vw - 1600px) / 2 + 56px), 40px) 84px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .workspace > .rail {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulse {
  margin-top: 0 !important;
  padding: clamp(34px, 4.2vw, 56px) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .08) !important;
}

@media (max-width: 900px) {
  body:has(.appShell.view-market) .appShell.view-market > .topbar {
    min-height: 76px !important;
    padding-inline: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
    display: none !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    min-height: 680px !important;
    padding: 120px 24px 70px !important;
    grid-template-columns: 1fr !important;
    background:
      linear-gradient(180deg, rgba(247,251,250,.98) 0%, rgba(247,251,250,.9) 42%, rgba(247,251,250,.98) 100%),
      url("./images/bondmai-airport-travelers-hero.png") center top / cover no-repeat !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
    display: none !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .workspace {
    margin-top: -24px !important;
    padding-inline: 16px !important;
  }
}

/* Final visual alignment toward the approved BondMai reference. */
body:has(.appShell.view-market) .appShell.view-market > .topbar {
  min-height: 76px !important;
  padding: 0 max(calc((100vw - 1600px) / 2 + 52px), 36px) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand {
  gap: 12px !important;
  min-width: 230px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(225, 248, 244, .98), rgba(202, 237, 230, .92)) !important;
  color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(0, 125, 119, .13) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark::before {
  content: "✈" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #007d77 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: rotate(-28deg) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand strong {
  color: #111b1a !important;
  font-size: 21px !important;
  letter-spacing: -.02em !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brandName em {
  margin-left: 3px !important;
  color: #008b83 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
  left: 50% !important;
  gap: 34px !important;
  transform: translateX(-50%) !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
  min-height: 44px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111b1a !important;
  font-size: 15px !important;
  font-weight: 680 !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button.active,
body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button:hover {
  background: transparent !important;
  color: #007d77 !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  right: 2px !important;
  bottom: 3px !important;
  left: 2px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: #007d77 !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
  min-height: clamp(646px, 67vh, 730px) !important;
  padding: clamp(86px, 9.2vh, 108px) max(calc((100vw - 1600px) / 2 + 56px), 56px) 86px !important;
  background:
    linear-gradient(90deg, rgba(252, 254, 253, .96) 0%, rgba(252, 254, 253, .84) 34%, rgba(252, 254, 253, .28) 59%, rgba(252, 254, 253, .02) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(247, 251, 250, .02) 58%, rgba(247, 251, 250, .9) 100%),
    url("./images/bondmai-hero-airport-couple-v2.png") center center / cover no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEn {
  font-size: clamp(64px, 5.8vw, 94px) !important;
  letter-spacing: -.045em !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLead {
  margin-top: 26px !important;
  font-size: 18px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
  grid-template-columns: minmax(0, 1fr) 158px !important;
  width: min(910px, 100%) !important;
  max-width: min(910px, 100%) !important;
  margin-top: 38px !important;
  padding: 8px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField,
body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
  min-height: 76px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField {
  padding: 14px 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
  right: max(calc((100vw - 1600px) / 2 + 56px), 48px) !important;
  bottom: 74px !important;
  width: min(348px, calc(100vw - 96px)) !important;
  padding: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .workspace {
  margin: -66px auto 0 !important;
  padding: 0 max(calc((100vw - 1600px) / 2 + 48px), 32px) 84px !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulse {
  padding: clamp(34px, 3.8vw, 48px) !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .965) !important;
  box-shadow: 0 24px 72px rgba(16, 24, 40, .08) !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead {
  margin-bottom: 24px !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead .eyebrow {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead h2 {
  font-size: 31px !important;
  letter-spacing: -.035em !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead p {
  max-width: 620px !important;
  margin-top: 6px !important;
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
  gap: 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market .destinationCard {
  min-height: 204px !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .12) !important;
}

body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
  min-height: 88px !important;
  margin-top: 22px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .055) !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.02fr) minmax(260px, .78fr) !important;
  gap: 22px !important;
  margin-top: 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips) {
  min-height: 272px !important;
  padding: 24px !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
  gap: 0 !important;
  align-content: start !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips) h3 {
  margin-bottom: 16px !important;
  min-height: 0 !important;
  color: #14201e !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem {
  min-height: 58px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .065) !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem:last-child {
  border-bottom: 0 !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem strong {
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem :where(small,p) {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem p {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
  position: relative !important;
  display: grid !important;
  grid-column: auto !important;
  width: auto !important;
  min-height: 272px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 12px !important;
  padding: 28px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.28) 0 70px, transparent 72px),
    linear-gradient(145deg, #9fd8d1 0%, #068c87 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 44px rgba(0, 125, 119, .2) !important;
  cursor: pointer !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -42px -58px 42% !important;
  height: 160px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  transform: rotate(-22deg) !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerIcon {
  display: grid !important;
  width: 74px !important;
  height: 74px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta strong {
  position: relative !important;
  font-size: 27px !important;
  letter-spacing: .08em !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta small {
  position: relative !important;
  max-width: 180px !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta b {
  position: relative !important;
  min-width: 170px !important;
  margin-top: 6px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 15px !important;
}

@media (max-width: 900px) {
  body:has(.appShell.view-market) .appShell.view-market > .topbar {
    min-height: 74px !important;
    padding-inline: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .topbar .brand {
    min-width: 0 !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    min-height: 680px !important;
    padding: 76px 24px 68px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .workspace {
    margin-top: -28px !important;
    padding-inline: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 220px !important;
  }
}

@media (min-width: 901px) {
  body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.02fr) minmax(260px, .78fr) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
    grid-column: auto !important;
    width: auto !important;
  }
}

/* Reference-aligned marketplace polish */
@media (min-width: 901px) {
  body:has(.appShell.view-market) .appShell.view-market > .workspace {
    padding: 0 max(calc((100vw - 1600px) / 2 + 56px), 56px) 84px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .marketPulse {
    padding: clamp(34px, 3vw, 42px) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .siteFooter,
  body:has(.appShell.view-market) .appShell.view-market footer {
    margin-inline: max(calc((100vw - 1600px) / 2 + 56px), 56px) !important;
  }
}

body:has(.appShell.view-market) .appShell.view-market {
  font-size: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar {
  min-height: 78px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brandName {
  font-size: 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .brand small {
  font-size: 13px !important;
}

body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
  min-height: 44px !important;
  padding-inline: 18px !important;
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead h2,
body:has(.appShell.view-market) .appShell.view-market .sectionHead h2 {
  font-size: clamp(30px, 2.2vw, 36px) !important;
  line-height: 1.12 !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketPulseHead p,
body:has(.appShell.view-market) .appShell.view-market .sectionHead p,
body:has(.appShell.view-market) .appShell.view-market :where(.pulseItem small,.pulseItem p,.destinationStats span,.statLabel,.productMeta,.productSupport,.travelerMeta,.requestMeta) {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body:has(.appShell.view-market) .appShell.view-market .destinationCard {
  min-height: 232px !important;
  border-radius: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market .destinationName {
  font-size: 27px !important;
  line-height: 1.12 !important;
}

body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
  min-height: 104px !important;
}

body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip strong,
body:has(.appShell.view-market) .appShell.view-market .statValue {
  font-size: clamp(24px, 1.8vw, 30px) !important;
}

body:has(.appShell.view-market) .appShell.view-market .pulseItem strong {
  font-size: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips) {
  padding: 26px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips) h3 {
  font-size: 25px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.primaryButton,.softButton,.profileLinkButton,.cardCta,.demandTrendCta,.homepageFinalAction,.heroSearchSubmit) {
  min-height: 44px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.productShowcase,.marketTravelerSection,.aiRecommendationSection) > .sectionHead {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.productShowcase,.marketTravelerSection,.aiRecommendationSection) > .sectionHead h2 {
  font-size: clamp(30px, 2.15vw, 34px) !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.productShowcase,.marketTravelerSection,.aiRecommendationSection) > .sectionHead p {
  max-width: 560px !important;
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .productShowcase {
  margin-top: 64px !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketplaceRecommendationGrid {
  margin-top: 72px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.marketTravelerSection,.aiRecommendationSection) {
  padding: 38px !important;
}

/* BondMai reference polish: keep layout, improve rhythm and card personality. */
@media (min-width: 901px) {
  body:has(.appShell.view-market) .appShell.view-market > .topbar {
    min-height: 82px !important;
    padding-inline: max(calc((100vw - 1600px) / 2 + 58px), 58px) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    padding-inline: max(calc((100vw - 1600px) / 2 + 58px), 58px) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market > .workspace {
    margin-top: -62px !important;
    padding-inline: max(calc((100vw - 1600px) / 2 + 58px), 58px) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market :where(.marketPulse,.instantPlatformStrip,.departureBoard,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid) {
    margin-top: 54px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .marketPulse {
    margin-top: 0 !important;
  }

  body:has(.appShell.view-market) .appShell.view-market :where(.departureBoard,.trendBoard,.featuredWishStrip,.trustedMembersPanel) {
    padding: 34px !important;
    border: 1px solid rgba(15, 23, 42, .065) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .055) !important;
  }
}

body:has(.appShell.view-market) .appShell.view-market .heroSearchPanel {
  box-shadow: 0 22px 50px rgba(15, 23, 42, .13) !important;
}

body:has(.appShell.view-market) .appShell.view-market .heroSearchField strong {
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .heroSearchField span:last-child {
  font-size: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market .sectionHead {
  margin-bottom: 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market .sectionHead.tight {
  margin-bottom: 18px !important;
}

body:has(.appShell.view-market) .appShell.view-market .departureGrid {
  align-items: stretch !important;
  gap: 24px !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningTravelerCard {
  text-align: left !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .055) !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningTravelerCard.featured {
  min-height: 214px !important;
  grid-template-columns: 88px minmax(0, 1fr) auto !important;
  padding: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,250,247,.92)) !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningAvatar {
  width: 72px !important;
  height: 72px !important;
  font-size: 30px !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningBody strong {
  font-size: 24px !important;
  letter-spacing: -.02em !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningBody p {
  max-width: 520px !important;
  font-size: 15px !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningMeta {
  gap: 10px !important;
}

body:has(.appShell.view-market) .appShell.view-market .returningMeta span {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 125, 119, .075) !important;
  color: #123331 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase {
  margin-top: 62px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendGrid {
  display: grid !important;
  grid-template-columns: 1.22fr 1fr 1fr !important;
  gap: 24px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard {
  min-height: 324px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06) !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard:first-child {
  box-shadow: 0 22px 54px rgba(0, 125, 119, .14) !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual,
body:has(.appShell.view-market) .appShell.view-market .trendCard .wishVisual {
  min-height: 188px !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard:first-child .productVisual,
body:has(.appShell.view-market) .appShell.view-market .trendCard:first-child .wishVisual {
  min-height: 208px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productContent,
body:has(.appShell.view-market) .appShell.view-market .trendCard .wishContent {
  padding: 18px 20px 20px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard h3,
body:has(.appShell.view-market) .appShell.view-market .trendCard strong {
  font-size: 17px !important;
  line-height: 1.35 !important;
}

body:has(.appShell.view-market) .appShell.view-market .rankBadge {
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
  box-shadow: 0 12px 24px rgba(238, 92, 76, .24) !important;
}

body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single {
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  min-height: 304px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single .wishVisual {
  min-height: 304px !important;
  border-radius: 0 !important;
}

body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single .requestContent {
  padding: 30px 34px !important;
}

body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single .requestContent > strong {
  font-size: 25px !important;
  line-height: 1.2 !important;
}

body:has(.appShell.view-market) .appShell.view-market .requestMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 22px !important;
  margin-top: 18px !important;
}

body:has(.appShell.view-market) .appShell.view-market .requestMeta span {
  display: inline-grid !important;
  gap: 3px !important;
  min-width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5c6f6d !important;
  font-size: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market .requestMeta b {
  color: #111b1a !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustedMemberCard.single {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 178px !important;
  padding: 28px 32px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustedMemberCard .memberAvatar {
  width: 70px !important;
  height: 70px !important;
  font-size: 25px !important;
}

body:has(.appShell.view-market) .appShell.view-market .travelerTrustHead strong {
  font-size: 22px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustSignalRow {
  gap: 12px 24px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustSignalRow span {
  min-width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5c6f6d !important;
  font-size: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustSignalRow b {
  display: block !important;
  margin-top: 3px !important;
  color: #111b1a !important;
  font-size: 18px !important;
}

body:has(.appShell.view-market) .appShell.view-market .marketplaceRecommendationGrid {
  grid-template-columns: minmax(0, 1.16fr) minmax(380px, .84fr) !important;
  gap: 26px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.marketTravelerSection,.aiRecommendationSection) {
  border: 1px solid rgba(15, 23, 42, .065) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .055) !important;
}

body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection {
  position: sticky !important;
  top: 98px !important;
  align-self: start !important;
}

body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection > .sectionHead {
  margin: -38px -38px 22px !important;
  padding: 30px 38px 24px !important;
  border-radius: 20px 20px 0 0 !important;
  background: linear-gradient(135deg, rgba(231, 249, 245, .95), rgba(255, 250, 238, .9)) !important;
}

body:has(.appShell.view-market) .appShell.view-market .tripCard {
  min-height: 214px !important;
  padding: 24px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .055) !important;
}

body:has(.appShell.view-market) .appShell.view-market .tripCard .avatar {
  width: 66px !important;
  height: 66px !important;
  font-size: 24px !important;
}

body:has(.appShell.view-market) .appShell.view-market .tripCard .meter {
  display: none !important;
}

body:has(.appShell.view-market) .appShell.view-market .tripCard .miniMeta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body:has(.appShell.view-market) .appShell.view-market .tripCard .miniMeta span {
  min-height: 34px !important;
  font-size: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market .matchCard {
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
}

body:has(.appShell.view-market) .appShell.view-market .matchInsight {
  border-radius: 16px !important;
  background: rgba(230, 247, 244, .78) !important;
}

@media (max-width: 900px) {
  body:has(.appShell.view-market) .appShell.view-market :where(.marketPulse,.instantPlatformStrip,.departureBoard,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid) {
    margin-top: 36px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .trendGrid,
  body:has(.appShell.view-market) .appShell.view-market .marketplaceRecommendationGrid,
  body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single,
  body:has(.appShell.view-market) .appShell.view-market .trustedMemberCard.single {
    grid-template-columns: 1fr !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection {
    position: static !important;
  }
}

/* Visual QA pass: tighter homepage density and real marketplace imagery. */
@media (min-width: 901px) {
  body:has(.appShell.view-market) .appShell.view-market .marketPulse {
    padding: 30px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .marketPulseHead {
    margin-bottom: 18px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
    gap: 18px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .destinationCard {
    min-height: 196px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
    min-height: 84px !important;
    margin-top: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    margin-top: 16px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips,.pulseTravelerCta) {
    min-height: 246px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market :where(.pulseFeed,.pulseTrips) {
    padding: 20px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
    padding: 22px !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .departureBoard {
    min-height: 0 !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .departureGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    min-height: 0 !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .routeFollowPanel {
    display: grid !important;
    min-height: 214px !important;
    align-content: center !important;
    gap: 16px !important;
    padding: 24px !important;
    background: linear-gradient(145deg, rgba(245, 252, 250, .94), rgba(255, 251, 241, .92)) !important;
  }

  body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .routeFollowPanel span {
    color: #143331 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-america {
  background:
    linear-gradient(180deg, rgba(6, 24, 30, 0) 22%, rgba(6, 24, 30, .84) 100%),
    url("./images/traveler-hero.jpg") center 42% / cover no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-europe {
  background:
    linear-gradient(180deg, rgba(6, 24, 30, 0) 22%, rgba(6, 24, 30, .78) 100%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market .productVisual-0,
body:has(.appShell.view-market) .appShell.view-market .productVisual-1,
body:has(.appShell.view-market) .appShell.view-market .productVisual-2 {
  background-image: url("./images/bondmai-product-cards-composite.png") !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market .productVisual-0 {
  background-position: left center !important;
}

body:has(.appShell.view-market) .appShell.view-market .productVisual-1 {
  background-position: center center !important;
}

body:has(.appShell.view-market) .appShell.view-market .productVisual-2 {
  background-position: right center !important;
}

body:has(.appShell.view-market) .appShell.view-market .productVisual::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.58) 100%) !important;
  pointer-events: none !important;
}

body:has(.appShell.view-market) .appShell.view-market .productStats {
  display: grid !important;
  grid-template-columns: 1.25fr .85fr .85fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market .productStats span {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5d6f6d !important;
  font-size: 13px !important;
}

body:has(.appShell.view-market) .appShell.view-market .productStats b {
  display: block !important;
  margin-top: 5px !important;
  color: #101918 !important;
  font-size: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market .featuredWishCard.single .wishVisual {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.58)),
    url("./images/bondmai-product-cards-composite.png") left center / 300% 100% no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel {
  padding-bottom: 28px !important;
}

body:has(.appShell.view-market) .appShell.view-market .trustedMemberCard.single {
  background:
    radial-gradient(circle at 92% 28%, rgba(0,125,119,.08) 0 80px, transparent 82px),
    rgba(255,255,255,.92) !important;
}

body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection {
  background: rgba(255, 255, 255, .96) !important;
}

body:has(.appShell.view-market) .appShell.view-market .matchList {
  gap: 16px !important;
}

body:has(.appShell.view-market) .appShell.view-market .matchCard .aiBox,
body:has(.appShell.view-market) .appShell.view-market .matchCard .reasonPills span {
  background: rgba(232, 247, 244, .72) !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.pulseItem small,.pulseItem p,.destinationStats span,.productStats span,.trustSignalRow span,.requestMeta span,.miniMeta span,.matchFooter,.matchMain p) {
  font-size: 14px !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.departureBoard,.featuredWishStrip,.trustedMembersPanel) > .sectionHead {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.appShell.view-market) .appShell.view-market :where(.departureBoard,.featuredWishStrip,.trustedMembersPanel) > .sectionHead .boardSummary {
  align-self: end !important;
  min-height: 40px !important;
  padding: 7px 10px !important;
}

body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .departureGrid {
  margin-top: 20px !important;
}

body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .returningTravelerCard.featured,
body:has(.appShell.view-market) .appShell.view-market .departureBoard.single .routeFollowPanel {
  min-height: 214px !important;
  height: auto !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-0,
body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-1,
body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-2 {
  position: relative !important;
  background-image: url("./images/bondmai-product-cards-composite.png") !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-0 {
  background-position: 0% 50% !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-1 {
  background-position: 50% 50% !important;
}

body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual.productVisual-2 {
  background-position: 100% 50% !important;
}
/* BondMai marketplace final cohesion pass
   Keep the current homepage structure, but make the lower marketplace sections
   feel like the same premium travel product as the hero. */
body:has(.appShell.view-market) {
  --bm-page-max: 1220px;
  --bm-page-pad: 24px;
  --bm-section-gap-final: clamp(64px, 6vw, 80px);
  --bm-gap-final: 22px;
  --bm-radius-section-final: 24px;
  --bm-radius-card-final: 16px;
  --bm-border-final: rgba(20, 55, 50, .10);
  --bm-shadow-low: 0 1px 2px rgba(15, 23, 42, .03), 0 10px 28px rgba(15, 23, 42, .045);
  --bm-shadow-hover: 0 10px 24px rgba(15, 23, 42, .08);
  --bm-mint: #0d7f78;
  --bm-mint-soft: #e7f5f2;
  --bm-cream: #fff8ec;
  --bm-passport: #183b56;
  --bm-coral: #f35d5b;
  --bm-text-main: #162321;
  --bm-text-muted: #5b6a67;
  --bm-bg-warm: #f7fbfa;
  background: var(--bm-bg-warm) !important;
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 15px !important;
  color: var(--bm-text-main) !important;
}

html body:has(.appShell.view-market) .appShell.view-market {
  --bm-home-max: var(--bm-page-max) !important;
  --bm-section-gap: var(--bm-section-gap-final) !important;
  max-width: none !important;
  padding-inline: 0 !important;
  background: var(--bm-bg-warm) !important;
}

html body:has(.appShell.view-market) .appShell.view-market > :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid),
html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
  width: min(calc(100vw - (var(--bm-page-pad) * 2)), var(--bm-page-max)) !important;
  max-width: var(--bm-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body:has(.appShell.view-market) .appShell.view-market > :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid) {
  margin-top: var(--bm-section-gap-final) !important;
}

html body:has(.appShell.view-market) .topbar {
  min-height: 70px !important;
  padding: 0 clamp(22px, 4vw, 48px) !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(20,55,50,.08) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
}

html body:has(.appShell.view-market) .brand { min-width: 210px !important; gap: 12px !important; }

html body:has(.appShell.view-market) .logoMark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #d9f3ee, #0d7f78) !important;
  color: #fff !important;
  font-size: 0 !important;
  position: relative !important;
}

html body:has(.appShell.view-market) .logoMark::before {
  content: "✈";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  transform: rotate(-24deg);
}

html body:has(.appShell.view-market) .brandName {
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body:has(.appShell.view-market) .brandName em {
  color: var(--bm-mint) !important;
  font-style: normal !important;
  margin-left: 4px !important;
}

html body:has(.appShell.view-market) .brand small {
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  margin-top: 3px !important;
}

html body:has(.appShell.view-market) .tabs { gap: 10px !important; }

html body:has(.appShell.view-market) .tabs button {
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1d2b29 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .tabs button.active {
  color: var(--bm-mint) !important;
  background: rgba(13,127,120,.08) !important;
}

html body:has(.appShell.view-market) .topbarActions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

html body:has(.appShell.view-market) .primaryNavCta,
html body:has(.appShell.view-market) .accountChip,
html body:has(.appShell.view-market) .textNavAction {
  min-height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(20,55,50,.10) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body:has(.appShell.view-market) .primaryNavCta {
  background: var(--bm-mint) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(13,127,120,.20) !important;
}

html body:has(.appShell.view-market) .accountChip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  color: var(--bm-text-main) !important;
  max-width: 180px !important;
}

html body:has(.appShell.view-market) .accountDot {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #0b736e !important;
  color: #fff !important;
  font-size: 12px !important;
}

html body:has(.appShell.view-market) .textNavAction {
  background: transparent !important;
  color: var(--bm-text-muted) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroLead {
  max-width: 540px !important;
  color: rgba(22,35,33,.70) !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.8 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
  padding: 14px !important;
  border-radius: 18px !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit { min-height: 58px !important; }

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField span {
  font-size: 13px !important;
  color: rgba(22,35,33,.66) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel input,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel select {
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body:has(.appShell.view-market) .heroSecondaryActions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

html body:has(.appShell.view-market) .heroGhostAction,
html body:has(.appShell.view-market) .heroTextAction {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body:has(.appShell.view-market) .heroGhostAction {
  color: var(--bm-mint) !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(13,127,120,.18) !important;
}

html body:has(.appShell.view-market) .heroTextAction {
  border: 0 !important;
  background: transparent !important;
  color: var(--bm-passport) !important;
}

html body:has(.appShell.view-market) :where(.sectionHead h2,.marketPulseHead h2,.featuredWishStrip h2,.trustedMembersPanel h2,.trendBoard h2,.viewGrid h2) {
  font-family: Inter, "Noto Sans TC", sans-serif !important;
  font-size: clamp(28px, 2.5vw, 32px) !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
}

html body:has(.appShell.view-market) :where(.sectionHead p,.marketPulseHead p,.featuredWishStrip p,.trustedMembersPanel p,.trendBoard p,.viewGrid p,.tripCard p,.matchCard p) {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--bm-text-muted) !important;
}

html body:has(.appShell.view-market) :where(.tripCard small,.matchCard small,.featuredWishCard small,.trendCard small,.pulseItem small,.miniMeta) {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html body:has(.appShell.view-market) :where(.primaryButton,.softButton,.textButton,.heroSearchSubmit,.primaryNavCta,.accountChip,.cardCta) {
  min-height: 44px !important;
  font-size: 14px !important;
}

html body:has(.appShell.view-market) .marketPulse,
html body:has(.appShell.view-market) .trendBoard,
html body:has(.appShell.view-market) .featuredWishStrip,
html body:has(.appShell.view-market) .trustedMembersPanel,
html body:has(.appShell.view-market) .marketplaceRecommendationGrid,
html body:has(.appShell.view-market) .marketTravelerSection,
html body:has(.appShell.view-market) .aiRecommendationSection {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body:has(.appShell.view-market) .marketPulseHead,
html body:has(.appShell.view-market) .sectionHead { margin-bottom: 22px !important; }
html body:has(.appShell.view-market) .pulseCountryRail { gap: var(--bm-gap-final) !important; }

html body:has(.appShell.view-market) .destinationCard {
  min-height: 246px !important;
  border-radius: var(--bm-radius-card-final) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--bm-shadow-low) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html body:has(.appShell.view-market) .destinationCard::before {
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(4,18,18,.72) 100%), url("./images/bondmai-destination-cards-composite.png") !important;
  background-size: 400% 100% !important;
  background-position: 0% 50% !important;
}

html body:has(.appShell.view-market) .destinationCard.visual-america::before { background-position: 33.333% 50% !important; }
html body:has(.appShell.view-market) .destinationCard.visual-tropical::before { background-position: 66.666% 50% !important; }
html body:has(.appShell.view-market) .destinationCard.visual-europe::before { background-position: 100% 50% !important; }

html body:has(.appShell.view-market) .destinationCard strong,
html body:has(.appShell.view-market) .destinationCard h3 { font-size: 24px !important; line-height: 1.15 !important; }
html body:has(.appShell.view-market) .destinationCard :where(span,p,small) { font-size: 14px !important; }

html body:has(.appShell.view-market) .liveStatsStrip {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--bm-border-final) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
}

html body:has(.appShell.view-market) .marketPulseGrid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(260px, .8fr) !important;
  gap: var(--bm-gap-final) !important;
}

html body:has(.appShell.view-market) :where(.pulseFeed,.pulseTrips,.travelerJoinCard,.instantPlatformStrip,.featuredWishCard,.trendCard,.tripCard,.matchCard,.trustProofCard) {
  border-radius: var(--bm-radius-card-final) !important;
  border: 1px solid var(--bm-border-final) !important;
  background: #fff !important;
  box-shadow: var(--bm-shadow-low) !important;
}

html body:has(.appShell.view-market) .marketplaceRecommendationGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--bm-section-gap-final) !important;
  align-items: start !important;
}

html body:has(.appShell.view-market) .marketTravelerSection,
html body:has(.appShell.view-market) .aiRecommendationSection {
  min-width: 0 !important;
  width: 100% !important;
}

html body:has(.appShell.view-market) .tripList,
html body:has(.appShell.view-market) .matchList {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: var(--bm-gap-final) !important;
  align-items: stretch !important;
}

html body:has(.appShell.view-market) .tripCard,
html body:has(.appShell.view-market) .matchCard {
  min-width: 0 !important;
  min-height: 220px !important;
  padding: 20px !important;
}

html body:has(.appShell.view-market) .tripCard h3,
html body:has(.appShell.view-market) .matchCard h3 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body:has(.appShell.view-market) .tripCard .memberAvatar {
  width: 54px !important;
  height: 54px !important;
  font-size: 17px !important;
}

html body:has(.appShell.view-market) .aiRecommendationSection { position: static !important; }

html body:has(.appShell.view-market) .aiRecommendationSection > .sectionHead {
  background: linear-gradient(135deg, rgba(231,245,242,.86), rgba(255,248,236,.64)) !important;
  border: 1px solid rgba(13,127,120,.12) !important;
  border-radius: var(--bm-radius-section-final) !important;
  padding: 24px !important;
}

html body:has(.appShell.view-market) .matchCardSimple {
  display: grid !important;
  grid-template-rows: 150px minmax(0, 1fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

html body:has(.appShell.view-market) .matchCardSimple .matchImage {
  width: 100% !important;
  height: 150px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html body:has(.appShell.view-market) .matchMain {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body:has(.appShell.view-market) .matchTopLine,
html body:has(.appShell.view-market) .matchFooter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body:has(.appShell.view-market) .matchScore {
  color: var(--bm-mint) !important;
  font-size: 18px !important;
}

html body:has(.appShell.view-market) .matchMeta { margin: 0 !important; }

html body:has(.appShell.view-market) .recommendedTraveler {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--bm-mint-soft) !important;
  border-radius: 14px !important;
}

html body:has(.appShell.view-market) .recommendedTraveler b {
  display: block !important;
  color: var(--bm-text-main) !important;
  font-size: 15px !important;
}

html body:has(.appShell.view-market) .matchTravelerAvatar { width: 42px !important; height: 42px !important; }

html body:has(.appShell.view-market) .reasonPills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body:has(.appShell.view-market) .reasonPills span {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f4f8f7 !important;
  color: #31514d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body:has(.appShell.view-market) .screenReaderOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

html body:has(.appShell.view-market) .trustProtectionBanner {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 28px !important;
  border-radius: var(--bm-radius-section-final) !important;
  background: linear-gradient(135deg, rgba(231,245,242,.94), rgba(255,248,236,.82)) !important;
  border: 1px solid rgba(13,127,120,.12) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,.045) !important;
}

html body:has(.appShell.view-market) .sectionEyebrow {
  margin: 0 0 8px !important;
  color: var(--bm-mint) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

html body:has(.appShell.view-market) .trustBannerCopy h2 { margin: 0 0 10px !important; }

html body:has(.appShell.view-market) .trustedAvatarStack {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 18px !important;
}

html body:has(.appShell.view-market) .trustedAvatarStack .memberAvatar {
  width: 34px !important;
  height: 34px !important;
  margin-right: -8px !important;
  border: 2px solid #fff !important;
}

html body:has(.appShell.view-market) .trustedAvatarStack span:last-child {
  margin-left: 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #31514d !important;
}

html body:has(.appShell.view-market) .trustProtectionGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body:has(.appShell.view-market) .trustProofCard {
  padding: 16px !important;
  min-height: 120px !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .trustProofCard span {
  color: var(--bm-mint) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

html body:has(.appShell.view-market) .trustProofCard strong {
  display: block !important;
  margin-top: 8px !important;
  font-size: 16px !important;
}

html body:has(.appShell.view-market) .trustProofCard p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
}

html body:has(.appShell.view-market) .trustBannerActions {
  display: grid !important;
  gap: 10px !important;
  justify-items: stretch !important;
}

html body:has(.appShell.view-market) .trendCard .productVisual,
html body:has(.appShell.view-market) .featuredWishVisual,
html body:has(.appShell.view-market) .wishVisual { background-color: #f4f8f7 !important; }

html body:has(.appShell.view-market) :where(.destinationCard,.trendCard,.featuredWishCard,.tripCard,.matchCard,.trustProofCard,.pulseItem):hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bm-shadow-hover) !important;
}

@media (max-width: 1100px) {
  html body:has(.appShell.view-market) .tripList,
  html body:has(.appShell.view-market) .matchList { grid-template-columns: repeat(2, minmax(280px, 1fr)) !important; }

  html body:has(.appShell.view-market) .marketPulseGrid,
  html body:has(.appShell.view-market) .trustProtectionBanner { grid-template-columns: 1fr 1fr !important; }

  html body:has(.appShell.view-market) .trustBannerActions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  html body:has(.appShell.view-market) .topbarActions .textNavAction { display: none !important; }
}

@media (max-width: 820px) {
  html body:has(.appShell.view-market) .appShell.view-market > :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid),
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 { width: min(calc(100vw - 32px), var(--bm-page-max)) !important; }

  html body:has(.appShell.view-market) .topbar { min-height: 64px !important; padding-inline: 16px !important; }
  html body:has(.appShell.view-market) .brand { min-width: 0 !important; }
  html body:has(.appShell.view-market) .brand small,
  html body:has(.appShell.view-market) .topbarActions .accountChip span:not(.accountDot),
  html body:has(.appShell.view-market) .primaryNavCta { display: none !important; }

  html body:has(.appShell.view-market) .tabs {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  html body:has(.appShell.view-market) .marketPulseGrid,
  html body:has(.appShell.view-market) .trustProtectionBanner,
  html body:has(.appShell.view-market) .trustProtectionGrid { grid-template-columns: minmax(0, 1fr) !important; }

  html body:has(.appShell.view-market) .tripList,
  html body:has(.appShell.view-market) .matchList { grid-template-columns: minmax(0, 1fr) !important; }

  html body:has(.appShell.view-market) .matchCardSimple { grid-template-rows: 172px auto !important; }
  html body:has(.appShell.view-market) .matchCardSimple .matchImage { height: 172px !important; }
}

@media (max-width: 430px) {
  html body:has(.appShell.view-market) .appShell.view-market > :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid),
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 { width: calc(100vw - 24px) !important; }

  html body:has(.appShell.view-market) .brandName { font-size: 17px !important; }
  html body:has(.appShell.view-market) .tabs button { min-width: max-content !important; font-size: 13px !important; }
  html body:has(.appShell.view-market) .marketplaceRecommendationGrid { gap: 56px !important; }
  html body:has(.appShell.view-market) .trustProtectionBanner { padding: 20px !important; }
  html body:has(.appShell.view-market) .matchFooter { align-items: stretch !important; flex-direction: column !important; }
}

/* Final alignment lock: override older viewGrid/homepage layers that are more
   general but loaded earlier in the cascade. */
html body:has(.appShell.view-market) .appShell.view-market :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid),
html body:has(.appShell.view-market) .appShell.view-market .hero.heroLuxuryV5 {
  width: min(calc(100vw - 48px), 1220px) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(calc(100vw - 48px), 1220px) !important;
  max-width: 1220px !important;
  gap: var(--bm-section-gap-final) !important;
  align-items: start !important;
}

html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid > .marketTravelerSection,
html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid > .aiRecommendationSection {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .marketPulse,
html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip,
html body:has(.appShell.view-market) .appShell.view-market .trendBoard,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip,
html body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel,
html body:has(.appShell.view-market) .appShell.view-market .marketplaceRecommendationGrid,
html body:has(.appShell.view-market) .appShell.view-market .hero.heroLuxuryV5 {
  width: min(calc(100vw - 48px), 1220px) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body:has(.appShell.view-market) .appShell.view-market .workspace .panel {
  width: min(calc(100vw - 48px), 1220px) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .tripList,
html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .matchList {
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
}

@media (max-width: 1100px) {
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .tripList,
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .matchList {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html body:has(.appShell.view-market) .appShell.view-market :where(.marketPulse,.instantPlatformStrip,.trendBoard,.featuredWishStrip,.trustedMembersPanel,.marketplaceRecommendationGrid),
  html body:has(.appShell.view-market) .appShell.view-market .hero.heroLuxuryV5,
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid,
  html body:has(.appShell.view-market) .appShell.view-market .marketPulse,
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trendBoard,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel {
    width: calc(100vw - 24px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .tripList,
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid .matchList {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* BondMai homepage geometry lock: keep every frozen section on the same
   viewport-centered content rail as the hero, even when legacy workspace rules
   still define side rails for other pages. */
html body:has(.appShell.view-market) .appShell.view-market > .workspace {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: -36px 0 0 !important;
  padding: 0 0 84px !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 48px), 1220px) !important;
  max-width: 1220px !important;
  margin: 0 !important;
  padding: 0 0 96px !important;
  background: transparent !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > :where(section,.viewGrid),
html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > :where(section,.viewGrid) {
  margin-top: 72px !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .instantPlatformStrip,
html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .featuredWishStrip {
  margin-top: 64px !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .trendBoard,
html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .trustedMembersPanel {
  margin-top: 80px !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .marketplaceRecommendationGrid {
  margin-top: 76px !important;
}

body .loadingSkeleton {
  display: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, .58fr) !important;
  gap: 18px !important;
}

html body:has(.appShell.view-market) .appShell.view-market .pulseFeed,
html body:has(.appShell.view-market) .appShell.view-market .pulseTrips {
  min-height: 248px !important;
}

html body:has(.appShell.view-market) .appShell.view-market .pulseItem {
  min-height: 78px !important;
}

html body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
  min-height: 100% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
  margin-top: 22px !important;
}

html body:has(.appShell.view-market) .appShell.view-market .destinationStats span:last-child {
  display: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .marketTravelerSection .sectionHead p,
html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection .sectionHead p {
  max-width: 680px !important;
}

html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .matchMain > p,
html body:has(.appShell.view-market) .appShell.view-market .tripCard p,
html body:has(.appShell.view-market) .appShell.view-market .pulseItem p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

@media (max-width: 1100px) {
  html body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
    grid-column: 1 / -1 !important;
    min-height: 180px !important;
  }
}

@media (max-width: 720px) {
  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
    width: calc(100vw - 24px) !important;
    padding-bottom: 72px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > :where(section,.viewGrid) {
    margin-top: 56px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .pulseFeed,
  html body:has(.appShell.view-market) .appShell.view-market .pulseTrips,
  html body:has(.appShell.view-market) .appShell.view-market .pulseTravelerCta {
    min-height: auto !important;
  }
}

/* Designed homepage product fallbacks: when a wish has no uploaded image, use
   the BondMai product still-life sheet instead of showing text initials. */
html body:has(.appShell.view-market) .appShell.view-market :where(.productVisual,.featuredWishVisual,.matchImage) {
  position: relative !important;
  overflow: hidden !important;
  background-image: url("./images/bondmai-product-cards-composite.png") !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
  background-color: #eef6f3 !important;
}

html body:has(.appShell.view-market) .appShell.view-market .productVisual-0,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 1) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 1) .matchImage {
  background-position: 0% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .productVisual-1,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 2) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 2) .matchImage {
  background-position: 50% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .productVisual-2,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 3) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 3) .matchImage {
  background-position: 100% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market :where(.trendCard,.featuredWishCard,.matchCardSimple) :where(.wishVisualPlaceholder,.wishVisualClues,.wishVisual > small) {
  display: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .wishVisualPlaceholder,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .wishVisualClues,
html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .wishVisual > small,
html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .wishVisualPlaceholder,
html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .wishVisualClues,
html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .wishVisual > small {
  display: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .matchImage {
  min-height: 176px !important;
}

html body:has(.appShell.view-market) .appShell.view-market :where(.productVisual,.featuredWishVisual,.matchImage)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.72) 100%) !important;
  pointer-events: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .matchImage::before {
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(250,253,252,.82) 100%) !important;
}

html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 1) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 1) .matchImage {
  background: url("./images/bondmai-product-cards-composite.png") 0% 50% / 300% 100% no-repeat !important;
}

html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 2) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 2) .matchImage {
  background: url("./images/bondmai-product-cards-composite.png") 50% 50% / 300% 100% no-repeat !important;
}

html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller .featuredWishCard:nth-child(3n + 3) .featuredWishVisual,
html body:has(.appShell.view-market) .appShell.view-market .matchList .matchCard:nth-child(3n + 3) .matchImage {
  background: url("./images/bondmai-product-cards-composite.png") 100% 50% / 300% 100% no-repeat !important;
}

/* Stage polish: make the first viewport behave like the reference mockup.
   The hero owns the full browser width, while content cards below stay on a
   centered marketplace rail. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market),
  html body:has(.appShell.view-market) .appShell.view-market {
    background: #f3f8f6 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 40 !important;
    min-height: 84px !important;
    padding: 0 max(calc((100vw - 1600px) / 2 + 58px), 44px) !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.34) 72%, rgba(255,255,255,0)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brand {
    min-width: 245px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brand small,
  html body:has(.appShell.view-market) .appShell.view-market > .topbar .primaryNavCta {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
    gap: clamp(28px, 3vw, 46px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
    color: rgba(17,27,26,.88) !important;
    font-size: 16px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(720px, 78vh, 860px) !important;
    margin: 0 0 0 -50vw !important;
    padding: clamp(144px, 14vh, 178px) max(calc((100vw - 1600px) / 2 + 86px), 76px) 126px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(250,253,252,.98) 0%, rgba(250,253,252,.9) 28%, rgba(250,253,252,.38) 56%, rgba(250,253,252,.02) 100%),
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(244,250,248,.12) 62%, #f3f8f6 100%),
      url("./images/bondmai-hero-airport-couple-v2.png") center center / cover no-repeat !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryGlow,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5::before,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5::after,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroImageCard {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    width: min(790px, 52vw) !important;
    max-width: 790px !important;
    padding: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroKicker {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEn {
    font-size: clamp(70px, 6.2vw, 112px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    color: #101918 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEnSecond {
    color: #087a74 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLead {
    max-width: 620px !important;
    margin-top: 30px !important;
    color: rgba(22,35,33,.72) !important;
    font-size: 19px !important;
    line-height: 1.8 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
    grid-template-columns: minmax(0, 1fr) 172px !important;
    width: min(960px, calc(100vw - 152px)) !important;
    max-width: min(960px, calc(100vw - 152px)) !important;
    margin-top: 42px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 22px 54px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    min-height: 82px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField {
    padding: 15px 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(105deg, rgba(255,255,255,.34) 0 12%, rgba(255,255,255,0) 24% 58%, rgba(255,255,255,.22) 72%, rgba(255,255,255,0) 86%),
      linear-gradient(180deg, #13958e 0%, #06736e 46%, #045f5b 100%) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -12px 20px rgba(0,54,51,.25),
      0 16px 34px rgba(0,105,98,.24) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.22) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit::before {
    content: "" !important;
    position: absolute !important;
    inset: -80% auto -50% -40% !important;
    width: 56px !important;
    transform: rotate(22deg) !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent) !important;
    opacity: .72 !important;
    pointer-events: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit:hover::before {
    animation: bondmaiMetalSweep .85s ease both !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
    right: max(calc((100vw - 1600px) / 2 + 104px), 72px) !important;
    bottom: clamp(72px, 9vh, 124px) !important;
    width: min(380px, calc(100vw - 144px)) !important;
    pointer-events: auto !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace {
    margin-top: -78px !important;
  }

  html body:has(.appShell.view-market) .mobileActionBar {
    display: none !important;
  }
}

@keyframes bondmaiMetalSweep {
  from { transform: translateX(0) rotate(22deg); }
  to { transform: translateX(270px) rotate(22deg); }
}

@media (min-width: 901px) and (max-width: 1280px) {
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    padding-left: 58px !important;
    padding-right: 58px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    width: min(680px, 58vw) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
    right: 58px !important;
  }
}

/* Wider marketplace rail to match the provided composition. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
    width: min(calc(100vw - 96px), 1440px) !important;
    max-width: 1440px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulse,
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trendBoard,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel,
  html body:has(.appShell.view-market) .appShell.view-market .marketplaceRecommendationGrid {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .destinationCard {
    min-height: clamp(220px, 17vw, 270px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller,
  html body:has(.appShell.view-market) .appShell.view-market .tripList,
  html body:has(.appShell.view-market) .appShell.view-market .matchList {
    gap: 24px !important;
  }
}

/* Homepage final refinement pass: make the lower half feel more like a
   consumer marketplace and less like operational data cards. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
    gap: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .instantPlatformStrip {
    margin-top: 64px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .trendBoard {
    margin-top: 76px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .featuredWishStrip {
    margin-top: 64px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .trustedMembersPanel {
    margin-top: 74px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .marketplaceRecommendationGrid {
    margin-top: 76px !important;
    gap: 64px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase {
    min-height: 0 !important;
    padding: 38px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.count-3 {
    grid-template-columns: 1.18fr 1fr 1fr !important;
    align-items: stretch !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard {
    min-height: 430px !important;
    overflow: hidden !important;
    border: 1px solid rgba(18, 48, 43, .08) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(18, 48, 43, .075) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard.rank-1 {
    border-color: rgba(15,118,110,.18) !important;
    box-shadow: 0 24px 58px rgba(15,118,110,.13) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendCard .wishVisual {
    height: 245px !important;
    min-height: 245px !important;
    border-radius: 0 !important;
    transform-origin: center !important;
    transition: transform 420ms var(--bm-ease-emphasized, ease), filter 420ms var(--bm-ease-emphasized, ease) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard.rank-1 .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendCard.rank-1 .wishVisual {
    height: 266px !important;
    min-height: 266px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard:hover .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendCard:hover .wishVisual {
    transform: scale(1.025) !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard .productContent {
    padding: 22px 24px 24px !important;
    gap: 10px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard.rank-1 h3 {
    font-size: 23px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats {
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(20, 48, 43, .08) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats span {
    color: rgba(39, 58, 54, .64) !important;
    font-size: 13px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats b {
    color: #101918 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard {
    min-height: 466px !important;
    border-radius: 22px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .featuredWishVisual {
    min-height: 205px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard h3 {
    font-size: 20px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .wishValueRow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .wishValueRow span {
    min-height: 56px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(241,248,245,.9) !important;
    color: rgba(26,43,39,.72) !important;
    font-size: 13px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .wishValueRow b {
    display: block !important;
    color: #101918 !important;
    font-size: 15px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    align-items: center !important;
    min-height: 300px !important;
    padding: 42px 44px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 78% 50%, rgba(16, 147, 139, .18), transparent 190px),
      linear-gradient(112deg, rgba(255,255,255,.96), rgba(239,250,247,.94) 58%, rgba(250,244,235,.86)) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner::after {
    content: "✓" !important;
    position: absolute !important;
    right: 136px !important;
    top: 58px !important;
    display: grid !important;
    place-items: center !important;
    width: 132px !important;
    height: 152px !important;
    clip-path: polygon(50% 0, 88% 15%, 88% 62%, 50% 100%, 12% 62%, 12% 15%) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,0) 42%),
      linear-gradient(180deg, #a9e4dc, #0f8a82) !important;
    color: #fff !important;
    font-size: 56px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 8px rgba(0,72,66,.26) !important;
    box-shadow: 0 22px 52px rgba(15,118,110,.24) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerCopy {
    grid-column: 1 !important;
    max-width: 790px !important;
    gap: 10px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerCopy h2 {
    font-size: clamp(34px, 3.2vw, 48px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionGrid {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard {
    min-height: 92px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(16, 80, 72, .08) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.7) !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard span {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard strong {
    font-size: 15px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard p {
    margin-top: 4px !important;
    color: rgba(39, 58, 54, .66) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: end !important;
    width: 220px !important;
    margin-top: 150px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions :where(button,.primaryButton,.textButton) {
    width: 100% !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketTravelerSection,
  html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection {
    min-height: auto !important;
    padding: 32px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection {
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92)),
      radial-gradient(circle at 92% 0%, rgba(15,118,110,.12), transparent 240px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection > .sectionHead {
    margin: -32px -32px 22px !important;
    padding: 28px 32px !important;
    border-radius: 28px 28px 0 0 !important;
    background:
      linear-gradient(115deg, rgba(236,249,245,.96), rgba(255,250,240,.74)) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    min-height: 190px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple .matchImage {
    width: 110px !important;
    min-height: 166px !important;
    border-radius: 16px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .matchScore {
    min-width: 58px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(218, 242, 237, .95) !important;
    color: #08756f !important;
    text-align: center !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1180px) {
  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner,
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner::after {
    opacity: .16 !important;
    right: 28px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions {
    grid-column: 1 !important;
    justify-self: start !important;
    margin-top: 12px !important;
  }
}

/* Homepage polish pass 2: keep the frozen layout, but make the surface feel
   closer to the user's reference: clearer header, metallic hero CTA, stronger
   product reading, and a compact trust banner. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) {
    --bm-metal-teal-1: #0e7d78;
    --bm-metal-teal-2: #0a6763;
    --bm-metal-teal-3: #11958d;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar {
    min-height: 78px !important;
    padding: 0 clamp(40px, 5vw, 72px) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68) 64%, rgba(255,255,255,0)) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark {
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 10px 24px rgba(13, 118, 111, .16) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brandName {
    font-size: 21px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brand small {
    margin-top: 4px !important;
    color: rgba(27, 45, 42, .58) !important;
    font-size: 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
    gap: clamp(18px, 2.2vw, 34px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
    min-height: 44px !important;
    padding: 0 4px !important;
    color: rgba(18, 35, 32, .84) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    position: relative !important;
    overflow: hidden !important;
    background:
      linear-gradient(110deg, rgba(255,255,255,.26), rgba(255,255,255,0) 28%),
      linear-gradient(180deg, var(--bm-metal-teal-3), var(--bm-metal-teal-1) 46%, var(--bm-metal-teal-2)) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -10px 20px rgba(0,65,61,.16),
      0 18px 38px rgba(9, 95, 89, .24) !important;
    text-shadow: 0 1px 1px rgba(0,35,32,.25) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit::after {
    content: "" !important;
    position: absolute !important;
    inset: -90% auto -90% -44% !important;
    width: 42% !important;
    transform: rotate(18deg) !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent) !important;
    opacity: .72 !important;
    transition: left 520ms var(--bm-ease-emphasized, ease) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit:hover::after {
    left: 112% !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .marketTravelerSection .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection .sectionHead h2 {
    font-size: clamp(30px, 2.6vw, 38px) !important;
    line-height: 1.18 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard .status,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .status {
    min-height: 28px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: #0a6d67 !important;
    background: rgba(230, 247, 242, .95) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendCard .productContent p,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard p {
    color: rgba(32, 49, 46, .74) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats strong,
  html body:has(.appShell.view-market) .appShell.view-market .productStats b {
    font-size: 17px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats small {
    font-size: 13px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
    min-height: 356px !important;
    padding: 38px 42px !important;
    align-items: center !important;
    column-gap: 30px !important;
    row-gap: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner::after {
    right: 112px !important;
    top: 58px !important;
    width: 108px !important;
    height: 124px !important;
    font-size: 46px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerCopy h2 {
    font-size: clamp(32px, 2.8vw, 42px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerCopy > p:last-of-type {
    max-width: 760px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 18px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard {
    min-height: 78px !important;
    padding: 13px 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions {
    grid-column: 2 !important;
    align-self: end !important;
    width: 205px !important;
    margin-top: 104px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketTravelerCard,
  html body:has(.appShell.view-market) .appShell.view-market .matchCardSimple {
    box-shadow: 0 14px 34px rgba(18, 48, 43, .06) !important;
  }
}

@media (max-width: 900px) {
  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner {
    min-height: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productStats strong,
  html body:has(.appShell.view-market) .appShell.view-market .productStats b {
    font-size: 16px !important;
  }
}

/* Reference alignment: the instant platform band should read like a premium
   travel-tech feature banner with route artwork, not a generic action panel. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    min-height: 242px !important;
    padding: 38px 44px !important;
    display: grid !important;
    grid-template-columns: minmax(230px, .58fr) minmax(660px, 1.26fr) minmax(250px, .5fr) !important;
    gap: 24px !important;
    align-items: center !important;
    border: 1px solid rgba(20, 48, 43, .065) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 86% 46%, rgba(206, 232, 226, .42), transparent 230px),
      linear-gradient(112deg, rgba(255,255,255,.98), rgba(255,255,255,.94) 58%, rgba(245,250,248,.94)) !important;
    box-shadow:
      0 22px 58px rgba(21, 38, 35, .07),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformCopy {
    position: relative !important;
    z-index: 2 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformCopy h2 {
    font-size: clamp(31px, 2.5vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformCopy p {
    max-width: 320px !important;
    margin-top: 12px !important;
    color: rgba(38, 54, 51, .62) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitRow {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 18px !important;
    align-items: center !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 7px 13px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitIcon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 118, 110, .08) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,250,.92)) !important;
    color: #08756f !important;
    box-shadow:
      0 16px 30px rgba(18, 48, 43, .08),
      inset 0 0 0 8px rgba(237, 249, 246, .9) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitIcon .glyph {
    --icon-size: 23px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem strong {
    color: #1b2927 !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitItem small {
    grid-column: 2 !important;
    max-width: 120px !important;
    color: rgba(44, 61, 57, .6) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual {
    display: block !important;
    position: absolute !important;
    right: 30px !important;
    bottom: -20px !important;
    width: 318px !important;
    height: 208px !important;
    opacity: .78 !important;
    border: 1px solid rgba(18, 48, 43, .06) !important;
    border-radius: 34px 34px 18px 18px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,0) 38%),
      radial-gradient(circle at 72% 30%, rgba(126, 216, 207, .34), transparent 82px),
      linear-gradient(18deg, rgba(236,242,239,.72), rgba(255,255,255,.48)),
      repeating-linear-gradient(0deg, rgba(72, 122, 114, .12) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, rgba(72, 122, 114, .1) 0 1px, transparent 1px 24px) !important;
    box-shadow: 0 18px 45px rgba(19, 49, 45, .08) !important;
    transform: rotate(-13deg) translateY(6px) !important;
    transform-origin: 50% 100% !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual::before {
    content: "" !important;
    position: absolute !important;
    inset: 13px 16px auto !important;
    height: 20px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(90deg, rgba(27, 47, 43, .26), rgba(27, 47, 43, .1) 38%, transparent 38%),
      rgba(255,255,255,.62) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background:
      linear-gradient(125deg, transparent 0 48%, rgba(15,118,110,.08) 49% 52%, transparent 53%),
      linear-gradient(32deg, transparent 0 58%, rgba(15,118,110,.06) 59% 62%, transparent 63%) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .routeLine {
    z-index: 2 !important;
    left: 108px !important;
    right: 90px !important;
    top: 96px !important;
    height: 84px !important;
    border: 0 !important;
    border-left: 5px solid #33beb5 !important;
    border-bottom: 5px solid #33beb5 !important;
    border-radius: 0 0 0 42px !important;
    background: transparent !important;
    transform: rotate(0deg) !important;
    box-shadow: 0 8px 16px rgba(15,118,110,.16) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .routePin {
    z-index: 3 !important;
    width: 38px !important;
    height: 38px !important;
    border: 7px solid rgba(232, 250, 247, .96) !important;
    background: #35bdb5 !important;
    box-shadow: 0 14px 24px rgba(13, 139, 132, .24) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .routePin::after {
    content: "" !important;
    position: absolute !important;
    inset: 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .routePin.start {
    left: 184px !important;
    top: 58px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .routePin.end {
    right: 78px !important;
    top: 142px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformActions {
    display: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    grid-template-columns: minmax(210px, .62fr) minmax(0, 1fr) !important;
    padding-right: 34px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformVisual {
    opacity: .22 !important;
    right: -40px !important;
  }
}

@media (max-width: 900px) {
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    min-height: 0 !important;
    padding: 28px !important;
    border-radius: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantBenefitIcon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
  }
}

/* Popular products carousel: show enough cards to communicate horizontal
   browsing, with product-first cards like the reference mockup. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase {
    padding: 42px 46px 44px !important;
    overflow: hidden !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase .sectionHead {
    align-items: start !important;
    margin-bottom: 28px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productCarouselActions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productCarouselActions .sectionLinkMuted {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(25, 64, 58, .08) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
    color: #0d6f68 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(18,48,43,.05) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productCarouselActions button {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(25, 64, 58, .1) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    color: #0d7c75 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: 0 12px 28px rgba(18,48,43,.06) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .productCarouselActions button:hover {
    transform: translateY(-2px) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 34px rgba(18,48,43,.09) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 2px 56px !important;
    padding: 2px 72px 8px 0 !important;
    margin-right: -72px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack::-webkit-scrollbar {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack::after {
    content: "" !important;
    flex: 0 0 28px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard {
    flex: 0 0 clamp(286px, 24vw, 334px) !important;
    min-height: 390px !important;
    scroll-snap-align: start !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 38px rgba(21, 38, 35, .075) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard.rank-1 {
    flex-basis: clamp(300px, 25vw, 350px) !important;
    border-color: rgba(240, 67, 75, .18) !important;
    box-shadow: 0 22px 46px rgba(21, 38, 35, .09) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .wishVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard.rank-1 .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard.rank-1 .wishVisual {
    height: 205px !important;
    min-height: 205px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productContent {
    min-height: 184px !important;
    padding: 20px 24px 22px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard h3,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard.rank-1 h3 {
    margin-top: 4px !important;
    color: #162320 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productContent p {
    margin-top: 2px !important;
    min-height: 24px !important;
    font-size: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .productStats {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: auto !important;
    padding-top: 18px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .productStats strong {
    color: #101918 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .productStats small {
    color: rgba(40, 57, 53, .58) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .rankBadge,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .wishRankBadge {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 22px rgba(20, 48, 43, .16) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard.rank-1 :where(.rankBadge,.wishRankBadge) {
    background: linear-gradient(180deg, #ff5a62, #ef3340) !important;
    color: #ffffff !important;
  }
}

@media (max-width: 900px) {
  html body:has(.appShell.view-market) .appShell.view-market .productCarouselActions {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack {
    display: flex !important;
    overflow-x: auto !important;
    gap: 16px !important;
    padding: 0 18px 8px 0 !important;
    margin-right: -18px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack::-webkit-scrollbar {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard {
    flex: 0 0 min(78vw, 320px) !important;
    scroll-snap-align: start !important;
  }
}

/* Mockup convergence pass: align the home page with the latest reference image.
   This deliberately keeps the same React structure and only sharpens visual
   hierarchy, section rhythm, card sizing, and the marketplace carousel feel. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market {
    background:
      radial-gradient(circle at 50% 14%, rgba(225, 246, 241, .7), transparent 520px),
      linear-gradient(180deg, #fbfdfc 0%, #f6fbf9 58%, #ffffff 100%) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace {
    margin-top: -54px !important;
    padding-inline: max(calc((100vw - 1344px) / 2), 48px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel {
    max-width: 1344px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar {
    min-height: 72px !important;
    padding-inline: max(calc((100vw - 1344px) / 2), 48px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.58) 70%, rgba(255,255,255,0)) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs {
    gap: 26px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .tabs button {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 {
    min-height: 760px !important;
    height: 760px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 35%, rgba(255,255,255,.2) 58%, rgba(255,255,255,.03) 100%),
      url("./images/bondmai-hero-airport-couple-v2.png") center center / cover no-repeat !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    width: min(760px, 74vw) !important;
    padding-top: 116px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEn {
    font-size: clamp(58px, 5.4vw, 82px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLead {
    max-width: 520px !important;
    margin-top: 26px !important;
    color: rgba(30,43,40,.72) !important;
    font-size: 20px !important;
    line-height: 1.72 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
    width: min(820px, calc(100vw - 116px)) !important;
    min-height: 150px !important;
    margin-top: 34px !important;
    padding: 22px !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 54px rgba(18,48,43,.11) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSpotlightGrid {
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) 170px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    min-height: 72px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: max(calc((100vw - 1344px) / 2), 48px) !important;
    top: 120px !important;
    width: 310px !important;
    height: 470px !important;
    pointer-events: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroImageCard {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
    position: absolute !important;
    inset: 56px 0 auto auto !important;
    left: auto !important;
    width: 264px !important;
    min-height: 172px !important;
    padding: 24px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 20px 48px rgba(18,48,43,.16) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch::before {
    content: none !important;
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchTop {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchOrb {
    width: 36px !important;
    height: 36px !important;
    background: #dff5ef !important;
    color: #08756f !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchTop small {
    color: rgba(26,43,39,.6) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchTop strong {
    margin-top: 3px !important;
    color: #1a2926 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchTop em {
    width: auto !important;
    height: auto !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eef8f5 !important;
    color: #08756f !important;
    font-size: 11px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchRoute {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 18px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #f4f8f6 !important;
    color: #253b37 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchRoute strong {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    color: #08756f !important;
    font-size: 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMatchActions {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow {
    display: none !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow span {
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow b {
    color: #08756f !important;
    font-size: 32px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 278px !important;
    width: 264px !important;
    display: grid !important;
    gap: 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats span {
    min-height: 74px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 42px rgba(18,48,43,.13) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulse {
    margin-top: 0 !important;
    padding: 42px 44px 40px !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 68px rgba(18,48,43,.075) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseHead {
    margin-bottom: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseHead h2 {
    font-size: 36px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .destinationCard {
    min-height: 244px !important;
    border-radius: 13px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .destinationText strong {
    font-size: 28px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .destinationText small {
    font-size: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .destinationStats {
    font-size: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 22px !important;
    min-height: 132px !important;
    margin-top: 28px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip > span {
    display: grid !important;
    align-content: center !important;
    min-height: 132px !important;
    padding: 24px 26px !important;
    border: 1px solid rgba(18,48,43,.075) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 14px 34px rgba(18,48,43,.06) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip small {
    color: rgba(30,45,41,.6) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip strong {
    margin-top: 7px !important;
    color: #172320 !important;
    font-size: 32px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip em {
    margin-top: 5px !important;
    color: #0d7c75 !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 700 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseGrid {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip {
    margin-top: 64px !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace > .panel > .trendBoard.productShowcase {
    margin-top: 64px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase {
    padding: 34px 36px 38px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.92) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard {
    flex-basis: clamp(270px, 23vw, 316px) !important;
    min-height: 430px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .wishVisual {
    height: 220px !important;
    min-height: 220px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productContent {
    min-height: 206px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip {
    margin-top: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard {
    min-height: 252px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-radius: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .featuredWishVisual {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .featuredWishBody {
    padding: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner {
    margin-top: 72px !important;
    min-height: 340px !important;
    border-radius: 18px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
    margin-top: 64px !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail,
  html body:has(.appShell.view-market) .appShell.view-market .liveStatsStrip,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishScroller {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mockup convergence pass 2: detail polish for the reference screenshot. */
@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    padding-top: 92px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
    margin-top: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
    top: 98px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark {
    position: relative !important;
    overflow: hidden !important;
    color: transparent !important;
    background: rgba(230, 248, 244, .92) !important;
    box-shadow: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark::before,
  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    background: #0b7f78 !important;
    transform-origin: center !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark::before {
    width: 22px !important;
    height: 8px !important;
    border-radius: 999px 999px 4px 4px !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .logoMark::after {
    width: 26px !important;
    height: 7px !important;
    border-radius: 999px 999px 4px 4px !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    clip-path: polygon(0 50%, 40% 0, 60% 0, 100% 50%, 60% 100%, 40% 100%) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brand small {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brand {
    min-width: 196px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar .brandName {
    font-size: 24px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
    padding-top: 58px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes {
    position: absolute !important;
    left: 28px !important;
    top: 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSpotlightGrid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 180px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField {
    border-right: 1px solid rgba(18,48,43,.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField:first-child {
    border-radius: 14px 0 0 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    border-radius: 14px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseHead .eyebrow {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulseHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel h2,
  html body:has(.appShell.view-market) .appShell.view-market .marketTravelerSection .sectionHead h2,
  html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection .sectionHead h2 {
    font-size: 34px !important;
    letter-spacing: -.035em !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productCardAction {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 16px !important;
    border: 1px solid rgba(11,127,120,.34) !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #0b7f78 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productCardAction:hover {
    border-color: #0b7f78 !important;
    background: rgba(11,127,120,.08) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .productStats {
    padding-top: 12px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard .requestActions {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .featuredWishCard h3 {
    font-size: 20px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner {
    grid-template-columns: minmax(0, .95fr) minmax(520px, 1.1fr) 156px !important;
    min-height: 330px !important;
    padding: 42px 46px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner::after {
    right: 58px !important;
    top: 74px !important;
    width: 124px !important;
    height: 142px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerCopy {
    max-width: 460px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionGrid {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    align-self: center !important;
    margin-top: 0 !important;
    padding: 18px 20px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow: inset 0 0 0 1px rgba(18,48,43,.06) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard {
    position: relative !important;
    min-height: 122px !important;
    padding: 18px 14px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard:not(:last-child)::after {
    content: "›" !important;
    position: absolute !important;
    right: -8px !important;
    top: 28px !important;
    color: rgba(11,127,120,.58) !important;
    font-size: 26px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard::before {
    content: "" !important;
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto 12px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(11,127,120,.18) 0 18px, transparent 19px),
      rgba(232,248,244,.92) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: end !important;
    display: flex !important;
    width: auto !important;
    gap: 14px !important;
    margin-top: 22px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trustBannerActions :where(button,.primaryButton,.textButton) {
    width: auto !important;
    min-width: 144px !important;
  }
}

@media (max-width: 900px) {
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes {
    padding: 2px 4px 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroTitleEn {
    font-size: clamp(44px, 12vw, 52px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSpotlightGrid {
    grid-template-columns: 1fr !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchField {
    min-height: 68px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit {
    min-height: 58px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard {
    flex: 0 0 min(82vw, 330px) !important;
    width: min(82vw, 330px) !important;
    min-height: 420px !important;
  }
}

/* BondMai visual asset convergence: destination and product photography. */
html body:has(.appShell.view-market) .appShell.view-market .destinationCard::before {
  background-image: url("./images/bondmai-destinations-v4.png") !important;
  background-size: 400% 100% !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-tokyo::before {
  background-position: 0% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-seoul::before {
  background-position: 33.333% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-america::before {
  background-position: 66.666% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-europe::before,
html body:has(.appShell.view-market) .appShell.view-market .destinationCard.visual-tropical::before {
  background-position: 100% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual {
  background-image: url("./images/bondmai-products-v4.png") !important;
  background-size: 600% 100% !important;
  background-repeat: no-repeat !important;
  background-color: #f8f6f0 !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-0 {
  background-position: 0% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-1 {
  background-position: 20% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-2 {
  background-position: 40% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-3 {
  background-position: 60% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-4 {
  background-position: 80% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual-5 {
  background-position: 100% 50% !important;
}

html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .wishVisualPlaceholder {
  opacity: 0 !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 24px;
  min-height: 44px;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes button {
  position: relative;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(26,43,39,.62);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes button.active {
  color: #0b7f78;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: #0b7f78;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchModes button:focus-visible {
  outline: 3px solid rgba(11,127,120,.28);
  outline-offset: 3px;
}

@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market .trustProofCard:not(:last-child)::after {
    content: "\203A" !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard {
    flex-basis: 286px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack.count-3 {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack.count-3::after {
    display: none !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack.count-3 .trendCard {
    flex: 1 1 calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .productVisual,
  html body:has(.appShell.view-market) .appShell.view-market .trendGrid.productCarouselTrack .trendCard .wishVisual {
    min-height: 210px !important;
  }
}

/* Professional homepage pass: widescreen alignment and premium CTA finish. */
@media (min-width: 1280px) {
  html body:has(.appShell.view-market) .appShell.view-market {
    --bm-home-wide-gutter: clamp(72px, 6.2vw, 120px);
    --bm-home-section-width: min(1720px, calc(100vw - (var(--bm-home-wide-gutter) * 2)));
  }

  html body:has(.appShell.view-market) .appShell.view-market > .topbar {
    padding-inline: var(--bm-home-wide-gutter) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    left: var(--bm-home-wide-gutter) !important;
    max-width: 940px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchPanel {
    width: min(920px, calc(100vw - (var(--bm-home-wide-gutter) * 2))) !important;
    max-width: min(920px, calc(100vw - (var(--bm-home-wide-gutter) * 2))) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroLuxuryVisual {
    right: var(--bm-home-wide-gutter) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .workspace {
    width: var(--bm-home-section-width) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .marketPulse,
  html body:has(.appShell.view-market) .appShell.view-market .instantPlatformStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trendBoard.productShowcase,
  html body:has(.appShell.view-market) .appShell.view-market .featuredWishStrip,
  html body:has(.appShell.view-market) .appShell.view-market .trustedMembersPanel,
  html body:has(.appShell.view-market) .appShell.view-market .trustProtectionBanner,
  html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid,
  html body:has(.appShell.view-market) .appShell.view-market .siteFooter {
    width: 100% !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market .pulseCountryRail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit,
html body:has(.appShell.view-market) .appShell.view-market .primaryButton,
html body:has(.appShell.view-market) .appShell.view-market .primaryNavCta {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34%),
    linear-gradient(155deg, #0f8f87 0%, #08776f 48%, #075f5b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 16px 30px rgba(8,119,111,.24) !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit::before,
html body:has(.appShell.view-market) .appShell.view-market .primaryButton::before,
html body:has(.appShell.view-market) .appShell.view-market .primaryNavCta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.34) 38%, transparent 58%) !important;
  transform: translateX(-120%) !important;
  transition: transform .65s cubic-bezier(.2,.8,.2,1) !important;
  pointer-events: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroSearchSubmit:hover::before,
html body:has(.appShell.view-market) .appShell.view-market .primaryButton:hover::before,
html body:has(.appShell.view-market) .appShell.view-market .primaryNavCta:hover::before {
  transform: translateX(120%) !important;
}

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch {
    backdrop-filter: blur(18px) saturate(1.18) !important;
    background: rgba(255,255,255,.82) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 22px 54px rgba(22,47,43,.14) !important;
    width: 320px !important;
  }

@media (min-width: 901px) {
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch strong,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroGlassMatch b {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow span {
    min-width: 0 !important;
    text-align: center !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow b {
    font-size: clamp(24px, 1.45vw, 28px) !important;
    letter-spacing: -.035em !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMetricRow span:nth-child(3) b {
    font-size: clamp(18px, 1.05vw, 21px) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats {
    width: 350px !important;
    min-height: 108px !important;
    padding: 18px !important;
    gap: 12px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    box-shadow: 0 18px 44px rgba(22,47,43,.12) !important;
    backdrop-filter: blur(16px) saturate(1.16) !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats span {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.72) !important;
    text-align: center !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats strong,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats b {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(18px, 1.15vw, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
    color: #08776f !important;
  }

  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats small,
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroMiniStats em {
    display: block !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: rgba(26,43,39,.58) !important;
  }
}

@media (min-width: 1280px) {
  html body:has(.appShell.view-market) .appShell.view-market > .hero.heroLuxuryV5 .heroCopy {
    left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: translateX(clamp(-72px, -3.7vw, -48px)) !important;
    box-sizing: border-box !important;
  }
}

/* Wish-first marketplace: AI recommendation UI has been retired. */
html body .aiAssistDock,
html body:has(.appShell.view-market) .appShell.view-market .aiRecommendationSection,
html body:has(.appShell.view-market) .appShell.view-market .aiMatchSpotlight {
  display: none !important;
}

html body:has(.appShell.view-market) .appShell.view-market .viewGrid.marketplaceRecommendationGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
}

html body:has(.appShell.view-market) .appShell.view-market .marketTravelerSection {
  width: 100% !important;
  max-width: none !important;
}