/* ═══════════════════════════════════════════════════════════════════════════
   MAP LAYOUT — 2GIS-style map-first design system
   Icon sidebar (56px) + Content panel (380px) + Map (fills remaining)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --map-header-h: 48px;
  --sidebar-w: 56px;
  --panel-w: 380px;
  --panel-max-w: 420px;
  --tab-bar-h: 56px;
}

/* ── Map Layout Shell ──────────────────────────────────────────────────── */
.map-layout {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-cream, #FAF8F5);
}

/* ── Map Header ────────────────────────────────────────────────────────── */
.map-header {
  height: var(--map-header-h);
  min-height: var(--map-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  z-index: 100;
  gap: 12px;
}

.map-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink, #2C1810);
  flex-shrink: 0;
}

.map-header__logo img {
  border-radius: 4px;
}

.map-header__logo-text {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.map-header__search {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.map-header__search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--ink, #2C1810);
  background: var(--bg-cream, #FAF8F5);
  outline: none;
  transition: border-color 0.15s ease;
}

.map-header__search-input:focus {
  border-color: var(--burgundy, #722F37);
}

.map-header__search-input::placeholder {
  color: var(--text-muted, #9B9B9B);
}

.map-header__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #9B9B9B);
  pointer-events: none;
}

.map-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.map-header__lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 6px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
  cursor: pointer;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: border-color 0.15s ease;
}

.map-header__lang-btn:hover {
  border-color: var(--burgundy, #722F37);
}

.map-header__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--burgundy, #722F37);
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.map-header__app-btn:hover {
  background: var(--burgundy-dark, #5A252C);
  transform: translateY(-1px);
}

/* ── Body (below header) ───────────────────────────────────────────────── */
.map-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── Icon Sidebar ──────────────────────────────────────────────────────── */
.icon-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  background: #fff;
  border-right: 1px solid var(--border-light, #E8E2DA);
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
}

.icon-sidebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 6px 0 4px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted, #9B9B9B);
  font-size: 0.5625rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  gap: 3px;
  text-align: center;
  line-height: 1.1;
}

.icon-sidebar__item:hover {
  background: var(--bg-cream, #FAF8F5);
  color: var(--ink, #2C1810);
}

.icon-sidebar__item--active {
  background: var(--burgundy-subtle, rgba(114,47,55,0.08));
  color: var(--burgundy, #722F37);
}

.icon-sidebar__item--active svg {
  color: var(--burgundy, #722F37);
}

.icon-sidebar__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-sidebar__divider {
  width: 32px;
  height: 1px;
  background: var(--border-light, #E8E2DA);
  margin: 4px 0;
}

/* ── Content Panel ─────────────────────────────────────────────────────── */
.content-panel {
  width: var(--panel-w);
  min-width: var(--panel-w);
  max-width: var(--panel-max-w);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--border-light, #E8E2DA);
  z-index: 40;
  overflow: hidden;
}

/* Panel list content wrapper — must propagate flex sizing for scroll */
#panel-list-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.content-panel__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  flex-shrink: 0;
}

.content-panel__h1 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  color: var(--ink, #2C1810);
  margin: 0 0 6px;
  line-height: 1.2;
}

.content-panel__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.content-panel__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--text-muted, #9B9B9B);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.content-panel__stat strong {
  color: var(--ink, #2C1810);
  font-weight: 700;
}

.content-panel__stat--specialty {
  background: var(--gold-subtle, rgba(212,175,55,0.1));
  color: var(--gold-dark, #B8961F);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.6875rem;
}

/* Filters bar */
.content-panel__filters {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-panel__sort {
  padding: 5px 8px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--ink, #2C1810);
  background: #fff;
  cursor: pointer;
  outline: none;
}

.content-panel__sort:focus {
  border-color: var(--burgundy, #722F37);
}

.content-panel__filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-pill {
  padding: 3px 10px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 20px;
  background: transparent;
  font-size: 0.6875rem;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--text-muted, #9B9B9B);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--burgundy, #722F37);
  color: var(--burgundy, #722F37);
}

.filter-pill--active {
  background: var(--burgundy, #722F37);
  border-color: var(--burgundy, #722F37);
  color: #fff;
}

/* Scrollable content area */
.content-panel__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar */
.content-panel__scroll::-webkit-scrollbar {
  width: 4px;
}
.content-panel__scroll::-webkit-scrollbar-track {
  background: transparent;
}
.content-panel__scroll::-webkit-scrollbar-thumb {
  background: var(--border-light, #E8E2DA);
  border-radius: 2px;
}
.content-panel__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #9B9B9B);
}

/* Venue list inside scroll */
.content-panel__venue-list {
  /* Cards stack vertically with no gap (border-bottom handles separation) */
}

/* Empty state */
.content-panel__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted, #9B9B9B);
  gap: 8px;
}

.content-panel__empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Editorial content below venue list */
.content-panel__editorial {
  padding: 20px 16px;
  border-top: 1px solid var(--border-light, #E8E2DA);
}

.content-panel__editorial h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1rem;
  color: var(--ink, #2C1810);
  margin: 0 0 8px;
}

.content-panel__editorial p,
.content-panel__editorial div {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-body, #3D2E28);
}

.content-panel__editorial .editorial-section {
  margin-bottom: 16px;
}

/* Tips section */
.content-panel__tips {
  padding: 16px;
  border-top: 1px solid var(--border-light, #E8E2DA);
}

.content-panel__tips h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  color: var(--ink, #2C1810);
  margin: 0 0 10px;
}

.tip-item {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

.tip-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tip-item__num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--burgundy-subtle, rgba(114,47,55,0.08));
  color: var(--burgundy, #722F37);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-item h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
  margin: 0 0 2px;
}

.tip-item p {
  font-size: 0.75rem;
  color: var(--text-muted, #9B9B9B);
  margin: 0;
  line-height: 1.4;
}

/* Related links */
.content-panel__related {
  padding: 16px;
  border-top: 1px solid var(--border-light, #E8E2DA);
}

.content-panel__related h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  color: var(--ink, #2C1810);
  margin: 0 0 8px;
}

.related-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.related-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--burgundy, #722F37);
  text-decoration: none;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: all 0.15s ease;
}

.related-link-pill:hover {
  background: var(--burgundy-subtle, rgba(114,47,55,0.08));
  border-color: var(--burgundy, #722F37);
}

.related-link-pill__count {
  background: var(--bg-cream, #FAF8F5);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.625rem;
  color: var(--text-muted, #9B9B9B);
  font-weight: 600;
}

/* FAQ inside panel */
.content-panel__faq {
  padding: 16px;
  border-top: 1px solid var(--border-light, #E8E2DA);
}

.content-panel__faq h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  color: var(--ink, #2C1810);
  margin: 0 0 10px;
}

.panel-faq-item {
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

.panel-faq-item:last-child {
  border-bottom: none;
}

.panel-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.panel-faq-q svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-muted, #9B9B9B);
}

.panel-faq-item.open .panel-faq-q svg {
  transform: rotate(180deg);
}

.panel-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-body, #3D2E28);
}

.panel-faq-item.open .panel-faq-a {
  max-height: 200px;
}

.panel-faq-a p {
  margin: 0;
  padding: 0 0 10px;
}

/* App promo in panel */
.content-panel__promo {
  padding: 16px;
  margin: 12px 16px;
  background: var(--bg-cream, #FAF8F5);
  border-radius: 10px;
  border: 1px solid var(--border-light, #E8E2DA);
  text-align: center;
}

.content-panel__promo img {
  display: block;
  margin: 0 auto 8px;
  border-radius: 8px;
}

.content-panel__promo h4 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.875rem;
  color: var(--ink, #2C1810);
  margin: 0 0 4px;
}

.content-panel__promo p {
  font-size: 0.75rem;
  color: var(--text-muted, #9B9B9B);
  margin: 0 0 10px;
  line-height: 1.4;
}

.content-panel__promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--burgundy, #722F37);
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: background 0.15s ease;
}

.content-panel__promo-btn:hover {
  background: var(--burgundy-dark, #5A252C);
}

/* ── Map Container ─────────────────────────────────────────────────────── */
.map-container {
  flex: 1;
  position: relative;
  z-index: 1;
}

.map-container #venue-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Map controls overlay */
.map-controls {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-control-btn {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #2C1810);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.15s ease, transform 0.1s ease;
}

.map-control-btn:hover {
  background: var(--bg-cream, #FAF8F5);
  transform: scale(1.05);
}

/* Map venue count badge */
.map-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Detail Panel (middle column — 2GIS three-column layout) ──────────── */
.detail-panel {
  display: none;
  width: 0;
  min-width: 0;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--border-light, #E8E2DA);
  z-index: 40;
  overflow: hidden;
  position: relative;
}

/* When detail is open: show middle panel, narrow the list */
.map-body--detail-open .content-panel {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
}

.map-body--detail-open .detail-panel {
  display: flex;
  width: var(--panel-w);
  min-width: var(--panel-w);
  max-width: var(--panel-max-w);
}

/* Detail panel header */
.detail-panel .detail-panel__header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  flex-shrink: 0;
  position: relative;
}

/* Detail panel scrollable content */
.detail-panel .detail-panel__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.detail-panel .detail-panel__scroll::-webkit-scrollbar { width: 4px; }
.detail-panel .detail-panel__scroll::-webkit-scrollbar-track { background: transparent; }
.detail-panel .detail-panel__scroll::-webkit-scrollbar-thumb { background: var(--border-light, #E8E2DA); border-radius: 2px; }

/* Detail close button */
.detail-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light, #E8E2DA);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #9B9B9B);
  font-size: 1rem;
  z-index: 5;
  transition: background 0.15s ease, color 0.15s ease;
}

.detail-close-btn:hover {
  background: var(--bg-cream, #FAF8F5);
  color: var(--ink, #2C1810);
}

/* Narrowed list card styles: hide some elements in compact mode */
.map-body--detail-open .venue-card__type-pill,
.map-body--detail-open .venue-card__quick-actions,
.map-body--detail-open .venue-card__footer-row {
  display: none;
}

.map-body--detail-open .venue-card__address {
  display: none;
}

.map-body--detail-open .venue-card__collapsed {
  padding: 6px 8px 6px 8px;
}

.map-body--detail-open .venue-card__name {
  font-size: 0.8125rem;
  line-height: 1.2;
}

.map-body--detail-open .venue-card__meta-row {
  gap: 6px;
}

/* Hide expand panel in compact mode */
.map-body--detail-open .venue-card__expand {
  display: none;
}

/* Hide filters bar in compact mode */
.map-body--detail-open .content-panel__filters {
  display: none;
}

/* Selected card in list when detail is open */
.map-body--detail-open .venue-card--active {
  background: var(--burgundy-subtle, rgba(114,47,55,0.08)) !important;
}

/* ── Venue Detail Panel (legacy overlay state) ────────────────────────── */
.content-panel--detail .content-panel__header {
  padding-top: 10px;
}

.detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  margin-bottom: 8px;
  background: none;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--burgundy, #722F37);
  cursor: pointer;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: color 0.15s ease;
}

.detail-back-btn:hover {
  color: var(--burgundy-dark, #5A252C);
}

.detail-name {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  color: var(--ink, #2C1810);
  margin: 0 0 6px;
  line-height: 1.2;
}

.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.detail-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--burgundy-subtle, rgba(114,47,55,0.08));
  color: var(--burgundy, #722F37);
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.detail-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8125rem;
}

.detail-rating svg {
  color: var(--gold, #D4AF37);
}

.detail-rating strong {
  color: var(--ink, #2C1810);
}

.detail-rating span {
  color: var(--text-muted, #9B9B9B);
  font-size: 0.75rem;
}

.detail-price {
  color: var(--text-muted, #9B9B9B);
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.8125rem;
}

/* Detail sections */
.detail-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

.detail-section h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  color: var(--ink, #2C1810);
  margin: 0 0 8px;
}

.detail-description {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-body, #3D2E28);
  margin: 0;
}

/* Detail contact card */
.detail-contact {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

.detail-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
}

.detail-info-row svg {
  flex-shrink: 0;
  color: var(--text-muted, #9B9B9B);
  margin-top: 2px;
}

.detail-info-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #9B9B9B);
  font-weight: 600;
  margin-bottom: 1px;
}

.detail-info-value {
  font-size: 0.8125rem;
  color: var(--text-body, #3D2E28);
  line-height: 1.3;
}

.detail-info-link {
  color: var(--burgundy, #722F37);
  text-decoration: none;
}

.detail-info-link:hover {
  text-decoration: underline;
}

/* Detail action buttons */
.detail-actions {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

.detail-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: all 0.15s ease;
  text-align: center;
}

.detail-action-btn--primary {
  background: var(--burgundy, #722F37);
  color: #fff !important;
}

.detail-action-btn--primary:hover {
  background: var(--burgundy-dark, #5A252C);
  color: #fff !important;
}

.detail-action-btn--secondary {
  background: #fff;
  color: var(--ink, #2C1810) !important;
  border: 1px solid var(--border-light, #E8E2DA);
}

.detail-action-btn--secondary:hover {
  border-color: var(--burgundy, #722F37);
  color: var(--burgundy, #722F37) !important;
  background: #fff;
}

/* Detail specialties */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.detail-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg-cream, #FAF8F5);
  border: 1px solid var(--border-light, #E8E2DA);
  color: var(--charcoal, #3D2E28);
  font-size: 0.6875rem;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

/* Detail hours */
.detail-hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
}

.detail-hours-day {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
}

.detail-hours-time {
  font-size: 0.75rem;
  color: var(--text-body, #3D2E28);
}

/* Detail open status */
.detail-open-status {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  margin-bottom: 6px;
}

.detail-open-status[data-state="open"] {
  color: #1E7D48;
  background: rgba(30,125,72,0.1);
}

.detail-open-status[data-state="closed"] {
  color: #B04040;
  background: rgba(176,64,64,0.1);
}

/* Detail FAQs */
.detail-faqs {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
}

/* Detail nearby venues */
.detail-nearby {
  padding: 14px 16px;
}

.detail-nearby h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  color: var(--ink, #2C1810);
  margin: 0 0 10px;
}

.detail-nearby-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  cursor: pointer;
  transition: background 0.1s ease;
}

.detail-nearby-item:last-child {
  border-bottom: none;
}

.detail-nearby-item:hover {
  background: var(--bg-cream, #FAF8F5);
  margin: 0 -16px;
  padding: 8px 16px;
}

.detail-nearby-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
}

.detail-nearby-rating {
  font-size: 0.75rem;
  color: var(--gold-dark, #B8961F);
  font-weight: 600;
}

/* ── Hub Panel (for /shops/, /shops/france/ pages) ─────────────────────── */
.hub-list {
  padding: 8px 0;
}

.hub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--ink, #2C1810);
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  transition: background 0.1s ease;
}

.hub-card:hover {
  background: var(--bg-cream, #FAF8F5);
}

.hub-card__flag {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.hub-card__body {
  flex: 1;
  min-width: 0;
}

.hub-card__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
}

.hub-card__meta {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted, #9B9B9B);
  margin-top: 1px;
}

.hub-card__arrow {
  flex-shrink: 0;
  color: var(--text-muted, #9B9B9B);
  font-size: 0.875rem;
}

/* Hub section headers (continents) */
.hub-section-header {
  padding: 12px 16px 6px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink, #2C1810);
  background: var(--bg-cream, #FAF8F5);
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  position: sticky;
  top: 0;
  z-index: 5;
}

.hub-section-meta {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted, #9B9B9B);
  display: block;
  margin-top: 2px;
}

/* ── Hub Body Sections (DB-generated content) ──────────────────────────── */
.hub-body-section {
  padding: 16px 16px 0;
  border-bottom: 1px solid var(--border-subtle, #F0EBE4);
}

.hub-body-section:last-of-type {
  border-bottom: none;
}

.hub-body-section h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink, #2C1810);
  margin: 0 0 8px;
  line-height: 1.3;
}

.hub-body-section p {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.8125rem;
  color: var(--text-secondary, #6B6B6B);
  line-height: 1.6;
  margin: 0 0 12px;
}

.hub-body-section strong {
  color: var(--text-primary, #2D2D2D);
  font-weight: 600;
}

.hub-body-section ul,
.hub-body-section ol {
  padding-left: 1.25rem;
  margin: 0 0 12px;
}

.hub-body-section li {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.8125rem;
  color: var(--text-secondary, #6B6B6B);
  line-height: 1.6;
  margin-bottom: 4px;
}

.hub-body-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-bottom: 12px;
}

.hub-body-section th {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary, #2D2D2D);
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  padding: 4px 8px 4px 0;
}

.hub-body-section td {
  color: var(--text-secondary, #6B6B6B);
  border-bottom: 1px solid var(--border-subtle, #F0EBE4);
  padding: 4px 8px 4px 0;
  vertical-align: top;
}

/* Tips variant */
.hub-tips-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.hub-tips-list li {
  font-size: 0.8125rem;
  color: var(--text-secondary, #6B6B6B);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle, #F0EBE4);
}

.hub-tips-list li:last-child {
  border-bottom: none;
}

.hub-tips-list li strong {
  color: var(--wine-burgundy, #722F37);
  font-weight: 600;
}

/* ── Mobile Tab Bar ────────────────────────────────────────────────────── */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-bar-h);
  background: #fff;
  border-top: 1px solid var(--border-light, #E8E2DA);
  z-index: 100;
  padding: 0 8px;
  justify-content: space-around;
  align-items: center;
}

.mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  text-decoration: none;
  color: var(--text-muted, #9B9B9B);
  font-size: 0.5625rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: color 0.15s ease;
  min-width: 48px;
}

.mobile-tab--active {
  color: var(--burgundy, #722F37);
}

.mobile-tab__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile Map Toggle ─────────────────────────────────────────────────── */
.mobile-view-toggle {
  display: none;
  position: fixed;
  bottom: calc(var(--tab-bar-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  padding: 8px 20px;
  background: var(--burgundy, #722F37);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(114,47,55,0.3);
  transition: background 0.15s ease, transform 0.1s ease;
}

.mobile-view-toggle:hover {
  background: var(--burgundy-dark, #5A252C);
}

.mobile-view-toggle svg {
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Mobile Bottom Sheet (venue detail) ────────────────────────────────── */
.mobile-sheet {
  /* Hidden on desktop — shown as flex column on mobile (see @media below) */
  display: none;
  position: fixed;
  bottom: var(--tab-bar-h);
  left: 0;
  right: 0;
  max-height: 75vh;
  background: #fff;
  /* Rounded top corners — standard mobile bottom-sheet pattern */
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  z-index: 95;
  /* overflow hidden so the rounded corners clip the inner content */
  overflow: hidden;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-sheet--open {
  transform: translateY(0);
}

/* Drag handle — sticky at top of sheet */
.mobile-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--border-subtle, #F0EBE4);
}

.mobile-sheet__handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-light, #E8E2DA);
}

/* Scrollable content area — flex child so it fills remaining height */
#mobile-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Padding & layout for detail HTML injected into the mobile sheet ───── */
/* The same buildDetailHTML() output used by the desktop panel is reused    */
/* here, but the desktop styles are scoped to .detail-panel. Mirror the     */
/* necessary spacing so content never touches the sheet edges.              */
.mobile-sheet #mobile-sheet-content .detail-panel__header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  position: relative;
}

.mobile-sheet #mobile-sheet-content .detail-panel__scroll {
  /* Inner scroll wrapper is not needed inside the sheet — the sheet itself  */
  /* scrolls. Remove fixed height constraints so content flows naturally.    */
  overflow: visible;
  height: auto;
}

.mobile-sheet #mobile-sheet-content .detail-tabs {
  flex-shrink: 0;
}

.mobile-sheet #mobile-sheet-content .detail-contact,
.mobile-sheet #mobile-sheet-content .detail-section,
.mobile-sheet #mobile-sheet-content .detail-nearby {
  padding-left: 16px;
  padding-right: 16px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet: hide sidebar, wider panel */
@media (max-width: 1024px) {
  :root {
    --panel-w: 340px;
  }

  /* On tablet, when detail is open hide the list entirely */
  .map-body--detail-open .content-panel {
    display: none;
  }

  .map-body--detail-open .detail-panel {
    width: var(--panel-w);
    min-width: var(--panel-w);
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --map-header-h: 44px;
  }

  .map-header__search {
    display: none;
  }

  .map-header__app-btn span {
    display: none;
  }

  .icon-sidebar {
    display: none;
  }

  .mobile-tab-bar {
    display: flex;
  }

  .mobile-view-toggle {
    display: flex;
    align-items: center;
  }

  .map-body {
    flex-direction: column;
  }

  .content-panel {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    flex: 1;
  }

  .map-container {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* When map view is active */
  .map-body--map-view .content-panel {
    display: none;
  }

  .map-body--map-view .map-container {
    position: relative;
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
  }

  /* Adjust for mobile tab bar */
  .map-layout {
    padding-bottom: var(--tab-bar-h);
  }

  /* On mobile, hide the detail panel column — use bottom sheet instead */
  .map-body--detail-open .content-panel {
    display: flex;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .map-body--detail-open .detail-panel {
    display: none;
  }

  /* Venue detail on mobile: use bottom sheet instead of panel */
  .mobile-sheet {
    display: flex; /* flex column so handle is fixed, content scrolls */
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .map-header__lang-btn {
    display: none;
  }
}

/* ── Leaflet Overrides ─────────────────────────────────────────────────── */
/* Hide default Leaflet zoom control — we use our own */
.map-container .leaflet-control-zoom {
  display: none;
}

/* Numbered marker */
.vmap-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--burgundy, #722F37);
  color: var(--burgundy, #722F37);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.vmap-marker--active {
  background: var(--burgundy, #722F37);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(114,47,55,0.3);
}

/* Popup styling */
.vmap-popup-wrapper .leaflet-popup-content-wrapper {
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.vmap-popup-wrapper .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.vmap-popup-wrapper .leaflet-popup-tip {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.vmap-popup {
  padding: 12px 14px;
  min-width: 180px;
  max-width: 240px;
}

.vmap-popup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.vmap-popup-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--burgundy, #722F37);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vmap-popup-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vmap-popup-type {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--burgundy, #722F37);
  font-weight: 600;
}

.vmap-popup-rating {
  font-size: 0.6875rem;
  color: var(--gold-dark, #B8961F);
  font-weight: 600;
}

.vmap-popup-name {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink, #2C1810);
  margin: 0 0 2px;
  line-height: 1.25;
}

.vmap-popup-address {
  font-size: 0.6875rem;
  color: var(--text-muted, #9B9B9B);
  margin: 0 0 6px;
  line-height: 1.3;
}

.vmap-popup-link {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--burgundy, #722F37);
  text-decoration: none;
  cursor: pointer;
}

.vmap-popup-link:hover {
  text-decoration: underline;
}

/* ── Single venue marker (for detail pages) ────────────────────────────── */
.venue-marker-single {
  background: transparent !important;
  border: none !important;
}

.vms-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--burgundy, #722F37);
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Schema.org data (hidden) ──────────────────────────────────────────── */
.seo-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Panel Search ──────────────────────────────────────────────────────── */
.panel-search {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  flex-shrink: 0;
}

.panel-search__wrap {
  position: relative;
}

.panel-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #9B9B9B);
  pointer-events: none;
}

.panel-search__input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--ink, #2C1810);
  background: var(--bg-cream, #FAF8F5);
  outline: none;
  transition: border-color 0.15s ease;
}

.panel-search__input:focus {
  border-color: var(--burgundy, #722F37);
}

.panel-search__input::placeholder {
  color: var(--text-muted, #9B9B9B);
}

/* ── Detail Panel Tabs ─────────────────────────────────────────────────── */
.detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light, #E8E2DA);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
  display: none;
}

.detail-tab {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--text-muted, #9B9B9B);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.detail-tab:hover {
  color: var(--ink, #2C1810);
}

.detail-tab--active {
  color: var(--burgundy, #722F37);
  border-bottom-color: var(--burgundy, #722F37);
}

.detail-tab-content {
  display: none;
}

.detail-tab-content--active {
  display: block;
}

/* Detail description in header */
.detail-description-brief {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-body, #3D2E28);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Detail CTA in header */
.detail-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 7px 16px;
  background: var(--burgundy, #722F37);
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  transition: background 0.15s ease;
}

.detail-header-cta:hover {
  background: var(--burgundy-dark, #5A252C);
  color: #fff !important;
}

/* ── Inline action buttons (Call →, Visit →, Copy) in detail panel ───── */
.detail-info-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-info-value-row .detail-info-value {
  flex: 1;
  min-width: 0;
}

.detail-inline-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--border-light, #E8E2DA);
  border-radius: 4px;
  background: transparent;
  color: var(--burgundy, #722F37);
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.detail-inline-btn:hover {
  background: var(--burgundy-subtle, rgba(114,47,55,0.08));
  border-color: var(--burgundy, #722F37);
}

.detail-inline-btn svg {
  color: var(--text-muted, #9B9B9B);
  flex-shrink: 0;
}

.detail-inline-btn:hover svg {
  color: var(--burgundy, #722F37);
}

/* ── Button text contrast fix — ALL burgundy buttons must have white text ─ */
.content-panel__promo-btn,
.content-panel__promo-btn:hover,
.content-panel__promo-btn:focus,
.content-panel__promo-btn:visited,
.map-header__app-btn,
.map-header__app-btn:hover,
.map-header__app-btn:focus,
.map-header__app-btn:visited,
.detail-header-cta,
.detail-header-cta:hover,
.detail-header-cta:focus,
.detail-header-cta:visited,
.detail-action-btn--primary,
.detail-action-btn--primary:hover,
.detail-action-btn--primary:focus,
.detail-action-btn--primary:visited,
.mobile-view-toggle,
.mobile-view-toggle:hover,
.mobile-view-toggle:focus,
.mobile-view-toggle:visited {
  color: #fff !important;
}

/* ── Mobile: full-screen venue detail on direct venue URL ─────────────── */
.map-body--venue-fullscreen .content-panel,
.map-body--venue-fullscreen .map-container,
.map-body--venue-fullscreen .mobile-view-toggle {
  display: none !important;
}

.map-body--venue-fullscreen .detail-panel {
  display: flex !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-right: none;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-sheet,
  .vmap-marker,
  .map-control-btn,
  .detail-action-btn,
  .filter-pill,
  .content-panel__sort {
    transition: none !important;
  }
}