:root { --ink:#171816; --muted:#777a71; --line:#e5e5df; --paper:#f5f5f0; --white:#fff; --green:#284c3a; --lime:#dce8ae; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.shell { display:grid; grid-template-columns:88px minmax(680px,1fr) 390px; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 13px; border-right:1px solid var(--line); background:#10110f; display:flex; flex-direction:column; align-items:center; }
.brand { text-decoration:none; width:50px;height:50px;border-radius:50%;border:1px solid #5e6c5f;display:grid;place-items:center;color:#eef0e7;font:700 15px Manrope;letter-spacing:-1px; }
.sidebar nav { margin:auto 0; display:grid; gap:13px; }
.nav-button { border:0;background:none;color:#72766e;width:62px;height:58px;border-radius:12px;font-size:22px;cursor:pointer; }
.nav-button small { display:block;font-size:9px;margin-top:2px;letter-spacing:.04em; }
.nav-button.active { background:#29332d;color:#f0f2e8; }
.avatar { border:0;background:#dce8ae;width:38px;height:38px;border-radius:50%;font-size:11px;font-weight:700; }
main { padding:31px 38px 48px; overflow:hidden; }
header { display:flex;justify-content:space-between;align-items:center;margin-bottom:28px; }
.eyebrow { margin:0 0 6px;text-transform:uppercase;letter-spacing:.12em;color:#898b83;font-size:10px;font-weight:600; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0;font:700 23px Manrope;letter-spacing:-.04em; }
.header-actions { display:flex;gap:10px; }
.search { width:185px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;padding:0 13px;gap:8px;color:#777; }
.search input { min-width:0;border:0;outline:0;width:100%;font-size:12px; }
.icon-button,.more { position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:white;cursor:pointer; }
.icon-button i { position:absolute;width:5px;height:5px;border-radius:50%;background:#ce6b52;right:8px;top:7px; }
.hero { min-height:220px;border-radius:17px;padding:33px 38px;color:#f7f5e9;background:linear-gradient(115deg,rgba(5,22,13,.87),rgba(28,52,37,.63)),radial-gradient(circle at 78% 10%,#81946d,#213529 60%);position:relative;overflow:hidden;display:flex;justify-content:space-between; }
.hero:after { content:"";position:absolute;width:450px;height:450px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-160px;top:-235px;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.cream { color:#dce8ae; }
.hero h2 { font:700 32px/1.18 Manrope;letter-spacing:-.045em;margin-bottom:14px; }
.hero p:last-child { color:#c8cec5;font-size:12px; }
.hero-mark { z-index:1;align-self:center;margin-right:42px;border:1px solid rgba(255,255,255,.35);border-radius:50%;width:78px;height:78px;display:grid;place-items:center;font:700 22px Manrope;color:#e4e9d5; }
.content-heading { display:flex;align-items:end;justify-content:space-between;margin:31px 0 21px; }
.content-heading h2,.order-title h2 { font:700 19px Manrope;margin-bottom:3px;letter-spacing:-.03em; }
.content-heading p { color:var(--muted);font-size:11px;margin:0; }
.outline-button { border:1px solid #d8d9d2;background:transparent;border-radius:9px;padding:9px 13px;font-size:11px;cursor:pointer; }
.categories { display:flex;gap:8px;margin-bottom:18px; }
.categories button { border:1px solid #dfdfd8;background:transparent;border-radius:20px;padding:8px 16px;font-size:11px;cursor:pointer; }
.categories button.active { background:#1c1e1a;color:white;border-color:#1c1e1a; }
.product-grid { display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px; }
.product-card { padding:0;text-align:left;border:1px solid #e2e2db;border-radius:13px;background:#fff;overflow:hidden;cursor:pointer;transition:.2s;position:relative; }
.product-card:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(25,28,23,.08); }
.product-visual { height:103px;display:grid;place-items:center;background:radial-gradient(circle,#f3e9d6 0 23%,#e5dbc8 24% 42%,#d4cbb8 43%); }
.product-visual i,.mini-visual i { width:49px;height:30px;border-radius:50%;background:#b66e3d;box-shadow:inset 0 7px #e5b66b,inset 0 -6px #6d492e;transform:rotate(-5deg); }
.product-visual.salad { background:radial-gradient(circle,#dbe3c3,#bec8a3); }.product-visual.salad i { background:#769050;box-shadow:8px -5px #9eb06e,-9px 3px #526d42; }
.product-visual.beer,.product-visual.drink,.product-visual.lemon { background:radial-gradient(circle,#e7d2af,#c9ac7e); }.product-visual.beer i,.mini-visual.beer i { width:24px;height:49px;border-radius:4px 4px 8px 8px;background:#e1a63b;box-shadow:inset 0 7px #fff4d0; }
.product-visual.drink i { width:31px;height:45px;border-radius:4px 4px 13px 13px;background:#8c3342;box-shadow:inset 0 6px rgba(255,255,255,.45); }
.product-visual.cap i { background:#315642;border-radius:50% 50% 12px 12px;box-shadow:14px 13px #244433; }.product-visual.towel i { border-radius:4px;background:#315642;box-shadow:inset 0 0 0 3px #496d59; }
.product-copy { min-height:118px;padding:14px;display:flex;flex-direction:column; }
.product-copy b { font:600 12px Manrope;margin-bottom:5px; }.product-copy small { color:#85877e;font-size:9px;line-height:1.4;min-height:30px; }.product-copy strong { font-size:11px;margin-top:auto; }
.add { position:absolute;right:12px;bottom:12px;width:25px;height:25px;border-radius:50%;background:#eff1e9;display:grid;place-items:center;font-size:16px; }
.order-panel { position:sticky;top:0;height:100vh;background:#fff;border-left:1px solid var(--line);padding:31px 27px 20px;display:flex;flex-direction:column; }
.order-title { display:flex;justify-content:space-between;align-items:center; }.order-title h2 { font-size:22px; }.more { font-size:11px; }
.customer { display:flex;text-align:left;align-items:center;width:100%;border:1px solid var(--line);background:#fafaf7;border-radius:11px;padding:12px;margin:16px 0 24px;cursor:pointer; }
.customer-icon { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8ebdf;font-size:18px;margin-right:10px; }.customer b,.customer small { display:block; }.customer b { font-size:11px; }.customer small { color:#8a8c84;font-size:9px;margin-top:3px; }.customer strong { margin-left:auto;font-size:19px;font-weight:400; }
.order-label { display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:11px;text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:600;color:#8a8c84; }.order-label button { border:0;background:none;color:#8a8c84;font-size:9px;cursor:pointer; }
.order-items { overflow:auto; }.order-item { display:grid;grid-template-columns:47px 1fr auto;gap:10px;padding:15px 0;border-bottom:1px solid #ecece6;align-items:start; }
.mini-visual { width:47px;height:47px;border-radius:8px;background:#ded3be;display:grid;place-items:center;overflow:hidden; }.mini-visual i { transform:scale(.55); }.mini-visual.beer { background:#dfccac; }
.item-info b,.item-info small { display:block; }.item-info b { font-size:11px;margin:2px 0 3px; }.item-info small { font-size:9px;color:#85877e; }.order-item>strong { font-size:10px;margin-top:4px; }
.stepper { display:flex;align-items:center;margin-top:9px;border:1px solid #e0e1da;border-radius:6px;width:max-content;overflow:hidden; }.stepper button { width:24px;height:22px;border:0;background:#f8f8f5;cursor:pointer; }.stepper span { width:23px;text-align:center;font-size:9px; }
.order-bottom { margin-top:auto; }.totals { border-top:1px solid var(--line);padding-top:15px; }.totals p { display:flex;justify-content:space-between;margin-bottom:9px;color:#797b74;font-size:10px; }.totals b { color:#333;font-weight:500; }.totals .total { border-top:1px solid var(--line);padding-top:15px;margin-top:14px;font-size:14px;color:#20211e; }.totals .total b { font:700 19px Manrope; }
.charge { width:100%;border:0;border-radius:10px;background:#1e3f30;color:white;padding:15px 17px;display:flex;justify-content:space-between;font-weight:600;cursor:pointer; }.charge:disabled { opacity:.45;cursor:not-allowed; }.shortcut { color:#9b9c95;text-align:center;font-size:8px;margin:10px 0 0; }.shortcut kbd { border:1px solid #ddd;border-radius:3px;padding:1px 3px;background:#f8f8f5; }
.empty-products { color:var(--muted);font-size:12px; }.empty-cart { display:flex;flex-direction:column;align-items:center;text-align:center;color:#8a8c84;margin-top:55px; }.empty-cart span { font-size:28px; }.empty-cart b { font-size:12px;color:#555;margin:10px 0 4px; }.empty-cart small { font-size:9px; }
@media (max-width:1100px) { .shell { grid-template-columns:72px 1fr 330px; }.product-grid { grid-template-columns:repeat(2,1fr); } main { padding:25px; }.hero-mark { display:none; } }
@media (max-width:800px) { .shell { display:block; }.sidebar { position:fixed;z-index:5;bottom:0;top:auto;width:100%;height:68px;flex-direction:row;padding:8px 16px; }.sidebar nav { display:flex;margin:auto; }.nav-button { height:50px; }.brand,.avatar { width:38px;height:38px; }.order-panel { position:static;height:auto;margin:0 18px 90px;border:1px solid var(--line);border-radius:14px; }.product-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { main { padding:20px 18px; }.search { width:42px; }.search input { display:none; }.hero { padding:27px 24px; }.product-grid { grid-template-columns:1fr; } }