html,
body.kiosk-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.kiosk-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 6%, rgb(216 199 255 / 34%), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgb(8 107 76 / 12%), transparent 26rem),
    linear-gradient(135deg, var(--color-canvas) 0%, #f8fbf9 48%, var(--color-accent-soft) 100%);
  color: var(--color-ink);
}

.kiosk-shell {
  --kiosk-pad: clamp(0.8rem, 1.7vmin, 1.45rem);
  --kiosk-gap: clamp(0.7rem, 1.35vmin, 1.15rem);
  --kiosk-actions-height: 0rem;

  position: relative;
  display: grid;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: var(--kiosk-pad);
}

.kiosk-actions {
  position: absolute;
  z-index: 10;
  top: var(--kiosk-pad);
  right: var(--kiosk-pad);
  display: flex;
  gap: 0.75rem;
}

.kiosk-tool-button,
.kiosk-icon-button,
.kiosk-secondary-button,
.kiosk-more-button,
.kiosk-phone-card,
.kiosk-category,
.kiosk-start-button,
.kiosk-mode-pill,
.kiosk-distance-picker__trigger,
.kiosk-search__button,
.kiosk-zoom button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.kiosk-tool-button,
.kiosk-icon-button {
  display: inline-flex;
  min-height: 3.6rem;
  align-items: center;
  justify-content: center;
}

.kiosk-tool-button {
  gap: 0.55rem;
  padding-inline: 1rem;
  color: var(--color-brand);
  font-size: 1.08rem;
  font-weight: 900;
}

.kiosk-icon-button {
  width: 3.6rem;
  color: var(--color-brand);
}

.kiosk-layout {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 29rem);
  gap: var(--kiosk-gap);
  padding-top: calc(var(--kiosk-actions-height) + var(--kiosk-gap));
}

.kiosk-map-card {
  display: grid;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) minmax(4.8rem, 12vh);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.kiosk-place-card {
  --kiosk-card-action-inset: clamp(0.7rem, 1.25vmin, 1rem);
  --kiosk-card-padding: clamp(0.7rem, 1.35vmin, 1.15rem);

  position: relative;
  z-index: 3;
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.35vmin, 1.25rem);
  padding: var(--kiosk-card-padding);
  border-bottom: 1px solid var(--color-border);
  background: rgb(255 255 255 / 96%);
  box-shadow: var(--shadow-sm);
}

.kiosk-place-card.is-route-saved {
  box-shadow:
    inset 0 0 0 3px var(--color-success-border),
    var(--shadow-sm);
}

.kiosk-save-route {
  position: absolute;
  z-index: 4;
  top: var(--kiosk-card-action-inset);
  right: var(--kiosk-card-action-inset);
  display: inline-grid;
  width: clamp(2.75rem, 4.2vmin, 3.35rem);
  height: clamp(2.75rem, 4.2vmin, 3.35rem);
  place-items: center;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-round);
  background: rgb(255 255 255 / 94%);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.kiosk-save-route svg {
  display: block;
}

.kiosk-save-route path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kiosk-save-route:hover,
.kiosk-save-route:focus-visible {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.kiosk-save-route.is-saved {
  border-color: var(--color-success-border);
  background: var(--color-brand-soft);
  color: #dc2626;
}

.kiosk-save-route.is-saved path {
  fill: currentColor;
  stroke: currentColor;
}

.kiosk-photo {
  display: block;
  overflow: hidden;
  min-height: 0;
  max-height: 12rem;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--color-info-soft);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgb(23 33 28 / 8%);
}

.kiosk-photo:hover,
.kiosk-photo:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-brand), var(--shadow-sm);
}

.kiosk-photo svg {
  width: 100%;
  height: 100%;
}

.kiosk-place-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-content: center;
  gap: clamp(0.42rem, 0.9vmin, 0.82rem);
  padding-right: clamp(3rem, 5vmin, 4rem);
}

.kiosk-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  color: var(--color-brand);
}

.kiosk-title-row h1 {
  color: var(--color-ink);
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: 1.03;
}

.kiosk-title-row p,
.kiosk-rating span:last-child,
.kiosk-distance-row small {
  color: var(--color-muted);
}

.kiosk-title-row p {
  margin-top: 0.35rem;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 800;
}

.kiosk-rating,
.kiosk-distance-row,
.kiosk-place-footer,
.kiosk-mode-pill,
.kiosk-open-status,
.kiosk-start-button {
  display: flex;
  align-items: center;
}

.kiosk-rating {
  gap: 0.8rem;
  color: var(--color-warning);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-weight: 900;
}

.kiosk-rating strong {
  color: var(--color-ink);
}

.kiosk-distance-row {
  flex-wrap: wrap;
  gap: 0.9rem;
}

.kiosk-mode-pill {
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.25rem 0.65rem;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-ink);
}

.kiosk-mode-pill.is-active {
  border-color: var(--color-success-border);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.kiosk-mode-pill svg {
  color: var(--color-brand);
}

.kiosk-mode-pill span {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}

.kiosk-divider {
  width: 1px;
  height: 2.2rem;
  background: var(--color-border);
}

.kiosk-place-footer {
  justify-content: space-between;
  gap: 1rem;
}

.kiosk-place-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-right: calc(var(--kiosk-card-action-inset) - var(--kiosk-card-padding));
}

.kiosk-place-actions [data-kiosk-view-details] {
  max-width: none;
  white-space: nowrap;
  text-decoration: none;
}

.kiosk-place-actions [data-kiosk-view-details]:hover,
.kiosk-place-actions [data-kiosk-view-details]:focus-visible {
  text-decoration: none;
}

.kiosk-open-status {
  gap: 0.75rem;
  color: var(--color-success);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
}

.kiosk-open-status span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: currentColor;
}

.kiosk-secondary-button {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1.4rem;
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.kiosk-secondary-button:hover,
.kiosk-secondary-button:focus-visible,
.kiosk-more-button:hover,
.kiosk-more-button:focus-visible {
  background: var(--color-brand-soft);
}

.kiosk-map {
  --map-zoom-scale: 1;

  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-map-placeholder);
  isolation: isolate;
}

.kiosk-map.map-zoom-1 { --map-zoom-scale: 1.08; }
.kiosk-map.map-zoom-2 { --map-zoom-scale: 1.16; }
.kiosk-map.map-zoom-3 { --map-zoom-scale: 1.24; }

