/* bevvoo storefront — mobile-first app UI. --brand is set per shop. */
:root {
    --brand: #1668f2;
    --brand-soft: color-mix(in srgb, var(--brand) 12%, #fff);
    --brand-dark: color-mix(in srgb, var(--brand) 80%, #000);
    --navy: #1d2a4d;
    --text: #1d2a4d;
    --muted: #6b7591;
    --line: #e7ebf3;
    --bg: #f4f6fb;
    --card: #fff;
    --yellow: #f5b301;
    --pink: #f43f7a;
    --green: #16a34a;
    --blue: #1668f2;
    --radius: 18px;
    --shadow: 0 6px 20px rgba(29, 42, 77, .08);
    --tabbar-h: 64px;
    --app-w: 640px;
    --head: 'Prompt', 'Noto Sans Thai', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Noto Sans Thai', sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: #e9edf5; }
body > * { max-width: var(--app-w); margin-left: auto; margin-right: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--head); margin: 0; line-height: 1.3; }
p { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.text-yellow { color: var(--yellow); } .text-pink { color: var(--pink); } .text-green { color: var(--green); } .text-blue { color: var(--blue); }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.app-main { background: var(--bg); min-height: calc(100vh - 56px); padding-bottom: calc(var(--tabbar-h) + 80px + env(safe-area-inset-bottom)); }
.wrap { padding: 14px 14px 0; display: grid; gap: 14px; }
.wrap > *, .plist > *, .prow-body, .block { min-width: 0; }

/* header */
.app-header { position: sticky; top: 0; z-index: 30; height: 56px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.hdr-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-family: var(--head); font-weight: 600; font-size: 17px; }
.hdr-brand img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.hdr-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-brand img + span { display: none; }
.hdr-title { flex: 1; font-size: 17px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; position: relative; color: var(--navy); }
.hdr-btn:active { background: var(--bg); }
.badge-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.badge-count.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.4); } }

