/* Layout: fast topbar + fanebjælke, én arbejdsflade pr. fane; kurven altid ét klik væk */
/* Americana Std (licenseret webfont-kit fra MyFonts). Gotham tilføjes, når webbrug er bekræftet; indtil da Montserrat. */
@font-face{font-family:"Americana Std";src:url("fonts/AmericanaStd-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Americana Std";src:url("fonts/AmericanaStd-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Americana Std";src:url("fonts/AmericanaStd-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Farver og skrifter efter Otto Suensons designsystem (guld og sort, Americana/Gotham med Young Serif/Montserrat som reserve).
   Skarpe hjørner, ingen skygger; kun runde elementer (chips, kurvtæller) er runde – "det runde O". */
:root{
  --bg:#f1ede6; --surface:#fbf9f5; --sunk:#e3decc; --fg:#1c1b18; --muted:#5a5650; --line:#e3decc; --line-strong:#cec4a1;
  --accent:#1c1b18; --gold:#c3b78f; --gold-dark:#817044;
  --btn:#1c1b18; --btn-fg:#f1ede6; --btn-hover:#3a3833;
  --ok:#3e4936; --ok-bg:#e1e5d8; --warn:#8a4f38; --warn-bg:#f1e1d3; --bad:#73202c; --bad-bg:#f1dcdc; --info-bg:#e4e5ea; --info:#262937;
  --serif:"Americana Std","Americana","Young Serif",Georgia,serif;
  --sans:"Gotham","Montserrat","Helvetica Neue",Arial,sans-serif;
  --r:0px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1c1b18; --surface:#24231f; --sunk:#2a2925; --fg:#f1ede6; --muted:#a39f98; --line:#3a3833; --line-strong:#817044;
  --accent:#c3b78f; --btn:#c3b78f; --btn-fg:#1c1b18; --btn-hover:#cec4a1;
  --ok:#aac893; --ok-bg:#2a3324; --warn:#e7b9a4; --warn-bg:#3a2a22; --bad:#e7a4ad; --bad-bg:#3d1f24; --info-bg:#262937; --info:#bcc3dd;
  color-scheme:dark } }
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.proto{background:var(--info-bg);color:var(--info);font-size:13px}
.proto .wrap{padding-block:6px}
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:20px;width:auto}
.brand .dark{display:none}
@media (prefers-color-scheme: dark){.brand .light{display:none}.brand .dark{display:block}}
.who{margin-left:auto;text-align:right;font-size:13px;color:var(--muted);min-width:0}
.who b{color:var(--fg);font-weight:600;display:block;font-size:14px}
.cartbtn{display:inline-flex;align-items:center;gap:8px;background:var(--btn);color:var(--btn-fg);border:0;border-radius:var(--r);padding:9px 16px;font:500 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cartbtn:hover{background:var(--btn-hover)}
.cartbtn .n{background:var(--btn-fg);color:var(--btn);border-radius:999px;font-size:12px;padding:1px 7px;font-variant-numeric:tabular-nums}
nav.tabs{border-top:1px solid var(--line)}
nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
nav.tabs a{padding:12px 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
nav.tabs a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--gold)}
nav.tabs a .badge{background:var(--warn-bg);color:var(--warn);border-radius:999px;font-size:11px;padding:1px 7px;margin-left:6px;font-weight:600}
main .wrap{padding-block:24px 64px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px}
@media (max-width:860px){main .wrap{grid-template-columns:minmax(0,1fr)} aside{order:2}}
h1{font-family:var(--serif);font-weight:700;font-size:32px;line-height:1.1;margin:0 0 4px;text-wrap:balance}
h2{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line-strong)}
.sub{color:var(--muted);margin:0 0 18px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
input[type=search],input[type=text],input[type=date],input[type=number],select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 11px}
input[type=search]{flex:1 1 260px;min-width:0}
textarea{width:100%;min-height:70px;resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label.chk{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
.list{background:var(--surface);border:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 170px 120px 190px;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.head{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.18em;padding-block:10px}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.row.head{display:none}.row>div:first-child,.row .st{grid-column:1/-1}.row .pr{text-align:left}.row .buy{flex-wrap:nowrap}}
.pname{font-weight:600}
.pmeta{color:var(--muted);font-size:13px}
.pmeta .no{font-variant-numeric:tabular-nums}
.note{font-size:13px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ok{background:var(--ok-bg);color:var(--ok)} .warn{background:var(--warn-bg);color:var(--warn)} .bad{background:var(--bad-bg);color:var(--bad)} .info{background:var(--info-bg);color:var(--info)}
.chip.plain::before{display:none}
.pr{text-align:right;font-variant-numeric:tabular-nums}
.pr .net{font-family:var(--sans);font-size:16px;font-weight:700}
.pr .list-p{color:var(--muted);font-size:12.5px;text-decoration:line-through}
.buy{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.qty{width:68px;height:32px;padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums}
.btn{font:500 13px var(--sans);letter-spacing:.06em;border-radius:var(--r);padding:8px 14px;cursor:pointer;border:1px solid var(--btn);background:var(--btn);color:var(--btn-fg)}
.btn:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.vsel{padding:4px 6px;font-size:13px}
aside .card{background:var(--surface);border:1px solid var(--line);padding:16px;margin-bottom:16px}
aside .card h3{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0 0 8px;font-weight:500;padding-bottom:6px;border-bottom:1px solid var(--line-strong)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-variant-numeric:tabular-nums}
.kv span:first-child{color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted)}
details.order{border-top:1px solid var(--line)}
details.order:first-child{border-top:0}
details.order summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:120px minmax(0,1fr) 140px 130px;gap:14px;padding:14px 16px;align-items:center}
details.order summary::-webkit-details-marker{display:none}
@media (max-width:760px){details.order summary{grid-template-columns:minmax(0,1fr) auto}}
.olines{padding:0 16px 16px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.18em}
td.r,th.r{text-align:right}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);padding:14px 16px}
.stat .l{color:var(--muted);font-size:13px}
.stat .v{font-family:var(--serif);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.banner{padding:12px 14px;margin-bottom:14px;font-size:14px}
.sum{display:flex;justify-content:flex-end}
.sum table{max-width:340px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;font-size:14px;max-width:calc(100% - 32px);z-index:20}
.muted{color:var(--muted)}
a{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.row,.btn{transition:background .12s}}

/* Se som kunde (kun for Otto Suenson) */
.viewas{background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--warn);font-size:14px;position:sticky;top:0;z-index:6}
.viewas .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-block:8px}