.kiosk-map__grid {
  position: absolute;
  inset: -3rem;
  background-image:
    linear-gradient(28deg, transparent 48%, rgb(255 255 255 / 92%) 49%, rgb(255 255 255 / 92%) 51%, transparent 52%),
    linear-gradient(118deg, transparent 48%, rgb(255 255 255 / 92%) 49%, rgb(255 255 255 / 92%) 51%, transparent 52%),
    linear-gradient(#cfddd5 1px, transparent 1px),
    linear-gradient(90deg, #cfddd5 1px, transparent 1px);
  background-size: 9rem 9rem, 10rem 10rem, 3rem 3rem, 3rem 3rem;
  opacity: 0.92;
}

.kiosk-map__water {
  position: absolute;
  right: -8%;
  bottom: -19%;
  width: 40%;
  height: 58%;
  border-radius: 55% 0 0 0;
  background: #a9d8df;
}

.kiosk-road {
  position: absolute;
  z-index: 1;
  height: 0.9rem;
  border: 1px solid #c3c9c6;
  background: var(--color-surface);
}

.kiosk-road--one { top: 20%; left: 4%; width: 92%; transform: rotate(-11deg); }
.kiosk-road--two { top: 58%; left: 0%; width: 82%; transform: rotate(9deg); }
.kiosk-road--three { top: 15%; left: 43%; width: 68%; transform: rotate(67deg); }
.kiosk-road--four { top: 50%; left: 22%; width: 50%; transform: rotate(-7deg); }

.kiosk-route-line {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--map-zoom-scale));
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.kiosk-route-line__shadow,
.kiosk-route-line__main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.kiosk-route-line__shadow {
  stroke: #ffffff;
  stroke-width: 22;
}

.kiosk-route-line__main {
  stroke: #0d63e8;
  stroke-width: 15;
}

.kiosk-map.is-walking .kiosk-route-line__main {
  stroke-dasharray: 1 24;
  stroke-width: 13;
}

.kiosk-map.is-walking .kiosk-route-line__shadow {
  stroke-dasharray: 1 24;
  stroke-width: 21;
}

.kiosk-map-marker {
  position: absolute;
  z-index: 5;
}

.kiosk-map-marker--start {
  left: 14%;
  bottom: 26%;
  width: 2.9rem;
  height: 2.9rem;
  border: 0.55rem solid #ffffff;
  border-radius: 50%;
  background: var(--color-info);
  box-shadow: 0 3px 16px rgb(7 19 73 / 20%);
}

.kiosk-map-marker--start::after {
  content: "You are here";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.62rem);
  z-index: 2;
  padding: 0.42rem 0.66rem;
  border: 1px solid rgb(7 19 73 / 12%);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 22px rgb(7 19 73 / 14%);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.kiosk-map-marker--finish {
  top: 10%;
  right: 8%;
  color: #e43d55;
  filter: drop-shadow(0 5px 7px rgb(7 19 73 / 25%));
  transform: translate(-50%, -100%);
  transition: left var(--duration-normal) var(--ease-standard), top var(--duration-normal) var(--ease-standard);
}

.kiosk-route-stop-markers {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.kiosk-route-step-markers {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.kiosk-route-stop-marker {
  position: absolute;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 0.25rem solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgb(7 19 73 / 20%);
  transform: translate(-50%, -50%);
}

.kiosk-route-listing-bubble {
  position: absolute;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 0.22rem solid var(--color-surface);
  border-radius: 0.92rem;
  background: var(--color-surface);
  box-shadow: 0 8px 20px rgb(7 19 73 / 18%);
  transform: translate(-50%, calc(-100% - 0.7rem)) scale(1);
  transform-origin: 50% 100%;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), z-index var(--duration-fast) var(--ease-standard);
  pointer-events: auto;
}

.kiosk-route-listing-bubble:hover {
  z-index: 20;
  box-shadow: 0 16px 34px rgb(7 19 73 / 24%);
  transform: translate(-50%, calc(-100% - 0.7rem)) scale(1.42);
}

.kiosk-route-listing-bubble--destination {
  z-index: 10;
}

.kiosk-route-listing-bubble__image {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 0.68rem;
  background: linear-gradient(135deg, #d8f2ec, #ffffff);
  color: var(--color-brand);
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0;
  overflow: hidden;
}

.kiosk-route-listing-bubble[data-category="restaurants"] .kiosk-route-listing-bubble__image,
.kiosk-route-listing-bubble[data-category="groceries"] .kiosk-route-listing-bubble__image {
  background: linear-gradient(135deg, #fff1c2, #ffffff);
  color: #9a6400;
}

.kiosk-route-listing-bubble[data-category="shopping"] .kiosk-route-listing-bubble__image {
  background: linear-gradient(135deg, #efe4ff, #ffffff);
  color: #5e35b1;
}

.kiosk-route-listing-bubble[data-category="beaches"] .kiosk-route-listing-bubble__image {
  background: linear-gradient(135deg, #caf0ff, #ffffff);
  color: #0a6c8c;
}

.kiosk-route-listing-bubble[data-category="activities"] .kiosk-route-listing-bubble__image,
.kiosk-route-listing-bubble[data-category="transport"] .kiosk-route-listing-bubble__image {
  background: linear-gradient(135deg, #dff0ff, #ffffff);
  color: #0d63e8;
}

.kiosk-route-listing-bubble__badge {
  position: absolute;
  right: -0.38rem;
  bottom: -0.38rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 0.16rem solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.kiosk-route-listing-bubble--destination .kiosk-route-listing-bubble__badge {
  background: #e43d55;
}

.kiosk-route-listing-bubble__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.3rem);
  max-width: 12rem;
  padding: 0.28rem 0.48rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 22px rgb(7 19 73 / 15%);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%) translateY(-0.12rem);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  pointer-events: none;
}

.kiosk-route-listing-bubble:hover .kiosk-route-listing-bubble__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.kiosk-route-step-marker {
  position: absolute;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 0.22rem solid var(--color-surface);
  border-radius: 50%;
  background: #0d63e8;
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 3px 10px rgb(7 19 73 / 22%);
  transform: translate(-50%, -50%);
}

.kiosk-route-step-marker.is-complete {
  background: #83b8ff;
}

.kiosk-route-step-marker.is-active {
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-width: 0.3rem;
  background: #0d63e8;
  box-shadow: 0 0 0 0.35rem rgb(13 99 232 / 22%), 0 5px 16px rgb(7 19 73 / 25%);
}

.kiosk-route-step-marker.is-arrive {
  background: var(--color-brand);
}

.kiosk-route-step-marker.is-active.is-arrive {
  background: #0d63e8;
}

.kiosk-map__route-tools {
  position: absolute;
  z-index: 7;
  top: 1.35rem;
  right: 1.35rem;
  display: flex;
  max-width: calc(100% - 7rem);
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}

.kiosk-map__route-tools > div,
.kiosk-route-count,
.kiosk-map-action {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.kiosk-map__route-tools > div {
  gap: 0.45rem;
  padding-inline: 1rem;
}

.kiosk-map__route-tools strong {
  font-size: 1.35rem;
  line-height: 1;
}

.kiosk-map__route-tools span {
  color: var(--color-muted);
  font-weight: 900;
}

.kiosk-route-count {
  padding-inline: 1rem;
  color: var(--color-ink);
  font-weight: 900;
}

.kiosk-map-action {
  gap: 0.5rem;
  padding-inline: 0.9rem 1rem;
  color: var(--color-brand);
  font-weight: 900;
  white-space: nowrap;
}

.kiosk-map-action span {
  color: inherit;
}

.kiosk-map-action:hover,
.kiosk-map-action:focus-visible {
  background: var(--color-brand-soft);
}

.kiosk-map__next-step {
  position: absolute;
  z-index: 6;
  top: 5.25rem;
  left: 1.6rem;
  display: flex;
  width: min(22rem, calc(100% - 3.2rem));
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: rgb(255 255 255 / 94%);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.kiosk-map__next-step span {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.kiosk-map__next-step small {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.kiosk-map__next-step strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-zoom {
  position: absolute;
  z-index: 6;
  top: 2rem;
  left: 1.6rem;
  display: grid;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgb(7 19 73 / 12%);
}

.kiosk-zoom button {
  width: 3.8rem;
  height: 3.8rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-ink);
  font-size: 2rem;
  font-weight: 900;
}

.kiosk-zoom button + button {
  border-top: 1px solid #dce3ef;
}

.kiosk-location-status {
  position: absolute;
  z-index: 6;
  right: 1.35rem;
  bottom: 1.65rem;
  max-width: min(28rem, calc(100% - 18rem));
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 800;
}

.kiosk-start-button {
  --start-icon-size: clamp(3.4rem, 6.8vmin, 5.8rem);

  align-self: center;
  height: calc(100% - 1rem);
  min-height: 0;
  justify-content: center;
  gap: clamp(0.9rem, 2vmin, 1.75rem);
  margin: 0.5rem 0.75rem;
  border: 1px solid var(--color-brand-active);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-brand) 0%, #0d7a58 100%);
  color: var(--color-on-brand);
  font-size: clamp(2rem, 5vmin, 4.75rem);
  font-weight: 900;
  line-height: 1;
  text-transform: none;
  box-shadow: 0 14px 28px rgb(8 107 76 / 24%);
}

.kiosk-start-button__icon {
  flex: 0 0 var(--start-icon-size);
  display: grid;
  width: var(--start-icon-size);
  height: var(--start-icon-size);
  min-width: var(--start-icon-size);
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
}

.kiosk-start-button__icon svg {
  width: 62%;
  height: 62%;
}

.kiosk-start-button [data-kiosk-start-label] {
  white-space: nowrap;
}

.kiosk-start-button.is-started {
  background: linear-gradient(135deg, var(--color-brand-active) 0%, var(--color-brand) 100%);
}

.kiosk-side {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr);
}

.kiosk-discovery-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: var(--kiosk-gap);
}

.kiosk-discovery-panel[hidden],
.kiosk-directions-panel[hidden] {
  display: none;
}

.kiosk-search {
  --search-control-size: clamp(3.5rem, 8vh, 4.25rem);

  display: grid;
  height: var(--search-control-size);
  min-height: 0;
  grid-template-columns: var(--search-control-size) minmax(0, 1fr) var(--search-control-size);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.kiosk-search > * {
  min-width: 0;
}

.kiosk-search:focus-within {
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.kiosk-distance-picker {
  position: relative;
  z-index: 5;
  height: 100%;
  min-width: 0;
  border-right: 1px solid var(--color-border);
}

.kiosk-distance-picker__trigger {
  display: inline-flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  padding: 0;
  border: 0;
  border-radius: 6px 0 0 6px;
  color: var(--color-brand);
  box-shadow: none;
}

.kiosk-distance-picker__trigger:hover,
.kiosk-distance-picker__trigger[aria-expanded="true"] {
  background: var(--color-brand-soft);
}

.kiosk-distance-picker__trigger [data-kiosk-mode-icon] {
  display: none;
}

.kiosk-distance-picker__trigger [data-kiosk-mode-icon].is-active {
  display: block;
}

.kiosk-distance-picker__chevron {
  color: var(--color-muted);
}

.kiosk-distance-picker__menu {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + var(--space-2));
  left: 0;
  width: 13.5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.kiosk-distance-picker__menu button {
  display: flex;
  width: 100%;
  min-height: var(--control-height);
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-align: left;
  box-shadow: none;
}

.kiosk-distance-picker__menu button:hover,
.kiosk-distance-picker__menu button[aria-selected="true"] {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.kiosk-search input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 0 0.65rem 0 1rem;
  background: transparent;
  color: var(--color-ink);
  font-size: clamp(1rem, 1.22vw, 1.25rem);
  font-weight: 800;
  line-height: 1.1;
}

.kiosk-search input::-webkit-search-cancel-button,
.kiosk-search input::-webkit-search-decoration,
.kiosk-search input::-webkit-search-results-button,
.kiosk-search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.kiosk-search input::placeholder {
  color: var(--color-placeholder);
}

.kiosk-search__button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--font-weight-black);
  box-shadow: none;
}

.kiosk-search__button span {
  display: none;
}

.kiosk-search__button:hover,
.kiosk-search__button:focus-visible {
  background: var(--color-brand-hover);
}

.kiosk-category-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(3rem, auto);
  gap: var(--kiosk-gap);
}

.kiosk-category {
  display: grid;
  min-height: 0;
  place-items: center;
  gap: 0.35rem;
  padding: 0.65rem;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.kiosk-category svg {
  width: clamp(2.2rem, 5.5vmin, 3.75rem);
  height: clamp(2.2rem, 5.5vmin, 3.75rem);
  color: var(--color-brand);
}

.kiosk-category:hover,
.kiosk-category:focus-visible,
.kiosk-category.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  box-shadow: 0 0 0 2px rgb(8 107 76 / 18%), var(--shadow-sm);
}

.kiosk-category.is-active svg,
.kiosk-category:hover svg {
  color: var(--color-brand);
}

.kiosk-more-button {
  display: flex;
  grid-column: 1 / -1;
  height: clamp(3rem, 7vh, 4.1rem);
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  border-color: var(--color-border-strong);
  color: var(--color-brand);
  font-size: 1.15rem;
}

.kiosk-more-button span {
  color: var(--color-brand);
  letter-spacing: 0.2em;
}

.kiosk-phone-row {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kiosk-gap);
}

.kiosk-phone-card {
  display: grid;
  height: clamp(5.4rem, 15vh, 8.8rem);
  min-height: 0;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  padding: 0.8rem;
  color: var(--color-brand);
  font-size: 1.05rem;
}

.kiosk-phone-card small {
  color: var(--color-muted);
  font-weight: 800;
  text-align: center;
}

.kiosk-qr {
  display: block;
  width: clamp(2.4rem, 38%, 4.4rem);
  max-width: 100%;
  max-height: 48%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 0.15rem solid #d9e0ec;
  background: #fff;
}

.kiosk-directions-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  min-width: 0;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
  gap: var(--kiosk-gap);
  overflow: hidden;
  padding: clamp(0.75rem, 1.25vmin, 1rem);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 96%);
  box-shadow: var(--shadow-md);
}

.kiosk-directions-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
}

.kiosk-directions-back {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.kiosk-directions-header p,
.kiosk-directions-note {
  margin: 0;
  color: var(--color-muted);
  font-weight: 800;
}

.kiosk-directions-header p {
  color: var(--color-brand);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kiosk-directions-header h2 {
  overflow: hidden;
  margin: 0.15rem 0 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-directions-summary,
.kiosk-directions-next,
.kiosk-directions-actions {
  display: flex;
  align-items: center;
}

.kiosk-directions-summary {
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border-radius: 8px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.kiosk-directions-summary strong {
  color: var(--color-ink);
  font-size: clamp(1.55rem, 3.4vmin, 2.35rem);
  line-height: 1;
}

.kiosk-directions-summary span,
.kiosk-directions-summary small {
  color: var(--color-muted);
  font-weight: 900;
}

.kiosk-directions-next {
  gap: 0.8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.kiosk-directions-next span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.kiosk-directions-next small {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.kiosk-directions-next strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-directions-controls,
.kiosk-auto-follow {
  display: flex;
  align-items: center;
}

.kiosk-directions-controls {
  justify-content: space-between;
  gap: 0.55rem;
}

.kiosk-step-control {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}

.kiosk-step-control:disabled {
  color: var(--color-muted);
  opacity: 0.42;
}

.kiosk-directions-controls > strong {
  min-width: 6rem;
  color: var(--color-ink);
  font-size: 0.9rem;
  text-align: center;
}

.kiosk-auto-follow {
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-brand);
  font-weight: 900;
}

.kiosk-auto-follow input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-brand);
}

.kiosk-directions-steps {
  display: grid;
  min-height: 0;
  overflow: auto;
  gap: 0;
  margin: 0;
  padding: 0.15rem 0.15rem 0.15rem 0;
  list-style: none;
}

.kiosk-directions-step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 4.2rem;
  padding: 0.2rem 0 0.8rem;
  border-radius: 8px;
  color: var(--color-ink);
}

.kiosk-directions-step.is-active {
  padding: 0.45rem 0.55rem 0.75rem;
  background: var(--color-brand-soft);
}

.kiosk-directions-step__icon {
  position: relative;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 1.05rem;
  font-weight: 900;
}

.kiosk-directions-step.is-complete .kiosk-directions-step__icon {
  background: #83b8ff;
}

.kiosk-directions-step.is-active .kiosk-directions-step__icon {
  background: #0d63e8;
  box-shadow: 0 0 0 0.25rem rgb(13 99 232 / 18%);
}

.kiosk-directions-step:not(:last-child) .kiosk-directions-step__icon::after {
  position: absolute;
  top: 2.15rem;
  bottom: -2rem;
  left: 50%;
  width: 2px;
  background: var(--color-border-strong);
  content: "";
  transform: translateX(-50%);
}

.kiosk-directions-step span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  padding-top: 0.12rem;
}

.kiosk-directions-step strong {
  font-size: 1rem;
  line-height: 1.18;
}

.kiosk-directions-step small {
  color: var(--color-muted);
  font-weight: 800;
}

.kiosk-directions-step em {
  justify-self: start;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-brand);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.kiosk-directions-actions {
  gap: 0.65rem;
}

.kiosk-directions-actions .kiosk-secondary-button {
  flex: 1 1 0;
  justify-content: center;
  padding-inline: 0.75rem;
}

.kiosk-directions-note {
  font-size: 0.82rem;
  line-height: 1.25;
}

.kiosk-status {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 12;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  border-radius: 8px;
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, 150%);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.kiosk-status.is-visible {
  transform: translate(-50%, 0);
}

.kiosk-route-dialog {
  width: min(54rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100dvh - 2rem));
  overflow: auto;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 28px 90px rgb(7 19 73 / 24%);
}

.kiosk-route-dialog::backdrop {
  background: rgb(7 19 73 / 45%);
}

.kiosk-route-dialog__header,
.kiosk-route-dialog__summary,
.kiosk-route-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.kiosk-route-dialog__header {
  border-bottom: 1px solid var(--color-border);
}

.kiosk-route-dialog__header p {
  margin: 0 0 0.18rem;
  color: var(--color-brand);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kiosk-route-dialog__header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.05;
}

.kiosk-route-dialog__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 1.8rem;
  font-weight: 900;
}

.kiosk-route-search {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.15rem 0;
}

.kiosk-route-search select,
.kiosk-route-search input {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 800;
}

.kiosk-route-search select {
  padding-inline: 0.85rem;
}

.kiosk-route-search input {
  padding-inline: 1rem;
}

.kiosk-route-dialog__summary {
  align-items: flex-start;
  padding-block: 0.85rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.kiosk-route-dialog__summary strong {
  color: var(--color-brand);
}

.kiosk-route-results {
  display: grid;
  max-height: min(22rem, 44vh);
  overflow: auto;
  gap: 0.65rem;
  padding: 0 1.15rem 1rem;
}

.kiosk-route-stop-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.kiosk-route-stop-card.is-added {
  border-color: var(--color-success-border);
  background: var(--color-brand-soft);
}

.kiosk-route-stop-card__visual {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-brand);
  font-size: 1.45rem;
  font-weight: 900;
}

.kiosk-route-stop-card__details {
  min-width: 0;
}

.kiosk-route-stop-card__details span,
.kiosk-route-stop-card__details p {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.kiosk-route-stop-card__details h3 {
  overflow: hidden;
  margin: 0.1rem 0;
  font-size: 1.1rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-route-stop-card__details p {
  margin: 0;
}

.kiosk-route-stop-card__button {
  min-height: 2.8rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-brand);
  border-radius: 8px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 900;
}

.kiosk-route-stop-card__button[aria-pressed="true"],
.kiosk-route-stop-card__button:disabled {
  background: var(--color-surface);
  color: var(--color-brand);
}

.kiosk-route-empty {
  margin: 0;
  padding: 0 1.15rem 1rem;
  color: var(--color-muted);
  font-weight: 800;
}

.kiosk-route-dialog__footer {
  border-top: 1px solid var(--color-border);
}

.kiosk-handoff-dialog {
  width: min(44rem, calc(100vw - 2rem));
}

.kiosk-handoff-layout {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1.15rem;
}

.kiosk-handoff-qr {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 13rem;
  aspect-ratio: 1;
  padding: 0.35rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-surface-raised);
  object-fit: contain;
}

