:root{
  --ink:#16171a; --ground:#e7e5e0; --paper:#f4f2ee; --muted:#5f6166;
  --orange:#ff7828; --orange-soft:#ffe4cf; --blue:#2350b8;
  --ok:#1f7a3d; --ok-soft:#dcf1e2; --err:#b3261e; --err-soft:#fbe3e1;
  --display:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
html{scroll-padding-top:96px}

/* Sticky nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(231,229,224,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-actions{display:flex;align-items:center;gap:12px}
@media (max-width:760px){
  .site-header nav{flex-wrap:nowrap!important}
  .nav-section{display:none}
  .site-header nav{padding:10px 12px!important;gap:8px!important}
  .site-header nav>a:first-child{font-size:15px!important;letter-spacing:.06em!important}
  .site-header nav>div,.nav-actions{gap:8px!important}
  .site-header .lang-switch a,.site-header .lang-switch span{min-width:36px;padding:0 4px}
  .site-header .nav-cta{padding:0 12px;font-size:12px}
  .site-header .nav-cta svg{display:none}
}

/* Order CTA */
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--orange);color:var(--ink)!important;
  text-decoration:none;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:13px;letter-spacing:.04em;white-space:nowrap}
.nav-cta svg{display:none}

/* Language switch */
.lang-switch{display:inline-flex;border:1px solid var(--ink);font-family:var(--mono);font-size:12px;font-weight:500}
.lang-switch a,.lang-switch span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:42px;padding:0 10px;text-decoration:none;color:var(--ink)}
.lang-switch span[aria-current]{background:var(--ink);color:var(--ground)}
.lang-switch a:hover{background:var(--paper)}

/* Upload confirmation */
input[type=file].is-ok::file-selector-button{border-color:var(--ok)}
.file-state{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;line-height:1.4;border:1px solid}
.file-state[hidden]{display:none}
.file-state.ok{border-color:var(--ok);background:var(--ok-soft);color:#123d21}
.file-state.err{border-color:var(--err);background:var(--err-soft);color:#5e1410}
.file-state .tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff}
.file-state.err .tick{background:var(--err)}
.file-state strong{font-weight:600;word-break:break-all}
.file-state.ok .tick{animation:pop .28s ease-out}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Payment sheet */
.pay-sheet{font-family:var(--mono);font-size:14px;line-height:1.5;border:1px solid var(--ink);padding:0;max-width:480px;width:calc(100% - 32px);background:var(--ground);color:var(--ink)}
:lang(th) .pay-sheet,.pay-sheet:lang(th){font-family:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif}
.pay-sheet [hidden]{display:none!important}
.pay-sheet::backdrop{background:rgba(22,23,26,.55)}
.pay-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ink)}
.pay-head h2{margin:0;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:16px;letter-spacing:.04em}
.pay-close{width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.pay-body{padding:20px;display:flex;flex-direction:column;gap:18px}
.pay-summary{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px;margin:0}
.pay-summary dt{color:var(--muted)} .pay-summary dd{margin:0;word-break:break-word}
.pay-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:14px}
.pay-total b{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:32px;line-height:1}
.qr-card{background:#fff;border:1px solid var(--ink);padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-card svg.qr{width:200px;height:200px;display:block}
.qr-label{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:13px;letter-spacing:.06em}
.qr-meta{font-size:12px;color:var(--muted);text-align:center}
.demo-tag{font-size:11px;font-weight:500;letter-spacing:.08em;background:var(--orange-soft);border:1px solid var(--orange);padding:2px 8px}
.pay-tabs{display:flex;border:1px solid var(--ink)}
.pay-tabs button{flex:1;min-height:44px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink)}
.pay-tabs button[aria-selected=true]{background:var(--ink);color:var(--ground)}
.card-mock{display:flex;flex-direction:column;gap:10px}
.card-mock label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:500}
.card-mock input{min-height:44px;padding:10px;border:1px solid var(--ink);background:var(--paper);font:inherit}
.card-row{display:flex;gap:10px}.card-row label{flex:1}
.pay-confirm{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border:0;background:var(--orange);color:var(--ink);
  font-family:var(--display);font-stretch:125%;font-weight:600;font-size:15px;letter-spacing:.04em;cursor:pointer}
.pay-confirm[disabled]{opacity:.6;cursor:progress}
.pay-note{font-size:12px;color:var(--muted);margin:0;text-align:center}

#order-status .order-no{font-family:var(--mono);font-weight:500;background:var(--ink);color:var(--ground);padding:1px 8px}

/* Logo (header/footer) */
@media (max-width:760px){.site-header .brand-logo img{height:32px!important}}

