/* ============================================================================
   HimLocal — Web v2 styles
   Desktop landing + shop + profile + cart + detail sheet
   Layers on top of colors_and_type.css
   ============================================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; }
body { background: var(--bg-page); font-family: var(--font-body); color: var(--fg-1); }

/* ─── Top app bar ─────────────────────────────────────────── */
.w2-nav {
  position: sticky; top: 0; z-index: 30;
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 28px;
  background: rgba(252, 250, 246, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-1);
}
.w2-nav--dark {
  background: rgba(14, 26, 36, .35);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: white;
}
.w2-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.w2-nav__mark { width: 32px; height: 32px; object-fit: contain; display: block; }
.w2-nav__wm {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -.02em; color: var(--slate-700);
}
.w2-nav__wm em { font-style: italic; font-weight: 400; }
.w2-nav--dark .w2-nav__wm { color: white; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.w2-nav__links { display: flex; gap: 4px; justify-content: center; }
.w2-nav__link {
  background: 0; border: 0;
  padding: 8px 14px; border-radius: 999px;
  font: 600 12px var(--font-body); letter-spacing: .03em;
  color: var(--fg-2);
  cursor: pointer;
}
.w2-nav__link:hover { background: var(--bone-100); color: var(--slate-700); }
.w2-nav__link.is-on { color: var(--leaf-700); background: var(--leaf-100); }
.w2-nav--dark .w2-nav__link { color: rgba(255,255,255,.85); }
.w2-nav--dark .w2-nav__link:hover { background: rgba(255,255,255,.12); color: white; }
.w2-nav--dark .w2-nav__link.is-on { color: white; background: rgba(255,255,255,.18); }
.w2-nav__right { display: flex; align-items: center; gap: 8px; }
.w2-nav__icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bone-100); border: 1px solid var(--border-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--slate-700);
}
.w2-nav__icon-btn:hover { background: var(--bone-200); }
.w2-nav--dark .w2-nav__icon-btn { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); color: white; backdrop-filter: blur(8px); }
.w2-nav--dark .w2-nav__icon-btn:hover { background: rgba(255,255,255,.28); }
.w2-nav__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--cta-book); color: white;
  font: 700 10px var(--font-body); letter-spacing: 0;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-page);
}
.w2-nav__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 1.5px solid var(--border-2);
  cursor: pointer;
}
.w2-nav--dark .w2-nav__avatar { border-color: rgba(255,255,255,.6); }

/* ─── HOME / LANDING ─────────────────────────────────────── */
.w2-home {
  background: var(--bg-page);
  min-height: 100vh;
}

/* Hero */
.w2-hero {
  position: relative;
  height: 90vh;
  min-height: 680px;
  max-height: 880px;
  overflow: hidden;
  background: var(--slate-900);
  margin-top: -64px; /* sit under transparent nav */
}
.w2-hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1600ms var(--ease-out), transform 9000ms linear;
}
.w2-hero__photo.is-on {
  opacity: 1;
  transform: scale(1.0);
}
.w2-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,36,.55) 0%, rgba(14,26,36,.10) 22%, rgba(14,26,36,.18) 60%, rgba(14,26,36,.88) 100%);
}
.w2-hero__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: 150px;
  padding: 0 max(48px, 6vw);
  color: white;
  z-index: 4;
  max-width: 1320px;
  margin: 0 auto;
}
.w2-hero__eyebrow {
  font: 600 11px var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  opacity: .9; margin-bottom: 16px;
  display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
}
.w2-hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(56px, 7.5vw, 116px);
  line-height: 1.0;
  letter-spacing: -.03em;
  margin: 0; max-width: 900px;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.w2-hero__title em { font-style: italic; font-weight: 400; }
.w2-hero__caption {
  margin-top: 18px;
  font: 400 17px var(--font-body); line-height: 1.55;
  color: rgba(255,255,255,.9);
  max-width: 540px;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.w2-hero__dots {
  position: absolute; left: max(48px, 6vw); bottom: 110px; z-index: 4;
  display: flex; gap: 8px;
}
.w2-hero__dot { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); transition: background 220ms; }
.w2-hero__dot.is-on { background: rgba(255,255,255,.95); }

/* Search strip (lifted below hero, above tiles) */
.w2-search-strip {
  position: relative;
  z-index: 6;
  max-width: 1320px;
  margin: -42px auto 0;
  padding: 0 max(28px, 4vw);
}
.w2-hero__dots {
  position: absolute; left: max(48px, 6vw); bottom: 100px; z-index: 4;
  display: flex; gap: 8px;
}
.w2-search {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14,26,36,.32), 0 4px 12px rgba(14,26,36,.16);
  border: 1px solid rgba(255,255,255,.4);
  align-items: center;
  height: 78px;
  padding: 8px 8px 8px 28px;
  gap: 0;
  max-width: 880px;
}
.w2-search__field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 18px;
  border-right: 1px solid var(--border-1);
  cursor: pointer;
}
.w2-search__field:first-child { padding-left: 0; }
.w2-search__field:nth-last-child(2) { border-right: 0; }
.w2-search__lbl { font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-700); }
.w2-search__val { font: 500 14px var(--font-body); color: var(--fg-2); }
.w2-search__val--strong { font: 600 14px var(--font-body); color: var(--slate-700); }
.w2-search__cta {
  width: 62px; height: 62px;
  border-radius: 14px;
  background: var(--grad-cta-itinerary);
  border: 0; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(48,92,222,.4);
  transition: transform 200ms;
}
.w2-search__cta:hover { transform: scale(1.04); }

/* Body sections */
.w2-section {
  max-width: 1320px; margin: 0 auto;
  padding: 80px max(28px, 4vw) 40px;
}
.w2-section--tight { padding-top: 56px; padding-bottom: 28px; }
.w2-section--dark { background: var(--slate-900); color: var(--bone-100); }

.w2-sech {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 28px;
}
.w2-sech__t {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -.024em;
  color: var(--slate-700);
  line-height: 1.05;
  margin: 0;
}
.w2-sech__t em { font-style: italic; font-weight: 400; }
.w2-sech--dark .w2-sech__t { color: white; }
.w2-sech__sub {
  font-family: var(--font-display);
  font-style: italic; font-size: 17px;
  color: var(--fg-2);
  max-width: 460px;
  margin-top: 8px;
}
.w2-sech--dark .w2-sech__sub { color: rgba(255,255,255,.7); }
.w2-sech__more {
  font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2);
  background: 0; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-2);
}
.w2-sech__more:hover { background: var(--bone-100); color: var(--slate-700); }
.w2-sech--dark .w2-sech__more { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); }
.w2-sech--dark .w2-sech__more:hover { background: rgba(255,255,255,.12); color: white; }

/* Tiles row below the search strip */
.w2-tiles {
  position: relative;
  z-index: 5;
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 0 max(28px, 4vw);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 14px;
}
.w2-tile {
  position: relative;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 0; padding: 0;
  display: block;
  text-align: left;
  background: var(--slate-800);
  box-shadow: 0 10px 28px rgba(14,26,36,.22), 0 2px 8px rgba(14,26,36,.10);
  transition: transform 320ms var(--ease-out);
}
.w2-tile:hover { transform: translateY(-4px); }
.w2-tile__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 6000ms var(--ease-out);
}
.w2-tile:hover .w2-tile__bg { transform: scale(1.06); }
.w2-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,26,36,.85) 100%); }
.w2-tile__chip {
  position: absolute; top: 14px; left: 16px;
  font: 600 9.5px var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  color: white; border: 1px solid rgba(255,255,255,.25);
}
.w2-tile__title {
  position: absolute; left: 18px; right: 18px; bottom: 38px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px;
  color: white;
  letter-spacing: -.02em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  line-height: 1.05;
}
.w2-tile__title em { font-style: italic; font-weight: 400; }
.w2-tile__sub {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  font: 400 13px var(--font-body); color: rgba(255,255,255,.8);
}
.w2-tile--external::after {
  content: '↗';
  position: absolute; top: 14px; right: 18px;
  color: white; font: 500 18px var(--font-body);
  opacity: .85;
}

/* Continue trip banner */
.w2-continue {
  background: linear-gradient(105deg, var(--bg-paper) 0%, var(--leaf-100) 100%);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  cursor: pointer;
}
.w2-continue__badge {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--grad-logo);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(43,124,4,.25);
}
.w2-continue__body { min-width: 0; }
.w2-continue__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-continue__t {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -.018em; color: var(--slate-700);
  margin-top: 4px;
}
.w2-continue__t em { font-style: italic; font-weight: 400; }
.w2-continue__m { font: 400 13px var(--font-mono); color: var(--fg-3); margin-top: 6px; letter-spacing: .03em; }
.w2-continue__cta {
  padding: 12px 22px; height: 46px;
  border-radius: 999px;
  background: var(--slate-700); color: white;
  border: 0; cursor: pointer;
  font: 600 13px var(--font-body);
  letter-spacing: .02em;
}

/* Creator row */
.w2-crow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.w2-ccard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 380px;
  background: var(--slate-800);
  border: 0; padding: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  box-shadow: var(--shadow-2);
}
.w2-ccard__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 8000ms var(--ease-out); }
.w2-ccard:hover .w2-ccard__bg { transform: scale(1.07); }
.w2-ccard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.25) 0%, transparent 40%, rgba(14,26,36,.88) 100%); }
.w2-ccard__top { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; }
.w2-ccard__region {
  font: 600 9.5px var(--font-body); letter-spacing: .2em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  color: white; border: 1px solid rgba(255,255,255,.22);
}
.w2-ccard__days { font: 600 10px var(--font-mono); letter-spacing: .1em; color: white; }
.w2-ccard__body { position: absolute; left: 18px; right: 18px; bottom: 18px; color: white; }
.w2-ccard__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 500; font-style: italic;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.w2-ccard__by { font: 400 13px var(--font-body); opacity: .8; margin-top: 6px; }

/* Adventure row (3 across) */
.w2-adv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.w2-adv {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 240px;
  cursor: pointer;
  border: 0; padding: 0;
  background: var(--slate-800);
}
.w2-adv__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 8000ms var(--ease-out); }
.w2-adv:hover .w2-adv__bg { transform: scale(1.05); }
.w2-adv__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,26,36,.85) 100%); }
.w2-adv__grade {
  position: absolute; top: 16px; left: 16px;
  font: 700 11px var(--font-mono); letter-spacing: .14em;
  padding: 5px 10px; border-radius: 4px;
  background: rgba(0,0,0,.55); color: white;
}
.w2-adv__meta {
  position: absolute; top: 16px; right: 16px;
  font: 500 11px var(--font-mono); color: rgba(255,255,255,.85);
  letter-spacing: .08em;
}
.w2-adv__name {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  color: white; font: 600 17px var(--font-body); letter-spacing: -.005em;
  line-height: 1.25;
}

/* Quick-shop row (5 across) */
.w2-qshop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.w2-qprod {
  background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  text-align: left;
  padding: 0; display: block;
}
.w2-qprod:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.w2-qprod__img { width: 100%; aspect-ratio: 1; background-size: cover; background-position: center; }
.w2-qprod__body { padding: 12px 14px 14px; }
.w2-qprod__cat { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.w2-qprod__name { font: 500 14px var(--font-body); color: var(--slate-700); margin-top: 4px; line-height: 1.35; }
.w2-qprod__price { font: 500 13px var(--font-mono); color: var(--slate-700); margin-top: 6px; letter-spacing: .02em; }

/* Footer */
.w2-footer {
  margin-top: 80px;
  background: var(--slate-900);
  color: rgba(255,255,255,.7);
  padding: 64px max(28px, 4vw) 40px;
}
.w2-footer__inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.w2-footer__brand { font-family: var(--font-display); font-size: 32px; color: white; letter-spacing: -.02em; }
.w2-footer__brand em { font-style: italic; font-weight: 400; }
.w2-footer__tagline { font: 400 13px var(--font-body); margin-top: 12px; line-height: 1.55; max-width: 280px; opacity: .8; }
.w2-footer h6 { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: white; margin: 0 0 16px; }
.w2-footer ul { list-style: none; padding: 0; margin: 0; }
.w2-footer li { font: 400 13px var(--font-body); margin-bottom: 8px; opacity: .8; cursor: pointer; }
.w2-footer li:hover { opacity: 1; color: white; }
.w2-footer__bottom { max-width: 1320px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); font: 400 12px var(--font-mono); letter-spacing: .04em; opacity: .55; display: flex; justify-content: space-between; }

/* ─── EXPLORE V2 ─────────────────────────────────────────── */
.w2-explore {
  display: grid;
  grid-template-columns: 420px 1fr;
  height: calc(100vh - 64px);
  background: var(--bg-page);
}
.w2-ex-panel {
  background: var(--bg-paper);
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.w2-ex-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 14px 16px 0;
  gap: 4px;
  border-bottom: 1px solid var(--border-1);
}
.w2-ex-tab {
  background: 0; border: 0;
  padding: 12px 0;
  font: 600 12.5px var(--font-body); letter-spacing: .02em;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  border-radius: 0;
}
.w2-ex-tab.is-on { color: var(--slate-700); }
.w2-ex-tab.is-on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--slate-700);
}
.w2-ex-tab__count { font-family: var(--font-mono); margin-left: 6px; color: var(--fg-3); }

.w2-ex-search {
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bone-100);
  border-radius: 999px;
  margin: 14px 16px 0;
  padding: 10px 16px;
}
.w2-ex-search input { border: 0; outline: 0; background: 0; flex: 1; font: 500 14px var(--font-body); color: var(--slate-700); }
.w2-ex-filters {
  display: flex; gap: 6px; padding: 12px 16px; overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-1);
}
.w2-ex-filters::-webkit-scrollbar { display: none; }
.w2-ex-filter {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px;
  background: 0; border: 1px solid var(--border-2);
  font: 600 11.5px var(--font-body); color: var(--slate-700);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.w2-ex-filter.is-on { background: var(--slate-700); color: var(--bone-100); border-color: var(--slate-700); }
.w2-ex-filter__dot { width: 7px; height: 7px; border-radius: 50%; }

.w2-ex-list { flex: 1; overflow-y: auto; }
.w2-ex-list::-webkit-scrollbar { width: 8px; }
.w2-ex-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.w2-poi-card {
  display: flex; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  background: var(--bg-paper);
  text-align: left; border: 0;
  width: 100%;
  transition: background 200ms;
}
.w2-poi-card:hover { background: var(--bone-100); }
.w2-poi-card.is-on { background: var(--leaf-100); }
.w2-poi-card__img { width: 92px; height: 92px; background-size: cover; background-position: center; border-radius: 8px; flex-shrink: 0; }
.w2-poi-card__body { flex: 1; min-width: 0; }
.w2-poi-card__kind { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.w2-poi-card__name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -.014em; color: var(--slate-700); margin: 4px 0; }
.w2-poi-card__short { font: 400 12.5px var(--font-body); color: var(--fg-2); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w2-poi-card__meta { font: 400 10.5px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; margin-top: 6px; }

/* Map panel (right) */
.w2-map { position: relative; overflow: hidden; }
.w2-map__svg { width: 100%; height: 100%; display: block; }
.w2-map__tools {
  position: absolute; top: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.w2-map__tool {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--border-1);
  cursor: pointer;
  font: 500 16px var(--font-body); color: var(--slate-700);
  box-shadow: var(--shadow-2);
}
.w2-map__attr {
  position: absolute; bottom: 14px; left: 16px;
  padding: 4px 10px; background: rgba(255,255,255,.85);
  border-radius: 4px;
  font: 400 10px var(--font-body); color: var(--fg-3); letter-spacing: .04em;
}
.w2-map__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: 0; border: 0; padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
}
.w2-map__pin-lbl {
  padding: 5px 11px;
  background: white;
  border-radius: 999px;
  font: 600 11.5px var(--font-body);
  color: var(--slate-700);
  border: 1.5px solid var(--slate-700);
  box-shadow: 0 3px 10px rgba(14,26,36,.20);
  white-space: nowrap;
}
.w2-map__pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(14,26,36,.3); }
.w2-map__pin.is-on .w2-map__pin-lbl {
  background: var(--slate-700); color: white;
  transform: scale(1.06);
}

/* Side-sheet detail */
.w2-detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,26,36,.5);
  z-index: 60;
  animation: w2-fade 220ms var(--ease-out);
}
@keyframes w2-fade { from {opacity:0;} to {opacity:1;} }
.w2-detail {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(720px, 56vw);
  background: var(--bg-paper);
  z-index: 61;
  box-shadow: -24px 0 60px rgba(14,26,36,.32);
  display: flex; flex-direction: column;
  animation: w2-detail-in 320ms var(--ease-out);
  overflow: hidden;
}
@keyframes w2-detail-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.w2-detail__close {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--border-1);
  cursor: pointer; font-size: 18px; color: var(--slate-700);
}
.w2-detail__hero {
  height: 320px;
  background-size: cover; background-position: center;
  position: relative;
  flex-shrink: 0;
}
.w2-detail__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.30) 0%, transparent 35%, rgba(14,26,36,.85) 100%); }
.w2-detail__hero-copy { position: absolute; left: 30px; right: 30px; bottom: 22px; color: white; }
.w2-detail__hero-kind { font: 600 11px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.w2-detail__hero-name { font-family: var(--font-display); font-size: 44px; font-weight: 500; font-style: italic; letter-spacing: -.02em; margin-top: 4px; line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.w2-detail__body { flex: 1; overflow-y: auto; padding: 28px 32px 8px; }
.w2-detail__body::-webkit-scrollbar { width: 8px; }
.w2-detail__body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.w2-detail__lede { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--fg-2); margin-bottom: 16px; }
.w2-detail__long { font: 400 14.5px var(--font-body); line-height: 1.7; color: var(--fg-1); margin-bottom: 22px; }
.w2-detail__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); margin-bottom: 22px; }
.w2-detail__stat-l { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.w2-detail__stat-v { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--slate-700); }
.w2-detail__eyebrow { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.w2-detail__book-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: white; border: 1px solid var(--border-1); border-radius: 8px; margin-bottom: 8px; }
.w2-detail__book-row.is-best { background: var(--leaf-100); border-color: var(--leaf-700); }
.w2-detail__book-src { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-detail__book-row.is-best .w2-detail__book-src { color: var(--leaf-800); }
.w2-detail__book-price { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--slate-700); }
.w2-detail__book-price span { font: 400 12px var(--font-body); color: var(--fg-3); }
.w2-detail__book-cta { height: 34px; padding: 0 16px; border-radius: 6px; font: 600 12px var(--font-body); cursor: pointer; border: 1px solid var(--border-2); background: white; color: var(--slate-700); }
.w2-detail__book-row.is-best .w2-detail__book-cta { background: var(--grad-cta-book); color: white; border: 0; }
.w2-detail__sticky {
  flex-shrink: 0;
  padding: 16px 32px 24px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-paper) 40%);
  display: flex; gap: 10px;
  border-top: 1px solid var(--border-1);
}
.w2-detail__cafe { padding: 18px 20px; background: var(--bone-100); border-radius: 10px; margin: 20px 0 0; }
.w2-detail__cafe-lbl { font: 400 12px var(--font-body); color: var(--fg-3); margin-bottom: 8px; }

