/* ============================================================
   LATS POS — built on the latsactive.com design system.
   Tokens, type and button treatment lifted from assets/lats.css
   so the POS reads as the same brand as the website.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Libre Caslon Display';
  src:url('fonts/caslon-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'LATS Display';
  src:url('fonts/OPTIRailroadGothic.otf') format('opentype');
  font-weight:400 900; font-display:swap;
}

:root{
  /* brand tokens — straight from the website */
  --cream:      #F4F1EB;
  --cream-deep: #ECE8E0;
  --greige:     #C7BFB4;
  --greige-soft:#DDD7CD;
  --ink:        #3B3B36;
  --ink-mid:    #56554E;
  --ink-soft:   #69675F;   /* website's #6E6C64, a shade deeper to clear 4.5:1 on cream-deep */
  --line:       rgba(59,59,54,.14);
  --line-firm:  rgba(59,59,54,.26);
  --sale:       #B23A2E;
  /* the one addition: the brand palette has no warning colour, and a POS
     needs "running low" to read differently from "gone". Ochre, keyed to
     the greige family so it sits inside the system. */
  --warn:       #7E5F22;

  --bg:      var(--cream-deep);
  --surface: var(--cream);

  --ease: cubic-bezier(.22,1,.36,1);
  --tap: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display: none !important; }

html, body { height:100%; overscroll-behavior:none; }

body{
  font-family:'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-variation-settings:'wdth' 100;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column; overflow:hidden;
}

input, button, select, textarea { font:inherit; color:inherit; font-family:inherit; }
button { cursor:pointer; background:none; border:none; }

/* Condensed uppercase — the website's headline treatment, used here for
   every structural label so the POS inherits the same voice. */
.eyebrow, .card h3, .cart-head, .stat-label, .navbtn, .sheet-body label{
  font-variation-settings:'wdth' 78;
  font-weight:700; text-transform:uppercase; letter-spacing:.16em;
}

/* ---------- header ---------- */
header{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.logo{
  font-family:'LATS Display','Archivo',sans-serif;
  font-size:21px; letter-spacing:.14em; text-transform:uppercase; line-height:1;
}
.logo span{ color:var(--ink-soft); }
.head-meta{ display:flex; gap:8px; align-items:center; }
.chip{
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 85;
  padding:7px 12px; border:1px solid var(--line-firm); color:var(--ink-soft);
  white-space:nowrap;
}
.chip.muted{ color:var(--ink-soft); }
.chip.live{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.chip.stale{ color:var(--warn); border-color:var(--warn); }

/* ---------- views ---------- */
.view{ flex:1; min-height:0; display:none; }
.view.active{ display:block; }
.pad{ height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 22px 28px; }
.pad.narrow{ max-width:780px; margin:0 auto; }

/* ---------- sell layout ---------- */
.sell-layout{ display:flex; height:100%; min-height:0; }
.pane-products{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pane-cart{
  width:352px; flex:none; display:flex; flex-direction:column;
  border-left:1px solid var(--line); background:var(--surface);
}
@media (max-width:860px){
  .sell-layout{ flex-direction:column; }
  .pane-cart{ width:100%; border-left:none; border-top:1px solid var(--line); max-height:48%; }
}

/* ---------- toolbar ---------- */
.toolbar{
  flex:none; display:flex; gap:12px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface);
}
.tabs{ display:flex; border:1px solid var(--line-firm); }
.tab{
  padding:11px 18px; min-height:42px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; font-variation-settings:'wdth' 85;
  color:var(--ink-soft); border-right:1px solid var(--line);
}
.tab:last-child{ border-right:none; }
.tab.active{ background:var(--ink); color:var(--cream); }

input[type=search], input[type=text], input[type=tel], input[type=date]{
  background:var(--surface); border:1px solid var(--line-firm); border-radius:0;
  padding:12px 14px; min-height:var(--tap); width:100%;
  outline:none; -webkit-appearance:none; color:var(--ink);
}
input::placeholder{ color:var(--ink-soft); opacity:.72; }
input:focus{ border-color:var(--ink); }
.toolbar input[type=search]{ flex:1; min-width:0; }

/* ---------- product grid ---------- */
.product-grid{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr));
  gap:12px; padding:18px; align-content:start;
}
.pcard{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:16px; text-align:left; min-height:118px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.pcard:active{ border-color:var(--ink); background:var(--greige-soft); }
.pcard.empty{ opacity:.42; }
.pcard .pname{
  font-size:14px; font-weight:700; line-height:1.2;
  text-transform:uppercase; letter-spacing:.05em; font-variation-settings:'wdth' 88;
}
.pcard .pcat{
  font-size:10px; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.18em; margin-top:5px;
}
.pcard .pfoot{ display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; gap:8px; }
.pcard .pprice{ font-size:13px; font-weight:600; letter-spacing:.02em; }
.pcard .pstock{ font-size:11px; color:var(--ink-soft); letter-spacing:.04em; }
.pcard .pstock.low{ color:var(--warn); font-weight:600; }
.pcard .pstock.oos{ color:var(--sale); font-weight:600; }

/* ---------- cart ---------- */
.cart-head{
  flex:none; display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--line);
  font-size:11px; color:var(--ink-soft);
}
.link-btn{
  font-size:11px; color:var(--ink-soft); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; padding:6px; font-variation-settings:'wdth' 85;
}
.link-btn:active{ color:var(--sale); }