.kiosk-handoff-copy {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.kiosk-handoff-copy p {
  margin: 0;
  color: var(--color-muted);
  font-weight: 800;
  line-height: 1.4;
}

.kiosk-handoff-code {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.kiosk-handoff-code div,
.kiosk-handoff-link {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.kiosk-handoff-code dt,
.kiosk-handoff-link span {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kiosk-handoff-code dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.kiosk-handoff-code strong {
  color: var(--color-brand);
  font-size: 1.4rem;
}

.kiosk-handoff-link {
  display: grid;
  gap: 0.4rem;
}

.kiosk-handoff-link input {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
}

@media (max-width: 42rem) {
  .kiosk-handoff-layout {
    grid-template-columns: 1fr;
  }

  .kiosk-handoff-qr {
    min-height: 9rem;
  }

  .kiosk-handoff-code {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 72rem) {
  .kiosk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  }

  .kiosk-discovery-panel {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .kiosk-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(2.8rem, auto);
  }

  .kiosk-category {
    padding: 0.55rem;
    font-size: 0.92rem;
  }

  .kiosk-phone-card {
    font-size: 0.88rem;
  }

  .kiosk-place-actions {
    gap: 0.45rem;
  }

  .kiosk-secondary-button {
    padding-inline: 1rem;
  }
}

@media (max-width: 42rem) {
  .kiosk-shell {
    --kiosk-pad: 0.65rem;
    --kiosk-gap: 0.55rem;
    --kiosk-actions-height: 0rem;
  }

  .kiosk-actions {
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .kiosk-tool-button,
  .kiosk-icon-button {
    min-height: 3rem;
  }

  .kiosk-tool-button {
    padding-inline: 0.75rem;
    font-size: 0.95rem;
  }

  .kiosk-icon-button {
    width: 3rem;
  }

  .kiosk-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(8rem, 25vh);
    padding-top: calc(var(--kiosk-actions-height) + var(--kiosk-gap));
  }

  .kiosk-layout.is-directions-open {
    grid-template-rows: minmax(0, 0.58fr) minmax(13.5rem, 0.42fr);
  }

  .kiosk-place-card {
    grid-template-columns: minmax(4.6rem, 6.2rem) minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem;
  }

  .kiosk-photo {
    align-self: center;
    max-height: 5.8rem;
  }

  .kiosk-title-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kiosk-title-row > svg {
    display: none;
  }

  .kiosk-title-row h1 {
    font-size: 1.25rem;
  }

  .kiosk-title-row p {
    margin-top: 0.1rem;
    font-size: 0.85rem;
  }

  .kiosk-rating {
    gap: 0.35rem;
    font-size: 0.85rem;
  }

  .kiosk-distance-row,
  .kiosk-place-footer {
    display: none;
  }

  .kiosk-map-card {
    grid-template-rows: auto minmax(0, 1fr) minmax(3.6rem, 8vh);
  }

  .kiosk-start-button {
    --start-icon-size: 2.8rem;

    font-size: 1.4rem;
  }

  .kiosk-zoom {
    top: 0.55rem;
    left: 0.55rem;
  }

  .kiosk-zoom button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.45rem;
  }

  .kiosk-map__route-tools {
    top: 0.55rem;
    right: 0.55rem;
    max-width: calc(100% - 4rem);
    gap: 0.35rem;
  }

  .kiosk-map__route-tools > div,
  .kiosk-route-count,
  .kiosk-map-action {
    min-height: 2.35rem;
    padding-inline: 0.6rem;
    font-size: 0.72rem;
  }

  .kiosk-map__route-tools strong {
    font-size: 0.95rem;
  }

  .kiosk-map-action span {
    display: none;
  }

  .kiosk-map__next-step {
    top: 3.45rem;
    left: 0.55rem;
    width: min(15.5rem, calc(100% - 1.1rem));
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
  }

  .kiosk-map__next-step small {
    font-size: 0.66rem;
  }

  .kiosk-map__next-step strong {
    font-size: 0.78rem;
  }

  .kiosk-route-stop-marker {
    width: 1.55rem;
    height: 1.55rem;
    border-width: 0.18rem;
    font-size: 0.7rem;
  }

  .kiosk-location-status {
    display: none;
  }

  .kiosk-search {
    --search-control-size: 3.35rem;
  }

  .kiosk-distance-picker__trigger > svg:not(.kiosk-distance-picker__chevron),
  .kiosk-search__button svg {
    width: 2.15rem;
    height: 2.15rem;
  }

  .kiosk-distance-picker__chevron {
    width: 0.85rem;
    height: 0.85rem;
  }

  .kiosk-search input {
    padding: 0 0.75rem 0 1.15rem;
    font-size: 0.9rem;
  }

  .kiosk-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .kiosk-category:nth-child(n+5) {
    display: none;
  }

  .kiosk-category {
    gap: 0.18rem;
    padding: 0.4rem;
    font-size: 0.82rem;
  }

  .kiosk-category svg {
    width: 1.85rem;
    height: 1.85rem;
  }

  .kiosk-more-button {
    height: 3rem;
    font-size: 0.9rem;
  }

  .kiosk-directions-panel {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .kiosk-directions-next {
    display: none;
  }

  .kiosk-directions-header {
    gap: 0.5rem;
  }

  .kiosk-directions-back {
    width: 2.35rem;
    height: 2.35rem;
  }

  .kiosk-directions-header h2 {
    font-size: 1rem;
  }

  .kiosk-directions-summary {
    padding: 0.55rem 0.65rem;
  }

  .kiosk-directions-summary strong {
    font-size: 1.25rem;
  }

  .kiosk-directions-controls {
    gap: 0.35rem;
  }

  .kiosk-step-control {
    min-height: 2.25rem;
    padding-inline: 0.48rem;
    font-size: 0.7rem;
  }

  .kiosk-directions-controls > strong {
    min-width: 4.8rem;
    font-size: 0.72rem;
  }

  .kiosk-auto-follow {
    min-height: 2.15rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
  }

  .kiosk-directions-step {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.5rem;
    min-height: 3.4rem;
    padding-bottom: 0.45rem;
  }

  .kiosk-directions-step__icon {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.85rem;
  }

  .kiosk-directions-step:not(:last-child) .kiosk-directions-step__icon::after {
    top: 1.7rem;
  }

  .kiosk-directions-step strong {
    font-size: 0.82rem;
  }

  .kiosk-directions-step small,
  .kiosk-directions-note {
    font-size: 0.7rem;
  }

  .kiosk-directions-actions {
    gap: 0.45rem;
  }

  .kiosk-directions-actions .kiosk-secondary-button {
    min-height: 2.35rem;
    font-size: 0.72rem;
  }

}

@media (max-width: 34rem) {
  .kiosk-shell {
    --kiosk-pad: 0.5rem;
    --kiosk-gap: 0.45rem;
    --kiosk-actions-height: 0rem;
  }

  .kiosk-layout {
    grid-template-rows: minmax(0, 1fr) minmax(7.25rem, 24vh);
  }

  .kiosk-place-card {
    grid-template-columns: minmax(4rem, 5.3rem) minmax(0, 1fr);
    padding: 0.45rem;
  }

  .kiosk-photo {
    max-height: 5rem;
  }

  .kiosk-title-row h1 {
    font-size: 1.05rem;
  }

  .kiosk-title-row p,
  .kiosk-rating {
    font-size: 0.75rem;
  }

  .kiosk-rating span:first-child {
    display: none;
  }

  .kiosk-map__route-tools > div {
    display: none;
  }

  .kiosk-map__next-step {
    width: min(12.8rem, calc(100% - 1.1rem));
  }

  .kiosk-start-button {
    --start-icon-size: 2.3rem;

    font-size: 1.08rem;
  }

  .kiosk-category {
    font-size: 0.72rem;
  }

  .kiosk-layout.is-directions-open {
    grid-template-rows: minmax(0, 0.55fr) minmax(13.5rem, 0.45fr);
  }
}

@media (max-height: 700px) {
  .kiosk-shell {
    --kiosk-pad: 0.5rem;
    --kiosk-gap: 0.45rem;
    --kiosk-actions-height: 0rem;
  }

  .kiosk-tool-button,
  .kiosk-icon-button {
    min-height: 2.8rem;
  }

  .kiosk-icon-button {
    width: 2.8rem;
  }

  .kiosk-place-card {
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
    padding: 0.5rem;
  }

  .kiosk-photo {
    max-height: 6.7rem;
  }

  .kiosk-title-row h1 {
    font-size: 1.45rem;
  }

  .kiosk-title-row p {
    font-size: 0.9rem;
  }

  .kiosk-rating {
    font-size: 0.92rem;
  }

  .kiosk-mode-pill {
    min-height: 2.25rem;
  }

  .kiosk-open-status {
    font-size: 0.92rem;
  }

  .kiosk-secondary-button {
    min-height: 2.5rem;
  }

  .kiosk-start-button {
    --start-icon-size: 3.2rem;

    font-size: 2.25rem;
  }

  .kiosk-search {
    height: 3.7rem;
  }

  .kiosk-category {
    font-size: 0.86rem;
  }

  .kiosk-phone-card {
    height: 4.7rem;
    font-size: 0.88rem;
  }

  .kiosk-qr {
    width: 3rem;
  }

  .kiosk-map__next-step,
  .kiosk-map__route-tools {
    display: none;
  }

  .kiosk-directions-panel {
    gap: 0.35rem;
    padding: 0.45rem;
  }

  .kiosk-directions-note {
    display: none;
  }
}

@media (max-height: 560px) {
  .kiosk-map-card {
    grid-template-rows: auto minmax(0, 1fr) minmax(3.2rem, 7vh);
  }

  .kiosk-title-row p,
  .kiosk-rating,
  .kiosk-distance-row,
  .kiosk-place-footer,
  .kiosk-phone-row {
    display: none;
  }

  .kiosk-place-card {
    grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
  }

  .kiosk-title-row h1 {
    font-size: 1.1rem;
  }

  .kiosk-start-button {
    --start-icon-size: 2.55rem;

    font-size: 1.45rem;
  }
}

@media (max-height: 440px) {
  .kiosk-photo {
    display: none;
  }

  .kiosk-place-card {
    grid-template-columns: 1fr;
  }

  .kiosk-title-row h1 {
    font-size: 1rem;
  }
}

@media (max-width: 42rem) and (max-height: 700px) {
  .kiosk-place-card {
    grid-template-columns: minmax(4.2rem, 5.4rem) minmax(0, 1fr);
    padding: 0.42rem;
  }

  .kiosk-photo {
    max-height: 4.8rem;
  }

  .kiosk-title-row h1 {
    font-size: 1rem;
  }

  .kiosk-start-button {
    --start-icon-size: 2.25rem;

    font-size: 1.08rem;
  }

  .kiosk-search {
    --search-control-size: 3rem;
  }

  .kiosk-category {
    font-size: 0.72rem;
  }

  .kiosk-layout.is-directions-open {
    grid-template-rows: minmax(0, 0.5fr) minmax(12rem, 0.5fr);
  }
}

@media (max-width: 42rem) {
  .kiosk-shell {
    --kiosk-pad: clamp(0.55rem, 2.3vmin, 0.85rem);
    --kiosk-gap: clamp(0.45rem, 1.75vmin, 0.7rem);

    padding: var(--kiosk-pad);
  }

  .kiosk-layout {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-areas:
      "search"
      "categories"
      "route"
      "handoff";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      minmax(3.55rem, 8vh)
      auto
      minmax(0, 1fr)
      minmax(4.35rem, 8.8vh);
    gap: var(--kiosk-gap);
    padding-top: 0;
  }

  .kiosk-side,
  .kiosk-discovery-panel {
    display: contents;
  }

  .kiosk-discovery-panel[hidden],
  .kiosk-directions-panel[hidden] {
    display: none;
  }

  .kiosk-search {
    --search-control-size: 100%;

    grid-area: search;
    height: 100%;
    grid-template-columns: minmax(3.4rem, 4.1rem) minmax(0, 1fr) minmax(3.15rem, 3.75rem);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .kiosk-distance-picker__trigger {
    border-radius: 6px 0 0 6px;
  }

  .kiosk-distance-picker__trigger > svg:not(.kiosk-distance-picker__chevron) {
    width: clamp(1.7rem, 8vw, 2.35rem);
    height: clamp(1.7rem, 8vw, 2.35rem);
  }

  .kiosk-distance-picker__chevron {
    width: 0.8rem;
    height: 0.8rem;
  }

  .kiosk-search input {
    padding: 0 0.7rem 0 1.05rem;
    font-size: clamp(1.05rem, 5.7vw, 1.45rem);
    font-weight: 800;
  }

  .kiosk-search__button {
    border-radius: 0 6px 6px 0;
    background: var(--color-brand);
    color: var(--color-on-brand);
  }

  .kiosk-search__button svg {
    width: clamp(1.65rem, 7.2vw, 2rem);
    height: clamp(1.65rem, 7.2vw, 2rem);
  }

  .kiosk-category-grid {
    grid-area: categories;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(0.3rem, 1.45vw, 0.55rem);
    align-items: center;
  }

  .kiosk-category,
  .kiosk-more-button {
    min-width: 0;
    width: auto;
    height: clamp(4.9rem, 22vw, 6.4rem);
    min-height: 0;
    aspect-ratio: 1 / 1;
    justify-self: center;
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .kiosk-category {
    gap: 0.28rem;
    padding: 0.45rem 0.28rem;
    font-size: clamp(0.68rem, 3.1vw, 0.86rem);
  }

  .kiosk-category svg {
    width: clamp(1.75rem, 8.3vw, 2.45rem);
    height: clamp(1.75rem, 8.3vw, 2.45rem);
    stroke-width: 4.4;
  }

  .kiosk-category[data-kiosk-category="nearby"] { order: 1; }
  .kiosk-category[data-kiosk-category="restaurants"] { order: 2; }
  .kiosk-category[data-kiosk-category="shopping"] { order: 3; }
  .kiosk-more-button { order: 4; }

  .kiosk-category[data-kiosk-category="nearby"],
  .kiosk-category[data-kiosk-category="restaurants"],
  .kiosk-category[data-kiosk-category="shopping"] {
    display: grid;
  }

  .kiosk-category[data-kiosk-category="beaches"],
  .kiosk-category[data-kiosk-category="activities"],
  .kiosk-category[data-kiosk-category="attractions"],
  .kiosk-category[data-kiosk-category="transport"],
  .kiosk-category[data-kiosk-category="services"] {
    display: none;
  }

  .kiosk-more-button {
    grid-column: auto;
    display: grid;
    place-items: center;
    gap: 0.18rem;
    padding: 0.45rem 0.28rem;
    color: var(--color-brand);
    font-size: clamp(0.68rem, 3.1vw, 0.86rem);
  }

  .kiosk-more-button span {
    display: block;
    font-size: clamp(1.5rem, 8vw, 2.2rem);
    letter-spacing: 0.14em;
    line-height: 0.8;
  }

  .kiosk-more-button strong {
    font: inherit;
    font-weight: 900;
  }

  .kiosk-map-card {
    grid-area: route;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) minmax(3.85rem, 8vh);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .kiosk-place-card {
    grid-template-columns: minmax(4.7rem, 6.25rem) minmax(0, 1fr);
    gap: 0.65rem;
    padding: clamp(0.55rem, 2vw, 0.8rem);
    border-bottom: 0;
    box-shadow: none;
  }

  .kiosk-photo {
    align-self: center;
    width: 100%;
    max-height: 5.7rem;
    border-radius: 0.75rem;
  }

  .kiosk-place-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 0.25rem 0.5rem;
  }

  .kiosk-title-row {
    grid-column: 1 / 2;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem;
  }

  .kiosk-title-row > svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: var(--color-brand);
  }

  .kiosk-title-row h1 {
    overflow: hidden;
    font-size: clamp(1rem, 5.2vw, 1.42rem);
    line-height: 1.03;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kiosk-title-row p {
    overflow: hidden;
    margin-top: 0.15rem;
    font-size: clamp(0.72rem, 3.25vw, 0.92rem);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kiosk-rating {
    grid-column: 1 / 2;
    display: flex;
    gap: 0.28rem;
    color: var(--color-warning);
    font-size: clamp(0.7rem, 3.1vw, 0.86rem);
  }

  .kiosk-rating span:first-child {
    display: inline;
    max-width: 3.2rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .kiosk-distance-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.35rem;
    padding-top: 0.1rem;
  }

  .kiosk-divider {
    display: none;
  }

  .kiosk-mode-pill {
    flex: 1 1 0;
    min-height: 2rem;
    gap: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-color: var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: clamp(0.64rem, 2.8vw, 0.78rem);
  }

  .kiosk-mode-pill svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .kiosk-mode-pill span {
    overflow: hidden;
    gap: 0.2rem;
    white-space: nowrap;
  }

  .kiosk-mode-pill small {
    display: none;
  }

  .kiosk-place-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
  }

  .kiosk-open-status {
    gap: 0.35rem;
    font-size: clamp(0.7rem, 3vw, 0.86rem);
  }

  .kiosk-open-status span {
    width: 0.6rem;
    height: 0.6rem;
  }

  .kiosk-place-actions {
    flex: 0 0 auto;
  }

  .kiosk-place-actions [data-kiosk-view-details] {
    min-height: 2.1rem;
    padding-inline: 0.75rem;
    border-color: var(--color-brand);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: clamp(0.68rem, 3vw, 0.82rem);
  }

  .kiosk-map {
    min-height: 0;
    border-radius: 0;
  }

  .kiosk-map__grid {
    inset: -2rem;
    background-size: 5.8rem 5.8rem, 6.2rem 6.2rem, 2.2rem 2.2rem, 2.2rem 2.2rem;
    opacity: 0.7;
  }

  .kiosk-map__water {
    right: -14%;
    bottom: -22%;
    width: 47%;
    height: 62%;
  }

  .kiosk-route-line__shadow {
    stroke-width: 17;
  }

  .kiosk-route-line__main {
    stroke-width: 11;
  }

  .kiosk-map-marker--start {
    width: 2.2rem;
    height: 2.2rem;
    border-width: 0.42rem;
  }

  .kiosk-map-marker--finish svg {
    width: 2.55rem;
    height: 2.55rem;
  }

  .kiosk-map__next-step,
  .kiosk-location-status,
  .kiosk-route-count,
  .kiosk-map__route-tools > div {
    display: none;
  }

  .kiosk-map__route-tools {
    top: 50%;
    right: 0.7rem;
    max-width: none;
    transform: translateY(-50%);
  }

  .kiosk-map-action {
    width: clamp(2.8rem, 12.5vw, 3.4rem);
    height: clamp(2.8rem, 12.5vw, 3.4rem);
    min-height: 0;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .kiosk-map-action svg {
    width: 1.55rem;
    height: 1.55rem;
  }

  .kiosk-map-action span {
    display: none;
  }

  .kiosk-zoom {
    top: auto;
    right: 0.7rem;
    bottom: 0.65rem;
    left: auto;
    border-radius: 1rem;
  }

  .kiosk-zoom button {
    width: clamp(2.8rem, 12.5vw, 3.35rem);
    height: clamp(2.45rem, 10.5vw, 3rem);
    font-size: 1.55rem;
  }

  .kiosk-start-button {
    --start-icon-size: clamp(2.55rem, 11.5vw, 3.2rem);

    height: calc(100% - 0.5rem);
    margin: 0.25rem 0.45rem 0.45rem;
    border: 1px solid var(--color-brand-active);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-brand) 0%, #0d7a58 100%);
    font-size: clamp(1.65rem, 8vw, 2.3rem);
    letter-spacing: 0;
  }

  .kiosk-phone-row {
    grid-area: handoff;
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kiosk-gap);
  }

  .kiosk-phone-card {
    height: 100%;
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    place-items: center start;
    align-content: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-brand);
    box-shadow: var(--shadow-sm);
    font-size: clamp(0.68rem, 3vw, 0.82rem);
    text-align: left;
  }

  .kiosk-phone-card strong,
  .kiosk-phone-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .kiosk-phone-card small {
    grid-column: 2;
    margin-top: -0.25rem;
  }

  .kiosk-phone-card svg {
    width: 1.9rem;
    height: 1.9rem;
  }

  .kiosk-qr {
    grid-row: 1 / span 2;
    width: clamp(2.15rem, 10vw, 2.7rem);
    max-height: 100%;
  }

  .kiosk-layout.is-directions-open {
    grid-template-areas:
      "route"
      "handoff";
    grid-template-rows: minmax(0, 1fr) minmax(12rem, 35vh);
  }

  .kiosk-layout.is-directions-open .kiosk-directions-panel {
    grid-area: handoff;
    display: grid;
  }
}

@media (max-width: 42rem) and (max-height: 740px) {
  .kiosk-layout {
    grid-template-rows:
      minmax(3.2rem, 8vh)
      auto
      minmax(0, 1fr)
      minmax(3.85rem, 8vh);
  }

  .kiosk-category,
  .kiosk-more-button {
    height: clamp(4.3rem, 19vw, 5.35rem);
  }

  .kiosk-place-card {
    grid-template-columns: minmax(4rem, 5.1rem) minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.45rem;
  }

  .kiosk-photo {
    max-height: 4.6rem;
  }

  .kiosk-distance-row {
    display: none;
  }

  .kiosk-map-card {
    grid-template-rows: auto minmax(0, 1fr) minmax(3.25rem, 7.3vh);
  }

  .kiosk-phone-card {
    padding: 0.35rem 0.45rem;
  }
}

@media (max-width: 42rem) and (max-height: 620px) {
  .kiosk-layout {
    grid-template-rows:
      minmax(3rem, 8.5vh)
      auto
      minmax(0, 1fr);
    grid-template-areas:
      "search"
      "categories"
      "route";
  }

  .kiosk-phone-row {
    display: none;
  }

  .kiosk-category,
  .kiosk-more-button {
    height: clamp(3.8rem, 17vw, 4.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-status,
  .kiosk-route-line,
  .kiosk-map-marker--finish,
  .kiosk-route-listing-bubble,
  .kiosk-route-listing-bubble__label {
    transition: none;
  }
}

@media (max-width: 42rem) {
  .kiosk-map-marker--start::after {
    bottom: calc(100% + 0.42rem);
    padding: 0.3rem 0.48rem;
    font-size: 0.6rem;
  }

  .kiosk-route-listing-bubble {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 0.16rem;
    border-radius: 0.68rem;
    transform: translate(-50%, calc(-100% - 0.45rem)) scale(1);
  }

  .kiosk-route-listing-bubble:hover {
    transform: translate(-50%, calc(-100% - 0.45rem)) scale(1.22);
  }

  .kiosk-route-listing-bubble__image {
    border-radius: 0.48rem;
    font-size: 0.66rem;
  }

  .kiosk-route-listing-bubble__badge {
    right: -0.3rem;
    bottom: -0.3rem;
    width: 1.05rem;
    height: 1.05rem;
    border-width: 0.12rem;
    font-size: 0.52rem;
  }

  .kiosk-route-listing-bubble__label {
    display: none;
  }
}

@media (max-width: 34rem) {
  .kiosk-map-marker--start::after {
    max-width: 6.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kiosk-route-listing-bubble {
    width: 1.95rem;
    height: 1.95rem;
  }
}

/* Audited listing card layout: separate rules for TV, desktop, laptop, tablet, and mobile. */
.kiosk-map-card {
  container-type: inline-size;
}

.kiosk-place-card,
.kiosk-place-card *,
.kiosk-map-card,
.kiosk-map-card * {
  box-sizing: border-box;
}

.kiosk-place-card {
  --listing-photo-col: minmax(8rem, 12rem);
  --listing-title-size: 2rem;
  --listing-subtitle-size: 1rem;
  --listing-meta-size: 0.98rem;
  --listing-action-size: clamp(2.75rem, 4.2vmin, 3.35rem);
  --listing-action-gap: 0.5rem;
  --listing-content-reserve: calc(var(--listing-action-size) + var(--listing-action-size) + var(--listing-action-gap) + 0.8rem);
  --listing-card-gap: 1rem;
  --listing-content-gap: 0.62rem;
  --listing-pill-height: 2.7rem;
  --listing-pill-pad: 0.62rem;

  grid-template-columns: var(--listing-photo-col) minmax(0, 1fr);
  grid-template-areas: "photo content";
  align-items: center;
  gap: var(--listing-card-gap);
  min-block-size: 10.2rem;
}

.kiosk-photo {
  grid-area: photo;
  align-self: center;
  width: 100%;
  max-height: none;
  aspect-ratio: 1 / 1;
}

.kiosk-photo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kiosk-place-content {
  grid-area: content;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "meta"
    "distance";
  align-content: center;
  gap: var(--listing-content-gap);
  padding-right: 0;
}

.kiosk-title-row {
  grid-area: title;
  display: block;
  min-width: 0;
  padding-right: var(--listing-content-reserve);
  color: var(--color-brand);
}

.kiosk-title-row > svg {
  display: none;
}

.kiosk-title-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.kiosk-title-row h1,
.kiosk-title-row p {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.kiosk-title-row h1 {
  color: var(--color-ink);
  font-size: var(--listing-title-size);
  line-height: 1;
}

.kiosk-title-row p {
  color: var(--color-muted);
  font-size: var(--listing-subtitle-size);
  font-weight: 800;
  line-height: 1.16;
}

.kiosk-place-footer {
  grid-area: meta;
  display: flex;
  width: auto;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  gap: 0.75rem;
  margin: 0;
  padding-right: var(--listing-content-reserve);
}

.kiosk-rating,
.kiosk-open-status {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  line-height: 1;
  font-size: var(--listing-meta-size);
  white-space: nowrap;
}

.kiosk-rating {
  gap: 0.32rem;
  color: var(--color-warning);
  font-weight: 900;
}

.kiosk-rating strong {
  color: var(--color-ink);
}

.kiosk-rating span:last-child {
  color: var(--color-muted);
}

.kiosk-open-status {
  gap: 0.45rem;
  color: var(--color-success);
}

.kiosk-open-status span {
  flex: 0 0 auto;
}

.kiosk-place-actions {
  display: contents;
}

.kiosk-detail-route {
  position: absolute;
  z-index: 4;
  top: var(--kiosk-card-action-inset);
  right: calc(var(--kiosk-card-action-inset) + var(--listing-action-size) + var(--listing-action-gap));
  display: inline-grid;
  width: var(--listing-action-size);
  height: var(--listing-action-size);
  min-width: var(--listing-action-size);
  min-height: var(--listing-action-size);
  max-width: var(--listing-action-size);
  max-height: var(--listing-action-size);
  place-items: center;
  padding: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: rgb(255 255 255 / 94%);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  line-height: 0;
  text-decoration: none;
  overflow: hidden;
}

.kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
  display: inline-grid;
  width: var(--listing-action-size);
  height: var(--listing-action-size);
  min-width: var(--listing-action-size);
  min-height: var(--listing-action-size);
  max-width: var(--listing-action-size);
  max-height: var(--listing-action-size);
  place-items: center;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
  white-space: normal;
}

.kiosk-detail-route:hover,
.kiosk-detail-route:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  text-decoration: none;
}

.kiosk-detail-route svg {
  display: block;
  width: 62%;
  height: 62%;
}

.kiosk-save-route {
  width: var(--listing-action-size);
  height: var(--listing-action-size);
  min-width: var(--listing-action-size);
  min-height: var(--listing-action-size);
  max-width: var(--listing-action-size);
  max-height: var(--listing-action-size);
}

.kiosk-save-route svg {
  width: 62%;
  height: 62%;
}

.kiosk-distance-row {
  grid-area: distance;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  justify-self: stretch;
  padding: 0.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: #f5faf7;
}

.kiosk-divider {
  display: none;
}

.kiosk-mode-pill {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--listing-pill-height);
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  padding: 0.25rem var(--listing-pill-pad);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  overflow: hidden;
}

.kiosk-mode-pill svg {
  flex: 0 0 auto;
}

.kiosk-mode-pill span {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 0.24rem;
  overflow: hidden;
}

.kiosk-mode-pill strong,
.kiosk-mode-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-mode-pill.is-active {
  border-color: var(--color-success-border);
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgb(8 107 76 / 10%);
}

.kiosk-mode-pill:not(.is-active),
.kiosk-mode-pill:not(.is-active) svg {
  color: var(--color-muted);
}

/* TV card rules */
@media (min-width: 120rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(12rem, 16.5rem);
    --listing-title-size: clamp(2.45rem, 1.9vw, 3.25rem);
    --listing-subtitle-size: clamp(1.1rem, 0.95vw, 1.28rem);
    --listing-meta-size: clamp(1.08rem, 0.95vw, 1.28rem);
    --listing-action-size: clamp(3rem, 3.5vmin, 3.65rem);
    --listing-card-gap: 1.35rem;
    --listing-content-gap: 0.78rem;
    min-block-size: clamp(11.5rem, 15svh, 15.5rem);
  }
}

/* Desktop card rules */
@media (max-width: 119.99rem) and (min-width: 90.01rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(8.75rem, 13.25rem);
    --listing-title-size: clamp(1.9rem, 2vw, 2.55rem);
    --listing-subtitle-size: clamp(0.98rem, 1vw, 1.14rem);
    --listing-meta-size: clamp(0.95rem, 1vw, 1.1rem);
    --listing-card-gap: 1rem;
    --listing-content-gap: 0.66rem;
    min-block-size: clamp(9.25rem, 16svh, 13.25rem);
  }
}

/* Laptop card rules */
@media (max-width: 90rem) and (min-width: 72.01rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(7.5rem, 10.5rem);
    --listing-title-size: clamp(1.55rem, 1.9vw, 2.05rem);
    --listing-subtitle-size: clamp(0.82rem, 1vw, 0.98rem);
    --listing-meta-size: clamp(0.78rem, 0.95vw, 0.92rem);
    --listing-card-gap: 0.85rem;
    --listing-content-gap: 0.5rem;
    --listing-pill-height: 2.35rem;
    --listing-pill-pad: 0.48rem;
    min-block-size: clamp(8.8rem, 16svh, 11.25rem);
  }

  .kiosk-mode-pill small {
    display: none;
  }
}

/* Wide tablet card rules */
@media (max-width: 72rem) and (min-width: 56.01rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(6.5rem, 8.5rem);
    --listing-title-size: clamp(1.32rem, 1.9vw, 1.8rem);
    --listing-subtitle-size: clamp(0.74rem, 1vw, 0.9rem);
    --listing-meta-size: clamp(0.7rem, 1vw, 0.84rem);
    --listing-card-gap: 0.7rem;
    --listing-content-gap: 0.44rem;
    --listing-pill-height: 2.25rem;
    --listing-pill-pad: 0.4rem;
    min-block-size: clamp(8.8rem, 15svh, 10.8rem);
  }

  .kiosk-place-footer {
    gap: 0.5rem;
  }

  .kiosk-rating span:first-child {
    max-width: 4.25rem;
    overflow: hidden;
  }

  .kiosk-mode-pill {
    gap: 0.3rem;
  }

  .kiosk-mode-pill small {
    display: none;
  }
}