/* ─── ITINERARY (left panel content) ───────────────────────── */
.w2-itin { padding: 24px 22px 40px; }
.w2-itin__title { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -.022em; color: var(--slate-700); }
.w2-itin__title em { font-style: italic; font-weight: 400; }
.w2-itin__meta { font: 500 13px var(--font-mono); color: var(--fg-3); margin-top: 6px; letter-spacing: .04em; }

/* ─── SHOP V2 ─────────────────────────────────────────────── */
.w2-shop { background: var(--bg-page); min-height: calc(100vh - 64px); }
.w2-shop__head {
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border-1);
  padding: 28px max(28px, 4vw) 0;
}
.w2-shop__head-inner { max-width: 1320px; margin: 0 auto; }
.w2-shop__head-row { display: flex; align-items: flex-end; gap: 32px; justify-content: space-between; margin-bottom: 22px; }
.w2-shop__title { font-family: var(--font-display); font-size: 48px; font-weight: 500; letter-spacing: -.028em; color: var(--slate-700); margin: 0; line-height: 1; }
.w2-shop__title em { font-style: italic; font-weight: 400; }
.w2-shop__subtitle { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--fg-2); margin-top: 12px; max-width: 460px; }
.w2-shop__search {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  border-radius: 999px;
  width: 380px;
  flex-shrink: 0;
}
.w2-shop__search input { flex: 1; border: 0; outline: 0; background: 0; font: 500 14px var(--font-body); color: var(--slate-700); }

.w2-shop__catbar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 18px;
  scrollbar-width: none;
}
.w2-shop__catbar::-webkit-scrollbar { display: none; }
.w2-shop__catchip {
  flex-shrink: 0;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-2);
  background: 0; color: var(--slate-700);
  font: 600 12.5px var(--font-body); cursor: pointer; letter-spacing: .02em;
}
.w2-shop__catchip.is-on { background: var(--slate-700); color: var(--bone-100); border-color: var(--slate-700); }

.w2-shop__body { max-width: 1320px; margin: 0 auto; padding: 32px max(28px, 4vw) 80px; }

.w2-shop-hero {
  position: relative;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 56px;
  background: var(--slate-800);
}
.w2-shop-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.w2-shop-hero__scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(14,26,36,.85) 0%, rgba(14,26,36,.30) 60%, transparent 100%); }
.w2-shop-hero__copy { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); color: white; max-width: 460px; }
.w2-shop-hero__lbl { font: 600 11px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.w2-shop-hero__title { font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.0; margin: 12px 0 14px; letter-spacing: -.025em; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.w2-shop-hero__title em { font-style: italic; font-weight: 400; }
.w2-shop-hero__body { font: 400 14px var(--font-body); line-height: 1.55; opacity: .9; margin-bottom: 18px; }
.w2-shop-hero__cta { padding: 12px 22px; border-radius: 999px; background: white; color: var(--slate-700); border: 0; font: 600 12.5px var(--font-body); letter-spacing: .02em; cursor: pointer; }

.w2-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px; }
.w2-cat {
  position: relative;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 0; padding: 0;
  background: var(--slate-800);
  cursor: pointer;
  text-align: left;
}
.w2-cat__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6000ms var(--ease-out); }
.w2-cat:hover .w2-cat__bg { transform: scale(1.05); }
.w2-cat__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(14,26,36,.88) 100%); }
.w2-cat__name { position: absolute; left: 20px; right: 20px; bottom: 48px; color: white; font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.015em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.w2-cat__sub { position: absolute; left: 20px; right: 20px; bottom: 18px; color: rgba(255,255,255,.8); font: 400 13px var(--font-body); }

.w2-vendor {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  margin-bottom: 56px;
}
.w2-vendor__story {
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.w2-vendor__img {
  height: 220px;
  background-size: cover; background-position: center;
  position: relative;
}
.w2-vendor__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(14,26,36,.65) 100%); }
.w2-vendor__img-copy { position: absolute; left: 18px; right: 18px; bottom: 14px; color: white; z-index: 2; }
.w2-vendor__loc { font: 600 9.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.w2-vendor__name { font-family: var(--font-display); font-size: 24px; font-weight: 500; font-style: italic; letter-spacing: -.014em; margin-top: 2px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.w2-vendor__body { padding: 20px 22px; flex: 1; }
.w2-vendor__copy { font: 400 14px var(--font-body); line-height: 1.65; color: var(--fg-2); }
.w2-vendor__meta { margin-top: 16px; font: 500 12px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; padding-top: 14px; border-top: 1px dashed var(--border-1); }

.w2-prods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.w2-prod {
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.w2-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.w2-prod__img { width: 100%; aspect-ratio: 1; background-size: cover; background-position: center; position: relative; }
.w2-prod__add {
  position: absolute; bottom: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  background: white; color: var(--slate-700);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 700 18px var(--font-body); line-height: 0;
  box-shadow: 0 2px 10px rgba(14,26,36,.22);
  transition: background 200ms, color 200ms;
}
.w2-prod__add:hover { background: var(--slate-700); color: white; }
.w2-prod__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.w2-prod__name { font: 500 14.5px var(--font-body); color: var(--slate-700); line-height: 1.3; }
.w2-prod__meta { font: 400 11px var(--font-mono); color: var(--fg-3); margin-top: 4px; letter-spacing: .03em; }
.w2-prod__price { font: 500 14px var(--font-mono); color: var(--slate-700); margin-top: auto; padding-top: 10px; letter-spacing: .02em; }

/* ─── CART (right slide drawer) ──────────────────────────── */
.w2-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px;
  background: var(--bg-paper);
  z-index: 71;
  box-shadow: -16px 0 50px rgba(14,26,36,.28);
  display: flex; flex-direction: column;
  animation: w2-detail-in 320ms var(--ease-out);
}
.w2-cart-drawer__head {
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
}
.w2-cart-drawer__title { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -.022em; color: var(--slate-700); }
.w2-cart-drawer__title em { font-style: italic; font-weight: 400; }
.w2-cart-drawer__count { font: 500 12px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.w2-cart-drawer__close { background: var(--bone-100); border: 1px solid var(--border-1); width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--slate-700); }
.w2-cart-drawer__body { flex: 1; overflow-y: auto; padding: 14px 28px 12px; }
.w2-cart-drawer__sum { padding: 18px 28px 24px; border-top: 1px solid var(--border-1); background: var(--bg-paper); }
.w2-cart-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.w2-cart-row__img { width: 78px; height: 78px; background-size: cover; background-position: center; border-radius: 8px; flex-shrink: 0; }
.w2-cart-row__body { flex: 1; min-width: 0; }
.w2-cart-row__name { font: 500 14px var(--font-body); color: var(--slate-700); }
.w2-cart-row__maker { font: 400 11px var(--font-mono); color: var(--fg-3); margin-top: 3px; letter-spacing: .03em; }
.w2-cart-row__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.w2-cart-row__price { font: 500 13px var(--font-mono); color: var(--slate-700); }
.w2-cart-row__qty { display: inline-flex; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; }
.w2-cart-row__qty button { width: 28px; height: 28px; background: 0; border: 0; cursor: pointer; font-size: 14px; color: var(--slate-700); }
.w2-cart-row__qty span { padding: 0 8px; font: 600 12px var(--font-mono); color: var(--slate-700); min-width: 18px; text-align: center; line-height: 28px; }
.w2-cart-line { display: flex; justify-content: space-between; padding: 4px 0; font: 400 13px var(--font-body); color: var(--fg-2); }
.w2-cart-line strong { color: var(--slate-700); font: 600 14px var(--font-body); }
.w2-cart-pay { margin-top: 12px; width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--grad-cta-book); color: white; font: 700 14px var(--font-body); letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 18px rgba(11,218,81,.28); }

/* ─── PROFILE (right slide drawer) ──────────────────────── */
.w2-profile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--bg-paper);
  z-index: 71;
  box-shadow: -16px 0 50px rgba(14,26,36,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: w2-detail-in 320ms var(--ease-out);
}
.w2-profile-drawer__head {
  background: linear-gradient(150deg, #1F3B57 0%, #0E1A24 100%);
  color: white;
  padding: 28px 28px 24px;
  position: relative;
}
.w2-profile-drawer__close { position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: white; font-size: 16px; cursor: pointer; }
.w2-profile-drawer__row { display: flex; gap: 14px; align-items: center; }
.w2-profile-drawer__avatar { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid rgba(255,255,255,.5); }
.w2-profile-drawer__name { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.w2-profile-drawer__handle { font: 400 12px var(--font-mono); color: rgba(255,255,255,.7); letter-spacing: .04em; }
.w2-profile-drawer__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 4px; margin-top: 18px; }
.w2-profile-drawer__stat { text-align: center; }
.w2-profile-drawer__statn { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.w2-profile-drawer__statl { font: 600 8.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 2px; }
.w2-profile-drawer__body { flex: 1; overflow-y: auto; padding: 18px 28px 28px; }
.w2-profile-drawer__sect-t { font-family: var(--font-display); font-size: 18px; font-weight: 500; font-style: italic; color: var(--slate-700); letter-spacing: -.014em; margin: 12px 0 8px; }
.w2-prow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-1); cursor: pointer; }
.w2-prow__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bone-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--slate-600); font-size: 16px; }
.w2-prow__body { flex: 1; min-width: 0; }
.w2-prow__name { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-prow__meta { font: 400 11.5px var(--font-mono); color: var(--fg-3); margin-top: 2px; letter-spacing: .03em; }
.w2-prow__amt { font: 600 13.5px var(--font-mono); color: var(--slate-700); }
.w2-prow__status { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 9px var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.w2-prow__status--ok { background: var(--leaf-100); color: var(--leaf-800); }
.w2-prow__status--ship { background: var(--sky-100); color: var(--sky-800); }
.w2-prow__status--gone { background: var(--bone-100); color: var(--fg-3); }

/* ─── Cafés external-redirect modal ──────────────────────── */
.w2-ext-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 80; display: flex; align-items: center; justify-content: center; animation: w2-fade 220ms; }
.w2-ext { background: var(--bg-paper); border-radius: 16px; padding: 28px 28px 24px; box-shadow: var(--shadow-4); width: min(500px, 90vw); }
.w2-ext__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.w2-ext__title { font-family: var(--font-display); font-size: 30px; font-weight: 500; font-style: italic; letter-spacing: -.018em; color: var(--slate-700); margin: 6px 0 12px; }
.w2-ext__body { font: 400 14px var(--font-body); color: var(--fg-2); line-height: 1.55; margin-bottom: 20px; }
.w2-ext__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.w2-ext__cafe { display: flex; gap: 14px; padding: 12px; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 10px; cursor: pointer; text-align: left; width: 100%; }
.w2-ext__cafe-img { width: 56px; height: 56px; background-size: cover; background-position: center; border-radius: 6px; flex-shrink: 0; }
.w2-ext__cafe-body { flex: 1; min-width: 0; }
.w2-ext__cafe-name { font: 600 14px var(--font-body); color: var(--slate-700); }
.w2-ext__cafe-loc { font: 400 11.5px var(--font-body); color: var(--fg-3); margin-top: 3px; }
.w2-ext__cafe-tag { font: 400 12px var(--font-body); color: var(--fg-2); font-style: italic; margin-top: 4px; }
.w2-ext__cafe-arrow { align-self: center; color: var(--lavender-700); font-size: 16px; }
.w2-ext__btn { width: 100%; padding: 12px; border-radius: 10px; background: var(--bone-100); border: 0; font: 600 13px var(--font-body); color: var(--slate-700); cursor: pointer; }

/* ─── Payment sheet (centered modal) ──────────────────── */
.w2-pay-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 90; display: flex; align-items: center; justify-content: center; animation: w2-fade 220ms; }
.w2-pay { background: var(--bg-paper); border-radius: 16px; padding: 28px 30px 26px; box-shadow: var(--shadow-4); width: min(520px, 90vw); }
.w2-pay__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.w2-pay__title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 6px 0 16px; }
.w2-pay__line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border-1); font: 400 13.5px var(--font-body); color: var(--fg-2); }
.w2-pay__total { display: flex; justify-content: space-between; padding: 12px 0 0; font: 600 15px var(--font-body); color: var(--slate-700); margin-bottom: 18px; }
.w2-pay__methods { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.w2-pay__method { height: 38px; border-radius: 6px; border: 1px solid var(--border-2); background: 0; cursor: pointer; font: 600 11.5px var(--font-body); color: var(--slate-700); }
.w2-pay__method.is-on { background: var(--leaf-100); border-color: var(--leaf-700); color: var(--leaf-800); }
.w2-pay__cta { width: 100%; height: 50px; border-radius: 10px; border: 0; background: var(--grad-cta-book); color: white; font: 700 14px var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(11,218,81,.28); }

/* Toast */
.w2-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 28px;
  z-index: 100;
  background: var(--slate-800); color: white;
  padding: 14px 20px;
  border-radius: 12px;
  font: 500 13.5px var(--font-body);
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 16px 40px rgba(14,26,36,.35);
  animation: w2-toast-in 280ms var(--ease-out);
  min-width: 280px;
  max-width: 480px;
}
@keyframes w2-toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.w2-toast--success { background: #1A4E02; }
.w2-toast__icon { width: 22px; height: 22px; border-radius: 50%; background: var(--himlocal-green); color: #0F2410; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-body); flex-shrink: 0; }

/* Route container */
.w2-route { animation: w2-fade 280ms var(--ease-out); }


/* ============================================================================
   v2.1 — Trip context, multi-itinerary, curated, create flow, booking gate
   ============================================================================ */

/* ─── Trip context bar (sticky below nav) ─────────────────── */
.w2-trip {
  position: sticky; top: 64px; z-index: 25;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border-1);
  padding: 10px max(28px, 4vw);
  display: flex; gap: 12px; align-items: center;
  font: 500 13px var(--font-body); color: var(--fg-2);
}
.w2-trip__lbl {
  font: 600 9.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3); padding-right: 8px;
}
.w2-trip__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  cursor: pointer; color: var(--slate-700);
  font: 500 13px var(--font-body);
}
.w2-trip__pill:hover { background: var(--bone-200); }
.w2-trip__pill strong { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-trip__pill svg { color: var(--fg-3); }
.w2-trip__plan {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font: 600 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  background: var(--lavender-100); color: var(--lavender-700);
  border: 1px solid rgba(123,111,203,.18);
  cursor: pointer;
}

/* ─── Trip context popover (date + guests) ───────────────── */
.w2-popover-back { position: fixed; inset: 0; z-index: 90; background: transparent; }
.w2-tcpop {
  position: fixed; z-index: 91;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  box-shadow: var(--shadow-4);
  padding: 16px;
  width: 380px;
  animation: w2-fade 200ms var(--ease-out);
}
.w2-tcpop__t { font: 600 10.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.w2-tcpop__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.w2-tcpop__field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--bone-100);
  border: 1px solid var(--border-1);
  border-radius: 8px;
}
.w2-tcpop__l { font: 600 9.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-tcpop__field input { background: 0; border: 0; outline: 0; font: 500 13px var(--font-body); color: var(--slate-700); width: 100%; }
.w2-tcpop__steps { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.w2-tcpop__step-l { font: 500 13px var(--font-body); color: var(--slate-700); }
.w2-tcpop__step-s { font: 400 11px var(--font-body); color: var(--fg-3); }
.w2-tcpop__step-ct { display: inline-flex; align-items: center; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; }
.w2-tcpop__step-ct button { width: 28px; height: 28px; background: 0; border: 0; cursor: pointer; font-size: 14px; color: var(--slate-700); }
.w2-tcpop__step-ct span { padding: 0 10px; font: 600 12px var(--font-mono); color: var(--slate-700); min-width: 22px; text-align: center; }
.w2-tcpop__cta { margin-top: 12px; width: 100%; height: 42px; border-radius: 10px; background: var(--slate-700); color: white; border: 0; font: 600 13px var(--font-body); cursor: pointer; }

/* ─── Inline desktop Explore (detail co-existing with map) ─── */
.w2-ex-shell { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 64px - 60px); background: var(--bg-page); transition: grid-template-columns 320ms var(--ease-out); }
.w2-ex-shell--detail { grid-template-columns: 540px 1fr; }
.w2-ex-shell--detail .w2-ex-panel { background: var(--bg-paper); border-right: 1px solid var(--border-1); }

/* The inline detail uses the side-sheet visual treatment but lives in the left column instead of overlay */
.w2-inline-detail { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.w2-inline-detail__top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-paper);
}
.w2-inline-detail__back {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bone-100); border: 1px solid var(--border-1);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--slate-700);
}
.w2-inline-detail__crumb { font: 500 12px var(--font-body); color: var(--fg-3); flex: 1; }
.w2-inline-detail__crumb strong { color: var(--slate-700); font: 600 12px var(--font-body); }
.w2-inline-detail__hero { height: clamp(140px, 22vh, 220px); background-size: cover; background-position: center; position: relative; flex-shrink: 0; }
.w2-inline-detail__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.20) 0%, transparent 35%, rgba(14,26,36,.82) 100%); }
.w2-inline-detail__hero-copy { position: absolute; left: 22px; right: 22px; bottom: 16px; color: white; }
.w2-inline-detail__hero-kind { font: 600 10px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.w2-inline-detail__hero-name { font-family: var(--font-display); font-size: 30px; font-weight: 500; font-style: italic; letter-spacing: -.018em; margin-top: 4px; line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.w2-inline-detail__body { flex: 1; overflow-y: auto; padding: 20px 24px 8px; }
.w2-inline-detail__body::-webkit-scrollbar { width: 8px; }
.w2-inline-detail__body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.w2-inline-detail__sticky { flex-shrink: 0; padding: 14px 22px 22px; border-top: 1px solid var(--border-1); background: var(--bg-paper); display: flex; gap: 8px; position: relative; }

/* ─── Map pin price chip variant ─────────────────────────── */
.w2-map__pin-lbl--price {
  background: white;
  color: var(--slate-700);
  font: 700 12px var(--font-mono);
  letter-spacing: 0;
  padding: 5px 10px;
}
.w2-map__pin--stay.is-on .w2-map__pin-lbl--price { background: var(--leaf-700); color: white; border-color: var(--leaf-700); }

/* ─── Add-to-itinerary popover ─────────────────────────── */
.w2-aip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: var(--shadow-4);
  z-index: 30;
  padding: 8px;
  animation: w2-aip-in 200ms var(--ease-out);
}
@keyframes w2-aip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.w2-aip__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-1); margin-bottom: 6px; }
.w2-aip__head-t { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-aip__head-sub { font: 400 12px var(--font-body); color: var(--fg-2); margin-top: 2px; }
.w2-aip__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; border-radius: 8px;
  width: 100%; background: 0; border: 0; text-align: left;
}
.w2-aip__row:hover { background: var(--bone-100); }
.w2-aip__row.is-on { background: var(--leaf-100); }
.w2-aip__row-img { width: 36px; height: 36px; background-size: cover; background-position: center; border-radius: 6px; flex-shrink: 0; }
.w2-aip__row-body { flex: 1; min-width: 0; }
.w2-aip__row-t { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-aip__row-m { font: 400 11px var(--font-mono); color: var(--fg-3); margin-top: 2px; letter-spacing: .03em; }
.w2-aip__row-r { font: 600 10.5px var(--font-body); color: var(--fg-3); letter-spacing: .14em; text-transform: uppercase; }
.w2-aip__row.is-on .w2-aip__row-r { color: var(--leaf-700); }
.w2-aip__divider { height: 1px; background: var(--border-1); margin: 6px 0; }
.w2-aip__newbtn { padding: 10px 12px; background: 0; border: 0; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; border-radius: 8px; font: 600 12.5px var(--font-body); color: var(--leaf-700); }
.w2-aip__newbtn:hover { background: var(--leaf-100); }
.w2-aip__newbtn span { width: 28px; height: 28px; border-radius: 50%; background: var(--leaf-100); display: flex; align-items: center; justify-content: center; font: 600 16px var(--font-body); color: var(--leaf-700); flex-shrink: 0; }

/* After picking itinerary — day picker step */
.w2-aip__days { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 12px; }
.w2-aip__day {
  padding: 8px 12px; border-radius: 8px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  font: 600 11.5px var(--font-body); color: var(--slate-700);
  cursor: pointer;
}
.w2-aip__day:hover { background: var(--leaf-100); border-color: var(--leaf-700); color: var(--leaf-800); }
.w2-aip__day-date { font: 600 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); display: block; }