.cart-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }
.cart-lines{ flex:0 0 auto; min-height:120px; padding:6px 18px; }
.cart-empty{
  color:var(--ink-soft); font-size:15px; text-align:center; padding:40px 12px;
  font-family:'Libre Caslon Display',serif; font-style:italic;
}

.cline{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.cline:last-child{ border-bottom:none; }
.cline .cinfo{ flex:1; min-width:0; }
.cline .cname{
  font-size:13px; font-weight:700; line-height:1.25;
  text-transform:uppercase; letter-spacing:.05em; font-variation-settings:'wdth' 88;
}
.cline .cvar{ font-size:11px; color:var(--ink-soft); margin-top:4px; letter-spacing:.03em; }
.cline .cdisc{ font-size:10px; color:var(--sale); margin-top:5px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.cline .cright{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cline .camt{ font-size:13px; font-weight:600; white-space:nowrap; }
.cline .cwas{ font-size:10.5px; color:var(--ink-soft); text-decoration:line-through; }

.qty{ display:flex; align-items:center; border:1px solid var(--line-firm); }
.qty button{ width:34px; height:34px; font-size:16px; font-weight:500; color:var(--ink-soft); }
.qty button:active{ background:var(--greige-soft); color:var(--ink); }
.qty .n{ min-width:26px; text-align:center; font-size:12px; font-weight:700; border-left:1px solid var(--line); border-right:1px solid var(--line); line-height:34px; }

.bundle-tag{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  color:var(--cream); background:var(--ink);
  padding:4px 8px; margin-bottom:6px; font-variation-settings:'wdth' 85;
}

.cart-foot{ flex:none; margin-top:auto; padding:14px 18px; border-top:1px solid var(--line); }
.cart-charge{ flex:none; padding:14px 18px calc(14px + var(--safe-b)); border-top:1px solid var(--line); background:var(--surface); }

.bundle-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.bundle-btn{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  font-variation-settings:'wdth' 88;
  padding:11px 14px; min-height:40px; border:1px dashed var(--line-firm); color:var(--ink);
}
.bundle-btn:active{ background:var(--greige-soft); border-style:solid; }

.totals{ margin-bottom:14px; }
.trow{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); padding:4px 0; letter-spacing:.03em; }
.trow.total{
  font-size:19px; font-weight:800; color:var(--ink); padding-top:12px; margin-top:8px;
  border-top:1px solid var(--line-firm); font-variation-settings:'wdth' 88;
  letter-spacing:.04em;
}
/* Uppercase the label only — "Rp" must never render as "RP". */
.trow.total span:first-child{ text-transform:uppercase; }
.accent{ color:var(--sale); }

.pay-row{ display:flex; margin:14px 0; border:1px solid var(--line-firm); }
.pay{
  flex:1; min-height:48px; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; font-variation-settings:'wdth' 85;
  color:var(--ink-soft); border-right:1px solid var(--line);
}
.pay:last-child{ border-right:none; }
.pay.active{ background:var(--ink); color:var(--cream); }

.cust{ margin:10px 0; }
.cust summary{
  font-size:10px; color:var(--ink-soft); padding:12px 0; list-style:none; cursor:pointer;
  text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-variation-settings:'wdth' 85;
}
.cust summary::-webkit-details-marker{ display:none; }
.cust input{ margin-bottom:8px; }

/* ---------- buttons ---------- */
.btn{
  min-height:var(--tap); padding:15px 22px; border-radius:0;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:'wdth' 92;
  border:1px solid transparent; transition:background .3s var(--ease), color .3s var(--ease);
}
.btn.full{ width:100%; display:block; margin-bottom:10px; }
.btn-primary{ background:var(--ink); color:var(--cream); }
.btn-primary:active{ background:var(--ink-mid); }
.btn-primary:disabled{ background:var(--greige-soft); color:var(--ink-soft); cursor:default; }
.btn-ghost{ background:transparent; border-color:var(--line-firm); color:var(--ink); }
.btn-ghost:active{ background:var(--greige-soft); }
.btn-danger{ background:transparent; border-color:var(--sale); color:var(--sale); }
.btn-danger:active{ background:var(--sale); color:var(--cream); }
.charge{ font-size:14px; letter-spacing:.22em; min-height:64px; margin-bottom:0; text-transform:none; }
/* Labels that carry a rupiah figure are written pre-capitalised in JS —
   uppercasing them in CSS would render "Rp" as "RP". */
#btn-cart-discount{ text-transform:none; }

/* ---------- lists ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:1px; margin-bottom:20px; background:var(--line-firm); border:1px solid var(--line-firm); }
.stat{ background:var(--surface); padding:16px 18px; }
.stat-number{ font-size:23px; font-weight:800; letter-spacing:-.01em; font-variation-settings:'wdth' 88; }
.stat-number.accent{ color:var(--ink); }
.stat-label{ font-size:9.5px; color:var(--ink-soft); margin-top:6px; }

.list{ display:flex; flex-direction:column; gap:8px; }
.row{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:15px 17px; display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  min-height:var(--tap);
}
.row:active{ border-color:var(--ink); }
.row .rmain{ flex:1; min-width:0; }
.row .rtitle{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-variation-settings:'wdth' 88; }
.row .rsub{ font-size:11px; color:var(--ink-soft); margin-top:4px; letter-spacing:.04em; }
.row .ramt{ font-size:13.5px; font-weight:600; white-space:nowrap; }
.row.voided{ opacity:.5; }
.row.voided .rtitle{ text-decoration:line-through; }

.badge{
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; font-variation-settings:'wdth' 85; white-space:nowrap;
}
.badge.qris{ background:var(--ink); color:var(--cream); }
.badge.cash{ background:var(--greige); color:var(--ink); }
.badge.transfer{ background:var(--greige-soft); color:var(--ink); border:1px solid var(--line-firm); }
.badge.low{ background:transparent; color:var(--warn); border:1px solid var(--warn); }
.badge.oos{ background:transparent; color:var(--sale); border:1px solid var(--sale); }

.empty-note{
  color:var(--ink-soft); font-size:16px; text-align:center; padding:48px 16px;
  font-family:'Libre Caslon Display',serif; font-style:italic;
}

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); padding:22px; margin-bottom:16px; }
.card h3{ font-size:10.5px; color:var(--ink-soft); margin-bottom:16px; }
.card .hint{ font-size:12px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.hint-inline{ color:var(--ink-soft); font-weight:400; letter-spacing:0; text-transform:none; }
.danger-card{ border-color:rgba(178,58,46,.3); }

.ev-title{
  font-family:'LATS Display','Archivo',sans-serif;
  font-size:27px; letter-spacing:.03em; text-transform:uppercase; line-height:1.05; margin-bottom:7px;
}
.ev-meta{ font-size:11.5px; color:var(--ink-soft); margin-bottom:18px; letter-spacing:.06em; text-transform:uppercase; }

.summary{ display:flex; flex-direction:column; gap:11px; }
.srow{ display:flex; justify-content:space-between; font-size:13px; gap:14px; }
.srow span:first-child{ color:var(--ink-soft); }
.srow span:last-child{ font-weight:600; text-align:right; }
.srow.big{
  font-size:19px; font-weight:800; padding-top:13px; border-top:1px solid var(--line-firm);
  letter-spacing:.04em; font-variation-settings:'wdth' 88;
}
.srow.big span:first-child{ color:var(--ink); text-transform:uppercase; }

.bundle-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.bitem{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); padding:14px 16px; }
.bitem .bmain{ flex:1; min-width:0; }
.bitem .btitle{ font-size:13px; font-weight:700; letter-spacing:.03em; font-variation-settings:'wdth' 88; }
.bitem .bsub{ font-size:11px; color:var(--ink-soft); margin-top:4px; }
.bitem .bdel{ color:var(--ink-soft); font-size:16px; padding:8px 10px; }
.bitem .bdel:active{ color:var(--sale); }

/* ---------- sheets ---------- */
.scrim{ position:fixed; inset:0; background:rgba(59,59,54,.42); z-index:200; backdrop-filter:blur(3px); }
.sheet{
  position:fixed; z-index:201; background:var(--surface);
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(740px, calc(100vw - 32px)); max-height:min(88vh,780px);
  border:1px solid var(--line-firm); border-radius:0;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(59,59,54,.18);
}
.sheet.narrow-sheet{ width:min(470px, calc(100vw - 32px)); }
.sheet-head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:24px 26px 18px; border-bottom:1px solid var(--line);
}
.sheet-head h2{
  font-family:'LATS Display','Archivo',sans-serif;
  font-size:24px; letter-spacing:.03em; text-transform:uppercase; line-height:1.05; font-weight:400;
}
.sheet-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:6px; letter-spacing:.06em; }
.close{ font-size:17px; color:var(--ink-soft); width:44px; height:44px; flex:none; border:1px solid transparent; }
.close:active{ border-color:var(--line-firm); }
.sheet-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 26px calc(26px + var(--safe-b)); }
.sheet-body label{ display:block; font-size:9.5px; color:var(--ink-soft); margin:18px 0 8px; }
.sheet-body label:first-child{ margin-top:0; }
.sheet-actions{ display:flex; gap:12px; margin-top:24px; }
.sheet-actions .btn{ flex:1; margin:0; }

