*{box-sizing:border-box;margin:0;padding:0}
:root{
  --br:#3D1F0A;--brm:#6B3517;--brl:#C4956A;--brp:#F0DFD0;
  --gd:#F5C518;--gdd:#C49A10;--gdp:#FDF3C0;
  --wh:#FFFFFF;--ow:#FAF7F4;
  --t1:#1A0E07;--t2:#5C2E0A;--t3:#8B5E3C;
  --bd:#D4B896;
  --ok:#1A5C1A;--okb:#D4EDD4;
  --err:#8B1A1A;--errb:#F5D0D0;
  --warn:#7A3F00;--warnb:#FDE8C0;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;color:var(--t1);background:var(--ow);-webkit-font-smoothing:antialiased}
.app{max-width:430px;margin:0 auto;background:var(--ow);min-height:100vh}
@media(min-width:431px){body{background:#E8DDD4}.app{box-shadow:0 0 40px rgba(0,0,0,.15)}}

/* TOPBAR */
.topbar{background:var(--br);padding:0 14px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.tb-brand{display:flex;align-items:center;gap:10px}
.tb-logo{width:34px;height:34px;min-width:34px;background:var(--gd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--br)}
.tb-name{color:#fff;font-size:15px;font-weight:600;line-height:1.2}
.tb-sub{color:var(--brl);font-size:10px}
.cart-btn{width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.cart-btn i{color:#fff;font-size:20px}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--gd);color:var(--br);font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* SEARCH BAR */
.search-bar{padding:6px 12px 0;position:sticky;top:56px;background:var(--ow);z-index:40}
.search-wrap{display:flex;align-items:center;gap:8px;background:var(--wh);border:1.5px solid var(--bd);border-radius:10px;padding:8px 12px}
.search-wrap i{color:var(--t3);font-size:18px;flex-shrink:0}
.search-wrap input{border:none;background:none;outline:none;font-size:14px;color:var(--t1);flex:1;width:100%}

/* CATEGORY PILLS */
.cat-scroll{display:flex;gap:5px;padding:6px 12px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-pill{display:flex;align-items:center;gap:3px;padding:4px 9px;border-radius:20px;border:1.5px solid var(--bd);font-size:11px;background:var(--wh);color:var(--t2);cursor:pointer;white-space:nowrap;font-weight:500;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.cat-pill.active{background:var(--br);color:#fff;border-color:var(--br)}
.cat-pill i{font-size:14px}

/* PRODUCT GRID */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:6px 10px 100px}
.prod-card{background:var(--wh);border:1.5px solid var(--bd);border-radius:12px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s}
.prod-card:active{transform:scale(.97)}
.prod-img{width:100%;aspect-ratio:1;background:var(--brp);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--brl)}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-info{padding:7px 8px}
.prod-cat{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.02em;margin-bottom:1px}
.prod-name{font-size:11px;font-weight:600;color:var(--t1);line-height:1.3;margin-bottom:3px;min-height:28px}
.prod-price{font-size:13px;font-weight:700;color:var(--br)}
.prod-mo{font-size:10px;color:var(--t3);margin-top:1px}
.prod-mo span{color:var(--ok);font-weight:600}
.empty-state{text-align:center;padding:60px 20px;color:var(--t3)}
.empty-state i{font-size:48px;display:block;margin-bottom:12px;opacity:.4}

/* PAGES */
.pg{display:none;padding-bottom:40px}
.pg.active{display:block}

/* PRODUCT DETAIL PAGE */
.det-hero{background:var(--brp);width:100%;aspect-ratio:1.2;display:flex;align-items:center;justify-content:center;font-size:80px;color:var(--brl)}
.det-body{padding:16px 14px}
.det-cat{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.det-name{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:4px;line-height:1.3}
.det-price{font-size:24px;font-weight:700;color:var(--br);margin-bottom:16px}
.det-divider{height:1px;background:var(--bd);margin:14px 0}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.plan-card{border:1.5px solid var(--bd);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;background:var(--wh);-webkit-tap-highlight-color:transparent}
.plan-card.sel{border-color:var(--br);background:var(--brp)}
.plan-card .pm{font-size:11px;font-weight:700;color:var(--br)}
.plan-card .pp{font-size:13px;font-weight:700;color:var(--t1)}
.plan-card .pt{font-size:10px;color:var(--t3);margin-top:2px}
.action-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--wh);border-top:1.5px solid var(--bd);padding:12px 14px 28px;display:flex;gap:10px;z-index:60}
.btn{padding:13px 14px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;border:none;-webkit-tap-highlight-color:transparent}
.btn:active{opacity:.82;transform:scale(.98)}
.btn-br{background:var(--br)!important;color:#fff!important;border:1.5px solid var(--br)!important;flex:1}
.btn-out{background:var(--wh)!important;color:var(--br)!important;border:1.5px solid var(--br)!important;flex:1}
.btn-gd{background:var(--gd)!important;color:var(--br)!important;border:1.5px solid var(--gdd)!important;width:100%}
.btn-full{width:100%}
.back-btn{width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.back-btn i{color:#fff;font-size:20px}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--wh);border-radius:18px 18px 0 0;padding:20px 20px 40px;width:100%;max-width:430px;max-height:92vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:700;color:var(--br);margin-bottom:6px}
.modal p{font-size:13px;color:var(--t2);margin-bottom:14px;line-height:1.5}
.f{margin-bottom:12px}
.f label{display:block;font-size:12px;color:var(--t2);margin-bottom:4px;font-weight:600}
.f input,.f select,.f textarea{width:100%;padding:10px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:14px;background:var(--wh);color:var(--t1);-webkit-appearance:none}
.f input:focus,.f select:focus{outline:none;border-color:var(--br)}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B3517' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.hint{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.4}
.sum-box{background:var(--brp);border:1.5px solid var(--bd);border-radius:12px;padding:14px;margin:12px 0}
.sum-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd);font-size:13px}
.sum-row:last-child{border:none}
.sum-row .sl{color:var(--t2)}
.sum-row .sv{font-weight:600;color:var(--br)}
.sum-total{background:var(--br);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.sum-total .sl{font-size:12px;color:var(--brl)}
.sum-total .sv{font-size:20px;font-weight:700;color:var(--gd)}
.nt{padding:11px 14px;border-radius:8px;font-size:13px;margin-top:8px;display:none;border:1.5px solid;line-height:1.4}
.nt.ok{background:var(--okb);color:var(--ok);border-color:#90C890}
.nt.err{background:var(--errb);color:var(--err);border-color:#E09090}
.success-screen{text-align:center;padding:40px 20px}
.success-screen i{font-size:64px;color:var(--ok);display:block;margin-bottom:16px}
.success-screen h2{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:8px}
.success-screen p{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:24px}
.type-row{display:flex;gap:8px}
.tb{flex:1;padding:10px;border:1.5px solid var(--bd);border-radius:8px;font-size:13px;text-align:center;cursor:pointer;background:var(--wh);color:var(--t2);font-weight:500;-webkit-tap-highlight-color:transparent}
.tb.sel{border-color:var(--br);color:var(--br);background:var(--brp);font-weight:600}
.bdg{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600}
.b-pend{background:var(--warnb);color:var(--warn)}
.b-ok{background:var(--okb);color:var(--ok)}

.load-more-wrap{text-align:center;padding:10px 14px 20px}
.load-more-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--wh);border:1.5px solid var(--br);border-radius:24px;font-size:13px;font-weight:600;color:var(--br);cursor:pointer;-webkit-tap-highlight-color:transparent}
.load-more-btn:active{background:var(--brp)}
.load-more-btn i{font-size:16px}
.prod-count{text-align:center;font-size:11px;color:var(--t3);padding:4px 0 8px}