/* ลูกมือ (Lukmue) — shared styles. Each shop picks a colour theme (data-shop-theme on <html>); every theme has light and dark. */
:root{ --display:"Chonburi", "IBM Plex Sans Thai", serif; --body:"IBM Plex Sans Thai", "Sarabun", "Leelawadee UI", "Tahoma", sans-serif; }
:root[data-shop-theme="orchid"], :root:not([data-shop-theme]){ --bg:#FAF5EC; --surface:#FFFFFF; --surface2:#F3EBDD; --line:#E4DAC7; --ink:#2B2130; --ink2:#5E5065; --ink3:#726576; --leaf:#4E6B4B; --leaf-soft:#E6EDE0; --orchid:#6D2F6C; --orchid-soft:#F1E5F0; --on-orchid:#FFFFFF; --gold:#B8914D; --gold-soft:#F7EDD9; --plate:#FAF5EC; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(30,25,35,.16); }
:root[data-shop-theme="ocean"]{ --bg:#F3F7FA; --surface:#FFFFFF; --surface2:#E6EEF4; --line:#D3DFE8; --ink:#18252F; --ink2:#4A5D6B; --ink3:#5C6C77; --leaf:#1F6F78; --leaf-soft:#DDEFF0; --orchid:#1D5B94; --orchid-soft:#E1ECF7; --on-orchid:#FFFFFF; --gold:#C0893A; --gold-soft:#F6EBDA; --plate:#F3F7FA; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(30,25,35,.16); }
:root[data-shop-theme="forest"]{ --bg:#F5F6EF; --surface:#FFFFFF; --surface2:#E9ECDF; --line:#D8DDC8; --ink:#1F261E; --ink2:#4F5A4B; --ink3:#636B5F; --leaf:#6B4F2A; --leaf-soft:#F0E8DA; --orchid:#2F6B3F; --orchid-soft:#E2EFE3; --on-orchid:#FFFFFF; --gold:#B08A3E; --gold-soft:#F4ECD8; --plate:#F5F6EF; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(30,25,35,.16); }
:root[data-shop-theme="sunset"]{ --bg:#FCF4EC; --surface:#FFFFFF; --surface2:#F6E8DA; --line:#EBD7C4; --ink:#2E1F18; --ink2:#654B3F; --ink3:#7E6256; --leaf:#7A3E2A; --leaf-soft:#F6E4DC; --orchid:#C04A22; --orchid-soft:#FBE5DA; --on-orchid:#FFFFFF; --gold:#D09A3A; --gold-soft:#F8ECD6; --plate:#FCF4EC; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(30,25,35,.16); }
:root[data-shop-theme="mono"]{ --bg:#F6F6F4; --surface:#FFFFFF; --surface2:#ECECE9; --line:#DCDCD7; --ink:#1C1C1B; --ink2:#51514E; --ink3:#696965; --leaf:#2E2E2C; --leaf-soft:#E6E6E2; --orchid:#1F1F1E; --orchid-soft:#E8E8E5; --on-orchid:#FFFFFF; --gold:#8C7A55; --gold-soft:#EFEADF; --plate:#F6F6F4; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(30,25,35,.16); }
:root[data-shop-theme="lukmue"]{ --bg:#F6F1E7; --surface:#FFFFFF; --surface2:#EEE7D8; --line:#DDD3BF; --ink:#1C2724; --ink2:#46544F; --ink3:#5A6661; --leaf:#173F3A; --leaf-soft:#E1ECE6; --orchid:#173F3A; --orchid-soft:#E1ECE6; --on-orchid:#F6F1E7; --gold:#9A7428; --gold-soft:#F6ECD6; --plate:#F6F1E7; --up:#A63A2A; --up-soft:#F8E4DE; --down:#3A714A; --down-soft:#E3F0E4; --warn:#8A6516; --warn-soft:#F8EDD6; --shadow:0 8px 28px rgba(20,35,30,.16); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-shop-theme="orchid"], :root:not([data-theme="light"]):not([data-shop-theme]){ --bg:#17121C; --surface:#211A27; --surface2:#2A2231; --line:#392F42; --ink:#F1E9F0; --ink2:#C3B4C6; --ink3:#95879A; --leaf:#9CC79A; --leaf-soft:#253021; --orchid:#DE8FD9; --orchid-soft:#3D2340; --on-orchid:#23102A; --gold:#D9B469; --gold-soft:#342810; --plate:#FAF5EC; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
  :root:not([data-theme="light"])[data-shop-theme="ocean"]{ --bg:#0F161C; --surface:#172129; --surface2:#1E2A34; --line:#2D3C48; --ink:#E8F0F5; --ink2:#B3C4D0; --ink3:#8396A3; --leaf:#7FCBD2; --leaf-soft:#16303A; --orchid:#86B8EA; --orchid-soft:#1C3350; --on-orchid:#0B1A2A; --gold:#E0B06A; --gold-soft:#33270F; --plate:#F3F7FA; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
  :root:not([data-theme="light"])[data-shop-theme="forest"]{ --bg:#121611; --surface:#1A2019; --surface2:#222A20; --line:#323C2F; --ink:#EAEFE6; --ink2:#BCC6B6; --ink3:#8C9787; --leaf:#D8B27A; --leaf-soft:#352A18; --orchid:#8FD19E; --orchid-soft:#1E3524; --on-orchid:#0E1F12; --gold:#D9B469; --gold-soft:#342810; --plate:#F5F6EF; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
  :root:not([data-theme="light"])[data-shop-theme="sunset"]{ --bg:#1A1210; --surface:#241916; --surface2:#2E211D; --line:#43302A; --ink:#F6EAE4; --ink2:#D2B9AD; --ink3:#A08579; --leaf:#F0A98C; --leaf-soft:#3A221A; --orchid:#F58C62; --orchid-soft:#43231A; --on-orchid:#2A0F05; --gold:#E7B457; --gold-soft:#352A12; --plate:#FCF4EC; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
  :root:not([data-theme="light"])[data-shop-theme="mono"]{ --bg:#121212; --surface:#1B1B1B; --surface2:#242424; --line:#353535; --ink:#EDEDED; --ink2:#BDBDBD; --ink3:#8E8E8E; --leaf:#E4E4E4; --leaf-soft:#2A2A2A; --orchid:#F2F2F2; --orchid-soft:#2E2E2E; --on-orchid:#121212; --gold:#CDB888; --gold-soft:#2E2A20; --plate:#F6F6F4; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
  :root:not([data-theme="light"])[data-shop-theme="lukmue"]{ --bg:#0E1614; --surface:#15201D; --surface2:#1C2925; --line:#2B3A35; --ink:#ECF2EF; --ink2:#B6C6C0; --ink3:#8B9C95; --leaf:#9ED3BF; --leaf-soft:#173029; --orchid:#9ED3BF; --orchid-soft:#183A31; --on-orchid:#0B1A16; --gold:#D8AC59; --gold-soft:#33290F; --plate:#F6F1E7; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
}
:root[data-theme="dark"][data-shop-theme="orchid"], :root[data-theme="dark"]:not([data-shop-theme]){ --bg:#17121C; --surface:#211A27; --surface2:#2A2231; --line:#392F42; --ink:#F1E9F0; --ink2:#C3B4C6; --ink3:#95879A; --leaf:#9CC79A; --leaf-soft:#253021; --orchid:#DE8FD9; --orchid-soft:#3D2340; --on-orchid:#23102A; --gold:#D9B469; --gold-soft:#342810; --plate:#FAF5EC; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"][data-shop-theme="ocean"]{ --bg:#0F161C; --surface:#172129; --surface2:#1E2A34; --line:#2D3C48; --ink:#E8F0F5; --ink2:#B3C4D0; --ink3:#8396A3; --leaf:#7FCBD2; --leaf-soft:#16303A; --orchid:#86B8EA; --orchid-soft:#1C3350; --on-orchid:#0B1A2A; --gold:#E0B06A; --gold-soft:#33270F; --plate:#F3F7FA; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"][data-shop-theme="forest"]{ --bg:#121611; --surface:#1A2019; --surface2:#222A20; --line:#323C2F; --ink:#EAEFE6; --ink2:#BCC6B6; --ink3:#8C9787; --leaf:#D8B27A; --leaf-soft:#352A18; --orchid:#8FD19E; --orchid-soft:#1E3524; --on-orchid:#0E1F12; --gold:#D9B469; --gold-soft:#342810; --plate:#F5F6EF; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"][data-shop-theme="sunset"]{ --bg:#1A1210; --surface:#241916; --surface2:#2E211D; --line:#43302A; --ink:#F6EAE4; --ink2:#D2B9AD; --ink3:#A08579; --leaf:#F0A98C; --leaf-soft:#3A221A; --orchid:#F58C62; --orchid-soft:#43231A; --on-orchid:#2A0F05; --gold:#E7B457; --gold-soft:#352A12; --plate:#FCF4EC; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"][data-shop-theme="mono"]{ --bg:#121212; --surface:#1B1B1B; --surface2:#242424; --line:#353535; --ink:#EDEDED; --ink2:#BDBDBD; --ink3:#8E8E8E; --leaf:#E4E4E4; --leaf-soft:#2A2A2A; --orchid:#F2F2F2; --orchid-soft:#2E2E2E; --on-orchid:#121212; --gold:#CDB888; --gold-soft:#2E2A20; --plate:#F6F6F4; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"][data-shop-theme="lukmue"]{ --bg:#0E1614; --surface:#15201D; --surface2:#1C2925; --line:#2B3A35; --ink:#ECF2EF; --ink2:#B6C6C0; --ink3:#8B9C95; --leaf:#9ED3BF; --leaf-soft:#173029; --orchid:#9ED3BF; --orchid-soft:#183A31; --on-orchid:#0B1A16; --gold:#D8AC59; --gold-soft:#33290F; --plate:#F6F1E7; --up:#F0907E; --up-soft:#3C201B; --down:#7FCF9B; --down-soft:#1B3325; --warn:#E7B457; --warn-soft:#352A12; --shadow:0 8px 28px rgba(0,0,0,.55); }
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{font-family:var(--body);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:0 110px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:10px;display:flex;align-items:center;gap:12px}
.brand{font-family:var(--display);font-size:19px;color:var(--leaf);letter-spacing:.2px;line-height:1.2}
.brand small{display:block;font-family:var(--body);font-size:12px;color:var(--ink3);letter-spacing:0}
.top .sp{flex:1}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink2);white-space:nowrap}
.iconbtn:hover{border-color:var(--leaf)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav-in{max-width:880px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nav button{border:0;background:none;padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--ink3);cursor:pointer;position:relative}
.nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:var(--orchid);font-weight:600}
.nav .dot{position:absolute;top:6px;left:calc(50% + 8px);min-width:17px;height:17px;border-radius:9px;background:var(--orchid);color:var(--on-orchid);font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* type */
h1.pg{font-family:var(--display);font-weight:400;font-size:24px;margin:20px 0 4px;color:var(--ink);text-wrap:balance}
.sub{color:var(--ink2);margin:0 0 16px;font-size:14px}
h2.sec{font-size:13px;font-weight:600;color:var(--ink3);letter-spacing:.6px;margin:22px 0 8px}

/* blocks */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi .l{font-size:12.5px;color:var(--ink3)}
.kpi .v{font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.25}
.kpi .h{font-size:12px;color:var(--ink2)}
.kpi.hl{background:var(--leaf);border-color:var(--leaf)}
.kpi.hl .l,.kpi.hl .h{color:var(--bg);opacity:.8}
.kpi.hl .v{color:var(--bg)}

.alert{display:flex;gap:12px;align-items:center;background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:12px 14px;margin:14px 0;font-weight:500}
.alert .sp{flex:1}
.alert.ok{background:var(--down-soft);color:var(--down)}

.rows{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;background:none;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0}
.row:first-child{border-top:0}
.row:hover{background:var(--surface2)}
.row .main{flex:1;min-width:0}
.row .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m{font-size:13px;color:var(--ink3)}
.row .r{text-align:right;flex:none}
.row .r .t{font-variant-numeric:tabular-nums}
.empty{padding:26px 16px;text-align:center;color:var(--ink3)}

.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.p-new{background:var(--orchid-soft);color:var(--orchid)}
.p-conf{background:var(--leaf-soft);color:var(--leaf)}
.p-done{background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.p-cancel{background:var(--surface2);color:var(--ink3);text-decoration:line-through}
.p-unpaid{background:var(--warn-soft);color:var(--warn)}
.p-paid{background:var(--down-soft);color:var(--down)}
.chg{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.chg.up{color:var(--up)} .chg.down{color:var(--down)} .chg.same{color:var(--ink3)}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 13px;font-size:13.5px;cursor:pointer;color:var(--ink2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}

.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.bar .sp{flex:1}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 15px;font-weight:600;cursor:pointer;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--orchid);border-color:var(--orchid);color:var(--on-orchid)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.leaf{background:var(--leaf);border-color:var(--leaf);color:var(--bg)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink2)}
.btn.danger{color:var(--up);border-color:var(--up-soft)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--orchid);outline-offset:2px}

input.f,select.f,textarea.f{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 11px;font-size:15px}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--orchid);outline:none}
textarea.f{min-height:64px;resize:vertical}
.search{max-width:320px}
label.fl{display:block;font-size:12.5px;color:var(--ink3);margin:0 0 4px;font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}
.stack{display:flex;flex-direction:column;gap:12px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap;background:var(--surface)}
.seg button{flex:1;border:0;background:none;padding:8px 6px;font-size:13.5px;cursor:pointer;color:var(--ink2);border-left:1px solid var(--line);min-width:70px}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--orchid);color:var(--on-orchid);font-weight:600}

/* cost table */
.tscroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px}
table.ct{width:100%;border-collapse:collapse;min-width:560px}
.ct th{font-size:12px;color:var(--ink3);font-weight:600;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ct th:first-child{text-align:left}
.ct td{padding:9px 12px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;vertical-align:middle}
.ct tr:first-child td{border-top:0}
.ct td:first-child{text-align:left}
.ct .nm{font-weight:600}
.ct .nm small{display:block;font-weight:400;color:var(--ink3);font-size:12px}
.ct input{width:96px;text-align:right;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface2);font-variant-numeric:tabular-nums}
.ct input:focus{border-color:var(--orchid);outline:none;background:var(--surface)}
.ct input.dirty{border-color:var(--orchid);background:var(--orchid-soft)}
.ct .price{font-weight:700;font-size:15.5px}
.ct tr.clk{cursor:pointer}
@media (max-width:560px){table.ct{min-width:0}.ct th,.ct td{padding:9px 8px}.ct .hide-sm{display:none}.ct input{width:74px}.ct .nm{font-size:14px}}
.ct tr.clk:hover td{background:var(--surface2)}
.ct tr[tabindex]:focus-visible td{background:var(--surface2)}
.ct tr[tabindex]:focus-visible{outline:2px solid var(--orchid);outline-offset:-2px}
.rule-tag{font-size:12px;color:var(--ink2);background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.rule-tag.own{border-color:var(--orchid);color:var(--orchid);background:var(--orchid-soft)}

.savebar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:25;padding-inline:16px}
.savebar-in{max-width:848px;margin:0 auto;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
.savebar-in .sp{flex:1}
.savebar .btn{border:0}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(10,18,13,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.scrim{align-items:center}}
.sheet{background:var(--bg);width:100%;max-width:620px;max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow)}
@media (min-width:700px){.sheet{border-radius:18px}}
.sh-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sh-h h3{margin:0;font-size:17px;flex:1}
.sh-b{padding:16px;overflow-y:auto;flex:1}
.sh-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.sh-f .sp{flex:1}

.lines{display:flex;flex-direction:column;gap:8px}
.line{display:grid;grid-template-columns:1fr 70px 96px 32px;gap:6px;align-items:center}
@media (max-width:460px){.line{grid-template-columns:1fr 58px 84px 30px}}
.line input,.line select{padding:8px}
.x{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:20px;line-height:1}
.totals{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.totals div{display:flex;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums}
.totals .big{font-weight:700;font-size:18px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.totals .pf{color:var(--down);font-weight:600}

.spark{width:100%;height:120px;display:block}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}

/* shop view */
.shop-hero{padding:22px 0 8px}
.shop-hero h1{font-family:var(--display);font-weight:400;font-size:28px;margin:0;color:var(--leaf);line-height:1.25}
.shop-hero p{margin:4px 0 0;color:var(--ink2)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pc .sw{height:74px;border-radius:10px;display:grid;place-items:center;position:relative;overflow:hidden}
.pc .sw svg{width:54px;height:54px}
button.sw{border:0;padding:0;width:100%;cursor:pointer;font:inherit}
.pc .sw.sq,.sw.sq{height:auto;aspect-ratio:1}
.pc .sw img{width:100%;height:100%;object-fit:cover;display:block}
.sw.sq.big{border-radius:12px;display:grid;place-items:center}
.sw.sq.big svg{width:96px;height:96px}
.gallery img{display:block;width:100%;aspect-ratio:1;max-height:min(70vh,560px);object-fit:cover;border-radius:12px;background:var(--surface2)}
.gthumbs{display:flex;gap:8px;flex-wrap:wrap}
.gthumbs button{width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface2);cursor:pointer}
.gthumbs button.on{border-color:var(--orchid)}
.gthumbs img{width:100%;height:100%;object-fit:cover;display:block}
.dpr{font-size:22px;font-weight:700;color:var(--orchid);font-variant-numeric:tabular-nums}
.dpr small{font-size:13px;color:var(--ink3);font-weight:400}
.pc > .btn,.pc > .qty{margin-top:auto}
.desc{white-space:pre-line;color:var(--ink2);line-height:1.6}
.pc .n{font-weight:600;line-height:1.35}
.pc .k{font-size:12.5px;color:var(--ink3)}
.pc .pr{font-size:19px;font-weight:700;color:var(--orchid);font-variant-numeric:tabular-nums}
.pc .pr small{font-size:12.5px;color:var(--ink3);font-weight:400}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{border:0;background:var(--surface2);width:36px;height:34px;font-size:18px;cursor:pointer}
.qty span{flex:1;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.cartbar-in{max-width:848px;margin:0 auto;display:flex;gap:10px;align-items:center}
.cartbar-in .sp{flex:1}
.hold{position:relative;overflow:hidden}
.hold .fill{position:absolute;inset:0;background:var(--orchid-soft);transform:scaleX(0);transform-origin:left;transition:transform .9s linear;z-index:0}
.hold.go .fill{transform:scaleX(1)}
.hold span{position:relative;z-index:1}

.toast{pointer-events:none;position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;z-index:80;font-size:14px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.loading{padding:60px 16px;text-align:center;color:var(--ink3)}
.note{font-size:13px;color:var(--ink3)}
.formula{background:var(--surface2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink2)}
.formula b{color:var(--ink)}
/* login + pay + misc */
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

html,body{margin:0;min-height:100%}
a{color:var(--orchid)}
a.btn,a.iconbtn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:inherit}
a.btn.pri{color:var(--on-orchid)}
a.btn.btn-line{color:#fff}
.center-card{max-width:420px;margin:48px auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.center-card h1{font-family:var(--display);font-weight:400;color:var(--leaf);font-size:26px;margin:0 0 4px}
.err{color:var(--up);font-size:14px;min-height:20px}
/* branches, team, points at the counter */
.locpick{max-width:280px;margin:0 0 12px}
.section-card > .sp{flex:1}
/* product photos */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-main{position:absolute;left:4px;bottom:4px;background:var(--orchid);color:var(--on-orchid);font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px}
.ph-del,.ph-left{position:absolute;top:4px;width:26px;height:26px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:17px;line-height:26px;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ph-del{right:4px}
.ph-left{left:4px}
.ph.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-style:dashed;cursor:pointer;color:var(--ink2);font-size:12.5px;text-align:center;padding:6px}
.ph.add b{font-size:24px;line-height:1;color:var(--orchid)}
.ph.add.busy{cursor:default}
.ph.add input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ph.add:focus-within{outline:2px solid var(--orchid);outline-offset:2px}
.optadd{display:flex;gap:8px;align-items:center}
.nmrow{display:flex;gap:10px;align-items:center}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:var(--surface2)}
.optadd .f{flex:1;min-width:0}
.linkbtn{background:none;border:0;padding:0;color:var(--orchid);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.memrow{flex-wrap:wrap}
.memrow .main{min-width:180px}
.row .r.memctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;flex:1 1 auto;min-width:0}
.memctl select.f{width:auto;max-width:170px;padding:5px 8px}
.ptsbox{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ptshead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;justify-content:space-between}
.ptshead span{color:var(--ink2);font-size:14px}
.ptsrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ptsrow input.f{width:110px;flex:none}
#pm_ptsv{margin:0}
.paybox{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
@media (max-width:620px){.paybox{grid-template-columns:1fr}}
.qrwrap{background:#fff;border-radius:14px;padding:14px;border:1px solid var(--line);text-align:center;width:max-content;max-width:100%;margin:0 auto}
.qrwrap .ppl{background:#1A3C6E;color:#fff;font-weight:700;letter-spacing:.5px;border-radius:8px;padding:6px 10px;margin-bottom:10px;font-size:14px}
.qrwrap img,.qrwrap canvas{display:block;width:240px;height:240px;max-width:100%;image-rendering:pixelated;margin:0 auto}
.qrwrap .amt{color:#16241C;font-size:22px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums}
.qrwrap .to{color:#4B5E52;font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px}
.kv dt{color:var(--ink3)} .kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.stamp{display:inline-block;border:2px solid var(--down);color:var(--down);border-radius:10px;padding:6px 14px;font-weight:700;font-size:18px;transform:rotate(-3deg)}
.linebox{display:flex;gap:12px;align-items:center;background:var(--down-soft);color:var(--ink);border-radius:12px;padding:12px 14px}
.linebox .sp{flex:1}
.btn-line{background:#06C755;border-color:#06C755;color:#fff}
.due{font-size:12px;font-weight:600;white-space:nowrap}
.due.late{color:var(--up)} .due.today{color:var(--warn)} .due.soon{color:var(--ink3)}
.p-late{background:var(--up-soft);color:var(--up)}
.section-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--surface2);border:1px dashed var(--line);border-radius:8px;padding:4px 10px;font-weight:700;letter-spacing:1px}
.okline{color:var(--down);font-weight:600}
.offline{position:fixed;top:0;left:0;right:0;background:var(--warn);color:#fff;text-align:center;font-size:13px;padding:4px;z-index:90}

/* staff page */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.btn.pick{padding:14px 10px;font-size:16px}
.btn.pick.on{background:var(--leaf);border-color:var(--leaf);color:var(--bg)}
.pindots{display:flex;gap:10px;justify-content:center;margin:4px 0}
.pindots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);display:block}
.pindots i.on{background:var(--orchid);border-color:var(--orchid)}
.pindots i.x{opacity:.45}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px 0;font-size:22px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.key:active{background:var(--surface2)}
.key.pri{background:var(--orchid);border-color:var(--orchid);color:var(--on-orchid);font-size:17px}
.key.ghost{background:none;color:var(--ink3)}
.key:disabled{opacity:.45}
.work{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.work.locked{background:var(--surface2)}
.wh{display:flex;gap:10px;align-items:flex-start}
.wh .r{text-align:right;flex:none}
.planq{font-size:22px;font-weight:700;color:var(--leaf);font-variant-numeric:tabular-nums;line-height:1.2}
.wl{display:flex;align-items:center;gap:10px;margin-top:10px}
.wl .r{text-align:right}
.wl .r b{font-size:18px;font-variant-numeric:tabular-nums}
.wfoot{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.qty.big button{width:48px;height:48px;font-size:24px}
.qty.big input{width:74px;height:48px;text-align:center;font-size:20px;font-weight:700;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--surface);font-variant-numeric:tabular-nums}
.qty.big input:focus{outline:2px solid var(--orchid);outline-offset:-2px}

/* ---- โลโก้ ---- */
.logo-plate{background:var(--plate);border-radius:14px;padding:10px 16px;display:inline-block;line-height:0;border:1px solid var(--line)}
.logo-plate img{width:min(300px,72vw);height:auto;display:block}
.logomark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--plate);padding:2px;box-sizing:content-box;border:1px solid var(--line)}
.top-in .brand{min-width:0;overflow:hidden}
.brandwrap{display:flex;align-items:center;gap:9px;min-width:0}
.shop-hero .logo-plate{margin-bottom:12px}
.center-card .logo-plate{margin:0 auto 4px;display:block;width:max-content;max-width:100%}
.pill.p-gold{background:var(--gold-soft);color:var(--warn)}

/* ---- platform additions ---- */
.seo-list{display:none}
.logomark{object-fit:contain}
.brandmark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--orchid);color:var(--on-orchid);display:grid;place-items:center;font-family:var(--display);font-size:17px}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.langsw button{border:0;background:none;padding:6px 9px;font-size:12.5px;font-weight:600;color:var(--ink3);cursor:pointer}
.langsw button.on{background:var(--ink);color:var(--bg)}
.shoplist{display:flex;flex-direction:column;gap:8px}
.themepick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.themepick button{border:2px solid var(--line);border-radius:12px;padding:8px 4px;background:var(--surface);cursor:pointer;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink2)}
.themepick button.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.themepick i{display:flex;gap:3px}
.themepick i b{width:14px;height:14px;border-radius:50%;display:block}
@media (max-width:420px){.themepick{grid-template-columns:repeat(3,1fr)}}
.logo-edit{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo-edit img{width:64px;height:64px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:var(--plate)}
.hero{max-width:880px;margin:0 auto;padding:48px 16px 24px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,6vw,44px);line-height:1.2;margin:0 0 10px;color:var(--ink);text-wrap:balance}
.hero p{color:var(--ink2);font-size:17px;margin:0 0 20px;max-width:620px}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.feat .section-card h3{margin:0 0 4px;font-size:16px}
.feat .section-card p{margin:0;color:var(--ink2);font-size:14px}
.tag-soon{font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
table.lst{width:100%;border-collapse:collapse}
.lst th,.lst td{padding:9px 12px;border-top:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}
.lst th{font-size:12px;color:var(--ink3);font-weight:600;border-top:0}
.lst td.r,.lst th.r{text-align:right;font-variant-numeric:tabular-nums}
#clerk-mount{display:flex;justify-content:center;margin:24px 0}
.menu-list{display:flex;flex-direction:column}
.menu-list button,.menu-list a{display:flex;align-items:center;gap:10px;padding:12px 4px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;font-weight:500;color:var(--ink);text-decoration:none;width:100%}
.menu-list > :first-child{border-top:0}
.menu-list .sp{flex:1}
.linkbox{display:flex;gap:6px;align-items:center}
.linkbox input{flex:1;min-width:0}

[hidden]{display:none!important}
/* long shop names stay on one line in the header */
.top-in .brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-in .brand small{overflow:hidden;text-overflow:ellipsis}
.top-in .brandwrap{flex:1 1 auto}
.top-in .langsw,.top-in .iconbtn,.top-in .brandmark,.top-in .logomark{flex:none}
.top-in .sp{flex:0 0 0}

/* shop counter (POS) */
.posgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.posgrid{grid-template-columns:1.4fr 1fr;align-items:start}.poscart{position:sticky;top:76px}}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.ptile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:78px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.ptile b{font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.ptile .pr{color:var(--orchid);font-weight:700}
.ptile small{color:var(--ink3);font-size:12px}
.ptile small.neg,.neg{color:var(--up)}
.ptile.on{border-color:var(--orchid);box-shadow:inset 0 0 0 1px var(--orchid)}
.ptile.other{border-style:dashed;background:transparent}
.ptile .cnt{position:absolute;top:6px;right:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--orchid);color:var(--on-orchid);font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ptile:active{transform:scale(.98)}
.clines{display:flex;flex-direction:column;gap:2px}
.cline{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.cline .nm{background:none;border:0;padding:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.cline .nm b{display:block;font-weight:600;overflow-wrap:anywhere}
.cline .nm small{color:var(--ink3);font-size:12px}
.cline .qb{display:flex;align-items:center;gap:4px}
.cline .qb button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.cline .qb span{min-width:26px;text-align:center;font-weight:600}
.cline .amt{min-width:64px;text-align:right;font-weight:600}
.ctot{display:flex;align-items:center;gap:8px;margin-top:8px}
.ctot label{font-size:13px;color:var(--ink2)}
.ctot .f{max-width:96px}
.ctot b{font-size:20px}
.btn.big{padding:12px 18px;font-size:16px}
.f.big{font-size:22px;padding:10px 12px}
.paybig{text-align:center;font-size:34px;font-weight:700;color:var(--ink);line-height:1.15}
.paybig small{display:block;font-size:13px;font-weight:500;color:var(--ink3)}
.change{margin-top:8px;font-size:16px}
.change b{font-size:22px}
.receipt{margin:0 auto;background:#fff;color:#000;padding:10px 8px;font:12.5px/1.4 var(--body);border:1px dashed #bbb;border-radius:4px}
.receipt.w58{width:58mm;max-width:100%}
.receipt.w80{width:80mm;max-width:100%}
.receipt .rc-h{text-align:center}
.receipt .rc-h b{font-size:15px}
.receipt .rc-t{text-align:center;font-weight:700;margin:6px 0;border-top:1px dashed #000;border-bottom:1px dashed #000;padding:3px 0}
.receipt .rc-m{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:11.5px}
.receipt .rc-l{margin:6px 0;border-bottom:1px dashed #000;padding-bottom:4px}
.receipt .rc-i{margin-bottom:3px}
.receipt .rc-r,.receipt .rc-s>div{display:flex;justify-content:space-between;gap:6px}
.receipt .rc-big{font-weight:700;font-size:15px}
.receipt .rc-f{text-align:center;margin-top:8px;border-top:1px dashed #000;padding-top:4px}
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing{background:#fff}
  body.printing #printArea{display:block}
  body.printing #printArea .receipt{border:0;border-radius:0;margin:0;padding:2mm 3mm;width:auto}
}
.posbar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:25;padding:0 12px 8px;pointer-events:none}
.posbar-in{pointer-events:auto;width:100%;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border:0;border-radius:14px;background:var(--orchid);color:var(--on-orchid);font:inherit;font-weight:600;box-shadow:var(--shadow);cursor:pointer}
.posbar-in b{font-size:18px}
.posbar-in .go{margin-left:auto}
@media (min-width:900px){.posbar{display:none}}
.posspace{height:64px}@media (min-width:900px){.posspace{display:none}}

/* full tax invoice (A4) */
.a4wrap{overflow-x:auto}
.a4{background:#fff;color:#000;width:100%;max-width:794px;margin:0 auto;padding:22px 26px;border:1px solid #ccc;border-radius:4px;font:12.5px/1.5 var(--body)}
.a4 .a4-top{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #000;padding-bottom:10px}
.a4 .a4-name{font-size:17px}
.a4 .a4-title{text-align:right}
.a4 .a4-title b{font-size:17px;display:block}
.a4 .a4-void{display:inline-block;margin-top:4px;border:2px solid #b00;color:#b00;font-weight:700;padding:0 8px}
.a4 .a4-meta{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:12px 0}
.a4 .a4-meta>div{border:1px solid #999;border-radius:4px;padding:8px 10px}
.a4 .lbl{color:#555}
.a4 .a4-t{width:100%;border-collapse:collapse}
.a4 .a4-t th,.a4 .a4-t td{border:1px solid #999;padding:5px 7px;text-align:right}
.a4 .a4-t th:nth-child(2),.a4 .a4-t td:nth-child(2){text-align:left}
.a4 .a4-t th{background:#f2f2f2}
.a4 .a4-sum{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-top:10px;align-items:start}
.a4 .a4-words{border:1px solid #999;padding:8px 10px;text-align:center}
.a4 .a4-nums>div{display:flex;justify-content:space-between;padding:2px 0}
.a4 .a4-nums .big{font-weight:700;border-top:2px solid #000;margin-top:4px;padding-top:4px}
.a4 .a4-sign{display:flex;justify-content:space-between;margin-top:46px;gap:16px}
.a4 .a4-sign>div{border-top:1px dotted #000;padding-top:4px;min-width:220px;text-align:center}
@media (max-width:600px){.a4{padding:14px 12px;font-size:12px}.a4 .a4-top,.a4 .a4-sign{flex-direction:column}.a4 .a4-title{text-align:left}.a4 .a4-meta,.a4 .a4-sum{grid-template-columns:1fr}.a4 .a4-t th,.a4 .a4-t td{padding:4px 5px}}
@media print{body.printing #printArea .a4{border:0;padding:0;max-width:none;font-size:12.5px}body.printing #printArea .a4 .a4-top,body.printing #printArea .a4 .a4-sign{flex-direction:row}body.printing #printArea .a4 .a4-title{text-align:right}body.printing #printArea .a4 .a4-meta{grid-template-columns:1.6fr 1fr}body.printing #printArea .a4 .a4-sum{grid-template-columns:1fr 280px}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.plan{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.plan.on{border-color:var(--orchid);box-shadow:inset 0 0 0 1px var(--orchid)}
.plan .pr{font-size:22px;font-weight:700;color:var(--orchid)}
.plan .pr small{font-size:12px;font-weight:500;color:var(--ink3)}
.plan ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink2)}

/* Bigger tap areas for small controls, without changing how they look (about 40px for a finger) */
.x,.cline .qb button,.chip,.btn.sm,.langsw button{position:relative}
.x::after,.cline .qb button::after,.ph-del::after,.ph-left::after{content:"";position:absolute;inset:-10px}
.cline .qb button::after{inset:-4px}
.ph-del::after,.ph-left::after{inset:-7px}
.chip,.btn.sm{min-height:36px}
.chip::after,.btn.sm::after,.langsw button::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.langsw button{min-height:34px}

/* ---------- shop website (online store) ---------- */
.skip{position:absolute;left:8px;top:8px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--surface);color:var(--ink);padding:8px 12px;z-index:99;border-radius:8px}
.skip:focus{width:auto;height:auto;clip-path:none}
.st-top .brandwrap{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.st-top .brand{overflow:hidden;text-overflow:ellipsis}
.brandlogo{height:36px;width:auto;max-width:96px;border-radius:8px;background:var(--plate);display:block}
.st-search{display:flex;gap:8px;align-items:center}
.st-top .st-search{flex:0 1 300px;min-width:0}
.st-search input.f{min-width:0}
.st-bigsearch{max-width:520px;margin:14px 0 0}
.show-sm{display:none}
@media (max-width:640px){.hide-sm{display:none}.show-sm{display:flex}header .st-search.show-sm{padding:0 16px 10px;max-width:880px;margin:0 auto}}
.cartbtn{position:relative;gap:6px;white-space:nowrap}
.cartn{min-width:20px;height:20px;border-radius:10px;background:var(--orchid);color:var(--on-orchid);font-size:12px;font-weight:700;display:inline-grid;place-items:center;padding:0 5px}
.st-nav{border-top:1px solid var(--line)}
.st-nav-in{max-width:880px;margin:0 auto;padding:0 16px;display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.st-nav-in::-webkit-scrollbar{display:none}
.st-nav a{flex:none;padding:9px 0;color:var(--ink2);text-decoration:none;font-size:14px;border-bottom:2px solid transparent}
.st-nav a[aria-current]{color:var(--orchid);border-bottom-color:var(--orchid);font-weight:600}
.st-notice{background:var(--orchid-soft);color:var(--orchid);text-align:center;padding:8px 16px;font-size:14px;font-weight:500}
.st-main{padding-bottom:40px}
.st-h1{margin-top:8px}
.st-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:14px 0 0;font-size:13px;color:var(--ink3)}
.st-crumbs li+li::before{content:"›";margin-right:4px}
.st-crumbs a{color:var(--ink2)}
.st-intro{color:var(--ink2);margin:0 0 10px}
.st-intro p{margin:0 0 8px}
.st-filters{margin:8px 0 6px;display:flex;flex-direction:column;gap:8px}
.st-sortrow{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.st-sortrow .fl{margin:0}
.st-sortrow select{width:auto;max-width:220px}
.st-fbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.st-fbox summary{cursor:pointer;padding:11px 0;font-weight:600}
.st-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-items:end;padding-bottom:10px}
.st-range{display:flex;gap:6px;align-items:center}
.st-range input{width:100%}
.st-check{display:flex;gap:8px;align-items:center;min-height:42px}
.st-check input{width:18px;height:18px;accent-color:var(--orchid)}
.st-fbtns{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.st-count{margin:4px 0 10px}
.st-card{position:relative;gap:6px}
.st-card.out{opacity:.62}
.st-cardlink{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.st-cardlink:hover .n{color:var(--orchid)}
.st-card .sw{position:relative;background:var(--surface2)}
.st-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--surface2),var(--orchid-soft))}
.sw.sq.big.st-noimg{aspect-ratio:1}
.st-badge{position:absolute;left:8px;top:8px;background:var(--up);color:var(--surface);font-weight:700;font-size:12.5px;border-radius:999px;padding:2px 8px}
.st-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-variant-numeric:tabular-nums}
.st-price b{color:var(--orchid);font-size:18px}
.st-price s{color:var(--ink3);font-size:13.5px}
.st-price small{color:var(--ink3);font-size:12.5px}
.st-price.big b{font-size:26px}
.st-price.big s{font-size:16px}
.st-off{color:var(--up);font-weight:700;font-size:13.5px}
.st-card > .btn{margin-top:auto}
.st-left{color:var(--warn)}
.st-pager{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:20px 0}
.st-prod{display:grid;grid-template-columns:1fr;gap:18px;margin-top:10px}
@media (min-width:760px){.st-prod{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px}}
.st-gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-zoom{display:block;cursor:zoom-in}
.st-zoom img,.st-gal > .sw{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--surface2)}
.st-info{min-width:0}
.st-info h2,.st-sec h2,.st-co h2{font-size:17px;font-weight:600;margin:18px 0 8px}
.st-co h2{margin:0 0 4px}
.st-brandline{margin:2px 0 6px}
.st-pricebox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.st-opts{margin:12px 0}
.st-opts .chips{margin:6px 0 0}
.st-opts a.chip{text-decoration:none}
.st-buy{display:flex;gap:10px;align-items:center;margin:14px 0 6px;flex-wrap:wrap}
.st-buy .qty{width:130px}
.st-buy .btn.pri{flex:1;min-width:160px;padding:12px 18px;font-size:15px}
.st-desc .desc p{margin:0 0 10px}
.st-specs{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.st-specs div{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.st-specs div:first-child{border-top:0}
.st-specs dt{color:var(--ink3)}
.st-specs dd{margin:0;min-width:0;overflow-wrap:anywhere}
.st-sec{margin:26px 0 0}
.st-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.st-sechead a{font-size:14px}
.st-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.st-tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.st-tile:hover{border-color:var(--orchid)}
.st-guides{margin:4px 0 18px}
.sa-pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sa-pick:focus-within{outline:2px solid var(--orchid);outline-offset:2px}
.st-page{max-width:680px}
.st-page h2{font-size:18px;font-weight:600;margin:20px 0 6px}
.st-page p,.st-page li{color:var(--ink2)}
.st-foot{border-top:1px solid var(--line);background:var(--surface);margin-top:30px}
.st-foot-in{max-width:880px;margin:0 auto;padding:22px 16px calc(96px + env(safe-area-inset-bottom,0px))}
.st-foot-cols{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.st-foot-cols{grid-template-columns:1.4fr 1fr}}
.st-foot p{overflow-wrap:anywhere}
.st-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-co{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:820px){.st-co{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}.st-co-side{position:sticky;top:80px}}
.st-co-main,.st-co-side{min-width:0}
.st-methods{display:grid;gap:8px}
.st-method{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.st-method:has(input:checked){border-color:var(--orchid);background:var(--orchid-soft)}
.st-method input{width:18px;height:18px;accent-color:var(--orchid)}
.st-method small{display:block;color:var(--ink2);font-size:12.5px}
.st-code{display:flex;gap:8px;align-items:end}
.st-code > div{flex:1;min-width:0}
.st-place{width:100%;margin-top:12px;padding:13px 16px;font-size:15.5px}
.st-lines{display:grid;gap:8px;margin:6px 0 0}
.st-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.st-line-n{display:flex;flex-direction:column;min-width:0}
.st-line-n b{font-weight:600;overflow-wrap:anywhere}
.st-line-a{min-width:64px;text-align:right}
.qty.sm button{width:30px;height:30px;font-size:16px}
.qty.sm span{min-width:26px}
.st-freebar{background:var(--down-soft);color:var(--down);border-radius:12px;padding:10px 12px;margin:6px 0 10px}
.st-freebar p{margin:0 0 6px;font-weight:600}
.st-bar{height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.st-bar i{display:block;height:100%;background:var(--down)}
.st-suggest{display:grid;gap:6px;margin-top:8px}
.st-sg{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;color:var(--ink)}
.st-sg a{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-zoombox img{display:block;width:100%;height:auto;border-radius:12px}
.st-track{max-width:440px}
.st-top .brandwrap{flex:0 1 auto}
span.fl{display:block;font-size:12.5px;color:var(--ink3);margin:0 0 4px;font-weight:500}
.st-top{position:static}
a.chip{text-decoration:none;display:inline-block}
@media (min-width:1000px){.st .wrap,.st .top-in,.st .st-nav-in,.st .st-foot-in,.st header .st-search.show-sm{max-width:1120px}.st .st-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
/* shop website: customer accounts, reviews, wishlist (phase B) */
.st-acc{color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.st-acc-in{max-width:720px}
.row-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row-btns > .sp{flex:1}
.st-line-btn{background:#06C755;color:#fff;border-color:#06C755;width:100%;padding:12px 16px;font-size:15px}
.st-line-btn:hover{filter:brightness(.95)}
.st-mini{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);min-width:0;flex:1}
.st-mini img,.st-mini .st-noimg{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.st-mini > span{display:flex;flex-direction:column;min-width:0}
.row-btns > .st-mini + .sp{display:none}
.st-mini b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-stars{color:#B7791F;letter-spacing:1px}
.st-rating{margin:4px 0}
.st-rating a{text-decoration:none;color:var(--ink2)}
.st-rvlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-rvlist p{margin:6px 0 0;overflow-wrap:anywhere}
.st-rvhead{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.st-rvreply{border-left:3px solid var(--line);padding-left:10px}
.st-wish{margin:2px 0 6px}
.st-wish[aria-pressed=true]{color:var(--up);border-color:var(--up)}
.st-starpick{display:flex;gap:4px}
.st-starpick button{font-size:30px;line-height:1;background:none;border:0;color:#B7791F;cursor:pointer;min-width:44px;min-height:44px}
.st-points{margin:0;font-size:15px}
.st-points b{font-size:24px;color:var(--orchid)}
.st-order .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.st-ret{padding:6px 0;border-top:1px solid var(--line)}
.st-ret:first-of-type{border-top:0}
.st-signin{flex-wrap:wrap}
.st-addr{border-top:1px solid var(--line);padding-top:8px}
.st-addr:first-of-type{border-top:0;padding-top:0}
.st-addr .note{overflow-wrap:anywhere}
/* shop website: flash sales, campaigns, cookie consent (phase C) */
.st-flash{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;background:var(--orchid-soft);color:var(--ink);border-radius:12px;padding:8px 12px;margin:6px 0}
.st-flash b{color:var(--up)}
.st-cd{font-variant-numeric:tabular-nums;font-weight:600}
.st-flash.over,.st-campaign.over{opacity:.6}
.st-campaign{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;background:var(--orchid);color:var(--surface);border-radius:14px;padding:12px 16px;margin:16px 0 0}
.st-campaign > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-campaign b{font-size:16px}
.st-campaign a{color:var(--surface);font-weight:600}
.st-campaign-r{flex-direction:row !important;gap:12px !important;align-items:center;flex-wrap:wrap}
.st-consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:560px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.st-consent p{margin:0 0 8px;font-size:14px}
.st-consent .row-btns{justify-content:flex-end}
/* back office: online store screens */
.sa-check{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.sa-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--orchid);flex:none}
.sa-row{display:flex;gap:6px 18px;flex-wrap:wrap}
.sa-menu button{align-items:center}
.sa-mt{display:flex;flex-direction:column;text-align:left;min-width:0}
.sa-mt small{color:var(--ink3);font-size:12.5px;font-weight:400}
.sa-site{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sa-site .note{overflow-wrap:anywhere}
.sa-chips{margin:0}
.sa-chips label.chip{cursor:pointer}
.sa-chips .chip{display:inline-flex;align-items:center;gap:4px}
.sa-x{border:0;background:none;color:inherit;font-size:16px;line-height:1;padding:0 2px;cursor:pointer}
.sa-age{display:flex;gap:6px;align-items:center}
.sa-age input{width:64px}
.sa-age span{color:var(--ink3);font-size:13px}
.sa-retph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sa-retph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.sa-slipimg img{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:12px;border:1px solid var(--line)}
input.f,select.f,textarea.f{min-width:0}
input[type=date].f,input[type=datetime-local].f{max-width:100%}

/* ลูกมือ brand theme: its own fonts (headings Noto Sans Thai Looped, body Anuphan) and logo pieces */
:root[data-shop-theme="lukmue"]{ --display:"Noto Sans Thai Looped", "Anuphan", sans-serif; --body:"Anuphan", "IBM Plex Sans Thai", "Sarabun", "Leelawadee UI", "Tahoma", sans-serif; }
:root[data-shop-theme="lukmue"] :is(h1.pg,.brand,.hero h1,.center-card h1,.shop-hero h1){font-weight:800}
.appmark{width:36px;height:36px;flex:none;border-radius:9px;display:block}
.hero-logo{display:block;margin:0 0 18px}
.hero-logo img{height:96px;width:auto;display:block}
.hero-logo .dk{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-logo .lt{display:none} :root:not([data-theme="light"]) .hero-logo .dk{display:block} }
:root[data-theme="dark"] .hero-logo .lt{display:none}
:root[data-theme="dark"] .hero-logo .dk{display:block}