/* variant matrix */
.vmatrix{ display:flex; flex-direction:column; gap:20px; }
.vcolor .vlabel{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-variation-settings:'wdth' 85;
  margin-bottom:10px; display:flex; align-items:center; gap:9px; color:var(--ink-soft);
}
/* circular swatch — matches .sw on the website */
.swatch{ width:13px; height:13px; border-radius:50%; border:1px solid var(--line-firm); flex:none; }
.vsizes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(78px,1fr)); gap:8px; }
.vcell{
  background:var(--surface); border:1px solid var(--line-firm); border-radius:0;
  padding:13px 6px; min-height:66px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.vcell:active:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.vcell:active:not(:disabled) .vqty{ color:var(--greige); }
.vcell:disabled{ opacity:.32; border-style:dashed; }
.vcell .vsz{ font-size:14px; font-weight:700; letter-spacing:.08em; font-variation-settings:'wdth' 88; }
.vcell .vqty{ font-size:10px; color:var(--ink-soft); letter-spacing:.06em; }
.vcell .vqty.low{ color:var(--warn); font-weight:600; }
.vcell.selected{ border-color:var(--ink); background:var(--greige-soft); }

.seg{ display:flex; border:1px solid var(--line-firm); margin-bottom:18px; }
.seg button{
  flex:1; min-height:46px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-variation-settings:'wdth' 85;
  color:var(--ink-soft); border-right:1px solid var(--line);
}
.seg button:last-child{ border-right:none; }
.seg button.active{ background:var(--ink); color:var(--cream); }

.sd-preview{ font-size:14px; color:var(--ink-soft); margin-top:16px; min-height:22px; letter-spacing:.03em; }
.sd-preview b{ color:var(--ink); font-weight:700; }

.chip-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-picker button{
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-variation-settings:'wdth' 85;
  padding:11px 14px; min-height:42px; border:1px solid var(--line-firm); color:var(--ink-soft);
}
.chip-picker button.on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

/* ---------- nav ---------- */
.tabbar{
  flex:none; display:flex; border-top:1px solid var(--line-firm);
  background:var(--surface); padding-bottom:var(--safe-b);
}
.navbtn{
  flex:1; min-height:60px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:10.5px; color:var(--ink-soft);
  border-top:2px solid transparent; margin-top:-1px;
}
.navbtn.active{ color:var(--ink); border-top-color:var(--ink); }
.navbtn b{
  font-size:9px; background:var(--ink); color:var(--cream);
  padding:3px 7px; font-weight:700; letter-spacing:.08em;
}
.navbtn b:empty{ display:none; }

/* ---------- paid screen ---------- */
.paid{ position:fixed; inset:0; z-index:300; background:var(--cream); display:flex; align-items:center; justify-content:center; padding:28px; }
.paid-inner{ text-align:center; max-width:720px; width:100%; }
.paid-label{
  font-family:'Libre Caslon Display',serif; font-style:italic; font-weight:400;
  font-size:17px; letter-spacing:.02em; color:var(--ink-soft); text-transform:none;
}
/* Archivo, not LATS Display: the display face is caps-only, so it renders
   "Rp" as "RP". Heavy + condensed keeps the wordmark feel and fits on one
   line, which matters — this is the number the customer reads. */
.paid-total{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 80;
  font-weight:800;
  font-size:clamp(38px, 8.4vw, 78px); letter-spacing:-.02em;
  color:var(--ink); margin:14px 0 12px; line-height:1;
  white-space:nowrap;
}
.paid-method{
  font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  font-variation-settings:'wdth' 85; color:var(--ink-soft);
}
.paid-items{ font-size:12px; color:var(--ink-soft); margin-top:26px; line-height:1.85; letter-spacing:.04em; }
.paid-no{
  margin-top:16px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; font-variation-settings:'wdth' 85; color:var(--ink);
}
.paid-actions{ display:flex; gap:12px; margin-top:40px; }
.paid-actions .btn{ flex:1; margin:0; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top,0px)); transform:translateX(-50%);
  background:var(--ink); color:var(--cream);
  padding:14px 22px; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-variation-settings:'wdth' 85;
  z-index:400; max-width:calc(100vw - 40px); text-align:center;
  box-shadow:0 10px 30px rgba(59,59,54,.22);
}
.toast.err{ background:var(--sale); color:var(--cream); }