/* Tablet card rules */
@media (max-width: 56rem) and (min-width: 42.01rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(5rem, 6.15rem);
    --listing-title-size: clamp(1.08rem, 1.65vw, 1.42rem);
    --listing-subtitle-size: clamp(0.66rem, 0.92vw, 0.78rem);
    --listing-meta-size: clamp(0.64rem, 0.9vw, 0.74rem);
    --listing-action-size: clamp(2.25rem, 4.5vw, 2.55rem);
    --listing-action-gap: 0.28rem;
    --listing-content-reserve: calc(var(--listing-action-size) + var(--listing-action-size) + var(--listing-action-gap) + 0.45rem);
    --listing-card-gap: 0.55rem;
    --listing-content-gap: 0.32rem;
    --listing-pill-height: 2rem;
    --listing-pill-pad: 0.28rem;
    min-block-size: clamp(9.4rem, 18svh, 12.4rem);
  }

  .kiosk-title-row {
    padding-right: var(--listing-content-reserve);
  }

  .kiosk-place-footer {
    flex-wrap: wrap;
    gap: 0.28rem 0.42rem;
    padding-right: 0;
  }

  .kiosk-rating {
    gap: 0.18rem;
  }

  .kiosk-rating span:first-child {
    max-width: 3.8rem;
    overflow: hidden;
  }

  .kiosk-rating span:last-child,
  .kiosk-open-status span {
    display: none;
  }

  .kiosk-open-status::after {
    content: "Open";
  }

  .kiosk-distance-row {
    gap: 0.18rem;
    padding: 0.18rem;
  }

  .kiosk-mode-pill {
    gap: 0.18rem;
    justify-content: center;
    padding-inline: 0.22rem;
  }

  .kiosk-mode-pill svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .kiosk-mode-pill strong {
    font-size: 0.78rem;
    line-height: 1;
  }

  .kiosk-mode-pill small {
    display: none;
  }
}

/* Mobile card rules */
@media (max-width: 42rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(4.2rem, 22vw);
    --listing-title-size: clamp(0.94rem, 4.5vw, 1.2rem);
    --listing-subtitle-size: clamp(0.66rem, 3vw, 0.78rem);
    --listing-meta-size: clamp(0.64rem, 3vw, 0.76rem);
    --listing-action-gap: clamp(0.32rem, 1.8vw, 0.45rem);
    --listing-card-gap: clamp(0.45rem, 2vw, 0.7rem);
    --listing-content-gap: 0.28rem;
    --listing-pill-height: clamp(2rem, 8.4vw, 2.45rem);
    --listing-pill-pad: 0.28rem;
  }

  .kiosk-place-footer {
    flex-wrap: wrap;
    gap: 0.3rem 0.44rem;
  }

  .kiosk-rating span:first-child {
    max-width: 3.4rem;
    overflow: hidden;
  }

  .kiosk-distance-row {
    padding: 0.16rem;
  }

  .kiosk-mode-pill {
    gap: 0.2rem;
  }

  .kiosk-mode-pill small {
    display: none;
  }
}

/* Small mobile card rules */
@media (max-width: 34rem) {
  .kiosk-place-card {
    --listing-photo-col: minmax(3.4rem, 4.2rem);
    --listing-title-size: clamp(0.88rem, 4.2vw, 1.05rem);
  }
}

/* Short-height card rules */
@media (max-height: 700px) and (min-width: 42.01rem) {
  .kiosk-place-card {
    min-block-size: clamp(8rem, 20svh, 10rem);
  }

  .kiosk-place-content {
    gap: clamp(0.3rem, 0.6vmin, 0.44rem);
  }
}

@media (max-height: 560px) {
  .kiosk-title-row p,
  .kiosk-mode-pill small {
    display: none;
  }
}

/* Audited map layout: keeps map controls, route markers, and labels inside the map at every breakpoint. */
.kiosk-map,
.kiosk-map * {
  box-sizing: border-box;
}

.kiosk-map {
  --map-control-inset: clamp(0.75rem, 1.25vmin, 1.35rem);
  --map-control-size: clamp(2.75rem, 4.3vmin, 3.8rem);
  --map-pill-height: clamp(2.45rem, 4.3vmin, 3rem);
  --map-pill-pad: clamp(0.68rem, 1.05vmin, 1rem);
}

.kiosk-map__viewport {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  transform: scale(var(--map-zoom-scale));
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.kiosk-map__grid {
  opacity: 0.62;
}

.kiosk-road {
  height: clamp(0.5rem, 1.2vmin, 0.78rem);
  border-color: rgb(111 126 121 / 32%);
  background: rgb(255 255 255 / 82%);
}

.kiosk-map-label {
  position: absolute;
  z-index: 2;
  color: rgb(39 56 68 / 62%);
  font-size: clamp(0.58rem, 0.82vmin, 0.78rem);
  font-weight: 950;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.kiosk-map-label--one { left: 11%; bottom: 31%; }
.kiosk-map-label--two { left: 57%; top: 43%; }
.kiosk-map-label--three { right: 13%; top: 19%; }

.kiosk-route-line {
  transform: none;
}

.kiosk-map-marker--finish {
  display: none;
}

.kiosk-route-listing-bubble--destination {
  border-color: #e43d55;
  box-shadow: 0 0 0 0.28rem rgb(228 61 85 / 16%), 0 10px 24px rgb(7 19 73 / 20%);
}

.kiosk-route-listing-bubble--destination .kiosk-route-listing-bubble__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.kiosk-map.is-walking .kiosk-route-line__main {
  stroke-dasharray: 8 12;
}

.kiosk-map.is-walking .kiosk-route-line__shadow {
  stroke-dasharray: 8 12;
}

.kiosk-map__route-tools {
  display: flex;
  top: var(--map-control-inset);
  right: var(--map-control-inset);
  max-width: calc(100% - (var(--map-control-inset) * 2) - var(--map-control-size) - 1rem);
  min-width: 0;
  flex-wrap: nowrap;
  gap: clamp(0.38rem, 0.75vmin, 0.7rem);
  overflow: hidden;
}

.kiosk-map__route-tools > div,
.kiosk-route-count,
.kiosk-map-action {
  min-width: 0;
  min-height: var(--map-pill-height);
  max-width: 100%;
  padding-inline: var(--map-pill-pad);
  overflow: hidden;
}

.kiosk-map__route-tools > div {
  flex: 1 1 auto;
}

.kiosk-route-count {
  flex: 0 1 auto;
  white-space: nowrap;
}

.kiosk-map-action {
  flex: 1 1 auto;
  justify-content: center;
}

.kiosk-map-action::after {
  content: none;
}

.kiosk-map-action span,
.kiosk-map__route-tools span,
.kiosk-map__route-tools strong,
.kiosk-location-status,
.kiosk-map__next-step strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-zoom {
  top: var(--map-control-inset);
  left: var(--map-control-inset);
}

.kiosk-zoom button {
  width: var(--map-control-size);
  height: var(--map-control-size);
}

.kiosk-location-status {
  right: var(--map-control-inset);
  bottom: var(--map-control-inset);
  max-width: min(28rem, calc(100% - (var(--map-control-inset) * 2)));
}

.kiosk-map-marker--finish,
.kiosk-route-listing-bubble,
.kiosk-route-stop-marker,
.kiosk-route-step-marker {
  max-width: min(4rem, 16vw);
  max-height: min(4rem, 16vw);
}

@media (max-width: 90rem) and (min-width: 72.01rem) {
  .kiosk-map {
    --map-control-inset: 1rem;
    --map-control-size: 3.15rem;
    --map-pill-height: 2.65rem;
    --map-pill-pad: 0.78rem;
  }

  .kiosk-map__route-tools > div span {
    display: none;
  }
}

@media (max-width: 72rem) and (min-width: 56.01rem) {
  .kiosk-map {
    --map-control-inset: 0.78rem;
    --map-control-size: 2.75rem;
    --map-pill-height: 2.35rem;
    --map-pill-pad: 0.58rem;
  }

  .kiosk-map__route-tools {
    max-width: calc(100% - 4.25rem);
    gap: 0.32rem;
  }

  .kiosk-map__route-tools > div span,
  .kiosk-map-action span {
    display: none;
  }

  .kiosk-map__route-tools strong {
    font-size: 1rem;
  }

  .kiosk-route-count {
    font-size: 0.8rem;
  }

  .kiosk-map-action {
    width: auto;
    flex: 0 0 auto;
    gap: 0.4rem;
    padding-inline: 0.68rem;
    border-radius: 999px;
  }

  .kiosk-map-action::after {
    content: "Locate";
  }
}

@media (max-width: 56rem) and (min-width: 42.01rem) {
  .kiosk-map {
    --map-control-inset: 0.62rem;
    --map-control-size: 2.55rem;
    --map-pill-height: 2.22rem;
    --map-pill-pad: 0.48rem;
  }

  .kiosk-map__route-tools {
    max-width: calc(100% - 3.85rem);
    gap: 0.24rem;
  }

  .kiosk-map__route-tools > div span,
  .kiosk-map-action span {
    display: none;
  }

  .kiosk-map__route-tools strong {
    font-size: 0.95rem;
  }

  .kiosk-route-count {
    padding-inline: 0.58rem;
    font-size: 0.74rem;
  }

  .kiosk-map-action {
    width: auto;
    flex: 0 0 auto;
    gap: 0.32rem;
    padding-inline: 0.58rem;
    border-radius: 999px;
  }

  .kiosk-map-action::after {
    content: "Locate";
    font-size: 0.74rem;
  }

  .kiosk-map-action svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .kiosk-location-status {
    max-width: 52%;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
  }
}

@media (max-width: 42rem) {
  .kiosk-map {
    --map-control-inset: 0.58rem;
    --map-control-size: clamp(2.45rem, 11vw, 3.1rem);
    --map-pill-height: clamp(2.35rem, 10.5vw, 3rem);
    --map-pill-pad: 0.5rem;
  }

  .kiosk-map__route-tools {
    top: var(--map-control-inset);
    right: var(--map-control-inset);
    left: auto;
    max-width: calc(100% - (var(--map-control-inset) * 2) - var(--map-control-size) - 0.5rem);
    gap: clamp(0.22rem, 1.4vw, 0.35rem);
    transform: none;
  }

  .kiosk-route-count {
    display: none;
  }

  .kiosk-map__route-tools > div {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 0.66rem;
  }

  .kiosk-map__route-tools > div span {
    display: none;
  }

  .kiosk-map__route-tools strong {
    font-size: clamp(0.92rem, 4vw, 1.08rem);
  }

  .kiosk-map-action {
    width: var(--map-pill-height);
    height: var(--map-pill-height);
    flex: 0 0 var(--map-pill-height);
    padding: 0;
    border-radius: 50%;
  }

  .kiosk-map-action svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .kiosk-zoom {
    top: auto;
    right: var(--map-control-inset);
    bottom: var(--map-control-inset);
    left: auto;
  }

  .kiosk-route-line {
    inset: 0.15rem 0;
  }

  .kiosk-map-label {
    display: none;
  }
}

@media (hover: none), (max-width: 56rem) {
  .kiosk-route-listing-bubble:hover {
    transform: translate(-50%, calc(-100% - 0.7rem)) scale(1);
  }

  .kiosk-route-listing-bubble__label {
    display: none;
  }
}

@media (max-width: 34rem) {
  .kiosk-map {
    --map-control-inset: 0.48rem;
    --map-control-size: 2.35rem;
    --map-pill-height: 2.35rem;
  }

  .kiosk-map-marker--start {
    left: 13%;
    bottom: 24%;
  }

  .kiosk-map-marker--finish {
    top: 13%;
    right: 6%;
  }
}

/* Final listing card audit: card rules use the actual map-card width, not the viewport. */
.kiosk-map-card {
  --listing-card-block: clamp(8.4rem, 18svh, 11rem);

  grid-template-rows: minmax(0, var(--listing-card-block)) minmax(0, 1fr) minmax(4.8rem, 12vh);
}

.kiosk-place-card {
  --kiosk-card-padding: clamp(0.82rem, 2.1cqi, 1.12rem);
  --kiosk-card-padding-block: var(--kiosk-card-padding);
  --kiosk-card-padding-inline: var(--kiosk-card-padding);
  --listing-photo-col: minmax(4.75rem, 6.25rem);
  --listing-title-size: clamp(1.18rem, 4.2cqi, 1.6rem);
  --listing-subtitle-size: clamp(0.9rem, 2.4cqi, 1rem);
  --listing-meta-size: clamp(0.86rem, 2.2cqi, 0.98rem);
  --listing-action-size: clamp(2.35rem, 5.5cqi, 2.8rem);
  --listing-action-gap: clamp(0.28rem, 1cqi, 0.5rem);
  --listing-content-reserve: calc((var(--listing-action-size) * 2) + var(--listing-action-gap) + 0.56rem);
  --listing-card-gap: clamp(0.55rem, 1.8cqi, 1rem);
  --listing-content-gap: clamp(0.28rem, 1.1cqi, 0.56rem);
  --listing-pill-height: clamp(2.1rem, 5.2cqi, 2.7rem);
  --listing-pill-pad: clamp(0.32rem, 1.3cqi, 0.62rem);

  block-size: 100%;
  min-block-size: 0;
  max-block-size: var(--listing-card-block);
  overflow: clip;
  padding-block: var(--kiosk-card-padding-block);
  padding-inline: var(--kiosk-card-padding-inline);
}

.kiosk-photo {
  block-size: min(100%, var(--listing-card-block));
  max-block-size: calc(var(--listing-card-block) - (var(--kiosk-card-padding-block) * 2));
  position: relative;
  place-self: center;
  overflow: hidden;
}

.kiosk-photo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kiosk-photo::after {
  content: attr(data-kiosk-photo-type);
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  max-width: calc(100% - 0.9rem);
  padding: 0.22rem 0.42rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  color: var(--color-brand);
  font-size: clamp(0.56rem, 1.5cqi, 0.72rem);
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-photo[data-kiosk-photo-category="shopping"]::after,
.kiosk-photo[data-kiosk-photo-category="electronics"]::after,
.kiosk-photo[data-kiosk-photo-category="groceries"]::after {
  color: #5e35b1;
}

.kiosk-photo[data-kiosk-photo-category="beaches"]::after {
  color: #0a6c8c;
}

.kiosk-title-row h1,
.kiosk-title-row p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.kiosk-title-row h1 {
  -webkit-line-clamp: 2;
}

.kiosk-title-row p {
  -webkit-line-clamp: 1;
}

.kiosk-rating,
.kiosk-open-status,
.kiosk-rating strong,
.kiosk-rating span,
.kiosk-open-status strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-open-status::after {
  content: none !important;
}

.kiosk-open-status span {
  display: inline-block !important;
}

.kiosk-distance-row {
  align-self: end;
}

.kiosk-mode-pill small {
  display: inline !important;
}

@container (min-width: 44rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(9.2rem, 17svh, 12rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding: clamp(0.95rem, 1.85cqi, 1.22rem);
    --listing-photo-col: minmax(6rem, 8.5rem);
    --listing-title-size: clamp(1.35rem, 3.2cqi, 1.9rem);
    --listing-subtitle-size: clamp(0.95rem, 1.8cqi, 1.1rem);
    --listing-meta-size: clamp(0.9rem, 1.7cqi, 1rem);
    --listing-action-size: clamp(2.55rem, 4.2cqi, 3rem);
  }
}

@container (min-width: 58rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10rem, 16svh, 13rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding: clamp(1.05rem, 1.6cqi, 1.35rem);
    --listing-photo-col: minmax(7.4rem, 10.5rem);
    --listing-title-size: clamp(1.65rem, 2.8cqi, 2.25rem);
    --listing-subtitle-size: clamp(1rem, 1.55cqi, 1.16rem);
    --listing-meta-size: clamp(0.95rem, 1.4cqi, 1.08rem);
    --listing-content-gap: 0.62rem;
    --listing-pill-height: 2.7rem;
  }
}

@container (min-width: 74rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(12rem, 18svh, 15rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding: clamp(1.28rem, 1.35cqi, 1.55rem);
    --kiosk-card-padding-block: clamp(1.7rem, 1.7cqi, 2rem);
    --kiosk-card-padding-inline: clamp(1.28rem, 1.35cqi, 1.55rem);
    --listing-photo-col: minmax(8.5rem, 12rem);
    --listing-title-size: clamp(1.9rem, 2.45cqi, 2.7rem);
    --listing-subtitle-size: clamp(1.05rem, 1.25cqi, 1.24rem);
    --listing-meta-size: clamp(1rem, 1.15cqi, 1.16rem);
    --listing-action-size: clamp(2.85rem, 3.3cqi, 3.4rem);
  }
}

@container (max-width: 43.99rem) {
  .kiosk-place-card {
    --kiosk-card-padding: clamp(0.62rem, 2.4cqi, 0.86rem);
    --listing-photo-col: minmax(4rem, 5.5rem);
    --listing-title-size: clamp(1.12rem, 4.6cqi, 1.34rem);
    --listing-subtitle-size: clamp(0.88rem, 3.2cqi, 0.96rem);
    --listing-meta-size: clamp(0.82rem, 3cqi, 0.92rem);
    --listing-content-reserve: calc((var(--listing-action-size) * 2) + var(--listing-action-gap) + 0.35rem);
  }

  .kiosk-rating span[aria-hidden="true"] {
    max-width: none;
  }

  .kiosk-rating span:last-child {
    display: none;
  }

  .kiosk-distance-row {
    gap: 0.2rem;
    padding: 0.18rem;
  }

  .kiosk-mode-pill {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    min-height: var(--listing-pill-height);
    text-align: center;
  }

  .kiosk-mode-pill svg {
    width: 1rem;
    height: 1rem;
  }

  .kiosk-mode-pill span {
    display: grid;
    gap: 0.02rem;
    place-items: center;
  }

  .kiosk-mode-pill strong,
  .kiosk-mode-pill small {
    max-width: 100%;
    font-size: 0.82rem;
    line-height: 1;
  }
}

@container (max-width: 34rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(7.6rem, 21svh, 9.4rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding: 0.54rem;
    --listing-photo-col: minmax(3.65rem, 4.6rem);
    --listing-action-size: 2.2rem;
    --listing-title-size: clamp(1rem, 4.2cqi, 1.18rem);
    --listing-subtitle-size: 0.82rem;
    --listing-meta-size: 0.8rem;
  }

  .kiosk-title-row {
    padding-right: var(--listing-content-reserve);
  }

  .kiosk-title-row h1 {
    -webkit-line-clamp: 1;
  }

  .kiosk-distance-row {
    display: none;
  }
}

@media (max-height: 740px) and (max-width: 42rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(6.8rem, 20svh, 8.2rem);
  }

  .kiosk-distance-row {
    display: none;
  }

  .kiosk-title-row h1 {
    -webkit-line-clamp: 1;
  }
}

/* Final article card breakpoint polish: preserve every element and keep the layout dynamic. */
.kiosk-map-card {
  --listing-card-block: clamp(10.2rem, 19svh, 12rem);

  grid-template-rows: minmax(var(--listing-card-block), max-content) minmax(0, 1fr) minmax(4.8rem, 12vh);
}

.kiosk-place-card {
  min-block-size: var(--listing-card-block);
  block-size: auto;
  max-block-size: none;
  overflow: visible;
}

.kiosk-title-row h1,
.kiosk-title-row p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.kiosk-title-row h1 {
  text-wrap: balance;
}

.kiosk-place-footer {
  display: flex;
  flex-wrap: wrap;
  padding-right: 0;
}

.kiosk-rating {
  min-width: 0;
  flex: 1 1 auto;
}

.kiosk-rating span[aria-hidden="true"] {
  max-width: 4.4rem;
  overflow: hidden;
  white-space: nowrap;
}

.kiosk-rating span:last-child {
  display: inline !important;
  max-width: 5rem;
  font-size: 0.86em;
}

.kiosk-open-status {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  gap: 0.34rem;
}

.kiosk-open-status span {
  display: inline-block !important;
  width: 0.68em;
  height: 0.68em;
}

.kiosk-open-status strong {
  max-width: 9.5rem;
  white-space: nowrap;
}

.kiosk-distance-row {
  display: grid !important;
}

.kiosk-mode-pill {
  min-height: max(2.75rem, var(--listing-pill-height));
}

.kiosk-mode-pill small {
  display: inline !important;
}

.kiosk-save-route,
.kiosk-detail-route {
  outline-offset: -0.22rem;
}

@media (min-width: 90.01rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(12rem, 18svh, 15rem);
  }
}

@media (max-width: 90rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(11rem, 18svh, 13rem);
  }
}

@media (max-width: 72rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.6rem, 18svh, 12.4rem);
  }
}

@media (max-width: 56rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.2rem, 20svh, 12rem);
  }
}

@media (max-width: 42rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.8rem, 25svh, 12.8rem);
  }
}

@media (max-width: 34rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.4rem, 27svh, 12.4rem);
  }
}

@container (max-width: 43.99rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.8rem, 25svh, 12.8rem);
  }

  .kiosk-title-row h1 {
    -webkit-line-clamp: 2;
  }

  .kiosk-place-footer {
    gap: 0.2rem 0.36rem;
  }

  .kiosk-rating {
    gap: 0.18rem;
  }

  .kiosk-rating span[aria-hidden="true"] {
    max-width: 3.15rem;
  }

  .kiosk-rating span:last-child {
    max-width: 3.65rem;
    font-size: 0.72rem;
  }

  .kiosk-open-status {
    gap: 0.22rem;
  }

  .kiosk-open-status strong {
    max-width: 6.9rem;
    font-size: 0.78rem;
  }

  .kiosk-distance-row {
    gap: 0.18rem;
  }

  .kiosk-mode-pill {
    min-height: 2.75rem;
    padding: 0.2rem 0.22rem;
  }

  .kiosk-mode-pill strong,
  .kiosk-mode-pill small {
    font-size: 0.76rem;
  }
}

@container (max-width: 34rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(10.4rem, 27svh, 12.4rem);
  }

  .kiosk-photo::after {
    left: 0.24rem;
    right: 0.24rem;
    bottom: 0.24rem;
    max-width: none;
    padding: 0.14rem 0.24rem;
    font-size: 0.5rem;
    text-align: center;
  }

  .kiosk-mode-pill {
    min-height: 2.65rem;
  }
}

@media (max-height: 740px) and (max-width: 42rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(9.8rem, 26svh, 11.8rem);
  }

  .kiosk-title-row p {
    display: -webkit-box;
  }

  .kiosk-title-row h1 {
    -webkit-line-clamp: 2;
  }

  .kiosk-mode-pill {
    min-height: 2.55rem;
  }
}

@media (max-height: 560px) {
  .kiosk-title-row p {
    display: -webkit-box !important;
  }

  .kiosk-mode-pill small {
    display: inline !important;
  }
}

/* Final square-photo lock: the listing image fills the card height inside the padding. */
.kiosk-place-card {
  --listing-photo-size: calc(var(--listing-card-block) - (var(--kiosk-card-padding-block) * 2));

  grid-template-columns: var(--listing-photo-size) minmax(0, 1fr);
}

.kiosk-photo {
  inline-size: var(--listing-photo-size);
  block-size: var(--listing-photo-size);
  min-inline-size: var(--listing-photo-size);
  min-block-size: var(--listing-photo-size);
  max-inline-size: var(--listing-photo-size);
  max-block-size: var(--listing-photo-size);
  aspect-ratio: 1 / 1;
  place-self: center;
}

.kiosk-photo svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Mobile CTA height: match the search bar height instead of filling the full footer. */
@media (max-width: 42rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(8.4rem, 20svh, 10.2rem);

    grid-template-rows: minmax(var(--listing-card-block), max-content) minmax(0, 1fr) minmax(4.15rem, 8.8vh);
  }

  .kiosk-map-card.is-route-started {
    grid-template-rows: minmax(0, 1fr) minmax(4.15rem, 8.8vh);
  }

  .kiosk-map-card.is-route-started .kiosk-place-card {
    display: none;
  }

  .kiosk-place-card {
    --kiosk-card-padding-block: clamp(0.68rem, 2.65vw, 0.9rem);
    --kiosk-card-padding-inline: clamp(0.68rem, 2.65vw, 0.9rem);

    border-color: var(--color-border);
    padding-block: var(--kiosk-card-padding-block);
    padding-inline: var(--kiosk-card-padding-inline);
  }

  .kiosk-place-card.is-route-saved {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .kiosk-photo {
    padding: clamp(0.16rem, 0.9vw, 0.28rem);
    background: color-mix(in srgb, var(--color-surface) 82%, var(--color-brand-soft));
  }

  .kiosk-photo::after {
    display: none;
  }

  .kiosk-photo svg {
    border-radius: calc(0.75rem - 0.12rem);
  }

  .kiosk-place-card .kiosk-distance-row {
    display: none !important;
  }

  .kiosk-place-content {
    grid-template-areas:
      "title"
      "meta";
    align-content: center;
    gap: clamp(0.34rem, 1.35vw, 0.52rem);
  }

  .kiosk-title-row {
    width: 100%;
    padding-right: 0;
  }

  .kiosk-title-row > div,
  .kiosk-rating,
  .kiosk-open-status {
    transform: translateY(clamp(0.82rem, 3.45vw, 1.18rem));
  }

  .kiosk-title-row h1 {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    font-size: clamp(1.04rem, 4.9vw, 1.34rem);
    line-height: 1.02;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    white-space: normal;
  }

  .kiosk-title-row p {
    width: 100%;
    overflow: hidden;
    max-width: 100%;
    font-size: clamp(0.76rem, 3.35vw, 0.94rem);
    line-height: 1.12;
    text-overflow: clip;
    white-space: normal;
  }

  .kiosk-place-footer {
    display: grid;
    width: 100%;
    padding-right: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rating"
      "status";
    align-items: center;
    justify-content: stretch;
    gap: clamp(0.16rem, 0.8vw, 0.26rem);
  }

  .kiosk-rating {
    grid-area: rating;
    width: 100%;
    flex: none;
    gap: clamp(0.2rem, 0.95vw, 0.32rem);
    font-size: clamp(0.78rem, 3.35vw, 0.96rem);
  }

  .kiosk-rating span[aria-hidden="true"] {
    max-width: none;
  }

  .kiosk-rating strong {
    font-size: 1em;
  }

  .kiosk-rating span:last-child {
    max-width: none;
    overflow: hidden;
    font-size: 0.82em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kiosk-open-status {
    grid-area: status;
    width: 100%;
    flex: none;
    gap: 0.3rem;
    font-size: clamp(0.76rem, 3.18vw, 0.9rem);
  }

  .kiosk-open-status strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kiosk-start-button {
    --start-icon-size: clamp(2rem, 8.5vw, 2.55rem);

    align-self: center;
    block-size: calc(100% - 0.9rem);
    min-block-size: 0;
    margin-block: 0.45rem;
    margin-inline: clamp(0.7rem, 3vw, 1rem);
    font-size: clamp(1.35rem, 6.2vw, 1.8rem);
  }
}

@media (max-width: 34rem) {
  .kiosk-title-row {
    width: 100%;
    padding-right: 0;
  }

  .kiosk-title-row > div,
  .kiosk-rating,
  .kiosk-open-status {
    transform: translateY(clamp(0.68rem, 3vw, 1rem));
  }

  .kiosk-place-footer {
    gap: 0.14rem;
  }

  .kiosk-rating {
    font-size: clamp(0.72rem, 3.25vw, 0.86rem);
  }

  .kiosk-rating span[aria-hidden="true"] {
    max-width: none;
  }

  .kiosk-rating span:last-child {
    max-width: none;
  }

  .kiosk-open-status {
    font-size: clamp(0.72rem, 3.1vw, 0.84rem);
  }

  .kiosk-open-status strong {
    max-width: 100%;
  }
}

/* Mobile listing card: compact marketplace layout with image left and actions bottom right. */
@media (max-width: 42rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(7.65rem, 34vw, 14.25rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding-block: clamp(0.42rem, 2.1vw, 0.88rem);
    --kiosk-card-padding-inline: clamp(0.42rem, 2.1vw, 0.88rem);
    --mobile-card-action-size: clamp(2rem, 9vw, 3.75rem);
    --mobile-card-action-gap: clamp(0.32rem, 2vw, 0.72rem);
    --mobile-card-text-gap: clamp(0.16rem, 0.9vw, 0.42rem);

    display: grid;
    grid-template-columns: minmax(6.9rem, 42%) minmax(0, 1fr);
    grid-template-areas: "photo content";
    gap: clamp(0.48rem, 2.25vw, 1rem);
    align-items: stretch;
    min-block-size: var(--listing-card-block);
    border-color: var(--color-border);
    padding-block: var(--kiosk-card-padding-block);
    padding-inline: var(--kiosk-card-padding-inline);
    overflow: hidden;
  }

  .kiosk-place-card.is-route-saved {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .kiosk-photo {
    grid-area: photo;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    max-inline-size: none;
    max-block-size: none;
    aspect-ratio: auto;
    align-self: stretch;
    padding: clamp(0.14rem, 0.9vw, 0.36rem);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-soft));
  }

  .kiosk-photo::after {
    display: none;
  }

  .kiosk-photo svg {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 6px;
    object-fit: cover;
  }

  .kiosk-place-content {
    grid-area: content;
    display: grid;
    min-width: 0;
    grid-template-areas:
      "spacer-top"
      "title"
      "status"
      "spacer-bottom";
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    align-content: stretch;
    gap: var(--mobile-card-text-gap);
    padding: 0 0 calc(var(--mobile-card-action-size) + clamp(0.32rem, 1.6vw, 0.66rem)) 0;
  }

  .kiosk-title-row {
    grid-area: title;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .kiosk-title-row > div,
  .kiosk-open-status {
    transform: none;
  }

  .kiosk-title-row > div {
    display: grid;
    gap: var(--mobile-card-text-gap);
    align-content: center;
  }

  .kiosk-title-row h1 {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--color-ink);
    font-size: clamp(0.95rem, 4.65vw, 2.05rem);
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .kiosk-title-row p {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: clamp(0.72rem, 3.05vw, 1.35rem);
    font-weight: 800;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .kiosk-place-card .kiosk-distance-row,
  .kiosk-rating {
    display: none !important;
  }

  .kiosk-place-footer {
    display: contents;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .kiosk-open-status {
    display: inline-flex;
    grid-area: status;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-self: start;
    gap: clamp(0.24rem, 1.2vw, 0.34rem);
    margin-top: 0;
    color: var(--color-success);
    font-size: clamp(0.72rem, 3.05vw, 1.35rem);
    font-weight: 900;
    line-height: 1;
  }

  .kiosk-open-status span {
    display: inline-block !important;
    width: 0.72em;
    height: 0.72em;
    flex: 0 0 auto;
  }

  .kiosk-open-status strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kiosk-place-actions {
    display: contents;
  }

  .kiosk-place-card .kiosk-save-route,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    top: auto;
    bottom: var(--kiosk-card-padding-block);
    display: inline-grid;
    width: var(--mobile-card-action-size);
    height: var(--mobile-card-action-size);
    inline-size: var(--mobile-card-action-size);
    block-size: var(--mobile-card-action-size);
    min-width: var(--mobile-card-action-size);
    min-height: var(--mobile-card-action-size);
    max-width: var(--mobile-card-action-size);
    max-height: var(--mobile-card-action-size);
    min-inline-size: var(--mobile-card-action-size);
    min-block-size: var(--mobile-card-action-size);
    max-inline-size: var(--mobile-card-action-size);
    max-block-size: var(--mobile-card-action-size);
    place-items: center;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-sm);
    line-height: 0;
    overflow: hidden;
  }

  .kiosk-place-card .kiosk-save-route {
    right: var(--kiosk-card-padding-inline);
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    right: calc(var(--kiosk-card-padding-inline) + var(--mobile-card-action-size) + var(--mobile-card-action-gap));
  }

  .kiosk-place-card .kiosk-save-route svg,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] svg {
    display: block;
    width: 56%;
    height: 56%;
    inline-size: 56%;
    block-size: 56%;
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] svg {
    stroke-width: 2;
  }
}

@media (max-width: 42rem) {
  html,
  body.kiosk-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  body.kiosk-page,
  .kiosk-page {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .kiosk-shell {
    height: auto;
    min-height: calc(100dvh - var(--header-height, 0px));
    overflow: visible;
  }

  .kiosk-layout {
    height: auto;
    min-height: calc(100dvh - var(--header-height, 0px) - (var(--kiosk-pad) * 2));
    grid-template-rows: auto auto minmax(28rem, 62dvh) auto;
  }

  .kiosk-map-card,
  .kiosk-phone-row {
    height: auto;
  }

  .kiosk-map-card {
    min-height: min(34rem, 62dvh);
  }

  .kiosk-map {
    min-height: 18rem;
  }
}

@media (max-width: 34rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(7.2rem, 32vw, 8.85rem);
  }

  .kiosk-place-card {
    grid-template-columns: minmax(6.45rem, 41%) minmax(0, 1fr);
  }

  .kiosk-title-row h1 {
    font-size: clamp(0.86rem, 4.55vw, 1.06rem);
  }

  .kiosk-title-row p,
  .kiosk-open-status {
    font-size: clamp(0.66rem, 3.25vw, 0.8rem);
  }

}

/* Tablet listing card: same simplified card pattern as mobile, scaled for the wider tablet range. */
@media (max-width: 56rem) and (min-width: 42.01rem) {
  .kiosk-map-card {
    --listing-card-block: clamp(6.9rem, 15vw, 8rem);
  }

  .kiosk-place-card {
    --kiosk-card-padding-block: clamp(0.42rem, 0.9vw, 0.58rem);
    --kiosk-card-padding-inline: clamp(0.42rem, 0.9vw, 0.58rem);
    --tablet-card-action-size: clamp(1.8rem, 3.3vw, 2.35rem);
    --tablet-card-action-gap: clamp(0.28rem, 0.7vw, 0.44rem);
    --tablet-card-text-gap: clamp(0.1rem, 0.34vw, 0.2rem);
    --tablet-photo-size: calc(var(--listing-card-block) - (var(--kiosk-card-padding-block) * 2));

    display: grid;
    grid-template-columns: var(--tablet-photo-size) minmax(0, 1fr);
    grid-template-areas: "photo content";
    gap: clamp(0.4rem, 0.95vw, 0.62rem);
    align-items: stretch;
    block-size: var(--listing-card-block);
    min-block-size: var(--listing-card-block);
    max-block-size: var(--listing-card-block);
    padding-block: var(--kiosk-card-padding-block);
    padding-inline: var(--kiosk-card-padding-inline);
    border-color: var(--color-border);
    overflow: hidden;
  }

  .kiosk-place-card.is-route-saved {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .kiosk-photo {
    grid-area: photo;
    inline-size: var(--tablet-photo-size);
    block-size: var(--tablet-photo-size);
    min-inline-size: 0;
    min-block-size: 0;
    max-inline-size: none;
    max-block-size: none;
    aspect-ratio: 1;
    align-self: center;
    justify-self: start;
    padding: clamp(0.1rem, 0.28vw, 0.2rem);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-soft));
  }

  .kiosk-photo::after {
    display: none;
  }

  .kiosk-photo svg {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 6px;
    object-fit: cover;
  }

  .kiosk-place-content {
    grid-area: content;
    display: grid;
    min-width: 0;
    grid-template-areas:
      "spacer-top"
      "title"
      "status"
      "spacer-bottom";
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    align-content: stretch;
    gap: var(--tablet-card-text-gap);
    padding: 0 0 calc(var(--tablet-card-action-size) + clamp(0.48rem, 1vw, 0.8rem)) 0;
  }

  .kiosk-title-row {
    grid-area: title;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .kiosk-title-row > div,
  .kiosk-open-status {
    transform: none;
  }

  .kiosk-title-row > div {
    display: grid;
    gap: var(--tablet-card-text-gap);
    align-content: center;
  }

  .kiosk-title-row h1 {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--color-ink);
    font-size: clamp(0.88rem, 1.9vw, 1.12rem);
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .kiosk-title-row p {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: clamp(0.64rem, 1.35vw, 0.82rem);
    font-weight: 800;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .kiosk-place-card .kiosk-distance-row,
  .kiosk-rating {
    display: none !important;
  }

  .kiosk-place-footer {
    display: contents;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .kiosk-open-status {
    display: inline-flex;
    grid-area: status;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-self: start;
    gap: clamp(0.32rem, 0.8vw, 0.5rem);
    margin-top: 0;
    color: var(--color-success);
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    font-weight: 900;
    line-height: 1;
  }

  .kiosk-open-status span {
    display: inline-block !important;
    width: 0.72em;
    height: 0.72em;
    flex: 0 0 auto;
  }

  .kiosk-open-status strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kiosk-place-actions {
    display: contents;
  }

  .kiosk-place-card .kiosk-save-route,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    top: auto;
    bottom: var(--kiosk-card-padding-block);
    display: inline-grid;
    width: var(--tablet-card-action-size);
    height: var(--tablet-card-action-size);
    inline-size: var(--tablet-card-action-size);
    block-size: var(--tablet-card-action-size);
    min-width: var(--tablet-card-action-size);
    min-height: var(--tablet-card-action-size);
    max-width: var(--tablet-card-action-size);
    max-height: var(--tablet-card-action-size);
    min-inline-size: var(--tablet-card-action-size);
    min-block-size: var(--tablet-card-action-size);
    max-inline-size: var(--tablet-card-action-size);
    max-block-size: var(--tablet-card-action-size);
    place-items: center;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-sm);
    line-height: 0;
    overflow: hidden;
  }

  .kiosk-place-card .kiosk-save-route {
    right: var(--kiosk-card-padding-inline);
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    right: calc(var(--kiosk-card-padding-inline) + var(--tablet-card-action-size) + var(--tablet-card-action-gap));
  }

  .kiosk-place-card .kiosk-save-route svg,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] svg {
    display: block;
    width: 56%;
    height: 56%;
    inline-size: 56%;
    block-size: 56%;
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] svg {
    stroke-width: 2;
  }
}

/* Mobile app viewport fix: keep index.html fully visible without scroll. */
@media (max-width: 42rem) {
  html,
  body.kiosk-page,
  body.kiosk-page .kiosk-page {
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.kiosk-page {
    position: fixed;
    inset: 0;
  }

  .kiosk-shell {
    height: calc(100svh - var(--header-height, 0px));
    height: calc(100dvh - var(--header-height, 0px));
    min-height: 0;
    overflow: hidden;
  }

  .kiosk-layout {
    height: calc(100svh - var(--header-height, 0px) - (var(--kiosk-pad) * 2));
    height: calc(100dvh - var(--header-height, 0px) - (var(--kiosk-pad) * 2));
    min-height: 0;
    grid-template-rows:
      minmax(4.15rem, 7.8dvh)
      auto
      minmax(0, 1fr)
      minmax(3.65rem, 7.2dvh);
    overflow: hidden;
  }

  .kiosk-search {
    min-height: 4.15rem;
  }

  .kiosk-category,
  .kiosk-more-button {
    height: clamp(4.2rem, 18vw, 5.15rem);
  }

  .kiosk-map-card {
    min-height: 0;
    overflow: hidden;
  }

  .kiosk-map-card.is-route-started {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) minmax(3.85rem, 7.5dvh);
  }

  .kiosk-map,
  .google-live-map,
  .kiosk-map-card.is-route-started .kiosk-map,
  .kiosk-map-card.is-route-started .google-live-map {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  .kiosk-start-button {
    position: relative;
    z-index: 8;
    min-height: 3.35rem;
    height: calc(100% - 0.45rem);
    margin: 0.2rem 0.45rem 0.3rem;
  }

  .kiosk-layout.is-directions-open {
    grid-template-areas:
      "route"
      "handoff";
    grid-template-rows: minmax(0, 1fr) minmax(10rem, 30dvh);
  }

  .kiosk-layout.is-directions-open .kiosk-map-card {
    min-height: 0;
  }

  .kiosk-layout.is-directions-open .kiosk-directions-panel {
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 42rem) and (max-height: 700px) {
  .kiosk-layout {
    grid-template-rows:
      minmax(3.85rem, 8dvh)
      auto
      minmax(0, 1fr)
      minmax(3.35rem, 7dvh);
  }

  .kiosk-search {
    min-height: 3.85rem;
  }

  .kiosk-category,
  .kiosk-more-button {
    height: clamp(3.75rem, 17vw, 4.55rem);
  }

  .kiosk-layout.is-directions-open {
    grid-template-rows: minmax(0, 1fr) minmax(8.5rem, 28dvh);
  }
}


/* Live layout refinements 2026-07-11 */
.kiosk-zoom { display: none !important; }
.kiosk-phone-card--share { display: none; }
.kiosk-map .kiosk-distance-row {
  position: absolute;
  z-index: 7;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  width: auto;
  max-width: min(34rem, calc(100% - 2rem));
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow-sm);
}
.kiosk-map .kiosk-divider { display: none; }
.kiosk-map .kiosk-mode-pill {
  min-height: 2.85rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-round);
  background: transparent;
  box-shadow: none;
}
.kiosk-map .kiosk-mode-pill.is-active {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.kiosk-map .kiosk-mode-pill svg {
  width: 1.45rem;
  height: 1.45rem;
}
@media (max-width: 42rem) {
  .kiosk-layout {
    grid-template-areas:
      "search"
      "categories"
      "route" !important;
    grid-template-rows:
      minmax(3.55rem, 8vh)
      auto
      minmax(0, 1fr) !important;
  }
  .kiosk-phone-row {
    position: absolute;
    z-index: 8;
    right: 0.75rem;
    bottom: 0.75rem;
    display: block !important;
    width: auto;
    height: auto;
    min-height: 0;
    grid-area: auto;
  }
  .kiosk-phone-card--qr,
  .kiosk-phone-card--copy { display: none !important; }
  .kiosk-phone-card--share {
    display: inline-grid;
    width: clamp(3rem, 13vw, 3.65rem);
    height: clamp(3rem, 13vw, 3.65rem);
    min-height: 0;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
  }
  .kiosk-phone-card--share strong,
  .kiosk-phone-card--share small { display: none; }
  .kiosk-phone-card--share svg {
    width: 1.55rem;
    height: 1.55rem;
  }
  .kiosk-map .kiosk-distance-row { display: none !important; }
  .kiosk-map-card { grid-template-rows: auto minmax(0, 1fr) minmax(3.6rem, 8vh) !important; }
  .kiosk-photo,
  .kiosk-place-card .kiosk-save-route,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
  }
}


/* Live repair 2026-07-11: restore card actions and mobile route layout */
.kiosk-share-route {
  display: none;
}

.kiosk-map .kiosk-distance-row {
  top: 1rem !important;
  right: auto !important;
  left: 1rem !important;
}

@media (max-width: 42rem) {
  .kiosk-phone-row {
    display: none !important;
  }

  .kiosk-map .kiosk-distance-row {
    display: inline-flex !important;
    top: 0.65rem !important;
    left: 0.65rem !important;
    max-width: calc(100% - 1.3rem);
    padding: 0.25rem;
    gap: 0.25rem;
  }

  .kiosk-map .kiosk-mode-pill {
    min-height: 2.45rem;
    padding: 0.35rem 0.55rem;
  }

  .kiosk-map .kiosk-mode-pill span {
    display: none;
  }

  .kiosk-map .kiosk-mode-pill svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .kiosk-map-card {
    grid-template-rows: auto minmax(0, 1fr) minmax(3.6rem, 8vh) !important;
  }

  .kiosk-photo {
    border-radius: var(--radius-lg) !important;
    aspect-ratio: auto !important;
  }

  .kiosk-share-route {
    display: inline-grid;
  }

  .kiosk-place-card .kiosk-save-route,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details],
  .kiosk-place-card .kiosk-place-actions .kiosk-share-route[data-kiosk-share] {
    top: auto;
    bottom: var(--kiosk-card-padding-block);
    display: inline-grid;
    width: var(--mobile-card-action-size);
    height: var(--mobile-card-action-size);
    inline-size: var(--mobile-card-action-size);
    block-size: var(--mobile-card-action-size);
    min-width: var(--mobile-card-action-size);
    min-height: var(--mobile-card-action-size);
    max-width: var(--mobile-card-action-size);
    max-height: var(--mobile-card-action-size);
    place-items: center;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50% !important;
    background: rgb(255 255 255 / 96%);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    line-height: 0;
    overflow: hidden;
  }

  .kiosk-place-card .kiosk-save-route {
    right: var(--kiosk-card-padding-inline);
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] {
    right: calc(var(--kiosk-card-padding-inline) + var(--mobile-card-action-size) + var(--mobile-card-action-gap));
  }

  .kiosk-place-card .kiosk-place-actions .kiosk-share-route[data-kiosk-share] {
    position: absolute;
    right: calc(var(--kiosk-card-padding-inline) + ((var(--mobile-card-action-size) + var(--mobile-card-action-gap)) * 2));
  }

  .kiosk-place-card .kiosk-save-route svg,
  .kiosk-place-card .kiosk-place-actions .kiosk-detail-route[data-kiosk-view-details] svg,
  .kiosk-place-card .kiosk-place-actions .kiosk-share-route[data-kiosk-share] svg {
    display: block;
    width: 56%;
    height: 56%;
    inline-size: 56%;
    block-size: 56%;
  }
}


/* Live repair 2026-07-11: keep map travel selector compact */
.kiosk-map .kiosk-distance-row {
  width: auto !important;
  inline-size: max-content !important;
  max-width: calc(100% - 2rem) !important;
}
@media (max-width: 42rem) {
  .kiosk-map .kiosk-distance-row {
    inline-size: max-content !important;
    max-width: calc(100% - 1.3rem) !important;
  }
}


/* Live repair 2026-07-11: force compact top-left map travel selector */
.kiosk-map-card [data-kiosk-map] > .kiosk-distance-row,
.kiosk-map.has-live-google-map > .kiosk-distance-row,
[data-kiosk-map] > .kiosk-distance-row {
  position: absolute !important;
  z-index: 9 !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  width: auto !important;
  inline-size: max-content !important;
  max-width: min(34rem, calc(100% - 2rem)) !important;
  justify-self: start !important;
  align-self: start !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

@media (max-width: 42rem) {
  .kiosk-map-card [data-kiosk-map] > .kiosk-distance-row,
  .kiosk-map.has-live-google-map > .kiosk-distance-row,
  [data-kiosk-map] > .kiosk-distance-row {
    top: 0.65rem !important;
    left: 0.65rem !important;
    display: inline-flex !important;
    max-width: calc(100% - 1.3rem) !important;
  }
}