* { box-sizing:border-box; }
body { margin:0; color:#171717; background:#f5f5f5; font-family:Arial,Helvetica,sans-serif; font-size:16px; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.4; }
button:focus-visible { outline:3px solid #111; outline-offset:2px; }
.site-shell { min-height:100vh; padding:20px 12px 40px; background:#f4f4f4; }
.page-wrap { position:relative; max-width:1200px; margin:auto; padding:clamp(16px,3vw,34px); border:1px solid #d6d6d6; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 8px 28px #0000000b; overflow:hidden; }
.page-wrap::before { content:""; position:absolute; inset:0; background-image:url('bakery-background.png'); background-size:560px auto; background-position:right top; opacity:.12; pointer-events:none; }
.page-wrap > * { position:relative; }
.page-header { margin-bottom:23px; }
.eyebrow { display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#555; margin-bottom:7px; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.1rem); line-height:1.1; font-weight:700; }
h2 { margin:0; font-family:Georgia,serif; font-size:1.35rem; }
.summary, .orders { background:rgba(255,255,255,.95); border:1px solid #d8d8d8; border-radius:12px; }
.summary { padding:16px; margin-bottom:16px; }
.summary h2 { margin-bottom:12px; }
.total-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:7px 20px; }
.total-item { display:flex; gap:8px; justify-content:space-between; align-items:baseline; border-bottom:1px solid #e5e5e5; padding:5px 0; font-size:.94rem; }
.total-item strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.orders { overflow:hidden; }
.orders-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:5px 20px; padding:17px 16px 10px; }
.orders-heading span { color:#555; font-size:.82rem; }
.table-note { display:none; font-size:.8rem; color:#555; padding:0 16px 10px; }
.order-table { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:.94rem; }
.order-table th, .order-table td { padding:10px 8px; border-top:1px solid #e3e3e3; text-align:center; vertical-align:middle; }
.order-table thead th { background:#ececec; color:#222; white-space:normal; line-height:1.2; min-width:138px; font-size:.86rem; font-weight:700; }
.order-table .person-head, .order-table .person-name { position:sticky; left:0; z-index:1; min-width:100px; max-width:100px; text-align:left; padding-left:16px; box-shadow:2px 0 4px #0000000e; }
.order-table .person-head { z-index:2; background:#ececec; }
.order-table .person-name { background:#fff; font-weight:700; white-space:nowrap; }
.order-table tbody tr:nth-child(even) td, .order-table tbody tr:nth-child(even) .person-name { background:#fafafa; }
.counter { display:flex; align-items:center; justify-content:center; gap:3px; }
.counter button { width:44px; height:44px; flex:none; border:1px solid #555; border-radius:8px; background:#fff; color:#111; font-size:1.7rem; line-height:1; font-weight:500; touch-action:manipulation; }
.counter button:last-child { background:#151515; color:#fff; border-color:#151515; }
.counter output { min-width:31px; text-align:center; font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.reset-button { display:block; margin:18px 0 0 auto; min-height:48px; padding:0 19px; background:#fff; color:#a10b0b; border:2px solid #a10b0b; border-radius:8px; font-size:1rem; font-weight:700; }
.error { margin:0 16px 12px; padding:10px 12px; background:#fff2f2; border:1px solid #d59595; border-radius:6px; color:#7b0e0e; }
.error button { text-decoration:underline; margin-left:6px; font-weight:700; }
@media(max-width:700px) { .site-shell { padding:0; } .page-wrap { border-radius:0; padding:18px 0 26px; min-height:100vh; } .page-header, .summary, .reset-button { margin-left:12px; margin-right:12px; } .summary { padding:13px; } .total-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 14px; } .total-item { font-size:.83rem; } .total-item strong { font-size:1rem; } .orders { border-left:0; border-right:0; border-radius:0; } .table-note { display:block; } .order-table .person-head, .order-table .person-name { min-width:94px; max-width:94px; padding-left:10px; } .order-table thead th { min-width:136px; } .reset-button { width:calc(100% - 24px); } }

.table-scroll { overflow-x: auto; }