/* flash + notices */
.flash { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border-left: 4px solid var(--brand); font-size: 14px; }
.flash span { flex: 1; }
.flash-success { border-color: var(--green); } .flash-error { border-color: var(--pink); }
.flash-x { border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.notice { padding: 12px 14px; border-radius: 14px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.notice i { margin-top: 3px; }
.notice-yellow { background: #fff6dc; color: #8a6200; }
.notice-pink { background: #ffe9f0; color: #b4134b; }
.notice-green { background: #e5f7ec; color: #12753a; }
.notice-blue { background: #e8f0ff; color: #1546a8; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .1s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-brand { background: var(--brand); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn-soft { background: var(--brand-soft); color: var(--brand-dark); }
.btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--navy); }
.btn-line { background: #06c755; color: #fff; }
.btn-fb { background: #1877f2; color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-block { width: 100%; }
.link-btn { border: 0; background: none; color: var(--brand); cursor: pointer; font-size: 14px; padding: 4px; }

/* cards */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card h2 { font-size: 17px; margin-bottom: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head a { color: var(--brand); font-size: 14px; font-weight: 600; }
.big-ic { font-size: 44px; color: var(--brand); margin-bottom: 10px; }

/* cover + home */
.cover { position: relative; min-height: 210px; display: flex; align-items: flex-end; color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%), var(--cover, linear-gradient(135deg, var(--brand), var(--brand-dark))) center / cover no-repeat; }
.cover-inner { padding: 18px; width: 100%; }
.cover-logo { height: 44px; width: auto; background: #fff; padding: 6px 10px; border-radius: 12px; margin-bottom: 10px; }
.cover h2 { font-size: 24px; }
.cover p { font-size: 14px; opacity: .92; margin-top: 2px; }
.open-chip { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 999px; font-size: 12px; }
.open-chip i { font-size: 8px; color: #ff6b8b; }
.open-chip.is-open i { color: #3ee07f; }

.member-card { display: block; border-radius: 22px; padding: 16px; color: #fff; margin-top: -40px; position: relative; z-index: 2;
    background: radial-gradient(circle at 90% 0%, rgba(255,255,255,.25), transparent 45%), linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: var(--shadow); }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-who { flex: 1; min-width: 0; }
.mc-who small { display: block; opacity: .8; font-size: 12px; }
.mc-who strong { font-family: var(--head); font-size: 18px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; background: rgba(255,255,255,.14); border-radius: 14px; }
.mc-stats div { text-align: center; padding: 10px 4px; }
.mc-stats div + div { border-left: 1px solid rgba(255,255,255,.2); }
.mc-stats strong { font-family: var(--head); font-size: 20px; display: block; }
.mc-stats i { font-size: 20px; display: block; line-height: 30px; }
.mc-stats small { font-size: 12px; opacity: .85; }
.mc-next { font-size: 12px; margin-top: 10px; opacity: .9; }
.join-card { margin-top: -40px; position: relative; z-index: 2; background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.join-card strong { font-family: var(--head); font-size: 17px; }
.join-card p { color: var(--muted); font-size: 13px; }

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.7); }
.avatar-ph { display: grid; place-items: center; background: rgba(255,255,255,.25); font-family: var(--head); font-weight: 700; font-size: 18px; }
.card .avatar-ph, .profile-head .avatar-ph { background: var(--brand-soft); color: var(--brand); }
.avatar-lg { width: 70px; height: 70px; font-size: 26px; margin: 0 auto 8px; }

.tier { display: inline-flex; gap: 5px; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: var(--head); background: #fff; }
.tier-blue { color: var(--brand); } .tier-silver { color: #6b7280; } .tier-gold { color: #c08a00; background: #fff6d6; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #fff; border-radius: var(--radius); padding: 14px 8px; box-shadow: var(--shadow); }
.quick a { display: grid; justify-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-align: center; }
.q-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 20px; }
.q-yellow { background: #fff3cf; color: #d99a00; } .q-pink { background: #ffe5ee; color: var(--pink); }
.q-blue { background: #e4eeff; color: var(--blue); } .q-green { background: #e2f6ea; color: var(--green); }

.order-now { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 16px 20px; border-radius: 20px; color: #fff;
    background: linear-gradient(120deg, var(--brand), var(--brand-dark)); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 40%, transparent); }
.order-now span { font-family: var(--head); font-size: 22px; font-weight: 700; }
.order-now small { grid-row: 2; opacity: .9; font-size: 13px; }
.order-now > i { grid-row: 1 / 3; grid-column: 2; font-size: 22px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }

.block-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.block-head h2 { font-size: 18px; flex: 1; }
.block-head a { color: var(--brand); font-size: 13px; font-weight: 600; }
.block-head small { color: var(--muted); font-size: 12px; }
.countdown { font-family: var(--head); font-weight: 700; color: #fff; background: var(--pink); padding: 2px 10px; border-radius: 8px; font-size: 13px; }

.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }
.ptile { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ptile-img { aspect-ratio: 1; background: var(--brand-soft); }
.ptile-img img, .ptile-img .thumb-ph { width: 100%; height: 100%; object-fit: cover; }
.ptile h3 { font-size: 14px; font-weight: 600; padding: 8px 10px 0; font-family: 'Noto Sans Thai', sans-serif; line-height: 1.35; }
.ptile-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px 10px; margin-top: auto; }
.thumb-ph { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 30px; }
.is-out { opacity: .55; }

.price { font-family: var(--head); font-weight: 700; color: var(--brand); font-size: 17px; }
.price-old { color: var(--muted); font-size: 12px; }
.add { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.add:active { transform: scale(.9); }
.soldout { font-size: 12px; font-weight: 700; color: #fff; background: #9aa3b5; padding: 3px 10px; border-radius: 999px; }

.promo-scroll { grid-auto-columns: 82%; }
.promo { border-radius: 18px; padding: 16px; display: grid; grid-template-columns: 1fr 80px; gap: 10px; align-items: center; min-height: 110px; }
.promo h3 { font-size: 16px; }
.promo p { font-size: 12px; opacity: .85; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.promo img { width: 80px; height: 80px; border-radius: 14px; object-fit: cover; }
.promo-blue { background: linear-gradient(135deg, #e6efff, #cfe0ff); color: #12408f; }
.promo-pink { background: linear-gradient(135deg, #ffeef4, #ffd6e4); color: #a3123f; }
.promo-yellow { background: linear-gradient(135deg, #fff8e1, #ffe8a6); color: #7a5600; }
.promo-green { background: linear-gradient(135deg, #e9f8ef, #c9efd8); color: #0f6a33; }

.again-list { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 14px; }
.again { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.again + .again { border-top: 1px solid var(--line); }
.again > div { flex: 1; min-width: 0; }
.again strong { display: block; font-size: 14px; }
.again small { color: var(--muted); font-size: 12px; }

.review { margin: 0; background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); grid-auto-columns: 70%; }
.hscroll .review { min-width: 0; }
.review .stars { color: var(--yellow); letter-spacing: 2px; }
.review .stars span { color: #d9dde6; }
.review blockquote { margin: 6px 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; margin-bottom: 6px; }
.review figcaption { font-size: 12px; color: var(--muted); }

.shop-info { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.shop-info h2 { font-size: 16px; margin-bottom: 8px; }
.shop-info li { display: flex; gap: 10px; font-size: 14px; padding: 4px 0; }
.shop-info ul { list-style: none; margin: 0; padding: 0; }
.shop-info li i { width: 18px; color: var(--brand); margin-top: 3px; }
.shop-info a { color: var(--brand); }
.powered { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.powered a { color: var(--brand); font-weight: 600; }

/* menu */
.menu-top { position: sticky; top: 56px; z-index: 20; background: #fff; padding: 10px 14px 0; border-bottom: 1px solid var(--line); }
.search { position: relative; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; padding: 10px 14px 10px 40px; border-radius: 999px; border: 0; background: var(--bg); outline: none; }
.chips-row { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a { white-space: nowrap; padding: 8px 12px 10px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.cat-tabs a.on { color: var(--brand); border-color: var(--brand); }
.cat-section { scroll-margin-top: 190px; }
.cat-section h2 { font-size: 18px; margin: 4px 0 10px; display: flex; gap: 8px; align-items: center; }
.cat-section h2 i { color: var(--brand); }
.cat-section h2 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.plist { display: grid; gap: 10px; }
.prow { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow); }
.prow-img { position: relative; }
.prow-img img, .prow-img .thumb-ph { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.flash-badge { position: absolute; left: 4px; top: 4px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.prow-body { display: flex; flex-direction: column; min-width: 0; }
.prow-body h3 { font-size: 15px; font-family: 'Noto Sans Thai', sans-serif; font-weight: 600; }
.prow-body p { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { font-size: 10px; padding: 1px 7px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.tag-bestseller, .tag-spicy { background: #ffe9ee; color: #c8174f; }
.tag-recommended { background: var(--brand-soft); color: var(--brand-dark); }
.tag-vegetarian { background: #e5f7ec; color: #12753a; }
.tag-less_sweet { background: #fff4d8; color: #8a6200; }
.tag-new { background: #efe8ff; color: #6232c9; }
.prow-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.flash-left { margin: -6px 0 0 6px; }

/* sheet (product options) */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; max-width: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 22, 40, .5); }
.sheet-card { position: relative; width: 100%; max-width: var(--app-w); max-height: 92vh; background: #fff; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
.sheet-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; box-shadow: var(--shadow); }
.sheet-card .ps-img img, .sheet-card .ps-img .thumb-ph { width: 100%; height: 220px; object-fit: cover; border-radius: 24px 24px 0 0; }
.ps-body { padding: 16px; overflow-y: auto; flex: 1; }
.ps-name { font-size: 20px; }
.ps-desc { color: var(--muted); font-size: 14px; margin-top: 2px; }
.ps-price { margin-top: 6px; }
.ps-group { margin-top: 16px; }
.ps-group-title { display: flex; justify-content: space-between; font-family: var(--head); font-weight: 600; margin-bottom: 8px; }
.ps-group-title small { font-family: 'Noto Sans Thai', sans-serif; font-weight: 500; color: var(--muted); font-size: 12px; }
.ps-group-title .req { color: var(--pink); }
.opt { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.opt input { accent-color: var(--brand); width: 18px; height: 18px; }
.opt span { flex: 1; }
.opt em { font-style: normal; color: var(--muted); font-size: 13px; }
.ps-note { display: grid; gap: 6px; margin-top: 16px; font-weight: 600; font-family: var(--head); }
.ps-note input { font-family: 'Noto Sans Thai', sans-serif; font-weight: 400; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); outline: none; }
.ps-foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ps-foot .btn { flex: 1; }
.ps-fav { position: absolute; top: 12px; left: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; color: var(--muted); box-shadow: var(--shadow); }
.ps-fav.on { color: var(--pink); }

.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--brand); font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.qty input, .qty span { width: 34px; text-align: center; border: 0; font-weight: 700; background: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-sm button { width: 30px; height: 30px; font-size: 15px; }

/* bottom bars */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar a { display: grid; place-content: center; justify-items: center; gap: 2px; font-size: 11px; color: #9aa3b5; }
.tabbar a i { font-size: 19px; }
.tabbar a.active { color: var(--brand); font-weight: 600; }
.cart-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 35; max-width: calc(var(--app-w) - 24px);
    background: var(--brand); color: #fff; border-radius: 16px; padding: 14px 18px; display: flex; justify-content: space-between; font-family: var(--head); font-weight: 600;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 45%, transparent); }
.toasts { position: fixed; left: 0; right: 0; top: 66px; z-index: 90; display: grid; justify-items: center; gap: 6px; pointer-events: none; max-width: none; }
.toast { background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); animation: up .2s; pointer-events: auto; max-width: calc(100% - 24px); }
.toast.err { background: var(--pink); }
.toast a { color: #ffd84d; text-decoration: underline; }

/* cart / checkout */
.cline { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cline-img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; font-size: 22px; }
.cline-body { display: grid; gap: 2px; min-width: 0; }
.cline-body small { color: var(--muted); font-size: 12px; }
.cline-body .note { color: #8a6200; }
.cline-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; outline: none; }
.input:focus { border-color: var(--brand); }
textarea.input { resize: vertical; }
.coupon-form { display: flex; gap: 8px; }
.coupon-form .input { flex: 1; text-transform: uppercase; }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #e5f7ec; color: #12753a; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.my-coupons { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.coupon-chip { border: 1.5px dashed color-mix(in srgb, var(--brand) 50%, #fff); background: var(--brand-soft); border-radius: 12px; padding: 8px 12px; text-align: left; cursor: pointer; min-width: 160px; display: grid; }
.coupon-chip b { color: var(--brand-dark); font-family: var(--head); }
.coupon-chip span { font-size: 11px; color: var(--muted); }
.coupon-chip[disabled] { opacity: .5; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.seg input, .radio-card input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; cursor: pointer; }
.seg input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.radio-card { position: relative; display: block; margin-bottom: 8px; cursor: pointer; }
.radio-card span { display: grid; padding: 12px 14px 12px 42px; border-radius: 14px; border: 1.5px solid var(--line); position: relative; }
.radio-card span::before { content: ''; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c3cada; }
.radio-card input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.radio-card input:checked + span::before { border: 5px solid var(--brand); }
.radio-card small { color: var(--muted); font-size: 12px; }
.new-address { display: grid; gap: 8px; margin-bottom: 8px; }
.sub { font-size: 15px; margin: 14px 0 8px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0 12px; }
.check input { accent-color: var(--brand); width: 18px; height: 18px; }
.check a { color: var(--brand); }
.totals { display: grid; gap: 6px; font-size: 14px; }
.totals > div { display: flex; justify-content: space-between; }
.totals .grand { font-family: var(--head); font-weight: 700; font-size: 20px; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.totals .grand span:last-child { color: var(--brand); }
.earn { font-size: 13px; color: #8a6200; background: #fff6dc; padding: 8px 12px; border-radius: 12px; margin-top: 6px; }
.sticky-cta { position: sticky; bottom: calc(var(--tabbar-h) + 10px); z-index: 5; }
.link-btn.text-pink { color: var(--pink); }

/* order */
.order-hero { text-align: center; }
.order-hero small { color: var(--muted); }
.queue { font-family: var(--head); font-weight: 700; font-size: 54px; color: var(--brand); line-height: 1.1; }
.order-hero .muted { margin-top: 8px; }
.pill { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-yellow { background: #fff3cf; color: #8a6200; } .pill-blue { background: #e4eeff; color: #1546a8; }
.pill-green { background: #e2f6ea; color: #12753a; } .pill-gray { background: #eef0f4; color: #5b6475; } .pill-pink { background: #ffe5ee; color: #b4134b; }
.timeline { list-style: none; margin: 0; padding: 14px 10px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.timeline li { display: grid; justify-items: center; gap: 6px; font-size: 11px; text-align: center; color: #a3abbd; position: relative; }
.timeline li span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eef1f7; z-index: 1; }
.timeline li + li::before { content: ''; position: absolute; top: 19px; right: 50%; width: 100%; height: 3px; background: #eef1f7; }
.timeline li.done, .timeline li.now { color: var(--navy); }
.timeline li.done span { background: var(--brand-soft); color: var(--brand); }
.timeline li.done::before, .timeline li.now::before { background: var(--brand) !important; }
.timeline li.now span { background: var(--brand); color: #fff; box-shadow: 0 0 0 6px var(--brand-soft); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 8%, transparent); } }
.live-note { margin-top: -6px; }
.live-note i { font-size: 8px; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.pay-box h2 { text-align: center; }
.pp-card { display: grid; justify-items: center; gap: 6px; border: 2px solid #113566; border-radius: 18px; padding: 14px; margin: 6px auto 8px; max-width: 290px; }
.pp-logo { width: 160px; }
.qr { background: #fff; padding: 8px; }
.qr img, .qr canvas { width: 220px !important; height: 220px !important; }
.pp-card small { color: var(--muted); }
.bank { display: grid; gap: 10px; background: var(--bg); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.bank small { display: block; color: var(--muted); font-size: 12px; }
.bank b { font-family: var(--head); font-size: 17px; }
.slip-form { display: grid; gap: 10px; margin-top: 10px; }
.file-drop { display: block; border: 2px dashed var(--line); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); cursor: pointer; position: relative; margin-bottom: 10px; }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop img { max-height: 240px; margin: 0 auto 8px; border-radius: 10px; }
.oline { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.oline small { display: block; color: var(--muted); font-size: 12px; }
.oline .note { color: #8a6200; }
.review-cta { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #fff8e1, #ffeab0); }
.review-cta > i:first-child { font-size: 26px; color: var(--yellow); }
.review-cta div { flex: 1; display: grid; }
.review-cta small { color: #8a6200; font-size: 12px; }
.order-card { display: block; }
.oc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.oc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* points / stamps / missions */
.points-hero { text-align: center; color: #fff; border-radius: 22px; padding: 22px 16px; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.25), transparent 40%), linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.points-hero small { opacity: .85; }
.big-num { font-family: var(--head); font-size: 52px; font-weight: 700; line-height: 1.1; }
.points-hero p { font-size: 13px; opacity: .9; margin-top: 8px; }
.points-hero > i { font-size: 36px; margin-bottom: 6px; }
.points-hero h2 { font-size: 22px; }
.expire-warn { margin-top: 10px; background: rgba(255,255,255,.18); border-radius: 12px; padding: 8px; font-size: 13px; }
.bar { height: 10px; border-radius: 999px; background: #eef1f7; overflow: hidden; margin: 8px 0 4px; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #ffc83d); }
.redeem-code { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 2px dashed var(--pink); border-radius: 14px; margin-bottom: 8px; }
.redeem-code small { display: block; color: var(--muted); font-size: 12px; }
.redeem-code span { font-family: var(--head); font-size: 26px; font-weight: 700; color: var(--pink); letter-spacing: 3px; }
.rewards { display: grid; gap: 10px; }
.reward { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow); }
.reward img, .reward .thumb-ph { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; font-size: 22px; }
.reward small { display: block; color: var(--muted); font-size: 12px; }
.reward .cost { font-size: 12px; font-weight: 700; color: #c08a00; }
.reward.is-locked { opacity: .65; }
.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ways a { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.ways i { font-size: 20px; color: var(--brand); margin-bottom: 4px; }
.ways small { color: var(--muted); font-size: 12px; }
.ledger { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ledger small { display: block; color: var(--muted); font-size: 12px; }
.ledger .right { text-align: right; white-space: nowrap; font-weight: 700; }
.tier-progress b { font-family: var(--head); }
.stamp-card { background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--shadow); border-top: 6px solid var(--brand); }
.sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sc-head img { height: 36px; width: auto; }
.sc-head div { flex: 1; display: grid; }
.sc-head small { color: var(--muted); font-size: 12px; }
.sc-count { font-family: var(--head); font-weight: 700; color: var(--brand); font-size: 18px; }
.stamps { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 10px; margin-bottom: 12px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #cdd4e3; display: grid; place-items: center; color: #b3bbcc; font-family: var(--head); font-weight: 700; }
.stamp.on { border: 0; background: var(--brand); color: #fff; font-size: 20px; transform: rotate(-8deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.stamp-card > p { font-size: 13px; color: var(--muted); text-align: center; }
.mission { display: flex; gap: 12px; align-items: center; }
.m-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 18px; flex: none; }
.m-body { flex: 1; min-width: 0; }
.mission.is-done .m-ic { background: #e2f6ea; color: var(--green); }
.small-hero { padding: 18px 16px; }

/* coupons */
.coupons { display: grid; gap: 10px; }
.coupon { display: grid; grid-template-columns: 96px 1fr; background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.cp-left { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; text-align: center; padding: 10px; font-family: var(--head); font-size: 17px; border-right: 2px dashed rgba(255,255,255,.6); }
.cp-right { padding: 10px 12px; display: grid; gap: 2px; }
.cp-right small { color: var(--muted); font-size: 12px; }
.code { justify-self: start; font-family: var(--head); font-weight: 700; letter-spacing: 1px; color: var(--brand); background: var(--brand-soft); padding: 2px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.promo-big { border-radius: 18px; overflow: hidden; margin-bottom: 10px; box-shadow: var(--shadow); }
.promo-big img { width: 100%; height: 160px; object-fit: cover; }
.promo-big div { padding: 14px; }
.promo-big h3 { font-size: 18px; }
.promo-big p { font-size: 14px; margin-top: 4px; }
.promo-big small { display: block; margin-top: 6px; opacity: .8; }

/* card / account */
.digital-card { border-radius: 24px; padding: 18px; color: #fff; box-shadow: var(--shadow); background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.tier-bg-silver { background: linear-gradient(135deg, #7f8796, #4b5262); }
.tier-bg-gold { background: linear-gradient(135deg, #d9a20b, #8a5a00); }
.dc-head { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 600; }
.dc-head img { height: 32px; width: auto; background: #fff; padding: 4px 8px; border-radius: 8px; }
.dc-head span:nth-child(2) { flex: 1; }
.dc-tier { background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.dc-qr { display: grid; place-items: center; margin: 18px 0 8px; }
.dc-qr .qr { border-radius: 16px; padding: 12px; }
.dc-code { text-align: center; font-family: var(--head); font-size: 20px; letter-spacing: 3px; }
.dc-foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.25); }
.dc-foot small { display: block; opacity: .8; font-size: 11px; }
.dc-foot b { font-family: var(--head); }
.profile-head { display: flex; gap: 14px; align-items: center; }
.profile-head .avatar { border-color: var(--line); margin: 0; }
.profile-head div { display: grid; gap: 2px; justify-items: start; }
.profile-head small { color: var(--muted); font-size: 12px; }
.profile-head .tier { background: var(--brand-soft); }
.menu-list { padding: 4px 16px; }
.menu-list a { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.menu-list a:last-child { border: 0; }
.menu-list a i { width: 20px; color: var(--brand); text-align: center; }
.menu-list a b { margin-left: auto; color: var(--brand); font-family: var(--head); }
.field { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.field span { font-weight: 600; }
.field em, .err { color: var(--pink); font-size: 12px; font-style: normal; }
.addr { display: flex; gap: 10px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.addr small { display: block; color: var(--muted); font-size: 12px; }
.copy-box { display: flex; gap: 8px; }
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share-row .btn { font-size: 14px; padding: 10px; }

/* login */
.login-card { text-align: center; display: grid; gap: 12px; }
.login-logo { height: 54px; width: auto; margin: 0 auto; }
.login-card h2 { font-size: 22px; margin: 0; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.phone-form, .otp-form, .demo-line { display: grid; gap: 10px; }
.otp-input { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 700; }
.login-card a:not(.btn) { color: var(--brand); }
.star-input { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; margin: 6px 0 14px; }
.star-input input { position: absolute; opacity: 0; }
.star-input label { font-size: 40px; color: #d9dde6; cursor: pointer; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--yellow); }
.checkin-box { display: grid; gap: 10px; justify-items: center; }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.empty i { font-size: 46px; color: color-mix(in srgb, var(--brand) 50%, #fff); }

.closed-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; background: #fff; }
.closed-page img { height: 70px; width: auto; }
.closed-page p { color: var(--muted); }

@media (min-width: 660px) {
    body { background: #e9edf5; }
    .app-header, .app-main, .tabbar, .flash { box-shadow: 0 0 0 1px var(--line); }
    .tabbar { left: 50%; right: auto; width: var(--app-w); transform: translateX(-50%); }
    .cart-bar { left: 50%; right: auto; width: calc(var(--app-w) - 24px); transform: translateX(-50%); }
    .hscroll { grid-auto-columns: 30%; }
    .promo-scroll { grid-auto-columns: 60%; }
}

/* QR login (computer ← LINE app on phone) */
.qr-login { position: relative; display: flex; gap: 18px; align-items: center; padding: 16px; border: 1.5px dashed #b7e8c9; border-radius: 16px; background: #f3fcf6; text-align: left; }
.qr-login-code { flex: none; width: 184px; height: 184px; padding: 8px; background: #fff; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(6, 199, 85, .12); }
.qr-login-code img, .qr-login-code canvas { display: block; width: 168px !important; height: 168px !important; }
.qr-login-wait { color: #06c755; font-size: 26px; }
.qr-login-text > b { display: block; font-size: 16px; margin-bottom: 6px; }
.qr-login-text > b .fa-line { color: #06c755; }
.qr-login-text ol { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; color: #4b5675; line-height: 1.7; }
.qr-login-status { color: #06a34a; font-weight: 600; }
.qr-login.expired .qr-login-code { filter: blur(3px); opacity: .45; }
.qr-login-refresh { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 184px; border: 0; border-radius: 12px; padding: 10px; background: #fff; color: #1f3a8a; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(31, 58, 138, .18); }
@media (max-width: 520px) { .qr-login { flex-direction: column; text-align: center; } .qr-login-text ol { text-align: left; } .qr-login-refresh { left: 50%; top: 100px; transform: translateX(-50%); } }
.qr-confirm { max-width: 460px; margin: 0 auto; text-align: center; }
.qr-confirm-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #eaf2ff; color: #1668f2; font-size: 26px; }
.qr-confirm-ic.ok { background: #e7f9ee; color: #06c755; }
.qr-device { background: #f6f8fc; border-radius: 12px; padding: 12px; }
.qr-device b, .qr-device small { display: block; }
.qr-device small { color: #66708c; margin-top: 2px; }
.line-confirm-pic { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 0 0 4px #e7f9ee; }
.line-app-btn { color: #06a34a !important; border-color: #b7e8c9; }