/* ─── My Itineraries page ────────────────────────────────── */
.w2-itins { background: var(--bg-page); min-height: calc(100vh - 64px - 60px); padding: 40px max(28px, 4vw) 64px; }
.w2-itins__inner { max-width: 1320px; margin: 0 auto; }
.w2-itins__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.w2-itins__title { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -.024em; margin: 0; color: var(--slate-700); line-height: 1; }
.w2-itins__title em { font-style: italic; font-weight: 400; }
.w2-itins__sub { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--fg-2); margin-top: 12px; max-width: 480px; }
.w2-itins__plan {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  background: var(--lavender-100); color: var(--lavender-700);
  border: 1px solid rgba(123,111,203,.2);
}
.w2-itins__plan strong { color: var(--slate-700); font: 700 11px var(--font-body); }
.w2-itins__newcta {
  padding: 12px 22px; border-radius: 999px;
  background: var(--grad-cta-itinerary); color: white;
  border: 0; cursor: pointer;
  font: 600 13px var(--font-body);
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(48,92,222,.32);
}

.w2-itin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px; }
.w2-itin-card {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.w2-itin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.w2-itin-card__img { height: 180px; background-size: cover; background-position: center; position: relative; }
.w2-itin-card__img-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,26,36,.55) 100%); }
.w2-itin-card__region {
  position: absolute; top: 14px; left: 14px;
  font: 600 9.5px var(--font-body); letter-spacing: .22em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  color: white; border: 1px solid rgba(255,255,255,.22);
}
.w2-itin-card__status {
  position: absolute; top: 14px; right: 14px;
  font: 700 9px var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px);
  background: rgba(255,255,255,.18); color: white;
}
.w2-itin-card__status--active { background: rgba(43,124,4,.7); border-color: rgba(115,239,159,.5); }
.w2-itin-card__status--draft { background: rgba(229,169,59,.8); border-color: rgba(255,255,255,.4); }
.w2-itin-card__body { padding: 18px 20px 20px; }
.w2-itin-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; font-style: italic; letter-spacing: -.014em; color: var(--slate-700); margin: 0; line-height: 1.1; }
.w2-itin-card__meta { font: 500 12px var(--font-mono); color: var(--fg-3); margin-top: 8px; letter-spacing: .04em; }
.w2-itin-card__stats { display: flex; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-1); font: 500 11.5px var(--font-body); color: var(--fg-2); }
.w2-itin-card__stats span strong { color: var(--slate-700); font: 600 11.5px var(--font-body); }
.w2-itin-card--add {
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 320px;
  background: transparent;
  border: 2px dashed var(--border-2);
  cursor: pointer;
  padding: 20px;
}
.w2-itin-card--add:hover { background: var(--bg-paper); border-color: var(--leaf-700); }
.w2-itin-card--add div { color: var(--fg-2); }
.w2-itin-card--add .w2-itin-card__plus { width: 56px; height: 56px; border-radius: 50%; background: var(--leaf-100); color: var(--leaf-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font: 600 28px var(--font-body); }
.w2-itin-card--add h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; font-style: italic; color: var(--slate-700); margin: 0 0 4px; }
.w2-itin-card--locked { opacity: .55; cursor: not-allowed; }
.w2-itin-card__upgrade {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(14,26,36,.55); backdrop-filter: blur(4px); color: white;
  flex-direction: column; gap: 8px; opacity: 0; transition: opacity 240ms;
}
.w2-itin-card--locked:hover .w2-itin-card__upgrade { opacity: 1; }

/* ─── Curated row ─────────────────────────────────────────── */
.w2-curated-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.w2-curated {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.w2-curated:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.w2-curated__img { height: 220px; background-size: cover; background-position: center; position: relative; }
.w2-curated__img-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,26,36,.78) 100%); }
.w2-curated__chip {
  position: absolute; top: 14px; left: 14px;
  font: 600 9.5px var(--font-body); letter-spacing: .2em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  color: white; border: 1px solid rgba(255,255,255,.22);
}
.w2-curated__grade { position: absolute; top: 14px; right: 14px; font: 700 11px var(--font-mono); letter-spacing: .14em; color: white; padding: 4px 9px; background: rgba(0,0,0,.55); border-radius: 4px; }
.w2-curated__head { position: absolute; left: 18px; right: 18px; bottom: 18px; color: white; }
.w2-curated__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; font-style: italic; letter-spacing: -.014em; line-height: 1.15; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.w2-curated__creator { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 12px var(--font-body); opacity: .92; }
.w2-curated__avatar { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; }
.w2-curated__body { padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.w2-curated__line { font: 400 13.5px var(--font-body); line-height: 1.5; color: var(--fg-2); }
.w2-curated__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: auto; border-top: 1px dashed var(--border-1); }
.w2-curated__price strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); }
.w2-curated__price span { font: 400 11px var(--font-body); color: var(--fg-3); display: block; margin-top: 2px; letter-spacing: .02em; }
.w2-curated__cta { padding: 10px 18px; border-radius: 999px; background: var(--slate-700); color: white; border: 0; cursor: pointer; font: 600 11.5px var(--font-body); letter-spacing: .04em; }

/* ─── Curated detail (full page) ─────────────────────────── */
.w2-curated-page { background: var(--bg-page); min-height: calc(100vh - 64px); }
.w2-curated-hero { position: relative; height: 460px; background-size: cover; background-position: center; }
.w2-curated-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.2) 0%, rgba(14,26,36,.05) 30%, rgba(14,26,36,.85) 100%); }
.w2-curated-hero__inner { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 max(28px, 4vw); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 36px; color: white; }
.w2-curated-hero__chips { display: flex; gap: 8px; margin-bottom: 14px; }
.w2-curated-hero__chip { font: 600 10.5px var(--font-body); letter-spacing: .22em; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); }
.w2-curated-hero__title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1.0; letter-spacing: -.028em; margin: 0 0 12px; max-width: 880px; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.w2-curated-hero__title em { font-style: italic; font-weight: 400; }
.w2-curated-hero__line { font-family: var(--font-display); font-style: italic; font-size: 19px; max-width: 620px; opacity: .92; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.w2-curated-content { max-width: 1320px; margin: 0 auto; padding: 32px max(28px, 4vw) 80px; display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
.w2-curated-content__body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 32px 0 14px; line-height: 1.15; }
.w2-curated-content__body h3:first-child { margin-top: 0; }
.w2-curated-content__body h3 em { font-style: italic; font-weight: 400; }
.w2-curated__day { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.w2-curated__day-d { font: 700 11px var(--font-mono); letter-spacing: .12em; color: var(--leaf-700); flex-shrink: 0; width: 36px; padding-top: 2px; }
.w2-curated__day-t { font: 400 14px var(--font-body); color: var(--fg-1); line-height: 1.5; }
.w2-curated__list { list-style: none; padding: 0; margin: 0; }
.w2-curated__list li { display: flex; gap: 10px; padding: 6px 0; font: 400 13.5px var(--font-body); color: var(--fg-1); align-items: flex-start; }
.w2-curated__list li::before { content: '✓'; color: var(--leaf-700); font: 600 14px var(--font-body); flex-shrink: 0; }
.w2-curated__list--no li::before { content: '×'; color: var(--terracotta); }
.w2-curated__sidebar {
  position: sticky; top: 84px;
  background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px;
  padding: 22px;
}
.w2-curated__sb-price { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--slate-700); letter-spacing: -.02em; }
.w2-curated__sb-price-l { font: 400 12px var(--font-body); color: var(--fg-3); }
.w2-curated__sb-deps { margin: 18px 0; display: flex; flex-direction: column; gap: 6px; }
.w2-curated__dep {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--bone-100); border: 1px solid var(--border-1);
  border-radius: 8px; cursor: pointer;
  font: 500 13px var(--font-body); color: var(--slate-700);
}
.w2-curated__dep.is-on { background: var(--leaf-100); border-color: var(--leaf-700); }
.w2-curated__dep-dates { font: 600 12.5px var(--font-body); }
.w2-curated__dep-seats { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-curated__dep.is-on .w2-curated__dep-seats { color: var(--leaf-700); }
.w2-curated__sb-cta { width: 100%; height: 48px; border-radius: 12px; background: var(--grad-cta-book); color: white; border: 0; font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(11,218,81,.28); margin-bottom: 8px; }
.w2-curated__sb-row { display: flex; gap: 8px; }
.w2-curated__sb-row button { flex: 1; height: 42px; border-radius: 10px; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; font: 600 12px var(--font-body); color: var(--slate-700); }
.w2-curated__sb-row button:hover { background: var(--bone-200); }
.w2-curated__sb-trust { font: 400 11.5px var(--font-body); color: var(--fg-3); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-1); line-height: 1.5; }

/* ─── Create itinerary modal ─────────────────────────────── */
.w2-create-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-create { background: var(--bg-paper); border-radius: 18px; padding: 30px 32px 26px; box-shadow: var(--shadow-4); width: min(560px, 92vw); }
.w2-create__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-create__t { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -.022em; color: var(--slate-700); margin: 6px 0 8px; line-height: 1.1; }
.w2-create__t em { font-style: italic; font-weight: 400; }
.w2-create__sub { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--fg-2); margin-bottom: 22px; }
.w2-create__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.w2-create__field-l { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-create__input { height: 46px; padding: 0 14px; background: white; border: 1px solid var(--border-2); border-radius: 10px; font: 500 14px var(--font-body); color: var(--slate-700); outline: 0; }
.w2-create__input:focus { border-color: var(--leaf-700); box-shadow: 0 0 0 3px var(--leaf-100); }
.w2-create__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w2-create__regions { display: flex; flex-wrap: wrap; gap: 6px; }
.w2-create__region {
  padding: 7px 13px; border-radius: 999px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  font: 600 11.5px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.w2-create__region.is-on { background: var(--slate-700); color: var(--bone-100); border-color: var(--slate-700); }
.w2-create__actions { display: flex; gap: 10px; margin-top: 22px; }
.w2-create__cancel { flex: 1; height: 46px; border-radius: 10px; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-create__submit { flex: 2; height: 46px; border-radius: 10px; background: var(--grad-cta-itinerary); border: 0; color: white; font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(48,92,222,.28); }

/* ─── Booking gate (dates + guests before payment) ───────── */
.w2-bgate-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-bgate { background: var(--bg-paper); border-radius: 16px; padding: 26px 28px 24px; box-shadow: var(--shadow-4); width: min(520px, 92vw); }
.w2-bgate__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.w2-bgate__t { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 4px 0 4px; }
.w2-bgate__sub { font: 400 13px var(--font-body); color: var(--fg-2); margin-bottom: 18px; }
.w2-bgate__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.w2-bgate__field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 10px;
}
.w2-bgate__field-l { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.w2-bgate__field input { background: 0; border: 0; outline: 0; font: 500 13.5px var(--font-body); color: var(--slate-700); width: 100%; }
.w2-bgate__steps { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 10px; margin-bottom: 14px; }
.w2-bgate__step { display: flex; align-items: center; justify-content: space-between; }
.w2-bgate__step-l { display: flex; flex-direction: column; }
.w2-bgate__step-name { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-bgate__step-s { font: 400 11px var(--font-body); color: var(--fg-3); }
.w2-bgate__step-ct { display: inline-flex; align-items: center; background: white; border: 1px solid var(--border-1); border-radius: 999px; }
.w2-bgate__step-ct button { width: 28px; height: 28px; background: 0; border: 0; cursor: pointer; font-size: 14px; color: var(--slate-700); }
.w2-bgate__step-ct span { padding: 0 10px; font: 600 12px var(--font-mono); color: var(--slate-700); min-width: 22px; text-align: center; }
.w2-bgate__summary { padding: 12px 14px; background: var(--leaf-100); border: 1px solid rgba(43,124,4,.18); border-radius: 10px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--font-body); color: var(--leaf-900); }
.w2-bgate__summary strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); }
.w2-bgate__actions { display: flex; gap: 10px; }
.w2-bgate__cancel { flex: 1; height: 46px; border-radius: 10px; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-bgate__submit { flex: 2; height: 46px; border-radius: 10px; background: var(--grad-cta-book); border: 0; color: white; font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(11,218,81,.28); }

/* ─── Toast positioning fix for desktop with sticky trip bar ─── */
.w2-explore .w2-trip,
.w2-itins .w2-trip { top: 64px; }

/* ─── Section spacing tweak inside itineraries page ─── */
.w2-itins .w2-sech { margin-top: 20px; }


/* ============================================================================
   v2.2 — Cafe full page, Address book, Curated map view, Itinerary playback
   ============================================================================ */

/* ─── Cafe full page (desktop) ───────────────────────────── */
.w2-cafe { background: var(--bg-page); min-height: calc(100vh - 64px); }
.w2-cafe__hero { position: relative; height: 380px; background-size: cover; background-position: center; }
.w2-cafe__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.25) 0%, transparent 30%, rgba(14,26,36,.86) 100%); }
.w2-cafe__back { position: absolute; top: 24px; left: max(28px, 4vw); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); color: white; font-size: 16px; cursor: pointer; }
.w2-cafe__hero-copy { position: absolute; left: max(28px, 4vw); right: max(28px, 4vw); bottom: 30px; color: white; max-width: 1320px; margin: 0 auto; }
.w2-cafe__hero-eyebrow { font: 600 10.5px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .9; padding: 4px 10px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); border-radius: 999px; display: inline-block; border: 1px solid rgba(255,255,255,.22); }
.w2-cafe__hero-title { font-family: var(--font-display); font-size: clamp(38px, 5vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -.025em; margin: 12px 0 8px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.w2-cafe__hero-title em { font-style: italic; font-weight: 400; }
.w2-cafe__hero-meta { font: 400 14px var(--font-body); opacity: .9; }

.w2-cafe__content { max-width: 1320px; margin: 0 auto; padding: 28px max(28px, 4vw) 40px; display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }
.w2-cafe__main { min-width: 0; }

/* Service mode toggle */
.w2-cafe__modes { display: inline-flex; gap: 4px; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.w2-cafe__mode { padding: 9px 18px; border-radius: 999px; background: transparent; border: 0; cursor: pointer; font: 600 12px var(--font-body); color: var(--fg-2); letter-spacing: .02em; }
.w2-cafe__mode.is-on { background: var(--slate-700); color: white; }
.w2-cafe__mode:disabled { opacity: .35; cursor: not-allowed; }

/* Menu sections */
.w2-cafe__sect { margin-bottom: 36px; }
.w2-cafe__sect-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.w2-cafe__sect-t { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 0; }
.w2-cafe__sect-t em { font-style: italic; font-weight: 400; }

.w2-cafe__items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w2-cafe__item {
  display: flex; gap: 16px;
  padding: 14px;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.w2-cafe__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.w2-cafe__item-body { flex: 1; min-width: 0; }
.w2-cafe__item-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); letter-spacing: -.014em; }
.w2-cafe__item-desc { font: 400 12.5px var(--font-body); color: var(--fg-2); line-height: 1.5; margin-top: 4px; }
.w2-cafe__item-price { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); margin-top: 10px; }
.w2-cafe__item-img { width: 96px; height: 96px; background-size: cover; background-position: center; border-radius: 8px; flex-shrink: 0; position: relative; }
.w2-cafe__item-add {
  position: absolute; bottom: -8px; right: -8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: white; color: var(--slate-700);
  border: 1px solid var(--border-1); cursor: pointer;
  font: 700 18px var(--font-body); line-height: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(14,26,36,.20);
}
.w2-cafe__item-add:hover { background: var(--slate-700); color: white; border-color: var(--slate-700); }
.w2-cafe__item-add.is-in { background: var(--cta-book); color: white; border-color: var(--cta-book); }
.w2-cafe__item-customize {
  position: absolute; top: -8px; right: -8px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  font: 600 9px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

/* Right sidebar (cafe cart / info) */
.w2-cafe__sb { position: sticky; top: 84px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px; padding: 20px 22px; }
.w2-cafe__sb-empty { text-align: center; padding: 24px 8px; color: var(--fg-3); }
.w2-cafe__sb-empty h4 { font-family: var(--font-display); font-style: italic; font-size: 20px; font-weight: 500; color: var(--slate-700); margin: 0 0 6px; }
.w2-cafe__sb-empty p { font: 400 13px var(--font-body); margin: 0; }
.w2-cafe__sb-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 0; }
.w2-cafe__sb-title em { font-style: italic; font-weight: 400; }
.w2-cafe__sb-mode { font: 600 10px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); margin-top: 4px; margin-bottom: 14px; }
.w2-cafe-line { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-1); }
.w2-cafe-line__img { width: 48px; height: 48px; background-size: cover; background-position: center; border-radius: 6px; flex-shrink: 0; }
.w2-cafe-line__body { flex: 1; min-width: 0; }
.w2-cafe-line__name { font: 500 13.5px var(--font-body); color: var(--slate-700); }
.w2-cafe-line__custom { font: 400 11px var(--font-body); color: var(--fg-3); margin-top: 2px; line-height: 1.45; }
.w2-cafe-line__row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.w2-cafe-line__price { font: 500 12.5px var(--font-mono); color: var(--slate-700); }
.w2-cafe-line__qty { display: inline-flex; align-items: center; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; }
.w2-cafe-line__qty button { width: 24px; height: 24px; background: 0; border: 0; cursor: pointer; font-size: 13px; color: var(--slate-700); }
.w2-cafe-line__qty span { padding: 0 8px; font: 600 11px var(--font-mono); color: var(--slate-700); min-width: 18px; text-align: center; }
.w2-cafe__sb-totals { padding-top: 12px; margin-top: 6px; border-top: 1px dashed var(--border-1); }
.w2-cafe__sb-line { display: flex; justify-content: space-between; padding: 3px 0; font: 400 12.5px var(--font-body); color: var(--fg-2); }
.w2-cafe__sb-line strong { color: var(--slate-700); font: 600 14px var(--font-body); }
.w2-cafe__sb-cta { width: 100%; height: 46px; border-radius: 10px; border: 0; background: var(--grad-cta-book); color: white; font: 700 13px var(--font-body); cursor: pointer; margin-top: 12px; box-shadow: 0 6px 16px rgba(11,218,81,.28); }

