/* Isolated, fictional guest-menu preview. Keep guest application styles separate. */
.lp-preview .lp-phone {
  --lpg-bg: #faf8f4;
  --lpg-paper: #fffdfa;
  --lpg-ink: #24211e;
  --lpg-muted: #6d7076;
  --lpg-line: #ded8d0;
  --lpg-amber: #96520b;
  --lpg-brown: #594235;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 590px;
  min-height: 590px;
  margin: 0;
  padding: 13px 12px 15px;
  overflow: hidden;
  border: 5px solid #292c29;
  border-radius: 29px;
  background: var(--lpg-bg);
  color: var(--lpg-ink);
  box-shadow: 0 16px 36px #34362e18, inset 0 0 0 1px #ffffff;
  font: 400 13px/1.4 Arial, Helvetica, sans-serif;
}
.lp-preview .lp-phone::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 73px; height: 3px; border-radius: 4px; background: #59423555; transform: translateX(-50%); }
.lp-preview .lp-phone [hidden] { display: none !important; }
.lp-preview .lp-phone button, .lp-preview .lp-phone input { font: inherit; }
.lp-preview .lp-phone button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lp-preview .lp-phone button:focus-visible, .lp-preview .lp-phone input:focus-visible { outline: 2px solid #ad7738; outline-offset: 3px; }
.lp-preview .lp-phone button:disabled { opacity: .5; cursor: default; }
.lp-preview .lp-phone .lpg-icon { display: inline-block; flex: none; width: 19px; height: 19px; background: currentColor; mask: var(--lpg-icon) center/contain no-repeat; -webkit-mask: var(--lpg-icon) center/contain no-repeat; }
.lp-preview .lp-phone .lpg-menu { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.lp-preview .lp-phone .lpg-header { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 10px; min-height: 45px; padding-bottom: 9px; border-bottom: 1px solid var(--lpg-line); }
.lp-preview .lp-phone .lpg-brand { color: var(--lpg-brown); font: 400 28px/1 Georgia, serif; letter-spacing: -.8px; }
.lp-preview .lp-phone .lpg-brand > span { color: var(--lpg-amber); }
.lp-preview .lp-phone .lpg-table { display: flex; align-items: center; gap: 5px; color: var(--lpg-brown); font-size: 12px; white-space: nowrap; }
.lp-preview .lp-phone .lpg-browse { flex: none; padding-top: 12px; }
.lp-preview .lp-phone .lpg-search-wrap { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid #c9c9cb; border-radius: 9px; background: var(--lpg-paper); color: #60656b; }
.lp-preview .lp-phone .lpg-search { display: block; min-width: 0; width: 100%; padding: 10px 0; border: 0; border-radius: 0; outline-offset: 4px; background: transparent; color: var(--lpg-ink); font-size: 12px; }
.lp-preview .lp-phone .lpg-search::placeholder { color: #71757b; opacity: 1; }
.lp-preview .lp-phone .lpg-search::-webkit-search-cancel-button { display: none; }
.lp-preview .lp-phone .lpg-clear { display: grid; place-items: center; flex: none; width: 25px; height: 34px; margin-right: -6px; padding: 0; border: 0; background: transparent; color: var(--lpg-muted); }
.lp-preview .lp-phone .lpg-categories { display: flex; flex: none; gap: 13px; margin: 4px 0 0; padding: 0; border-bottom: 1px solid var(--lpg-line); overflow-x: auto; scrollbar-width: none; }
.lp-preview .lp-phone .lpg-categories::-webkit-scrollbar { display: none; }
.lp-preview .lp-phone .lpg-category { flex: none; min-height: 38px; padding: 9px 7px 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--lpg-muted); font-size: 13px; white-space: nowrap; }
.lp-preview .lp-phone .lpg-category[aria-pressed="true"] { border-bottom-color: var(--lpg-amber); color: var(--lpg-amber); }
.lp-preview .lp-phone .lpg-results { flex: 1; min-height: 0; padding: 0 9px 6px 1px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d6cbbf transparent; }
.lp-preview .lp-phone .lpg-group { margin: 0; padding: 0; }
.lp-preview .lp-phone .lpg-group > h4 { margin: 14px 0 2px; color: var(--lpg-brown); font: 400 12px/1.4 Arial, Helvetica, sans-serif; }
.lp-preview .lp-phone .lpg-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; min-height: 76px; padding: 9px 0; border-bottom: 1px solid var(--lpg-line); background: transparent; }
.lp-preview .lp-phone .lpg-product:last-child { border-bottom: 0; }
.lp-preview .lp-phone .lpg-product--photo { grid-template-columns: 46px minmax(0, 1fr) auto; }
.lp-preview .lp-phone .lpg-photo { display: block; width: 46px; height: 46px; border-radius: 7px; object-fit: cover; }
.lp-preview .lp-phone .lpg-product-copy { min-width: 0; }
.lp-preview .lp-phone .lpg-product-copy h4 { margin: 0 0 3px; color: #171715; font: 400 13px/1.3 Arial, Helvetica, sans-serif; letter-spacing: -.15px; overflow-wrap: anywhere; }
.lp-preview .lp-phone .lpg-product-copy p { margin: 0 0 4px; color: var(--lpg-muted); font: 400 11px/1.35 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.lp-preview .lp-phone .lpg-price { display: block; color: var(--lpg-amber); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.lp-preview .lp-phone .lpg-product-actions { justify-self: end; }
.lp-preview .lp-phone .lpg-add { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--lpg-amber); border-radius: 50%; background: transparent; color: var(--lpg-amber); }
.lp-preview .lp-phone .lpg-quantity { display: flex; align-items: center; padding: 0; border: 1px solid #cec3b9; border-radius: 24px; }
.lp-preview .lp-phone .lpg-quantity button { display: grid; place-items: center; width: 24px; height: 29px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--lpg-brown); font-size: 18px; }
.lp-preview .lp-phone .lpg-quantity button:last-child { width: 30px; height: 30px; margin: -1px; border: 1px solid var(--lpg-brown); color: var(--lpg-amber); }
.lp-preview .lp-phone .lpg-quantity > span { min-width: 17px; text-align: center; font-size: 12px; }
.lp-preview .lp-phone .lpg-quantity .lpg-icon { width: 16px; height: 16px; }
.lp-preview .lp-phone .lpg-dock { flex: none; padding-top: 5px; background: var(--lpg-bg); }
.lp-preview .lp-phone .lpg-service { display: grid; grid-template-columns: 1fr 1fr; margin: 0 4px 8px; padding-top: 8px; border-top: 1px solid var(--lpg-line); }
.lp-preview .lp-phone .lpg-service > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 33px; padding: 0 5px; color: var(--lpg-brown); font-size: 11px; line-height: 1.3; }
.lp-preview .lp-phone .lpg-service > span + span { border-left: 1px solid var(--lpg-line); }
.lp-preview .lp-phone .lpg-basket { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 49px; padding: 8px; border: 0; border-radius: 11px; background: var(--lpg-brown); color: #fffdfa; font-size: 11px; text-align: left; }
.lp-preview .lp-phone .lpg-basket-count { display: grid; place-items: center; flex: none; min-width: 29px; height: 29px; padding: 0 5px; border-radius: 50%; background: var(--lpg-paper); color: var(--lpg-brown); font-size: 15px; }
.lp-preview .lp-phone .lpg-basket-total { margin-left: auto; font-size: 12px; font-weight: 400; white-space: nowrap; }
.lp-preview .lp-phone .lpg-basket > .lpg-icon { width: 14px; height: 14px; }
.lp-preview .lp-phone .lpg-demo-note { flex: none; margin: 9px -4px 0; color: #74716c; font-size: 9px; line-height: 1.3; text-align: center; }
.lp-preview .lp-phone .lpg-empty { padding: 32px 6px; text-align: center; }
.lp-preview .lp-phone .lpg-empty p { margin-bottom: 14px; font-size: 13px; }
.lp-preview .lp-phone .lpg-empty button, .lp-preview .lp-phone .lpg-return { min-height: 40px; padding: 9px 12px; border: 1px solid var(--lpg-line); border-radius: 9px; background: var(--lpg-paper); color: var(--lpg-brown); font-size: 12px; }
.lp-preview .lp-phone .lpg-summary { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding: 8px 2px; }
.lp-preview .lp-phone .lpg-summary-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-preview .lp-phone .lpg-summary-heading h3 { margin: 0; color: var(--lpg-brown); font: 400 24px/1.15 Georgia, serif; letter-spacing: -.5px; }
.lp-preview .lp-phone .lpg-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--lpg-line); border-radius: 50%; background: transparent; color: var(--lpg-brown); }
.lp-preview .lp-phone .lpg-summary-caption { margin: 10px 0 22px; color: var(--lpg-muted); font-size: 11px; }
.lp-preview .lp-phone .lpg-summary-items { flex: 1; }
.lp-preview .lp-phone .lpg-summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--lpg-line); font-size: 12px; }
.lp-preview .lp-phone .lpg-summary-row strong { flex: none; color: var(--lpg-brown); font-weight: 400; white-space: nowrap; }
.lp-preview .lp-phone .lpg-empty-basket { padding-top: 28px; color: var(--lpg-muted); font-size: 13px; line-height: 1.8; }
.lp-preview .lp-phone .lpg-total { display: flex; justify-content: space-between; gap: 10px; padding: 20px 0; color: var(--lpg-brown); font-size: 17px; }
.lp-preview .lp-phone .lpg-total strong { font-weight: 400; white-space: nowrap; }
.lp-preview .lp-phone .lpg-example-notice { margin: 0 0 15px; padding: 12px; border-radius: 9px; background: #eee7de; color: #655445; font-size: 12px; line-height: 1.6; }
.lp-preview .lp-phone .lpg-return { width: 100%; }
.lp-preview .lp-phone .lpg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .lp-preview .lp-phone { padding-right: 17px; padding-left: 17px; }
  .lp-preview .lp-phone .lpg-search { font-size: 16px; }
  .lp-preview .lp-phone .lpg-product--photo { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; }
  .lp-preview .lp-phone .lpg-photo { width: 52px; height: 52px; }
  .lp-preview .lp-phone .lpg-product-copy h4 { font-size: 14px; }
  .lp-preview .lp-phone .lpg-product-copy p, .lp-preview .lp-phone .lpg-basket { font-size: 12px; }
}