/* Order page: form on the left, sticky live preview on the right; one column on phones */
.order-form{max-width:1200px;margin:0 auto;padding:56px 16px 96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:56px;row-gap:40px;align-items:start}
.order-form>*{grid-column:1;min-width:0}
.order-form>.preview-panel{grid-column:2;grid-row:1 / span 8; /* 8 = number of other form blocks */position:sticky;top:88px;align-self:start}
@media (max-width:900px){
  .order-form{grid-template-columns:minmax(0,1fr);padding-top:40px}
  .order-form>.preview-panel{grid-column:1;grid-row:auto;position:static}
}
.preview-panel{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
.pv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink)}
.pv-head h2{margin:0;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:15px;letter-spacing:.04em}
:lang(th) .pv-head h2{font-family:inherit;font-stretch:normal;font-size:17px;letter-spacing:0}
.pv-tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;padding:2px 8px;border:1px solid var(--ink)}
.pv-frame{position:relative;padding:16px;background:var(--ground)}
.pv-frame canvas{display:block;width:100%;height:auto;aspect-ratio:1000/1414;box-shadow:0 24px 48px -20px rgba(0,0,0,.55)}
.pv-frame canvas[hidden]{display:none}
.pv-empty{position:relative;aspect-ratio:1000/1414;display:grid;place-items:center;overflow:hidden;border:1px dashed var(--muted)}
.pv-empty[hidden]{display:none}
.pv-empty img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.pv-empty p{position:relative;margin:0;padding:20px;text-align:center;font-size:14px;line-height:1.55;max-width:260px}
.pv-busy{position:absolute;left:16px;right:16px;top:16px;padding:8px 12px;background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:12px}
.pv-busy[hidden]{display:none}
.pv-note{margin:0;padding:12px 16px;font-size:13px;line-height:1.5;border-top:1px solid var(--ink)}
.pv-price{padding:16px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:12px}
.pv-price .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pv-price ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.pv-price .pay-with{font-size:12px;color:var(--muted)}
@media (max-width:900px){.pv-frame{padding:16px 12%}}
/* Floating mini preview on phones */
.pv-mini{position:fixed;right:12px;bottom:12px;z-index:40;padding:4px;border:1px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);cursor:pointer;line-height:0}
.pv-mini canvas{display:block;width:72px;height:102px}
.pv-mini[hidden]{display:none}
@media (min-width:901px){.pv-mini{display:none!important}}
/* App numbers (optional) */
.app-nums summary{cursor:pointer;font-size:14px;font-weight:500;min-height:32px;display:flex;align-items:center}
.app-nums .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:12px}
@media (max-width:480px){.app-nums .grid{grid-template-columns:minmax(0,1fr)}}
.final-check{margin:0;padding:12px 16px;border:1px solid var(--ink);background:var(--paper);font-size:14px;line-height:1.55}
.file-state.wait{border-color:var(--muted);background:var(--paper);color:var(--ink)}
/* Payment sheet extras */
.pay-top{display:flex;gap:16px;align-items:flex-start}
.pay-thumb{width:72px;height:auto;flex:none;border:1px solid var(--ink)}
.pay-top .pay-summary{flex:1;min-width:0}
.card-pay{gap:12px}
.stripe-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;background:var(--ink);color:var(--ground)!important;text-decoration:none;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:14px;letter-spacing:.04em}
.demo-tag{text-align:center;line-height:1.45}
/* Skip link */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--ground)!important;padding:10px 14px}
.skip:focus{left:8px}

/* Preview zoom */
.pv-frame canvas{cursor:zoom-in}
.pv-zoom-hint{position:absolute;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:12px;cursor:pointer}
:lang(th) .pv-zoom-hint{font-family:inherit;font-size:13px}
.pv-zoom-hint[hidden]{display:none}
.pv-zoom{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#16171a;color:var(--ground)}
.pv-zoom::backdrop{background:#16171a}
.pv-zoom[open]{display:flex;flex-direction:column}
.pz-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #34363b;flex:none}
.pz-levels{display:flex;border:1px solid #8d8f94}
.pz-levels button{min-width:56px;min-height:40px;border:0;background:none;color:var(--ground);font-family:var(--mono);font-size:13px;cursor:pointer}
.pz-levels button[aria-pressed=true]{background:var(--ground);color:var(--ink)}
.pz-close{width:44px;height:44px;border:0;background:none;color:var(--ground);display:grid;place-items:center;cursor:pointer}
.pz-stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.pz-stage canvas{display:block;margin:0 auto;cursor:zoom-in;max-width:none}
.pz-stage.is-fit{display:grid;place-items:center;padding:12px;box-sizing:border-box}
.pz-stage.is-fit canvas{width:auto!important;height:auto;max-width:100%;max-height:calc(100dvh - 90px)}

/* No image save menu on previews */
.pv-frame canvas,.pz-stage canvas,.pv-mini canvas,.pay-thumb{pointer-events:none;-webkit-user-drag:none}
.pv-frame,.pz-stage,.pv-mini,.pay-top{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pv-frame:has(canvas:not([hidden])){cursor:zoom-in}
.pz-stage{cursor:zoom-in}

/* Your numbers */
.nums{margin:0;padding:24px 0 0;border:0;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:16px;min-width:0}
.nums[hidden],.nums-grid[hidden]{display:none}
.nums-intro{margin:0;font-size:13px;color:var(--muted)}
.nums-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nums-grid label{display:flex;flex-direction:column;gap:6px;min-width:0}
.nums-grid label>span{font-size:13px;font-weight:500}
:lang(th) .nums-grid label>span{font-size:14px;font-weight:600}
.num-in{width:100%;box-sizing:border-box;min-height:48px;padding:12px;border:1px solid var(--ink);border-radius:0;background:var(--paper);font:inherit;color:var(--ink)}
.num-in.is-edited{background:var(--orange-soft);border-color:var(--orange)}
.num-in:invalid{border-color:var(--err);background:var(--err-soft)}
.nums-hint{grid-column:1 / -1;margin:-4px 0 0;font-size:12px;color:var(--muted)}
.nums-reset{align-self:flex-start;min-height:44px;padding:0 16px;border:1px solid var(--ink);background:none;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
@media (max-width:560px){.nums-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}