/* Item customize modal */
.w2-cust-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 96; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-cust { background: var(--bg-paper); border-radius: 14px; padding: 0; box-shadow: var(--shadow-4); width: min(520px, 92vw); overflow: hidden; }
.w2-cust__img { height: 200px; background-size: cover; background-position: center; }
.w2-cust__body { padding: 22px 24px 16px; }
.w2-cust__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 0; }
.w2-cust__desc { font: 400 13.5px var(--font-body); color: var(--fg-2); margin: 4px 0 18px; line-height: 1.5; }
.w2-cust__group { margin-bottom: 18px; }
.w2-cust__group-l { font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-cust__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.w2-cust__opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 8px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  font: 500 13px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.w2-cust__opt.is-on { background: var(--leaf-100); border-color: var(--leaf-700); color: var(--leaf-800); font-weight: 600; }
.w2-cust__opt span { font: 600 11.5px var(--font-mono); color: var(--fg-3); }
.w2-cust__opt.is-on span { color: var(--leaf-700); }
.w2-cust__foot { padding: 16px 24px; background: var(--bone-100); display: flex; align-items: center; gap: 14px; }
.w2-cust__qty { display: inline-flex; background: white; border: 1px solid var(--border-2); border-radius: 999px; }
.w2-cust__qty button { width: 32px; height: 32px; background: 0; border: 0; cursor: pointer; font-size: 16px; color: var(--slate-700); }
.w2-cust__qty span { padding: 0 12px; font: 600 13px var(--font-mono); color: var(--slate-700); min-width: 24px; text-align: center; line-height: 32px; }
.w2-cust__add { flex: 1; height: 46px; border-radius: 10px; border: 0; background: var(--slate-700); color: white; font: 700 13px var(--font-body); cursor: pointer; }

/* ─── Address book modal + selector ─────────────────────── */
.w2-addr-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 94; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-addr { background: var(--bg-paper); border-radius: 16px; padding: 26px 28px 24px; box-shadow: var(--shadow-4); width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; }
.w2-addr__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.w2-addr__title { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -.022em; color: var(--slate-700); margin: 6px 0 4px; }
.w2-addr__title em { font-style: italic; font-weight: 400; }
.w2-addr__sub { font: 400 13.5px var(--font-body); color: var(--fg-2); margin-bottom: 18px; line-height: 1.5; }

.w2-addr-card {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 14px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border-1); border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
.w2-addr-card:hover { border-color: var(--slate-700); }
.w2-addr-card.is-on { border-color: var(--leaf-700); background: var(--leaf-100); }
.w2-addr-card__radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-2); margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.w2-addr-card.is-on .w2-addr-card__radio { border-color: var(--leaf-700); }
.w2-addr-card.is-on .w2-addr-card__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf-700); }
.w2-addr-card__body { min-width: 0; }
.w2-addr-card__label { display: inline-flex; gap: 6px; align-items: center; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-700); margin-bottom: 4px; }
.w2-addr-card__label-tag { font: 600 8.5px var(--font-body); letter-spacing: .14em; padding: 2px 6px; border-radius: 4px; background: var(--leaf-100); color: var(--leaf-700); }
.w2-addr-card__name { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-addr-card__addr { font: 400 12.5px var(--font-body); color: var(--fg-2); margin-top: 4px; line-height: 1.5; }
.w2-addr-card__phone { font: 400 11px var(--font-mono); color: var(--fg-3); margin-top: 4px; letter-spacing: .03em; }
.w2-addr-card__edit { background: 0; border: 0; font: 600 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); cursor: pointer; padding: 4px; }
.w2-addr-card__edit:hover { color: var(--slate-700); }

.w2-addr__addnew {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: 0; border: 2px dashed var(--border-2);
  border-radius: 10px;
  cursor: pointer; width: 100%;
  font: 600 13px var(--font-body); color: var(--slate-700);
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.w2-addr__addnew:hover { border-color: var(--leaf-700); background: var(--leaf-100); color: var(--leaf-700); }

.w2-addr__actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-1); }
.w2-addr__cancel { flex: 1; height: 46px; border-radius: 10px; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-addr__continue { flex: 2; height: 46px; border-radius: 10px; background: var(--slate-700); border: 0; color: white; font: 700 13px var(--font-body); cursor: pointer; }

/* Add-address form */
.w2-addrf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.w2-addrf__field { display: flex; flex-direction: column; gap: 4px; }
.w2-addrf__field-l { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-addrf__input { height: 42px; padding: 0 12px; background: white; border: 1px solid var(--border-2); border-radius: 8px; font: 500 13.5px var(--font-body); color: var(--slate-700); outline: 0; }
.w2-addrf__input:focus { border-color: var(--leaf-700); box-shadow: 0 0 0 3px var(--leaf-100); }
.w2-addrf__pin {
  height: 160px; background: linear-gradient(135deg, #d4e8c4 0%, #ebe8d5 100%); border-radius: 10px;
  position: relative; margin-bottom: 14px; overflow: hidden;
  border: 1px solid var(--border-1);
}
.w2-addrf__pin::after {
  content: '© Tap to pin location';
  position: absolute; bottom: 8px; left: 12px;
  font: 500 11px var(--font-body); color: var(--fg-3); letter-spacing: .04em;
}
.w2-addrf__pin-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--leaf-700); border: 3px solid white; box-shadow: 0 4px 10px rgba(14,26,36,.3);
}
.w2-addrf__pin-dot::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2px; height: 14px; background: var(--leaf-700); }

/* ─── Curated detail: tabs + map view ─────────────────── */
.w2-curated__tabs { display: inline-flex; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 22px; }
.w2-curated__tab { padding: 8px 18px; background: 0; border: 0; cursor: pointer; border-radius: 999px; font: 600 12px var(--font-body); letter-spacing: .04em; color: var(--fg-2); }
.w2-curated__tab.is-on { background: var(--slate-700); color: white; }
.w2-curated-map {
  height: 440px;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #d4e8c4 0%, #ebe8d5 50%, #d2ecf9 100%);
  position: relative;
  margin-bottom: 20px;
  border: 1px solid var(--border-1);
}

/* ─── Itinerary playback (animated walkthrough) ──────── */
.w2-play-bar {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border: 1px solid rgba(31,59,87,.10);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(14,26,36,.16);
}
.w2-play-bar__btn { width: 36px; height: 36px; border-radius: 50%; background: var(--slate-700); color: white; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-body); }
.w2-play-bar__step { font: 600 11px var(--font-body); color: var(--slate-700); padding: 0 12px 0 6px; letter-spacing: .04em; }
.w2-play-bar__step strong { font: 700 11px var(--font-mono); }
.w2-play-bar__nav { width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; color: var(--slate-700); font-size: 14px; }
.w2-play-bar__nav:hover { background: var(--bone-100); }
.w2-play-bar__nav:disabled { opacity: .4; cursor: not-allowed; }
.w2-play-bar__close { width: 28px; height: 28px; border-radius: 50%; background: var(--bone-100); border: 0; cursor: pointer; color: var(--slate-700); font-size: 14px; }

/* Active stop highlight on map */
.w2-map__pin.is-current .w2-map__pin-lbl, .w2-map__pin.is-current .w2-map__pin-lbl--price {
  background: var(--slate-700); color: white; border-color: var(--slate-700);
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(14,26,36,.36);
}
.w2-map__pin.is-current .w2-map__pin-dot {
  width: 18px; height: 18px;
  box-shadow: 0 0 0 6px rgba(43,124,4,.25), 0 4px 12px rgba(14,26,36,.4);
}

/* Itinerary action menu (edit/delete/share) */
.w2-itin-menu {
  position: absolute; right: 14px; top: 14px;
  z-index: 5;
}
.w2-itin-menu__btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(31,59,87,.12);
  color: var(--slate-700); cursor: pointer; font: 700 18px var(--font-body); letter-spacing: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.w2-itin-menu__pop {
  position: absolute; top: 42px; right: 0;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  box-shadow: var(--shadow-3);
  min-width: 170px;
  padding: 6px;
  z-index: 12;
  animation: w2-aip-in 200ms var(--ease-out);
}
.w2-itin-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: 0; border: 0; cursor: pointer; width: 100%; text-align: left; border-radius: 6px; font: 600 12.5px var(--font-body); color: var(--slate-700); }
.w2-itin-menu__item:hover { background: var(--bone-100); }
.w2-itin-menu__item--danger { color: var(--terracotta); }

/* Account screens (proper detail cards) */
.w2-acc { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; background: var(--bg-paper); z-index: 71; box-shadow: -16px 0 50px rgba(14,26,36,.28); display: flex; flex-direction: column; animation: w2-detail-in 320ms var(--ease-out); overflow: hidden; }
.w2-acc__head { padding: 26px 28px 14px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: 10px; }
.w2-acc__back { width: 32px; height: 32px; border-radius: 50%; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; color: var(--slate-700); font-size: 15px; }
.w2-acc__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); flex: 1; margin: 0; }
.w2-acc__title em { font-style: italic; font-weight: 400; }
.w2-acc__body { flex: 1; overflow-y: auto; padding: 22px 28px 28px; }
.w2-acc__sect-t { font-family: var(--font-display); font-size: 16px; font-weight: 500; font-style: italic; color: var(--slate-700); margin: 4px 0 12px; letter-spacing: -.014em; }

.w2-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-1); }
.w2-toggle:last-child { border-bottom: 0; }
.w2-toggle__body { flex: 1; min-width: 0; padding-right: 14px; }
.w2-toggle__name { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-toggle__sub { font: 400 12px var(--font-body); color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.w2-toggle__sw { width: 42px; height: 24px; border-radius: 999px; background: var(--bone-200); position: relative; cursor: pointer; transition: background 200ms; flex-shrink: 0; }
.w2-toggle__sw.is-on { background: var(--leaf-700); }
.w2-toggle__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform 200ms; box-shadow: 0 1px 3px rgba(14,26,36,.2); }
.w2-toggle__sw.is-on::after { transform: translateX(18px); }


/* ============================================================================
   v2.3 — Cafe sticky category nav + quick-add states
   ============================================================================ */

/* Desktop sticky category nav (within cafe detail) */
.w2-cafe__catnav {
  position: sticky; top: 64px; z-index: 10;
  background: rgba(252,250,246,.94); backdrop-filter: blur(14px);
  margin: 0 -4px 18px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-1);
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none;
}
.w2-cafe__catnav::-webkit-scrollbar { display: none; }
.w2-cafe__catchip {
  flex-shrink: 0;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border-2);
  font: 600 12px var(--font-body); color: var(--slate-700); cursor: pointer;
  letter-spacing: .02em;
}
.w2-cafe__catchip.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }
.w2-cafe__catchip:hover:not(.is-on) { background: var(--bone-100); }

/* Quick add badge */
.w2-cafe__qty-badge {
  position: absolute; bottom: -8px; right: -8px;
  display: inline-flex; align-items: center;
  background: var(--cta-book); border-radius: 999px;
  border: 2px solid var(--bg-paper);
  padding: 2px;
  box-shadow: 0 2px 8px rgba(11,218,81,.32);
}
.w2-cafe__qty-badge button {
  width: 22px; height: 22px;
  background: transparent; border: 0;
  color: white; cursor: pointer; font: 700 14px var(--font-body); line-height: 0;
}
.w2-cafe__qty-badge span {
  padding: 0 6px; color: white;
  font: 700 11px var(--font-mono);
  min-width: 18px; text-align: center;
}

/* Mobile sticky category nav */
.app-cafepage__catnav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(252,250,246,.96); backdrop-filter: blur(14px);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1);
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none;
}
.app-cafepage__catnav::-webkit-scrollbar { display: none; }
.app-cafepage__catchip {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border-2);
  font: 600 11.5px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.app-cafepage__catchip.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }

.app-cafepage__qty-badge {
  position: absolute; bottom: -6px; right: -6px;
  display: inline-flex; align-items: center;
  background: var(--cta-book); border-radius: 999px;
  border: 2px solid var(--bg-paper);
  padding: 1px;
  box-shadow: 0 2px 6px rgba(11,218,81,.32);
}
.app-cafepage__qty-badge button {
  width: 20px; height: 20px;
  background: transparent; border: 0;
  color: white; cursor: pointer; font: 700 12px var(--font-body); line-height: 0;
}
.app-cafepage__qty-badge span {
  padding: 0 5px; color: white;
  font: 700 10px var(--font-mono);
  min-width: 14px; text-align: center;
}


/* ============================================================================
   v2.4 — Adventure activities (desktop + mobile)
   ============================================================================ */

/* ─── Desktop ─────────────────────────────────────────── */
.w2-acts { background: var(--bg-page); min-height: calc(100vh - 64px); padding: 40px max(28px, 4vw) 64px; }
.w2-acts__inner { max-width: 1320px; margin: 0 auto; }
.w2-acts__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.w2-acts__title { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -.024em; margin: 0; color: var(--slate-700); line-height: 1; }
.w2-acts__title em { font-style: italic; font-weight: 400; }
.w2-acts__sub { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--fg-2); margin-top: 12px; max-width: 480px; }
.w2-acts__cats { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 24px; padding-bottom: 4px; scrollbar-width: none; }
.w2-acts__cats::-webkit-scrollbar { display: none; }
.w2-acts__cat { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: var(--bg-paper); border: 1px solid var(--border-1); cursor: pointer; font: 600 12px var(--font-body); color: var(--slate-700); }
.w2-acts__cat.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }

.w2-acts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.w2-act-card {
  position: relative;
  background: var(--bg-paper); border: 1px solid var(--border-1);
  border-radius: 14px; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.w2-act-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.w2-act-card__img { height: 210px; background-size: cover; background-position: center; position: relative; }
.w2-act-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(14,26,36,.72) 100%); }
.w2-act-card__chip { position: absolute; top: 14px; left: 14px; font: 600 9.5px var(--font-body); letter-spacing: .22em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: white; border: 1px solid rgba(255,255,255,.22); z-index: 2; }
.w2-act-card__grade { position: absolute; top: 14px; right: 14px; font: 700 11px var(--font-mono); letter-spacing: .12em; color: white; padding: 4px 9px; background: rgba(0,0,0,.55); border-radius: 4px; z-index: 2; }
.w2-act-card__head { position: absolute; left: 16px; right: 16px; bottom: 14px; color: white; z-index: 2; }
.w2-act-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; font-style: italic; line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.w2-act-card__loc { font: 400 12px var(--font-body); opacity: .9; margin-top: 4px; }
.w2-act-card__body { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.w2-act-card__line { font: 400 13px var(--font-body); color: var(--fg-2); line-height: 1.5; }
.w2-act-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border-1); margin-top: auto; }
.w2-act-card__price { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--slate-700); }
.w2-act-card__price span { font: 400 11px var(--font-body); color: var(--fg-3); }
.w2-act-card__cta { padding: 8px 16px; border-radius: 999px; background: var(--slate-700); color: white; border: 0; font: 600 11.5px var(--font-body); cursor: pointer; }

/* Activity detail */
.w2-act-page { background: var(--bg-page); min-height: calc(100vh - 64px); }
.w2-act-hero { position: relative; height: 440px; background-size: cover; background-position: center; }
.w2-act-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.25) 0%, transparent 30%, rgba(14,26,36,.86) 100%); }
.w2-act-hero__inner { position: relative; max-width: 1320px; margin: 0 auto; padding: 24px max(28px, 4vw) 32px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: white; }
.w2-act-hero__chips { display: flex; gap: 8px; margin-bottom: 12px; }
.w2-act-hero__chip { font: 600 10.5px var(--font-body); letter-spacing: .22em; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); }
.w2-act-hero__title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 70px); font-weight: 500; line-height: 1.0; letter-spacing: -.028em; margin: 0 0 12px; max-width: 880px; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.w2-act-hero__title em { font-style: italic; font-weight: 400; }
.w2-act-hero__line { font-family: var(--font-display); font-style: italic; font-size: 19px; max-width: 640px; opacity: .92; text-shadow: 0 1px 12px rgba(0,0,0,.4); }

.w2-act-content { max-width: 1320px; margin: 0 auto; padding: 32px max(28px, 4vw) 80px; display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
.w2-act-content__body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 32px 0 14px; line-height: 1.15; }
.w2-act-content__body h3:first-child { margin-top: 0; }
.w2-act-content__body h3 em { font-style: italic; font-weight: 400; }
.w2-act-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.w2-act-stats > div { padding: 12px 14px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 10px; }
.w2-act-stat-l { font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.w2-act-stat-v { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); margin-top: 4px; }