/* Kompakt visning (standard på mobil): én linje pr. vin, antal med − og +, fast bundbjælke */
.clist .crow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.clist .crow:first-child{border-top:0}
.clist .crow.has{background:#efeae0}
.clist .crow.total{display:flex;justify-content:space-between;padding-block:12px}
.cinfo{all:unset;display:flex;gap:10px;align-items:center;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
div.cinfo{cursor:default}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok,.dot.warn,.dot.bad{background:currentColor}
.ctext{display:grid;min-width:0;gap:1px}
.cname{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta b{color:var(--fg);font-family:var(--sans);font-weight:700;font-size:14px}
.cmeta s{font-size:12px}
.cmeta .ny{color:var(--warn)}
.step{display:flex;align-items:center}
.sbtn{width:38px;height:38px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font:400 20px/1 var(--sans);cursor:pointer;padding:0;border-radius:var(--r);-webkit-tap-highlight-color:transparent}
.sbtn:active{background:var(--sunk)}
.cq{width:48px;height:38px;text-align:center;border:1px solid var(--line-strong);border-left:0;border-right:0;border-radius:0;font:500 16px var(--sans);background:var(--surface);color:var(--fg);padding:0;font-variant-numeric:tabular-nums}
.cna{font-size:12.5px;color:var(--bad);padding-right:4px}
.cdetail{grid-column:1/-1;font-size:13px;color:var(--muted);padding:2px 0 6px 19px;display:grid;gap:6px}
.viewtoggle{text-align:center;padding:16px;font-size:13px}
.cbar[hidden]{display:none}
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px))}
.cbar div{display:grid;font-size:14px;line-height:1.3;min-width:0}
.cbar div span{font-size:12.5px;opacity:.75}
.cbar .btn{background:var(--gold);color:#1c1b18;border-color:var(--gold);padding:11px 18px;white-space:nowrap}
.cbar .btn.ghost{background:transparent;color:var(--bg);border-color:var(--bg);text-decoration:none}
.cbar .btn[disabled]{opacity:.5}
body.hasbar main .wrap{padding-bottom:110px}
body.hasbar .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.barsend .send-actions{display:none}
@media (max-width:860px){body.compact aside{display:none}}
@media (max-width:760px){
  .top .wrap{padding-block:8px;gap:10px;flex-wrap:nowrap}
  .brand img{height:15px}
  .who{font-size:12px;overflow:hidden}
  .who span{display:none}
  .who b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cartbtn{padding:8px 12px;font-size:12px}
  nav.tabs a{padding:10px 9px;font-size:11px;letter-spacing:.1em}
  main .wrap{padding-block:16px 48px}
  h1{font-size:26px}
  .sub{font-size:14px;margin-bottom:12px}
  .toolbar{gap:8px}
  .toolbar input[type=search]{flex-basis:100%}
  .viewas .wrap{font-size:12px;padding-block:5px}
  .form{grid-template-columns:1fr;gap:10px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Sikring mod vandret scroll på smalle skærme: alt skal kunne ses uden at scrolle til højre */
html,body{overflow-x:hidden}
main .wrap>*{min-width:0}
.form label{min-width:0}
.form input,.form select,.form textarea{width:100%;min-width:0;max-width:100%}
.pname,.cname,.pmeta{overflow-wrap:anywhere}
@media (max-width:380px){.sbtn{width:34px}.cq{width:42px}.clist .crow{padding-inline:10px;gap:8px}.cbar .btn{padding:10px 14px}}