@font-face{font-family:Kopini;src:url(assets/fonts/josefin-sans.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--primary:#354F5D;--accent:#D4A359;--surface:#ECE5DC;--canvas:#FAF8F5;--midnight:#1C272E;--page:var(--canvas);--card:var(--surface);--tile:var(--primary);--gold:var(--accent);--passive:var(--surface);--ink:var(--midnight);--grey:#556977;--price:var(--primary);--button:var(--primary);--white:#FFFFFF;--muted-text:#556977;--line:#DACEC0;--radius:26px}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font:16px/1.35 Kopini,system-ui,sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit;background:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button svg{pointer-events:none}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}h1,h2,h3,p{margin:0}h1{font-size:28px;font-weight:500}h2{font-size:24px;font-weight:500}a{color:var(--price)}#app{max-width:430px;min-height:100dvh;margin:auto;padding:18px 0 112px}.header{height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 17px}.header h1{font:700 14px Kopini,system-ui;letter-spacing:2.5px;text-transform:uppercase}.icon{width:44px;height:44px;display:grid;place-items:center;color:var(--tile)}.icon.star{background:rgba(212,163,89,.15);border-radius:50%;color:var(--gold);width:40px;height:40px}.star.selected svg{fill:currentColor}.segments{margin:19px 43px 25px;display:flex;background:var(--passive);border-radius:40px;padding:3px;box-shadow:0 5px 20px #00000004}.segments button{flex:1;border-radius:40px;height:40px;color:#9A6D24;font-size:14px;white-space:nowrap}.segments .active{background:var(--gold);color:var(--passive)}.category{padding:0 0 20px;margin:0 25px 17px;border-bottom:1px solid var(--line)}.category-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}.pill{border-radius:30px;background:rgba(212,163,89,.15);padding:5px 14px;font-size:12px;letter-spacing:.8px;color:#9A6D24;display:inline-block}.category-head button{font-size:12px;color:#9A6D24;padding:8px 0}.category-head svg{width:17px;height:17px}.cards{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin-right:-25px;padding:0 25px 7px 0}.cards::-webkit-scrollbar{display:none}.card{position:relative;flex:0 0 146px;padding:8px 8px 21px;border-radius:24px;background:var(--card);box-shadow:0 7px 15px #354F5D15;text-align:center;min-width:0}.photo-tile{height:129px;background:var(--tile);border-radius:23px;display:grid;place-items:center;overflow:hidden}.photo-tile img{width:100%;height:100%;object-fit:contain}.photo-tile img.fallback{width:46%;height:46%;object-fit:contain;opacity:.9}.dash{width:23px;height:3px;border-radius:4px;background:#D4A359;margin:14px auto 10px}.card h3{font-size:15px;line-height:1.25;font-weight:600}.card .money{font-size:12px;color:var(--price);margin-top:6px}.card.unavailable{opacity:.48}.badge{position:absolute;top:15px;left:8px;right:8px;border-radius:12px;background:var(--passive);color:#5c4e35;font:11px system-ui;padding:4px}.bottom-nav{position:fixed;z-index:4;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:402px;min-height:76px;border-radius:30px;background:#FFFFFF;box-shadow:0 4px 25px #00000006;display:flex;justify-content:space-around;align-items:center;padding:9px 8px}.bottom-nav button{position:relative;min-width:52px;height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:9px;text-transform:uppercase;color:#7B6E64}.bottom-nav button.active{color:var(--tile)}.bottom-nav .active:before{content:'';position:absolute;top:-7px;width:21px;height:3px;background:#D4A359;border-radius:3px}.bottom-nav svg{width:22px;height:22px}.detail{padding-bottom:25px}.hero-photo{height:226px;display:flex;align-items:center;justify-content:center}.hero-photo img{width:85%;height:100%;object-fit:contain}.hero-photo img.fallback{width:47%;height:85%}.detail-sheet{background:#FFFFFF;border-radius:28px 28px 0 0;padding:5px 26px 24px;text-align:center;min-height:390px}.detail-sheet h2{font-size:29px;letter-spacing:.2px;margin-bottom:7px}.description{font-size:14px;color:var(--muted-text);line-height:1.2;max-width:290px;margin:0 auto 17px}.price{font-size:27px;color:var(--price);margin:15px 0 12px}.custom-title{border-top:1px solid var(--line);padding-top:15px;margin-bottom:7px}.custom-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;font-size:15px}.custom-row span:last-child{color:#9A6D24;text-align:right;font-size:13px;max-width:65%}.custom-row svg{width:15px;height:15px}.detail-add{display:flex;justify-content:flex-end;margin:16px -3px -1px}.primary{background:var(--button);color:white;padding:12px 26px;border-radius:28px;min-height:44px}.primary:disabled{background:#556977}.detail-bar{gap:6px;min-height:57px;padding:0 12px}.detail-bar .location{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.cart-button{position:relative;border-left:1px solid var(--line);padding:5px 12px}.count{position:absolute;top:-2px;right:1px;background:var(--gold);color:#fff;font-size:10px;border-radius:50%;min-width:17px;line-height:17px}.body{padding:15px 25px}.muted{color:var(--muted-text);font-size:14px}.empty{text-align:center;padding:75px 20px;color:var(--muted-text)}.empty img{width:90px;display:block;margin:0 auto 20px}.empty h2{color:var(--tile);margin-bottom:15px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid .card{width:100%}.search{display:flex;gap:10px;margin-bottom:20px}input,textarea,select{width:100%;border:1px solid #DACEC0;background:#FFFFFF;border-radius:14px;padding:13px 14px;color:var(--ink);outline-offset:3px}textarea{min-height:100px;resize:vertical}.search input{min-width:0}.cart-line{display:flex;gap:13px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}.cart-line img{width:70px;height:70px;border-radius:17px;background:var(--tile);object-fit:contain}.cart-line>div{min-width:0;flex:1}.cart-line h3{font-size:18px;font-weight:500}.cart-line .muted{font-size:12px;margin:5px 0}.quantity{display:flex;align-items:center;gap:10px;margin-top:8px}.quantity button{background:var(--card);width:30px;height:30px;border-radius:50%}.quantity .remove{width:auto;border-radius:0;background:none;margin-left:auto;color:#8b453a;font-size:12px}.summary{margin:24px 0}.summary>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0}.summary .total{font-size:23px;border-top:1px solid var(--line);margin-top:10px;padding-top:17px;color:var(--price)}.wide{width:100%;margin-top:15px}.form-field{display:block;margin:20px 0}.form-field>span{display:block;margin:0 0 8px}.form-field small{display:block;margin-top:6px;color:var(--muted-text)}.radio-card{display:flex;align-items:center;gap:12px;background:var(--passive);border:1px solid var(--line);border-radius:17px;padding:15px;margin:12px 0}.radio-card input{width:18px;height:18px;accent-color:var(--button)}.notice{padding:14px 16px;border-radius:17px;background:#ECE5DC;color:#9A6D24;font-size:14px;margin:14px 0}.error{background:#f0dfd8;color:#893d31}.status-card{text-align:center;padding:24px 20px;border-radius:26px;background:var(--passive);margin:18px 0}.status-card .queue{font-size:58px;color:var(--price);margin:20px 0}.qris{width:min(100%,285px);max-height:360px;object-fit:contain;margin:15px auto;display:block}.exact{font-size:35px;color:var(--price);margin:15px 0}.steps{list-style:none;padding:0;margin:25px 0}.steps li{padding:12px 0;color:#7B6E64}.steps li.current{color:var(--price);font-weight:700}.steps li:before{content:'○';margin-right:12px}.steps li.current:before{content:'●'}.info-logo{width:140px;display:block;margin:25px auto}.info{text-align:center}.info h2{margin:16px 0}.info p{margin:15px 0}.loading{text-align:center;padding:100px 30px}dialog{border:0;border-radius:28px 28px 0 0;background:var(--passive);color:var(--ink);padding:25px;max-width:430px;width:100%;max-height:80dvh;position:fixed;inset:auto 0 0;margin:auto;box-shadow:0 -10px 50px #0002}dialog::backdrop{background:#354F5D66}dialog h2{margin:8px 0 20px}dialog .choice{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:15px 0}dialog input{width:20px;height:20px;accent-color:var(--button)}dialog .choice span{flex:1}#toast{position:fixed;z-index:8;top:15px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);background:var(--tile);color:white;border-radius:18px;padding:13px 18px;opacity:0;pointer-events:none;transition:opacity .15s;font-size:14px}#toast.visible{opacity:1}.floating-cart{position:fixed;bottom:110px;right:max(20px,calc((100vw - 390px)/2));background:var(--button);color:#fff;border-radius:50%;width:51px;height:51px;box-shadow:0 5px 15px #354F5D22;z-index:3}@media(min-width:600px){body{background:#ECE5DC}#app{background:var(--page);box-shadow:0 0 70px #354F5D10}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Brand revision: only palette changes; reference geometry is retained. */
.segments .active{color:var(--midnight)}.pill,.category-head button,.custom-row span:last-child{color:#9A6D24}.bottom-nav,.detail-sheet{background:var(--white)}.header>button,.header>h1{transform:translateY(12px)}.primary:hover{background:var(--midnight)}
/* Reference look (soft gold pill, plain "see all" link) with WCAG AA: small gold text uses a deeper brass derived from #9A6D24. */
.pill{background:rgba(212,163,89,.18);box-shadow:inset 0 0 0 1px rgba(212,163,89,.4)}.category-head button{background:transparent}.pill,.category-head button,.custom-row span:last-child{color:#7E5617}.segments button{color:var(--primary)}.segments .active{color:var(--midnight)}.notice{color:var(--primary)}