.w2-act-vendor {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 16px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 12px; margin-bottom: 10px;
  cursor: pointer; transition: border-color 200ms, transform 200ms;
}
.w2-act-vendor.is-on { border-color: var(--leaf-700); background: var(--leaf-100); }
.w2-act-vendor:hover { transform: translateY(-1px); }
.w2-act-vendor__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.w2-act-vendor__name { font: 600 14px var(--font-body); color: var(--slate-700); }
.w2-act-vendor__rating { font: 600 11.5px var(--font-mono); color: var(--leaf-700); }
.w2-act-vendor__rating span { color: var(--fg-3); font-weight: 400; }
.w2-act-vendor__inc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.w2-act-vendor__inc span { font: 500 10.5px var(--font-body); padding: 3px 8px; border-radius: 999px; background: var(--bone-100); color: var(--fg-2); }
.w2-act-vendor__price { text-align: right; align-self: center; }
.w2-act-vendor__price strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); }
.w2-act-vendor__price span { font: 400 11px var(--font-body); color: var(--fg-3); display: block; margin-top: 2px; }

.w2-act-sidebar { position: sticky; top: 84px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px; padding: 22px; }
.w2-act-sidebar__price { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--slate-700); letter-spacing: -.02em; }
.w2-act-sidebar__pricel { font: 400 12px var(--font-body); color: var(--fg-3); margin-bottom: 16px; }
.w2-act-sidebar__l { font: 600 10.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-act-slot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--bone-100); border: 1px solid var(--border-1);
  border-radius: 8px; cursor: pointer; font: 500 13px var(--font-body); color: var(--slate-700); margin-bottom: 6px;
}
.w2-act-slot.is-on { background: var(--leaf-100); border-color: var(--leaf-700); }
.w2-act-slot-dt { font: 600 12.5px var(--font-body); }
.w2-act-slot-st { font: 600 10.5px var(--font-mono); letter-spacing: .04em; color: var(--fg-3); }
.w2-act-slot.is-on .w2-act-slot-st { color: var(--leaf-700); }
.w2-act-cta { width: 100%; height: 48px; border-radius: 12px; background: var(--grad-cta-book); color: white; border: 0; font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(11,218,81,.28); margin-top: 14px; }

/* ─── Mobile ─────────────────────────────────────── */
.app-acts { position: absolute; inset: 0; background: var(--bg-page); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 60px; padding-bottom: 32px; }
.app-acts::-webkit-scrollbar { display: none; }
.app-acts__head { padding: 0 16px 14px; }
.app-acts__t { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.022em; color: var(--slate-700); margin: 0; }
.app-acts__t em { font-style: italic; font-weight: 400; }
.app-acts__sub { font: 400 13px var(--font-body); color: var(--fg-2); margin-top: 6px; line-height: 1.5; }
.app-acts__cats { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.app-acts__cats::-webkit-scrollbar { display: none; }
.app-acts__cat { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; background: var(--bg-paper); border: 1px solid var(--border-1); font: 600 11.5px var(--font-body); color: var(--slate-700); cursor: pointer; }
.app-acts__cat.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }

.app-act-card { display: block; width: calc(100% - 32px); margin: 0 16px 10px; height: 180px; position: relative; border-radius: 12px; overflow: hidden; background: var(--slate-800); border: 0; padding: 0; cursor: pointer; text-align: left; }
.app-act-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.app-act-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,26,36,.85) 100%); }
.app-act-card__chip { position: absolute; top: 12px; left: 12px; font: 600 8.5px var(--font-body); letter-spacing: .2em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: white; border: 1px solid rgba(255,255,255,.22); }
.app-act-card__price { position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 500; color: white; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.app-act-card__price span { font: 400 9.5px var(--font-body); opacity: .8; display: block; margin-top: 0; }
.app-act-card__name { position: absolute; left: 14px; right: 14px; bottom: 32px; color: white; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.app-act-card__loc { position: absolute; left: 14px; right: 14px; bottom: 12px; color: rgba(255,255,255,.8); font: 400 11px var(--font-body); }

.app-act-page { position: absolute; inset: 0; background: var(--bg-page); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 50; padding-bottom: 90px; }
.app-act-page::-webkit-scrollbar { display: none; }
.app-act-page__hero { height: 300px; background-size: cover; background-position: center; position: relative; }
.app-act-page__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.30) 0%, transparent 30%, rgba(14,26,36,.85) 100%); }
.app-act-page__back { position: absolute; top: 60px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid rgba(31,59,87,.10); cursor: pointer; color: var(--slate-700); display: flex; align-items: center; justify-content: center; }
.app-act-page__hero-copy { position: absolute; left: 18px; right: 18px; bottom: 18px; color: white; }
.app-act-page__title { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.4); margin: 6px 0; }
.app-act-page__line { font: 400 12.5px var(--font-body); opacity: .92; font-style: italic; font-family: var(--font-display); }
.app-act-page__body { padding: 18px 16px; }
.app-act-page__body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); margin: 22px 0 10px; letter-spacing: -.014em; }
.app-act-page__body h3:first-child { margin-top: 0; }
.app-act-stats-m { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.app-act-stats-m > div { padding: 10px 12px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 10px; }

.app-act-vendor { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 14px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.app-act-vendor.is-on { background: var(--leaf-100); border-color: var(--leaf-700); }
.app-act-vendor__name { font: 600 13px var(--font-body); color: var(--slate-700); }
.app-act-vendor__rating { font: 600 11px var(--font-mono); color: var(--leaf-700); margin-top: 2px; }
.app-act-vendor__price strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); }

.app-act-slot { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.app-act-slot.is-on { background: var(--leaf-100); border-color: var(--leaf-700); }
.app-act-slot-dt { font: 600 12.5px var(--font-body); color: var(--slate-700); }
.app-act-slot-st { font: 600 10px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }

.app-act-page__check { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 70; background: var(--slate-800); color: white; border-radius: 14px; padding: 12px 14px 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 40px rgba(14,26,36,.34); }
.app-act-page__check-l { flex: 1; }
.app-act-page__check-l strong { font-family: var(--font-display); font-size: 18px; }
.app-act-page__check-l span { font: 400 10.5px var(--font-body); opacity: .7; display: block; }
.app-act-page__check-btn { padding: 10px 18px; border-radius: 999px; background: var(--himlocal-green); color: #0F2410; border: 0; font: 700 12px var(--font-body); cursor: pointer; }

/* ─── Profile tabs (desktop drawer + mobile) ─────────── */
.w2-profile-drawer__tabs, .v2-prof-tabs {
  display: flex; gap: 4px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  border-radius: 999px; padding: 4px; margin: 14px 0 4px;
}
.w2-profile-drawer__tab, .v2-prof-tab {
  flex: 1; padding: 8px 6px; background: transparent; border: 0; cursor: pointer;
  border-radius: 999px; font: 600 11.5px var(--font-body); color: var(--fg-2); letter-spacing: .03em;
}
.w2-profile-drawer__tab.is-on, .v2-prof-tab.is-on {
  background: var(--slate-700); color: white;
}


/* ============================================================================
   v2.5 — Airbnb-style calendar + Nearby mode + Booking/Order detail + Address form
   ============================================================================ */

/* ─── Range calendar (desktop + mobile) ─────────────────── */
.w2-cal {
  background: var(--bg-paper);
  border-radius: 14px;
  padding: 16px;
}
.w2-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
.w2-cal__title { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -.014em; color: var(--slate-700); }
.w2-cal__nav { display: flex; gap: 6px; }
.w2-cal__navbtn { width: 32px; height: 32px; border-radius: 50%; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; color: var(--slate-700); font-size: 14px; }
.w2-cal__navbtn:disabled { opacity: .35; cursor: not-allowed; }
.w2-cal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.w2-cal__month { }
.w2-cal__mo-head { text-align: center; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--slate-700); margin-bottom: 12px; }
.w2-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-bottom: 6px; }
.w2-cal__dow span { text-align: center; font: 600 9.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 4px 0; }
.w2-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.w2-cal__day {
  position: relative;
  height: 36px; border: 0; background: transparent;
  font: 500 13px var(--font-body); color: var(--slate-700);
  cursor: pointer; border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.w2-cal__day:hover:not(.is-disabled):not(.is-start):not(.is-end) { background: var(--bone-200); }
.w2-cal__day.is-disabled { color: var(--fg-4); cursor: not-allowed; }
.w2-cal__day.is-other { color: var(--fg-4); }
.w2-cal__day.is-today { font-weight: 700; }
.w2-cal__day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--leaf-700); }
.w2-cal__day.is-in-range { background: var(--leaf-100); border-radius: 0; color: var(--leaf-900); }
.w2-cal__day.is-start { background: var(--slate-700); color: white; border-radius: 8px 0 0 8px; z-index: 1; }
.w2-cal__day.is-end   { background: var(--slate-700); color: white; border-radius: 0 8px 8px 0; z-index: 1; }
.w2-cal__day.is-start.is-end { border-radius: 8px; }
.w2-cal__day.is-start.is-only { border-radius: 8px; }

.w2-cal__footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; margin-top: 14px; border-top: 1px solid var(--border-1); }
.w2-cal__range { font: 500 13px var(--font-body); color: var(--slate-700); }
.w2-cal__range strong { font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.w2-cal__range span { color: var(--fg-3); font-weight: 400; }
.w2-cal__clear { background: 0; border: 0; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); cursor: pointer; padding: 4px 8px; }
.w2-cal__clear:hover { color: var(--slate-700); }

/* Mobile calendar (single column, scrollable) */
.app-cal { background: var(--bg-paper); padding: 0 14px 16px; max-height: 65vh; overflow-y: auto; }
.app-cal__grid { display: block; }
.app-cal__month { margin-bottom: 22px; }
.app-cal__mo-head { text-align: left; font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); margin-bottom: 10px; padding: 0 4px; }
.app-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.app-cal__dow span { text-align: center; font: 600 9px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 3px 0; }
.app-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.app-cal__day { position: relative; height: 40px; border: 0; background: transparent; font: 500 13px var(--font-body); color: var(--slate-700); cursor: pointer; border-radius: 8px; }
.app-cal__day.is-disabled, .app-cal__day.is-other { color: var(--fg-4); }
.app-cal__day.is-in-range { background: var(--leaf-100); border-radius: 0; color: var(--leaf-900); }
.app-cal__day.is-start { background: var(--slate-700); color: white; border-radius: 8px 0 0 8px; }
.app-cal__day.is-end   { background: var(--slate-700); color: white; border-radius: 0 8px 8px 0; }
.app-cal__day.is-start.is-end, .app-cal__day.is-start.is-only { border-radius: 8px; }

/* ─── Nearby mode toggle (Explore map) ──────────────────── */
.w2-nearby-bar {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 12;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border: 1px solid rgba(31,59,87,.10);
  border-radius: 999px;
  padding: 6px;
  display: flex; gap: 4px; align-items: center;
  box-shadow: 0 6px 18px rgba(14,26,36,.16);
}
.w2-nearby-bar__title {
  padding: 0 12px;
  font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-700);
}
.w2-nearby-bar__btn { padding: 8px 14px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; font: 600 12px var(--font-body); color: var(--fg-2); letter-spacing: .02em; }
.w2-nearby-bar__btn.is-on { background: var(--slate-700); color: white; }
.w2-nearby-bar__sep { width: 1px; height: 18px; background: var(--border-1); }
.w2-nearby-bar__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; cursor: pointer;
  border-radius: 999px;
}
.w2-nearby-bar__toggle:hover { background: var(--bone-100); }
.w2-nearby-bar__toggle-sw {
  width: 28px; height: 16px; border-radius: 999px; background: var(--bone-200);
  position: relative; transition: background 200ms; flex-shrink: 0;
}
.w2-nearby-bar__toggle-sw.is-on { background: var(--leaf-700); }
.w2-nearby-bar__toggle-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: white;
  transition: transform 200ms; box-shadow: 0 1px 2px rgba(14,26,36,.2);
}
.w2-nearby-bar__toggle-sw.is-on::after { transform: translateX(12px); }
.w2-nearby-bar__toggle-l { font: 500 11px var(--font-body); color: var(--slate-700); letter-spacing: .02em; }

.w2-nearby-radius {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed var(--leaf-700);
  background: rgba(43,124,4,.06);
  pointer-events: none;
}
.w2-nearby-pin {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--leaf-700); border: 3px solid white;
  box-shadow: 0 4px 12px rgba(14,26,36,.32);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.w2-nearby-pin::after { content: '★'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; }

/* ─── Booking / Order detail (modal) ───────────────────── */
.w2-receipt-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-receipt {
  background: var(--bg-paper); border-radius: 16px;
  padding: 0; box-shadow: var(--shadow-4);
  width: min(560px, 94vw); max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.w2-receipt__head { padding: 22px 26px 16px; background: linear-gradient(105deg, var(--bg-paper) 0%, var(--leaf-100) 100%); border-bottom: 1px solid var(--border-1); }
.w2-receipt__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-receipt__t { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 6px 0 4px; }
.w2-receipt__t em { font-style: italic; font-weight: 400; }
.w2-receipt__sub { font: 400 13px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.w2-receipt__body { flex: 1; overflow-y: auto; padding: 20px 26px; }
.w2-receipt__body::-webkit-scrollbar { width: 6px; }
.w2-receipt__body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.w2-receipt__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border-1); font: 400 13px var(--font-body); color: var(--fg-2); }
.w2-receipt__row:last-of-type { border-bottom: 0; }
.w2-receipt__row strong { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-receipt__sect-t { font-family: var(--font-display); font-size: 16px; font-weight: 500; font-style: italic; color: var(--slate-700); margin: 16px 0 8px; }
.w2-receipt__qr { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bone-100); border-radius: 12px; margin: 12px 0; }
.w2-receipt__qr-grid {
  width: 100px; height: 100px;
  background:
    linear-gradient(90deg, var(--slate-700) 6%, transparent 6% 12%, var(--slate-700) 12% 24%, transparent 24% 36%, var(--slate-700) 36% 42%, transparent 42% 54%, var(--slate-700) 54% 66%, transparent 66% 72%, var(--slate-700) 72% 84%, transparent 84% 96%, var(--slate-700) 96% 100%),
    linear-gradient(0deg, var(--slate-700) 6%, transparent 6% 12%, var(--slate-700) 12% 24%, transparent 24% 36%, var(--slate-700) 36% 42%, transparent 42% 54%, var(--slate-700) 54% 66%, transparent 66% 72%, var(--slate-700) 72% 84%, transparent 84% 96%, var(--slate-700) 96% 100%),
    white;
  background-blend-mode: multiply;
  border-radius: 6px;
  border: 4px solid white;
  box-shadow: 0 0 0 1px var(--border-1);
  flex-shrink: 0;
}
.w2-receipt__qr-body { flex: 1; }
.w2-receipt__qr-l { font: 600 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-receipt__qr-code { font-family: var(--font-mono); font-size: 18px; color: var(--slate-700); margin-top: 4px; letter-spacing: .04em; }
.w2-receipt__qr-meta { font: 400 12px var(--font-body); color: var(--fg-2); margin-top: 6px; line-height: 1.5; }

.w2-track { display: flex; flex-direction: column; gap: 0; margin: 12px 0; }
.w2-track-step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 6px 0; position: relative; }
.w2-track-step::before {
  content: ''; position: absolute; left: 13px; top: 22px;
  width: 2px; height: calc(100% + 6px);
  background: var(--border-2);
}
.w2-track-step:last-child::before { display: none; }
.w2-track-step__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bone-100); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fg-3);
  z-index: 1; position: relative;
}
.w2-track-step.is-done .w2-track-step__dot { background: var(--leaf-700); border-color: var(--leaf-700); color: white; }
.w2-track-step.is-done::before { background: var(--leaf-700); }
.w2-track-step.is-current .w2-track-step__dot {
  background: var(--leaf-700); border-color: var(--leaf-700); color: white;
  box-shadow: 0 0 0 6px rgba(43,124,4,.18);
}
.w2-track-step__body { padding: 4px 0 12px; }
.w2-track-step__name { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-track-step__when { font: 400 11.5px var(--font-mono); color: var(--fg-3); margin-top: 2px; letter-spacing: .03em; }
.w2-track-step.is-pending .w2-track-step__name { color: var(--fg-3); font-weight: 500; }

.w2-receipt__foot { padding: 14px 26px 18px; border-top: 1px solid var(--border-1); background: var(--bg-paper); display: flex; gap: 8px; }
.w2-receipt__foot button { flex: 1; height: 42px; border-radius: 10px; cursor: pointer; font: 600 12px var(--font-body); }
.w2-receipt__foot-ghost { background: var(--bone-100); border: 1px solid var(--border-1); color: var(--slate-700); }
.w2-receipt__foot-danger { background: 0; border: 1px solid var(--terracotta); color: var(--terracotta); }
.w2-receipt__foot-primary { background: var(--slate-700); border: 0; color: white; }

/* ─── Add-address inline form (extends existing selector) ─ */
.w2-addr-form { padding: 14px 0 0; border-top: 1px solid var(--border-1); margin-top: 8px; }
.w2-addr-form__t { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }


/* ============================================================================
   v2.6 — Sign-in, Notifications inbox, Empty states, Loading skeletons
   ============================================================================ */

/* ─── Sign-in modal (desktop) ────────────────────────── */
.w2-auth-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; animation: w2-fade 220ms; }
.w2-auth {
  background: var(--bg-paper); border-radius: 16px;
  box-shadow: var(--shadow-4);
  width: min(440px, 94vw);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.w2-auth__hero {
  height: 140px;
  background-image: url('https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?w=1200');
  background-size: cover; background-position: center;
  position: relative;
}
.w2-auth__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.25) 0%, rgba(14,26,36,.7) 100%); }
.w2-auth__hero-copy {
  position: absolute; left: 24px; right: 24px; bottom: 18px; color: white; z-index: 2;
}
.w2-auth__hero-lbl { font: 600 10.5px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.w2-auth__hero-t { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.018em; margin-top: 4px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.w2-auth__hero-t em { font-style: italic; font-weight: 400; }
.w2-auth__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); cursor: pointer; color: white; font-size: 16px; }
.w2-auth__tabs { display: flex; gap: 0; padding: 0 24px; margin-top: 18px; border-bottom: 1px solid var(--border-1); }
.w2-auth__tab { flex: 1; padding: 12px 0; background: 0; border: 0; cursor: pointer; font: 600 13px var(--font-body); color: var(--fg-3); position: relative; letter-spacing: .02em; }
.w2-auth__tab.is-on { color: var(--slate-700); }
.w2-auth__tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--slate-700); }
.w2-auth__body { padding: 18px 24px 22px; }
.w2-auth__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.w2-auth__field-l { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-auth__input { height: 44px; padding: 0 14px; background: white; border: 1px solid var(--border-2); border-radius: 10px; font: 500 14px var(--font-body); color: var(--slate-700); outline: 0; }
.w2-auth__input:focus { border-color: var(--leaf-700); box-shadow: 0 0 0 3px var(--leaf-100); }
.w2-auth__cta { width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--grad-cta-itinerary); color: white; font: 700 13px var(--font-body); cursor: pointer; margin-top: 4px; box-shadow: 0 6px 16px rgba(48,92,222,.28); }
.w2-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font: 500 10px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.w2-auth__divider::before, .w2-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border-1); }
.w2-auth__social { display: flex; gap: 8px; }
.w2-auth__social-btn {
  flex: 1; height: 42px; border-radius: 10px;
  background: white; border: 1px solid var(--border-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 12px var(--font-body); color: var(--slate-700);
}
.w2-auth__social-btn:hover { background: var(--bone-100); }
.w2-auth__alt { font: 400 12px var(--font-body); color: var(--fg-2); text-align: center; margin-top: 14px; }
.w2-auth__alt button { background: 0; border: 0; color: var(--slate-700); font: 600 12px var(--font-body); cursor: pointer; padding: 0; }
.w2-auth__legal { font: 400 11px var(--font-body); color: var(--fg-3); margin-top: 12px; text-align: center; line-height: 1.5; }
.w2-auth__legal a { color: var(--slate-600); text-decoration: underline; }

/* ─── Notifications drawer ───────────────────────────── */
.w2-notif-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px;
  background: var(--bg-paper);
  z-index: 71;
  box-shadow: -16px 0 50px rgba(14,26,36,.28);
  display: flex; flex-direction: column;
  animation: w2-detail-in 320ms var(--ease-out);
}
.w2-notif__head { display: flex; align-items: center; gap: 12px; padding: 24px 26px 14px; border-bottom: 1px solid var(--border-1); }
.w2-notif__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); flex: 1; }
.w2-notif__title em { font-style: italic; font-weight: 400; }
.w2-notif__close { width: 32px; height: 32px; border-radius: 50%; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; color: var(--slate-700); font-size: 16px; }
.w2-notif__filter { display: flex; gap: 4px; padding: 12px 26px; border-bottom: 1px solid var(--border-1); }
.w2-notif__chip { padding: 5px 12px; border-radius: 999px; background: 0; border: 1px solid var(--border-1); font: 600 11px var(--font-body); color: var(--slate-700); cursor: pointer; }
.w2-notif__chip.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }
.w2-notif__body { flex: 1; overflow-y: auto; padding: 8px 0; }
.w2-notif {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  position: relative;
}
.w2-notif:hover { background: var(--bone-100); }
.w2-notif.is-unread::before { content: ''; position: absolute; left: 18px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-700); }
.w2-notif__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.w2-notif__icon--booking { background: var(--leaf-100); color: var(--leaf-700); }
.w2-notif__icon--order   { background: var(--sky-100); color: var(--sky-700); }
.w2-notif__icon--host    { background: var(--lavender-100); color: var(--lavender-700); }
.w2-notif__icon--alert   { background: rgba(229,169,59,.18); color: #8B5A2B; }
.w2-notif__body-c { min-width: 0; }
.w2-notif__name { font: 600 13.5px var(--font-body); color: var(--slate-700); margin-bottom: 2px; }
.w2-notif__sub { font: 400 12.5px var(--font-body); color: var(--fg-2); line-height: 1.5; white-space: normal; }
.w2-notif__when { font: 500 10.5px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; flex-shrink: 0; align-self: flex-start; padding-top: 4px; white-space: nowrap; }
.w2-notif__empty { padding: 60px 30px; text-align: center; color: var(--fg-3); }
.w2-notif__empty-h { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 500; color: var(--slate-700); margin: 0 0 6px; }
.w2-notif__empty-p { font: 400 13px var(--font-body); margin: 0; line-height: 1.55; }
.w2-notif__foot { padding: 14px 26px 18px; border-top: 1px solid var(--border-1); background: var(--bg-paper); }
.w2-notif__foot button { width: 100%; padding: 10px; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 8px; cursor: pointer; font: 600 12px var(--font-body); color: var(--slate-700); }

/* Bell with badge in nav */
.w2-nav__bell { position: relative; }
.w2-nav__bell-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cta-book); border: 2px solid var(--bg-page); }
.w2-nav--dark .w2-nav__bell-dot { border-color: rgba(14,26,36,.5); }

