:root{
  --brand-red:#c8102e; --brand-yellow:#ffcc00; --ink:#161616; --muted:#6b7280;
  --card:#ffffff; --bg:#fafafa; --chip:#fff3d1; --chip-active:#ffe27a;
  --ring:rgba(0,0,0,.08); --shadow:0 6px 24px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06); --radius:14px;
}
html[data-theme="dark"]{
  --ink:#f5f5f5; --muted:#c9cdd3; --card:#1c1f24; --bg:#111418;
  --chip:#2a2e34; --chip-active:#37404a; --ring:rgba(255,255,255,.12);
  --shadow:0 6px 24px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--ink);background:var(--bg)}
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(0deg,var(--brand-red),#a90e25);color:#fff;box-shadow:var(--shadow)}
html[data-theme="dark"] .topbar{background:linear-gradient(0deg,#9a0e24,#7f0c1e)}
.topbar-inner{max-width:1120px;margin:auto;padding:14px 16px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;font-size:18px}
.logo-bun{width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 50% 45%,#ffd76a 30%,#ffbc0a 31% 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,.12)}
.search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:28px;padding:10px 12px}
html[data-theme="dark"] .search{background:#2a2e34}
.search input{border:0;outline:0;width:100%;font:inherit;background:transparent;color:inherit}
.cart-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--brand-red);border:0;border-radius:999px;padding:10px 14px;font-weight:700}
html[data-theme="dark"] .cart-btn{background:#2a2e34;color:#ffd76a}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand-yellow);color:#000;font-size:12px}
.theme-toggle{margin-left:8px;border:1px solid #ffd87a;background:var(--chip);border-radius:999px;padding:8px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
html[data-theme="dark"] .theme-toggle{background:#2a2e34;border-color:#3b434c;color:#ffd76a}
.theme-toggle .sun{display:inline}.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}html[data-theme="dark"] .theme-toggle .moon{display:inline}
.catbar{background:#fff4e0;border-bottom:1px solid #ffe2a3}
html[data-theme="dark"] .catbar{background:#171a1f;border-bottom-color:#252a31}
.catbar-inner{max-width:1120px;margin:auto;padding:8px 12px;display:flex;gap:10px;overflow:auto;scrollbar-width:none}
.chip{flex:0 0 auto;padding:10px 14px;border-radius:999px;background:var(--chip);border:1px solid #ffd87a;font-weight:600;cursor:pointer;white-space:nowrap}
html[data-theme="dark"] .chip{border-color:#3b434c}
.chip[aria-current="true"]{background:var(--chip-active);border-color:#ffc400}
.wrap{max-width:1120px;margin:auto;padding:18px 16px 120px}
.hero{background:linear-gradient(90deg,#fff6d9,#ffe8b5);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
html[data-theme="dark"] .hero{background:linear-gradient(90deg,#1c1f24,#242931)}
.hero-badge{background:#fff;border-radius:999px;font-weight:800;padding:8px 12px}
html[data-theme="dark"] .hero-badge{background:#2a2e34;color:#ffd76a}
.hero h1{margin:.2rem 0;font-size:22px}
.hero p{margin:0;color:#7a7a7a}
.grid{display:grid;gap:16px;margin-top:18px;grid-template-columns:repeat(12,1fr)}
@media (max-width:599px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:600px) and (max-width:899px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px) and (max-width:1199px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .08s ease}
.card:active{transform:scale(.995)}
.img{aspect-ratio:4/3;width:100%;background:#fff;display:grid;place-items:center;overflow:hidden}
html[data-theme="dark"] .img{background:#1c1f24}
.img svg{width:80%;height:auto}
.card-body{padding:12px}
.title{font-weight:800;margin:2px 0 6px}
.meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-weight:900;font-size:18px}
.add{border:0;border-radius:12px;padding:10px 12px;background:var(--brand-red);color:#fff;font-weight:800;cursor:pointer}
.sticky-cart{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #eee;padding:10px 12px;display:flex;align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.08)}
html[data-theme="dark"] .sticky-cart{background:#1c1f24;border-top-color:#2a2e34}
.sticky-cart .btn{margin-left:auto;background:var(--brand-red);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:800}
.tot{font-weight:900}
.drawer{position:fixed;top:0;right:-420px;width:360px;max-width:95vw;height:100dvh;background:#fff;box-shadow:-16px 0 40px rgba(0,0,0,.18);transition:right .25s ease;z-index:60;display:flex;flex-direction:column}
html[data-theme="dark"] .drawer{background:#15181d}
.drawer.open{right:0}
.drawer header{padding:16px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
html[data-theme="dark"] .drawer header{border-bottom-color:#252a31}
.drawer h3{margin:0}
.drawer .x{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:inherit}
.cart-items{padding:8px 12px;overflow:auto;flex:1}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px dashed #eee}
html[data-theme="dark"] .cart-item{border-bottom-color:#2a2e34}
.cart-item .thumb{width:52px;height:52px;border-radius:10px;background:#fff7da;display:grid;place-items:center}
html[data-theme="dark"] .cart-item .thumb{background:#2a2e34}
.qty{display:inline-flex;border:1px solid #e5e7eb;border-radius:999px;overflow:hidden}
html[data-theme="dark"] .qty{border-color:#3b434c}
.qty button{border:0;background:#f8f8f8;padding:6px 10px;font-weight:800;cursor:pointer}
html[data-theme="dark"] .qty button{background:#2a2e34;color:#fff}
.qty input{width:36px;border:0;text-align:center;outline:0;background:transparent;color:inherit}
.cart-foot{padding:14px 12px;border-top:1px solid #eee;display:grid;gap:10px}
html[data-theme="dark"] .cart-foot{border-top-color:#252a31}
.proceed{background:var(--brand-yellow);border:0;border-radius:12px;padding:12px 16px;font-weight:900}
.section-title{font-weight:900;font-size:18px;margin:22px 0 8px}
.hide{display:none !important}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Admin */
.admin-wrap{max-width:1100px;margin:24px auto;padding:0 16px;display:grid;gap:16px}
.card-panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px}
fieldset{border:1px dashed #ddd;border-radius:12px;padding:12px}
legend{padding:0 6px;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:transparent;color:inherit}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{border-color:#3b434c}
label{font-weight:700;font-size:14px;margin:8px 0 6px;display:block}
.btn{background:var(--brand-red);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.secondary{background:#2a2e34;color:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee}
html[data-theme="dark"] .table th,html[data-theme="dark"] .table td{border-bottom-color:#2a2e34}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--chip);border:1px solid #ffd87a}