/* The shop assistant travels with the form in normal flow, including above the mobile keyboard. */
.walk-launch,
.walk-bubble,
.walk-target {
  --walk-accent: var(--wine,#762d46);
  --walk-ink: #382d31;
  --walk-paper: #fffcf5;
  --walk-line: #d6be9c;
}
button.walk-launch {
  position:relative; display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center; gap:12px; width:100%; box-sizing:border-box; min-height:78px;
  margin:12px 0 14px; padding:9px 16px 9px 10px; cursor:pointer;
  border:1px solid var(--walk-line); border-radius:14px 14px 14px 5px;
  background:linear-gradient(110deg,#fff7e4,#fffdf7 65%); color:var(--walk-ink);
  box-shadow:0 3px 0 #e9d9bc; text-align:start; font:inherit; white-space:normal;
}
.walk-face {display:block; flex:none; width:64px; height:64px; max-width:100%; object-fit:contain;}
.walk-launch > span:not(.walk-arrow) {min-width:0;}
.walk-launch strong,.walk-launch small {display:block; overflow-wrap:anywhere;}
.walk-launch strong {font-size:clamp(15px,2vw,18px); line-height:1.48; font-weight:750;}
.walk-launch small {margin-top:3px; font-size:13px; line-height:1.55; color:#64514b;}
.walk-arrow {
  display:grid; place-items:center; width:31px; height:31px; border-radius:50%;
  font-size:17px; font-weight:700; color:#fff; background:#673c45; line-height:1;
}
.walk-bubble {
  position:relative; align-self:stretch; grid-column:1/-1; min-width:0;
  display:grid; grid-template-columns:60px minmax(0,1fr); align-items:start; gap:4px 12px;
  box-sizing:border-box; width:100%; padding:12px 14px 11px 10px; margin:3px 0 15px;
  border:1px solid var(--walk-line); border-radius:16px 16px 16px 6px;
  color:var(--walk-ink); background:var(--walk-paper); box-shadow:0 3px 0 #eaddc8;
  scroll-margin-block:64px 100px; isolation:isolate;
}
.walk-bubble::after {
  content:""; position:absolute; inset-inline-start:31px; bottom:-7px; width:12px; height:12px;
  background:var(--walk-paper); border:solid var(--walk-line); border-width:0 1px 1px 0;
  transform:rotate(45deg); pointer-events:none;
}
.walk-bubble .walk-face {grid-column:1; width:60px; height:60px;}
.walk-copy {grid-column:2; min-width:0; overflow-wrap:anywhere;}
.walk-progress {display:block; font-size:11px; font-weight:750; color:#785430; line-height:1.5; letter-spacing:.04em;}
.walk-title {display:block; margin:2px 0; font-size:17px; line-height:1.45; color:var(--walk-ink);}
.walk-bubble .walk-hint {margin:4px 0 0; font-size:14px; line-height:1.65; color:#534348; white-space:pre-line;}
.walk-actions {
  grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  gap:4px 7px; padding-top:4px;
}
.walk-actions button {
  appearance:none; min-width:44px; min-height:44px; max-width:100%; box-sizing:border-box;
  padding:6px 12px; border-radius:8px; border:1px solid transparent; margin:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:650; line-height:1.4; white-space:normal; color:#4b3438;
  background:transparent;
}
.walk-actions [data-walk-prev] {background:#fff; border-color:#d4c5bd;}
.walk-actions [data-walk-next] {color:#fff; background:#673c45; border-color:#673c45; box-shadow:0 2px 0 #45272d;}
.walk-actions [data-walk-exit] {text-decoration:underline; text-underline-offset:3px; color:#62524c;}
.walk-actions button:disabled {opacity:.48; cursor:default;}
.walk-actions button[hidden],.walk-bubble[hidden],button.walk-launch[hidden] {display:none;}
.walk-target {
  outline:3px solid #a66c2e; outline-offset:3px; border-radius:6px;
  scroll-margin-block:78px 110px;
}
.walk-bubble .walk-face {animation:walk-hello .42s ease-out both;}
@keyframes walk-hello {0% {transform:translateY(3px) rotate(-7deg)} 65% {transform:translateY(-1px) rotate(2deg)} 100% {transform:none}}
@media (hover:hover) {
  button.walk-launch:hover {background:#fff6df; border-color:#ae8252;}
  .walk-actions button:not(:disabled):hover {filter:brightness(.95);}
}
button.walk-launch:active,.walk-actions button:not(:disabled):active {transform:translateY(1px);}
.walk-launch:focus-visible,.walk-actions button:focus-visible {outline:3px solid #3c6a72; outline-offset:3px;}
@media (max-width:500px) {
  button.walk-launch {grid-template-columns:51px minmax(0,1fr) 24px; gap:7px; padding:8px;}
  .walk-launch .walk-face {width:51px;height:51px;}
  .walk-arrow {width:24px;height:24px;font-size:14px;}
  .walk-launch small {font-size:12px;}
  .walk-bubble {grid-template-columns:46px minmax(0,1fr); gap:2px 8px; padding:11px 10px 9px 7px;}
  .walk-bubble .walk-face {width:46px;height:46px;}
  .walk-title {font-size:16px;}
  .walk-actions {gap:2px 4px;}
  .walk-actions button {padding-inline:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .walk-bubble .walk-face,.walk-bubble,button.walk-launch {animation:none;transition:none;}
  button.walk-launch:active,.walk-actions button:not(:disabled):active {transform:none;}
}
@media (forced-colors:active) {
  .walk-target,.walk-launch:focus-visible,.walk-actions button:focus-visible {outline-color:Highlight;}
  .walk-bubble,.walk-bubble::after,.walk-actions button,.walk-launch {border-color:ButtonText;}
}