/* ─── Empty state primitive (reusable) ────────────────── */
.w2-empty {
  padding: 60px 30px 40px;
  text-align: center;
  color: var(--fg-3);
  max-width: 360px;
  margin: 0 auto;
}
.w2-empty__art {
  width: 88px; height: 88px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--bone-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: var(--fg-3);
}
.w2-empty__h { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 500; letter-spacing: -.014em; color: var(--slate-700); margin: 0 0 6px; }
.w2-empty__p { font: 400 13.5px var(--font-body); color: var(--fg-2); margin: 0 0 18px; line-height: 1.6; }
.w2-empty__cta {
  display: inline-block;
  padding: 10px 22px; border-radius: 999px;
  background: var(--slate-700); color: white; border: 0;
  font: 600 12.5px var(--font-body); cursor: pointer; letter-spacing: .02em;
}

/* ─── Loading skeletons ──────────────────────────────── */
.w2-skel {
  background: linear-gradient(90deg, var(--bone-100) 0%, var(--bone-200) 50%, var(--bone-100) 100%);
  background-size: 200% 100%;
  animation: w2-skel-pulse 1500ms ease-in-out infinite;
  border-radius: 6px;
}
@keyframes w2-skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.w2-skel--card { height: 200px; border-radius: 12px; }
.w2-skel--text { height: 14px; margin-bottom: 8px; }
.w2-skel--text:last-child { width: 60%; }
.w2-skel--title { height: 24px; width: 70%; margin-bottom: 10px; }
.w2-skel--circle { width: 40px; height: 40px; border-radius: 50%; }
.w2-skel-row { display: flex; gap: 12px; padding: 12px 0; align-items: center; }
.w2-skel-row__body { flex: 1; min-width: 0; }

/* ─── Mobile auth sheet ──────────────────────────────── */
.app-auth-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-paper);
  border-radius: 16px 16px 0 0;
  z-index: 95;
  padding: 0 0 28px;
  max-height: 90%; overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(14,26,36,.25);
  animation: v2-detail-in 280ms var(--ease-out);
}
.app-auth-sheet__hero { height: 120px; background-image: url('https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?w=1200'); background-size: cover; background-position: center; position: relative; border-radius: 16px 16px 0 0; }
.app-auth-sheet__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,.25), rgba(14,26,36,.7)); border-radius: 16px 16px 0 0; }
.app-auth-sheet__handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.5); z-index: 3; }
.app-auth-sheet__hero-copy { position: absolute; left: 18px; right: 18px; bottom: 14px; color: white; z-index: 2; }
.app-auth-sheet__hero-t { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.014em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.app-auth-sheet__hero-t em { font-style: italic; font-weight: 400; }
.app-auth-sheet__body { padding: 14px 16px 0; }

/* ─── Mobile notifications sheet ──────────────────────── */
.app-notif-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 60px;
  background: var(--bg-paper);
  z-index: 92;
  display: flex; flex-direction: column;
  animation: v2-detail-in 280ms var(--ease-out);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.app-notif-sheet__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-1); }
.app-notif-sheet__close { width: 32px; height: 32px; border-radius: 50%; background: var(--bone-100); border: 1px solid var(--border-1); cursor: pointer; color: var(--slate-700); font-size: 14px; }
.app-notif-sheet__t { flex: 1; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); }
.app-notif-sheet__t em { font-style: italic; font-weight: 400; }
.app-notif-sheet__body { flex: 1; overflow-y: auto; }


/* ============================================================================
   v2.7 — Product display page (PDP), Editorial / FAQ / Legal pages,
          Filters bar, Search results
   ============================================================================ */

/* ─── Product display page ──────────────────────────────── */
.w2-pdp { background: var(--bg-page); min-height: calc(100vh - 64px); }
.w2-pdp__inner { max-width: 1320px; margin: 0 auto; padding: 24px max(28px, 4vw) 64px; }
.w2-pdp__crumbs { display: flex; align-items: center; gap: 6px; font: 500 12px var(--font-body); color: var(--fg-3); margin-bottom: 18px; }
.w2-pdp__crumbs a { color: var(--fg-2); cursor: pointer; }
.w2-pdp__crumbs a:hover { color: var(--slate-700); }
.w2-pdp__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.w2-pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w2-pdp__gallery-main { grid-column: 1/3; aspect-ratio: 1.4/1; background-size: cover; background-position: center; border-radius: 14px; overflow: hidden; cursor: zoom-in; position: relative; }
.w2-pdp__gallery-tn { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: border-color 200ms; }
.w2-pdp__gallery-tn.is-on { border-color: var(--leaf-700); }
.w2-pdp__info { position: sticky; top: 84px; }
.w2-pdp__cat { font: 600 10.5px var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.w2-pdp__name { font-family: var(--font-display); font-size: 38px; font-weight: 500; letter-spacing: -.024em; color: var(--slate-700); margin: 6px 0 8px; line-height: 1.05; }
.w2-pdp__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.w2-pdp__price strong { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--slate-700); }
.w2-pdp__price del { font: 400 14px var(--font-body); color: var(--fg-3); }
.w2-pdp__price span { font: 600 11px var(--font-body); padding: 3px 8px; background: var(--leaf-100); color: var(--leaf-700); border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; }
.w2-pdp__vendor { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); margin-bottom: 18px; cursor: pointer; }
.w2-pdp__vendor-img { width: 44px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.w2-pdp__vendor-name { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-pdp__vendor-loc { font: 400 11.5px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; margin-top: 2px; }
.w2-pdp__vendor-cta { background: 0; border: 1px solid var(--border-2); padding: 7px 14px; border-radius: 999px; font: 600 11px var(--font-body); color: var(--slate-700); cursor: pointer; margin-left: auto; }

.w2-pdp__opts { margin-bottom: 18px; }
.w2-pdp__opt-l { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-pdp__opt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.w2-pdp__opt {
  padding: 8px 14px; border-radius: 8px;
  background: white; border: 1px solid var(--border-2);
  font: 500 13px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.w2-pdp__opt.is-on { background: var(--leaf-100); border-color: var(--leaf-700); color: var(--leaf-800); font-weight: 600; }

.w2-pdp__qty-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.w2-pdp__qty { display: inline-flex; align-items: center; background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 999px; }
.w2-pdp__qty button { width: 36px; height: 36px; background: 0; border: 0; cursor: pointer; font-size: 16px; color: var(--slate-700); }
.w2-pdp__qty span { padding: 0 12px; font: 600 14px var(--font-mono); color: var(--slate-700); min-width: 24px; text-align: center; }
.w2-pdp__add { flex: 1; height: 50px; border-radius: 12px; background: var(--slate-700); color: white; border: 0; font: 700 13px var(--font-body); cursor: pointer; }
.w2-pdp__add--inverted { background: var(--grad-cta-book); box-shadow: 0 6px 16px rgba(11,218,81,.28); }
.w2-pdp__wishlist { width: 50px; height: 50px; border: 1px solid var(--border-2); border-radius: 12px; background: 0; cursor: pointer; color: var(--slate-700); font-size: 18px; }
.w2-pdp__wishlist.is-on { background: var(--leaf-100); color: var(--leaf-700); border-color: var(--leaf-700); }

.w2-pdp__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.w2-pdp__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bone-100); font: 500 11px var(--font-body); color: var(--fg-2); }
.w2-pdp__pill span { font-size: 14px; }

.w2-pdp__desc h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--slate-700); margin: 18px 0 8px; letter-spacing: -.014em; }
.w2-pdp__desc p { font: 400 14px var(--font-body); color: var(--fg-1); line-height: 1.7; }

.w2-pdp__below { margin-top: 56px; }
.w2-pdp__rev-summary { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 20px 24px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px; margin-bottom: 24px; }
.w2-pdp__rev-score { font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--slate-700); line-height: 1; }
.w2-pdp__rev-stars { font: 500 14px var(--font-mono); color: var(--leaf-700); margin: 6px 0 4px; }
.w2-pdp__rev-count { font: 400 12px var(--font-body); color: var(--fg-3); }
.w2-pdp__rev-bars { display: flex; flex-direction: column; gap: 6px; }
.w2-pdp__rev-bar { display: grid; grid-template-columns: 18px 1fr 36px; gap: 12px; align-items: center; font: 500 12px var(--font-mono); color: var(--fg-3); }
.w2-pdp__rev-bar-fill { height: 8px; border-radius: 4px; background: var(--bone-200); position: relative; overflow: hidden; }
.w2-pdp__rev-bar-fill::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--leaf-600); }

.w2-pdp__rev { padding: 16px 20px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 12px; margin-bottom: 10px; }
.w2-pdp__rev-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.w2-pdp__rev-author { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-pdp__rev-when { font: 500 11px var(--font-mono); color: var(--fg-3); }
.w2-pdp__rev-body { font: 400 13px var(--font-body); color: var(--fg-2); line-height: 1.6; }

.w2-pdp__related { margin-top: 48px; }

/* ─── Editorial pages (FAQ / About / Legal / Help) ────── */
.w2-edit { background: var(--bg-page); min-height: calc(100vh - 64px); padding: 64px max(28px, 4vw) 80px; }
.w2-edit__inner { max-width: 760px; margin: 0 auto; }
.w2-edit__crumb { font: 600 10.5px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.w2-edit__title { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 76px); font-weight: 500; letter-spacing: -.028em; color: var(--slate-700); margin: 0 0 16px; line-height: 1.0; }
.w2-edit__title em { font-style: italic; font-weight: 400; }
.w2-edit__lede { font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.55; color: var(--fg-2); margin-bottom: 40px; }
.w2-edit__updated { font: 500 11.5px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; padding-top: 14px; border-top: 1px solid var(--border-1); margin-top: 40px; }
.w2-edit__nav { position: sticky; top: 84px; padding: 16px 18px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px; }
.w2-edit__nav-l { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-edit__nav a { display: block; padding: 6px 0; font: 500 13px var(--font-body); color: var(--fg-2); text-decoration: none; cursor: pointer; }
.w2-edit__nav a:hover, .w2-edit__nav a.is-on { color: var(--leaf-700); }
.w2-edit__layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; }

.w2-faq { display: flex; flex-direction: column; gap: 4px; }
.w2-faq__item { background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; }
.w2-faq__q { width: 100%; text-align: left; padding: 18px 22px; background: 0; border: 0; cursor: pointer; font: 600 15px var(--font-body); color: var(--slate-700); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.w2-faq__q:hover { background: var(--bone-100); }
.w2-faq__chev { width: 26px; height: 26px; border-radius: 50%; background: var(--bone-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--slate-700); transition: transform 200ms; }
.w2-faq__item.is-open .w2-faq__chev { transform: rotate(45deg); background: var(--leaf-100); color: var(--leaf-700); }
.w2-faq__a { padding: 0 22px 18px; font: 400 14px var(--font-body); line-height: 1.7; color: var(--fg-1); display: none; }
.w2-faq__item.is-open .w2-faq__a { display: block; }

/* Markdown / rich-content (editorial body) */
.w2-rich h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 32px 0 12px; line-height: 1.15; }
.w2-rich h2 em { font-style: italic; font-weight: 400; }
.w2-rich h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--slate-700); margin: 22px 0 8px; }
.w2-rich p { font: 400 15px var(--font-body); line-height: 1.7; color: var(--fg-1); margin-bottom: 14px; }
.w2-rich ul, .w2-rich ol { padding-left: 22px; margin: 8px 0 16px; }
.w2-rich li { font: 400 14px var(--font-body); line-height: 1.65; color: var(--fg-1); margin-bottom: 6px; }
.w2-rich a { color: var(--alpine-600); text-decoration: underline; text-underline-offset: 2px; }
.w2-rich blockquote { padding-left: 18px; border-left: 3px solid var(--leaf-700); font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--fg-2); margin: 18px 0; }
.w2-rich code { font-family: var(--font-mono); font-size: 13px; padding: 2px 6px; background: var(--bone-100); border-radius: 4px; color: var(--slate-700); }
.w2-rich hr { border: 0; border-top: 1px solid var(--border-1); margin: 28px 0; }

/* ─── Filters bar (shop / explore lists) ────────────── */
.w2-filtbar {
  position: sticky; top: 64px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px max(28px, 4vw);
  background: rgba(252,250,246,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-1);
}
.w2-filtbar__group { display: inline-flex; align-items: center; gap: 6px; }
.w2-filtbar__chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: 0; font: 600 12px var(--font-body); color: var(--slate-700); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.w2-filtbar__chip.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }
.w2-filtbar__chip-count { font: 700 10px var(--font-mono); padding: 1px 5px; background: rgba(0,0,0,.18); border-radius: 8px; }
.w2-filtbar__sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--font-body); color: var(--fg-2); }
.w2-filtbar__sort select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: white; font: 600 12px var(--font-body); color: var(--slate-700); }

