* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* Disable text selection globally — prototype taps/swipes shouldn't trigger
     selection UI. Re-enabled on form inputs below so search/location fields
     still work. */
  html, body { -webkit-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }

  body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
  }

  /* iPhone frame for desktop */
  .device-frame {
    width: 393px;
    height: 852px;
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: none;
  }

  /* On mobile, go full screen */
  @media (max-width: 430px) {
    body { background: #fff; align-items: flex-start; }
    .device-frame {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
      box-shadow: none;
    }
  }

  /* Persistent map backdrop */
  #live-map {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    background: #e8e8e8;
    filter: none;
  }

  /* Screen container */
  .screen {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    z-index: 1;
  }
  .screen.active {
    display: flex;
  }
  /* Map screens are transparent — the map shows through from behind */
  .screen.map-screen {
    background: transparent;
    pointer-events: none;
  }
  /* Re-enable pointer events on interactive children within map screens */
  .screen.map-screen > * {
    pointer-events: auto;
  }

  /* Transitions */
  .screen.anim-fade-in {
    animation: fadeIn 0.25s ease-in;
  }
  .screen.anim-fade-out {
    animation: fadeOut 0.35s ease-out forwards;
    z-index: 5;
  }
  .screen.anim-fade-out-behind {
    animation: fadeOut 0.2s ease-in forwards;
  }
  .screen.anim-bg-fade-in {
    background: transparent;
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-in::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f1f2f3;
    animation: fadeIn 0.2s ease-in forwards;
    z-index: -1;
  }
  .screen.anim-bg-fade-in > *:not(.search-bar-container):not(.status-bar):not(.keyboard):not(.map-overlay-bar) {
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-in > .search-bar-container {
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-out {
    background: transparent;
    z-index: 5;
  }
  .screen.anim-bg-fade-out::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f1f2f3;
    animation: fadeOut 0.2s ease-in forwards;
    z-index: -1;
  }
  .screen.anim-bg-fade-out > *:not(.status-bar):not(.keyboard) {
    animation: fadeOut 0.2s ease-in forwards;
  }
  .screen.anim-slide-up {
    animation: slideUp 0.3s ease-out;
    z-index: 5;
  }

  .screen.anim-screen-fade-in {
    animation: fadeIn 0.25s ease-in forwards;
    z-index: 5;
  }

  .screen.anim-slide-down {
    animation: slideDown 0.25s ease-in forwards;
    z-index: 5;
  }
  @keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
  }
  @keyframes fadeOut {
    from { opacity: 1; } to { opacity: 0; }
  }
  @keyframes bgFadeIn {
    from { background-color: transparent; } to { background-color: #f1f2f3; }
  }
  @keyframes bgFadeOut {
    from { background-color: #f1f2f3; } to { background-color: transparent; }
  }
  @keyframes slideUp {
    from { transform: translateY(100%); } to { transform: translateY(0); }
  }
  @keyframes slideDown {
    from { transform: translateY(0); } to { transform: translateY(100%); }
  }
  @keyframes kbSlideUp {
    from { transform: translateY(100%); } to { transform: translateY(0); }
  }
  .keyboard.anim-kb-slide-up {
    animation: kbSlideUp 0.3s ease-out;
  }
  @keyframes kbSlideDown {
    from { transform: translateY(0); } to { transform: translateY(100%); }
  }
  .keyboard.anim-kb-slide-down {
    animation: kbSlideDown 0.3s ease-in forwards;
  }
  @keyframes closeBtnSlideIn {
    from { margin-left: -52px; opacity: 0; transform: translateX(52px); }
    to   { margin-left: 0;    opacity: 1; transform: translateX(0); }
  }
  @keyframes closeBtnSlideOut {
    from { margin-left: 0;    opacity: 1; transform: translateX(0); }
    to   { margin-left: -52px; opacity: 0; transform: translateX(52px); }
  }
  .search-bar-container.anim-search-enter .close-btn {
    animation: none;
  }
  .search-bar-container.anim-search-exit .close-btn {
    animation: none;
  }

  /* Status bar */
  .status-bar {
    flex-shrink: 0;
    z-index: 10;
    width: 100%;
    transition: opacity 0.15s ease-out;
  }
  .status-bar img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* ========== MAP SCREEN (image-based) ========== */
  .map-screen {
    position: relative;
  }
  .map-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .map-search-hotspot {
    position: absolute;
    top: 26px;
    left: 8px;
    right: 8px;
    height: 62px;
    cursor: pointer;
    z-index: 20;
    border-radius: 12px;
  }
  .map-x-hotspot {
    position: absolute;
    top: 26px;
    right: 8px;
    width: 52px;
    height: 62px;
    cursor: pointer;
    z-index: 21;
  }

  /* Dynamic search bar overlay on map result screens */
  .map-overlay-bar {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
  }
  .map-search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    height: 48px;
    gap: 4px;
    background: #fff;
    border-radius: 9999px;
    padding: 0 16px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .map-search-pill .pill-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #8e8e93;
  }
  .map-search-pill .pill-text {
    flex: 1;
    font-size: 16px;
    color: #000;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pill-clear-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .map-close-pill {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .map-close-pill svg { width: 20px; height: 20px; color: #000; }

  /* ========== SEARCH / INPUT SCREENS ========== */
  .input-screen {
    background: #f1f2f3;
  }

  /* Search bar area — two stacked fields */
  .search-bar-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px 16px;
    flex-shrink: 0;
    background: #f1f2f3;
  }
  .search-field {
    display: flex;
    align-items: center;
    height: 48px;
    width: 100%;
    background: #fff;
    border-radius: 40px;
    padding: 0 16px;
    gap: 12px;
    box-sizing: border-box;
  }
  .back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #020203;
    cursor: pointer;
    width: 24px;
    height: 24px;
  }
  .search-field input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    font-family: 'DM Sans', -apple-system, sans-serif;
    background: transparent;
    color: #020203;
  }
  .search-field input::placeholder {
    color: #717171;
  }
  #search-input-field {
    font-size: 16px;
    color: #020203;
  }
  .search-field .clear-btn {
    width: 20px;
    height: 20px;
    background: #c7c7cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .search-field .clear-btn.hidden { display: none; }
  .search-field .clear-btn svg { width: 10px; height: 10px; color: #fff; }


  /* Location field */
  .location-field {
    display: flex;
    align-items: center;
    height: 48px;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 0 16px;
    gap: 10px;
    box-sizing: border-box;
  }
  .location-field .loc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: unset;
    background-color: unset;
    color: rgba(0, 0, 0, 0);
  }
  .location-field .loc-icon svg { width: 24px; height: 24px; }
  .location-field input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
    color: #000;
  }
  .location-field input::placeholder { color: #717171; }
  #location-input-field {
    font-size: 16px;
  }
  .location-field .clear-btn {
    width: 20px;
    height: 20px;
    background: #c7c7cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .location-field .clear-btn.hidden { display: none; }
  .location-field .clear-btn svg { width: 10px; height: 10px; color: #fff; }

  #unified-search-field { gap: 4px; padding-left: 16px; padding-right: 16px; }
  #unified-location-field { gap: 4px; padding-left: 16px; padding-right: 16px; }

  /* Current location link — Figma: neutral hover pill, 8px gap, left-aligned */
  .location-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 24px 24px;
    flex-shrink: 0;
  }
  .location-section-heading {
    font-size: 20px;
    font-weight: 900;
    color: #020203;
    line-height: 28px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .current-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 24px;
    cursor: pointer;
  }
  .current-location:active {
    background: #f5f5f5;
  }
  .current-location .loc-arrow-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .current-location .loc-arrow-icon img {
    width: 16px;
    height: 16px;
  }
  .current-location .loc-label {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .current-location .loc-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .current-location .loc-chevron svg {
    width: 8px;
    height: 13px;
    color: #c7c7cc;
  }

  /* Content area */
  .content-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  /* Section heading — Figma heading/h3: 20px, black */
  .section-heading {
    font-family: "DM Sans";
    font-size: 20px;
    font-weight: 900;
    padding: 12px 20px 4px;
    color: #020203;
    line-height: 28px;
  }
  .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 4px;
  }
  .section-heading-row h2 {
    font-family: "DM Sans";
    font-size: 20px;
    font-weight: 900;
    color: #020203;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .section-heading-row h2 .chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .section-heading-row h2 .chevron svg {
    width: 10px;
    height: 16px;
    color: #c7c7cc;
  }
  .section-heading-row .clear-link {
    font-size: 15px;
    color: #8e8e93;
    cursor: pointer;
  }

  /* Category chips — Figma: white card 24px radius, chip pill 64px radius, 14px semibold */
  .chips-container {
    padding: 4px 20px;
  }
  .chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
  }
  .chip {
    padding: 8px 12px;
    background: #f1f1f4;
    border-radius: 64px;
    font-size: 14px;
    font-weight: 600;
    color: #020203;
    cursor: pointer;
    transition: background 0.15s;
  }
  .chip:active { background: #e3e4e8; }

  /* Recents chips */
  .recents-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 4px 20px 0;
  }

  /* Current location CTA */
  .current-location-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 34px;
    cursor: pointer;
  }
  .current-location-cta:active {
    opacity: 0.6;
  }
  .cta-icon-pill {
    width: 32px;
    height: 32px;
    background: #e4e5e7;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cta-label {
    font-size: 16px;
    font-weight: 500;
    color: #020203;
  }

  /* Autocomplete results */
  .autocomplete-list {
    margin: 0 20px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
  }
  .autocomplete-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .autocomplete-item:active { background: #f2f2f7; }
  .autocomplete-item + .autocomplete-item {
    border-top: none;
  }
  .autocomplete-item .ac-icon {
    width: 36px;
    height: 36px;
    background: #f2f2f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .autocomplete-item .ac-icon svg { width: 16px; height: 16px; color: #8e8e93; }
  .autocomplete-item .ac-text {
    font-size: 17px;
    color: #000;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .autocomplete-item .ac-text strong { font-weight: 500; }

  /* Location autocomplete */
  .loc-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .loc-autocomplete-item:active { background: #f2f2f7; }
  .loc-autocomplete-item + .loc-autocomplete-item {
    border-top: none;
  }
  .loc-autocomplete-item .loc-ac-icon {
    width: 36px;
    height: 36px;
    background: #e4e5e7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .loc-autocomplete-item .loc-ac-icon svg { width: 24px; height: 24px; color: #6e6e73; }
  .loc-autocomplete-item .loc-ac-info { display: flex; flex-direction: column; gap: 2px; }
  .loc-autocomplete-item .loc-ac-name { font-size: 17px; color: #000; }
  .loc-autocomplete-item .loc-ac-name strong { font-weight: 500; }
  .loc-autocomplete-item .loc-ac-sub { font-size: 13px; color: #8e8e93; }

  /* Keyboard */
  .keyboard {
    background: #e1e4e7;
    padding: 12px 0 10px;
    border-radius: 28px 28px 0 0;
    flex-shrink: 0;
  }
  .keyboard-keys {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 12px 8.5px 0;
  }
  .keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .keyboard-row.row-2 { padding: 0 20px; }
  .keyboard-row.row-3 { gap: 14.25px; }
  .row-3-letters { display: flex; flex: 1; gap: 6px; height: 45px; }
  .key {
    flex: 1;
    height: 45px;
    background: #fff;
    border-radius: 8.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, 'SF Pro', 'SF Compact', 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #595959;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
  }
  .key:active { background: #cdd0d6; }
  .key.shift {
    flex: 0 0 44.667px;
  }
  .key.shift, .key.backspace { display: flex; align-items: center; justify-content: center; }
  .key.shift img, .key.backspace img, .key.shift svg, .key.backspace svg { width: 23px; height: 20px; }
  .key.backspace {
    flex: 0 0 45px;
  }
  .key.space { flex: 1; }
  .key.search-key {
    flex: 0 0 92px;
    background: #131414;
    border-radius: 8.5px;
    color: #fff;
  }
  .key.search-key { display: flex; align-items: center; justify-content: center; }
  .key.search-key img { width: 100%; height: 100%; object-fit: contain; border-radius: 8.5px; }
  .key.num { flex: 0 0 45px; font-size: 18px; font-family: -apple-system, 'SF Compact Rounded', 'SF Pro Rounded', sans-serif; }
  .key.emoji { flex: 0 0 45px; font-size: 24px; }
  .keyboard-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 27px 39px 15px 36px;
  }
  .keyboard-bottom img.kb-globe { width: 26px; height: 26px; }
  .keyboard-bottom img.kb-mic { width: 19px; height: 28px; }

  /* Explore cards (for screen 09 variant) */
  .explore-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px;
  }
  .explore-card {
    background: #f2f2f7;
    border-radius: 12px;
    padding: 14px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .explore-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 50px;
    height: 50px;
    background: #d8d8dc;
    border-radius: 8px;
    transform: rotate(12deg);
  }

  /* old tab bar styles removed — see new .tab-bar below */
  .tab-item.active svg { color: #000; }
  .tab-item.active span { color: #000; }
  .tab-item:not(.active) svg { color: #000; }
  .tab-item:not(.active) span { color: #000; }

  /* Helper */
  .hidden { display: none !important; }

  /* Prototype hint overlay */
  .hint-overlay {
    position: absolute;
    bottom: 114px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s;
    white-space: nowrap;
  }
  .hint-overlay.fade-out { opacity: 0; }

  /* ========== INTERACTIVE MAP ========== */
  .mapboxgl-canvas {
    filter: none;
  }
  .mapboxgl-ctrl-attrib,
  .mapboxgl-ctrl-logo,
  .mapboxgl-ctrl { display: none !important; }
  .playlist-pin {
    background: none !important;
    border: none !important;
  }
  .pin-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #bdbdbd, #5b5b5b);
    border: 3px solid white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.25);
  }
  .pin-dot-numbered {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #bdbdbd, #5b5b5b);
    border: 3px solid white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .user-location-wrapper {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .user-location-dot {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user-location-dot::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0569FF;
    animation: location-pulse 2.5s ease-in-out infinite;
  }
  @keyframes location-pulse {
    0%, 100% { transform: scale(0.9); }
    50%      { transform: scale(1.05); }
  }

  /* Visible search pill on default map screen */
  .map-search-pill-default {
    position: absolute;
    top: 62px;
    left: 24px;
    right: 24px;
    height: 48px;
    background: rgba(255,255,255,0.89);
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 20;
    cursor: pointer;
    color: #4F5159;
    font-size: 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .map-search-pill-default .pill-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }

  /* Search this area button */
  .search-this-area-btn {
    position: absolute;
    top: 122px; /* 62px pill top + 48px pill height + 12px gap */
    left: 50%;
    transform: translateX(-50%);
    background: #020203;
    color: #fff;
    border: none;
    border-radius: 64px;
    padding: 12px 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .search-this-area-btn.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Current location / navigate button on map */
  .map-nav-btn {
    position: absolute;
    right: 16px;
    z-index: 9;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(45,45,45,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 12px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .map-nav-btn.collapsed {
    transform: translateY(291px);
  }
  .map-nav-btn img, .map-nav-btn svg {
    width: 24px;
    height: 24px;
  }
  .map-nav-btn.active svg path {
    fill: #0569FF;
  }

  /* Tab bar */
  .tab-bar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 349px;
    height: 62px;
    background: white;
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    padding: 4px;
    z-index: 25;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 54px;
    border-radius: 100px;
    padding: 4px;
    cursor: pointer;
    position: relative;
  }
  .tab-item.active {
    position: relative;
  }
  .tab-item.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(219,219,219,0.5);
    border-radius: 100px;
    pointer-events: none;
    z-index: 0;
  }
  .tab-item.active svg, .tab-item.active span {
    position: relative;
    z-index: 1;
  }
  .tab-item img, .tab-item svg {
    width: 24px;
    height: 24px;
  }
  .tab-item span {
    font-size: 11px;
    font-weight: 500;
    color: black;
    font-family: 'DM Sans', -apple-system, sans-serif;
    text-align: center;
    line-height: 14px;
  }

  /* ========== BOTTOM SHEET ========== */
  .results-sheet {
    position: absolute;
    bottom: -266px; /* overflow so translateY(-266) still reaches screen bottom */
    left: 0;
    right: 0;
    height: 726px; /* 460px visible + 266px overflow to cover full screen when dragged up */
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
  }
  .results-sheet.collapsed {
    transform: translateY(291px); /* sheet top lands at ~683px from screen top */
  }
  .results-sheet.expanded {
    transform: translateY(-266px); /* sheet top lands at ~126px = 16px below search bar */
  }
  .sheet-handle {
    width: 49px;
    height: 6px;
    background: rgba(17,17,17,0.3);
    border-radius: 20px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  /* Filter bar */
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 10px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-toggle {
    display: flex;
    background: #e3e4e8;
    border-radius: 25px;
    padding: 4px;
    flex-shrink: 0;
  }
  .filter-toggle .toggle-opt {
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .filter-toggle .toggle-opt.active {
    background: white;
  }
  .filter-toggle .toggle-opt svg, .filter-toggle .toggle-opt img { width: 20px; height: 20px; }

  .filter-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border-radius: 64px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #282828;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .filter-chip svg { width: 10px; height: 10px; flex-shrink: 0; }

  /* Venue list */
  .venue-list {
    flex: 1;
    overflow-y: hidden;
    padding: 4px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .results-sheet.expanded .venue-list {
    overflow-y: auto;
  }
  .venue-list::-webkit-scrollbar { display: none; }

  .venue-card {
    background: white;
    border-radius: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .venue-intro-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #edfaf3;
    border-radius: 12px;
  }
  .venue-intro-badge svg { display: block; flex-shrink: 0; }
  .venue-intro-badge-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #020203;
  }
  .venue-intro-badge-save {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #296b49;
  }
  .venue-header {
    display: flex;
    gap: 12px;
  }
  .venue-image {
    width: 100px;
    height: 100px;
    background: #e4e5e7;
    border-radius: 16px;
    flex-shrink: 0;
  }
  .venue-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .venue-title {
    font-size: 18px;
    font-weight: 700;
    color: #020203;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-tags {
    font-size: 14px;
    font-weight: 500;
    color: #020203;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: #4F5159;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #020203;
    margin-top: auto;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-rating .star { color: #020203; font-size: 13px; }
  .venue-desc {
    font-size: 13px;
    font-weight: 500;
    color: #4F5159;
    line-height: 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-actions {
    display: flex;
    gap: 12px;
  }
  .venue-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #e3e4e8;
    border-radius: 40px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #282828;
    cursor: pointer;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-action-btn svg, .venue-action-btn img { width: 20px; height: 20px; flex-shrink: 0; }
  .venue-rating img { width: 16px; height: 20px; flex-shrink: 0; }

  /* ========== SEARCH TAB TOGGLE ========== */
  .search-toggle-wrapper {
    padding: 8px 24px 12px;
    flex-shrink: 0;
  }
  .search-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 4px;
    gap: 12px;
  }
  .search-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 10px);
    background: #f1f2f3;
    border-radius: 64px;
    transition: left 0.2s ease;
    pointer-events: none;
  }
  .search-toggle.tab-location::before {
    left: calc(50% + 6px);
  }
  .search-toggle-opt {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 64px;
    font-size: 16px;
    font-weight: 500;
    color: #020203;
    font-family: 'DM Sans', -apple-system, sans-serif;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
  }

  /* ========== VENUE DETAIL MODAL ========== */
  #venue-detail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 22;
    pointer-events: none;
    transition: background 0.35s ease;
  }
  /* No default overlay dim — the venue sheet itself provides the visual.
     The JS applies an inline rgba background only when a class detail is stacked on top. */
  #venue-detail.venue-detail-visible .venue-detail-sheet {
    pointer-events: auto;
  }

  .venue-detail-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(100% - 54px);
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transform-origin: top center;
    will-change: transform, border-radius, filter;
    visibility: hidden;
  }
  #venue-detail.venue-detail-visible .venue-detail-sheet {
    visibility: visible;
  }
  /* iOS-style stacked-sheet effect — applied while class detail is on top.
     translateY(0) keeps the venue's top edge at the status bar bottom (54px),
     and the class detail sits 70px from top → 16px visible peek. */
  .venue-detail-sheet.stacked {
    transform: scale(0.95) translateY(0px);
    border-radius: 20px 20px 0 0;
    filter: brightness(0.92);
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
                border-radius 0.35s ease,
                filter 0.35s ease;
  }
  .venue-detail-sheet.unstacking {
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
                border-radius 0.35s ease,
                filter 0.35s ease;
  }
  /* Hide venue's drag handle while stacked — class detail's handle takes over.
     Fade back in immediately when unstacking so there's no perceived lag
     between the sheet scaling back and the handle reappearing. */
  .venue-detail-sheet.stacked .venue-detail-handle {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .venue-detail-sheet .venue-detail-handle {
    transition: opacity 0.2s ease;
  }

  /* Blurred wash behind the persistent tab bar. Fades from opaque at the
     bottom to transparent at the top so scrolling content dissolves into it. */
  .tab-bar-blur {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 25;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to top, #000 50%, transparent);
    mask-image: linear-gradient(to top, #000 50%, transparent);
    transition: opacity 0.3s ease;
  }
  .tab-bar-blur.hidden-down { opacity: 0; }

  /* Persistent tab bar that floats above venue detail */
  .tab-bar-persistent {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 349px;
    height: 62px;
    background: white;
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    padding: 4px;
    z-index: 30;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), opacity 0.3s ease;
  }
  /* Hidden state: tab bar slides down off-screen when class detail content is scrolled */
  .tab-bar-persistent.hidden-down {
    transform: translateX(-50%) translateY(120px);
    opacity: 0;
    pointer-events: none;
  }

  .venue-detail-handle {
    width: 100%;
    padding: 10px 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
  }
  .venue-detail-handle::before {
    content: '';
    width: 56px;
    height: 5px;
    background: #111;
    opacity: 0.3;
    border-radius: 20px;
  }

  /* Top bar: close left, title center, save/share right */
  .vd-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    gap: 12px;
    position: relative;
  }
  .venue-detail-close {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .vd-actions-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .vd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .vd-action-icon svg { width: 24px; height: 24px; }

  /* Sticky nav with venue name */
  .vd-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    background: #f1f2f3;
  }
  .vd-sticky-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #020203;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    max-width: calc(100% - 280px);
    text-align: center;
    pointer-events: none;
  }
  .vd-sticky-nav.scrolled .vd-sticky-title {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .venue-detail-scroll {
    position: relative;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .venue-detail-scroll::-webkit-scrollbar { display: none; }

  .venue-detail-content {
    padding: 20px 20px 110px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
    box-sizing: border-box;
  }
  .vd-header-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Header — no fixed height; column stacks h1 → meta → tags */
  .vd-header#vd-section-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: fit-content;
    min-height: 0;
    flex-shrink: 0;
  }
  /* Header */
  .vd-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 32px;
    color: #020203;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .vd-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  #vd-section-header > .vd-meta {
    margin-top: 8px;
  }
  .vd-tags {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
  }
  .vd-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
  }
  .vd-star { display: flex; align-items: center; flex-shrink: 0; }
  .vd-rating-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    flex-shrink: 0;
  }
  .vd-rating-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4f5159;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }


  /* Shared: full-bleed horizontal scroll (breaks out of content padding) */
  .vd-hscroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x proximity;
  }
  .vd-hscroll::-webkit-scrollbar { display: none; }

  /* Images */
  .vd-image-placeholder {
    width: 166px;
    height: 166px;
    background: #d9d9d9;
    border-radius: 16px;
    flex-shrink: 0;
  }

  /* Tabs */
  .vd-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e4e5e7;
    position: sticky;
    top: 64px;
    z-index: 3;
    background: #f1f2f3;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .vd-tab {
    padding: 12px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  /* Bold label is always in the flow (sets the width), but invisible by default */
  .vd-tab-label-bold {
    font-weight: 700;
    visibility: hidden;
  }
  /* Regular label overlays on top */
  .vd-tab-label {
    font-weight: 500;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
  /* When active, hide regular and show bold */
  .vd-tab.active .vd-tab-label {
    visibility: hidden;
  }
  .vd-tab.active .vd-tab-label-bold {
    visibility: visible;
  }
  .vd-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: #020203;
    border-radius: 2px 2px 0 0;
    /* Motion.js handles animation */
    pointer-events: none;
  }

  /* Tab panels */
  .vd-panel {
    display: none;
    flex-direction: column;
    gap: 24px;
  }
  .vd-panel-schedule {
    gap: 0;
  }
  .vd-panel-classes {
    gap: 12px;
  }
  .vd-panel.active {
    display: flex;
    animation: vd-panel-fade 200ms cubic-bezier(.25,.46,.45,.94);
  }
  @keyframes vd-panel-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ===== SCHEDULE PANEL ===== */
  .vd-date-picker {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: sticky;
    top: 109px;
    z-index: 2;
    background: #f1f2f3;
    margin-top: -24px;
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .vd-date-picker::-webkit-scrollbar { display: none; }
  .vd-week {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .vd-date-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding-top: 4px;
  }
  .vd-date-letter {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    color: #020203;
  }
  .vd-date-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .vd-date-cell.past .vd-date-day { color: #b3b5bc; }
  /* Today is highlighted with a white circle even when not the selected date */
  .vd-date-cell.today .vd-date-day {
    background: #fff;
    color: #020203;
  }
  /* Selected date overrides today with the dark pill */
  .vd-date-cell.selected .vd-date-day {
    background: #020203;
    color: white;
  }

  .vd-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-schedule-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
  }
  .vd-schedule-card.disabled { cursor: default; }
  .vd-schedule-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .vd-schedule-time { color: #020203; }
  .vd-schedule-spots { color: #4F5159; }
  .vd-schedule-card.disabled .vd-schedule-time { color: #b3b5bc; }
  .vd-schedule-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-schedule-title { color: #b3b5bc; }
  .vd-schedule-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #4F5159;
  }
  .vd-schedule-card.disabled .vd-schedule-instructor { color: #b3b5bc; }
  .vd-schedule-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }
  .vd-schedule-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-schedule-rating { color: #b3b5bc; }
  .vd-schedule-card.disabled .vd-schedule-rating svg path { fill: #b3b5bc; }
  .vd-schedule-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
  }
  .vd-schedule-price-label { color: #020203; }
  .vd-schedule-card.disabled .vd-schedule-price-label { color: #b3b5bc; }
  .vd-price-strike {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
    text-decoration: line-through;
  }
  .vd-schedule-card.disabled .vd-price-strike { color: #b3b5bc; }
  .vd-price-final {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #379062;
  }
  .vd-price-plain {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-price-final,
  .vd-schedule-card.disabled .vd-price-plain { color: #b3b5bc; }

  /* ===== CLASSES PANEL ===== */
  .vd-class-summary-card {
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .vd-class-summary-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .vd-class-summary-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-class-summary-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vd-class-summary-seemore {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
  }
  .vd-class-summary-btn {
    background: transparent;
    border: 1px solid #e4e5e7;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
  }
  .vd-class-summary-btn:active {
    background: #f1f2f3;
  }

  /* ===== REVIEWS PANEL ===== */
  .vd-panel-reviews { gap: 16px; }

  /* Rating summary card */
  .vd-rev-summary-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-rev-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vd-rev-score {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #020203;
  }
  .vd-rev-stars-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-rev-stars { display: flex; gap: 0; }
  .vd-rev-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }
  .vd-rev-source {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Rating bars */
  .vd-rev-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .vd-rev-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-rev-bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
    width: 12px;
    flex-shrink: 0;
  }
  .vd-rev-bar-track {
    flex: 1;
    height: 8px;
    background: #f1f2f3;
    border-radius: 5px;
    overflow: hidden;
  }
  .vd-rev-bar-fill {
    height: 100%;
    background: #ffb54d;
    border-radius: 5px;
  }

  /* AI summary */
  .vd-rev-ai-summary {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
  }

  /* Individual review cards */
  .vd-rev-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vd-rev-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-rev-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .vd-rev-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
  }
  .vd-rev-card-meta {
    flex: 1;
  }
  .vd-rev-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .vd-rev-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-rev-card-stars { display: flex; gap: 0; }
  .vd-rev-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #676767;
  }
  .vd-rev-class-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-rev-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
  }
  .vd-rev-source-badge {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-rev-source-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .vd-rev-source-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Promo card */
  .vd-promo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: white;
    border-radius: 24px;
  }
  .vd-promo-icon { flex-shrink: 0; margin-top: 2px; }
  .vd-promo-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-promo-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Section titles */
  .vd-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vd-see-schedule-btn {
    width: 100%;
    background: #e10e0e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
  }
  .vd-see-schedule-btn:active {
    background: #c00b0b;
  }
  .vd-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
    margin: 0;
  }
  .vd-section-header {
    display: flex;
    align-items: center;
    gap: 0px;
  }

  /* Classes scroll */
  .vd-class-card {
    flex-shrink: 0;
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
  }
  .vd-class-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-class-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4F5159;
  }
  .vd-class-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4f5159;
    margin-top: 4px;
  }
  .vd-class-slots {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .vd-slot-btn {
    padding: 8px 12px;
    border: 1px solid #e4e5e7;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    white-space: nowrap;
    cursor: pointer;
  }
  .vd-see-all-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: auto;
    padding: 12px 16px;
    background: white;
    border-radius: 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Map card: map image stacked on an address footer */
  .vd-map-card {
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .vd-map-thumb {
    height: 168px;
    background: #e8e8e8;
    position: relative;
  }
  .vd-map-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vd-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .vd-map-address {
    padding: 16px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
    background: #fff;
  }

  /* Description */
  .vd-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
  }

  /* Rating summary */
  .vd-rating-summary {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vd-rating-big {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #020203;
  }
  .vd-rating-stars-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-stars-row {
    display: flex;
    gap: 0;
  }
  .vd-reviews-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Review cards scroll */
  .vd-review-card {
    flex-shrink: 0;
    width: 286px;
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .vd-review-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-review-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
  }
  .vd-review-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .vd-reviewer {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-review-stars { display: flex; gap: 0; }

  /* "See all" card at the end of the reviews carousel */
  .vd-review-see-all {
    flex-shrink: 0;
    align-self: stretch;
    background: white;
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    white-space: nowrap;
  }

  /* About */
  .vd-about-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
  }
  .vd-see-more {
    font-weight: 700;
    cursor: pointer;
    display: block;
  }

  /* Quick actions */
  .vd-quick-actions {
    display: flex;
    gap: 8px;
  }
  .vd-quick-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 16px;
    cursor: pointer;
  }
  .vd-quick-btn span {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    white-space: nowrap;
  }

  /* ========== CLASS DETAIL MODAL ========== */
  #class-detail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 25;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  #class-detail.class-detail-visible {
    background: rgba(0,0,0,0.15);
  }
  #class-detail.class-detail-visible .class-detail-sheet {
    pointer-events: auto;
    visibility: visible;
  }

  .class-detail-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(100% - 70px);
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transform-origin: top center;
    will-change: transform;
    visibility: hidden;
  }

  /* Handle floats absolutely at the top of the sheet so the scroll content
     (including the hero image) can scroll behind it. */
  .class-detail-handle {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 6;
    padding: 10px 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }
  .class-detail-handle::before {
    content: '';
    width: 56px;
    height: 5px;
    background: #111;
    opacity: 0.3;
    border-radius: 20px;
  }

  /* Scroll container fills the entire sheet so the hero scrolls edge-to-edge */
  .class-detail-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .class-detail-scroll::-webkit-scrollbar { display: none; }

  /* Sticky nav: X left, fade-in title center, save+share right */
  .cd-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 20px 8px;
    background: transparent;
    gap: 12px;
    transition: background 0.25s ease;
  }
  .cd-sticky-nav.scrolled {
    background: #f1f2f3;
  }
  .cd-sticky-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #020203;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 260px);
    pointer-events: none;
  }
  .cd-sticky-nav.scrolled .cd-sticky-title {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .cd-icon-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .cd-actions-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .cd-sticky-nav.scrolled .cd-icon-btn,
  .cd-sticky-nav.scrolled .cd-actions-pill {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .cd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .cd-action-icon svg { width: 24px; height: 24px; }

  /* Bookmark toggle states (shared selectors for venue + class detail) */
  .vd-bookmark-btn.bookmarked svg path,
  .cd-bookmark-btn.bookmarked svg path {
    fill: #020203;
    stroke: #020203;
  }

  /* Full-bleed hero cover image — sits behind the sticky nav.
     Negative margin pulls it up behind the sticky header so the image
     starts at the very top of the sheet and scrolls under the buttons. */
  .cd-hero-image {
    position: relative;
    width: 100%;
    height: 276px;
    margin-top: -80px;
    background: linear-gradient(180deg, #eceef1 0%, #cdced0 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  /* Content area — overlaps the hero image with rounded top corners */
  .cd-content {
    position: relative;
    z-index: 1;
    margin-top: -24px;
    padding: 24px 20px 0;
    background: #f1f2f3;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Venue header — full-width info stack (hero image is full-bleed above) */
  .cd-venue-header {
    display: flex;
  }
  .cd-venue-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cd-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #020203;
  }
  .cd-venue-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
    cursor: pointer;
    min-width: 0;
  }
  .cd-venue-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  #cd-venue-text {
    font-size: 14px;
    line-height: 20px;
  }
  .cd-venue-link > svg {
    flex-shrink: 0;
  }
  .cd-header-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
  .cd-header-rating svg { display: block; flex-shrink: 0; }
  .cd-header-rating-num {
    font-weight: 700;
    color: #020203;
  }
  .cd-header-rating-count {
    font-weight: 500;
    color: #4f5159;
  }
  /* Intro offer line — plain green text (no pill), rendered last in the info stack */
  .cd-intro-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .cd-intro-chip-icon { display: none; }
  .cd-intro-chip-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-intro-chip-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(55, 144, 98, 1);
  }
  .cd-intro-chip-strike {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(144, 147, 157, 1);
    text-decoration: line-through;
  }
  .cd-intro-chip-plain {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
  }

  /* Wraps date picker + time slots so spacing between them is one knob (gap). */
  .cd-schedule-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Date picker — horizontally paginated by week (carousel)
     Native scroll-snap is disabled because we drive the snap with a JS ease-out
     animation in prototype.js for a slower, more deliberate carousel feel. */
  .cd-date-picker {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-left: -20px;
    margin-right: -20px;
  }
  .cd-date-picker::-webkit-scrollbar { display: none; }
  /* Tighten space from header into the schedule block (cd-content flex gap is 24px). */
  .cd-header-section + .cd-schedule-stack {
    margin-top: -16px;
  }
  .cd-week {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 8px 20px 12px 20px;
    box-sizing: border-box;
    scroll-snap-align: start;
  }
  .cd-date-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
    cursor: pointer;
  }
  .cd-date-letter {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    color: #020203;
  }
  .cd-date-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .cd-date-cell.past .cd-date-day { color: #b3b5bc; }
  /* Today is highlighted with a white circle even when not the selected date */
  .cd-date-cell.today .cd-date-day {
    background: #fff;
    color: #020203;
  }
  /* Selected date overrides today with the dark pill */
  .cd-date-cell.selected .cd-date-day {
    background: #020203;
    color: #fff;
  }

  /* Time slot chips — single horizontal row, scrollable */
  .cd-time-slots {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    /* Bottom 4px + cd-tab's padding-top 12px = 16px gap to the tabs */
    padding: 16px 20px 4px;
    scroll-padding-left: 20px;
    scroll-snap-type: x proximity;
  }
  .cd-time-slots::-webkit-scrollbar { display: none; }
  .cd-time-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cd-time-slot-chip {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    white-space: nowrap;
    transition: border-color 0.15s ease;
  }
  .cd-time-slot.selected .cd-time-slot-chip {
    border-color: #161618;
  }
  .cd-time-slot-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-time-slot-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4F5159;
  }
  .cd-time-slot-spots {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
    text-align: center;
  }

  /* Tabs (sticky below nav, animated indicator) */
  .cd-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e4e5e7;
    position: sticky;
    top: 80px;
    z-index: 3;
    background: #f1f2f3;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cd-tab {
    padding: 12px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  .cd-tab-label-bold {
    font-weight: 700;
    visibility: hidden;
  }
  .cd-tab-label {
    font-weight: 500;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
  .cd-tab.active .cd-tab-label { visibility: hidden; }
  .cd-tab.active .cd-tab-label-bold { visibility: visible; }
  .cd-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: #020203;
    border-radius: 2px 2px 0 0;
    pointer-events: none;
  }

  /* Panels */
  .cd-panel { display: none; }
  .cd-panel.active {
    display: flex;
    flex-direction: column;
    gap: 40px;
    animation: cd-panel-fade 200ms cubic-bezier(.25,.46,.45,.94);
  }
  @keyframes cd-panel-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Description */
  .cd-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  /* Collapsible text sections (description, prep, cancellation) */
  .cd-collapsible p {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .cd-collapsible.collapsed p {
    max-height: 72px; /* ~3 lines at 16px/24px */
  }
  .cd-collapsible.expanded p {
    max-height: 600px;
  }
  .cd-see-more {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    cursor: pointer;
    margin-top: 4px;
  }

  /* Sections */
  .cd-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-section.cd-header-section {
    gap: 20px;
  }
  .cd-section-header {
    display: flex;
    align-items: center;
    gap: 0px;
  }
  .cd-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
  }
  .cd-section-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  .cd-section-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4f5159;
    margin: -4px 0 0;
  }
  #cd-reviews-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  /* Ratings & Reviews — inline summary (Overview tab) */
  .cd-rating-summary {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* Ratings & Reviews — full summary card (Reviews tab) */
  .cd-rating-card {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-rating-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cd-rating-big {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 40px;
    color: #020203;
  }
  .cd-rating-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cd-stars { display: flex; gap: 0; }
  .cd-stars svg { display: block; }
  .cd-rating-summary-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }
  .cd-rating-source {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4F5159;
  }
  .cd-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cd-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cd-rating-bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
    width: 12px;
    text-align: right;
  }
  .cd-rating-bar-track {
    flex: 1;
    height: 8px;
    background: #e4e5e7;
    border-radius: 4px;
    overflow: hidden;
  }
  .cd-rating-bar-fill {
    height: 100%;
    background: #FFB54D;
    border-radius: 4px;
  }
  .cd-rating-ai-summary {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
    margin: 0;
  }
  .cd-review-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
    scroll-padding-left: 20px;
    scroll-snap-type: x proximity;
  }
  .cd-review-cards::-webkit-scrollbar { display: none; }
  .cd-review-card {
    flex-shrink: 0;
    width: 286px;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-review-card-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  .cd-review-card-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
    margin: 0;
  }
  .cd-review-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cd-review-card-author {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .cd-review-card-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-review-card-stars { display: flex; }
  .cd-review-card-source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }
  .cd-review-card-source-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .cd-review-see-all {
    flex-shrink: 0;
    align-self: stretch;
    background: #fff;
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    white-space: nowrap;
  }

  /* Reviews panel list */
  .cd-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-reviews-list .cd-review-card { width: 100%; }

  /* Fixed booking footer: pinned to the device frame so it can sit above the
     persistent tab bar. Hidden offscreen by default; `.cd-booking-visible`
     adds the reveal transform so JS can animate it in when class detail opens. */
  /* Slide + visibility flip are driven by Motion in JS. CSS only defines the
     hidden resting state so first paint (before JS hydrates) doesn't flash
     the bar onscreen. The `.cd-booking-visible` class is a state marker only
     — no CSS rules tied to it beyond pointer-events. */
  .cd-booking-bar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 35;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    will-change: transform;
  }
  .cd-booking-bar.cd-booking-visible {
    pointer-events: auto;
  }
  .cd-booking-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
  }
  .cd-booking-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .cd-booking-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #020203;
  }
  .cd-booking-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-booking-intro-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-booking-intro-label[hidden] { display: none; }
  .cd-booking-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .cd-booking-price-strike {
    color: #b3b5bc;
    text-decoration: line-through;
    font-weight: 500;
  }
  .cd-booking-price-final {
    color: rgba(55, 144, 98, 1);
  }
  .cd-booking-price-plain {
    color: #020203;
    font-weight: 600;
  }
  .cd-booking-cta {
    width: 100%;
    background: #e10e0e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
  }
  .cd-booking-cta:active {
    background: #c00b0b;
  }

  /* Checkout: morph-in-place from the booking bar. Shares the same
     bottom/left/right/border-radius geometry as .cd-booking-bar so the
     seam is invisible when the sheet first appears; then grows upward
     while its background transitions from glass → solid white. */
  .cd-checkout-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    transition: opacity 0.25s ease;
  }
  .cd-checkout-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .cd-checkout-sheet {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    /* Height is controlled by JS; CSS default keeps it invisible offscreen. */
    height: 130px;
    border-radius: 24px;
    /* Closed: 8px edge gap + 16px padding = 24px to button.
       Open: 0px edge gap + 24px padding = 24px to button.
       Padding animates 16 → 24 to keep the Book button pinned in place while
       the sheet grows out to flush edges. Bottom padding reserves CTA space
       (52px button + 16px offset + 16px breathing room above the button) so
       absolutely-positioned CTA doesn't overlap the flex content above it. */
    padding: 16px 16px 84px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    visibility: hidden;
    z-index: 36;
    /* Closed (glass) state — matches .cd-booking-bar exactly. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    transition:
      background 0.44s cubic-bezier(.32,.72,0,1),
      box-shadow 0.44s cubic-bezier(.32,.72,0,1),
      backdrop-filter 0.44s cubic-bezier(.32,.72,0,1),
      -webkit-backdrop-filter 0.44s cubic-bezier(.32,.72,0,1),
      border-color 0.44s cubic-bezier(.32,.72,0,1),
      left 0.44s cubic-bezier(.32,.72,0,1),
      right 0.44s cubic-bezier(.32,.72,0,1),
      bottom 0.44s cubic-bezier(.32,.72,0,1),
      border-radius 0.44s cubic-bezier(.32,.72,0,1),
      padding 0.44s cubic-bezier(.32,.72,0,1),
      height 0.44s cubic-bezier(.32,.72,0,1);
  }
  .cd-checkout-sheet.is-open {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 24px 92px 24px;
    border-radius: 24px 24px 0 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
  }
  .cd-checkout-sheet .cd-checkout-header,
  .cd-checkout-sheet .cd-checkout-body {
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .cd-checkout-sheet.is-open .cd-checkout-header,
  .cd-checkout-sheet.is-open .cd-checkout-body {
    opacity: 1;
    transition: opacity 0.22s ease 0.18s;
  }
  .cd-checkout-header {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
  }
  .cd-checkout-title {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
    white-space: nowrap;
  }
  .cd-checkout-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
  }
  .cd-checkout-close:active {
    background: #f4f4f6;
  }
  .cd-checkout-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
  }
  .cd-checkout-info {
    display: flex;
    flex-direction: column;
  }
  .cd-checkout-class-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .cd-checkout-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
  }
  .cd-checkout-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4f5159;
  }
  .cd-checkout-venue {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-cancellation {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }
  .cd-checkout-cancellation-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-cancellation-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4f5159;
  }
  .cd-checkout-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cd-checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4f5159;
  }
  .cd-checkout-line--total {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cd-checkout-payment-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-payment-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
  }
  .cd-checkout-applepay-mark {
    display: inline-flex;
    width: 32px;
    height: 20px;
  }
  .cd-checkout-applepay-mark svg {
    width: 100%;
    height: 100%;
  }
  .cd-checkout-cta {
    /* Absolute-positioned so the button's device-relative position stays
       fixed during the morph regardless of the flex flow above it. Without
       this, when the sheet is at closed (130px) height its flex body can't
       shrink enough and the CTA overflows ~30px past the sheet bottom,
       causing the visible "bounce down" on open/close. */
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: #e10e0e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
    transition:
      left 0.44s cubic-bezier(.32,.72,0,1),
      right 0.44s cubic-bezier(.32,.72,0,1),
      bottom 0.44s cubic-bezier(.32,.72,0,1);
  }
  .cd-checkout-sheet.is-open .cd-checkout-cta {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .cd-checkout-cta:active {
    background: #c00b0b;
  }
  /* Hide original booking card while the sheet replaces it visually. */
  .cd-booking-bar.is-under-checkout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }