:root {
  --bg: #f5f3ef; --card: #fff; --ink: #1d1b18; --muted: #6b665e; --line: #e4e0d8;
  --brand: #8a5a14; --brand-ink: #fff; --brand-soft: #f6ecdb; --ok: #1f7a3f; --warn: #b26b00; --err: #b3261e;
  --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--brand); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; } h2 { font-size: 1.15rem; margin: 0 0 .75rem; } h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.muted { color: var(--muted); } .center { text-align: center; } .pad { padding: 2rem; } .small { font-size: .85rem; }
.right { text-align: right; } .nowrap { white-space: nowrap; } .hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: #231a10; color: #fff; }
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nav a, .nav button { color: #e9dfcf; text-decoration: none; padding: .4rem .7rem; border-radius: 8px; background: none; border: 0; font: inherit; cursor: pointer; }
.nav a:hover, .nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.active { background: var(--brand); color: #fff; }
.nav .sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 .35rem; }
.nav .who { color: #bfb3a1; font-size: .85rem; padding: 0 .4rem; }
.nav .count { background: #d9822b; color: #fff; border-radius: 99px; font-size: .72rem; padding: 0 .4rem; margin-left: .25rem; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; padding: .3rem .6rem; font-size: 1.1rem; }
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; } .menu-toggle { display: block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; } .nav.open { display: flex; } .nav .sep { display: none; }
}

.app { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1rem; }
.stack > * + * { margin-top: 1rem; }

label { display: block; font-size: .85rem; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: .25rem; }
input, select, textarea { width: 100%; font: inherit; color: inherit; padding: .5rem .65rem; border: 1px solid #cfc9bf; border-radius: 8px; background: #fff; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0 .4rem 0 0; accent-color: var(--brand); }
label.check { display: flex; align-items: center; color: var(--ink); font-size: .95rem; cursor: pointer; }
textarea { min-height: 80px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #cfc9bf; background: #fff; color: var(--ink); font: inherit; font-weight: 500;
  padding: .5rem .9rem; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #faf8f4; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--err); border-color: #e6b8b4; }
.btn.small { padding: .3rem .6rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; justify-content: center; }
.btn.done { background: #e4f4e9; border-color: #9fd3b0; color: var(--ok); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: #faf8f4; }
tr.click { cursor: pointer; } tr.click:hover td { background: #fbf7f0; }
tr.sel td { background: #fdf3e2; }
td.num, th.num { text-align: right; white-space: nowrap; }
.thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #eee; display: block; }

.badge { display: inline-block; padding: .12rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: #eee; color: #444; white-space: nowrap; }
.badge.ny { background: #e3eefc; color: #1a4f99; } .badge.bekreftet { background: #fff1d6; color: #8a5a00; }
.badge.plukket { background: #efe6fb; color: #5b2b99; } .badge.levert { background: #ddf3e4; color: var(--ok); }
.badge.kansellert { background: #f6dedc; color: var(--err); } .badge.off { background: #eee; color: #777; }
.badge.endret { background: #fff1d6; color: #8a5a00; } .badge.warn { background: #ffe7cc; color: #9a4b00; }

.shop { display: grid; grid-template-columns: 1fr 360px; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .shop { grid-template-columns: 1fr; } }
.toolbar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.toolbar > * { flex: 1 1 220px; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .3rem .8rem; cursor: pointer; font: inherit; font-size: .9rem; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cat-title { margin: 1.25rem 0 .6rem; font-size: 1.05rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.item.in-cart { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.item .img { aspect-ratio: 4 / 3; background: #f3efe8; display: grid; place-items: center; cursor: zoom-in; border: 0; padding: 0; width: 100%; }
.item .img img { width: 100%; height: 100%; object-fit: contain; }
.ph { font-size: 2.2rem; font-weight: 700; color: #c9b89c; }
.item .body { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.item .name { font-weight: 600; line-height: 1.25; }
.item .meta { font-size: .8rem; color: var(--muted); }
.item .price { margin-top: auto; padding-top: .4rem; font-weight: 700; font-size: 1.05rem; }
.item .price small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.item .was { font-size: .78rem; color: var(--muted); }
.qty { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; }
.qty button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #cfc9bf; background: #fff; font-size: 1.1rem; cursor: pointer; flex: none; }
.qty button:hover { background: var(--brand-soft); }
.qty input { text-align: center; padding: .35rem; height: 34px; }

.cart { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.cart-line { display: grid; grid-template-columns: 44px 1fr auto auto; gap: .65rem; padding: .65rem .2rem; border-bottom: 1px solid var(--line, #e2e8f0); font-size: .9rem; align-items: center; }
.cart-line:last-child { border-bottom: 2px solid var(--line, #e2e8f0); }
.cart-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line, #e2e8f0); padding: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
.cart-thumb.placeholder { background: var(--bg2, #f5f6f8); font-size: 1.25rem; user-select: none; }
.cart-line-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-line-name { font-weight: 600; color: var(--ink, #1f2937); line-height: 1.3; word-break: break-word; }
.cart-line-meta { color: var(--muted, #64748b); font-size: .82rem; line-height: 1.25; }
.cart-line-price { font-weight: 700; font-size: .98rem; color: var(--ink, #111827); text-align: right; }
.cart-line .x { border: 0; background: none; color: var(--muted, #94a3b8); cursor: pointer; font-size: 1.35rem; line-height: 1; padding: .3rem .45rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.cart-line .x:hover, .cart-line .x:active { background: #fee2e2; color: #dc2626; }
.totals { margin: .75rem 0; font-size: .92rem; }
.totals div { display: flex; justify-content: space-between; padding: .15rem 0; }
.totals .grand { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .4rem; }
.comment-box { background: var(--brand-soft); border: 1px solid #ecd9b8; border-radius: 10px; padding: .6rem .7rem; margin-top: .6rem; }
.comment-box label { color: var(--ink); font-weight: 600; }
.mobile-cart-bar { display: none; }
@media (max-width: 1000px) {
  .cart { position: static; max-height: none; }
  .mobile-cart-bar { display: flex; position: sticky; bottom: 0; z-index: 10; margin: 1rem -1.25rem -1.25rem; padding: .75rem 1.25rem; background: #231a10; color: #fff; justify-content: space-between; align-items: center; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.stat b { display: block; font-size: 1.4rem; }

/* Visma panel */
.visma { border: 2px solid #3d6fb6; border-radius: 12px; padding: 1rem; background: #f4f8fe; margin-bottom: 1rem; }
.visma h3 { margin: 0 0 .6rem; color: #23497f; }
.vfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem; }
.vf { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #cdd9ec; border-radius: 8px; padding: .4rem .5rem .4rem .7rem; min-width: 0; }
.vf .lbl { font-size: .75rem; color: var(--muted); display: block; }
.vf .val { font-family: ui-monospace, Consolas, monospace; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vf > div { flex: 1; min-width: 0; }
.vcols { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.vcols .btn { padding: .65rem 1rem; }
.vsave { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.vsave label { flex: 0 1 220px; }
.vsteps { font-size: .82rem; color: #3a4f6e; margin: .2rem 0 .7rem; }

.overlay { position: fixed; inset: 0; background: rgba(20,15,10,.45); display: grid; place-items: center; padding: 1rem; z-index: 100; overflow: auto; }
.modal { background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.wide { width: min(1000px, 100%); }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.modal header h2 { margin: 0; }
.modal .close { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-body { padding: 1.1rem 1.2rem; overflow: auto; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.1rem; }
.modal-actions .left { margin-right: auto; }

.toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 200; }
.toast { background: #231a10; color: #fff; padding: .7rem 1rem; border-radius: 10px; box-shadow: var(--shadow); max-width: 380px; }
.toast.error { background: var(--err); } .toast.ok { background: var(--ok); }

.login { max-width: 400px; margin: 8vh auto; }
.login-header { text-align: center; margin-bottom: 1.25rem; }
.login-header h1, .login h1 { margin-bottom: .25rem; text-align: center; }
.login-header .login-tagline, .login-tagline, .login h1 + p.muted { text-align: center; margin-top: 0; margin-bottom: 0; }
.notice { background: var(--brand-soft); border: 1px solid #ecd9b8; border-radius: 10px; padding: .75rem 1rem; }
.notice.err { background: #fbeceb; border-color: #f0c4c0; }
.notice.ok { background: #e4f4e9; border-color: #9fd3b0; }
.news { border-left: 3px solid var(--brand); padding: .25rem 0 .25rem 1rem; margin-bottom: 1rem; }
.prewrap { white-space: pre-wrap; }
.addr-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; }
.addr-list h4 { margin: .5rem 0 .25rem; font-size: .85rem; color: var(--muted); }
.big-img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto 1rem; border-radius: 8px; }
.days { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.bulkbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: #fdf3e2; border: 1px solid #ecd9b8; border-radius: 10px; padding: .5rem .75rem; margin-bottom: .75rem; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem 1rem; margin: 0; }
legend { font-weight: 600; padding: 0 .3rem; }

@media (max-width: 520px) {
  .app { padding: .9rem; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .item .img { aspect-ratio: 1; } .item .body { padding: .55rem; }
  .qty button { width: 30px; height: 32px; }
  .mobile-cart-bar { margin: 1rem -.9rem -.9rem; }
}
@media print {
  .topbar, .no-print, .toasts, .btn, .visma { display: none !important; }
  body { background: #fff; } .app { padding: 0; max-width: none; } .card { box-shadow: none; border: 0; padding: 0; }
  .overlay { position: static; background: none; padding: 0; display: block; }
  .modal { box-shadow: none; max-height: none; width: 100%; } .modal header .close { display: none; }
  body.printing-modal .app { display: none; }
}

/* v1.2 */
.topbar { background: var(--header, #231a10); }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-logo { max-height: 34px; max-width: 160px; object-fit: contain; }
.login-logo { display: flex; justify-content: center; margin-bottom: .75rem; }
.login-logo img { max-height: 80px; max-width: 240px; object-fit: contain; display: block; margin: 0 auto; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .45rem .9rem; cursor: pointer; font: inherit; }
.tab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
code { background: #f1ede6; padding: .05rem .35rem; border-radius: 4px; font-size: .85em; }

/* v1.4 – shop layout */
.chiprow { display: flex; gap: .75rem; align-items: flex-start; }
.chiprow .chips { flex: 1; }
.viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.vt { border: 0; background: #fff; padding: .3rem .65rem; font-size: 1.05rem; cursor: pointer; color: var(--muted); }
.vt.on { background: var(--brand); color: #fff; }
.chip.fav-chip { font-weight: 600; }
.small-chips { margin-top: -.4rem; align-items: center; }
.small-chips .chip { font-size: .8rem; padding: .2rem .6rem; }
.items { grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 170px), 1fr)); }
body[data-cards="small"] { --card-min: 140px; --img-h: 100px; }
body[data-cards="medium"] { --card-min: 170px; --img-h: 130px; }
body[data-cards="large"] { --card-min: 210px; --img-h: 180px; }
.imgwrap { position: relative; }
.item .img { aspect-ratio: auto; height: var(--img-h, 130px); padding: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.item .img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; }
body[data-cards="small"] .item .name { font-size: .88rem; } body[data-cards="small"] .item .body { padding: .5rem .55rem .6rem; }
body[data-cards="small"] .item .price { font-size: .95rem; }
body.img-blend .item .img, body.img-blend .lthumb { background: #fff; }
body.img-blend .item .img img, body.img-blend .lthumb img { mix-blend-mode: multiply; }
.ibadges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.ibadge { display: inline-block; color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .03em; padding: .12rem .42rem; border-radius: 5px; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); vertical-align: middle; }
.ibadge.sm { font-size: .65rem; padding: .05rem .32rem; }
.star { border: 0; background: rgba(255,255,255,.85); color: #b8860b; font-size: 1.15rem; line-height: 1; width: 30px; height: 30px; border-radius: 99px; cursor: pointer; }
.imgwrap .star { position: absolute; top: 4px; right: 4px; }
.star:not(.on) { color: #9a958c; }
.star:disabled { cursor: default; opacity: .9; }
.stockflag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(179,38,30,.88); color: #fff; text-align: center; font-weight: 700; font-size: .8rem; padding: .2rem; }
.stocknote { color: var(--err); font-size: .8rem; font-weight: 600; }
.item.soldout .img img { opacity: .5; }
.qty button:disabled, .qty input:disabled { opacity: .45; cursor: not-allowed; }
.dim { opacity: .45; pointer-events: none; }
/* list view */
.lrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.lrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 90px 150px 34px; gap: .6rem; align-items: center; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.lrow.no-img { grid-template-columns: minmax(0, 1fr) auto 90px 150px 34px; }
.lrow:last-child { border-bottom: 0; }
.lrow.in-cart { background: #fdf6ea; }
.lrow.soldout .linfo { opacity: .65; }
.lthumb { width: 48px; height: 48px; border: 0; padding: 2px; background: #f3efe8; border-radius: 6px; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.lthumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.linfo .name { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.linfo .name [data-zoom] { cursor: pointer; }
.linfo .meta { font-size: .78rem; color: var(--muted); }
.lprice { text-align: right; white-space: nowrap; }
.lrow .qty { margin: 0; }
.lrow .qty button { width: 30px; height: 30px; } .lrow .qty input { height: 30px; }
.lrow .star { background: none; }
@media (max-width: 700px) {
  .lrow { grid-template-columns: 40px minmax(0, 1fr) 30px; grid-template-areas: "t i s" "t l p" "q q q"; row-gap: .3rem; }
  .lrow.no-img { grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "i s" "l p" "q q"; }
  .lthumb { grid-area: t; width: 40px; height: 40px; } .linfo { grid-area: i; } .lrow .star { grid-area: s; }
  .llast { grid-area: l; } .lprice { grid-area: p; grid-column: 2 / 4; } .lrow.no-img .lprice { grid-column: 1 / 3; } .lrow .qty { grid-area: q; }
}
.cart-line.auto { color: var(--muted); }
.seclist { list-style: none; padding: 0; } .seclist li { padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
code.sel { user-select: all; font-size: 1rem; }
@media (max-width: 520px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item .img { height: calc(var(--img-h, 130px) * .85); }
}
/* v1.5 */
.stockbtn { min-width: 118px; justify-content: center; }
.stockbtn.on { background: #fbeceb; border-color: #e6b8b4; color: var(--err); font-weight: 600; }
.item.soldout .stockflag { background: rgba(179,38,30,.9); }

/* v2.0 – "+ Hel pall", ORAKEL stock pill, prominent photos & mobile responsiveness */
.qty-wrap { display: flex; flex-direction: column; gap: .35rem; margin-top: .45rem; }
.qty-wrap .qty-row { display: flex; flex-direction: column; gap: .35rem; }
.qty-wrap .qty { margin-top: 0; }
.qty-wrap.compact { margin-top: 0; }
.qty-wrap.compact .qty-row { flex-direction: row; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.btn-pall { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; border: 1px solid #d4b88c; background: #fbf4e6; color: #6e4509;
  font: inherit; font-size: .8rem; font-weight: 700; padding: .36rem .55rem; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn-pall:hover:not(:disabled) { background: #f3e2c3; border-color: var(--brand); }
.btn-pall:active:not(:disabled) { transform: translateY(1px); }
.btn-pall:disabled { opacity: .45; cursor: not-allowed; }
.qty-wrap.compact .btn-pall { width: auto; padding: .28rem .5rem; font-size: .76rem; }
.pall-progress { font-size: .75rem; color: #5c3d0c; background: #fdf6ea; border: 1px solid #ebd7b5; border-radius: 6px; padding: .15rem .45rem; text-align: center; }
.stock-pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 99px; vertical-align: middle; white-space: nowrap; }
.stock-pill.ok { background: #e3f5e8; color: #196734; }
.stock-pill.low { background: #fff0d6; color: #945200; }
.stock-pill.empty { background: #fde8e8; color: #9b1c1c; }

/* Cart pallet calculator */
.cart-pall-box { background: #fbf4e6; border: 1px solid #e5cfa8; border-radius: 10px; padding: .55rem .7rem; margin: .4rem 0 .6rem; font-size: .88rem; }
.pall-meter { height: 6px; background: #eadbc0; border-radius: 99px; overflow: hidden; margin-top: .35rem; }
.pall-meter > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .2s; }

/* Prominent product photos & zoom modal */
.item .img { position: relative; }
.zoom-hint { position: absolute; right: 6px; bottom: 5px; font-size: .78rem; background: rgba(255,255,255,.82); border-radius: 6px; padding: 1px 4px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.item:hover .zoom-hint { opacity: 1; }
.ph-sm { font-size: 1rem; font-weight: 700; color: #c9b89c; }
.zoom-img-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin-bottom: .75rem; display: flex; justify-content: center; align-items: center; }
.zoom-img-box .big-img { margin: 0; max-height: 52vh; object-fit: contain; }
.zoom-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; margin: .6rem 0; }

/* List view with pallet button */
.lrow { grid-template-columns: 52px minmax(0, 1fr) auto 86px auto 34px; }
.lrow.no-img { grid-template-columns: minmax(0, 1fr) auto 86px auto 34px; }
.lthumb { width: 52px; height: 52px; }
@media (max-width: 760px) {
  .lrow { grid-template-columns: 48px minmax(0, 1fr) 30px; grid-template-areas: "t i s" "t l p" "q q q"; row-gap: .35rem; padding: .55rem; }
  .lrow.no-img { grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "i s" "l p" "q q"; }
  .lthumb { grid-area: t; width: 48px; height: 48px; }
  .lrow .qty-wrap { grid-area: q; }
  .lrow .qty-wrap.compact .qty-row { width: 100%; justify-content: space-between; }
  .lrow .qty-wrap.compact .btn-pall { flex: 1; justify-content: center; padding: .38rem .5rem; font-size: .8rem; }
}
@media (max-width: 520px) {
  .btn-pall { font-size: .74rem; padding: .34rem .4rem; }
  .pall-progress { font-size: .7rem; }
}

/* Crate (Kartong) vs Single Bottle (Enkeltflaske) switcher */
.unit-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; background: #f2ede3; border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin: .45rem 0 .2rem; }
.ut-btn { position: relative; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600; padding: .28rem .2rem; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: background .15s, color .15s; }
.ut-btn:hover { color: var(--ink); }
.ut-btn.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 700; }
.ut-cnt { background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; padding: 0 .35rem; border-radius: 99px; line-height: 1.35; flex-shrink: 0; }
.lrow .unit-toggle { display: inline-grid; width: auto; margin: .25rem 0 0; }
@media (max-width: 520px) {
  .ut-btn { font-size: .68rem; padding: .24rem .15rem; }
}