/* ─── Search results ──────────────────────────────── */
.w2-srh { background: var(--bg-page); min-height: calc(100vh - 64px); padding: 32px max(28px, 4vw) 80px; }
.w2-srh__inner { max-width: 1320px; margin: 0 auto; }
.w2-srh__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 22px; }
.w2-srh__title { font-family: var(--font-display); font-size: 38px; font-weight: 500; letter-spacing: -.024em; color: var(--slate-700); margin: 0; }
.w2-srh__title em { font-style: italic; font-weight: 400; }
.w2-srh__count { font: 500 13px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.w2-srh__sect { margin-bottom: 32px; }
.w2-srh__sect-t { font-family: var(--font-display); font-size: 22px; font-weight: 500; font-style: italic; color: var(--slate-700); margin: 0 0 14px; letter-spacing: -.014em; }
.w2-srh__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ─── PDP / editorial mobile ────────────────────────── */
.app-pdp { position: absolute; inset: 0; background: var(--bg-page); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 100px; z-index: 50; }
.app-pdp::-webkit-scrollbar { display: none; }
.app-pdp__hero { aspect-ratio: 1; width: 100%; background-size: cover; background-position: center; position: relative; }
.app-pdp__back { position: absolute; top: 60px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid rgba(31,59,87,.10); cursor: pointer; color: var(--slate-700); }
.app-pdp__wish { position: absolute; top: 60px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid rgba(31,59,87,.10); cursor: pointer; color: var(--slate-700); font-size: 16px; }
.app-pdp__body { padding: 18px 18px 0; }
.app-pdp__cat { font: 600 9.5px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.app-pdp__name { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 4px 0 6px; }
.app-pdp__price { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); margin-bottom: 14px; }
.app-pdp__sticky { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 70; background: var(--slate-800); color: white; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.app-pdp__sticky-p { flex: 1; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.app-pdp__sticky-btn { padding: 10px 18px; border-radius: 999px; background: var(--himlocal-green); color: #0F2410; border: 0; font: 700 12.5px var(--font-body); cursor: pointer; }

.app-edit { position: absolute; inset: 0; background: var(--bg-page); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 60px 16px 60px; z-index: 50; }
.app-edit::-webkit-scrollbar { display: none; }
.app-edit__back { position: absolute; top: 60px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-paper); border: 1px solid var(--border-1); cursor: pointer; color: var(--slate-700); }
.app-edit__crumb { font: 600 9.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin: 10px 0 6px; padding-left: 50px; }
.app-edit__title { font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -.024em; color: var(--slate-700); margin: 0 0 12px; line-height: 1.05; }
.app-edit__title em { font-style: italic; font-weight: 400; }
.app-edit__lede { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0 0 24px; }


/* ============================================================================
   v2.8 — Image gallery / lightbox + Onboarding tour
   ============================================================================ */

/* ─── Lightbox (desktop + mobile) ─────────────────────── */
.w2-lb-back { position: fixed; inset: 0; background: rgba(14,26,36,.95); z-index: 110; animation: w2-fade 220ms; display: flex; flex-direction: column; }
.app-lb-back { position: absolute; inset: 0; background: rgba(14,26,36,.96); z-index: 100; display: flex; flex-direction: column; animation: v2-fade-in 220ms; }
.w2-lb__head, .app-lb__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; color: white; }
.w2-lb__head { padding: 22px 36px; }
.app-lb__head { padding: 60px 16px 14px; }
.w2-lb__count { font: 600 12px var(--font-mono); letter-spacing: .12em; opacity: .85; }
.w2-lb__close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: white; font-size: 16px; cursor: pointer; }
.w2-lb__main, .app-lb__main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 36px; min-height: 0; }
.app-lb__main { padding: 0 16px; }
.w2-lb__img, .app-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.w2-lb__nav { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: white; font-size: 22px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.w2-lb__nav--prev { left: 24px; }
.w2-lb__nav--next { right: 24px; }
.w2-lb__nav:hover { background: rgba(255,255,255,.22); }
.w2-lb__nav:disabled { opacity: .3; cursor: not-allowed; }
.w2-lb__thumbs { display: flex; gap: 6px; justify-content: center; padding: 18px 28px 28px; overflow-x: auto; }
.app-lb__thumbs { display: flex; gap: 6px; padding: 12px 16px 30px; overflow-x: auto; scrollbar-width: none; }
.w2-lb__thumb, .app-lb__thumb { width: 64px; height: 64px; background-size: cover; background-position: center; border-radius: 6px; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; opacity: .6; }
.w2-lb__thumb.is-on, .app-lb__thumb.is-on { border-color: white; opacity: 1; }
.w2-lb__caption { color: rgba(255,255,255,.7); font: 400 12px var(--font-body); text-align: center; padding: 0 36px 8px; }

/* PDP gallery image cursor → zoom-in */
.w2-pdp__gallery-main { cursor: zoom-in; }

/* ─── Onboarding tour overlay ────────────────────────── */
.w2-tour-back { position: fixed; inset: 0; background: rgba(14,26,36,.55); z-index: 115; pointer-events: none; animation: w2-fade 220ms; }
.w2-tour-card {
  position: fixed; z-index: 116;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-paper);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(14,26,36,.45);
  padding: 22px 24px 18px;
  pointer-events: auto;
}
.w2-tour-card__step { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-tour-card__t { font-family: var(--font-display); font-size: 22px; font-weight: 500; font-style: italic; letter-spacing: -.014em; color: var(--slate-700); margin: 4px 0 8px; line-height: 1.2; }
.w2-tour-card__body { font: 400 13.5px var(--font-body); color: var(--fg-2); line-height: 1.6; margin-bottom: 16px; }
.w2-tour-card__row { display: flex; align-items: center; justify-content: space-between; }
.w2-tour-card__dots { display: flex; gap: 6px; }
.w2-tour-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.w2-tour-card__dot.is-on { background: var(--leaf-700); }
.w2-tour-card__row button { font: 600 11.5px var(--font-body); letter-spacing: .04em; cursor: pointer; padding: 8px 14px; border-radius: 999px; }
.w2-tour-card__row .skip { background: 0; border: 0; color: var(--fg-3); }
.w2-tour-card__row .next { background: var(--slate-700); color: white; border: 0; }
.w2-tour-card__arrow {
  position: absolute; width: 16px; height: 16px;
  background: var(--bg-paper);
  transform: rotate(45deg);
}
.w2-tour-card__arrow--top { top: -8px; left: 50%; margin-left: -8px; box-shadow: -2px -2px 4px rgba(14,26,36,.06); }
.w2-tour-card__arrow--bottom { bottom: -8px; left: 50%; margin-left: -8px; box-shadow: 2px 2px 4px rgba(14,26,36,.06); }
.w2-tour-card__arrow--left { left: -8px; top: 50%; margin-top: -8px; box-shadow: -2px 2px 4px rgba(14,26,36,.06); }

/* Highlight the target element under the tour */
.w2-tour-target {
  position: relative;
  z-index: 116;
  box-shadow: 0 0 0 4px rgba(43,124,4,.6), 0 0 0 9999px rgba(14,26,36,.55);
  border-radius: 12px;
  transition: box-shadow 240ms var(--ease-out);
}

/* Mobile nearby pill */
.app-nearby-pill {
  position: absolute; top: 104px; left: 14px; right: 14px;
  z-index: 16;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border: 1px solid rgba(31,59,87,.10);
  border-radius: 999px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(14,26,36,.14);
}
.app-nearby-pill__icon { color: var(--leaf-700); font-size: 14px; }
.app-nearby-pill__body { flex: 1; min-width: 0; }
.app-nearby-pill__l1 { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.app-nearby-pill__l2 { font: 600 11.5px var(--font-body); color: var(--slate-700); }
.app-nearby-pill__cta { background: 0; border: 0; color: var(--leaf-700); font: 600 10px var(--font-body); letter-spacing: .14em; cursor: pointer; }

.app-nearby-bar {
  position: absolute; top: 104px; left: 14px; right: 14px;
  z-index: 17;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border: 1px solid rgba(31,59,87,.10);
  border-radius: 999px;
  padding: 6px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 18px rgba(14,26,36,.16);
}
.app-nearby-bar__title { padding: 0 8px; font: 600 9.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-700); flex: 1; }
.app-nearby-bar__title em { color: var(--leaf-700); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }
.app-nearby-bar__sw {
  width: 26px; height: 14px; border-radius: 999px; background: var(--bone-200);
  position: relative; flex-shrink: 0; transition: background 200ms;
}
.app-nearby-bar__sw.is-on { background: var(--leaf-700); }
.app-nearby-bar__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: white; transition: transform 200ms; }
.app-nearby-bar__sw.is-on::after { transform: translateX(12px); }

/* ============================================================
   WEB · v2.8 — Action buttons, sticky CTA bar, reorder controls,
   richer PDP, special-requests block, review list.
   These supersede the legacy .hla-* mobile classes that were
   wrongly being used in the web kit.
   ============================================================ */

/* ─── Button system ─────────────────────────────────────── */
.w2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 0; border-radius: 10px;
  font: 600 13.5px var(--font-body); letter-spacing: -.005em;
  color: var(--slate-700); background: white;
  cursor: pointer; white-space: nowrap;
  transition: transform 120ms var(--ease-out), box-shadow 200ms, background 160ms, border-color 160ms;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(14,26,36,.08);
}
.w2-btn:active { transform: translateY(1px); }
.w2-btn--lg { height: 50px; padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.w2-btn--sm { height: 36px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }
@media (max-height: 720px) {
  .w2-actionbar .w2-btn--lg { height: 44px; font-size: 13.5px; }
}
@media (max-height: 620px) {
  .w2-actionbar .w2-btn--lg { height: 40px; padding: 0 14px; font-size: 12.5px; border-radius: 10px; }
}
.w2-btn--block { width: 100%; }
.w2-btn__icon { display: inline-flex; align-items: center; justify-content: center; }
.w2-btn__sub  { font: 500 11px var(--font-body); opacity: .76; letter-spacing: .02em; }

.w2-btn--ghost  { background: white; color: var(--slate-700); border: 1px solid var(--border-2); }
.w2-btn--ghost:hover { border-color: var(--slate-700); background: var(--bone-100); }
.w2-btn--quiet  { background: var(--bone-100); color: var(--slate-700); border: 1px solid var(--border-1); }
.w2-btn--quiet:hover { background: white; border-color: var(--slate-500); }

.w2-btn--book {
  background: var(--grad-cta-book); color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 6px 18px rgba(11,218,81,.32), 0 2px 4px rgba(7,184,66,.18);
  letter-spacing: .002em;
}
.w2-btn--book:hover { filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,.36) inset, 0 10px 24px rgba(11,218,81,.42); }
.w2-btn--itinerary {
  background: var(--cta-itinerary-tint); color: var(--cta-itinerary-deep);
  border: 1px solid rgba(48,92,222,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 1px 2px rgba(48,92,222,.10);
}
.w2-btn--itinerary:hover { background: white; border-color: var(--cta-itinerary); }
.w2-btn--itinerary-strong {
  background: var(--grad-cta-itinerary); color: white; border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(48,92,222,.32);
}
.w2-btn--itinerary-strong:hover { filter: brightness(1.04); }
.w2-btn--menu {
  background: var(--grad-soft-lavender); color: var(--ink-on-soft-lavender);
  border: 1px solid rgba(123,111,203,.20);
}
.w2-btn--menu:hover { filter: brightness(1.03); }
.w2-btn--dark { background: var(--slate-700); color: white; }
.w2-btn--dark:hover { background: var(--slate-800); }

/* Compatibility shim — legacy .hla-btn references rendered by web
   files still pick up the new look while we migrate the rest. */
.w2-inline-detail .hla-btn,
.w2-inline-detail .hla-btn--primary,
.w2-inline-detail .hla-btn--itinerary,
.w2-inline-detail .hla-btn--lavender { all: unset; }

/* ─── Hero action bar inside the inline detail panel ───── */
.w2-actionbar {
  flex-shrink: 0;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border-1);
  background: linear-gradient(180deg, var(--bg-paper) 0%, white 100%);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.w2-actionbar__priceline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.w2-actionbar__price-l { font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.w2-actionbar__price-v {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--slate-700); letter-spacing: -.018em;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.w2-actionbar__price-v small { font: 500 11.5px var(--font-body); color: var(--fg-3); letter-spacing: .02em; }
.w2-actionbar__price-nights { font: 500 11.5px var(--font-mono); color: var(--leaf-700); letter-spacing: .04em; }
.w2-actionbar__row {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px;
}
.w2-actionbar__row--single { grid-template-columns: 1fr; }
.w2-actionbar__note { font: 400 11.5px var(--font-body); color: var(--fg-3); display: flex; gap: 6px; align-items: center; }
.w2-actionbar__note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-500); }
/* At short panel heights, drop the secondary "Direct rate" block so the
   CTAs are never clipped — the same source label appears in the Book
   button's subtitle anyway. */
@media (max-height: 720px) {
  .w2-actionbar { padding: 10px 18px 12px; gap: 8px; }
  .w2-actionbar__priceline > div + div { display: none; }
  .w2-actionbar__price-v { font-size: 19px; }
}
@media (max-height: 620px) {
  .w2-inline-detail__hero { height: 120px; }
  .w2-actionbar__priceline { display: none; }
}

/* ─── Itinerary stop reorder controls ──────────────────── */
.w2-stop {
  display: grid; grid-template-columns: auto 64px 1fr auto; gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: white; border: 1px solid var(--border-1); border-radius: 12px;
  cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms;
  margin-bottom: 8px;
  position: relative;
}
.w2-stop:hover { border-color: var(--slate-500); box-shadow: 0 4px 14px rgba(14,26,36,.06); }
.w2-stop--fixed { background: var(--leaf-100); border-color: rgba(44,124,4,.22); }
.w2-stop--cafe  { background: var(--bg-paper); }
.w2-stop__handle {
  width: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: grab; user-select: none;
}
.w2-stop__handle:active { cursor: grabbing; }
.w2-stop__hbtn {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-1); background: var(--bg-paper);
  border-radius: 6px;
  font: 600 11px var(--font-body); color: var(--fg-2);
  cursor: pointer; padding: 0; line-height: 1;
}
.w2-stop__hbtn:hover:not(:disabled) { border-color: var(--slate-500); color: var(--slate-700); }
.w2-stop__hbtn:disabled { opacity: .35; cursor: not-allowed; }
.w2-stop__hdrag { font: 500 10px var(--font-mono); color: var(--fg-4); letter-spacing: .04em; user-select: none; }
.w2-stop__img { width: 64px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.w2-stop__body { min-width: 0; }
.w2-stop__name { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--slate-700); letter-spacing: -.012em; line-height: 1.2; }
.w2-stop__meta { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; margin-top: 4px; }
.w2-stop__badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(44,124,4,.12); color: var(--leaf-800); font: 600 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.w2-stop__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-700); }
.w2-stop__tools { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.w2-stop__cta {
  height: 32px; padding: 0 12px;
  background: var(--grad-cta-book); color: white;
  border: 0; border-radius: 8px;
  font: 600 11.5px var(--font-body); cursor: pointer;
  white-space: nowrap;
}
.w2-stop__cta:hover { filter: brightness(1.04); }
.w2-stop__remove {
  width: 28px; height: 28px;
  border: 1px solid var(--border-1); background: white; color: var(--fg-3);
  border-radius: 8px; cursor: pointer;
  font: 500 14px var(--font-body); padding: 0; line-height: 1;
}
.w2-stop__remove:hover { color: var(--terracotta); border-color: var(--terracotta); }

.w2-stop__move {
  height: 26px; padding: 0 10px;
  background: var(--bone-100); border: 1px solid var(--border-1);
  border-radius: 8px; color: var(--slate-700);
  font: 500 10.5px var(--font-body); letter-spacing: .04em;
  cursor: pointer;
}
.w2-stop__move:hover { background: white; border-color: var(--slate-700); }

/* Move-to-day picker (absolute, anchored under the stop card) */
.w2-stop__movemenu {
  position: absolute;
  top: 100%; right: 6px; margin-top: 6px;
  width: 240px;
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(14,26,36,.18);
  padding: 8px;
  z-index: 40;
}
.w2-stop__movemenu-h {
  font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); padding: 6px 8px;
  border-bottom: 1px solid var(--border-1); margin-bottom: 4px;
}
.w2-stop__movemenu-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center;
  width: 100%; padding: 8px 10px; border: 0; background: transparent;
  border-radius: 7px; text-align: left; cursor: pointer;
  font: 500 12.5px var(--font-body); color: var(--slate-700);
}
.w2-stop__movemenu-row:hover:not(:disabled) { background: var(--bone-100); }
.w2-stop__movemenu-row:disabled { opacity: .42; cursor: not-allowed; }
.w2-stop__movemenu-d { font: 600 10.5px var(--font-mono); letter-spacing: .04em; color: var(--fg-3); }
.w2-stop__movemenu-l { font: 500 13px var(--font-body); font-style: italic; color: var(--slate-700); }
.w2-stop__movemenu-c { font: 500 10px var(--font-mono); color: var(--fg-4); }
.w2-stop__movemenu-cancel {
  width: 100%; padding: 6px; border: 0;
  background: transparent; color: var(--fg-3); cursor: pointer;
  font: 600 11px var(--font-body); letter-spacing: .04em;
  border-top: 1px solid var(--border-1); margin-top: 4px;
}

/* Make sure the left explore panel actually scrolls inside the shell */
.w2-ex-panel { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.w2-ex-panel::-webkit-scrollbar { width: 8px; }
.w2-ex-panel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* ─── PDP — fresh, layered ─────────────────────────────── */
.w2-pdp { max-width: 1240px; margin: 0 auto; padding: 28px 32px 80px; }
.w2-pdp__crumb { font: 500 12px var(--font-body); color: var(--fg-3); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.w2-pdp__crumb-back { background: transparent; border: 0; padding: 0; color: var(--leaf-700); font: 600 12px var(--font-body); cursor: pointer; }
.w2-pdp__crumb-sep { color: var(--fg-4); }

.w2-pdp__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px;
  align-items: start;
}
.w2-pdp__gal { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.w2-pdp__gal-thumbs { display: flex; flex-direction: column; gap: 8px; }
.w2-pdp__gal-thumb {
  width: 84px; height: 84px; border-radius: 10px;
  background-size: cover; background-position: center;
  cursor: pointer; border: 2px solid transparent; padding: 0;
  transition: border-color 160ms;
}
.w2-pdp__gal-thumb.is-on { border-color: var(--slate-700); }
.w2-pdp__gal-main {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bone-100); border-radius: 14px;
  background-size: cover; background-position: center;
  overflow: hidden;
  cursor: zoom-in;
}
.w2-pdp__gal-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 0; cursor: pointer;
  font: 500 14px var(--font-body); color: var(--slate-700);
  box-shadow: 0 4px 14px rgba(14,26,36,.18);
}
.w2-pdp__gal-pill {
  position: absolute; left: 14px; top: 14px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(252,250,246,.94); color: var(--slate-700);
  font: 600 9.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase;
}

.w2-pdp__rail { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.w2-pdp__head { }
.w2-pdp__vendor-link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leaf-700);
}
.w2-pdp__name {
  font-family: var(--font-display); font-size: 36px; font-weight: 500;
  line-height: 1.05; letter-spacing: -.022em; color: var(--slate-700);
  margin: 10px 0 6px;
}
.w2-pdp__name em { font-style: italic; font-weight: 400; }
.w2-pdp__sub { font: 400 14.5px var(--font-body); color: var(--fg-2); line-height: 1.55; }
.w2-pdp__rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.w2-pdp__rating-stars { color: var(--saffron); font-size: 14px; letter-spacing: 2px; }
.w2-pdp__rating-n { font: 500 12.5px var(--font-mono); color: var(--fg-3); }
.w2-pdp__rating-link { background: 0; border: 0; padding: 0; font: 600 12px var(--font-body); color: var(--leaf-700); cursor: pointer; }

.w2-pdp__price {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--border-1);
}
.w2-pdp__price-v { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--slate-700); letter-spacing: -.018em; }
.w2-pdp__price-strike { font: 500 16px var(--font-body); color: var(--fg-4); text-decoration: line-through; }
.w2-pdp__price-save { font: 600 11.5px var(--font-body); color: var(--leaf-700); padding: 3px 8px; background: var(--leaf-100); border-radius: 999px; letter-spacing: .04em; }

