/* ============================================================
   TETOS — app.css
   Extracted from index.html (v1.260a) as proof-of-concept.
   Source order preserved: main stylesheet -> login overlay -> order-detail.
   Cascade is identical to the previous inline <style> blocks.
   ============================================================ */

/* ===== Block 1: main stylesheet (was index.html <head>) ===== */
  /* ── SÆT DIN API-NØGLE HER ── */
  /* Se linjen: const API_KEY = "DIN-NØGLE-HER"; i scriptet nedenfor */

  :root {
    --bg: #f7f6f3;
    --surface: #ffffff;
    --border: #e4e1da;
    --border2: #ccc9c0;
    --text: #1a1917;
    --muted: #7a7870;
    --accent: #1a1917;
    --green: #1a6b3c;
    --green-bg: #edf7f2;
    --amber: #92580a;
    --amber-bg: #fef6e4;
    --red: #9b2020;
    --red-bg: #fdf0f0;
    --blue: #1a4a8a;
    --blue-bg: #eef4fc;
    --radius: 10px;
    --radius-sm: 6px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
  }

  /* HEADER */
  .header {
    background: var(--text);
    color: #fff;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 52px;
  }
  .header-logo {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.9;
  }
  .header-logo-img {
    height: 32px;       /* fits 52px header med ~10px padding top/bottom */
    width: auto;        /* bevar aspect-ratio (800x212 ≈ 3.77:1 → ~120px bred) */
    display: block;
  }
  .header-sep { flex: 1; }
  .header-tag {
    font-size: 11px;
    opacity: 0.45;
    letter-spacing: 0.06em;
  }

  /* LAYOUT */
  /* v1.158: Sidebar bredde styres via CSS-variabel så den kan animeres mellem
     56px (collapsed) og 220px (expanded). Layout-grid bruger denne variabel. */
  :root { --sidebar-w: 56px; }
  body.sidebar-expanded { --sidebar-w: 220px; }
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: calc(100vh - 52px);
    transition: grid-template-columns 0.18s ease;
  }

  /* SIDEBAR */
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 0.75rem 0 1.5rem;
    overflow: hidden;
    transition: width 0.18s ease;
    position: relative;
  }
  /* v1.158: Toggle-knap øverst i sidebar */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border: none;
    background: rgba(111, 167, 127, 0.10);
    color: #6FA77F;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.18s;
    flex-shrink: 0;
  }
  .sidebar-toggle:hover { background: rgba(111, 167, 127, 0.20); }
  body.sidebar-expanded .sidebar-toggle { transform: rotate(180deg); }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    margin: 1px 6px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.12s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
  }
  .nav-item:hover { color: var(--text); background: var(--bg); }
  .nav-item.active { color: var(--text); font-weight: 500; background: var(--bg); }
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 3px;
    height: 22px;
    background: var(--text);
    border-radius: 0 2px 2px 0;
  }
  .nav-item { position: relative; }

  /* v1.178: Åbne tilbud-tabs i sidebar — indrykket under "Alle tilbud" */
  .tilbud-tab {
    padding: 6px 14px 6px 32px;
    font-size: 12px;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    transition: background 0.1s, color 0.1s;
  }
  .tilbud-tab:hover {
    color: var(--text);
    background: var(--bg);
  }
  .tilbud-tab.active {
    color: var(--text);
    background: var(--bg);
    font-weight: 500;
  }
  .tilbud-tab.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--green);
    border-radius: 2px;
  }
  .tilbud-tab-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .tilbud-tab-num {
    font-weight: 500;
    flex-shrink: 0;
  }
  .tilbud-tab-kunde {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }
  .tilbud-tab-x {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    color: var(--muted);
    transition: opacity 0.15s, color 0.15s, background 0.15s;
  }
  .tilbud-tab:hover .tilbud-tab-x,
  .tilbud-tab.active .tilbud-tab-x {
    opacity: 1;
  }
  .tilbud-tab-x:hover {
    background: rgba(220, 80, 80, 0.15);
    color: #c45050;
  }
  /* I collapsed sidebar: skjul tabs (de har ingen ikon, kun tekst) */
  body:not(.sidebar-expanded) .tilbud-tab { display: none; }

  /* v1.158: Ikon-container — altid synlig */
  .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }
  .nav-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* Label — skjules i collapsed-tilstand */
  .nav-label {
    opacity: 1;
    transition: opacity 0.15s ease;
  }
  body:not(.sidebar-expanded) .nav-label { opacity: 0; pointer-events: none; }

  /* Section-overskrifter */
  .nav-section {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--muted);
    padding: 14px 18px 4px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.15s ease;
  }
  body:not(.sidebar-expanded) .nav-section {
    opacity: 0;
    padding: 8px 0 4px;
    height: 0;
  }
  /* I collapsed-tilstand: lille adskiller-streg ved hver section */
  body:not(.sidebar-expanded) .nav-section::after {
    content: '';
    display: block;
    margin: 4px auto 0;
    width: 24px;
    height: 1px;
    background: var(--border);
  }

  /* Collapsed: centrér ikoner, fjern padding-left */
  body:not(.sidebar-expanded) .nav-item {
    padding: 9px 0;
    margin: 1px 8px;
    justify-content: center;
    gap: 0;
  }
  body:not(.sidebar-expanded) .nav-item.active::before {
    left: -8px;
  }

  /* MAIN */
  .main { padding: 2rem; max-width: 1150px; }
  @media (max-width: 900px) {
    .main { padding: 1rem; }
  }

  /* PANELS */
  .panel { display: none; }
  .panel.active { display: block; }

  /* v1.109: Settings tabs (horisontale faner på Indstillinger-siden) */
  .settings-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    margin-top: 4px;
    gap: 2px;
    flex-wrap: wrap;
  }
  .settings-tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .settings-tab:hover { color: var(--text); }
  .settings-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
  .settings-tab-pane { display: none; }
  .settings-tab-pane.active { display: block; }
  .settings-tab-placeholder {
    padding: 60px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    background: var(--surface);
    border: 1px dashed var(--border2);
    border-radius: var(--radius);
  }
  .settings-tab-placeholder strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  /* v1.110: Kategori-liste på Tab 2 */
  .kat-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .kat-list-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
  }
  .kat-list-title .kat-count {
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
  }
  .kat-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .kat-row {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .kat-row:last-child { border-bottom: none; }
  .kat-row:hover { background: var(--bg); }
  .kat-row-main { flex: 1; min-width: 0; }
  .kat-row-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
  }
  .kat-row-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: var(--muted);
    flex-wrap: wrap;
  }
  .kat-positions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .kat-pos-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border2);
    border: 1px solid var(--border2);
    transition: background 0.15s;
  }
  .kat-pos-dot.active {
    background: var(--green);
    border-color: var(--green);
  }
  .kat-pos-label {
    font-size: 10px;
    color: var(--muted);
    margin-right: 2px;
  }
  .kat-keywords {
    font-style: italic;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .kat-list-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .kat-list-error {
    padding: 16px 18px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13px;
    border-radius: var(--radius-sm);
  }

  /* v1.111: Knapper på kategori-rækker */
  .kat-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .kat-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--border2);
    background: white;
    color: var(--text);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .kat-btn:hover { background: var(--bg); border-color: var(--text); }
  .kat-btn.danger { color: var(--red); }
  .kat-btn.danger:hover { background: var(--red-bg); border-color: var(--red); }
  .kat-btn-add {
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--text);
    background: var(--text);
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
  .kat-btn-add:hover { opacity: 0.85; }

  /* v1.111: Kategori-modal (overlay + boks) */
  .kat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ccfade 0.12s ease-out;
    padding: 20px;
  }
  .kat-modal {
    background: white;
    border-radius: 8px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    font-family: inherit;
  }
  .kat-modal-header {
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }
  .kat-modal-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
  }
  .kat-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--muted);
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
  }
  .kat-modal-close:hover { color: var(--text); }
  .kat-modal-body { padding: 18px 22px; }
  .kat-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: white;
  }
  .kat-modal-field {
    margin-bottom: 14px;
  }
  .kat-modal-field label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .kat-modal-field input[type=text],
  .kat-modal-field input[type=number] {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    font-family: inherit;
  }
  .kat-modal-field input[type=number] { max-width: 110px; }
  .kat-modal-field-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }
  .kat-modal-field-row > * { flex: 1; }
  .kat-modal-field-row .kat-modal-field { margin-bottom: 0; }
  .kat-key-readonly {
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
  }

  .kat-pos-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--bg);
  }
  .kat-pos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .kat-pos-header label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
  }
  .kat-pos-header input[type=checkbox] { transform: scale(1.1); cursor: pointer; }
  .kat-sizes-wrapper {
    margin-top: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
  }
  /* v1.116: Felt-mål-input pr. position (cm-størrelse på produktet) */
  .kat-felt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 8px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 6px;
  }
  .kat-felt-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    cursor: help;
    margin-right: 4px;
  }
  .kat-felt-row input {
    width: 60px;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    font-family: inherit;
  }
  .kat-felt-x {
    color: var(--muted);
    font-size: 12px;
  }
  .kat-size-row {
    display: grid;
    grid-template-columns: 1fr 50px 8px 50px 1.2fr 28px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
  }
  .kat-size-row:last-child { margin-bottom: 0; }
  .kat-size-row input {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
  }
  .kat-size-row .size-x {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
  }
  /* v1.143: preset-dropdown i kategori-editor */
  .kat-size-row select.size-preset {
    padding: 5px 22px 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%237a7870' stroke-width='1.2' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
  }
  .kat-size-row select.size-preset:focus {
    outline: 1px solid var(--accent);
    border-color: var(--accent);
  }
  .kat-size-row select.size-preset.legacy,
  .kat-size-row select.size-preset.needs-pick {
    /* v1.144: needs-pick = bruger har endnu ikke valgt en preset (legacy data) */
    background-color: var(--amber-bg);
    border-color: #f0d4a0;
  }
  .kat-size-del {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
  }
  .kat-size-del:hover { color: var(--red); }
  .kat-size-headers {
    display: grid;
    grid-template-columns: 1fr 60px 8px 60px 60px 28px;
    gap: 6px;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
    padding: 0 2px;
  }
  .kat-add-size-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 11px;
    background: white;
    border: 1px dashed var(--border2);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    width: 100%;
  }
  .kat-add-size-btn:hover { border-color: var(--text); color: var(--text); }
  .kat-modal-error {
    background: var(--red-bg);
    color: var(--red);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 12px;
    display: none;
  }
  .kat-modal-error.show { display: block; }

  /* v1.114: Produkt-liste-modal (vist når man klikker "Produkter" på en kategori) */
  .kat-prod-search {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  .kat-prod-stats {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 10px;
    padding: 0 2px;
  }
  .kat-prod-stats strong {
    color: var(--text);
    font-weight: 500;
  }
  .kat-prod-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
  }
  .kat-prod-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    transition: background 0.1s;
  }
  .kat-prod-row:last-child { border-bottom: none; }
  .kat-prod-row:hover { background: var(--bg); }
  .kat-prod-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 11px;
  }
  .kat-prod-icon.saved { color: var(--green); font-weight: bold; }
  .kat-prod-icon.auto { color: var(--muted); opacity: 0.5; }
  .kat-prod-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kat-prod-sku {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    margin-right: 8px;
  }
  .kat-prod-name {
    color: var(--text);
  }
  .kat-prod-source {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg);
    color: var(--muted);
    flex-shrink: 0;
  }
  .kat-prod-source.lshop { background: #e8f0fa; color: #185FA5; }
  .kat-prod-source.stanley { background: #f0eaf8; color: #6b3a99; }
  .kat-prod-actions {
    flex-shrink: 0;
  }
  .kat-prod-remove {
    padding: 3px 8px;
    font-size: 10px;
    border: 1px solid var(--border2);
    background: white;
    color: var(--red);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
  }
  .kat-prod-remove:hover { background: var(--red-bg); border-color: var(--red); }
  .kat-prod-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .kat-prod-add-btn {
    margin-bottom: 12px;
    padding: 7px 14px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--text);
    background: var(--text);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
  }
  .kat-prod-add-btn:hover { opacity: 0.85; }

  /* v1.114: Tilføj-mode (søg blandt alle produkter for at tilføje til en kategori) */
  .kat-prod-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
  }
  .kat-prod-add-row:last-child { border-bottom: none; }
  .kat-prod-add-row:hover { background: var(--bg); }
  .kat-prod-add-current {
    font-size: 10px;
    color: var(--muted);
    font-style: italic;
    margin-left: 4px;
  }
  .kat-prod-add-btn-row {
    padding: 4px 10px;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid var(--green);
    background: var(--green-bg);
    color: var(--green);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .kat-prod-add-btn-row:hover { background: var(--green); color: white; }
  .kat-back-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    background: white;
    border: 1px solid var(--border2);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 12px;
  }
  .kat-back-btn:hover { background: var(--bg); }

  /* CARDS */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
  }
  .card-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-title .badge {
    font-size: 10px;
    font-weight: 400;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
  }

  /* FORM */
  .field-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
  .field-label { font-size: 13px; color: var(--muted); min-width: 190px; }
  input[type=number], input[type=text], textarea, select {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.12s;
  }
  input[type=number]:focus, input[type=text]:focus, textarea:focus, select:focus { border-color: var(--border2); background: #fff; }
  input[type=number] { width: 90px; }
  textarea { resize: vertical; width: 100%; min-height: 120px; line-height: 1.6; }
  select { cursor: pointer; }

  /* BUTTONS */
  .btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border2);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .btn:hover { background: var(--bg); border-color: var(--border2); }
  .btn:active { transform: scale(0.98); }
  .btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
  .btn-primary:hover { opacity: 0.85; background: var(--text); }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .btn-danger { color: var(--red); border-color: var(--red-bg); }
  .btn-danger:hover { background: var(--red-bg); }

  /* SEPARATOR */
  .sep { height: 1px; background: var(--border); margin: 1.25rem 0; }

  /* TAGS */
  .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 500; }
  .tag-green { background: var(--green-bg); color: var(--green); }
  .tag-amber { background: var(--amber-bg); color: var(--amber); }
  .tag-red { background: var(--red-bg); color: var(--red); }
  .tag-blue { background: var(--blue-bg); color: var(--blue); }

  /* v1.174: Status-filter pills i tilbudslisten — radio-stil */
  .tilbud-status-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .tilbud-status-pill {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 18px;
    border: 0.5px solid var(--border);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    font-weight: 500;
  }
  .tilbud-status-pill:hover:not(.active) {
    border-color: var(--border2);
    color: var(--text);
  }
  .tilbud-status-pill.active {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
  }
  .tilbud-status-pill .count {
    margin-left: 5px;
    opacity: 0.7;
    font-size: 11px;
  }

  /* v1.186: Sortérbare table-headers — pil + hover-effekt */
  th.tbl-sort {
    transition: color 0.15s, background 0.15s;
  }
  th.tbl-sort:hover {
    color: var(--text);
    background: rgba(0,0,0,0.03);
  }
  th.tbl-sort.active {
    color: var(--green, #6FA77F);
  }

  /* v1.187: Bulk-action bar — vises under tabellen når der er valgte tilbud */
  .tilbud-bulk-bar {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(76, 144, 224, 0.08);
    border: 1px solid rgba(76, 144, 224, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
  }
  .tilbud-bulk-info {
    color: var(--text);
  }
  .tilbud-bulk-info strong {
    color: #4C90E0;
    font-weight: 600;
  }
  .tilbud-bulk-bar .btn-danger {
    background: #c45050;
    color: white;
    border: 1px solid #a83a3a;
  }
  .tilbud-bulk-bar .btn-danger:hover {
    background: #a83a3a;
  }
  /* Bulk-bar checkboxes — let større for nemmere klik */
  #tilbudTableWrap input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.1);
  }

  /* PRICE TABLE */
  .pricetbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .pricetbl th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--border); letter-spacing: 0.04em; }
  .pricetbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
  .pricetbl tr:last-child td { border-bottom: none; }
  .pricetbl input { width: 80px; }
  /* v1.177: Til-celler i markup-tabel — auto-beregnet, read-only, blødere typografi */
  .mu-til {
    font-size: 13px;
    color: var(--muted);
    user-select: none;
  }
  .mu-til-last {
    font-style: italic;
    font-size: 12px;
  }

  /* v1.142: Tryk-preset tabel */
  .tp-section {
    margin-top: 6px;
    margin-bottom: 18px;
  }
  .tp-section .section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .tp-section .section-title {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
  .tp-section .section-help {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  table.tp-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  table.tp-tbl th {
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    color: var(--muted);
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.04em;
  }
  table.tp-tbl td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  table.tp-tbl tr:last-child td {
    border-bottom: none;
  }
  table.tp-tbl input.tp-name {
    width: 140px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
  }
  table.tp-tbl input.tp-price {
    width: 70px;
    text-align: right;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
  }
  .tp-currency {
    color: var(--muted);
    font-size: 11px;
    margin-left: 4px;
  }
  .tp-uses-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .tp-uses-badge.zero {
    opacity: 0.5;
  }
  .tp-icon-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--text);
  }
  .tp-icon-btn:hover {
    background: var(--bg);
    border-color: var(--border2);
  }
  .tp-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .tp-add-btn {
    margin-top: 8px;
    padding: 5px 11px;
    font-size: 12px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
  }
  .tp-add-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .tp-saved-flash {
    display: inline-block;
    margin-left: 8px;
    color: var(--green);
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .tp-saved-flash.visible {
    opacity: 1;
  }
  .tp-empty {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
    font-style: italic;
  }

  /* UPLOAD */
  .upload-area {
    border: 2px dashed var(--border2);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    transition: all 0.15s;
  }
  .upload-area:hover { border-color: var(--text); color: var(--text); background: var(--bg); }
  .upload-area.dragover { border-color: var(--green); background: var(--green-bg); color: var(--green); transform: scale(1.01); }
  .upload-icon { font-size: 24px; margin-bottom: 8px; opacity: 0.4; transition: all 0.15s; }
  .upload-area.dragover .upload-icon { opacity: 1; transform: translateY(-4px); }

  /* INFO BOX */
  .info-box {
    background: var(--blue-bg);
    border: 1px solid #c5d9f5;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--blue);
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  /* MISSING BOX */
  .missing-box {
    background: var(--amber-bg);
    border: 1px solid #f0d080;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
  }
  .missing-box .card-title { color: var(--amber); margin-bottom: 0.5rem; }
  .missing-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .missing-item-name { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
  .missing-item-fields { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .preview-price { font-size: 12px; color: var(--green); font-weight: 500; margin-left: 4px; }

  /* POS CARDS (legacy — ikke længere brugt, men beholdt for bagudkompatibilitet) */
  .pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1rem; }
  .pos-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.12s;
    background: var(--bg);
  }
  .pos-card:hover { border-color: var(--border2); background: var(--surface); }
  .pos-card.selected { border: 2px solid var(--text); background: var(--surface); }
  .pos-card-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .pos-card-sub { font-size: 11px; color: var(--muted); }
  .pos-card select { width: 100%; margin-top: 8px; display: none; }
  .pos-card.selected select { display: block; }

  /* TRYK-SECTION PR. LINJE (v1.050) */
  .tryk-section { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
  .tryk-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 2px 0; }
  .tryk-header-label { font-size: 12px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .tryk-header-summary { font-size: 11px; color: var(--muted); }
  .tryk-chevron { display: inline-block; transition: transform 0.15s; font-size: 10px; }
  .tryk-section.expanded .tryk-chevron { transform: rotate(90deg); }
  .tryk-content { display: none; margin-top: 8px; }
  .tryk-section.expanded .tryk-content { display: block; }
  .tryk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .tryk-pos {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.12s;
    background: var(--bg);
  }
  .tryk-pos:hover { border-color: var(--border2); background: var(--surface); }
  .tryk-pos.active { border-color: var(--green); background: var(--green-bg, #e8f5e9); }
  .tryk-pos-title { font-size: 12px; font-weight: 500; }
  .tryk-pos-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .tryk-pos-price { font-size: 11px; color: var(--green); font-weight: 500; margin-top: 3px; }
  .tryk-pos-select { display: none; margin-top: 6px; }
  .tryk-pos.active .tryk-pos-select { display: block; }
  .tryk-pos-select select { width: 100%; font-size: 11px; padding: 2px 4px; }

  /* v1.070: Design-zoner — billed-felter pr. trykside */
  .design-zones {
    display: flex;
    /* v1.094: 40px gap (mindsket for at passe i 3-kolonne layout) */
    gap: 40px;
    align-items: flex-start;
    /* v1.092: ingen wrap — sleeves stables i deres egen kolonne */
    flex-wrap: nowrap;
    padding: 10px 0;
  }
  /* v1.092: Sleeves stables vertikalt ved siden af bagside */
  .design-zones-sleeves {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  /* Sleeves har ikke skala-slider eller størrelse-dropdown, så de behøver ikke
     den store min-height. Sleeve-feltet er selv 225px + label/dim/filename ≈ 280px */
  .design-zones-sleeves .design-zone {
    min-height: auto;
  }
  .design-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    /* v1.094: bump til 540px for at rumme 392px tall felt + alle infolinjer */
    min-height: 540px;
    justify-content: flex-start;
  }
  .design-zone-label {
    /* v1.091: Større + blå (matcher dim-tallene under feltet) */
    font-size: 16px;
    color: #185FA5;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .design-zone-box {
    border-radius: 6px;
    border: 1.5px solid rgba(0,0,0,0.15);
    cursor: pointer;
    position: relative;
    transition: border-color 0.12s, opacity 0.12s;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* v1.120f: overflow er IKKE hidden så drag-handles stikkende -7px udenfor
       feltet (tlh/trh/blh/brh) kan klikkes. Mockup-PNG'en har transparent
       baggrund så den naturligt afgrænses uden behov for clip. */
  }
  /* v1.120: Mockup-overlay (PNG med transparent baggrund + multiply-blend
     så tøjet farves med kundens valgte tøjfarve fra parent's background-color) */
  /* v1.120b: To-lags struktur så KUN tøjet farves (ikke baggrunden):
     - .design-zone-color-fill: tegner kundens farve, masket af mockup-PNG
       (mask = kun pixels hvor PNG ikke er transparent → kun tøj-silhuet)
     - .design-zone-mockup: viser selve PNG'en ovenpå med multiply, så
       sorte sømme/streger forbliver mørke */
  .design-zone-box .design-zone-color-fill {
    position: absolute;
    inset: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none !important;
    z-index: 1;
  }
  .design-zone-box .design-zone-mockup {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none !important;
    z-index: 2;
  }
  /* Sørg for at design + zone-indicator + tryk-zone vises ovenpå mockup.
     v1.120g: Kun z-index sættes — position arves fra eksisterende regler
     så .design-zone-actions (position:absolute, right:-38px) ikke brydes. */
  .design-zone-box > *:not(.design-zone-mockup):not(.design-zone-color-fill) {
    z-index: 3;
  }
  /* v1.120f: Sørg for at handles altid er klikbare og over mockup-laget */
  .design-zone-box .tryk-zone-handle {
    z-index: 20 !important;
    pointer-events: auto !important;
  }
  /* v1.116: Felt-størrelse sættes nu dynamisk via inline style baseret på
     kategoriens felt_w/felt_h (cm). Disse CSS-regler holder stadig som fallback
     hvis kategori-data mangler — men inline style overskriver dem altid når
     kategorien har felt-mål. */
  .design-zone-box.front  { width: 280px; height: 392px; }
  .design-zone-box.back   { width: 280px; height: 392px; }
  .design-zone-box.sleeve { width: 140px; height: 187px; }
  /* Inaktiv: faded + plus-symbol */
  .design-zone-box:not(.active):not(.disabled) { opacity: 0.55; }
  .design-zone-box:not(.active):not(.disabled):hover { opacity: 0.85; border-color: rgba(0,0,0,0.3); }
  .design-zone-plus {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 22px; font-weight: 500;
    pointer-events: none;
  }
  .design-zone-box.sleeve .design-zone-plus { font-size: 16px; }
  /* v1.107: Tilstand 0 — position ikke tilladt for produktkategori */
  .design-zone-disabled-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-align: center;
    padding: 8px;
    line-height: 1.35;
    pointer-events: none;
    font-style: italic;
  }
  .design-zone-box.sleeve .design-zone-disabled-text { font-size: 10px; padding: 4px; }
  /* Kategori-dropdown over design-felterne */
  .product-category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px 0;
    font-size: 12px;
  }
  .product-category-row label {
    color: var(--muted);
    font-size: 11px;
  }
  .product-category-row select {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-family: inherit;
  }
  .product-category-row .auto-detected {
    font-size: 10px;
    color: var(--muted);
    font-style: italic;
  }
  /* v1.113: Grøn farve hvis kategori er hentet fra gemt mapping */
  .product-category-row .auto-detected.kat-source-saved {
    color: var(--green);
    font-style: normal;
    font-weight: 500;
  }
  /* v1.113: "Gem som standard"-knap der dukker op ved manuel kategori-ændring */
  .product-category-row .btn-save-kat-default {
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: inherit;
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .product-category-row .btn-save-kat-default:hover {
    background: var(--green);
    color: white;
  }
  /* Aktiv: blå ramme + ✓ */
  .design-zone-box.active {
    border: 2px solid #185FA5;
  }
  .design-zone-box.active .design-zone-plus { display: none; }
  .design-zone-box.active .design-zone-drop {
    position: absolute;
    inset: 16px 20px;
    border: 2px dashed rgba(255,255,255,0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255,255,255,0.78);
    text-align: center;
    pointer-events: none;
  }
  .design-zone-box.sleeve.active .design-zone-drop {
    inset: 5px 6px;
    font-size: 8px;
    border-width: 1.5px;
  }
  .design-zone-box .design-zone-check {
    position: absolute;
    top: -5px; right: -5px;
    width: 16px; height: 16px;
    background: #185FA5;
    border: 2px solid white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    font-weight: 700;
  }
  .design-zone-box.sleeve .design-zone-check { width: 13px; height: 13px; font-size: 8px; }
  .design-zone-box.active .design-zone-check { display: flex; }
  .design-zone-price {
    font-size: 10px;
    font-weight: 500;
    color: #185FA5;
    margin-top: 4px;
    height: 14px;     /* bevar layout-højde også når tom */
    line-height: 14px;
  }
  /* v1.072: Cm-mål badge under aktive felter */
  /* v1.089: Interaktiv med ↑/↓-knapper på bredde/højde (kun når design uploadet) */
  /* v1.090: Større font og større pile — lettere at ramme */
  .design-zone-dim {
    font-size: 15px;
    color: var(--muted);
    margin-top: 6px;
    min-height: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .design-zone-dim.has-controls {
    color: var(--text);
    font-weight: 500;
  }
  .design-zone-dim .dim-num-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    border-radius: 4px;
  }
  .design-zone-dim .dim-num-group:hover {
    background: rgba(0,0,0,0.04);
  }
  .design-zone-dim .dim-num {
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
  }
  .design-zone-dim .dim-arrows {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
  }
  .design-zone-dim .dim-arrow-btn {
    width: 22px;
    height: 15px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--muted);
    transition: all 0.1s;
  }
  .design-zone-dim .dim-arrow-btn:first-child {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
  }
  .design-zone-dim .dim-arrow-btn:last-child {
    border-radius: 0 0 4px 4px;
  }
  .design-zone-dim .dim-arrow-btn:hover {
    background: #f0f4f8;
    color: #185FA5;
    border-color: #185FA5;
  }
  .design-zone-dim .dim-arrow-btn:active {
    background: #e0e8f0;
  }
  .design-zone-dim .dim-arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .design-zone-dim .dim-arrow-btn svg {
    width: 12px;
    height: 12px;
  }
  .design-zone-dim .dim-x {
    color: var(--muted);
    margin: 0 4px;
    font-size: 14px;
  }
  .design-zone-dim .dim-unit {
    color: var(--muted);
    margin-left: 6px;
    font-weight: 400;
    font-size: 14px;
  }
  /* v1.122: Hængelås-knap til at låse tryk-størrelse */
  .design-zone-dim .dim-lock-btn {
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all 0.1s;
  }
  .design-zone-dim .dim-lock-btn:hover {
    border-color: #185FA5;
    background: #f0f4f8;
    transform: scale(1.05);
  }
  .design-zone-dim .dim-lock-btn.locked {
    border-color: #d97706;
    background: #fff4e6;
  }
  .design-zone-dim .dim-lock-btn.locked:hover {
    background: #ffe4c2;
  }
  /* Hele dim-badge får orange ramme når låst — visuel reminder */
  .design-zone-dim.is-locked {
    background: #fff4e6;
    border: 1px solid #d97706;
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
  }
  /* v1.076: Drag-and-drop highlight */
  .design-zone-box.drag-over {
    border: 2px solid #185FA5 !important;
    background-color: #e8f1fa !important;
    box-shadow: 0 0 0 4px rgba(24, 95, 165, 0.15);
  }
  /* v1.076: Cursor på aktive felter */
  .design-zone-box.active:not(.has-design) { cursor: pointer; }
  .design-zone-box.has-design { cursor: default; opacity: 1 !important; }
  /* v1.076: Skjul drop-text når feltet IKKE er aktivt eller har design */
  .design-zone-box:not(.active) .design-zone-drop,
  .design-zone-box.has-design .design-zone-drop { display: none; }
  /* v1.076/077: Vis drop-text på aktive uden design (overskriver gammel kun-active-regel)
     v1.077: justeret margen til 150×210 felt-bokse */
  .design-zone-box.active:not(.has-design) .design-zone-drop {
    position: absolute;
    inset: 30px 30px;
    border: 2px dashed rgba(255,255,255,0.65);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: rgba(255,255,255,0.85);
    text-align: center;
    pointer-events: none;
  }
  .design-zone-box.sleeve.active:not(.has-design) .design-zone-drop {
    inset: 12px 14px;
    font-size: 9px;
    border-width: 1.5px;
  }
  /* v1.076: Deaktivér-knap (X i hjørne) på aktive felter UDEN design */
  .design-zone-deactivate {
    position: absolute;
    top: -6px; left: -6px;
    width: 18px; height: 18px;
    background: #999;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    transition: background 0.12s;
  }
  .design-zone-deactivate:hover { background: #d32f2f; }
  /* v1.076: Fjern-knap på felter MED design */
  .design-zone-remove {
    position: absolute;
    top: -6px; left: -6px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.6);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    transition: background 0.12s;
  }
  .design-zone-remove:hover { background: #d32f2f; }
  /* v1.076: PDF-fallback visning */
  .design-zone-pdf {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    pointer-events: none;
  }
  .design-zone-pdf-icon { font-size: 32px; }
  .design-zone-box.sleeve .design-zone-pdf-icon { font-size: 18px; }
  .design-zone-pdf-label { font-size: 11px; font-weight: 600; margin-top: 2px; }
  .design-zone-box.sleeve .design-zone-pdf-label { font-size: 8px; }
  /* v1.076: Filinfo under feltet (filnavn + DPI-badge) */
  .design-zone-fileinfo {
    margin-top: 4px;
    text-align: center;
    width: 100%;
  }
  .design-zone-filename {
    font-size: 9px;
    color: var(--muted);
    line-height: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
  }
  .design-zone-dpi {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
    line-height: 12px;
  }
  .design-zone-dpi.dpi-green  { background: #d1f7d6; color: #185b1f; }
  .design-zone-dpi.dpi-orange { background: #ffe6cc; color: #8a3a00; }
  .design-zone-dpi.dpi-yellow { background: #fff5b8; color: #8a6800; }
  /* v1.094: rød for DPI < 100 (utilstrækkelig opløsning) */
  .design-zone-dpi.dpi-red    { background: #ffd6d6; color: #8a1a1a; }

  /* ──────────────────────────────────────────────────────────
     v1.077: Proportional tryk-zone + drag-rundt-design
     ────────────────────────────────────────────────────────── */

  /* Tryk-zone: stiplet boks INDE i felt-boksen, proportional til cm-mål.
     Position styres via inline left/top (procent), størrelse via inline w/h. */
  .tryk-zone {
    position: absolute;
    border: 2px dashed rgba(255,255,255,0.7);
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    box-sizing: border-box;
    pointer-events: none; /* parent-feltet håndterer clicks/drags */
    transition: opacity 0.15s, border-color 0.15s;
  }
  .tryk-zone-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
  }
  .design-zone-box.sleeve .tryk-zone-label { font-size: 7px; }

  /* Når et design er uploadet, vises det inde i tryk-zonen */
  .design-zone-box.has-design .tryk-zone {
    cursor: grab;
    pointer-events: auto;     /* nu kan user dragge */
    background: transparent;  /* designet selv har baggrund */
    border-color: rgba(255,255,255,0.45);
  }
  .design-zone-box.has-design .tryk-zone:active { cursor: grabbing; }
  .design-zone-box.has-design .tryk-zone.dragging {
    cursor: grabbing;
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.25);
  }
  .design-zone-box.has-design .tryk-zone-label { display: none; }

  /* Designet (img inde i tryk-zonen) */
  .tryk-design-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  /* Glide-ind animation: tryk-zonen starter på 0% opacity og animerer til 1 */
  .tryk-zone.zone-animate-in {
    animation: zone-fade-in 0.35s ease-out;
  }
  @keyframes zone-fade-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* PDF-fallback når der er en PDF i tryk-zonen */
  .tryk-zone.is-pdf {
    background: rgba(255,255,255,0.85);
    border: 2px solid #d32f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #555;
    font-size: 9px;
    font-weight: 600;
  }

  /* ──────────────────────────────────────────────────────────
     v1.079: Upload-tekst inde i tryk-zonen (erstatter dobbelt-bokse)
     ────────────────────────────────────────────────────────── */
  .tryk-zone.tryk-zone-empty {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.85);
  }
  .tryk-zone-uploadtext {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.92);
    pointer-events: none;
    text-align: center;
    padding: 4px;
  }
  .tzu-arrow { font-size: 20px; line-height: 1; margin-bottom: 4px; }
  .tzu-text { font-size: 10px; font-weight: 500; line-height: 1.2; }
  .tzu-cm { font-size: 9px; margin-top: 4px; opacity: 0.85; }
  .design-zone-box.sleeve .tzu-arrow { font-size: 14px; margin-bottom: 0; }
  .design-zone-box.sleeve .tzu-text,
  .design-zone-box.sleeve .tzu-cm { display: none; }
  /* Skjul den gamle .design-zone-drop boks helt */
  .design-zone-box .design-zone-drop { display: none !important; }

  /* ──────────────────────────────────────────────────────────
     v1.079: Felt-boks tillader nu zone at gå udover (overflow visible)
     ────────────────────────────────────────────────────────── */
  .design-zone-box { overflow: visible !important; }
  /* Felt-boksen skal stadig vise tekstil-farven kun INDENFOR sin grænse — vi opnår det
     via en pseudo-element der maskerer baggrunden, så zone der går udenfor IKKE
     får tekstil-baggrund "udenfor t-shirten" */
  .design-zone-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: inherit;
    border-radius: 6px;
    z-index: 0;
    pointer-events: none;
  }
  .design-zone-box > * { position: relative; z-index: 1; }
  /* Tryk-zonen skal ligge OVER pseudo-baggrunden — så den kan strække udover */
  .design-zone-box .tryk-zone { z-index: 2; }

  /* ──────────────────────────────────────────────────────────
     v1.079: Drag-handles til skaler-ned (4 hjørner)
     ────────────────────────────────────────────────────────── */
  .tryk-zone-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: #185FA5;
    border: 2px solid white;
    border-radius: 50%;
    z-index: 10;
    pointer-events: auto;
    transition: transform 0.1s;
  }
  .tryk-zone-handle:hover { transform: scale(1.25); }
  .tryk-zone-handle.tlh { top: -7px; left: -7px; cursor: nwse-resize; }
  .tryk-zone-handle.trh { top: -7px; right: -7px; cursor: nesw-resize; }
  .tryk-zone-handle.blh { bottom: -7px; left: -7px; cursor: nesw-resize; }
  .tryk-zone-handle.brh { bottom: -7px; right: -7px; cursor: nwse-resize; }

  /* ──────────────────────────────────────────────────────────
     v1.079: Warning state — design udenfor felt-boks
     ────────────────────────────────────────────────────────── */
  .design-zone-box.has-warning {
    box-shadow: 0 0 0 2px #d32f2f, 0 0 0 4px rgba(211,47,47,0.25);
  }
  .design-zone-warning-icon {
    position: absolute;
    bottom: -7px; right: -7px;
    width: 22px; height: 22px;
    background: #d32f2f;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 12;
    cursor: help;
  }

  /* ──────────────────────────────────────────────────────────
     v1.087: Snap-to-center indikator (gul stiplet kant ved snap)
     ────────────────────────────────────────────────────────── */
  .tryk-zone.snap-x {
    box-shadow: inset 0 0 0 1px #FFC107;
  }
  .tryk-zone.snap-y {
    box-shadow: inset 0 0 0 1px #FFC107;
  }

  /* ──────────────────────────────────────────────────────────
     v1.087: Action-knapper til højre for felt-boksen (center, evt. flere)
     ────────────────────────────────────────────────────────── */
  .design-zone-actions {
    position: absolute;
    top: 8px;
    right: -38px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 11;
  }
  .design-zone-actions button {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--muted);
    transition: all 0.12s ease;
    font-size: 0; /* hide any text fallback */
  }
  .design-zone-actions button:hover {
    border-color: #185FA5;
    color: #185FA5;
    transform: scale(1.08);
  }
  /* v1.105: Fjern-knap har rød hover (destruktiv handling) */
  .design-zone-actions button.action-remove:hover {
    border-color: #d32f2f;
    color: #d32f2f;
  }
  .design-zone-actions button:active {
    transform: scale(0.95);
  }
  .design-zone-actions svg {
    width: 14px; height: 14px;
    display: block;
  }

  /* ──────────────────────────────────────────────────────────
     v1.079: Slider under feltet (kun synlig når design er uploadet)
     ────────────────────────────────────────────────────────── */
  /* v1.128: AI-mockup knap + thumbnails */
  .ai-mockup-row {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* v1.128c: Progress bar */
  .ai-progress-wrap {
    margin-top: 4px;
  }
  .ai-progress-bar {
    height: 6px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 3px;
    overflow: hidden;
  }
  .ai-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    transition: width 0.3s ease;
    border-radius: 3px;
  }
  .ai-progress-text {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    font-style: italic;
  }
  .ai-generate-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
  }
  .ai-generate-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
  }
  .ai-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .ai-mockup-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ai-mockup-thumbs .ai-thumb {
    flex: 1;
    min-width: 60px;
    max-width: 90px;
    text-align: center;
    position: relative;   /* v1.140: for × knap overlay */
  }
  .ai-mockup-thumbs .ai-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
  }
  .ai-mockup-thumbs .ai-thumb img:hover {
    transform: scale(1.05);
    border-color: #6366f1;
  }
  /* v1.140: lille × knap til at fjerne et AI-billede fra tilbuddet */
  .ai-mockup-thumbs .ai-thumb-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 14px;
    line-height: 1;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
  }
  .ai-mockup-thumbs .ai-thumb:hover .ai-thumb-remove {
    opacity: 1;
  }
  .ai-mockup-thumbs .ai-thumb-remove:hover {
    background: var(--red, #9b2020);
  }
  .ai-mockup-thumbs .ai-thumb span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
  }

  .design-zone-scale-slider {
    margin-top: 4px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--muted);
  }
  .design-zone-scale-slider input[type="range"] {
    flex: 1;
    height: 4px;
    margin: 0;
  }
  .design-zone-scale-slider .scale-pct {
    min-width: 28px;
    text-align: right;
    font-weight: 500;
    color: var(--text-color, #333);
  }
  /* v1.073: Read-only mål-span i kombineret pris-tabel (bagside, h. ærme) */
  .dim-readonly {
    display: inline-block;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    padding: 4px 0;
  }
  .pricetbl-combo th, .pricetbl-combo td {
    text-align: center;
    padding: 6px 4px;
  }
  .pricetbl-combo th:first-child, .pricetbl-combo td:first-child {
    text-align: left;
    padding-left: 8px;
  }
  .design-zone-size {
    margin-top: 4px;
    width: 100%;
    /* v1.071: optag altid plads — bare skjul med visibility for stabil layout */
    visibility: hidden;
  }
  .design-zone.has-size-control.active .design-zone-size { visibility: visible; }
  .design-zone:not(.has-size-control) .design-zone-size { display: none; }
  .design-zone-size select {
    width: 100%;
    /* v1.091: matcher dim-tal-størrelse (15-16px) */
    font-size: 15px;
    padding: 6px 8px;
    height: auto;
    font-weight: 500;
    color: #185FA5;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    cursor: pointer;
  }
  .design-zone-summary {
    font-size: 11px;
    color: var(--muted);
    align-self: center;
    padding-left: 6px;
  }

  /* PRICE LINES */
  .price-section { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); padding: 10px 0 4px; text-transform: uppercase; }
  .price-line { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--muted); }
  .price-line.disc { color: var(--green); }
  .price-line.strong { color: var(--text); font-weight: 500; }
  .price-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 6px; }

  /* METRICS */
  .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.25rem; }
  .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
  .metric-label { font-size: 11px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.03em; }
  .metric-value { font-size: 24px; font-weight: 500; font-family: 'DM Mono', monospace; }

  /* QUOTE OUTPUT */
  .quote-out {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
    min-height: 100px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
  }

  /* GARMENT TABLE */
  .gtbl { width: 100%; font-size: 13px; border-collapse: collapse; }
  .gtbl th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--border); }
  .gtbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
  .gtbl tr:last-child td { border-bottom: none; }
  .gtbl tr:hover td { background: var(--bg); }

  /* LOADING */
  .loading { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: spin 0.6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* DISC BADGE */
  .disc-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--green-bg); color: var(--green); font-weight: 500; margin-left: 8px; }
  .disc-badge.maxed { background: var(--blue-bg); color: var(--blue); }

  /* MARKUP TAG */
  .mu-tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); margin-left: 4px; font-family: 'DM Mono', monospace; }

  /* SIZE RULES */
  .size-rules { font-size: 12px; color: var(--muted); background: var(--bg); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; line-height: 1.8; border: 1px solid var(--border); }

  /* GARMENT LINES v2 */
  .gline { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); }
  .gline-top { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
  /* v1.091: Antal-pr-størrelse — label OVER input (klarere alignment) */
  .gline-sizes { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 4px; }
  .size-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .size-qty label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-align: center;
  }
  .size-qty input {
    width: 52px;
    font-size: 12px;
    padding: 3px 6px;
    text-align: center;
  }
  .gline-total { font-size: 12px; color: var(--green); font-weight: 500; margin-left: auto; }
  .size-select { font-size: 12px; padding: 4px 6px; }

  /* STATUS */
  .file-status { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 20px; }

  /* v1.106: Custom confirm-modal — erstatter browser native confirm() */
  .custom-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 10000;
    animation: ccfade 0.12s ease-out;
  }
  @keyframes ccfade { from { opacity: 0; } to { opacity: 1; } }
  .custom-confirm-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 16px 18px;
    max-width: 380px;
    min-width: 240px;
    font-family: inherit;
    z-index: 10001;
  }
  .custom-confirm-message {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
  }
  .custom-confirm-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .custom-confirm-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    transition: all 0.12s ease;
  }
  .custom-confirm-btn.cancel:hover { background: var(--bg); }
  .custom-confirm-btn.ok {
    background: #185FA5;
    color: white;
    border-color: #185FA5;
    font-weight: 500;
  }
  .custom-confirm-btn.ok:hover { background: #0d4a85; }
  .custom-confirm-btn:focus { outline: 2px solid rgba(24,95,165,0.3); outline-offset: 1px; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
  /* ── Farvevælger pop-up ── */
  .color-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.15s;
    width: 100%;
    min-height: 32px;
  }
  .color-btn:hover { border-color: var(--text); }
  .color-btn .swatch {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--border2);
    flex-shrink: 0;
  }
  .color-btn .label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .color-btn .arrow { color: var(--muted); font-size: 9px; }

  .color-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .color-popup-overlay.open { display: flex; }
  .color-popup {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 440px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  }
  .color-popup-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
  .color-popup-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
  .color-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    gap: 6px;
  }
  .color-popup-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s;
  }
  .color-popup-swatch:hover { transform: scale(1.15); }
  .color-popup-swatch.selected {
    border-color: var(--text);
    transform: scale(1.1);
    box-shadow: 0 0 0 2px white inset;
  }
  .color-popup-close {
    margin-top: 16px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
  }
  .color-popup-close:hover { background: var(--bg); }

  /* v1.066: Brand/Model popup-liste */
  .bm-row {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .bm-row:last-child { border-bottom: none; }
  .bm-row:hover { background: var(--bg); }
  .bm-row.selected { background: rgba(0,0,0,0.05); font-weight: 500; }
  .bm-row-sub { font-size: 11px; color: var(--muted); flex-shrink: 0; }
  .bm-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--muted); }

  /* v1.068: Settings save bar (top af Indstillinger-panel) */
  .settings-savebar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    padding: 10px 14px;
    margin: -1rem -1rem 1rem -1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
  }
  .settings-savebar.dirty {
    background: #fef3c7;
    border-bottom-color: #fcd34d;
  }
  .settings-savebar .save-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
  }
  .settings-savebar.dirty .save-status { color: #92400e; font-weight: 500; }
  .settings-savebar .save-btn {
    padding: 6px 14px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: var(--muted);
  }
  .settings-savebar.dirty .save-btn {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    font-weight: 500;
  }
  .settings-savebar .save-btn:disabled {
    opacity: 0.5;
    cursor: wait;
  }
  .settings-savebar .save-btn:hover:not(:disabled) {
    filter: brightness(0.95);
  }

  /* v1.068: Toast-notifikation */
  .toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .toast {
    background: rgba(20,20,20,0.92);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    max-width: 360px;
    animation: toast-in 0.25s ease-out;
    pointer-events: auto;
  }
  .toast.success { background: rgba(16,75,40,0.95); }
  .toast.warning { background: rgba(146,64,14,0.95); }
  .toast.error { background: rgba(127,29,29,0.95); }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
  }
  .toast.fadeout { animation: toast-out 0.3s ease-in forwards; }

  /* Lagerstatus badge på størrelse */
  .size-qty { position: relative; }
  /* v1.091: stock-badge oven på input (label sidder nu over input) */
  .size-stock {
    position: absolute;
    top: 9px; right: -4px;
    font-size: 9px;
    background: var(--green);
    color: white;
    padding: 1px 4px;
    border-radius: 6px;
    font-weight: 500;
    line-height: 1;
    z-index: 2;
  }
  .size-stock.low { background: var(--amber); }
  .size-stock.out { background: #ccc; }
  /* Produktionstid-vælger */
  .prodtime-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  @media (max-width: 700px) {
    .prodtime-grid { grid-template-columns: 1fr; }
  }

  /* v1.117: 2-kolonne layout for produktionstid + ekstra-timer */
  .delivery-options-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 6px;
  }
  @media (max-width: 700px) {
    .delivery-options-row { grid-template-columns: 1fr; gap: 14px; }
  }
  /* v1.228: Betaling · Levering · Manuel rabat på én linje (under kunden) */
  .tilbud-meta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; margin-bottom: 6px; }
  @media (max-width: 760px) { .tilbud-meta-row { grid-template-columns: 1fr; gap: 12px; } }
  .tilbud-meta-row .delivery-col { display: flex; flex-direction: column; min-width: 0; }
  .tilbud-meta-row .col-title { font-size: 13px; font-weight: 500; margin-bottom: 10px; color: var(--text); }
  .tilbud-meta-row .manuel-rabat-card { margin-top: 0; }
  .tilbud-meta-row .manuel-rabat-card > summary { padding-top: 1px; }
  .delivery-options-row .delivery-col {
    display: flex;
    flex-direction: column;
  }
  .delivery-options-row .delivery-col .col-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text);
  }
  /* v1.119b: Kompakt layout — prodtime forbliver 3-kolonner i 2-kolonne row,
     så hele området kun fylder højden af ét kort */
  .delivery-options-row .prodtime-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  /* Kompakte prodtime-kort i delivery-row */
  .delivery-options-row .prodtime-card {
    padding: 8px 6px;
  }
  .delivery-options-row .prodtime-icon { font-size: 18px; margin-bottom: 2px; }
  .delivery-options-row .prodtime-title { font-size: 12px; margin-bottom: 2px; }
  .delivery-options-row .prodtime-sub { font-size: 10px; margin-bottom: 3px; }
  .delivery-options-row .prodtime-date { font-size: 10px; }
  /* Kompakt extra-hours card så højden matcher prodtime-kort */
  .delivery-options-row .extra-hours-card {
    padding: 10px 12px;
    gap: 6px;
  }
  .delivery-options-row .extra-hours-icon { font-size: 22px; }
  .delivery-options-row .extra-hours-title { font-size: 12px; }
  .delivery-options-row .extra-hours-sub { font-size: 10px; }
  .delivery-options-row .extra-hours-select {
    padding: 6px 8px;
    font-size: 12px;
  }
  .delivery-options-row .extra-hours-summary {
    font-size: 11px;
    padding: 4px 8px;
    min-height: 24px;
  }
  /* Mobile: stack og giv fuld størrelse */
  @media (max-width: 700px) {
    .delivery-options-row .prodtime-grid { grid-template-columns: 1fr; gap: 8px; }
    .delivery-options-row .prodtime-card { padding: 12px; }
    .delivery-options-row .prodtime-icon { font-size: 22px; margin-bottom: 4px; }
    .delivery-options-row .prodtime-title { font-size: 13px; margin-bottom: 3px; }
    .delivery-options-row .prodtime-sub { font-size: 11px; }
  }

  /* v1.117: Ekstra-timer-knap (fil-tilretning) */
  .extra-hours-card {
    border: 2px solid var(--border2);
    border-radius: 8px;
    padding: 14px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
  }
  .extra-hours-card.active {
    border-color: var(--accent);
    background: var(--green-bg);
  }
  .extra-hours-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .extra-hours-icon {
    font-size: 26px;
    line-height: 1;
  }
  .extra-hours-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .extra-hours-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
  }
  .extra-hours-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: white;
    cursor: pointer;
  }
  .extra-hours-select:focus {
    outline: none;
    border-color: var(--accent);
  }
  .extra-hours-summary {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    padding: 6px 8px;
    background: var(--bg);
    border-radius: 4px;
    text-align: center;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .extra-hours-card.active .extra-hours-summary {
    color: var(--green);
    font-weight: 500;
    background: white;
  }
  .prodtime-card {
    border: 2px solid var(--border2);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    background: white;
  }
  .prodtime-card:hover { border-color: var(--muted); background: var(--bg); }
  .prodtime-card.selected {
    border-color: var(--accent);
    background: var(--green-bg);
  }
  .prodtime-icon { font-size: 22px; margin-bottom: 4px; }
  .prodtime-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; color: var(--text); }
  .prodtime-sub { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
  .prodtime-date { font-size: 11px; color: var(--accent); font-weight: 500; min-height: 14px; }
  .prodtime-card.selected .prodtime-date { color: var(--green); }

  /* Produktbillede-panel — per-linje billede */
  .gline-with-image {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .gline-with-image:last-child { border-bottom: none; }
  .gline-main { flex: 1; min-width: 0; }
  .gline-image {
    width: 200px;
    flex-shrink: 0;
  }
  .gline-img-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
  }
  .gline-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .gline-img-wrap {
    background: #f5f5f0;
    border-radius: 5px;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gline-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .gline-img-label {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 9px;
    color: var(--muted);
    background: rgba(255,255,255,0.85);
    padding: 1px 4px;
    border-radius: 2px;
  }
  .gline-img-empty {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    padding: 20px 8px;
    background: var(--bg);
    border-radius: 6px;
  }
  .gline-img-meta {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 768px) {
    .gline-with-image { flex-direction: column; }
    .gline-image { width: 100%; max-width: 300px; }
  }

  /* Gammel prod-imgs-card beholdes pga. bagudkompatibilitet */
  .tilbud-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .prod-imgs-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    position: sticky;
    top: 16px;
  }
  .prod-imgs-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 8px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prod-imgs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .prod-img-wrap {
    background: #f5f5f0;
    border-radius: 6px;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prod-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .prod-img-label {
    position: absolute;
    bottom: 3px; left: 3px;
    font-size: 9px;
    color: var(--muted);
    background: rgba(255,255,255,0.9);
    padding: 1px 5px;
    border-radius: 3px;
  }
  .prod-imgs-empty {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 30px 10px;
  }
  .prod-imgs-meta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    text-align: center;
  }

  /* Felt-label med inline søgefelt (Farve, Brand, Model) */
  .color-field-label,
  .field-label-with-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 3px;
    min-height: 18px;
  }
  .color-search-mini,
  .field-search-mini {
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    width: 90px;
    background: white;
  }
  .color-search-mini:focus,
  .field-search-mini:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

  /* ── v1.129: Tøjliste gitter-visning ── */
  .gv-toggle {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .gv-toggle button {
    border: none;
    background: var(--surface);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--muted);
    font-family: inherit;
    line-height: 1.4;
  }
  .gv-toggle button.active {
    background: var(--accent);
    color: #fff;
  }
  .gv-toggle button:not(.active):hover {
    background: var(--bg);
    color: var(--text);
  }
  .gv-toggle button + button {
    border-left: 1px solid var(--border2);
  }

  .gv-grid {
    display: grid;
    /* v1.167: Fixed 4 kolonner på desktop, responsive på mindre skærme */
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 1024px) {
    .gv-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 700px) {
    .gv-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  }
  .gv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
  }
  .gv-card:hover {
    border-color: var(--border2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .gv-card .img-wrap {
    aspect-ratio: 4/3;
    background: #f5f5f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;  /* v1.171: nødvendig for absolut-positioneret logo-overlay */
  }
  .gv-card .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* v1.171: Brand-logo overlay i top-højre på produktkort i tøjlisten.
     Hvid pille med subtil shadow — fungerer på alle baggrundsfarver. */
  .gv-card .brand-logo-overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 3px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    max-width: 70px;
    max-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;  /* så hover/click går igennem til kortet */
    z-index: 2;
  }
  .gv-card .brand-logo-overlay img {
    max-width: 60px;
    max-height: 18px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .gv-card .img-placeholder {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    padding: 8px;
  }
  .gv-card .info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .gv-card .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .gv-card .name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .gv-card .price {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
  }
  .gv-card .meta {
    font-size: 11px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gv-card .meta-sm {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  /* v1.130: Tilføj-tilbud-knap nederst på hvert kort */
  .gv-card .add-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .gv-card .add-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .gv-card .add-btn:active {
    transform: scale(0.98);
  }
  /* Toast-besked når et produkt tilføjes til tilbud */
  .gv-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: ccfade 0.2s ease-out;
    pointer-events: none;
  }

  /* Detail modal — bygger ovenpå .kat-modal-* */
  .gv-detail-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
  }
  /* v1.172: Tagline (description) under produkt-titlen i header.
     Default: maks 2 linjer + ellipsis. Klik for at toggle expanded. */
  .kat-modal-tagline {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 4px;
    max-width: 80%;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kat-modal-tagline.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .kat-modal-tagline:hover {
    color: var(--text);
  }
  /* v1.172: Brand-logo overlay top-højre i info-kolonnen.
     Lille hvid kasse med tynd border — matcher tøjliste-overlay-stilen.
     v1.173: Fordoblet størrelse for bedre synlighed i produkt-modal. */
  .gv-detail-info {
    position: relative;
  }
  .gv-detail-info .gv-detail-brand-logo {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    max-width: 180px;
    max-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gv-detail-info .gv-detail-brand-logo img {
    max-width: 160px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .gv-detail-img {
    aspect-ratio: 3/4;
    background: #f5f5f0;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .gv-detail-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .gv-detail-info dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 14px;
    font-size: 13px;
    margin: 0;
    align-items: start;
  }
  .gv-detail-info dt {
    color: var(--muted);
    font-size: 12px;
    padding-top: 1px;
  }
  .gv-detail-info dd {
    color: var(--text);
    margin: 0;
  }
  .gv-detail-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .gv-detail-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    cursor: default;
  }
  .gv-detail-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .gv-detail-size-pill {
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    padding: 2px 9px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
  }
  @media (max-width: 600px) {
    .gv-detail-grid {
      grid-template-columns: 1fr;
    }
    .gv-detail-img {
      max-width: 220px;
      margin: 0 auto;
    }
  }

  /* v1.160: Klikbar farve-swatch til detalje-modal — større, hover-effekt, valgt-tilstand */
  .gv-color-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  /* v1.190: Tekniske specs-blok under hovedinfo i produkt-modal.
     Skiller sig fra hovedinfo med en lille gap + svag border-top, og bruger
     samme dl/dt/dd layout som hovedinfo så det matcher visuelt. */
  .gv-specs-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .gv-specs-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .gv-specs-list {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    font-size: 13px;
    margin: 0;
  }
  .gv-specs-list dt {
    color: var(--muted);
    margin: 0;
  }
  .gv-specs-list dd {
    margin: 0;
    color: var(--text);
  }
  /* v1.191a: "Vis mere"-link for lang sammensætning */
  .gv-specs-list .gv-comp-more {
    color: var(--green, #6FA77F);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .gv-specs-list .gv-comp-more:hover {
    text-decoration: underline;
  }
  /* v1.191: Certifikat-pills under specs (GOTS, Øko-Tex, Fair Wear, Vegan).
     Hver pill har sin egen farve så de er nemme at skimme. */
  .gv-cert-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .gv-cert-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .gv-color-pick .swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease;
    flex-shrink: 0;
  }
  .gv-color-pick .swatch.has-border {
    border-color: var(--border2);
  }
  .gv-color-pick .swatch:hover {
    transform: scale(1.08);
  }
  .gv-color-pick .swatch.selected {
    border-color: var(--green, #6FA77F);
    box-shadow: 0 0 0 1.5px white inset, 0 0 0 1.5px var(--green, #6FA77F);
  }

  /* v1.167: Lyntilbud i produkt-modal — trykpositioner + pris-sammendrag */
  .lt-section {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .lt-section-h {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lt-section-h .hint {
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
  }
  .lt-pos-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  @media (max-width: 600px) {
    .lt-pos-list { grid-template-columns: 1fr; }
  }
  /* v1.205: Produktionstid-kort i lyntilbud */
  .lt-pt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  @media (max-width: 600px) { .lt-pt-grid { grid-template-columns: 1fr; } }
  .lt-pt-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 8px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
  }
  .lt-pt-card:hover { border-color: var(--border2); }
  .lt-pt-card.selected { border: 2px solid var(--green); background: var(--green-bg); padding: 9px 7px; }
  .lt-pt-icon { font-size: 20px; line-height: 1; }
  .lt-pt-name { font-weight: 600; font-size: 13px; color: var(--text); margin: 3px 0; }
  .lt-pt-meta { font-size: 10px; color: var(--muted); }
  .lt-pt-date { font-size: 10px; color: var(--green); background: var(--surface); border-radius: 5px; padding: 1px 6px; margin-top: 5px; display: inline-block; }
  .lt-pt-card.selected .lt-pt-date { background: #fff; }
  .lt-pos-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--border2);
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    margin: 0;
  }
  .lt-pos-row.active {
    border-color: var(--green, #6FA77F);
    background: rgba(111, 167, 127, 0.04);
  }
  .lt-pos-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--green, #6FA77F);
  }
  .lt-pos-info { flex: 1; min-width: 0; }
  .lt-pos-name {
    font-weight: 500;
    color: var(--text);
    font-size: 12px;
  }
  .lt-pos-meta {
    font-size: 10px;
    color: var(--muted);
    margin-top: 1px;
  }
  .lt-size-toggles {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .lt-size-toggle {
    padding: 4px 8px;
    background: white;
    font-size: 11px;
    cursor: pointer;
    border-right: 1px solid var(--border2);
    color: var(--muted);
    line-height: 1.3;
    user-select: none;
  }
  .lt-size-toggle:last-child { border-right: none; }
  .lt-size-toggle.active {
    background: var(--green, #6FA77F);
    color: white;
    font-weight: 500;
  }

  /* Pris-sammendrag */
  .lt-summary {
    margin-top: 14px;
    padding: 14px 16px;
    background: white;
    border: 2px solid var(--green, #6FA77F);
    border-radius: 6px;
  }
  .lt-summary-h {
    font-size: 12px;
    font-weight: 500;
    color: var(--green, #6FA77F);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .lt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    /* v1.186: Strammere linjeafstand jf. Jakob's ønske */
    padding: 1.5px 0;
    line-height: 1.35;
  }
  .lt-row .lbl { color: #555; }
  .lt-row .val {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .lt-row .strike {
    text-decoration: line-through;
    color: #aaa;
    margin-right: 6px;
    font-size: 11px;
  }
  .lt-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }
  .lt-row.total {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border2);
  }
  .lt-row.subtle {
    font-size: 11px;
    color: var(--muted);
    padding-top: 0;
  }
  .lt-row.subtle .val { color: var(--muted); }
  .lt-row.unit-price {
    background: rgba(111, 167, 127, 0.08);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 8px -4px 4px;
    font-size: 12px;
    font-weight: 500;
  }
  .lt-row.unit-price .val {
    color: var(--green, #6FA77F);
    font-size: 13px;
  }
  .lt-row.unit-price-vat {
    background: rgba(111, 167, 127, 0.04);
    border-radius: 4px;
    padding: 4px 10px;
    margin: 0 -4px 0;
    font-size: 11px;
  }
  .lt-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    background: var(--bg);
    border-radius: 6px;
    border: 1px dashed var(--border2);
    margin-top: 14px;
  }

  /* v1.160: Størrelse-grid med antal-input pr. størrelse */
  .gv-size-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .gv-size-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .gv-size-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
  .gv-size-total {
    background: var(--green, #6FA77F);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
  }
  .gv-size-total.empty { background: var(--border2); color: var(--muted); }
  .gv-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 10px;
  }
  .gv-size-cell {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .gv-size-cell .lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    margin-bottom: 4px;
  }
  .gv-size-cell input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 14px;
    text-align: center;
    font-family: 'DM Mono', monospace;
    background: white;
    width: 100%;
  }
  .gv-size-cell input:focus {
    border-color: var(--green, #6FA77F);
    outline: 2px solid rgba(111,167,127,0.18);
    outline-offset: 0;
  }
  /* v1.185b: Lille pris-tag under input — kun synligt når variant-priser findes */
  .gv-size-cell .gv-size-price {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    margin-top: 2px;
    font-family: 'DM Mono', monospace;
    line-height: 1.2;
  }
  .gv-size-cell input:disabled {
    background: var(--bg);
    color: var(--muted);
    cursor: not-allowed;
  }

  /* v1.160: "Vælg en farve først"-tomt state for size-grid */
  .gv-size-empty {
    text-align: center;
    padding: 20px;
    color: var(--muted);
    font-size: 12px;
    background: var(--bg);
    border-radius: 6px;
  }

  /* ── v1.164b: Tilbudsside restyle — kompakt 3-kolonne layout ── */
  /* Alle inputs har præcis samme højde (34px) for visuel baseline-alignment */
  .qd-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.4fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 10px;
  }
  .qd-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .qd-field label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 4px;
    height: 14px;
    line-height: 14px;
    display: block;
    text-transform: none;
    letter-spacing: 0;
  }
  .qd-field label .opt {
    color: #bbb;
    font-weight: 400;
  }
  .qd-field input[type="text"],
  .qd-field select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border2);
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: white;
    width: 100%;
    box-sizing: border-box;
  }
  .qd-field input[type="text"]:focus,
  .qd-field select:focus {
    border-color: var(--green, #6FA77F);
    outline: 2px solid rgba(111,167,127,0.18);
    outline-offset: 0;
  }
  /* Kunde-felt med + Ny-knap til siden */
  .qd-kunde-row {
    display: flex;
    gap: 6px;
    height: 34px;
    position: relative;
  }
  .qd-kunde-row input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border2);
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: white;
  }
  .qd-kunde-row input:focus {
    border-color: var(--green, #6FA77F);
    outline: 2px solid rgba(111,167,127,0.18);
    outline-offset: 0;
  }
  .qd-btn-mini {
    height: 34px;
    padding: 0 14px;
    background: white;
    border: 1px solid var(--border2);
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    color: var(--text);
    flex-shrink: 0;
  }
  .qd-btn-mini:hover { background: var(--bg); }
  /* Leveringsadresse-checkbox (samme højde som inputs) */
  .qd-delivery-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 0;
    /* v1.164c: Ingen border/baggrund — bare checkbox + label på linje med inputs */
  }
  .qd-delivery-mini input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--green, #6FA77F);
  }
  .qd-delivery-mini .qd-lbl {
    font-size: 13px;
    color: var(--text);
    line-height: 1;
    flex: 1;
  }
  .qd-delivery-mini.active .qd-lbl { font-weight: 500; color: var(--green, #6FA77F); }
  /* Sub-info banner (kunde-detaljer) — samme bredde som inputs i kolonnen */
  .qd-sub-info {
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
    padding: 6px 10px;
    background: var(--bg);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .qd-sub-info .qd-link {
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
  }
  .qd-sub-info .qd-link:hover { color: var(--text); text-decoration: underline; }
  .qd-active-summary {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(111, 167, 127, 0.25);
    border-radius: 4px;
    background: rgba(111, 167, 127, 0.04);
    font-size: 11px;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .qd-active-summary .qd-link {
    color: var(--green, #6FA77F);
    font-size: 11px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
  }
  .qd-active-summary .qd-link:hover { text-decoration: underline; }
  .qd-hint {
    margin-top: 4px;
    font-size: 11px;
    color: #aaa;
    line-height: 1.3;
  }
  /* Mobile: stack columns */
  @media (max-width: 700px) {
    .qd-row { grid-template-columns: 1fr; gap: 10px; }
  }

  /* v1.164b: Leveringsadresse-modal — bygger på eksisterende color-popup-overlay-pattern */
  .lev-modal {
    background: white;
    border-radius: 8px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
  }
  .lev-modal-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lev-modal-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
  }
  .lev-modal-head .lev-x {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .lev-modal-body { padding: 18px 20px; }
  .lev-modal-body .lev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lev-modal-body .lev-full { grid-column: 1 / -1; }
  .lev-modal-body .lev-field {
    display: flex;
    flex-direction: column;
  }
  .lev-modal-body .lev-field label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 3px;
  }
  .lev-modal-body input,
  .lev-modal-body select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border2);
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    background: white;
  }
  .lev-modal-body input:focus,
  .lev-modal-body select:focus {
    border-color: var(--green, #6FA77F);
    outline: 2px solid rgba(111,167,127,0.18);
  }
  .lev-modal-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  /* ── v1.166: Aktive filter-chips ── */
  .gv-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .gv-chips-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
  }
  .gv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 4px 4px 10px;
    background: white;
    border: 1px solid var(--border2);
    border-radius: 14px;
    font-size: 12px;
    color: var(--text);
    line-height: 1;
    user-select: none;
  }
  .gv-chip .gv-chip-cat {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 500;
    margin-right: 2px;
  }
  .gv-chip .gv-chip-cat.brand     { color: #6FA77F; }
  .gv-chip .gv-chip-cat.kategori  { color: #c97b3a; }
  .gv-chip .gv-chip-cat.farve     { color: #a8459a; }
  .gv-chip .gv-chip-cat.str       { color: #3a78c9; }
  .gv-chip .gv-chip-cat.kilde     { color: #888; }
  .gv-chip .gv-chip-x {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--muted);
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-size: 13px;
    padding: 0;
    transition: background 0.12s, color 0.12s;
  }
  .gv-chip .gv-chip-x:hover {
    background: rgba(208, 92, 92, 0.18);
    color: #c33;
  }
  .gv-chip .gv-chip-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
  }
  .gv-chips-clear {
    margin-left: auto;
    padding: 4px 10px;
    background: white;
    border: 1px solid var(--border2);
    border-radius: 14px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
  }
  .gv-chips-clear:hover {
    color: var(--text);
    background: var(--bg);
  }

  /* ── v1.173: Quick filter-bar med brand-logoer ── */
  .gv-qf {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .gv-qf-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-right: 4px;
    font-weight: 500;
    white-space: nowrap;
  }
  .gv-qf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    min-width: 90px;
    height: 38px;
    cursor: pointer;
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
    user-select: none;
  }
  .gv-qf-btn:hover:not(.active) {
    border-color: var(--border2);
    background: #fafafa;
  }
  .gv-qf-btn.active {
    border: 2px solid #6FA77F;
    background: #eaf6ee;
    padding: 3px 9px;  /* kompenserer for 1px ekstra border */
  }
  .gv-qf-btn img {
    max-width: 80px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }
  .gv-qf-btn .gv-qf-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.02em;
  }

  /* ── v1.131: Filter-sidebar layout ── */
  .gv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .gv-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .gv-search-wrap {
    position: relative;
    width: 240px;
  }
  .gv-search-wrap::before {
    content: '🔍';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.55;
    pointer-events: none;
  }
  .gv-search-wrap input[type=text] {
    width: 100%;
    padding-left: 30px;
  }
  .gv-search-wrap .clear-x {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    user-select: none;
  }
  .gv-search-wrap .clear-x:hover { color: var(--text); }
  .gv-sort-select {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
  }

  .gv-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: start;
  }
  .gv-sidebar {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 12px;
    max-height: 75vh;
    overflow-y: auto;
    position: sticky;
    top: 12px;
  }
  .gv-sidebar:empty { display: none; }
  /* v1.133: Tydelig Nulstil-knap øverst i sidebar */
  .gv-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .gv-reset-btn:not(:disabled):hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .gv-reset-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .gv-reset-btn .arrow {
    font-size: 13px;
    line-height: 1;
  }
  .gv-reset-btn .cnt-pill {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 500;
  }
  .gv-reset-btn:hover .cnt-pill {
    background: #fff;
    color: var(--accent);
  }
  .gv-fgroup {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .gv-fgroup:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .gv-fgroup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .gv-fgroup-header:hover .gv-ftitle { color: var(--text); }
  .gv-fgroup-header .caret {
    font-size: 9px;
    color: var(--muted);
    width: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .gv-fgroup.collapsed .caret {
    transform: rotate(-90deg);
  }
  .gv-ftitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
  }
  .gv-active-cnt {
    font-size: 10px;
    font-weight: 500;
    background: var(--accent);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
  }
  .gv-fgroup-body {
    overflow: hidden;
  }
  .gv-fgroup.collapsed .gv-fgroup-body {
    display: none;
  }
  /* v1.145: lille søgefelt i filter-gruppe header */
  .gv-fgroup-search {
    width: 100%;
    padding: 4px 8px 4px 24px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
    color: var(--text);
    margin-bottom: 6px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='4' cy='4' r='3' stroke='%237a7870' stroke-width='1' fill='none'/><line x1='6.2' y1='6.2' x2='9' y2='9' stroke='%237a7870' stroke-width='1' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: 7px center;
  }
  .gv-fgroup-search:focus {
    outline: none;
    border-color: var(--accent);
  }
  .gv-fgroup.collapsed .gv-fgroup-search {
    display: none;
  }
  .gv-fgroup-empty {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    padding: 4px 0;
  }
  .gv-fopt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    line-height: 1.3;
  }
  .gv-fopt input[type=checkbox] {
    margin: 0;
    width: 13px;
    height: 13px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
  }
  .gv-fopt .lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gv-fopt .cnt {
    color: var(--muted);
    font-size: 10px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .gv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .gv-sw {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    cursor: pointer;
    transition: transform 0.1s ease;
  }
  .gv-sw:hover { transform: scale(1.15); }
  .gv-sw.on {
    box-shadow: 0 0 0 2px var(--accent);
    border-color: var(--surface);
  }
  .gv-size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  /* v1.146: Subheader for Voksen/Børn-grupperinger */
  .gv-size-subheader {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
  }
  .gv-size-pill {
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    padding: 3px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    user-select: none;
  }
  .gv-size-pill:hover {
    border-color: var(--border2);
  }
  .gv-size-pill.on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .gv-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }
  .gv-price-row input[type=number] {
    width: 64px;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    -moz-appearance: textfield;
  }
  .gv-price-row input[type=number]::-webkit-outer-spin-button,
  .gv-price-row input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .gv-result-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
  }
  .gv-result-meta b {
    color: var(--text);
    font-weight: 500;
  }
  .gv-reset-link {
    color: var(--text);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--border2);
    text-underline-offset: 3px;
    font-size: 12px;
  }
  .gv-reset-link:hover {
    text-decoration-color: var(--text);
  }
  .gv-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 13px;
  }
  .gv-no-results .icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }

  /* Mobile: stack sidebar above content */
  @media (max-width: 800px) {
    .gv-layout {
      grid-template-columns: 1fr;
    }
    .gv-sidebar {
      position: static;
      max-height: none;
    }
    .gv-search-wrap {
      width: 100%;
    }
  }

  /* ── v1.135: Mockup-administration tab ── */
  .ms-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }
  .ms-head-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .ms-search-wrap {
    position: relative;
  }
  .ms-search-wrap::before {
    content: '🔍';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.55;
    pointer-events: none;
  }
  .ms-search-wrap input {
    padding: 6px 10px 6px 30px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 200px;
    font-family: inherit;
  }
  .ms-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .ms-meta-row b {
    color: var(--text);
    font-weight: 500;
  }
  .ms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ms-row {
    display: grid;
    grid-template-columns: 56px 1fr 90px 60px auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: opacity 0.15s, background 0.15s;
  }
  .ms-row.disabled {
    opacity: 0.5;
  }
  .ms-row.disabled .ms-thumb {
    filter: grayscale(0.5);
  }
  .ms-thumb {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .ms-thumb img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
  }
  .ms-thumb .placeholder {
    font-size: 18px;
    color: var(--muted);
  }
  .ms-info {
    min-width: 0;
  }
  .ms-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }
  .ms-label-input {
    font-size: 13px;
    font-weight: 500;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    flex: 1;
    min-width: 0;
    color: var(--text);
  }
  .ms-label-input:hover, .ms-label-input:focus {
    background: var(--surface);
    border-color: var(--border);
    outline: none;
  }
  .ms-label-input:focus {
    border-color: var(--accent);
  }
  .ms-key-badge {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    background: var(--surface);
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--border);
    white-space: nowrap;
  }
  .ms-status {
    font-size: 11px;
    color: var(--muted);
  }
  .ms-status.saved {
    color: var(--green);
  }
  .ms-status.custom {
    color: var(--blue);
  }
  .ms-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--border2);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    border: none;
    padding: 0;
  }
  .ms-toggle.on {
    background: var(--accent);
  }
  .ms-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.15s;
  }
  .ms-toggle.on::after {
    left: 18px;
  }
  .ms-row-actions {
    display: flex;
    gap: 4px;
  }
  .ms-icon-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    color: var(--text);
    font-family: inherit;
    transition: background 0.1s, border-color 0.1s;
  }
  .ms-icon-btn:hover:not(:disabled) {
    background: var(--bg);
    border-color: var(--border2);
  }
  .ms-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .ms-no-results {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    padding: 30px 12px;
  }
  .ms-warn {
    font-size: 12px;
    color: var(--amber);
    background: var(--amber-bg);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    border: 1px solid #f0d4a0;
  }
  @media (max-width: 700px) {
    .ms-row {
      grid-template-columns: 56px 1fr auto;
    }
    .ms-row .ms-status,
    .ms-row .ms-toggle {
      grid-column: 1 / -1;
    }
  }

  /* ── v1.136: Mockup-upload modal ── */
  .mu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
  }
  .mu-side h4 {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
  }
  .mu-zone {
    aspect-ratio: 1;
    border: 2px dashed var(--border2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .mu-zone:hover {
    border-color: var(--accent);
    background: var(--surface);
  }
  .mu-zone.drag-over {
    border-color: var(--accent);
    background: var(--green-bg);
  }
  .mu-zone.has-image {
    border-style: solid;
    border-color: var(--border);
    cursor: default;
    background: #fff;
  }
  .mu-zone.has-image:hover {
    border-color: var(--border2);
  }
  .mu-zone img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
  }
  .mu-empty {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 12px;
    pointer-events: none;
  }
  .mu-empty .label {
    font-weight: 500;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 4px;
  }
  .mu-empty svg {
    opacity: 0.4;
    margin-bottom: 8px;
  }
  .mu-zone-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .mu-zone.has-image:hover .mu-zone-actions {
    opacity: 1;
  }
  .mu-zone-action {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .mu-zone-action:hover {
    background: var(--bg);
  }
  .mu-zone-uploading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    backdrop-filter: blur(2px);
  }
  .mu-warn {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid #f0d4a0;
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    font-size: 12px;
    margin-top: 10px;
  }
  .mu-source-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .mu-source-badge.custom {
    background: var(--blue-bg);
    color: var(--blue);
    border-color: #a8c4e0;
  }


/* ===== Block 2: login overlay v196 (was before #loginOverlay) ===== */
  #loginOverlay { font-family: inherit; }
  .v196-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: #f7f5f0;
    overflow: auto;
  }
  .v196-loginpane {
    flex: 0 0 460px;
    max-width: 42%;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    min-height: 100vh;
  }
  .v196-heropane {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f7f5f0;
    min-height: 100vh;
  }
  .v196-globe {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: min(620px, 95%);
    height: auto;
    max-height: 90%;
  }
  .v196-statpill {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 3;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    padding: 9px 16px;
    border-radius: 100px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .v196-legend {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 11px;
  }
  .v196-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    background: #f9fafb;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .v196-input:focus {
    border-color: #2d8b4e;
    background: #fff;
  }
  .v196-loginbtn {
    width: 100%;
    padding: 12px;
    background: #2d8b4e;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  .v196-loginbtn:hover { background: #247341; }
  .v196-catalogbtn {
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #1a1a1a;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.15s, background 0.15s;
  }
  .v196-catalogbtn:hover {
    border-color: #2d8b4e;
    background: #f9fafb;
  }

  /* TABLET (≤1024px): mindre login-pane, mindre padding */
  @media (max-width: 1024px) {
    .v196-loginpane {
      flex: 0 0 400px;
      padding: 40px 32px;
    }
  }

  /* MOBIL (≤900px): stacked layout */
  @media (max-width: 900px) {
    .v196-wrap {
      flex-direction: column;
      overflow-y: auto;
    }
    .v196-heropane {
      flex: 0 0 240px;
      min-height: 240px;
      max-height: 240px;
    }
    .v196-loginpane {
      flex: 1 1 auto;
      max-width: 100%;
      width: 100%;
      padding: 32px 28px;
      border-right: none;
      border-top: 1px solid rgba(0,0,0,0.05);
      min-height: auto;
    }
    .v196-globe {
      right: 50%;
      top: 50%;
      transform: translate(50%, -50%);
      width: min(380px, 90%);
      max-height: 100%;
    }
    .v196-statpill {
      top: 14px;
      right: 14px;
      padding: 6px 12px;
      font-size: 10px;
    }
    .v196-legend {
      display: none;
    }
  }

  /* LILLE MOBIL (≤500px): endnu kompaktere */
  @media (max-width: 500px) {
    .v196-heropane {
      flex: 0 0 180px;
      min-height: 180px;
      max-height: 180px;
    }
    .v196-loginpane {
      padding: 24px 20px;
    }
    .v196-globe {
      width: min(300px, 90%);
    }
    .v196-h1 { font-size: 24px !important; }
    .v196-input, .v196-loginbtn, .v196-catalogbtn {
      padding: 13px;
      font-size: 15px;
    }
  }

/* ===== Block 3: order-detail v1.249 (was in settings panel) ===== */
    /* v1.249: Kompakt ordredetaljer-redesign */
    .qd-row2 { display:grid; grid-template-columns: 1.6fr 1fr; gap:14px; align-items:start; margin-bottom:12px; }
    .qd-controls { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; align-items:start; margin:4px 0 14px; }
    .qd-ctrl { display:flex; flex-direction:column; min-width:0; }
    .qd-ctrl-label { font-size:13px; font-weight:500; margin-bottom:8px; color:var(--text); }
    @media (max-width:760px){
      .qd-row2 { grid-template-columns:1fr; gap:10px; }
      .qd-controls { grid-template-columns:1fr; gap:12px; }
    }
    .qd-chips-row { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-start; }
    .qd-chip-wrap { display:flex; flex-direction:column; gap:4px; }
    .qd-chips-row .qd-active-summary { margin-left:24px; }