@charset "UTF-8";

:root {
  color-scheme: light;
  --brand: #ff315c;
  --brand-dark: #e91f4d;
  --brand-soft: #fff0f3;
  --ink: #202126;
  --muted: #92939c;
  --line: #eff0f3;
  --canvas: #f5f6f8;
  --cyan: #b8f5ef;
  --radius: 18px;
  --nav-height: 65.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #ecedef; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; border: 0; background: none; min-width: 44px; min-height: 44px; }
button:disabled { cursor: default; opacity: .45; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #39aba8;
  outline-offset: 3px;
}
input, textarea, select { min-width: 0; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #a3a4ac; opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 18px; height: 18px; }
img { max-width: 100%; display: block; }
svg { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.35; }
hr { border: 0; height: 1px; background: var(--line); }
[hidden] { display: none !important; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  isolation: isolate;
  background: #fff;
  overflow-x: clip;
  box-shadow: 0 0 80px #28333b0d;
}
.page, .screen { min-height: 100vh; min-height: 100dvh; background: #fff; }
.page { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px); }
.screen { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.content { padding: 18px; }
.content > :last-child { margin-bottom: 0; }
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding: 8px 14px;
  background: #fff;
  z-index: 15;
}
.topbar h1, .topbar h2 { margin: 0; font-size: 18px; font-weight: 750; }
.topbar > h1, .topbar > h2 { position: absolute; left: 62px; right: 62px; text-align: center; pointer-events: none; }
.topbar > .back-button + h1, .topbar > .back-button + h2 { pointer-events: none; }
.back-button, .icon-button, .close-button {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.back-button:hover, .icon-button:hover, .close-button:hover { background: #f4f5f7; }
.back-button svg { width: 25px; height: 25px; }
.wordmark { font-size: 25px; font-weight: 950; line-height: 1; letter-spacing: -1.6px; color: #111217; }
.wordmark::first-letter { letter-spacing: -2px; }
.demo-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; color: #898b94; background: #f5f5f7; border-radius: 6px; font-size: 9px; font-weight: 550; letter-spacing: .2px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 15px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.section-title button, .section-title a { min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 500; }
.card { padding: 18px; background: #fff; border-radius: var(--radius); }
.muted { color: var(--muted); }
.money { color: var(--brand); font-variant-numeric: tabular-nums; font-weight: 750; }
.pill, .chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 7px 14px; border-radius: 50px; background: #f5f6f8; white-space: nowrap; font-size: 12px; }
.chip.active, .pill.active { color: var(--brand); background: var(--brand-soft); }
button.chip, button.pill { min-height: 44px; }
.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  transition: background .18s, transform .18s;
}
.primary-button { color: #fff; background: var(--brand); }
.primary-button:hover { background: var(--brand-dark); }
.primary-button:active, .secondary-button:active { transform: scale(.98); }
.secondary-button { color: #54565e; border-color: #e5e6eb; background: #fff; }
.secondary-button:hover { background: #f7f8fa; }
.primary-button.full, .secondary-button.full, .full-width { width: 100%; }
.text-button { min-height: 44px; padding: 6px 3px; font-size: 13px; color: var(--brand); }
.divider { height: 1px; background: var(--line); margin: 17px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.small { font-size: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger { color: var(--brand); }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 480px;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 7.25px 0 calc(7.25px + env(safe-area-inset-bottom));
  background: #fff;
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5.5px; min-height: 51px; color: #d9d9d9; font-size: 16px; font-weight: 400; line-height: 16px; }
.nav-item .nav-symbol { width: 29.5px; height: 29.5px; }
.nav-item.active { color: rgb(252,32,64); }

.home-header { padding-top: env(safe-area-inset-top); background: #fff; }
.home-header .topbar { min-height: 58px; padding-top: 10px; padding-bottom: 8px; justify-content: center; }
.home-header .topbar .demo-badge { position: absolute; right: 18px; }
.home-header .topbar .icon-button { position: absolute; right: 10px; }
.location-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 5px; }
.location-button { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 44px; padding: 0; font-size: 13px; font-weight: 650; text-align: left; }
.location-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-button > svg:first-child { width: 19px; height: 19px; color: var(--brand); }
.location-button > svg:last-child { width: 14px; height: 14px; color: #9699a0; }
.header-actions { display: flex; flex-shrink: 0; gap: 0; }
.header-actions .icon-button { width: 44px; flex-basis: 44px; }
.header-actions svg { width: 21px; height: 21px; }
.search-form { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; margin: 0 18px 17px; padding: 0 7px 0 14px; border: 1px solid #f0f1f4; border-radius: 50px; background: #f6f7f9; }
.search-form > svg { width: 19px; height: 19px; color: #a0a2ab; }
.search-input { flex: 1; width: 100%; height: 44px; padding: 0; border: 0; outline: none; background: transparent; font-size: 12px; }
.search-submit { min-height: 44px; min-width: 54px; padding: 6px 12px; color: #fff; background: var(--brand); border-radius: 30px; font-size: 12px; font-weight: 650; }
.search-form:focus-within { box-shadow: 0 0 0 2px #ff315c2b; border-color: #ffb2c3; }
.search-form .search-input:focus-visible { outline: none; }
.search-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; }
.search-grid .search-form { margin-right: 0; }
.search-grid > .icon-button { margin: 0 12px 17px 4px; }
.promo-strip { display: flex; gap: 8px; padding: 0 18px 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.promo-strip::-webkit-scrollbar { display: none; }
.promo-card { position: relative; flex: 0 0 calc((100% - 16px) / 3); min-width: 112px; height: 153px; padding: 12px 10px; border-radius: 14px; overflow: hidden; background: #b2f3ee; text-align: left; scroll-snap-align: start; }
.promo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #d7fffde8 0, #d7fffdc4 30%, transparent 72%); pointer-events: none; }
.promo-card:nth-child(2)::after { background: linear-gradient(180deg, #fff2e7ec 0, #fff2e7b0 29%, transparent 75%); }
.promo-card:nth-child(3)::after { background: linear-gradient(180deg, #e4f9f5ec 0, #e4f9f5c2 29%, transparent 75%); }
.promo-title, .promo-subtitle { position: relative; z-index: 1; display: block; }
.promo-title { margin: 0 0 3px; font-size: 18px; font-weight: 850; letter-spacing: -.6px; line-height: 1.25; }
.promo-subtitle { color: #536e6a; font-size: 10px; font-weight: 600; line-height: 1.3; }
.brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px 6px; padding: 23px 17px 22px; }
.brand-button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 74px; padding: 0 1px; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: #f6f7f9; font-size: 21px; line-height: 1; font-weight: 900; letter-spacing: -1px; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { display: block; max-width: 100%; font-size: 10px; font-weight: 550; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.deal-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 90px; margin: 0 18px 22px; padding: 15px 20px; overflow: hidden; border-radius: 15px; background: linear-gradient(105deg, #b0f2ec, #d1faf6); color: #1d5350; text-align: left; }
.deal-banner::before { content: ""; position: absolute; right: -24px; top: -55px; width: 175px; height: 175px; border: 28px solid #ffffff35; border-radius: 50%; }
.deal-banner > * { position: relative; z-index: 1; }
.deal-banner h2, .deal-banner h3, .deal-banner strong { display: block; margin: 0; font-size: 23px; line-height: 1.25; font-weight: 850; letter-spacing: -.5px; }
.deal-banner p, .deal-banner small { display: block; margin: 5px 0 0; color: #54837e; font-size: 11px; }
.deal-banner .banner-amount, .deal-banner > b { font-size: 39px; font-weight: 900; line-height: 1; letter-spacing: -2px; }
.deal-banner .pill { color: #24615b; background: #ffffff9c; min-height: 29px; padding: 5px 10px; font-size: 10px; }
.merchant-tabs { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; min-height: 54px; padding: 0 18px; background: #fff; border-top: 6px solid #f6f7f9; }
.merchant-tab { position: relative; flex-shrink: 0; min-height: 48px; padding: 8px 0; color: #93959d; font-size: 15px; font-weight: 650; }
.merchant-tab.active { color: var(--ink); font-size: 18px; font-weight: 850; }
.merchant-tab.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 20px; height: 3px; transform: translateX(-50%); background: var(--brand); border-radius: 2px; }
.filter-row { position: sticky; top: 54px; z-index: 19; display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 48px; padding: 0 14px; background: #fff; border-bottom: 1px solid #f7f7f9; }
.filter-button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 5px 4px; color: #787a83; font-size: 11px; white-space: nowrap; }
.filter-button svg { width: 13px; height: 13px; }
.filter-button.active { color: var(--brand); font-weight: 650; }
.merchant-list { display: flex; flex-direction: column; padding: 0 18px; }
.merchant-card { display: flex; gap: 12px; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line); text-align: left; }
.merchant-image { width: 96px; height: 98px; flex: 0 0 96px; border-radius: 13px; object-fit: cover; background: #f3f4f5; }
.merchant-info { flex: 1; min-width: 0; }
.merchant-name { display: -webkit-box; margin: 0 0 5px; overflow: hidden; color: #202126; font-size: 16px; font-weight: 800; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical; letter-spacing: -.3px; }
.merchant-rating { display: flex; align-items: center; gap: 5px; margin: 3px 0; color: #7c7e87; font-size: 10px; }
.merchant-rating svg { width: 12px; height: 12px; color: #ffad28; fill: #ffad28; }
.merchant-rating > strong, .merchant-rating > b { color: #f3a126; font-size: 11px; }
.merchant-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; color: #989aa2; font-size: 10px; margin-top: 5px; line-height: 1.45; }
.merchant-meta .distance, .merchant-meta .duration { margin-left: auto; }
.merchant-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px 5px; border-radius: 3px; color: #999ba3; background: #f6f7f8; font-size: 9px; line-height: 1.6; }
.tag.red { color: #ff5273; background: #fff0f3; }
.tag.gold { color: #bf9138; background: #fff6df; }
.tag svg { width: 10px; height: 10px; }
.home-end { padding: 22px 0 0; color: #b0b1b7; font-size: 11px; text-align: center; }

.search-screen { background: #fff; }
.search-header { display: flex; align-items: center; gap: 0; min-height: 70px; padding: 8px 14px 8px 6px; border-bottom: 1px solid var(--line); }
.search-header .search-form { flex: 1; margin: 0; }
.search-header .search-submit { background: transparent; color: var(--brand); }
.recent-searches, .hot-searches { padding: 22px 18px 8px; }
.recent-searches .section-title, .hot-searches .section-title { margin-bottom: 10px; font-size: 16px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.results-label { margin: 19px 18px 0; color: #989aa3; font-size: 12px; }
.search-screen .merchant-tabs { border-top: 0; }

.store-hero { position: relative; min-height: 182px; padding-top: env(safe-area-inset-top); background: #dedfe1; }
.store-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.store-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #00000038, transparent 58%, #00000016); }
.store-topbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; min-height: 65px; padding: 10px 14px; }
.store-topbar .back-button, .store-topbar .icon-button { color: #292b31; background: #fffffff0; width: 44px; height: 44px; flex-basis: 44px; box-shadow: 0 2px 12px #0000000a; }
.store-topbar > div { display: flex; gap: 8px; }
.store-summary { position: relative; z-index: 3; padding: 21px 18px 16px; margin-top: -18px; border-radius: 22px 22px 0 0; background: #fff; }
.store-summary .between { align-items: flex-start; }
.store-logo { float: right; width: 63px; height: 63px; margin-left: 12px; border: 3px solid #fff; border-radius: 16px; object-fit: cover; box-shadow: 0 2px 14px #262a3312; }
.store-name { margin: 0 0 8px; font-size: 23px; font-weight: 850; letter-spacing: -.6px; line-height: 1.3; }
.store-stats { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 5px 0; color: #878a93; font-size: 11px; }
.store-stats b, .store-stats strong { color: #f1a72d; }
.store-stats svg { width: 13px; height: 13px; color: #f1a72d; }
.store-promotion { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 10px 11px; border-radius: 9px; color: #f05672; background: #fff3f5; font-size: 11px; }
.store-promotion svg { width: 16px; height: 16px; }
.store-tabs { display: flex; gap: 30px; position: sticky; top: 0; z-index: 20; height: 54px; padding: 0 21px; border-bottom: 1px solid var(--line); background: #fff; }
.store-tab { position: relative; min-height: 48px; padding: 10px 0; color: #9597a0; font-size: 15px; }
.store-tab.active { color: var(--ink); font-weight: 800; }
.store-tab.active::after { position: absolute; content: ""; bottom: 0; left: calc(50% - 10px); width: 20px; height: 3px; border-radius: 3px; background: var(--brand); }
.menu-layout { display: grid; grid-template-columns: 83px minmax(0, 1fr); min-height: 400px; padding-bottom: 98px; }
.menu-categories { align-self: stretch; background: #f7f8fa; padding-top: 8px; }
.menu-category { position: relative; width: 100%; min-height: 56px; padding: 12px 9px; color: #999ba3; font-size: 11px; line-height: 1.5; text-align: center; }
.menu-category.active { color: var(--brand); background: #fff; font-weight: 750; }
.menu-category.active::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: var(--brand); border-radius: 2px; }
.menu-products { min-width: 0; padding: 13px 14px 20px 13px; }
.menu-section-title { margin: 1px 0 6px; font-size: 13px; font-weight: 750; }
.product-card { display: flex; gap: 10px; padding: 15px 0; border-bottom: 1px solid #f2f3f5; }
.product-image { flex: 0 0 79px; width: 79px; height: 85px; border-radius: 11px; background: #f5f6f8; object-fit: cover; }
.product-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.product-name { margin: 0 0 4px; font-size: 13px; font-weight: 750; line-height: 1.45; }
.product-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 4px; color: #a2a3ab; font-size: 10px; line-height: 1.5; }
.product-info > .muted { font-size: 9px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 3px; margin-top: auto; padding-top: 4px; }
.product-bottom .money { font-size: 16px; letter-spacing: -.4px; white-space: nowrap; }
.product-bottom del { color: #b1b2b9; font-size: 10px; font-weight: 400; }
.product-bottom .primary-button { min-height: 44px; padding: 4px 9px; border-radius: 20px; font-size: 10px; }
.quantity-control { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; flex-shrink: 0; height: 44px; white-space: nowrap; }
.quantity-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--brand); font-size: 22px; font-weight: 500; }
.quantity-button svg { width: 24px; height: 24px; }
.quantity-button:last-child { color: #fff; }
.quantity-button:last-child svg { padding: 4px; border-radius: 50%; background: var(--brand); }
.quantity-button:first-child:not(:last-child) svg { padding: 3px; border: 1px solid #ffb8c8; border-radius: 50%; }
.quantity-value { min-width: 14px; text-align: center; color: #4d4f58; font-size: 12px; font-variant-numeric: tabular-nums; }
.quantity-button:only-child { margin-right: -8px; }
.cart-bar { position: fixed; left: 50%; bottom: calc(13px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; width: calc(100% - 32px); max-width: 448px; min-height: 62px; padding: 0 0 0 17px; transform: translateX(-50%); border-radius: 50px; color: #fff; background: #292b34; box-shadow: 0 7px 30px #1c1c2530; }
.cart-icon { display: flex; position: relative; align-items: center; justify-content: center; width: 44px; height: 50px; margin-right: 10px; }
.cart-icon svg { width: 29px; height: 29px; }
.cart-badge { position: absolute; top: 3px; right: 1px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 750; border: 2px solid #292b34; line-height: 1; }
.cart-total { flex: 1; min-width: 0; line-height: 1.4; }
.cart-total strong, .cart-total b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.4px; }
.cart-total small, .cart-total .muted { display: block; color: #b1b2bb; font-size: 9px; }
.checkout-button { display: flex; align-items: center; justify-content: center; min-width: 106px; align-self: stretch; min-height: 62px; padding: 12px 20px; border-radius: 0 50px 50px 0; color: #fff; background: var(--brand); font-size: 14px; font-weight: 750; }
.review-card { margin-bottom: 12px; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.review-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-card p { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: #686b75; }
.review-card small { color: #a7a8b0; font-size: 10px; }
.review-card .stars { color: #ffaf2e; font-size: 12px; }
.merchant-details { padding: 20px 18px 100px; }
.merchant-details .card { padding: 0; margin-bottom: 24px; }
.merchant-details h3 { margin-bottom: 12px; font-size: 16px; }
.merchant-details p { color: #81838d; font-size: 12px; line-height: 1.9; }
.merchant-details .choice-row { border-bottom: 1px solid var(--line); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 22px; background: #181a2466; backdrop-filter: blur(3px); animation: backdrop-in .18s ease-out both; }
.modal { position: relative; width: 100%; max-width: 390px; max-height: calc(100dvh - 44px); padding: 24px; overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 22px 90px #00000020; animation: modal-in .22s ease-out both; }
.modal h2 { margin-bottom: 8px; font-size: 21px; font-weight: 800; }
.modal h3 { font-size: 16px; }
.modal > .close-button { position: absolute; top: 9px; right: 9px; color: #9a9ca5; }
.modal > .primary-button, .modal form > .primary-button { width: 100%; margin-top: 18px; }
.modal .muted { font-size: 12px; }
.sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 85dvh; padding: 12px 20px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; background: #fff; border-radius: 25px 25px 0 0; box-shadow: 0 -10px 60px #181b2c12; animation: sheet-in .25s ease-out both; }
.sheet::before { content: ""; display: block; width: 35px; height: 4px; border-radius: 4px; margin: 0 auto 9px; background: #e5e6ea; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet-header h2, .sheet-header h3 { margin: 0; font-size: 18px; font-weight: 800; }
.sheet-header .close-button { margin-right: -10px; color: #999ba5; }
.sheet > .primary-button { width: 100%; margin-top: 18px; }
.cart-sheet { padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
.cart-sheet .sheet-header > button:not(.close-button) { min-height: 44px; color: #a2a4ad; font-size: 11px; }
.cart-item { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cart-item > img { width: 55px; height: 55px; border-radius: 10px; object-fit: cover; }
.cart-item > div:first-of-type { flex: 1; min-width: 0; }
.cart-item-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.cart-item-title + .muted { font-size: 10px; }
.cart-item-price { font-size: 14px; color: var(--brand); font-weight: 700; }
.cart-item .quantity-control { margin-right: -8px; }
.cart-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; }
.cart-summary .money { font-size: 22px; }
.spec-group { margin-top: 20px; }
.spec-group h3, .spec-group h4 { margin-bottom: 9px; font-size: 13px; }
.spec-options { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-option { min-width: 73px; min-height: 44px; padding: 9px 15px; border: 1px solid #eff0f3; border-radius: 9px; color: #8a8c95; background: #f8f9fb; font-size: 12px; }
.spec-option.active { color: var(--brand); border-color: #ffacbf; background: #fff2f5; font-weight: 650; }
.spec-product { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.spec-product img { width: 87px; height: 87px; object-fit: cover; border-radius: 13px; }
.spec-product h3 { margin: 0 0 5px; font-size: 17px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 17px; }
.field > label, .field-label { color: #5f626c; font-size: 12px; font-weight: 650; }
.input { width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid #e9eaf0; border-radius: 11px; background: #fafbfc; font-size: 13px; }
textarea.input { min-height: 92px; resize: vertical; }
.input:focus { border-color: #ffa6bb; background: #fff; outline-color: #ffb7c9; }
.field small { color: #a4a6ae; font-size: 10px; }
.choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 0; text-align: left; }
button.choice-row { width: 100%; }
.choice-row > span:first-child { flex: 1; }
.choice-row > svg { color: #aaacb4; width: 17px; height: 17px; }
.choice-row .muted { font-size: 12px; }

.checkout-page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); background: #f6f7f9; }
.checkout-page .topbar { background: #f6f7f9; }
.checkout-share-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 10px; border-radius: 50%; color: #363a43; }
.checkout-share-button:hover { color: var(--brand); background: #fff; }
.checkout-share-button > svg { width: 22px; height: 22px; }
.shared-selection-page .content { display: flex; flex-direction: column; gap: 14px; }
.shared-selection-note, .share-access-note { margin: 0; color: #8e93a0; font-size: 12px; line-height: 1.7; }
.share-access-note { padding: 8px 0 4px; text-align: center; }
.checkout-page .content { display: flex; flex-direction: column; gap: 13px; padding: 8px 14px 24px; }
.checkout-page .card { border-radius: 15px; }
.address-card { position: relative; width: 100%; padding: 19px 36px 18px 18px; text-align: left; overflow: hidden; }
.address-card::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; opacity: .7; background: repeating-linear-gradient(130deg, #ff8b9d 0 11px, transparent 11px 20px, #80d8e3 20px 31px, transparent 31px 40px); }
.address-card > svg { position: absolute; top: calc(50% - 9px); right: 15px; width: 17px; height: 17px; color: #afb0b8; }
.address-name { margin: 0 0 7px; font-size: 15px; font-weight: 750; }
.address-name span, .address-name small { margin-left: 7px; color: #8e9099; font-size: 12px; font-weight: 400; }
.address-line { color: #7c7e88; font-size: 12px; line-height: 1.7; }
.address-card .tag { margin-bottom: 8px; }
.delivery-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.delivery-time > span:last-child, .delivery-time strong { color: var(--brand); font-size: 12px; font-weight: 600; }
.delivery-time svg { width: 15px; height: 15px; }
.order-store-name { display: flex; align-items: center; gap: 7px; margin: 0 0 17px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 750; }
.order-store-name svg { width: 18px; height: 18px; color: #8b8e97; }
.order-product { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 17px; }
.order-product-image { flex: 0 0 57px; width: 57px; height: 57px; border-radius: 10px; object-fit: cover; }
.order-product-meta { flex: 1; min-width: 0; }
.order-product-meta h3, .order-product-meta strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 650; }
.order-product-meta p { margin-bottom: 2px; color: #a3a5ae; font-size: 10px; }
.order-product > .money { color: #4a4c55; font-size: 13px; font-weight: 650; }
.order-product > span:last-child { font-size: 12px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 33px; color: #7f818b; font-size: 12px; }
.price-row > :last-child { color: #555862; font-variant-numeric: tabular-nums; }
.price-row.discount > :last-child { color: var(--brand); }
.price-row.total { margin-top: 8px; padding-top: 13px; border-top: 1px solid var(--line); color: #565962; }
.price-row.total > :last-child { color: var(--brand); font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.checkout-footer { position: fixed; bottom: 0; left: 50%; z-index: 45; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 480px; min-height: 87px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #fff; border-top: 1px solid var(--line); }
.checkout-footer > div { flex: 1; min-width: 0; }
.checkout-footer .money { font-size: 24px; letter-spacing: -.7px; }
.checkout-footer small { display: block; color: #a0a2ab; font-size: 10px; }
.checkout-footer .primary-button { min-width: 137px; border-radius: 50px; }
.coupon-card { position: relative; display: flex; align-items: center; gap: 15px; min-height: 115px; padding: 18px 15px; margin-bottom: 13px; background: #fff; border: 1px solid #ffe3ea; border-radius: 15px; overflow: hidden; }
.coupon-card::before { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 94px; background: linear-gradient(90deg, #fff0f4, #fff9fa); z-index: 0; }
.coupon-card > * { position: relative; }
.coupon-value { display: flex; flex: 0 0 66px; flex-direction: column; align-items: center; justify-content: center; color: var(--brand); font-size: 33px; font-weight: 850; letter-spacing: -1px; line-height: 1.15; }
.coupon-value small { margin-top: 6px; color: #e3899c; font-size: 9px; font-weight: 500; letter-spacing: 0; }
.coupon-detail { flex: 1; min-width: 0; }
.coupon-detail h3, .coupon-detail strong { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 750; }
.coupon-detail p, .coupon-detail small { display: block; margin: 0; color: #a5a0a8; font-size: 10px; line-height: 1.8; }
.coupon-action { min-height: 44px; padding: 6px 10px; border: 1px solid #ffb9ca; border-radius: 30px; color: var(--brand); font-size: 10px; font-weight: 650; white-space: nowrap; }
.payment-method { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.payment-method > span { flex: 1; }
.payment-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: #3bb58c; font-size: 12px; font-weight: 800; }
.payment-method:nth-child(2) .payment-logo { background: #395ca6; }
.payment-method:nth-child(3) .payment-logo { background: #292d38; }
.payment-method:last-child { border-bottom: 0; }

.orders-page, .profile-page, .sub-page, .order-detail { background: #f6f7f9; }
.orders-page .topbar { background: #fff; }
.order-tabs { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-around; height: 52px; padding: 0 10px; background: #fff; border-bottom: 1px solid #f2f3f5; }
.order-tabs button { position: relative; min-height: 48px; padding: 8px 6px; color: #93959e; font-size: 13px; }
.order-tabs button.active { color: var(--brand); font-weight: 750; }
.order-tabs button.active::after { position: absolute; content: ""; width: 18px; height: 3px; bottom: 0; left: calc(50% - 9px); border-radius: 4px; background: var(--brand); }
.order-card { margin: 14px 14px 0; padding: 16px; background: #fff; border-radius: 15px; }
.order-card-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.order-card-header > button { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; margin: -8px 0; padding: 0; font-size: 14px; font-weight: 750; }
.order-card-header > button svg { width: 16px; height: 16px; color: #adb0b8; }
.order-status { flex-shrink: 0; color: var(--brand); font-size: 11px; }
.order-status.completed { color: #a1a3ac; }
.order-preview { display: flex; align-items: center; gap: 10px; padding: 17px 0; }
.order-preview img { width: 62px; height: 62px; border-radius: 11px; object-fit: cover; }
.order-preview > div { flex: 1; min-width: 0; }
.order-preview h3 { margin: 0 0 5px; font-size: 13px; font-weight: 650; }
.order-preview p { margin: 0; color: #a6a8b0; font-size: 10px; }
.order-preview > strong { margin-left: auto; font-size: 16px; font-weight: 750; white-space: nowrap; }
.order-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; }
.order-card-footer > small { flex: 1; color: #adaeb7; font-size: 9px; }
.order-card-footer .primary-button, .order-card-footer .secondary-button { min-height: 44px; padding: 6px 15px; border-radius: 25px; font-size: 11px; font-weight: 600; }
.order-detail { padding-bottom: 105px; }
.order-detail > .content { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.status-hero { padding: 20px 20px 27px; background: #fff; text-align: center; }
.status-hero > svg, .status-icon { width: 66px; height: 66px; padding: 17px; margin: 0 auto 13px; border-radius: 22px; color: var(--brand); background: #fff0f4; }
.status-hero h1, .status-hero h2 { margin-bottom: 7px; font-size: 23px; font-weight: 800; letter-spacing: -.6px; }
.status-hero p { margin-bottom: 0; color: #a0a2ab; font-size: 12px; }
.status-hero .primary-button { min-height: 44px; margin-top: 15px; border-radius: 30px; font-size: 12px; }
.timeline { display: flex; align-items: flex-start; padding: 23px 0 3px; }
.timeline-step { position: relative; flex: 1; min-width: 0; padding: 18px 2px 0; color: #b3b5bd; font-size: 10px; text-align: center; }
.timeline-step::before { position: absolute; content: ""; top: 1px; left: calc(50% - 4px); z-index: 1; width: 8px; height: 8px; background: #dedfe5; border-radius: 50%; box-shadow: 0 0 0 4px #fff; }
.timeline-step:not(:last-child)::after { position: absolute; content: ""; top: 4px; left: 50%; width: 100%; height: 2px; background: #edeef2; }
.timeline-step.done { color: #d8607b; }
.timeline-step.done::before, .timeline-step.done:not(:last-child)::after { background: var(--brand); }
.timeline-step small { display: block; margin-top: 3px; font-size: 8px; color: #aaaeb5; }
.order-detail .notice-card { margin: 0; }
.order-detail .order-product:last-child { margin-bottom: 0; }

.profile-header { position: relative; padding: 24px 22px 21px; background: linear-gradient(145deg, #fff4f6, #fff 65%); }
.profile-header > .icon-button { position: absolute; right: 12px; top: 16px; color: #696d78; }
.profile-header > .row, .profile-identity { display: flex; align-items: center; gap: 15px; }
.profile-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 69px; height: 69px; color: #ff8da6; background: #ffe4eb; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 5px 18px #e84b6a0b; }
.profile-avatar svg { width: 31px; height: 31px; }
.profile-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-name { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.profile-header .muted { font-size: 11px; }
.profile-header .demo-badge { margin-top: 7px; color: #d27e91; background: #ffeef2; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 25px; }
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 57px; padding: 0 7px; color: #9899a3; font-size: 11px; }
.profile-stat strong, .profile-stat b { color: #32343d; font-size: 21px; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; }
.profile-stat + .profile-stat { border-left: 1px solid #f3edf0; }
.profile-menu { margin: 15px 14px; padding: 0 16px; border-radius: 15px; background: #fff; }
.profile-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 61px; padding: 11px 0; border-bottom: 1px solid #f4f4f6; text-align: left; font-size: 13px; }
.profile-menu-item:last-child { border-bottom: 0; }
.profile-menu-item > span:not(.menu-icon):not(.chevron) { flex: 1; }
.profile-menu-item .muted { font-size: 10px; }
.menu-icon { display: flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #fff2f5; color: #ff7a98; }
.menu-icon svg { width: 19px; height: 19px; }
.profile-menu-item:nth-child(3n + 2) .menu-icon { color: #e8b24e; background: #fff8e9; }
.profile-menu-item:nth-child(3n) .menu-icon { color: #62b9bb; background: #eefafa; }
.chevron { display: inline-flex; flex: 0 0 auto; color: #bec0c8; }
.chevron svg, svg.chevron { width: 16px; height: 16px; }
.profile-footer, .demo-note { color: #b6b7be; font-size: 10px; line-height: 1.8; text-align: center; padding: 11px 24px 18px; }
.address-list { padding: 15px 14px; }
.saved-address { margin-bottom: 13px; padding: 18px; background: #fff; border-radius: 15px; }
.saved-address .address-name { font-size: 14px; }
.saved-address .tag { margin-right: 5px; }
.address-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); color: #a3a5ae; font-size: 10px; }
.address-actions label { display: flex; align-items: center; gap: 6px; }
.address-actions > div { display: flex; gap: 12px; }
.address-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 0; font-size: 11px; }
.address-actions button svg { width: 13px; height: 13px; }
.address-list > .primary-button { width: 100%; margin-top: 8px; }
.favorite-list { padding: 0 18px; background: #fff; }
.support-card { padding: 24px 20px; background: #fff; border-radius: 16px; text-align: center; }
.support-card > svg { width: 60px; height: 60px; padding: 16px; margin-bottom: 13px; color: var(--brand); background: #fff0f4; border-radius: 20px; }
.support-card h2 { margin-bottom: 8px; font-size: 20px; }
.support-card p { margin-bottom: 17px; color: #9d9fa8; font-size: 12px; line-height: 1.8; }
.support-card .primary-button { min-width: 170px; border-radius: 30px; }
.notice-card { padding: 14px 16px; margin: 14px 0; border: 1px solid #f8ead7; border-radius: 12px; background: #fff9ee; color: #b49766; font-size: 11px; line-height: 1.8; }
.notice-card svg { width: 15px; height: 15px; margin-right: 5px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 59px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; }
.settings-row:last-child { border-bottom: 0; }
.settings-row > .muted { margin-left: auto; font-size: 11px; }
.language-options { display: flex; flex-direction: column; }
.language-options button { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.language-options button.active { color: var(--brand); }
.language-options button svg { width: 18px; height: 18px; }
.faq-list { padding: 0 16px; background: #fff; border-radius: 15px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-list details:last-child { border: 0; }
.faq-list summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.faq-list details p { margin: 10px 0 0; color: #989aa3; font-size: 12px; line-height: 1.9; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; padding: 50px 30px; text-align: center; }
.empty-state > svg { width: 73px; height: 73px; padding: 18px; margin-bottom: 18px; border-radius: 25px; color: #c6c9d1; background: #f0f1f4; }
.empty-state h2, .empty-state h3 { margin-bottom: 7px; font-size: 17px; font-weight: 750; }
.empty-state p { max-width: 260px; margin-bottom: 18px; color: #a4a6af; font-size: 12px; line-height: 1.8; }
.empty-state .primary-button { min-width: 135px; min-height: 44px; border-radius: 30px; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(105px + env(safe-area-inset-bottom)); z-index: 150; max-width: calc(100% - 56px); width: max-content; padding: 12px 19px; transform: translateX(-50%); border-radius: 12px; color: #fff; background: #242631ed; box-shadow: 0 5px 20px #0000000f; font-size: 12px; line-height: 1.7; text-align: center; pointer-events: none; animation: toast-in .2s ease-out both; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #ffceda; border-top-color: var(--brand); border-radius: 50%; animation: spin .65s linear infinite; }

/* Concrete app markup: compact home controls and food card wrappers. */
.home-title-row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 63px; padding: 13px 18px 9px; }
.home-title-row .demo-badge { justify-self: end; }
.language-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 44px; padding: 0 0 0 4px; color: #787b85; font-size: 11px; white-space: nowrap; }
.language-button svg { width: 12px; height: 12px; }
.location-row .location-button { flex: 1; }
.search-form > .search-grid { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-left: 1px solid #e4e6eb; color: #818590; }
.search-form > .search-grid svg { width: 18px; height: 18px; }
.search-form > .search-submit { margin-right: 1px; }
.promo-cta { display: inline-flex; align-items: center; gap: 2px; position: absolute; left: 10px; bottom: 10px; z-index: 2; min-height: 22px; padding: 2px 6px; background: #ffffffe8; border-radius: 30px; color: #365955; font-size: 8px; font-weight: 650; }
.promo-cta svg { width: 10px; height: 10px; }
.brand-mark { background: var(--brand-color, #f6f7f9); color: #4b3d29; font-size: 17px; letter-spacing: -.7px; }
.brand-button:nth-child(3) .brand-mark { font-size: 30px; }
.brand-button:nth-child(5) .brand-mark, .brand-button:nth-child(6) .brand-mark, .brand-button:nth-child(7) .brand-mark, .brand-button:nth-child(9) .brand-mark, .brand-button:nth-child(10) .brand-mark { font-size: 26px; }
.deal-banner { width: calc(100% - 36px); }
.deal-banner > div > span { display: block; margin-bottom: 3px; font-size: 10px; }
.deal-banner strong > b { margin-left: 2px; font-size: 30px; letter-spacing: -1px; }
.deal-ticket { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-height: 63px; border-radius: 8px; color: #2a7971; background: #ffffffa6; font-size: 30px; line-height: 1.05; font-weight: 850; transform: rotate(7deg); }
.deal-ticket small { margin-top: 5px; color: #5f9a92; font-size: 8px; font-weight: 500; letter-spacing: 1px; }
.merchant-card { position: relative; }
a.merchant-image { position: relative; display: block; overflow: hidden; }
.merchant-image > img { width: 100%; height: 100%; object-fit: cover; }
.image-label { position: absolute; left: 0; bottom: 0; padding: 2px 7px; border-radius: 0 7px 0 0; color: #fff; background: #ff315ce8; font-size: 9px; font-weight: 650; }
.merchant-name { padding-right: 23px; }
.favorite-toggle { display: flex; align-items: center; justify-content: center; position: absolute; right: -10px; top: 8px; width: 44px; height: 44px; padding: 0; color: #c9cbd2; }
.favorite-toggle svg { width: 17px; height: 17px; }
.favorite-toggle.active { color: var(--brand); }
.rating-star { color: #eea62a; font-weight: 650; }
.merchant-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.merchant-meta svg { width: 11px; height: 11px; }
.content > .merchant-list { padding: 0; }
.search-screen .content > .results-label { margin: 0 0 5px; }
.search-screen .content > .recent-searches, .search-screen .content > .hot-searches { padding: 0 0 23px; }
.recent-searches .between .section-title { margin-bottom: 0; }
.recent-searches .between { margin-bottom: 9px; }
.brand-hero { display: flex; align-items: center; gap: 16px; min-height: 122px; margin-bottom: 6px; padding: 17px; background: #fff; border-radius: 16px; }
.brand-hero .brand-mark { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 21px; font-size: 22px; }
.brand-hero h2 { margin: 0 0 5px; font-size: 23px; letter-spacing: -.5px; }
.brand-hero p { margin: 0; font-size: 11px; }
.brand-hero + .merchant-list { margin-top: 14px; padding: 0 14px; border-radius: 15px; background: #fff; }

/* Store menus, product detail, and complete specification sheets. */
.store-search-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 17px; border: 1px solid #ffffff50; border-radius: 30px; color: #fff; background: #282a3538; backdrop-filter: blur(10px); font-size: 11px; }
.store-search-button svg { width: 17px; height: 17px; }
.store-topbar .icon-button.active { color: var(--brand); }
span.store-logo { display: flex; align-items: center; justify-content: center; background: #fff0e2; color: #765333; font-size: 28px; font-weight: 850; }
.store-promotion { margin-bottom: 0; }
.product-card > a:first-child { flex-shrink: 0; }
.product-bottom > div:first-child { min-width: 0; }
.product-bottom del { margin-left: 4px; }
.khr-price { display: block; margin-top: 1px; color: #a9abb3; font-size: 9px; line-height: 1.4; font-weight: 400; }
.spec-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 7px 10px; border-radius: 30px; color: #fff; background: var(--brand); font-size: 10px; line-height: 1.4; }
.cart-total { text-align: left; padding: 6px 0; }
.cart-total strong { font-size: 19px; }
.review-score { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; padding: 18px; border-radius: 14px; background: #fff8ed; color: #cf9e4e; }
.review-score > strong { font-size: 36px; line-height: 1; letter-spacing: -1px; }
.review-score > span { font-size: 11px; }
.product-detail-page { padding-bottom: 102px; background: #f6f7f9; }
.product-detail-hero { position: relative; height: 300px; background: #e7e8e9; }
.product-detail-hero > img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-hero > .back-button { position: absolute; left: 15px; top: calc(16px + env(safe-area-inset-top)); background: #fffffff2; box-shadow: 0 2px 10px #0000000a; }
.product-detail-page > .content { position: relative; margin-top: -23px; padding: 0 15px 25px; }
.product-detail-page .card h1 { margin-bottom: 6px; font-size: 23px; font-weight: 800; }
.product-detail-page .card > p.muted { margin-bottom: 13px; font-size: 11px; }
.product-detail-page .card .money { font-size: 26px; }
.product-detail-page .card .product-description { display: block; margin: 17px 0 0; color: #898c96; font-size: 12px; line-height: 1.9; }
.product-detail-page .card + .section-title { margin: 24px 1px 13px; font-size: 16px; }
.spec-product { align-items: flex-start; }
.spec-product > div { flex: 1; min-width: 0; }
.spec-product > div > .muted { margin: 5px 0 0; font-size: 10px; line-height: 1.7; }
fieldset.spec-group { min-width: 0; margin: 20px 0; padding: 0; border: 0; }
.spec-group > legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
label.spec-option { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spec-option > input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.spec-option:has(input:focus-visible) { outline: 3px solid #39aba8; outline-offset: 3px; }
#spec-form > .primary-button { margin-top: 4px; }
.sheet-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet-footer > .primary-button:only-child, .sheet-footer > .secondary-button:only-child { width: 100%; }
.sheet-footer > .cart-summary { width: 100%; margin-top: 0; }
.sheet-footer > .cart-summary + .primary-button { width: 100%; }
.sheet-content > p { color: #868994; font-size: 13px; line-height: 1.9; }
.sheet-content > form > .primary-button { margin-top: 13px; }
.cart-item-title, .cart-item-price { display: block; }
.cart-item .quantity-control > span { min-width: 14px; font-size: 12px; text-align: center; }

/* Address, payment, and status markup use real control-sized targets. */
.checkout-page button.address-card { display: flex; align-items: flex-start; gap: 11px; background: #fff; border-radius: 15px; }
.address-pin { display: flex; align-items: center; justify-content: center; flex: 0 0 31px; width: 31px; height: 36px; color: var(--brand); }
.address-pin svg { width: 25px; height: 25px; }
.address-card > div { flex: 1; min-width: 0; }
.address-card strong.address-line { display: block; color: #3c3f48; font-size: 15px; font-weight: 750; line-height: 1.5; }
.address-card > div > p { margin: 5px 0; color: #a0a2ab; font-size: 11px; }
.address-card .address-name { display: block; margin: 0; font-size: 11px; color: #9597a1; font-weight: 400; }
.order-product-meta > span { display: block; margin-top: 2px; color: #a6a8b1; font-size: 11px; }
.order-product > strong:last-child { margin-left: auto; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coupon-picker { width: 100%; padding: 0; min-height: 44px; }
.coupon-picker .money { color: var(--brand); font-size: 11px; font-weight: 600; }
.coupon-picker svg { width: 13px; height: 13px; margin-left: 2px; }
.payment-method { width: 100%; text-align: left; }
.payment-method > .payment-logo { flex: 0 0 32px; }
.payment-method > .payment-logo.wechat { background: #38b784; }
.payment-method > .payment-logo.alipay { background: #299ee8; }
.payment-method > .payment-logo.aba { background: #116276; font-size: 9px; }
.payment-method > .radio-dot { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid #d7dae2; border-radius: 50%; }
.payment-method > .radio-dot.selected { border-color: var(--brand); background: var(--brand); }
.radio-dot.selected::after { position: absolute; content: ""; top: 3px; left: 5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.coupon-action.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.orders-page .content > .order-card, .sub-page .content > .order-card { margin: 0 0 14px; }
.order-card-header > strong { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14px; font-weight: 750; }
.order-card-header > strong svg { color: #aaaeb8; width: 14px; height: 14px; }
.order-preview > div:last-child { margin-left: auto; flex: 1 0 60px; text-align: right; }
.order-preview > div:last-child span { display: block; color: #a1a4ae; font-size: 10px; }
.order-preview > div:last-child strong { display: block; font-size: 17px; }
.order-preview img { width: 57px; height: 57px; flex-shrink: 0; }
.order-detail .status-icon { display: flex; align-items: center; justify-content: center; }
.status-icon > svg { width: 31px; height: 31px; }
.status-hero > small { display: block; margin-top: 5px; color: #b2b4bc; font-size: 9px; }
.order-detail .timeline { margin-bottom: 0; padding: 12px 3px 18px; border-radius: 16px; background: #fff; }
.order-detail .timeline-step { padding-top: 2px; }
.order-detail .timeline-step > span { position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; width: 30px; height: 30px; margin: 0 auto 9px; color: #c0c3cd; background: #f2f3f7; border: 4px solid #fff; border-radius: 50%; box-sizing: content-box; }
.order-detail .timeline-step > span svg { width: 16px; height: 16px; }
.order-detail .timeline-step.done > span { color: #fff; background: var(--brand); }
.order-detail .timeline-step::before { display: none; }
.order-detail .timeline-step:not(:last-child)::after { top: 20px; }
.order-detail .timeline-step > small { color: inherit; font-size: 10px; }
.order-detail .content > .row { flex-wrap: wrap; gap: 8px; }
.order-detail .content > .row > button { flex: 1; min-width: 100px; padding-left: 12px; padding-right: 12px; font-size: 12px; }
.order-detail .price-row > .small { max-width: 72%; text-align: right; overflow-wrap: anywhere; font-size: 10px; }
.order-status.cancelled { color: #afb1b9; }

/* Personal center and its independent service screens. */
.profile-user { display: flex; align-items: center; gap: 13px; padding-top: 25px; }
.profile-user > div:nth-child(2) { flex: 1; min-width: 0; }
.profile-user > div:nth-child(2) > p { margin-bottom: 0; color: #aa98a1; font-size: 11px; }
.profile-avatar { font-size: 31px; font-weight: 900; line-height: 1; }
.profile-user > .icon-button { flex: 0 0 44px; color: #a596a1; }
.profile-page > .content { padding: 0 14px; }
.profile-page .content > .profile-stats { position: relative; margin: 0 0 15px; padding: 18px 0; border-radius: 16px; }
.profile-page .content > .deal-banner { width: 100%; margin: 0 0 15px; padding: 18px; }
.profile-page .deal-banner strong { font-size: 20px; }
.profile-page .deal-banner > svg { width: 42px; height: 42px; margin-right: 4px; color: #5eaaa1; }
.profile-page .content > .profile-menu, .sub-page .content > .profile-menu { margin: 0 0 15px; }
.profile-menu-item > svg:last-child { margin-left: auto; color: #bfc2cb; width: 16px; height: 16px; }
.profile-menu-item > svg:first-child:not(:last-child) { width: 21px; height: 21px; color: #e78ba0; }
.profile-menu.card { padding-top: 0; padding-bottom: 0; }
.saved-address { position: relative; padding: 16px; border: 1px solid transparent; }
.saved-address.selected { border-color: #ffacbf; box-shadow: 0 2px 9px #ff315c05; }
.address-main { display: block; width: 100%; padding: 0 44px 0 0; text-align: left; }
.address-main > strong { display: block; margin-bottom: 6px; color: #41444e; font-size: 15px; font-weight: 750; }
.address-main > p { margin: 0 0 8px; color: #8e919d; font-size: 12px; }
.address-main > span:not(.tag) { display: inline-block; color: #a0a3af; font-size: 11px; }
.address-main .tag { margin-left: 7px; }
.saved-address .address-actions { justify-content: flex-end; gap: 2px; margin-top: 10px; padding-top: 5px; }
.saved-address .address-actions > .icon-button { justify-content: center; }
.saved-address .address-actions .icon-button svg { width: 16px; height: 16px; }
.wallet-hero { position: relative; overflow: hidden; margin-bottom: 25px; padding: 26px 24px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #ff4d74, #ff315c 65%, #ec2956); box-shadow: 0 10px 22px #ff315c16; }
.wallet-hero::after { position: absolute; content: ""; right: -45px; top: -45px; width: 175px; height: 175px; border: 30px solid #ffffff0d; border-radius: 50%; pointer-events: none; }
.wallet-hero > small { font-size: 12px; color: #ffe3eb; }
.wallet-hero > h1 { margin: 8px 0 9px; font-size: 43px; line-height: 1.1; font-weight: 800; letter-spacing: -1.5px; }
.wallet-hero > p { margin-bottom: 17px; color: #ffd5df; font-size: 10px; }
.wallet-hero > .secondary-button { min-width: 92px; padding: 7px 20px; border-radius: 30px; color: var(--brand); background: #fff; border-color: #fff; font-size: 12px; }
.sub-page .content > .profile-stats { margin: 0 0 16px; padding: 17px 0; border-radius: 15px; }
.sub-page .content > .card:not(.profile-menu):not(:last-child), .sub-page .content > .support-card { margin-bottom: 15px; }
.support-icon, .empty-icon { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; margin: 0 auto 17px; border-radius: 22px; color: var(--brand); background: var(--brand-soft); }
.support-icon svg { width: 30px; height: 30px; }
.support-card h1 { margin-bottom: 7px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.support-card p { margin-bottom: 0; }
.empty-icon { width: 76px; height: 76px; margin-bottom: 20px; color: #c3c7d1; background: #eff1f6; }
.empty-icon svg { width: 35px; height: 35px; }
.settings-row > span:last-child:not(:first-child) { margin-left: auto; color: #a6a8b1; font-size: 11px; }
.settings-row > span:last-child > svg { width: 14px; height: 14px; margin-left: 5px; }
.sub-page .content > .order-card > p { margin: 15px 0; font-size: 12px; color: #9a9daa; line-height: 1.8; }
label.field { color: #777b88; font-size: 12px; }

/* Shared links, unified checkout integrations, and merchant administration. */
.share-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: #555963; background: #fffffff2; box-shadow: 0 2px 12px #0000000a; }
.share-button > svg { width: 21px; height: 21px; }
.share-button:hover { color: var(--brand); background: #fff; }
.store-topbar:has(.share-button) { gap: 8px; }
.store-topbar:has(.share-button) .store-search-button { flex: 1; min-width: 0; max-width: 196px; padding-left: 9px; padding-right: 9px; }
.product-detail-hero > .share-button { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 15px; z-index: 2; }
.share-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 0 18px; }
.share-options > button, .share-options > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 95px; padding: 12px 3px; border: 1px solid #f0f1f5; border-radius: 14px; color: #747884; background: #fafbfc; font-size: 11px; line-height: 1.4; text-align: center; }
.share-options > button:hover, .share-options > a:hover { border-color: #ffd0db; background: #fff6f8; }
.share-options > button > svg, .share-options > a > svg, .share-options .share-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 10px; border-radius: 14px; color: #3cb97c; background: #eaf8ef; }
.share-options > :nth-child(2) > svg, .share-options > :nth-child(2) > .share-icon, .share-options > .facebook > svg, .share-options > .facebook > .share-icon { color: #4978cb; background: #edf2fd; }
.share-options > :nth-child(3) > svg, .share-options > :nth-child(3) > .share-icon, .share-options > .telegram > svg, .share-options > .telegram > .share-icon { color: #39a5d3; background: #eaf6fc; }
.share-options .share-icon > svg { width: 22px; height: 22px; }
.share-options .share-brand-logo { display:block; width:42px; height:42px; object-fit:contain; padding:0; background:transparent; }
@media (max-width: 400px) {
  .share-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.checkout-payment-picker { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:14px; }
.checkout-payment-picker > span:last-child { display:flex; align-items:center; gap:9px; }
.checkout-payment-picker .payment-brand-logo { width:28px; height:28px; object-fit:contain; }
.checkout-payment-picker svg { width:16px; height:16px; color:#a6a8b0; }
.payment-page { width:100%; max-width:390px; min-height:100dvh; margin:0 auto; padding-bottom:110px; background:#f7f7fc; }
.payment-topbar { height:44px; min-height:44px; padding:0 10px; background:#f7f7fc; border-bottom:1px solid #eeeef3; }
.payment-topbar h1 { font-size:15px; }
.payment-topbar .back-button { color:#a7abb4; }
.payment-amount { display:flex; align-items:baseline; justify-content:center; padding:24px 12px 46px; color:#ff1649; font-size:30px; line-height:1.2; font-weight:700; }
.payment-amount small { margin-right:2px; font-size:19px; }
.payment-options-card { margin:0 10px; padding:14px 10px 0; border-radius:11px; background:#fff; }
.payment-options-card > h2 { margin:0 0 8px; font-size:11px; line-height:18px; font-weight:600; color:#a4a9b8; }
.payment-choice { display:flex; width:100%; min-height:64px; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #f3f3f6; text-align:left; }
.payment-choice:last-child { border-bottom:0; }
.payment-choice .payment-brand-logo { flex:0 0 36px; width:36px; height:36px; object-fit:contain; border-radius:5px; }
.payment-brand-logo[src$="alipay-issued.svg"] { background:#00a0e9; }
.payment-choice-label { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.payment-choice-label strong { font-size:12px; font-weight:600; color:#30323d; }
.payment-choice-label small { color:#adb3c1; font-size:10px; line-height:15px; }
.payment-choice-radio { width:18px; height:18px; flex:0 0 18px; border:1px solid #b7bbc7; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.payment-choice-radio.selected { background:#ff1649; border-color:#ff1649; color:#fff; }
.payment-choice-radio svg { width:13px; height:13px; stroke-width:3; }
.payment-choice.unavailable { opacity:.45; }
.payment-confirm-footer { position:fixed; z-index:30; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,390px); padding:12px 10px calc(16px + env(safe-area-inset-bottom,0px)); background:#f7f7fc; }
.payment-confirm-footer p { margin:0 0 8px; text-align:center; font-size:10px; color:#9aa0af; }
.payment-confirm-footer .primary-button { width:100%; min-height:44px; border-radius:26px; background:#ff1649; font-size:15px; }
.payment-confirm-footer .primary-button:disabled { opacity:1; cursor:not-allowed; }
.payment-page:has(.payment-currency-note) { padding-bottom:154px; }
.payment-confirm-footer .payment-currency-note { margin:0 3px 10px; color:#796141; font-size:11px; line-height:1.6; text-align:left; }
.payment-pending .payment-currency-note { margin-top:8px; }
html:has(.payment-page),body:has(.payment-page) { scrollbar-width:none; }
.app-shell:has(.payment-page) { max-width:390px; }
html:has(.payment-page)::-webkit-scrollbar,body:has(.payment-page)::-webkit-scrollbar { display:none; width:0; height:0; }
.share-options small { display: block; color: #a7aab3; font-size: 9px; }
.share-link-row { display: flex; align-items: center; gap: 8px; padding: 9px; background: #f5f6f9; border: 1px solid #edeff4; border-radius: 12px; }
.share-link { flex: 1; min-width: 0; width: 100%; min-height: 44px; padding: 8px 5px; border: 0; border-radius: 6px; color: #8e93a0; background: transparent; font-size: 11px; line-height: 1.6; user-select: text; -webkit-user-select: text; cursor: text; overflow-wrap: anywhere; }
.share-link-row > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; min-height: 44px; padding: 8px 13px; border: 0; border-radius: 9px; color: var(--brand); background: #fff; font-size: 11px; font-weight: 650; box-shadow: 0 1px 4px #343b4710; }
.share-link-row > button > svg { width: 15px; height: 15px; }
.integration-status { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; padding: 13px 14px; border: 1px solid #e9ecf2; border-radius: 12px; color: #9298a6; background: #f8f9fc; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.integration-status > svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; }
.integration-status > div { flex: 1; min-width: 0; }
.integration-status strong { color: #646b79; font-weight: 650; }
.integration-status p { margin: 3px 0 0; }
.integration-status.ready, .integration-status[data-status="ready"] { border-color: #d9eee3; color: #6ba08a; background: #f0faf5; }
.integration-status.pending, .integration-status[data-status="pending"] { border-color: #f5e8ce; color: #b29460; background: #fff9ed; }
.integration-status.error, .integration-status[data-status="error"] { border-color: #ffdce5; color: #ce8195; background: #fff3f6; }
.integration-status a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.integration-status .secondary-button { min-height: 44px; margin-top: 9px; padding: 7px 13px; border-radius: 9px; font-size: 11px; }
.admin-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 20px 18px; border: 1px solid #f0e9ed; border-radius: 17px; color: #656875; background: linear-gradient(120deg, #fff0f4, #fff9fa); }
.admin-header > svg, .admin-header > .menu-icon { flex: 0 0 45px; width: 45px; height: 45px; padding: 12px; border-radius: 14px; color: var(--brand); background: #ffe0e9; }
.admin-header > div { flex: 1; min-width: 0; }
.admin-header h1, .admin-header h2, .admin-header h3 { margin: 0 0 5px; color: #383b46; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.admin-header p { margin-bottom: 0; color: #b195a1; font-size: 11px; line-height: 1.8; }
.admin-header > .demo-badge { flex-shrink: 0; }
.admin-form { display: flex; flex-direction: column; gap: 17px; }
.admin-form .field { margin: 0; }
.admin-form .field > small { font-size: 10px; line-height: 1.7; }
.admin-form .input { background: #fafbfc; font-size: 12px; }
.admin-form .input[type="url"], .admin-form .input[type="email"], .admin-form .input[type="password"] { font-family: inherit; }
.admin-form .input[type="url"] { direction: ltr; }
.admin-form textarea.input { min-height: 86px; }
.admin-form fieldset { min-width: 0; margin: 0; padding: 17px; border: 1px solid #e9ecf2; border-radius: 14px; }
.admin-form fieldset > legend { padding: 0 6px; color: #777e8b; font-size: 12px; font-weight: 650; }
.admin-form fieldset > .field + .field { margin-top: 16px; }
.admin-form > .card { margin: 0 !important; }
.admin-form .section-title { margin-bottom: 15px; font-size: 16px; }
.admin-form .integration-status { margin: 0; }
.admin-form > .primary-button, .admin-form > .secondary-button { width: 100%; }
.admin-form .choice-row { font-size: 12px; }
.admin-form > .row { flex-wrap: wrap; }
.admin-form > .row > button { flex: 1; min-width: 120px; }
.payment-method > .payment-logo.wing { background: #f69a20; color: #fff; font-size: 10px; }
.payment-method[aria-pressed="true"] > span:nth-child(2) { color: #454a56; font-weight: 650; }
.payment-method:last-child { border-bottom: 0; }
.payment-pending { padding: 15px 16px; border: 1px solid #f6e7c7; border-radius: 13px; color: #b18a45; background: #fff8eb; font-size: 12px; line-height: 1.8; }
.payment-pending > svg { width: 20px; height: 20px; color: #d3a44b; margin-right: 5px; }
.payment-pending h2, .payment-pending h3 { margin: 0 0 6px; color: #97743b; font-size: 17px; }
.payment-pending p { margin: 0; font-size: 11px; }
.payment-pending .primary-button, .payment-pending .secondary-button { margin-top: 13px; min-height: 44px; }
.order-status.payment-pending { display: inline-flex; padding: 3px 7px; border: 0; border-radius: 5px; font-size: 10px; line-height: 1.6; white-space: nowrap; }
.status-hero.payment-pending { padding: 22px 20px 27px; border: 0; border-radius: 0; }
.status-hero.payment-pending .status-icon { color: #c2974c; background: #fff0cc; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheet-in { from { opacity: .5; transform: translate(-50%, 40px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 600px) {
  body { background: radial-gradient(ellipse at 20% 10%, #fff4f5 0, transparent 45%), radial-gradient(ellipse at 90% 80%, #e3f4f0 0, transparent 50%), #eceff0; }
  .app-shell { min-height: 100vh; box-shadow: 0 0 0 1px #ffffffb3, 0 10px 90px #2e3e4510; }
  .bottom-nav { box-shadow: 0 -8px 22px #1d283b03; }
  .modal-backdrop { background: #22273455; }
  .sheet { border-radius: 25px 25px 0 0; }
  .promo-card:hover img, .merchant-card:hover .merchant-image { filter: brightness(1.025); }
}

@media (max-width: 374px) {
  .promo-strip { padding-left: 14px; padding-right: 14px; gap: 7px; }
  .promo-card { min-width: 103px; height: 142px; padding: 11px 8px; }
  .promo-title { font-size: 16px; }
  .promo-subtitle { font-size: 9px; }
  .brand-grid { padding-left: 12px; padding-right: 12px; gap: 13px 4px; }
  .brand-mark { width: 49px; height: 49px; border-radius: 14px; }
  .brand-name { font-size: 9px; }
  .merchant-list { padding: 0 14px; }
  .merchant-card { gap: 10px; }
  .merchant-image { width: 86px; height: 93px; flex-basis: 86px; }
  .merchant-name { font-size: 14px; }
  .merchant-meta { gap: 3px 6px; font-size: 9px; }
  .menu-layout { grid-template-columns: 73px minmax(0, 1fr); }
  .menu-products { padding-left: 10px; padding-right: 10px; }
  .product-card { gap: 8px; }
  .product-image { width: 68px; height: 77px; flex-basis: 68px; }
  .product-name { font-size: 12px; }
  .product-bottom .money { font-size: 14px; }
  .quantity-button { width: 44px; }
  .quantity-value { min-width: 10px; }
  .coupon-card { padding-left: 10px; padding-right: 10px; gap: 10px; }
  .coupon-value { flex-basis: 62px; font-size: 30px; }
  .coupon-detail h3, .coupon-detail strong { font-size: 12px; }
  .coupon-action { padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root { --catalog-note: #fff6df; }
.catalog-status { display:block; width:calc(100% - 36px); margin: 4px 18px 14px; text-align:left; font-size:11px; line-height:1.6; }
.store-logo img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.spec-trigger:disabled { opacity:.55; cursor:default; }

/* City selection is separate from delivery-address editing. */
.city-page { min-height:100dvh; background:#fff; padding-bottom:100px; }
.city-content { padding:0 20px 24px; }
.city-intro { margin:26px 0 20px; color:var(--muted); text-align:center; font-size:15px; }
.city-list { width:100%; }
.city-row { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); cursor:pointer; }
.city-label { color:var(--ink); font-size:17px; line-height:1.5; }
.city-label small { display:block; color:var(--muted); font-size:12px; }
.city-radio { appearance:none; flex:0 0 22px; width:22px; height:22px; margin:0 4px 0 0; border:1.5px solid #d4d6dc; border-radius:50%; background:#fff; cursor:pointer; }
.city-radio:checked { border:6px solid var(--brand); }
.city-radio:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.city-more { min-height:60px; width:100%; display:flex; align-items:center; justify-content:space-between; color:var(--ink); font-size:17px; background:#fff; border:0; padding:0; }
.city-more svg { width:18px; height:18px; color:#a3a4ac; }
.city-confirm-bar { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:480px; background:#fff; padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }
.city-confirm { width:100%; min-height:48px; border-radius:8px; font-size:17px; }

/* Saved original Saint 310 homepage graphics and public recommendation rows. */
.home-original-page { background:#f5f5f5; padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px)); }
.home-original-header { background:#fff; }
.home-original-title { background:#fff; }
.home-original-location-row { height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; }
.home-original-location { display:flex; align-items:center; gap:5px; padding:0; font-size:16px; letter-spacing:.2px; }
.home-original-location svg { width:16px; height:19px; color:#ff315c; }
.home-original-caret { font-size:12px; }
.home-original-header-actions { display:flex; align-items:center; gap:12px; }
.home-original-header-actions button { min-width:32px; padding:0; }
.home-original-header-actions svg { width:26px; height:26px; color:#ff315c; }
.home-original-language { display:flex; align-items:center; gap:7px; }
.home-original-language > span { font-size:25px; line-height:28px; }
.home-original-language > img { width:29px; height:29px; object-fit:contain; }
.home-original-language small { color:#333; font-size:11px; }
.home-original-search-row { height:62px; display:flex; align-items:flex-start; gap:10px; padding:10px 9px 12px 14px; }
.home-original-search { height:40px; display:flex; align-items:center; gap:7px; flex:1; min-width:0; border:1px solid #ff315c; border-radius:24px; padding:3px 4px 3px 13px; background:#fff; }
.home-original-search > svg { width:19px; height:19px; color:#a6a6a6; }
.home-original-search input { width:0; flex:1; height:31px; border:0; outline:none; background:transparent; padding:0; font-size:15px; }
.home-original-search button { min-width:73px; min-height:32px; height:32px; border-radius:20px; padding:0 15px; color:#fff; background:#ff315c; font-size:15px; line-height:32px; }
.home-original-grid-button { min-width:26px; min-height:40px; padding:0; color:#ff315c; }
.home-original-grid-button svg { width:26px; height:26px; }
.home-original-campaigns { display:flex; align-items:flex-start; gap:8px; padding:7px 13px 8px; overflow-x:auto; scrollbar-width:none; background:#f4f7f7; scroll-snap-type:x proximity; }
.home-original-campaigns::-webkit-scrollbar { display:none; }
.home-original-campaigns > button { flex:0 0 39.54%; min-width:0; min-height:0; padding:0; overflow:hidden; border-radius:6px; scroll-snap-align:start; }
.home-original-campaigns img { width:100%; height:auto; }
.home-original-brands { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:90px; padding:10px 8px 0; gap:0; background:#fff; border-radius:18px 18px 0 0; }
.home-original-brand { display:flex; align-items:center; flex-direction:column; justify-content:flex-start; min-width:0; min-height:0; padding:0; overflow:hidden; }
.home-original-brand img { width:70px; height:68px; max-width:100%; object-fit:contain; }
.home-original-brand > span { display:block; width:100%; padding:0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; line-height:20px; text-align:center; }
.home-original-pagination { position:relative; height:32px; background:#f5f5f5; }
.home-original-pagination::before { content:''; position:absolute; left:14px; top:8px; width:100px; height:5px; border-radius:4px; background:#dedede; }
.home-original-pagination i { position:absolute; left:calc(50% - 8px); bottom:3px; width:16px; height:4px; background:#ff315c; border-radius:3px; }
.home-original-commerce { display:block; width:calc(100% - 26px); min-height:0; margin:0 18px 14px 8px; padding:0; }
.home-original-commerce img { display:block; width:100%; height:auto; object-fit:contain; }
.home-original-tabs { position:sticky; top:0; z-index:21; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:48px; background:#fff; }
.home-original-tabs button { position:relative; min-width:0; padding:0; color:#989898; font-size:16px; white-space:nowrap; }
.home-original-tabs button.active { color:#222; font-weight:700; }
.home-original-tabs button.active::after { content:''; position:absolute; left:calc(50% - 12px); bottom:4px; width:24px; height:4px; border-radius:3px; background:#ff315c; }
.home-original-filters { position:sticky; top:48px; z-index:20; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:43px; background:#fff; box-shadow:0 2px 4px #00000007; }
.home-original-filters button { min-width:0; padding:0; font-size:14px; }
.home-original-merchant-list { padding:0 12px 12px; background:#f5f5f5; }
.home-original-merchant { margin:0 0 8px; padding:8px; border:0; border-radius:14px; gap:12px; background:#fff; box-shadow:none; }
.home-original-merchant .merchant-image { position:relative; width:clamp(108px,31.1vw,130px); height:clamp(108px,31.1vw,130px); flex:0 0 clamp(108px,31.1vw,130px); border-radius:8px; overflow:hidden; background:#f5f5f5; }
.home-original-merchant .merchant-image img { width:100%; height:100%; object-fit:cover; }
.home-original-merchant .merchant-info { padding-top:0; min-width:0; }
.home-original-merchant .merchant-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0 4px; font-size:16px; font-weight:700; line-height:1.35; }
.home-original-rating { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:11px; line-height:19px; }
.home-original-rating .rating-star { font-size:13px; color:#ff315c; }
.home-original-delivery { display:flex; align-items:center; gap:6px; color:#999; font-size:12px; line-height:22px; }
.home-original-delivery svg { width:13px; height:13px; }
.home-original-merchant .merchant-tags { gap:3px; margin-top:3px; }
.home-original-merchant .tag { padding:1px 3px; font-size:10px; line-height:17px; border-radius:1px; background:#fff0f3; color:#f24469; }
.home-original-card-badge { position:absolute; top:0; left:0; border-radius:7px 0 6px 0; padding:2px 6px; background:#ff315c; color:#fff; font-size:10px; line-height:16px; }
.home-original-city-context { margin:16px; color:#999; font-size:13px; }
.home-original-entry-title { display:flex; align-items:center; gap:15px; padding:20px; background:#fff; }
.home-original-entry-title img { width:70px; height:68px; object-fit:contain; }
.home-original-entry-title h2 { margin:0 0 4px; font-size:20px; }
.home-original-entry-title p { margin:0; color:#999; }
.home-original-activity-art { display:flex; justify-content:center; padding:20px; background:#f5f5f5; }
.home-original-activity-art img { width:auto; height:auto; max-width:100%; max-height:420px; }
.home-original-commerce-art { padding:16px 8px; background:#f5f5f5; }
.home-original-commerce-art img { width:100%; height:auto; }
.home-original-activity-note { padding:24px 20px; color:#777; }
.home-original-activity-note h2 { color:#333; font-size:18px; }
.home-original-activity-note p { line-height:1.8; }

/* Each audited city keeps the sections and number of entry rows it actually shows. */
.home-audited-page { background:#fff; }
.audited-home-entries { padding:10px 13px 15px; background:#fff; }
.audited-categories { display:grid; grid-template-rows:repeat(var(--entry-rows,1),90px); grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/5); column-gap:8px; row-gap:8px; overflow-x:auto; scrollbar-width:none; }
.audited-categories::-webkit-scrollbar { display:none; }
.audited-home-entries .home-original-brand img { width:64px; height:64px; border-radius:12px; object-fit:contain; }
.audited-home-entries .home-original-brand > span { font-size:13px; line-height:24px; }
.audited-brands { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:94px; gap:8px 4px; margin-bottom:14px; }
.home-audited-page .home-original-tabs { grid-template-columns:repeat(var(--home-tab-count,4),minmax(0,1fr)); }
.home-audited-page .audited-single-tab { display:flex; height:48px; align-items:center; padding:0 14px; }
.home-audited-page .audited-single-tab button { font-size:18px; }
.home-audited-page .audited-single-tab button { height:48px; }
.home-audited-page .home-original-campaigns { background:#fff; }
.audited-commerce-carousel { display:flex; gap:0; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.audited-commerce-carousel::-webkit-scrollbar { display:none; }
.audited-commerce-carousel > .home-original-commerce { width:100%; flex:0 0 100%; margin:0; scroll-snap-align:start; }

/* Native horizontal scroll keeps touch and vertical page scrolling independent. */
.home-carousel { position:relative; min-width:0; }
.home-carousel-track { overscroll-behavior-x:contain; }
.home-carousel-track.is-dragging { scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none; }
.home-carousel-track:focus-visible { outline:2px solid #ff315c; outline-offset:-2px; }
.home-carousel-track img { user-select:none; -webkit-user-drag:none; }
.home-carousel-commerce { margin:0 12px 14px; }
.home-carousel-commerce .home-carousel-track { border-radius:6px; }
.home-carousel-controls { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; pointer-events:none; }
.home-carousel-dots { display:flex; align-items:center; pointer-events:auto; }
.home-carousel-dots button { display:grid; place-items:center; width:22px; height:28px; min-width:0; min-height:0; padding:0; }
.home-carousel-dots i { width:5px; height:5px; border-radius:50%; background:#ffffff80; box-shadow:0 0 1px #3338; }
.home-carousel-dots [aria-current="true"] i { background:#fff; }
.home-carousel-toggle { position:absolute; right:6px; bottom:4px; width:24px; height:24px; min-width:0; min-height:0; padding:0; border-radius:50%; color:#fff; background:#0006; pointer-events:auto; opacity:0; }
.home-carousel:hover .home-carousel-toggle,.home-carousel:focus-within .home-carousel-toggle { opacity:1; }
.home-carousel-toggle:focus-visible,.home-carousel-dots button:focus-visible { outline:2px solid #ff315c; outline-offset:-2px; }
@media (hover:none) { .home-carousel-toggle { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .home-carousel-track { scroll-behavior:auto; } }

/* Original consumer account screen; source crops contain no account name. */
.profile-original-page { min-height:100dvh; padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px)); background:#f5f5f6; }
.profile-original-header { background:#fff; }
.profile-original-account { height:160px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px 0 13px; background:#ff315c url('assets/profile-original-20261031/red-food-texture.png') repeat-x center center; background-size:auto 100%; }
.profile-original-account h1 { min-width:0; margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; font-family:Arial,'Microsoft YaHei',sans-serif; font-size:28px; font-weight:700; line-height:36px; }
.profile-original-avatar { width:83px; height:83px; min-width:83px; min-height:83px; flex:0 0 83px; border-radius:50%; overflow:hidden; padding:0; }
.profile-original-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-original-menu { position:relative; z-index:1; min-height:calc(100dvh - 216px); margin-top:-8px; padding:27px 13px 24px; background:#f5f5f6; border-radius:15px 15px 0 0; }
.profile-original-row { width:100%; min-height:58px; display:flex; align-items:center; gap:9px; margin:0 0 13px; padding:12px 13px; border-radius:8px; background:#fff; color:#414141; text-align:left; font-size:15px; line-height:22px; }
.profile-original-row span { min-width:0; flex:1; }
.profile-original-row > svg { width:18px; height:18px; color:#343434; }
.profile-original-row.profile-original-coupon { min-height:70px; padding-left:17px; font-size:17px; font-weight:700; }
.profile-original-coupon > img { width:29px; height:30px; object-fit:contain; }
.wallet-original-page .wallet-hero { margin-top:5px; }
.wallet-original-page [data-wallet-balance] { margin-bottom:0; }
.settings-original-page .content > .card { margin-bottom:15px; }

/* Original order empty illustration: lossless screenshot crop [200,350,218,150]. */
.orders-original-page { background:#f3f3f5; }
.orders-original-header { background:#fff; }
/* One WOWNOW wordmark contract for the three main screens. Host controls are not imitated. */
.home-original-title,
.orders-original-header,
.profile-original-header { position:relative; height:64px; padding:0; display:flex; align-items:center; justify-content:center; }
.home-original-title strong,
.orders-original-header h1,
.profile-original-header strong { position:absolute; left:0; right:0; margin:0; padding:0; text-align:center; color:#303030; font-family:Arial,'Microsoft YaHei',sans-serif; font-size:20px; font-weight:700; line-height:26px; letter-spacing:normal; pointer-events:none; }
.root-header-controls { position:absolute; z-index:1; right:8px; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:116px; height:36px; overflow:hidden; border:1px solid #ebebeb; border-radius:20px; background:#fff; color:#282828; }
.root-header-controls button { display:grid; place-items:center; width:100%; height:34px; min-width:0; min-height:0; padding:0; }
.root-header-controls button + button { border-left:1px solid #e2e2e2; }
.root-header-controls svg { width:22px; height:22px; fill:currentColor; }
.root-header-controls button:hover { background:#f6f6f6; }
.root-header-controls button:focus-visible { outline-offset:-3px; }
.root-menu { display:grid; gap:4px; }
.root-menu button { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 12px; text-align:left; border-radius:10px; }
.root-menu button:hover { background:#f5f5f6; }
.root-collapsed-page { display:grid; place-items:center; padding:24px; background:#f5f5f6; }
.root-collapsed-panel { display:grid; justify-items:center; gap:14px; width:min(100%,320px); padding:28px 20px 18px; border-radius:20px; background:#fff; box-shadow:0 8px 30px #00000008; }
.root-collapsed-panel > strong { color:#303030; font:700 20px/26px Arial,'Microsoft YaHei',sans-serif; }
.root-collapsed-panel > p { margin:0; color:#92939c; }
.root-collapsed-panel > .primary-button { min-width:160px; }
@media (max-width:379px) { .root-header-controls { width:100px; } }

/* Language picker uses vector flags at every device pixel density. */
.language-sheet { padding:14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:15px 15px 0 0; }
.language-sheet .sheet-header { margin-bottom:13px; }
.language-sheet .sheet-header h2 { font-size:18px; line-height:26px; }
.language-choice { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 0; text-align:left; }
.language-flag { display:block; flex:0 0 34px; width:34px; height:25px; object-fit:cover; border-radius:2px; }
.language-flag.language-flag-round { width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:left center; }
.language-choice .language-name { flex:1; min-width:0; font-size:16px; line-height:24px; }
.language-radio { display:flex; align-items:center; justify-content:center; flex:0 0 21px; width:21px; height:21px; border:2px solid var(--brand); border-radius:50%; color:#fff; }
.language-choice.selected .language-radio { background:var(--brand); }
.language-radio svg { width:15px; height:15px; stroke-width:3; }
.language-sheet .sheet-footer { margin-top:13px; padding-top:0; border-top:0; }
.language-cancel { width:100%; min-height:46px; border-radius:8px; background:#f5f5f6; font-size:16px; }
.home-original-language > .language-flag { width:29px; height:22px; }
.home-original-language > .language-flag-round { flex:0 0 29px; width:29px; height:29px; aspect-ratio:1; object-fit:cover; object-position:left center; border-radius:50%; }
html:lang(km) .home-original-tabs button,
html:lang(vi) .home-original-tabs button,
html:lang(th) .home-original-tabs button,
html:lang(en) .home-original-tabs button { font-size:12px; line-height:17px; padding:4px 3px; white-space:normal; }
html:lang(km) .orders-original-tab,
html:lang(vi) .orders-original-tab,
html:lang(th) .orders-original-tab,
html:lang(en) .orders-original-tab { font-size:12px; white-space:nowrap; line-height:17px; }
html:lang(km) .home-original-filters button,
html:lang(vi) .home-original-filters button,
html:lang(th) .home-original-filters button,
html:lang(en) .home-original-filters button { font-size:12px; line-height:17px; }
.orders-original-tabs { display:flex; align-items:stretch; justify-content:flex-start; gap:8px; height:42px; padding:0 12px; background:#fff; overflow-x:auto; scrollbar-width:none; }
.orders-original-tab { position:relative; flex:0 0 auto; min-width:0; min-height:42px; padding:0 6px; color:#999; background:transparent; border-radius:0; font-size:15px; font-weight:400; line-height:42px; white-space:nowrap; }
.orders-original-tab.active { color:#444; }
.orders-original-tab.active::after { position:absolute; content:''; bottom:0; left:calc(50% - 10px); width:20px; height:4px; border-radius:4px; background:#ff315c; }
.orders-original-content { padding:0 0 16px; }
.orders-original-content > .order-card { margin:14px 14px 0; }
.orders-original-empty { padding-top:clamp(96px,27.4vw,132px); text-align:center; }
.orders-original-empty img { width:42%; max-width:202px; height:auto; margin:0 auto; }
.orders-original-empty p { margin:50px 0 0; color:#999; font-size:15px; line-height:24px; }

/* Source-observed offer badges stay separate from the high-resolution brand marks. */
.home-original-brand-mark { position:relative; width:70px; height:68px; max-width:100%; flex:0 0 68px; }
.home-original-brand-mark > img { display:block; }
.home-original-brand-badge { position:absolute; top:0; left:0; display:flex; flex-direction:column; justify-content:center; width:28px; height:28px; padding:2px; border-radius:50%; background:#ff173c; color:#fff; font-size:9px; font-weight:700; line-height:10px; text-align:center; box-shadow:0 1px 2px #00000012; }
.home-original-brand-badge i { display:block; font-style:normal; white-space:nowrap; }

/* Product detail keeps its own source-style cards and rectangular add control. */
.product-detail-page { background:#f5f5f6; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.product-detail-page .product-detail-hero { height:auto; aspect-ratio:1; background:#f3f3f4; }
.product-detail-page .product-detail-hero > img { position:absolute; inset:0; width:100%; height:100%; }
.product-detail-page > .product-detail-content { margin-top:0; padding:0 10px 24px; }
.product-detail-page .product-detail-summary { margin-top:0; padding:17px 14px 14px; border:0; border-radius:0 0 12px 12px; box-shadow:none; }
.product-detail-page .product-detail-summary h1 { margin:0 0 9px; font-size:20px; line-height:1.4; font-weight:700; }
.product-detail-page .product-detail-sales { margin:0 0 12px; color:#aaa; font-size:12px; line-height:18px; }
.product-detail-page .product-detail-offers { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 11px; }
.product-detail-page .product-detail-offers > span { padding:2px 5px; border-radius:3px; background:#fff0f3; color:#ff315c; font-size:10px; line-height:16px; }
.product-detail-page .product-detail-price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.product-detail-page .product-detail-usd { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; min-width:0; }
.product-detail-page .product-detail-usd .money { font-size:28px; line-height:36px; font-weight:750; letter-spacing:-.5px; }
.product-detail-page .product-detail-usd del { color:#aaa; font-size:12px; }
.product-detail-page .product-detail-add { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; min-width:82px; min-height:34px; padding:6px 10px; border-radius:7px; background:#ff315c; color:#fff; font-size:14px; line-height:22px; font-weight:600; }
.product-detail-page .product-detail-add svg { width:18px; height:18px; stroke-width:2.5; }
.product-detail-page .product-detail-add:disabled { max-width:160px; background:#ffb0c0; opacity:1; }
.product-detail-page .product-detail-local-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:2px; color:#999; font-size:12px; line-height:20px; }
.product-detail-page .product-detail-local-price small { font-size:10px; }
.product-detail-page .product-detail-reviews { margin-top:10px; padding:15px 14px 20px; border:0; border-radius:12px; box-shadow:none; }
.product-detail-page .product-detail-reviews h2 { margin:0; font-size:16px; line-height:24px; font-weight:600; }
.product-detail-page .product-detail-review-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; padding:24px 0 8px; }
.product-detail-page .product-detail-review-empty-image { width:150px; height:115px; object-fit:contain; }
.product-detail-page .product-detail-review-empty-icon { display:flex; align-items:center; justify-content:center; width:95px; height:95px; border-radius:50%; background:#fff2f5; color:#ffc0cf; }
.product-detail-page .product-detail-review-empty-icon svg { width:54px; height:54px; stroke-width:1.2; }
.product-detail-page .product-detail-review-empty p { margin:13px 0 0; color:#aaa; font-size:12px; line-height:20px; }
.product-detail-page .product-detail-review { padding:16px 0; border-bottom:1px solid #f1f1f2; }
.product-detail-page .product-detail-review:last-child { padding-bottom:0; border-bottom:0; }
.product-detail-page .product-detail-review-author { display:flex; align-items:center; gap:8px; color:#555; }
.product-detail-page .product-detail-review-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.product-detail-page .product-detail-review-author strong { min-width:0; flex:1; overflow-wrap:anywhere; font-size:12px; font-weight:500; }
.product-detail-page .product-detail-review-author time { color:#aaa; font-size:11px; }
.product-detail-page .product-detail-review-stars { margin-top:7px; color:#ffb020; font-size:12px; letter-spacing:1px; }
.product-detail-page .product-detail-review-reaction { margin-top:7px; color:#999; font-size:11px; line-height:18px; }
.product-detail-page .product-detail-review > p { margin:8px 0 0; color:#555; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.product-detail-page .product-detail-review-photos { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.product-detail-page .product-detail-review-photos img { width:80px; height:80px; object-fit:cover; border-radius:6px; }
.product-detail-page > .cart-bar { bottom:calc(10px + env(safe-area-inset-bottom)); width:calc(100% - 20px); max-width:460px; min-height:58px; padding-left:14px; box-shadow:none; }
.product-detail-page > .cart-bar .cart-icon { margin-right:7px; }
.product-detail-page > .cart-bar .cart-total strong { font-size:18px; }
.product-detail-page > .cart-bar .checkout-button { min-width:110px; min-height:58px; padding:10px 15px; }
.product-detail-page > .cart-bar .cart-icon { position:relative; width:65px; min-width:65px; height:58px; margin-left:-13px; }
.product-detail-page > .cart-bar .cart-icon > svg { visibility:hidden; }
.product-detail-page > .cart-bar .cart-icon::before { content:""; position:absolute; left:-2px; bottom:0; width:74px; height:74px; background:url("assets/product-cart-delivery.png") center bottom / contain no-repeat; pointer-events:none; }
.product-detail-page > .cart-bar .checkout-button:disabled { background:transparent; color:#aaacb7; }
.product-menu-offers { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.product-menu-offers:empty { display:none; }
.product-menu-offers > span { color:#ff315c; background:#fff0f3; border-radius:3px; padding:2px 4px; font-size:10px; line-height:16px; }
.product-menu-local-price { display:flex; flex-wrap:wrap; gap:6px; color:#999; font-size:11px; margin-top:3px; }
.product-menu-local-price small { font-size:10px; }