.w2-pdp__opt-group { margin-top: 18px; }
.w2-pdp__opt-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font: 600 10.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 10px;
}
.w2-pdp__opt-head strong { color: var(--slate-700); font: 600 13px var(--font-body); letter-spacing: 0; text-transform: none; }
.w2-pdp__opt-help { background: 0; border: 0; padding: 0; font: 500 11.5px var(--font-body); color: var(--leaf-700); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.w2-pdp__opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-pdp__opt {
  padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 10px;
  background: white; cursor: pointer;
  font: 500 13px var(--font-body); color: var(--slate-700);
  transition: all 160ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.w2-pdp__opt:hover { border-color: var(--slate-500); }
.w2-pdp__opt.is-on { border-color: var(--slate-700); background: var(--bone-100); }
.w2-pdp__opt.is-out { opacity: .42; text-decoration: line-through; cursor: not-allowed; }
.w2-pdp__opt-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(31,59,87,.18); }
.w2-pdp__opt-meta { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: .03em; }

.w2-pdp__special {
  margin-top: 18px; padding: 14px;
  background: var(--bone-100); border: 1px solid var(--border-1); border-radius: 10px;
}
.w2-pdp__special-l {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 8px;
}
.w2-pdp__special-tag { font: 500 10px var(--font-body); padding: 2px 7px; border-radius: 999px; background: rgba(31,59,87,.08); color: var(--fg-3); letter-spacing: .04em; text-transform: none; }
.w2-pdp__special textarea {
  width: 100%; min-height: 64px;
  padding: 10px 12px; border-radius: 8px;
  background: white; border: 1px solid var(--border-2);
  font: 400 13.5px var(--font-body); color: var(--fg-1);
  resize: vertical;
}
.w2-pdp__special textarea:focus { outline: none; border-color: var(--leaf-700); }
.w2-pdp__special-help { font: 400 11.5px var(--font-body); color: var(--fg-3); margin-top: 6px; line-height: 1.45; }

.w2-pdp__qty {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border-2); border-radius: 10px; height: 44px;
  background: white;
}
.w2-pdp__qty button {
  width: 38px; height: 100%; border: 0; background: transparent;
  font: 500 16px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.w2-pdp__qty span {
  min-width: 36px; text-align: center;
  font: 600 14px var(--font-mono); color: var(--slate-700);
  border-left: 1px solid var(--border-1); border-right: 1px solid var(--border-1);
  height: 100%; display: inline-flex; align-items: center; justify-content: center;
}

.w2-pdp__cta-row {
  margin-top: 18px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
}
.w2-pdp__add {
  flex: 1; height: 50px; padding: 0 22px;
  background: var(--grad-cta-book); color: white; border: 0; border-radius: 12px;
  font: 600 14px var(--font-body); letter-spacing: .002em; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 8px 22px rgba(11,218,81,.36);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.w2-pdp__add:hover { filter: brightness(1.04); }
.w2-pdp__add-price { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -.012em; }
.w2-pdp__wishlist {
  width: 50px; height: 50px; border-radius: 12px;
  background: white; border: 1px solid var(--border-2); cursor: pointer;
  font-size: 20px; color: var(--fg-2);
}
.w2-pdp__wishlist.is-on { color: var(--terracotta); border-color: var(--terracotta); background: rgba(199,106,58,.06); }

.w2-pdp__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.w2-pdp__benefit {
  padding: 10px 12px; border-radius: 10px; background: var(--bg-paper);
  border: 1px solid var(--border-1);
  display: flex; gap: 10px; align-items: flex-start;
}
.w2-pdp__benefit-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--leaf-100); color: var(--leaf-700); display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--font-body); flex-shrink: 0; }
.w2-pdp__benefit-t { font: 600 12px var(--font-body); color: var(--slate-700); }
.w2-pdp__benefit-d { font: 400 11px var(--font-body); color: var(--fg-3); margin-top: 2px; line-height: 1.4; }

/* ─── PDP — below the fold ─────────────────────────────── */
.w2-pdp__below { margin-top: 56px; display: flex; flex-direction: column; gap: 56px; }
.w2-sech__t { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--slate-700); margin: 0 0 18px; letter-spacing: -.02em; }
.w2-sech__t em { font-style: italic; font-weight: 400; }
.w2-sech__sub { font: 400 14.5px var(--font-body); color: var(--fg-2); margin: -8px 0 18px; }

.w2-pdp__tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bone-100); border-radius: 10px;
  margin-bottom: 22px; width: fit-content;
}
.w2-pdp__tab {
  padding: 8px 16px; border-radius: 6px;
  background: transparent; border: 0; cursor: pointer;
  font: 600 12.5px var(--font-body); color: var(--fg-2);
  transition: all 160ms;
}
.w2-pdp__tab:hover { color: var(--slate-700); }
.w2-pdp__tab.is-on { background: white; color: var(--slate-700); box-shadow: 0 1px 2px rgba(14,26,36,.08); }

.w2-pdp__desc { font: 400 14.5px var(--font-body); line-height: 1.7; color: var(--fg-1); max-width: 720px; }
.w2-pdp__desc p { margin: 0 0 14px; }
.w2-pdp__spec { display: grid; grid-template-columns: 160px 1fr; gap: 4px 24px; margin-top: 22px; max-width: 560px; }
.w2-pdp__spec dt { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 12px 0; border-bottom: 1px solid var(--border-1); }
.w2-pdp__spec dd { margin: 0; font: 500 13.5px var(--font-body); color: var(--slate-700); padding: 12px 0; border-bottom: 1px solid var(--border-1); }

/* Reviews */
.w2-pdp__rev-summary {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px;
  padding: 20px 24px; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 14px;
  margin-bottom: 28px;
}
.w2-pdp__rev-score { font-family: var(--font-display); font-size: 56px; font-weight: 500; color: var(--slate-700); letter-spacing: -.025em; line-height: 1; }
.w2-pdp__rev-stars { color: var(--saffron); font-size: 18px; letter-spacing: 3px; margin-top: 6px; }
.w2-pdp__rev-count { font: 500 12px var(--font-mono); color: var(--fg-3); margin-top: 6px; letter-spacing: .04em; }
.w2-pdp__rev-bars { display: flex; flex-direction: column; gap: 8px; }
.w2-pdp__rev-bar { display: grid; grid-template-columns: 36px 1fr 36px; gap: 12px; align-items: center; font: 500 12px var(--font-mono); color: var(--fg-3); }
.w2-pdp__rev-bar-track { height: 6px; background: var(--bone-100); border-radius: 3px; overflow: hidden; }
.w2-pdp__rev-bar-fill { height: 100%; background: var(--leaf-500); border-radius: 3px; }

.w2-pdp__rev-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.w2-pdp__rev-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.w2-pdp__rev-filter {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: white;
  font: 500 11.5px var(--font-body); color: var(--slate-700); cursor: pointer;
}
.w2-pdp__rev-filter.is-on { background: var(--slate-700); color: white; border-color: var(--slate-700); }
.w2-pdp__rev-sort {
  height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-2);
  background: white; font: 500 12px var(--font-body); color: var(--slate-700);
}

.w2-pdp__rev-card {
  padding: 18px 0; border-top: 1px solid var(--border-1);
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px;
}
.w2-pdp__rev-card:last-child { border-bottom: 1px solid var(--border-1); }
.w2-pdp__rev-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-soft-mint); color: var(--leaf-800); display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--font-body); letter-spacing: .04em; }
.w2-pdp__rev-meta { font: 600 13px var(--font-body); color: var(--slate-700); }
.w2-pdp__rev-when { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; margin-top: 2px; }
.w2-pdp__rev-stars-sm { color: var(--saffron); letter-spacing: 1px; font-size: 12px; margin-top: 6px; }
.w2-pdp__rev-text { font: 400 14px var(--font-body); color: var(--fg-1); line-height: 1.55; margin-top: 8px; }
.w2-pdp__rev-vbadge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--leaf-700);
}
.w2-pdp__rev-vbadge::before { content: '✓'; width: 14px; height: 14px; border-radius: 50%; background: var(--leaf-700); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.w2-pdp__rev-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.w2-pdp__rev-tag { padding: 3px 9px; border-radius: 999px; background: var(--bone-100); border: 1px solid var(--border-1); font: 500 10.5px var(--font-body); color: var(--fg-2); letter-spacing: .02em; }

/* Vendor block */
.w2-pdp__vendor-card {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--border-1); border-radius: 14px;
  background: var(--bg-paper);
}
.w2-pdp__vendor-img { width: 80px; height: 80px; border-radius: 12px; background-size: cover; background-position: center; }
.w2-pdp__vendor-t { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); letter-spacing: -.014em; }
.w2-pdp__vendor-l { font: 500 11.5px var(--font-mono); color: var(--fg-3); letter-spacing: .06em; margin-top: 4px; }
.w2-pdp__vendor-d { font: 400 13px var(--font-body); color: var(--fg-2); line-height: 1.5; margin-top: 8px; max-width: 540px; }

/* Q&A */
.w2-pdp__qa-card {
  padding: 14px 16px; border: 1px solid var(--border-1); border-radius: 12px;
  background: white; margin-bottom: 10px;
}
.w2-pdp__qa-q { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-pdp__qa-a { font: 400 13.5px var(--font-body); color: var(--fg-1); line-height: 1.5; margin-top: 6px; }
.w2-pdp__qa-meta { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; margin-top: 4px; }

/* Shipping / returns / policy mini-stack */
.w2-pdp__policy { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.w2-pdp__policy-card { padding: 16px; border-radius: 12px; background: var(--bg-paper); border: 1px solid var(--border-1); }
.w2-pdp__policy-l { font: 600 10.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-pdp__policy-t { font: 600 13.5px var(--font-body); color: var(--slate-700); }
.w2-pdp__policy-d { font: 400 12.5px var(--font-body); color: var(--fg-2); line-height: 1.5; margin-top: 6px; }

/* Related */
.w2-pdp__related { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.w2-pdp__related-card { background: 0; border: 0; padding: 0; cursor: pointer; text-align: left; }
.w2-pdp__related-img { width: 100%; aspect-ratio: 4/5; border-radius: 12px; background-size: cover; background-position: center; }
.w2-pdp__related-t { font: 500 13px var(--font-body); color: var(--slate-700); margin-top: 8px; line-height: 1.3; }
.w2-pdp__related-p { font: 500 12px var(--font-mono); color: var(--fg-3); margin-top: 2px; letter-spacing: .03em; }
.app-nearby-bar__exit { padding: 5px 11px; border-radius: 999px; background: var(--slate-700); color: white; border: 0; font: 600 10px var(--font-body); cursor: pointer; }


/* All-products vertical grid (under vendor rails) */
.w2-allprods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 14px;
}
.w2-allprod {
  display: flex; flex-direction: column;
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.w2-allprod:hover { border-color: var(--slate-500); box-shadow: 0 8px 22px rgba(14,26,36,.08); }
.w2-allprod__img {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center;
  background-color: var(--bone-100);
}
.w2-allprod__wish {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(252,250,246,.92); backdrop-filter: blur(8px);
  border: 0; cursor: pointer;
  font-size: 16px; color: var(--fg-2);
  box-shadow: 0 2px 6px rgba(14,26,36,.12);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms, transform 160ms;
}
.w2-allprod__wish:hover { transform: scale(1.06); }
.w2-allprod__wish.is-on { color: var(--terracotta); background: white; }
.w2-allprod__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.w2-allprod__maker { font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-700); }
.w2-allprod__name { font-family: var(--font-display); font-size: 15.5px; font-weight: 500; letter-spacing: -.012em; color: var(--slate-700); line-height: 1.25; }
.w2-allprod__foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.w2-allprod__price { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--slate-700); letter-spacing: -.012em; }
.w2-allprod__add {
  width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: var(--slate-700); color: white;
  font: 500 16px var(--font-body); cursor: pointer;
  line-height: 1;
}
.w2-allprod__add:hover { background: var(--leaf-700); }


/* ─── Pro upgrade modal + modify-booking modal ─────────── */
.w2-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,26,36,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 95; padding: 32px 16px;
  animation: w2-aip-in 200ms var(--ease-out);
}
.w2-modal {
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(14,26,36,.30);
  max-width: 720px; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 32px 36px;
  position: relative;
}
.w2-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bone-100); border: 1px solid var(--border-1);
  cursor: pointer; font: 500 16px var(--font-body); color: var(--slate-700);
}

.w2-upgrade__lbl { font: 600 11px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-upgrade__title { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 8px 0 4px; }
.w2-upgrade__title em { font-style: italic; font-weight: 400; }
.w2-upgrade__sub { font: 400 14px var(--font-body); color: var(--fg-2); line-height: 1.55; margin: 0 0 22px; max-width: 560px; }
.w2-upgrade__cycle { display: inline-flex; gap: 0; padding: 4px; background: var(--bone-100); border-radius: 999px; margin-bottom: 22px; }
.w2-upgrade__cycle-b { padding: 8px 18px; background: transparent; border: 0; border-radius: 999px; cursor: pointer; font: 600 12px var(--font-body); color: var(--fg-2); display: inline-flex; align-items: center; }
.w2-upgrade__cycle-b.is-on { background: white; color: var(--slate-700); box-shadow: 0 1px 3px rgba(14,26,36,.08); }

.w2-upgrade__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.w2-upgrade__plan { padding: 22px; background: white; border: 1px solid var(--border-1); border-radius: 14px; }
.w2-upgrade__plan--pro { background: linear-gradient(155deg, var(--leaf-100) 0%, var(--bg-paper) 60%); border-color: var(--leaf-500); position: relative; }
.w2-upgrade__plan-l { font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.w2-upgrade__plan-p { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); display: flex; align-items: baseline; gap: 4px; }
.w2-upgrade__plan-p small { font: 500 12px var(--font-body); color: var(--fg-3); }
.w2-upgrade__plan-fl { list-style: none; padding: 0; margin: 14px 0 0; }
.w2-upgrade__plan-fl li { font: 400 13px var(--font-body); color: var(--fg-1); padding: 6px 0; padding-left: 22px; position: relative; line-height: 1.5; }
.w2-upgrade__plan-fl li::before { content: '✓'; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--leaf-100); color: var(--leaf-700); display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--font-body); }
.w2-upgrade__plan-fl li strong { color: var(--slate-700); font-weight: 600; }

.w2-upgrade__cta {
  width: 100%; height: 52px; border-radius: 12px;
  border: 0; background: var(--grad-cta-itinerary); color: white;
  font: 700 14px var(--font-body); cursor: pointer;
  box-shadow: 0 8px 20px rgba(48,92,222,.30);
}
.w2-upgrade__cta:hover { filter: brightness(1.04); }
.w2-upgrade__legal { font: 400 11.5px var(--font-body); color: var(--fg-3); text-align: center; margin-top: 12px; }

.w2-modify__lbl { font: 600 11px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-modify__title { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--slate-700); margin: 8px 0 4px; }
.w2-modify__sub { font: 400 13.5px var(--font-body); color: var(--fg-2); line-height: 1.55; margin: 0 0 22px; }
.w2-modify__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.w2-modify__field { display: flex; flex-direction: column; gap: 6px; }
.w2-modify__field > span { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.w2-modify__field input[type="date"] { height: 42px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: 10px; background: white; font: 500 13px var(--font-body); color: var(--slate-700); }
.w2-modify__summary { padding: 12px 14px; background: var(--leaf-100); border-radius: 10px; font: 500 13px var(--font-body); color: var(--leaf-800); margin-bottom: 14px; }
.w2-modify__cta {
  width: 100%; height: 52px; border-radius: 12px;
  border: 0; background: var(--grad-cta-book); color: white;
  font: 700 14px var(--font-body); cursor: pointer; margin-top: 4px;
  box-shadow: 0 8px 20px rgba(11,218,81,.30);
}
.w2-modify__legal { font: 400 11.5px var(--font-body); color: var(--fg-3); text-align: center; margin-top: 12px; }

@media (max-width: 680px) {
  .w2-modal { padding: 24px 22px; }
  .w2-upgrade__plans { grid-template-columns: 1fr; }
  .w2-modify__grid { grid-template-columns: 1fr; }
  .w2-upgrade__title { font-size: 28px; }
}


/* ─── Slim docked booking gate (replaces full-screen modal) ──── */
.w2-bgate-fadeback {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(14,26,36,0) 30%, rgba(14,26,36,.20) 70%, rgba(14,26,36,.34) 100%);
  z-index: 89;
  animation: w2-fade 220ms var(--ease-out);
}
.w2-bgate.w2-bgate--slim {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(900px, calc(100% - 32px));
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 50px rgba(14,26,36,.28);
  padding: 22px 28px 20px;
  z-index: 90;
  animation: w2-gate-up 280ms var(--ease-out);
}
@keyframes w2-gate-up {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.w2-bgate__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bone-100); border: 1px solid var(--border-1);
  cursor: pointer; font: 500 16px var(--font-body); color: var(--slate-700);
}
.w2-bgate__lbl { font: 600 10.5px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf-700); }
.w2-bgate__t { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.018em; color: var(--slate-700); margin: 4px 0 4px; line-height: 1.2; }
.w2-bgate__sub { font: 400 13px var(--font-body); color: var(--fg-2); margin: 0 0 14px; }
.w2-bgate__pillrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.w2-bgate__pill {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border: 1px solid var(--border-2);
  border-radius: 12px; background: white;
  min-width: 0;
}
.w2-bgate__pill > span { font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.w2-bgate__pill input {
  border: 0; padding: 0; background: transparent;
  font: 600 14px var(--font-body); color: var(--slate-700);
  width: 100%; min-width: 0;
}
.w2-bgate__pill--step { gap: 6px; }
.w2-bgate__step-ct { display: inline-flex; align-items: center; gap: 0; background: var(--bone-100); border-radius: 999px; padding: 2px; align-self: flex-start; }
.w2-bgate__step-ct button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: white; color: var(--slate-700); font: 500 14px var(--font-body); cursor: pointer; line-height: 1; }
.w2-bgate__step-ct strong { min-width: 22px; text-align: center; font: 600 13px var(--font-mono); color: var(--slate-700); padding: 0 6px; }

.w2-bgate__summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--leaf-100);
  border: 1px solid rgba(43,124,4,.18);
  border-radius: 12px;
}
.w2-bgate__summary-meta { min-width: 0; }
.w2-bgate__summary-meta-l { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-bgate__summary-meta-s { font: 500 11.5px var(--font-mono); color: var(--fg-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-bgate__summary > strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--slate-700); letter-spacing: -.018em; white-space: nowrap; }
.w2-bgate__submit {
  height: 46px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--grad-cta-book); color: white;
  font: 700 13.5px var(--font-body); cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(11,218,81,.32);
}
.w2-bgate__submit:hover { filter: brightness(1.04); }

@media (max-width: 580px) {
  .w2-bgate__summary { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .w2-bgate__submit { width: 100%; }
}